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 });
  }