Auto-Open Chat Embedded Widget

[MPenfold]

We’re implementing the HubSpot chat widget, but we have it embedded within our navbar and menus as opposed to having it in it’s bubble state. To enable this, we have set it up so that the widget loads by default but doesn’t open by default.
We’ve made use of the

unreadConversationCountChanged

event field to auto-open the chat when a message has been received and not yet seen; however, this only works to open the chat when the message is sent from the conversations inbox, not from a chatflow.
We want to be able to auto-open the chat when a new chatflow message is waiting, can anyone provide any ideas/suggestions guidance on how we can achieve this, either using the

unreadConversationCountChanged

event field, or any other?

[Jaycee_Lewis]

Hi @MPenfold. Thank you for your question. Hey, @MatthiasWeber @himanshurauthan, do you have any experience customizing a chat this way?

Thank you for taking a look! — Jaycee

[MatthiasWeber]

Hi @MPenfold,

Hi @Jaycee_Lewis , sorry, can’t help here - no experience in such customizing. But sounds very cool @MPenfold. Good luck …

[BrandonNav]

Hi, I worked with @MPenfold.

Here are the technical details for how we are using the Chat SDK:

1. We add `window.hsConversationsSettings` as a script tag to the button of the head tag on our pages
   • window.hsConversationsSettings = { loadImmediately: false, identificationEmail: "...", identificationToken: "...", inlineEmbedSelector: "#hubspot-chat-widget",}
2. We add the tracking script underneath
3. Our React App renders and has a side panel with a clickable option called: `Contact Support`
4. As part of rendering, we load the widget:
   • if (window.HubSpotConversations) { window.HubSpotConversations.widget.load({ widgetOpen: false }); window.HubSpotConversations.on( 'unreadConversationCountChanged', handleSupportResponse, ); setIsHubspotReady(true);} else { window.hsConversationsOnReady = [ () => { window.HubSpotConversations.widget.load({ widgetOpen: false }); window.HubSpotConversations.on( 'unreadConversationCountChanged', handleSupportResponse, ); setIsHubspotReady(true); }, ];}
5. The `handleSupportResponse` event handler for `unreadConversationCountChanged` calls `window.HubSpotConversations.widget.open()` if the unread count is greater than 0
   • If a pre-existing chat is in progress and we send a message from the Hubspot interface to the user, the widget will automatically open
6. On clicking the menu option we also call `window.HubSpotConversations.widget.open();
   1. Subsequent clicks will close the widget by hiding the iframe (not calling `window.HubSpotConversations.widget.close()`. We think `.close()` isn’t working correctly though are unsure how to submit a bug report

Now if we have the chatflow `Chat display behaviour` configured to pop open the chat, neither the widget opens nor do we get an event telling us we need to open.