Add GetFoxChat to your Nuxt site

Watch it first

▶ Watch how

The line to add

Yours has your own site ID in place of YOUR_SITE_ID.

On Nuxt, this is what goes in nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://getfoxchat.com/widget.js',
          'data-site-id': 'YOUR_SITE_ID',
          defer: true,
          tagPosition: 'bodyClose',
        },
      ],
    },
  },
})

How do you add GetFoxChat to Nuxt, 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. Open nuxt.config.ts in the project root. source
3. Inside defineNuxtConfig, add an app.head.script entry with src set to https://getfoxchat.com/widget.js. source
4. Add 'data-site-id': 'YOUR_SITE_ID' and defer: true to the same entry, and replace YOUR_SITE_ID with your site ID. source
5. Optionally add tagPosition: 'bodyClose' so the tag goes at the end of the body instead of the head. source
6. Rebuild and redeploy the site.
7. Back in GetFoxChat, press Check my site. The chat switches on once GetFoxChat finds the snippet on your live pages.

Nuxt's own guide: Nuxt docs: SEO and Meta. Checked 2026-09-30; if Nuxt renames a menu, its guide has the current wording.

Nuxt gotchas

• app.head in nuxt.config is static; it cannot take reactive data. That is fine here because the site ID never changes. source
• If you already have an app.head block, add the script entry to it instead of creating a second one. source
• Nuxt also accepts the same script entry through useHead in app.vue if you prefer to keep it out of the config file. source

How do you remove it later?

Delete the script entry from app.head in nuxt.config.ts, then rebuild and redeploy.

Checked against the Nuxt 4.x docs; the app.head config key is the same in Nuxt 3.