Start Chatbot on button click

[Sylg]

Hi all,

I have a button in my navbar and footer to "book a demo". I want that button to start a chatbot flow.

I tried by having the bot available on "all pages". and setting hsConversationsSettings param loadImmediately to false like so

window.hsConversationsSettings = {
  loadImmediately: false,
}

I then have an onclick function on my button to load the widget like so

var DemoButton.onclick = function() {window.HubSpotConversations.widget.load({ widgetOpen: true });};

This works well but because my default is not to load the chatWidget, all of my other chatflows are not ON by default (for example, on /pricing or /product).

Is there a way to trigger a chatflow/bot by onlick? 

[WendyGoh]

Hey @Sylg,

In this case, perhaps you could explore the option of creating two chat bot?

One chat bot is the default bot that will load by default and another bot is the one that you'd like to load after you click the 'Book a demo' button? 

[Sylg]

Yes, that sounds good. But how do I call/trigger a specific code with the Javascript SDK?  AFAIK, you can only "show the widget" via code.

[WendyGoh]

Hey @Sylg,

One workaround is that your team can try triggering the chat flow based on a query parameter, and add that query parameter to the URL when a visitor clicks the “request a demo” button. 

Within the chatflow target rules, they can set the website page whose URL includes specific query parameters. You can learn more on this article Create a live chat; specifically under point 2.

[Sylg]

Thanks for this.

But if I do this with code, It still refresh the full page. For example

I'm on /product with the request demo button

var footerDemoButton = document.getElementsByClassName("schedule-demo-button-footer")


footerDemoButton.href = "?request-demo-chat=true";
// the chatflow is triggered to pop up with that query param

full HREF is correct at /product?request-demo-chat=true

However, if the user click that link, the page will fully refresh and then the chat will pop up. I want to not have to the page refresh. Just pop up the chat.

If I disable the link (no refresh) with the below code

footerDemoButton.addEventListener("click", function(event){
    event.preventDefault()
});

then there is no refresh but the chat doesn't pop up.

is there something I'm doing wrong?

[WendyGoh]

Hey @Sylg,

Our team did some testing and you might be able to load the widget without a page refresh by using the following:

window.history.pushState({}, 'bot', '?bot=true');
window.HubSpotConversations.clear({resetWidget:true});

and ensure that the chatflow is setup to display with "open the chat widget" in the display options.

[ScottKiessig]

Hey @WendyGoh ! Stumbled on your message and this is exactly what I am trying to do.

How can I direct a button to load a different chat bot than the default one for the page?