# Click to launch chat

**URL:** <https://community.hubspot.com/t/click-to-launch-chat/31143>\
**Category:** Tickets & Conversations\
**Tags:** free\
**Created:** [February 2, 2021, 3:32pm UTC](https://community.hubspot.com/t/click-to-launch-chat/31143 "2021-02-02T15:32:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SYeung](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/syeung/32/78471_2.png) [@SYeung](https://community.hubspot.com/u/SYeung)\
**Post date:** [February 2, 2021, 3:32pm UTC](https://community.hubspot.com/t/click-to-launch-chat/31143/1 "2021-02-02T15:32:49Z")

</div>

Hello Sir,

I am hoping to launch the livechatbox by clicking a link in my header. I have tried to test it in a page using below codes.

`<a id="click-to-chat__cta--text" class="cta cta--blue" style="margin-top: 20px;" onclick="window.hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen();">Chat with Sales</a>`

This is not working and the ‘Chat with sales’ text does not have a link.

[https://everythg.com/livechat/](https://everythg.com/livechat/)

---

<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:** [February 2, 2021, 3:59pm UTC](https://community.hubspot.com/t/click-to-launch-chat/31143/2 "2021-02-02T15:59:32Z")

</div>

Hi @SYeung  
I can’t see your live site as it is asking for a login, but it looks like your link is missing a href attribute to make it clickable. Also, I don’t recognise the messages.EXPERIMENTAL\_API part of your onclick javascript. Try the following:

`<a href="#" id="click-to-chat__cta--text" class="cta cta--blue" style="margin-top: 20px;" onclick="window.HubSpotConversations.widget.open();">Chat with Sales</a>`

Here’s a similar thread where we discuss how to use this: [https://community.hubspot.com/t5/Blog-Website-Page-Publishing/Opening-chat-from-Hubspot-landing-page/m-p/401388#M4333](https://community.hubspot.com/t5/Blog-Website-Page-Publishing/Opening-chat-from-Hubspot-landing-page/m-p/401388#M4333)

---

<div class="post-metadata">

**Author:** ![SYeung](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/syeung/32/78471_2.png) [@SYeung](https://community.hubspot.com/u/SYeung)\
**Post date:** [February 3, 2021, 3:28am UTC](https://community.hubspot.com/t/click-to-launch-chat/31143/3 "2021-02-03T03:28:57Z")

</div>

Hello Matthew,

Thanks for your reply. I am sorry that i am not a tech savvy and i was copying the code i found from other thread.

I have just turned my website from private to public. What i am actually hoping to do, is that when the user click the “Live Chat” button on the top right corner, the Livechat will pop up. Is there anything we can do?

 ![37399iEA9B2438EB476FA7.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/293053458af117cf9104ea166a385b1cb18b4264.png)

---

<div class="post-metadata">

**Author:** ![SYeung](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/syeung/32/78471_2.png) [@SYeung](https://community.hubspot.com/u/SYeung)\
**Post date:** [February 3, 2021, 3:29am UTC](https://community.hubspot.com/t/click-to-launch-chat/31143/4 "2021-02-03T03:29:53Z")

</div>

This is the link Matthew.

[https://everythg.com/](https://everythg.com/)

Thanks so much in advance!!

---

<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:** [February 5, 2021, 10:32am UTC](https://community.hubspot.com/t/click-to-launch-chat/31143/5 "2021-02-05T10:32:25Z")

</div>

Hi @SYeung  
Is the live chat link in your header created as a WordPress menu item? If so it probably won’t provide you with a field where you can add the necessary onclick code. What you can do is [add a class to your menu item](https://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item)and then use Javascript/jQuery to add our desired onclick event to your menu link. For example:

```lia-code-sample
$( ".menu-item" ).click(function() {
 window.HubSpotConversations.widget.open();
});

```

This jQuery code would probably be best placed in your WordPress header.php file.  
If you need some further guidance send me a private message and I’ll see if I can help further.  
Edit:  
For anyone looking to not load their chat widget at all until a button is clicked the above isn’t what you need. Take a look at this post: [https://community.hubspot.com/t5/Tips-Tricks-Best-Practices/onclick-action-doesn-t-work/m-p/457288#M472](https://community.hubspot.com/t5/Tips-Tricks-Best-Practices/onclick-action-doesn-t-work/m-p/457288#M472)