Web Bot Attributes

webbot.PNG

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"></div> <script> (function() { var smartbot360 = document.getElementById("smartbot360"); var script = document.createElement("script"); smartbot360.setAttribute("picture", "true"); smartbot360.setAttribute("hidewindowmobile", "true"); smartbot360.setAttribute("hidewindow", "false"); smartbot360.setAttribute("autologoff", "true"); smartbot360.setAttribute("autostart", "true"); smartbot360.setAttribute("botkey", "PHQ9"); smartbot360.setAttribute("bot-title", "SMARTBOT360"); smartbot360.setAttribute("sticky", "true"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", "https://demo1.smartbot360.com/react/static/js/main.js"); document.body.appendChild(script); })(); </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: [applies to desktop view] hides the bot when page is initially loaded if “true”, example hidewindow="true"

  • hidewindowmobile: [applies to mobile view] hides the bot on load when “true”, example hidewindowmobile="true"

  • 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"

  • displayPopupOnce: hides popup message if user opens and closes the chatbot window. Example displayPopupOnce="true"

  • 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"

  • hideEmojiButton: allows user to hide the emoji icon button in the webbot. Example hideEmojiButton="true"

  • bkgrndimg: allows user to choose a background image behind the chatbot message area. Example `bkgrndimg="https://placehold.it/image.png"`