Trigger a chatflow bot using a JavaScript function

[thofman]

Hi,

I am trying to get a chatflow bot to trigger using a JavaScript function on our website. I've created a bot under Conversations -> Chatflows. Is this possible?

Thanks,

Tim

[Willson · Accepted solution]

Hey @thofman 

This is indeed possible, depending on your function itself, if you control the chat widget and how it loads. 

In this case, you can trigger the chat widget to load after your function fires using:

window.HubSpotConversations.widget.load();

/* ... */

// Force the widget to load in an open state
window.HubSpotConversations.widget.load({ widgetOpen: true });

This is documented in our Conversations Widget SDK found here. 

A basic example of this in-use is when pressing a button to begin a conversation:

<script type="text/javascript">

                function myFunction() {

                  var emailInput = prompt("Please enter Email");
                        console.log("User entered the email, " + emailInput);
 
                    if(emailInput) {
                          var _hsq = window._hsq = window._hsq || [];
                          _hsq.push(["identify",{
                            email:emailInput,
                            api: "True"}]); //Identify User
                          _hsq.push(["trackEvent",{
                            id:"User asked for Support"}]); //Track Event

                          console.log("hsq.push - email equals: " + emailInput);
                          /*
                            Load Chat Widget in Open State
                          */
                          const status = window.HubSpotConversations.widget.status();

                              if (status.loaded) {
                                window.HubSpotConversations.widget.refresh();
                              } else {
                                window.HubSpotConversations.widget.load({ widgetOpen: true });
                              }
                        }
                  }
            </script>

In this example, we call the Tracking Code API and also the Conversations Widget API to load the chat once an email has been provided. 

I hope this helps!