Search code examples
javascriptreactjsgatsby

Error on Gatsby when adding a script in the body

When I'm trying to add a script on the body of Gatsby I've added the following code into the file called gatsby-ssr.js

const React = require("react")

exports.onRenderBody = ({ setPostBodyComponents }) => {
    setPostBodyComponents([
        <script type="text/javascript"> 
        {`
        (function() {
          var envolveChatWidgetScript = document.createElement('script');
          envolveChatWidgetScript.setAttribute('data-wg-publisher', '222222');
          envolveChatWidgetScript.setAttribute('data-wg-campaign', '333333');
          envolveChatWidgetScript.setAttribute('src', 'https://widget.envolvetech.com/static/js/app.js');
          envolveChatWidgetScript.setAttribute('data-identifier', 'my_identifier');
          envolveChatWidgetScript.setAttribute('data-backend', 'https://bot-dot-envolvetech-001.appspot.com');
          document.body.appendChild(envolveChatWidgetScript);
          })();
          `}
          </script>
    ]);
};

but then somehow what it's actually in the mark up is this

        <script type="text/javascript"> 
        (function() {
          var envolveChatWidgetScript = document.createElement(&#x27;script&#x27;);
          envolveChatWidgetScript.setAttribute(&#x27;data-wg-publisher&#x27;, &#x27;222222&#x27;);
          envolveChatWidgetScript.setAttribute(&#x27;data-wg-campaign&#x27;, &#x27;3333333&#x27;);
          envolveChatWidgetScript.setAttribute(&#x27;src&#x27;, &#x27;https://widget.envolvetech.com/static/js/app.js&#x27;);
          envolveChatWidgetScript.setAttribute(&#x27;data-identifier&#x27;, &#x27;my_identifier#x27;);
          envolveChatWidgetScript.setAttribute(&#x27;data-backend&#x27;, &#x27;https://bot-dot-envolvetech-001.appspot.com&#x27;);
          document.body.appendChild(envolveChatWidgetScript);
          })();
          </script>

any ideas why it gets translated into that ?

Solution

  • After reading a few GH threads I found out that adding the script using dangerouslySetInnerHTML actually works https://github.com/gatsbyjs/gatsby/issues/11108

    const React = require("react")

exports.onRenderBody = ({ setPostBodyComponents }) => {
    setPostBodyComponents([
        <script
     dangerouslySetInnerHTML={{
        __html:`
        (function() {
            var envolveChatWidgetScript = document.createElement("script");
            envolveChatWidgetScript.setAttribute("data-wg-publisher", "222222");
            envolveChatWidgetScript.setAttribute("data-wg-campaign", "333333");
            envolveChatWidgetScript.setAttribute("src","https://widget.envolvetech.com/static/js/app.js");
            envolveChatWidgetScript.setAttribute("data-identifier", "my_identifier");
            envolveChatWidgetScript.setAttribute("data-backend", "https://bot-dot-envolvetech-001.appspot.com");
            document.body.appendChild(envolveChatWidgetScript);
            })();
     `
     }}
     />,
    ]);
};