2

I'm using a Hubspot chat bot in a rails app that's setup with Hotwire & turbo. When the page is initially loaded a Hubspot script will inject some html into the body of the page which contains the chatbot. Once any redirect happens the body is replaced & the injected code is removed.

How can I keep the injected code present in the body. I tried wrapping the script & area where the inject code goes in a data-turbo="false", that did not work.

projectmind
  • 540
  • 4
  • 17
  • Can you share more about the navigation that you're trying to do? Hotwire / Turbo is able to replace only a section of the page (SPA-style) and leave your chat widget alone, but if you're loading a brand new page that's a different issue. – aidan Aug 27 '21 at 19:35
  • I would like the chat bot to be persisted on all pages. So I would be loading a completely new page when the user navigates anywhere around the app. – projectmind Aug 27 '21 at 21:11
  • If you're already planning on full page reloads, you probably don't need Hotwire or Turbo. That said, you can't do full page reloads with Turbo disabled *and also* have parts of the page persisted. It sounds like you'll need SPA-style navigation, where you re-render most but not all of the document. Here is a blog which demonstrates how to do something similar, where your chatbot could persist but the main page content could get replaced: https://www.mikewilson.dev/posts/using-hotwire-with-rails-for-a-spa-like-experience/ – aidan Aug 29 '21 at 18:06
  • This answer helped me: https://stackoverflow.com/a/53342285/379279 – xhafan Nov 28 '22 at 12:56

1 Answers1

1

Turbo works by replacing part or all of the HTML body with new content. This can wipe out any modifications made to the HTML body (such as the chat widget).

Possible solutions:

  1. Direct Hubspot to modify an HTML element that isn't being replaced by Turbo. Hubspot supports inlineEmbedSelector option that allows you to identify an HTML element ID for the hubspot widget to use. Turbo supports data-turbo-permanent which lets you tell Turbo to retain an element on the page.

  2. Re-initialize the chat plugin after it gets wiped out. This is what would normally happen as you click around the page. Here's their documentation on refreshing the bot. EDIT: This doesn't work as the widget doesn't re-create the html elements and doens't allow subsequent calls to load()

melcher
  • 1,543
  • 9
  • 15
  • I think OP's question is about Turbo from Hotwire, not Turbolinks – aidan Aug 27 '21 at 19:33
  • The issue with option 2 is that the html is removed & their .refresh() or .load() methods don't re-inject the html so when they are called nothing happens. And yes, I'm using Turbo from hotwire but it's very similar to turbolinks – projectmind Aug 27 '21 at 21:12
  • Thanks! mis-understood, wasn't familiar with Turbo but looks very similar. WIll update answer – melcher Aug 30 '21 at 16:12
  • Has anyone found a working solution to this? None of the solutions here seem to work for me – Ian Shields Apr 11 '22 at 13:25
  • My 2 cents: Only solution 1 looked promising for me but unfortunately failed miserably. Turns out that the hubspot widget somehow detects the page swap and "re-initializes" causing the usual flash. – stratis Oct 11 '22 at 15:47