smartsupp/smartsupp-sdk-widget

Smartsupp doesn't work on Turbolinks powered website

Opened this issue · 1 comments

Hello,
we are using SmartSupp on a site with Turbolinks (https://github.com/turbolinks/turbolinks) and unfortunately the chat does appear on the first page loaded, but when navigating to the next page via Turbolinks the chat disappears - apparently it needs to be re-initialized every $(document).on("turbolinks:load" event as Turbolinks reshuffles the DOM using JS/AJAX, but I can't figure out how to achieve this. The window.smartsupp object remains initialized, but the chat disappears from the DOM (the element <div id="chat-application" just gets lost). Can you please advise me how to make Smartsupp re-render the DOM?

I was able to workaround the issue with custom initialization of the widget - the main issue is the original implementation depends on domReady and there's no possibility to override this which is a clear space for improvement.

function initializeSmartsupp() {
    const existingWidget = document.getElementById('chat-application');
    existingWidget?.remove();

    const win = window as SmartsuppWindow;
    win.SMARTSUPP_LOADED = undefined;
    win.SMARTSUPP_AUTOCREATE = undefined;
    // @ts-ignore
    win.$smartsupp = undefined;
    win._smartsupp = {
        key,
    };
    win.smartsupp = function () { win.smartsupp._.push(arguments) };
    win.smartsupp._ = [];

    const script = window.document.createElement('script');
    script.id = 'smartsupp-script';
    script.async = true;
    script.type = 'text/javascript';
    script.charset = 'utf-8';
    script.src = 'https://www.smartsuppchat.com/loader.js';

    document.body.appendChild(script);
}

document.addEventListener('turbolinks:load', initializeSmartsupp);