A JS file changes the behavior of Hotjar widgets. How can i fix it?

[syeda-git]

Hello,
The Hotjar feedback widget overlays on top of the page using the Google Tag Manager code. It works fine until you click one of 'On this page' link (right side TOC). When you click the link, the widget dislocates from the original position to the footer.

https://help.hcl-software.com/hcldiscoverguidebook/guides-using/index.html

I have been told that bundle.c8b220af.min.js is causing this behavior. When i block this JS file, the issue does not occur.

Can someone share insights how to fix this issue? Thanks.

[kamilkrzyskow]

Hello @syeda-git,
if some custom element disappears after navigation it's likely related to the navigation.instant feature.

The HTML tags inside the head get removed and recreated, but the script tags are being ignored 🤔
This could be a bug or misconfiguration, likely the latter, as there was a similar case in the past, which was resolved via extra JavaScript:

• Why the custom cookie banner sticks with the page when you click sub-headings? #6788 (reply in thread)

You need to properly hook up your external JavaScript to work together with instant navigation, read the tip here:
https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript

[syeda-git]

Hi @kamilkrzyskow,
We added extra.js to retain the HTML tags inside the head. The tags are now retained but the issue still persist. Maybe we are missing something. Can you guide what needs to be done?
https://help.hcl-software.com/analyticsdoc/stuart/test2/ovr_whatsnew.html

https://help.hcl-software.com/analyticsdoc/stuart/test2/javascripts/extra.js

After the page loads, accept the cookies and wait for the pop-up to appear. Then, click on the right side navigation link.

Syed

[kamilkrzyskow]

I suggest hiring a consultant to handle such cases, since this is not a forum for seeking business related help.

I've noticed you're recreating the elements from scratch, so it's likely that you're losing some unique memory handle that is being used to keep track of the initialization. Also you're checking it with MutationObserver, which I don't recommend in this case, instead copy the strategy from the previous solution (I also recommend rereading the last discussion again), and store the handles to tags when they're available and restore them when they're not instead of creating new style tags.

A quick snippet from ChatGPT, seems alright, however I didn't run this:

// Fix the removed Emotion style tags from Hotjar

let __emotionCss;
let __emotionCssGlobal;

// Subscribe to location$ to capture both style tags before they're removed
window.location$.subscribe(function () {
    if (!__emotionCss) {
        const css = document.head.querySelector('style[data-emotion="css"]');
        if (css) __emotionCss = css;
    }

    if (!__emotionCssGlobal) {
        const cssGlobal = document.head.querySelector('style[data-emotion="css-global"]');
        if (cssGlobal) __emotionCssGlobal = cssGlobal;
    }
});

// Subscribe to document$ to restore style tags if missing
window.document$.subscribe(function () {
    const hasCss = document.head.querySelector('style[data-emotion="css"]');
    const hasCssGlobal = document.head.querySelector('style[data-emotion="css-global"]');

    if (!hasCss && __emotionCss) {
        document.head.insertAdjacentElement("beforeend", __emotionCss);
    }

    if (!hasCssGlobal && __emotionCssGlobal) {
        document.head.insertAdjacentElement("beforeend", __emotionCssGlobal);
    }
});

Since you created the tags from scratch I've noticed the data-emotion attributes, I've asked ChatGPT about it and it mentioned that it could be related to the https://github.com/emotion-js/emotion library that applies CSS via JavaScript. So this is yet another layer of logic that might be preventing from restoring it with the previous method. You might've to contact the HotJar devs or Emotion library itself to ask how to reinitialize them in case of removing the handle.

However, I still think you should try it with the method mentioned in the previous discussion or hire a consultant first, before asking the upstream devs for help.

Good luck ✌️
BTW we're focusing on the removal of style tags, so we might miss something, but for now it appears that JavaScript is kept in memory even without the script tags etc. in the DOM