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 (2 Methods)

Make sure the bot has been loaded on the page. This allows the Javascript API function to be initialized so you are able to call it via a web page button.

If the bot is initialized and closed (hidewindow attribute is true) and you click on the button, the keyword will trigger as soon as the first bot message has been sent, so build your bot accordingly (e.g. having a multiple choice box as a root node would be recommended). Otherwise, the keyword will just be sent.

There are two ways to sending a keyword to the web bot:

OPTION 1

We can use a Javascript API call to send a keyword. Attach an event listener to your web page’s button(s) that will call the chatbot.sendChatbotKeyword() function. You can pass in a parameter with the keyword of your choice.

e.g. chatbot.sendChatbotKeyword(“Visit a Doctor“)

An example of the html code would look like:

<button id="button1">Send Keyword</button>

<script>
    // Attach event listener to the button
    document.getElementById('button1').addEventListener('click', function() {
        chatbot.sendChatbotKeyword('Visit a Doctor');
    });
</script>

OPTION 2

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:

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

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

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

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

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>

Re-initializing Chatbots

A Web app may sometimes need to reset a Web bot, that is, clear the chat history, create a fresh userid and chat session, and start the bot from the beginning. For example, if the Web bot is behind a login screen, you may want to reset it when a new user logs in.

For that, you can call the Javascript chatbot.reinitializeApp() function, which re-initializes (resets) the web bot. You can test this function via the browser’s console, or use it in your javascript code.

Example htmL/js code

This is how you can add a button to your HTML page that calls the reinitializeApp function:

<!DOCTYPE html>
<html>
<head>
  <title>Web Bot Reinitialization</title>
</head>
<body>
  <button id="reinitializeBot">
    Reinitialize Bot
  </button>

  <script>
    // Adding event listener to the Reinitialize Bot button
    document.getElementById('reinitializeBot').addEventListener('click', function(){
        if (chatbot && typeof chatbot.reinitializeApp === 'function') { // Checks if chatbot is defined and reinitializeApp is a function
            chatbot.reinitializeApp();
        } else {
        console.error('chatbot or reinitializeApp function is not defined');
        }
    });
  </script>

  // Your chat bot snippet here
</body>
</html>