fix: widget does not load when navigating on pages with view transition [CW-3249] (#9443)

* feat: add ids to each element

* feat: restore elements for apps that use view transitions

* fix: remove generator check condition

* feat: handle turbolinks

* fix: new body handling

* chore: undo debug changes
This commit is contained in:
Shivam Mishra
2024-05-15 10:45:03 +05:30
committed by GitHub
parent 5a289776de
commit bc8736c08e
4 changed files with 45 additions and 1 deletions

View File

@@ -4,9 +4,28 @@ import { IFrameHelper } from './IFrameHelper';
export const loadCSS = () => {
const css = document.createElement('style');
css.innerHTML = `${SDK_CSS}`;
css.id = 'cw-widget-styles';
document.body.appendChild(css);
};
// This is a method specific to Turbo
// The body replacing strategy removes Chatwoot styles
// as well as the widget, this help us get it back
export const restoreElement = (id, newBody) => {
const element = document.getElementById(id);
const newElement = newBody.querySelector(`#${id}`);
if (element && !newElement) {
newBody.appendChild(element);
}
};
export const restoreWidgetInDOM = newBody => {
restoreElement('cw-bubble-holder', newBody);
restoreElement('cw-widget-holder', newBody);
restoreElement('cw-widget-styles', newBody);
};
export const addClasses = (elm, classes) => {
elm.classList.add(...classes.split(' '));
};