title: Inserting a Custom Script in React Helmet/ Gatsby
body: <p>I have this custom script that from a third party I am trying to embed into React Helmet</p>
  
  <p>Usually the scripts are given only as a src url. If I am given the code below, what is the best practice to embed the embed the script with React Helmet</p>
  
  <pre><code>    &lt;script&gt;
  document.getElementsByTagName('head')[0].appendChild(function(s){
      var d=document,m2g=d.createElement('script'),l=function(){Mobi2Go.load(s.container,s.ready);},jq=window.jQuery&amp;&amp;+window.jQuery.fn.jquery.replace(/^(\d+).*$/,'$1')===1&amp;&amp;+window.jQuery.fn.jquery.replace(/^\d+\.(\d+).*$/,'$1')&gt;=7,qs=window.location.search.substring(1),re='=(.*?)(?:;|$)',c=d.cookie.match('MOBI2GO_SESSIONID'+re),w=window.innerWidth;
      m2g.src='https://www.mobi2go.com/store/embed/1990-v8oL.js?'+qs+(jq?'&amp;no_jquery':'')+(c?'&amp;s='+c[1]:'')+'&amp;device_width='+w;
      if(m2g.onload!==undefined)m2g.onload=l;else m2g.onreadystatechange=function(){if(m2g.readyState!=='loaded'&amp;&amp;m2g.readyState!=='complete')return;m2g.onreadystatechange=null;l();}
      window.Mobi2Go_est = +(new Date);
      return m2g;
  }({
      container: 'Mobi2Go-Storefront', // Replace with ID  of the element to inject UI into
      ready: function() {} // Callback to fire when app is ready
  }));
  &lt;/script&gt;
  </code></pre>
  
  <p>There is obviously errors if I include all of that in the React Helmet
  Not sure what is the best practice to make it work.</p>
  
  <p>I have also tried placing it in the html.js file in gatsby</p>
  
  <pre><code> import React from 'react';
  import PropTypes from 'prop-types';
  
  export default function HTML(props) {
    return (
      &lt;html {...props.htmlAttributes}&gt;
        &lt;head&gt;
          &lt;meta charSet="utf-8" /&gt;
          &lt;meta httpEquiv="x-ua-compatible" content="ie=edge" /&gt;
          &lt;meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          /&gt;
          {props.headComponents}
        &lt;/head&gt;
        &lt;body {...props.bodyAttributes}&gt;
          {props.preBodyComponents}
          &lt;div
            key={`body`}
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: props.body }}
          /&gt;
          {props.postBodyComponents}
        &lt;/body&gt;
        &lt;script
          dangerouslySetInnerHTML={{
            __html: `
            document.getElementsByTagName('head')[0].appendChild(function(s){
              var d=document,m2g=d.createElement('script'),l=function(){Mobi2Go.load(s.container,s.ready);},jq=window.jQuery&amp;&amp;+window.jQuery.fn.jquery.replace(/^(\d+).*$/,'$1')===1&amp;&amp;+window.jQuery.fn.jquery.replace(/^\d+\.(\d+).*$/,'$1')&gt;=7,qs=window.location.search.substring(1),re='=(.*?)(?:;|$)',c=d.cookie.match('MOBI2GO_SESSIONID'+re),w=window.innerWidth;
              m2g.src='https://www.mobi2go.com/store/embed/1990-v8oL.js?'+qs+(jq?'&amp;no_jquery':'')+(c?'&amp;s='+c[1]:'')+'&amp;device_width='+w;
              if(m2g.onload!==undefined)m2g.onload=l;else m2g.onreadystatechange=function(){if(m2g.readyState!=='loaded'&amp;&amp;m2g.readyState!=='complete')return;m2g.onreadystatechange=null;l();}
              window.Mobi2Go_est = +(new Date);
              return m2g;
          }({
              container: 'Mobi2Go-Storefront', // Replace with ID  of the element to inject UI into
              ready: function() {} // Callback to fire when app is ready
          })););
          `,
          }}
        /&gt;
      &lt;/html&gt;
    );
  }
  
  HTML.propTypes = {
    htmlAttributes: PropTypes.object,
    headComponents: PropTypes.array,
    bodyAttributes: PropTypes.object,
    preBodyComponents: PropTypes.array,
    body: PropTypes.string,
    postBodyComponents: PropTypes.array,
  };
  </code></pre>