javascript - React Embedding Script Tag is Unstylable - Stack Overflow

I intend to embed a surveymonkey survey into my website (that is made with react). Just getting this to work was a hassle, but eventually this code worked:

let script = '<script>overly long link</script>';

let extractScript=/<script>(.+)<\/script>/gi.exec(script);
script = script.replace(extractScript[0], "");

class LeadForm extends React.Component {
    ponentDidMount() {
        window.eval(extractScript[1]);
    }

    render() {
        return <div id="surveyMonkey" dangerouslySetInnerHTML={{__html: script}}/>;
    }
}

This works in that the surveymonkey renders, but it's stuck at the top left corner of the screen - making most of the website pletely unusable. Any css styling on the div "surveyMonkey" does nothing.

Any insight would be appreciated! Thanks.

EDIT: The code they gave me to embed the survey looks like this:

<script>(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey/collect/website/js/tRaiETqnLgj758hTBazgd2n0EyEqR4XLlegogsUllbowWHzPdjEQtkQpaEg2LAEE.js"].join(""),a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");</script><a style="font: 12px Helvetica, sans-serif; color: #999; text-decoration: none;" href=; Create your own user feedback survey </a>

I intend to embed a surveymonkey survey into my website (that is made with react). Just getting this to work was a hassle, but eventually this code worked:

let script = '<script>overly long link</script>';

let extractScript=/<script>(.+)<\/script>/gi.exec(script);
script = script.replace(extractScript[0], "");

class LeadForm extends React.Component {
    ponentDidMount() {
        window.eval(extractScript[1]);
    }

    render() {
        return <div id="surveyMonkey" dangerouslySetInnerHTML={{__html: script}}/>;
    }
}

This works in that the surveymonkey renders, but it's stuck at the top left corner of the screen - making most of the website pletely unusable. Any css styling on the div "surveyMonkey" does nothing.

Any insight would be appreciated! Thanks.

EDIT: The code they gave me to embed the survey looks like this:

<script>(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey./collect/website/js/tRaiETqnLgj758hTBazgd2n0EyEqR4XLlegogsUllbowWHzPdjEQtkQpaEg2LAEE.js"].join(""),a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");</script><a style="font: 12px Helvetica, sans-serif; color: #999; text-decoration: none;" href=https://www.surveymonkey.> Create your own user feedback survey </a>

• javascript
• css

Share Improve this question Follow edited Nov 4, 2017 at 0:00 Connor W asked Nov 3, 2017 at 18:16 Connor WConnor W 1011010 bronze badges 1

• Are you sure that's how you should be embedding the survey on your page? The docs say to add it this way: How to Embed Your Survey on a Website. In other words, don't set the body of the script in the way you are. – zero298 Commented Nov 3, 2017 at 20:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Thanks to @zero298 & @Pambi , the below solution worked for me:

class Survey extends React.Component {

  ponentDidMount() {
    let el = document.createElement("script");
    el.src = "https://widget.surveymonkey./collect/website/js/tRaisffsdgj758hTBazgd4IXxGtDzETeaqu1iDMfLhIPM5OoAHZFDWBMRDTjq_2dfsd.js";
    document.body.appendChild(el);
}

    render() {
      return <Container className="pageContainer">
      <Row className="homeRow">
      <div id="smcx-sdk"></div>   
      </Row>
    </Container>
    }
  }
  export default Survey

Follow the documentation that you can find here: How to Embed Your Survey on a Website. Looks like there is also an additional bit of documentation that you can find here: Embedding Your Survey on a Website

Don't use eval, and I would also stay away from dangerouslySetInnerHTML since you don't need it. The fact that it has "dangerously" in the function name should give you pause.

Find the src attribute of the <script> tag that you are provided and use it in the code below.

Then do something like this:

class LeadForm extends React.Component {
    ponentDidMount() {
        let el = document.createElement("script");
        el.src = "SOME_SCRIPT_SRC";
        document.body.appendChild(el);
    }

    render() {
        return <div id="surveyMonkey"/>;
    }
}

I got embedding Surveymonkey on React site to work by adding <div id="smcx-sdk"></div> where I wanted to place the survey.

So the result is something like this:

import * as React from 'react';
import { Helmet } from 'react-helmet';

class Survey extends React.Component {
    render() {
        return(
            <div id="smcx-sdk"></div>
            <Helmet>
                <script 
                    src="https://widget.surveymonkey./collect/website/js/TOKEN.js" 
                    type="text/javascript"
                />
            </Helmet>
        )
    }
}

The url with the token is taken from the script they provide. Some styling can be done with CSS.

As of now what embedding code doing is attaching iframe with survey monkey src URL.

1. Embed script in simple HTML
2. Inspect for the iframe tag

3. You will find code similar to following

   <iframe width="100%" height="100%" frameborder="0" allowtransparency="true" src="https://www.surveymonkey./r/XXXXX?embedded=1"></iframe>

4. Copy iframe tag with attributes and place wherever you want.