React script rendering iframe in certain browsers but not others

Question

I am making a website for a business in React and I need to load widgets (bookeo) on some of the pages. I followed this Stack post and used the useScript() function to load the widgets:

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.async = true;

    document.body.appendChild(script);

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

export default useScript;

The hook is then implemented as such:

<Grid item xs={12}>
  {useScript("https://bookeo.com/widget.js?a=***************")}
</Grid>

It works on all versions of Mozilla, but only some Chrome browsers (based on OS), and no Microsoft Edge browsers. Widget's code is always received by client, but iframe is not rendered to DOM on said browsers. However, when the widget is simply implemented as a script tag in the index.html file, the widget works on all browsers with no problems, although the obvious problem is that I can't control it's location.

React script rendering iframe in certain browsers but not others

0 Answers0