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.

4
  • 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, 2021 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. Aug 27, 2021 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: mikewilson.dev/posts/…
    – aidan
    Aug 29, 2021 at 18:06
  • This answer helped me: stackoverflow.com/a/53342285/379279
    – xhafan
    Nov 28, 2022 at 12:56

1 Answer 1

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()

5
  • I think OP's question is about Turbo from Hotwire, not Turbolinks
    – aidan
    Aug 27, 2021 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 Aug 27, 2021 at 21:12
  • Thanks! mis-understood, wasn't familiar with Turbo but looks very similar. WIll update answer
    – melcher
    Aug 30, 2021 at 16:12
  • Has anyone found a working solution to this? None of the solutions here seem to work for me Apr 11, 2022 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, 2022 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.