How to add a data attribute to chat div container

Developers
1

I’d love to use Tawk with a Rails 7 Hotwired app, which acts like a SPA. To preserve the chat widget, I need to add data attribute data-turbo-permanent to it.

Can you recommend the best way to do this?

I’ve carefully read through the Javascript API and don’t see a clear route to doing this. But perhaps I’m missing something obvious…

Thank you!

2

I figured it out. Create a div with the attribute. In onLoad for the widget, move the widget into the div.

  moveWidgetToPermanentContainer() {
    const observer = new MutationObserver(() => {
      const widget = document.querySelector(".widget-visible");
      const permanentContainer = document.getElementById("tawk-container");
      if (widget && permanentContainer) {
        permanentContainer.appendChild(widget);
        console.log("Moved widget to permanent container.");
        observer.disconnect(); // Stop observing once the widget is moved
      }
    });

    // Start observing the body for changes to detect when the widget is added to the DOM
    observer.observe(document.body, { childList: true, subtree: true });
  }
3

@chrisd I’m trying to implement Tawk on a Rails 7 hotwire/turbo app as well and your post was very useful in getting going - previously when I navigated through the application’s pages the widget would disappear, but after following your hints I’ve solved this.

However, now when I’m navigating through the app, the Tawk widget flickers on every page transition and seems to reload conversations if the widget is open - is this a problem you hit?