Third party script file in reactjs

Question

I am trying to use a external third party script file form outgrow.co in my website.My website is based on reactjs. The script file is supposed to generate a button.I have tried this script with html code and it works fine.But its not working for my reactjs code. This is the code i want to add:

 <div>
                <div id='5cbead6c7771f625d56e46f0' data-embedCookieDays='10' data-embedScheduling='false' data-embedTimed='true' data-embedExit='false' data-embedTimeFormat='0' data-embedTimeValue='5' data-embedBorderRadius='0' data-embedFontSize='13' data-textcolor='#ffffff' data-bgcolor='#fb545b' data-prop='outgrow-p' data-type='outgrow-b' data-url='https://arafathossain571.outgrow.us/5cbead6c7771f625d56e46f0?q=1' data-text='Get Started'></div>
                <script src='//dyv6f9ner1ir9.cloudfront.net/assets/js/nploader.js'></script><script>initIframe('5cbead6c7771f625d56e46f0');</script>
            </div>

here is what i tried:

 componentDidMount () {



        const script = document.createElement("script");


        (function(){

            <div>
                <div id='5cbead6c7771f625d56e46f0' data-embedCookieDays='10' data-embedScheduling='false' data-embedTimed='true' data-embedExit='false' data-embedTimeFormat='0' data-embedTimeValue='5' data-embedBorderRadius='0' data-embedFontSize='13' data-textcolor='#ffffff' data-bgcolor='#fb545b' data-prop='outgrow-p' data-type='outgrow-b' data-url='https://arafathossain571.outgrow.us/5cbead6c7771f625d56e46f0?q=1' data-text='Get Started'></div>
                <script src='//dyv6f9ner1ir9.cloudfront.net/assets/js/nploader.js'></script><script>initIframe('5cbead6c7771f625d56e46f0');</script>
            </div>
        })();


        document.body.appendChild(script);
    }

Dorian Mazur · Accepted Answer · 2019-04-25 09:49:02Z

1

You should do this like this:

componentDidMount () {
  const script = document.createElement("script")

  script.src = "//dyv6f9ner1ir9.cloudfront.net/assets/js/nploader.js"
  script.async = false
  script.onload = () => {
    // you can append your div here
  }
  document.body.appendChild(script)
}

answered Apr 25, 2019 at 9:49

Dorian Mazur

5242 silver badges12 bronze badges

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

3 Comments

ariful Islam Over a year ago

Where should i add rest of the script.This One- <script>initIframe('5cbead6c7771f625d56e46f0');</script> should i declare it in another variable?

Dorian Mazur Over a year ago

in `script.onload = () => { }

ariful Islam Over a year ago

really sorry.i am still not getting it.should it be like this?

script.onload = () => {             <script>initIframe('5cbead6c7771f625d56e46f0');</script>             <div>             <div id='5cbead6c7771f625d56e46f0' '.......></div></div>

Collectives™ on Stack Overflow

Third party script file in reactjs

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