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

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