# Start Chatbot on button click

**URL:** <https://community.hubspot.com/t/start-chatbot-on-button-click/21868>\
**Category:** APIs & Integrations\
**Tags:** developer-tools\
**Created:** [June 19, 2020, 2:40am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868 "2020-06-19T02:40:47Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sylg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sylg/32/95715_2.png) [@Sylg](https://community.hubspot.com/u/Sylg)\
**Post date:** [June 19, 2020, 2:40am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/1 "2020-06-19T02:40:47Z")

</div>

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

```auto
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?

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [June 22, 2020, 7:20am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/2 "2020-06-22T07:20:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Sylg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sylg/32/95715_2.png) [@Sylg](https://community.hubspot.com/u/Sylg)\
**Post date:** [June 22, 2020, 4:25pm UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/3 "2020-06-22T16:25:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [June 23, 2020, 7:46am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/4 "2020-06-23T07:46:06Z")

</div>

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](https://knowledge.hubspot.com/chatflows/create-a-live-chat); specifically under point 2.

---

<div class="post-metadata">

**Author:** ![Sylg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sylg/32/95715_2.png) [@Sylg](https://community.hubspot.com/u/Sylg)\
**Post date:** [June 23, 2020, 6:21pm UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/5 "2020-06-23T18:21:56Z")

</div>

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

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

```auto
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?

---

<div class="post-metadata">

**Author:** ![WendyGoh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wendygoh/32/42320_2.png) [@WendyGoh](https://community.hubspot.com/u/WendyGoh)\
**Post date:** [June 24, 2020, 3:53am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/6 "2020-06-24T03:53:05Z")

</div>

Hey @Sylg,

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![ScottKiessig](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/scottkiessig/32/104913_2.png) [@ScottKiessig](https://community.hubspot.com/u/ScottKiessig)\
**Post date:** [February 22, 2021, 10:55pm UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/7 "2021-02-22T22:55:13Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![MatthewShepherd](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matthewshepherd/32/31314_2.png) [@MatthewShepherd](https://community.hubspot.com/u/MatthewShepherd)\
**Post date:** [July 15, 2021, 9:13am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/8 "2021-07-15T09:13:13Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/e/be03e2055afaea07221126c23d587803fd00f6fa.png)

 ![MatthewShepherd_5-1626340624176.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/f/efa1367d36912a7d0f11285b7e462504ad5ab261.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\>

---

<div class="post-metadata">

**Author:** ![Jelmert](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jelmert/32/82797_2.png) [@Jelmert](https://community.hubspot.com/u/Jelmert)\
**Post date:** [January 24, 2022, 10:42am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/9 "2022-01-24T10:42:24Z")

</div>

Thank you @[MatthewShepherd](https://community.hubspot.com/t5/user/viewprofilepage/user-id/1377)

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/2/f2bbd44b168cb088f91a6e0ad5e4bc8cf87f0a53.png)

---

<div class="post-metadata">

**Author:** ![Jelmert](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jelmert/32/82797_2.png) [@Jelmert](https://community.hubspot.com/u/Jelmert)\
**Post date:** [January 24, 2022, 11:23am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/10 "2022-01-24T11:23:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maile](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@maile](https://community.hubspot.com/u/maile)\
**Post date:** [November 2, 2022, 4:29am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/11 "2022-11-02T04:29:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jelmert](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jelmert/32/82797_2.png) [@Jelmert](https://community.hubspot.com/u/Jelmert)\
**Post date:** [November 2, 2022, 10:14am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/12 "2022-11-02T10:14:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![alisongraham](https://avatars.discourse-cdn.com/v4/letter/a/919ad9/32.png) [@alisongraham](https://community.hubspot.com/u/alisongraham)\
**Post date:** [December 7, 2022, 1:28pm UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/13 "2022-12-07T13:28:50Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![MatthewShepherd](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matthewshepherd/32/31314_2.png) [@MatthewShepherd](https://community.hubspot.com/u/MatthewShepherd)\
**Post date:** [December 16, 2022, 12:08pm UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/14 "2022-12-16T12:08:27Z")

</div>

Hi @alisongraham  
Yes, as long as you have your [HubSpot tracking code](https://knowledge.hubspot.com/reports/install-the-hubspot-tracking-code) installed on that external site and a chatflow configured to [trigger based on the query parameter](https://knowledge.hubspot.com/forms/use-targeting-rules-in-pop-up-forms-and-chatflows#website-urls) 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](https://msyite.com?bot=salesbot), this should work.

---

<div class="post-metadata">

**Author:** ![PatrickSu](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/patricksu/32/76463_2.png) [@PatrickSu](https://community.hubspot.com/u/PatrickSu)\
**Post date:** [August 12, 2021, 11:50am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/15 "2021-08-12T11:50:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MatthewShepherd](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matthewshepherd/32/31314_2.png) [@MatthewShepherd](https://community.hubspot.com/u/MatthewShepherd)\
**Post date:** [August 12, 2021, 1:18pm UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/16 "2021-08-12T13:18:11Z")

</div>

Hi @PatrickSu  
You can paste this code into the source code of a [rich text module](https://knowledge.hubspot.com/website-pages/edit-content-in-a-rich-text-module) on your landing page.

 ![hs-lp-rich-text.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/1/015964679898eaa550153aeb1e72a07b2a0a2fc2.png)

 ![hs-lp-rich-text-source.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/b/0bb0bf7dcd8fb485c920a3d45da89ca039565d54.png)

 ![hs-lp-rich-text-source-edit.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/9/931d9c714faa63c424ac3219ad512137c9620acf.png)

---

<div class="post-metadata">

**Author:** ![EBakker](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ebakker/32/192025_2.png) [@EBakker](https://community.hubspot.com/u/EBakker)\
**Post date:** [November 22, 2021, 9:48am UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/17 "2021-11-22T09:48:09Z")

</div>

Hi,

How would this work on a wordpress site?

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

---

<div class="post-metadata">

**Author:** ![MatthewShepherd](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matthewshepherd/32/31314_2.png) [@MatthewShepherd](https://community.hubspot.com/u/MatthewShepherd)\
**Post date:** [November 22, 2021, 1:49pm UTC](https://community.hubspot.com/t/start-chatbot-on-button-click/21868/18 "2021-11-22T13:49:08Z")

</div>

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.