APIs & Integrations

Sylg
Participante

Start Chatbot on button click

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? 

 

 

 

0 Me gusta
17 Respuestas 17
EBakker
Participante

Start Chatbot on button click

Hi, 

How would this work on a wordpress site? 

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

0 Me gusta
MatthewShepherd
Asesor destacado

Start Chatbot on button click

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.

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
0 Me gusta
PatrickSu
Participante

Start Chatbot on button click

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


0 Me gusta
MatthewShepherd
Asesor destacado

Start Chatbot on button click

Hi @PatrickSu 

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


hs-lp-rich-text.png

 

hs-lp-rich-text-source.png

 

hs-lp-rich-text-source-edit.png

 

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
WendyGoh
HubSpot Employee
HubSpot Employee

Start Chatbot on button click

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? 

0 Me gusta
ScottKiessig
Participante

Start Chatbot on button click

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?

0 Me gusta
MatthewShepherd
Asesor destacado

Start Chatbot on button click

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. 

MatthewShepherd_4-1626340603233.png

 

MatthewShepherd_5-1626340624176.png

 


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

 

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
0 Me gusta
alisongraham
Miembro

Start Chatbot on button click

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?

0 Me gusta
MatthewShepherd
Asesor destacado

Start Chatbot on button click

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.

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
Jelmert
Participante

Start Chatbot on button click

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

Schermafbeelding 2022-01-24 om 11.41.16.png

0 Me gusta
Jelmert
Participante

Start Chatbot on button click

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

maile
Participante

Start Chatbot on button click

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.

 

0 Me gusta
Jelmert
Participante

Start Chatbot on button click

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
Participante

Start Chatbot on button click

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.

0 Me gusta
WendyGoh
HubSpot Employee
HubSpot Employee

Start Chatbot on button click

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.
0 Me gusta
Sylg
Participante

Start Chatbot on button click

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?

0 Me gusta
WendyGoh
HubSpot Employee
HubSpot Employee

Start Chatbot on button click

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.