HubSpot Chat

HubSpot chat integration requires some coding on your side because HubSpot chat API is quite limited. It prevents us to create a full integration on our side.

This integration takes advantage of their chat embedding feature. You have to create an element, host the HubSpot chat in it and handle the display state.

First, select the Custom provider option in the Life Ring Button settings.

Now, here starts the coding part.

This is a small working example of the integration with comments (the code should be in <body>):

<!-- Define the HubSpot chat panel root element. This element will be holding the HubSpot chat frame -->
<div id="hubspot-chat-holder" style="position: fixed; right: 30px; bottom: 30px; background-color: white; visibility: hidden">
    
	<button onclick="onHubspotClosed()">Close</button>
    
	<!-- This element will be holding the HubSpot chat -->
    <div id="hubspot-chat" style="height: 500px; width: 300px;">
    </div>
</div>
<!-- Add some styles. This enlarges the HubSpot chat itself. -->
    
<style>
    #hubspot-conversations-inline-iframe {
        width: 300px;
        height: 500px;
        border:none;
    }
</style>
    
<!-- This is HubSpot configuration object. It tells HubSpot to embed the chat to the #hubspot-chat element (we created it above) -->
<script>
	window.hsConversationsSettings = {
    	loadImmediately: true,
    	inlineEmbedSelector: '#hubspot-chat'
    };
    
    
	// This code handles the Custom Chat provider settings. See the Custom Provider section in our help docs.
    const hubspotHolder = document.getElementById('hubspot-chat-holder');
    window.addEventListener('productfruits_button_ext_widget_init', () => {
       	hubspotHolder.style.visibility = ''; // if we get signal from PF Life Ring button, show the HubSpot element
    });
    	
    	
/* This method is called by the Close button, it hides the HubSpot element and shows the Life Ring button again */
    function onHubspotClosed() {
       	hubspotHolder.style.visibility = 'hidden';
       	window.productFruits.api.button.showButton();
    }
</script>
    
    
<!-- This part is about getting a notification, when the HubSpot chat is closed and the user will get a message -->
<script type="text/javascript">
   	function onConversationsAPIReady() {
       	window.HubSpotConversations.on('unreadConversationCountChanged', payload => {
   			if (payload.unreadCount > 0) {
   				// You should notify the user about the new chat, if the popup with the chat is closed.
   				// For instance, you can show another element.
   			}
   		});
   	}

   	if (window.HubSpotConversations) {
   		onConversationsAPIReady();
   	} else {
		window.hsConversationsOnReady = [onConversationsAPIReady];
   	}
</script>
    
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/XXXXXX.js"></script>
<!-- End of HubSpot Embed Code -->

Highlights

You have to create holder elements for the HubSpot chat
You will use the inlineEmbedSelector feature of the HubSpot chat. It will embed the chat into your element
You can be listening to the unreadConversationCountChanged event and show notifications