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? 

[EBakker]

Hi, 

How would this work on a wordpress site? 

It typically has 2 CTAs per page that should start 2 different bots

[MatthewShepherd]

Hi @EBakker 
As long as you have the HubSpot tracking code installed and can add the link HTML as written this should work on WordPress too.

[PatrickSu]

Thank you @MatthewShepherd 
That sounds cool and I'm planning to give it a try on my HS landing page. However...I'm no web-dev. I'm wondering if anyone could kindly provide instructions on how I would embed
<a href="#" onclick="window.history.pushState({}, 'bot', '?bot=salesbot');window.HubSpotConversations.clear({resetWidget:true});">Chat with Sales</a>

into a HS landing page button? Thank you so much!🙏

[MatthewShepherd]

Hi @PatrickSu 

You can paste this code into the source code of a rich text module on your landing page. 

[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? 

[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?

[MatthewShepherd]

Hi @ScottKiessig 

Using the above method would allow you to create a number of different chatflows that are tied to trigger based on query parameters and not actual page URLs/paths. As such you could have a number of different links/buttons on your page that would push different parameter values into your URL and therefore load different chat widgets,

e.g. 

<a href="#" onclick="window.history.pushState({}, 'bot', '?bot=salesbot');window.HubSpotConversations.clear({resetWidget:true});">Chat with Sales</a>

<a href="#" onclick="window.history.pushState({}, 'bot', '?bot=supbot');window.HubSpotConversations.clear({resetWidget:true});">Chat with Support</a>

[alisongraham]

Hi @MatthewShepherd - we have an external website and I'd like to configure a chatflow bot to appear on button click - would this code work in that situation?

<a href="#" onclick="window.history.pushState({}, 'bot', '?bot=supbot');window.HubSpotConversations.clear({resetWidget:true});">HELP</a>

I assume 'supbot' the name of the bot?

[MatthewShepherd]

Hi @alisongraham 
Yes, as long as you have your HubSpot tracking code installed on that external site and a chatflow configured to trigger based on the query parameter as detailed above (you change the query parameter and value to whatever you like as long as it matches your chatflow trigger) e.g. https://msyite.com?bot=salesbot, this should work.

[Jelmert]

Thank you @MatthewShepherd 

This works for me. I got it to work as a hyperlink by adding it in a rich text sourcecode.

But is it also possible to make this work in a button?

I can only add cta's in a rich text module. 

My buttons have limited option

[Jelmert]

I made it work by adding the styling to your code. Thanks 🙂

[maile]

Hi @Jelmert, 

I am struggling the same as you had here but just do not know how to solve this.

You said adding the styling to the code worked for you but I could not find this anywhere. Could you please show me in more detail where I can find the styling you were referring to? And how did you configure it?

Thank you very much.

[Jelmert]

Hey @maile 

To be honest, I can't really remember what I did exactly. I used a rich text to add a hyperlink and styled it as a button, I think. This is the code i used:

<p><a href="#hs-chat-open" class="button button--secondary button--icon-right" id="button_widget_1632141043737" onclick="window.history.pushState({}, 'bot', '?bot=true');window.HubSpotConversations.clear({resetWidget:true});">Open chat</a></p>

Just make sure you do the steps @gmat showed. 

[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.