How to insert a web snippet into a React js application

Question

I need to insert a web-snippet provided by Delighted for NPS research. I know React works on the component issue, and it’s likely that importing a direct js script is bad practice. But finally, how to do this integration? The snippet serves to open a popup and receive feedback from users/visitors to the site.

Follows snippet excerpt from:

<script type="text/javascript">
  !function(e,t,r,n){if(!e[n]){for(var a=e[n]=[],i=["survey","reset","config","init","set","get","event","identify","track","page","screen","group","alias"],s=0;s<i.length;s++){var c=i[s];a[c]=a[c]||function(e){return function(){var t=Array.prototype.slice.call(arguments);a.push([e,t])}}(c)}a.SNIPPET_VERSION="1.0.1";var o=t.createElement("script");o.type="text/javascript",o.async=!0,o.src="https://d2yyd1h5u9mauk.cloudfront.net/integrations/web/v1/library/"+r+"/"+n+".js";var p=t.getElementsByTagName("script")[0];p.parentNode.insertBefore(o,p)}}(window,document,"Fy3OJMEqXnqCoQxs","delighted");

  delighted.survey({
    email: "[email protected]", // customer email (optional)
    name: "Bailey Dixon",               // customer name (optional)
    properties: {                       // extra context (optional)
      orderId: "123ABC",
      shippingMethod: "Ground"
    }
  });;
</script>

Answer 1

You can put this on index.html or put this function into a file (by good practice) and import it into the base of the React app (the file in which you use the ReactDOM.render)