topic Re: Start Chatbot on button click in APIs & Integrations

Start Chatbot on button click

Sylg — Fri, 19 Jun 2020 02:40:47 GMT

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?

Re: Start Chatbot on button click

WendyGoh — Mon, 22 Jun 2020 07:20:11 GMT

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?

Re: Start Chatbot on button click

Sylg — Mon, 22 Jun 2020 16:25:03 GMT

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.

Re: Start Chatbot on button click

WendyGoh — Tue, 23 Jun 2020 07:46:06 GMT

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.

Re: Start Chatbot on button click

Sylg — Tue, 23 Jun 2020 18:21:56 GMT

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?

Re: Start Chatbot on button click

WendyGoh — Wed, 24 Jun 2020 03:53:05 GMT

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.

Re: Start Chatbot on button click

ScottKiessig — Mon, 22 Feb 2021 22:55:13 GMT

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?

Re: Start Chatbot on button click

MatthewShepherd — Thu, 15 Jul 2021 09:17:21 GMT

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>

Re: Start Chatbot on button click

PatrickSu — Thu, 12 Aug 2021 12:28:24 GMT

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!🙏

Re: Start Chatbot on button click

MatthewShepherd — Thu, 12 Aug 2021 13:18:11 GMT

Hi @PatrickSu

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

Re: Start Chatbot on button click

EBakker — Mon, 22 Nov 2021 10:02:54 GMT

Hi,

How would this work on a wordpress site?

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

Re: Start Chatbot on button click

MatthewShepherd — Mon, 22 Nov 2021 13:49:08 GMT

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.

Re: Start Chatbot on button click

Jelmert — Mon, 24 Jan 2022 11:23:17 GMT

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

Re: Start Chatbot on button click

Jelmert — Mon, 24 Jan 2022 11:23:45 GMT

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

Re: Start Chatbot on button click

maile — Wed, 02 Nov 2022 04:29:04 GMT

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.

Re: Start Chatbot on button click

Jelmert — Wed, 02 Nov 2022 10:14:34 GMT

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:

Just make sure you do the steps @gmat showed.

Re: Start Chatbot on button click

alisongraham — Wed, 07 Dec 2022 13:28:50 GMT

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?

I assume 'supbot' the name of the bot?

Re: Start Chatbot on button click

MatthewShepherd — Fri, 16 Dec 2022 12:08:27 GMT

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.