Activating Hubspot Chat via Javascript

Developer Support CMS Development
1

in the menu we have a icon (chat), this should trigger a click (via Javascript) in the lower right corner (where the chat icon from hubspot is located).
So the chat should be reachable from within the menu. but the URL from the chat (iframe) is different than that one from the website, which means it gets blocked by the browser (crossside scripting). My question, how can i toggle the chat icon from within the page if i DONT want to click on the icon in the lower right corner directly.

2

Hi @kove,

Do you mind sharing a link to the page you are working on and any troubleshooting you have done so far?

The more information, screenshots and details you can provide, the better the Community can assist!

Thank you,
Jenny

3

Hey @jennysowyrda

This would be the page
http://business4you-2482957.hs-sites.com/family

Thanks for your help

4

Hi Kove,

You could register a click event listener to the element in the menu and use the Conversations API to open the chat widget: https://developers.hubspot.com/docs/methods/conversations_api/hubspot-conversations-javascript-api

Here is an example of how it could work:

const element = document.querySelector('.element') // Use an ID or class to get your element

element.addEventListener('click', e => {
 if (window.HubSpotConversations) {
 window.HubSpotConversations.widget.open()
 } else {
 window.hsConversationsOnReady = [
 () => {
 window.HubSpotConversations.widget.open()
 }
 ];
 }
});

To close the chat you can use:

window.HubSpotConversations.widget.close();