Script Tags not working inside the Shopify iframe but on Localhost

[mufftee]

• @shopify/shopify-app-remix version: 1.3.0
• Node version: 20
• Operating system: MacOSX 13.4.1

Expected behavior

script tags should work inside the iframe in the app/root.jsx

Actual behavior

if you place <script src="//code.tidio.co/c9w65wqt13hznshrcyl9ajlufdctdgxv.js" async={true} /> under <Scripts /> inside the app/root.jsx the script will be loaded, but wont be executed. On the localhost URL from the Shopify app, everything works as expected.

Steps to reproduce the problem

1. navigate inside app/root.jsx
2. place <script src="//code.tidio.co/c9w65wqt13hznshrcyl9ajlufdctdgxv.js" async={true} /> under <Scripts />
3. npm run dev
4. login to your store
5. ( if it would work like on localhost ) you should see on the right bottom a blue chat symbol.

Tested this with a fresh template

[mufftee]

useEffect(() => {
  const script = document.createElement('script');
  script.src = "//code.tidio.co/c9w65wqt13hznshrcyl9ajlufdctdgxv.js";
  script.async = true;

  document.head.appendChild(script);

  return () => {
    document.head.removeChild(script);
  };
}, []);

also tried already this inside my app/root.jsx both methods just create hydration errors.

[ct-Marvin]

I can confirm this. Doesn't work with any external script I tested

[ninja-checkout]

Same issue here, Any Chat or any webwidget is not loading inside shopify admin.

[kticoder]

Any widget not working in my Shopify app?

[huykon]

I think that almost chat widget using the iframe to load their chat box so shopify app using the iframe to load app inside admin panel while iframe can't load inside other iframe. That's invalid HTML structure

[lizkenyon]

Also reported here

[huykon]

@lizkenyon so how to fix this issue?

[lizkenyon]

Hi folks 👋

Thank you to everyone who has flagged this with us. This is something that we will be looking into.

[taitung]

Hi folks 👋

Thank you to everyone who has flagged this with us. This is something that we will be looking into.

yeah same issue we're facing

[alex-chasm]

same issue i'm facing here as well

[huykon]

I can fix this issue by load directly content of widget external url

[lizkenyon]

Hi folks!

We have identified the issue. It looks like when the scripts are added they are executing, but the elements these chat scripts are adding are being overwritten.

The good news is we have a fix for this already that is waiting for release. We are planning on getting this rolled out in the coming weeks.

[ninja-checkout]

@lizkenyon Any news on this?

[lizkenyon]

We hope to start rolling this out next week.

[lizkenyon]

Hi folks 👋

We have a released a change with App Bridge that should allow scripts that update the DOM, (like adding iframes for chat widgets) to work.

Please test out adding your scripts and see if they now work. 🙂

[ninja-checkout]

Thanks @lizkenyon

Works like charm

[huykon]

@lizkenyon which is the latest version?

[lizkenyon]

It should be working automatically. You will not need to upgrade any package.