Adding script tag embed to Gatsby component

Home » Adding script tag embed to Gatsby component

This one broke my heart for a could of hours, which annoyed me as it really shouldn’t have. I like working with Gatsby but the clashing versions and updates really drags the progress down. This project I hadn’t opened in a few months and it basically started crying when I ran it due to the Gatsby version being a bit old.

So what worked?

Even though it’s going to be – or has already been – deprecated (sigh, of course) the Helmet api worked for me here. There are new APIs introduced to replace this but I ended up fighting with them so went back to Helmet. Time management is also a factor! This job should have taken less than five minutes…

So import Helmet to your component.

Then inside this Helment tag, use the script tag as normal, BUT wrap your js in curly braces like a template literal. Like so:

<script type='text/javascript' id="insert-bsport-widget-cdn">{`
someFunction(){
alert('cowabunga');
}
`}</script>

import * as React from "react"
import styled from "styled-components"
import Helmet from "react-helmet"
const Styledsection = styled.section`
//style here
`;

const Bsportloginbutton = () => {
  return (
<Styledsection>
<Helmet>    
<script type='text/javascript' id="insert-bsport-widget-cdn">{`!function (b, s, p, o, r, t) { !typeof window.BsportWidget !== "undefined" && !document.getElementById("bsport-widget-cdn") && !function () { m = b.createElement(s), m.id = "bsport-widget-cdn", m.src = p, b.getElementsByTagName("head")[0].appendChild(m) }() }(document, "script", "https://cdn.bsport.io/scripts/widget.js")`}</script>
    <script type='text/javascript'id="bsport-widget-mount">
        {`function MountBsportWidget(config, repeat=1) {
            if (repeat > 50) { return }
            if (!window.BsportWidget) {
                return setTimeout(() => {
                    MountBsportWidget(config,repeat+1)
                }, 100 * repeat || 1)
            }
            BsportWidget.mount(config)
        }`}
    </script>
    <script type='text/javascript'>
        {`MountBsportWidget({
                "parentElement": "bsport-widget-elementid",
                "companyId": COMPANYID,
                "franchiseId": null,
                "dialogMode": 2,
                "widgetType": "loginButton", 
                "showFab": false,
                "fullScreenPopup": false,
                "styles":undefined,
                "config": {
                    "loginButton": {}
                }  
            })`}
    </script>
</Helmet>

<div><div id="bsport-widget-elementid"/></div>
</Styledsection>
  )
}

export default Bsportloginbutton