Trigger Web Chatbot Using Web Button

Sometimes, you may want a button on a Web page to trigger a Web bot. For example, if a Web bot is minimized, pressing a button may open it. Or, in addition to opening a Web bot, the button can also send a keyword to the bot (useful if a bot is triggered by a hashtag).

Start web bot by clicking a button on Squarespace

Instead of having the bot icon show automatically on the bottom right of a page, you may prefer to have a button open the web bot. The below instructions work for Squarespace sites. You may try to modify them for other hosting sites, or contact us for help.

First, go to your Squarespace page and add a Code block.

Create a button and apply styling with the following example html code below.

<button style="color:white;
background-color:green;
font-size: 24px;
text-align: center;
cursor: pointer;
padding: 15pm 32pm;" onclick="myFunction()">Click me</button>

This code will display the following button:

Add the following script right below the html code for the button inside the Code block. Note that you must change the “Bot Key” to the Bot key given when you deployed your web bot. You must also change “ServerURL” to your dashboard url e.g. https://testserver.smartbot360.com

<script> function myFunction() {

if (document.getElementById("smartbotstyles")) { document.body.removeChild(document.getElementById("smartbotstyles")); document.body.removeChild(document.getElementById("smartbot360"));

document.body.removeChild(document.getElementById("script"));

}

var smartbotstyles = document.createElement("div");

smartbotstyles.setAttribute("id", "smartbotstyles");

var smartbot360 = document.createElement("div");

smartbot360.setAttribute("id", "smartbot360");

var script = document.createElement("script");

script.setAttribute("id","script");

smartbot360.setAttribute("botkey", "Bot Key");

script.setAttribute("type", "text/javascript");

script.setAttribute("src", “ServerURL + /react/static/js/main.js");

document.body.appendChild(script);

document.body.appendChild(smartbot360);

document.body.appendChild(smartbotstyles);

} </script>

How to send a keyword to the web bot

We can use a button on the same page where the web bot is deployed to send a keyword to the bot. This is useful if we want to trigger a second chatbot in the same Web bot window. That is, if we deploy multiple bots (with different hashtags) on the same bot key, we can use this technique to trigger one of these bots by clicking a button. This can also be extended to multiple buttons/keywords.

First, make sure that the button on the page has an “id“ attribute. For example:
<button id=”jumpButton”> Click Here </button>

Note that is this example the button has an “id” attribute of jumpButton

Now we need to set the keyword that you want to be sent. To do this, you need to manually edit the snippet of the bot you have on your Web page. Within the snippet, you need to add an attribute to the bot named “keyword”. We can do this by adding:
smartbot360.setAttribute("keyword", '{"jumpButton": "Check Eligibility"}')

For example, the snippet would now look like:

var smartbot360 = document.getElementById("smartbot360");

var script = document.createElement("script");

smartbot360.setAttribute("botkey", "42650cfa-dd38-4102-a573-f1524cff3123");

smartbot360.setAttribute("keyword", '{"jumpButton": "Check Eligibility"}')

smartbot360.setAttribute("hidewindow", "true")

script.setAttribute("type", "text/javascript");

script.setAttribute("src", "https://smartbot360.com/react/static/js/main.js");

document.body.appendChild(script);

})(); </script>

Now when the user clicks the button with the id of jumpButton, “Check Eligibility“ will be sent to the chat as if a user typed. If the bot window is closed when the button is pressed, the bot window will open and the message will be sent.

This feature supports multiple buttons as well. To add multiple buttons, we set it up similarly to the way we setup one button. The webpage would contain two buttons:

<button id=”jumpButton”> Click Here </button>

…

<button id=”submitHere”> Submit </button>

and then the bot snippet should look like: