.env

NEXT_PUBLIC_HELPSCOUT_BEACON_ID=9dc0a553-237e-5678-1234-09977d96ddf8

constants.js

export const HELPSCOUT_BEACON_ID = process.env.NEXT_PUBLIC_HELPSCOUT_BEACON_ID;

Layout.js

import Script from "next/script";
import { HELPSCOUT_BEACON_ID } from "helpers/constants";

const Layout = ({ children }) => {
  
  return (
    <>
      {HELPSCOUT_BEACON_ID && (
        <>
          <Script
            id="helpscout-beacon-script"
            strategy="lazyOnload"
            dangerouslySetInnerHTML={{
              __html: `!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});`,
            }}
          />

          <Script
            id="helpscout-beacon-init"
            strategy="lazyOnload"
            dangerouslySetInnerHTML={{
              __html: `window.Beacon('init', '${HELPSCOUT_BEACON_ID}')`,
            }}
          />
        </>
      )}
    </>
  );
};

export default Layout;