Web Bot Attributes

It is easy to customize the looks and functionality of the Web Bot, by modifying the values of the attributes in the HTML snippet. Let’s start with a default snippet generated when deploying Web Bot, and see how we can customize it.

<div id="smartbotstyles"></div><div id="smartbot360" picture="true" hidewindowmobile="true" hidewindow="false" autologoff="true" autostart="true" botkey="PHQ9" bot-title="SMARTBOT360"><script type="text/javascript" src="https://demo.smartbot360.com/react/static/js/main.js"></script>

An attribute has the form name=”value”, e.g., picture="true".

Here is the list of attributes:

  • botkey: api key for the bot; don’t change it

  • bot-title: bot title, displayed at the top of the Web Bot window

  • hidewindow: hides the bot when page is initially loaded if “true”

  • hidewindowmobile: hides the bot on load (for mobile only)

  • autologoff: logs out and closes if no messages are sent or received in 15 minutes; needed for HIPAA compliance

  • autostart: bot sends first message without the user sending any message

  • picture: allow user to send picture or other attachment

  • botwidth: percentage of browser's window width. example botwidth="20%", or botwidth="150px" for fixed width

  • isfullbotheight: set Web Bot window to full height, example isfullbotheight="true"

  • chaticon: use custom chat icon (icon to click to open window), example chaticon="https://placehold.it/image.png"

  • chatavatar: use custom chat avatar in messaging window (avatar that responds to messages), and in the chat bot header (avatar on the top left), example chatavatar="https://placehold.it/icon.png"

  • embeddable: embed bot in Web page, instead of having it in bottom right corner. Example: embeddable="true"

  • userMessageColor : allows users to have the user messages sent in the bot to be styled for their own website's UI. Example userMessageColor="#ffbbaa". To find a color’s hex value click here https://htmlcolorcodes.com/color-picker/

  • botMessageColor : allows users to have the bot messages sent in the bot to be styled for their own website's UI. Example botMessageColor="#ffbbaa". To find a color’s hex value click here https://htmlcolorcodes.com/color-picker/

  • headerColor : allows users to change the header color of the bot. Example headerColor="#ffbbaa". To find a color’s hex value click here https://htmlcolorcodes.com/color-picker/

  • removelink: remove the smartbot360.com link located at the bottom of the Web Bot, e.g., removelink="true"

  • botheight: percentage of the browser's window height. example botheight="70%"

  • agentstatus: show agent status (offline or online) by setting agentstatus = "boolean". Show the estimated time for an agent to take over the bot conversation by setting agentstatus = "estimatedTime". Example agentstatus="boolean" or agentstatus="estimatedTime" or agentstatus="off". The formula for estimatedTime is (#onlineusers+1)*timeperuser/#onlineagents

  • timeperuser: set estimated agent time in seconds needed per user. Example timeperuser="70"

  • talktoagent: displays on the web-bot a "TALK TO AGENT" button, which inserts user to the agent queue. Example: talktoagent="true"

  • fontsize: change the font size of the web-bot. The available sizes are "small", "medium", "large", "x-large". Example: fontsize="large"

  • popmessage: allows user to see a pop up message next to the bot icon when the bot is closed. Example: popmessage="Click here to chat"

 
popmessage.PNG
 
  • popupboticon: allows user to set the popup bot icon. By default the icon is set to SmartBot360 company logo. Example: popupboticon="https://placehold.it/image.png"

  • sticky: bot continues when you refresh web page or if you move to another page that has the same bot, while you stay in the same tab of the browser. Example: sticky="true"