Add GetFoxChat to your Gatsby site

Watch it first

▶ Watch how

The line to add

Yours has your own site ID in place of YOUR_SITE_ID.

On Gatsby, this is what goes in gatsby-ssr.js:

const React = require("react")

exports.onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="getfoxchat"
      src="https://getfoxchat.com/widget.js"
      data-site-id="YOUR_SITE_ID"
      defer
    />,
  ])
}

How do you add GetFoxChat to Gatsby, step by step?

1. In GetFoxChat, open the install step for your site and copy your snippet. It already has your site ID in it. No account yet? Create one free.
2. Create gatsby-ssr.js in the root of your site if it does not exist yet (gatsby-ssr.jsx or .tsx also work). source
3. Export an onRenderBody function; Gatsby calls it for every page it renders while building HTML. source
4. Inside it, call setPostBodyComponents with an array holding the GetFoxChat script element, giving it a key. source
5. Replace YOUR_SITE_ID with your site ID, then run a new build and redeploy. source
6. Back in GetFoxChat, press Check my site. The chat switches on once GetFoxChat finds the snippet on your live pages.

Gatsby's own guide: Gatsby docs: Gatsby Server Rendering APIs. Checked 2026-09-30; if Gatsby renames a menu, its guide has the current wording.

Gatsby gotchas

• gatsby-ssr.js only runs while Gatsby builds the HTML, so nothing changes on the live site until you build and deploy again. source
• Gatsby also has a Script component that loads scripts after hydration by default; it is an alternative if you already use it in a shared layout. source
• If you already export onRenderBody, add setPostBodyComponents to the existing function instead of exporting it twice. source

How do you remove it later?

Remove the script element from setPostBodyComponents in gatsby-ssr.js, then rebuild and redeploy.

Checked against the current Gatsby reference docs (Gatsby 5).