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