Integration in HTML component rendering twice

I need to use a chat integration in my site called Gist.
By Plasmic team recommendation I put the code the integration requires in the HTML Component.

The integration works sometimes so I reached out Gist support, and after a lot of tests they find the issue: Plasmic is rendering the code twice.

As a sidenote, I put the code in the Footer Component, so every single page of my site has access to it.

Can someone from Plasmic team can jump in and see if the issue is resolvable without a codebase?

This is my Footer Component URL: Footer

Edited: My site is running in production mode, the site is already published, so I don’t think this is an issue of React Developing Mode, which normally runs code twice.

hi @sergio_r, im not from Plasmic Team but, this is what I found from the Plasmic Git Hub. I think that’s the intended behaviour for the Embed HTML component because it uses React’s useEffect. useEffect runs multiple time in development mode. But it should only run once on the publish site.

Comment that I found on the Embed HTML component code in github:

" One last complication is that Next.js can run the effect multiple times in development mode. There’s nothing actually that we can/should do about that, but just something to be aware of if you are here debugging issues."

You can try adjusting the script to prevent it from running multiple times:

maybe something like this?:

(function(d, h, w) {
    // Check if the script is already present
    if (!w.gist) {
        var gist = w.gist = w.gist || [];
        gist.methods = ['trackPageView', 'identify', 'track', 'setAppId'];
        gist.factory = function(t) {
            return function() {
                var e = Array.prototype.slice.call(arguments);
                e.unshift(t);
                gist.push(e);
                return gist;
            };
        };
        
        for (var i = 0; i < gist.methods.length; i++) {
            var c = gist.methods[i];
            gist[c] = gist.factory(c);
        }

        // Create and append the script only if it doesn't already exist
        if (!d.getElementById('gist-script')) {
            var s = d.createElement('script');
            s.src = "https://widget.getgist.com";
            s.id = 'gist-script';
            s.async = true;
            var e = d.getElementsByTagName(h)[0];
            e.appendChild(s);

            s.addEventListener('load', function() {
                gist.setAppId("3wrx7a2s");
                gist.trackPageView();
            }, false);
        }
    }
})(document, 'head', window);

Im not an expert, hope someone else can verify as well.

Edit: The code provided was what I got GPT4o to modify the original code to include checks to prevent multiple invocations of the code.

1 Like

Thanks for your reply, @puvi.

Actually, the code renders twice in Development Mode not because it uses useEffect but because it’s made on React, which always renders the code twice in Development Mode.

Your reply pointed out that I didn’t state in my original post that I’m running this issue in production, with the published site, so I edited it to add that information, which is relevant.

Gist is aware of this situation and that’s why they cannot help me further.

Thank you for the code, I will give it a try to see at least if it shows me new insights of what is going on.

Can someone from Plasmic jump in?

Hey @sergio_r .

Is your published site using our plasmic hosting feature?

Hello, @icaro_guerra, yes it is

I think there really is a problem in the Embed HTML component. Can you try @puvi 's solution to get unblocked while we investigate the fix?

Thank you for your reply @icaro_guerra. I already tried @puvi’s solution, however, it didn’t work. Keep in mind that the integration sometimes works, and sometimes doesn’t, and I tried it in different browsers like Chrome, Chromium, Brave, Opera, and Firefox.