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?
Aug 12, 20217:50 AM - edited Aug 12, 20218:28 AM
Participant
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!🙏
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>
Matthew Shepherd
Freelance HubSpot Consultant CRM Consultant | SEO Specialist
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 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?
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:
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.
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