UserSnap in react or gatsby

gatsby-config.js

import React from 'react'
import UserSnap from './src/wherever'

/* This is how to use with gatsby... this wraps every page component to include UserSnap.
 * Depending on your setup you may also need do the same in gatsby-browser.js 
 */
export const wrapPageElement = ({ element }) => {
  return (
    <>
      <UserSnap />
      {element}
    </>
  )
}

UserSnap.jsx

import React from 'react'
import { Helmet } from 'react-helmet'

// Replace with the API keys from your widget installation page
const USERSNAP_GLOBAL_API_KEY = '<YOUR_USERSNAP_GLOBAL_API_KEY>'

/* Render this anywhere in your tree (preferably at the top of your app) to invoke the usersnap widget.
 */
const UserSnap = () => {
  return (
    <Helmet>
      <script type="text/javascript">
        {`
          window.onUsersnapCXLoad = function(api) {
            api.init();
          }
          var script = document.createElement('script');
          script.defer = 1;
          script.src = 'https://widget.usersnap.com/global/load/${USERSNAP_GLOBAL_API_KEY}?onload=onUsersnapCXLoad';
          document.getElementsByTagName('head')[0].appendChild(script);
      `}
      </script>
    </Helmet>
  )
}

export default UserSnap