Use third-party embed code in a React component

Question

I need to use a third part embed code for a form. I'm trying to return it in a component, but it's obviously not working. How can I set this one up?

class Form extends Component {

  render() {

    return (
      <div>
        <div id="apply_form">
          <a name="form" id="formAnchor"></a>
          <script type="text/javascript" src="https://fs22.formsite.com/include/form/embedManager.js?1605047845"></script>
          <script type="text/javascript">
          EmbedManager.embed({
            key: "key",
            width: "100%",
            mobileResponsive: true
          });
          </script>
        </div>
      </div>
    );
  }
}

export default Form;

Jacob · Accepted Answer · 2016-12-05 21:16:18Z

2

Unfortunately, there's not a really clean way of doing this, short of reaching into the DOM to insert the external script, then running the embed code directly.

Here's how I'd go about this:

class Form extends Component {

  componentDidMount() {
    const script = document.createElement('script');
    script.setAttribute(
      'src', 
      'https://fs22.formsite.com/include/form/embedManager.js?1605047845');
    script.addEventListener('load', () => {
      EmbedManager.embed({
        key: "key",
        width: "100%",
        mobileResponsive: true
      });
    });
    document.body.appendChild(script);
  }

  render() {
    return (
      <div>
        <div id="apply_form">
          <a name="form" id="formAnchor"></a>
        </div>
      </div>
    );
  }
}

export default Form;

answered Dec 5, 2016 at 21:16

Jacob

79k24 gold badges159 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Max T Over a year ago

Thank you so much! This worked! and cleared things up for me.

Max T Over a year ago

I have an issue now - when I add it to the page with import and then <Form/> the console shows an error - Uncaught TypeError: Cannot read property 'parentNode' of null - any idea why?

Jacob Over a year ago

No idea; it's probably specific to this embed script. You could try swapping the addEventListener and appendChild lines; perhaps it's trying to read the DOM positioning of the <script> element.

Collectives™ on Stack Overflow

Use third-party embed code in a React component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related