Adding script tag to Gatsby using helmet throws syntax errors

Question

I'm trying to add watson chatbot to my website and the required script tag is the following:

<script>
        window.watsonAssistantChatOptions = {
            integrationID: "", // The ID of this integration.
            region: "eu-gb", // The region your integration is hosted in.
            serviceInstanceID: "", // The ID of your service instance.
            onLoad: function(instance) { instance.render(); }
            };
        setTimeout(function(){
            const t=document.createElement('script');
            t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
            document.head.appendChild(t);
        });
    </script>

how it looks in my editor

Here is my code:

import React from "react"
import PropTypes from "prop-types"
import Helmet from "react-helmet"

function Watson() {
  return (
    <Helmet>

        <script>
        window.watsonAssistantChatOptions = {
            integrationID: "e9106019-f76a-46ea-bd38-1f9a364d8d6e", // The ID of this integration.
            region: "eu-gb", // The region your integration is hosted in.
            serviceInstanceID: "c688c7e0-4a4f-45ab-9131-6ae96ec602a3", // The ID of your service instance.
            onLoad: function(instance) { instance.render(); }
            };
        setTimeout(function(){
            const t=document.createElement('script');
            t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
            document.head.appendChild(t);
        });
        </script>
    </Helmet>
  )
}

export default Watson

I'm getting compile errors. I've even tried wrapping the code inside script with {} but still no luck:

<Helmet>

        <script>
{
        window.watsonAssistantChatOptions = {
            integrationID: "e9106019-f76a-46ea-bd38-1f9a364d8d6e", // The ID of this integration.
            region: "eu-gb", // The region your integration is hosted in.
            serviceInstanceID: "c688c7e0-4a4f-45ab-9131-6ae96ec602a3", // The ID of your service instance.
            onLoad: function(instance) { instance.render(); }
            };
        setTimeout(function(){
            const t=document.createElement('script');
            t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
            document.head.appendChild(t);
        });
}
        </script>
    </Helmet>

Any thoughts on what i'm missing ?

Expression expected, Unexpected token. Did you mean `{'}'}` or `}`? — Link, Aug 19 '20 at 20:59
Is that the error you get for your first example or your second example? I'd need to know the error you get for your first example, as you shouldn't need to wrap it in curly braces. — Chris, Aug 19 '20 at 21:00
For the first example i'm getting those syntax errors. I added a photo in the post, so you can see how it looks in my editor — Link, Aug 19 '20 at 21:01
Every page i include it on, its a component. I'd like to make it work any way first. — Link, Aug 19 '20 at 21:07
The only way I've found is using "dangerouslySetInnerHtml" as stated on the gatsby website. You can find it at the bottom of [this](https://www.gatsbyjs.com/docs/custom-html/) page — Chris, Aug 19 '20 at 21:08

Ferran Buireu · Accepted Answer · 2020-08-20T10:00:43.987

You need to use backticks (`) inside your component when it is wrapped by curly braces ({}):

<Helmet>
  <script type='text/javascript'>
    {` window.watsonAssistantChatOptions = {
            integrationID: "e9106019-f76a-46ea-bd38-1f9a364d8d6e", // The ID of this integration.
            region: "eu-gb", // The region your integration is hosted in.
            serviceInstanceID: "c688c7e0-4a4f-45ab-9131-6ae96ec602a3", // The ID of your service instance.
            onLoad: function(instance) { instance.render(); }
            };
        setTimeout(function(){
            const t=document.createElement('script');
            t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
            document.head.appendChild(t);
        });
    `}
  </script>
</Helmet>

With the snippet above your code will be pasted as a raw string but, being inside a <script> tag, it will be interpreted and pasted in your <head> as a common script.

Using a gatsby build with my snippet:

Adding script tag to Gatsby using helmet throws syntax errors

1 Answers1

Linked