Turbolinks navigation breaks HubSpot chat widget visibility in Rails app

Help needed with HubSpot chat in Rails 4 + Turbolinks app

I’m trying to add HubSpot chat to my Rails 4 app that uses Turbolinks. I set up Google Tag Manager to show the chat on each page load. It works fine with full page refreshes, but not when navigating with Turbolinks.

I’ve added this custom HTML tag in GTM:

<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/xxxxxx.js"></script>

The script loads and I can see it in the page source. The network call to js.hs-script.com happens too. But the chat bubble doesn’t show up after Turbolinks navigation.

Any ideas on how to make the HubSpot chat work with Turbolinks? I want that little chat bubble to appear no matter how users move between pages.

Has anyone run into this before? What am I missing?

I encountered a similar issue when implementing HubSpot chat with Turbolinks. The problem stems from Turbolinks not fully reloading the page, which can interfere with scripts that rely on standard page load events.

One solution that worked for me was to manually reinitialize the HubSpot widget after Turbolinks navigation. You can do this by adding an event listener for the ‘turbolinks:load’ event and then calling the HubSpot embed API.

Try adding this JavaScript to your application:

document.addEventListener('turbolinks:load', function() {
  if (window.HubSpotConversations) {
    window.HubSpotConversations.widget.refresh();
  }
});

This should trigger the chat widget to reload after each Turbolinks navigation. Make sure to place this code after your HubSpot script loader.

If that doesn’t work, you might need to look into using Turbolinks’ data-turbolinks-track attribute on the script tag to ensure it’s properly evaluated on each page load.

hey, i had this problem too. using hubspot events API worked for me. try listening on ‘onReady’ event to open the widget. example code:

window.HubSpotConversations.on(‘onReady’,()=>{window.HubSpotConversations.widget.open();});

hope it helps!