Click to launch chat

Service Hub Tickets & Conversations
1

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/

2

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

3

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
37399iEA9B2438EB476FA7.png400×170 16.8 KB

4

This is the link Matthew.

https://everythg.com/

Thanks so much in advance!!

5

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 and then use Javascript/jQuery to add our desired onclick event to your menu link. For example:

$( ".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