Add GetFoxChat to your Vue (Vite) site

Watch it first

▶ Watch how

The line to add

Yours has your own site ID in place of YOUR_SITE_ID.

On Vue (Vite), this is what goes in index.html:

<script src="https://getfoxchat.com/widget.js" data-site-id="YOUR_SITE_ID" defer></script>

How do you add GetFoxChat to Vue (Vite), 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. Projects made with create-vue use Vite, so the page template is index.html in the project root. source
3. Open index.html in the project root (not in the public folder). source
4. Paste the GetFoxChat line just before </body> and replace YOUR_SITE_ID with your site ID. source
5. Run npm run build and deploy the new dist folder. source
6. Back in GetFoxChat, press Check my site. The chat switches on once GetFoxChat finds the snippet on your live pages.

Vue (Vite)'s own guide: Vite docs: index.html and Project Root. Checked 2026-09-30; if Vue (Vite) renames a menu, its guide has the current wording.

Vue (Vite) gotchas

• Vite treats index.html as source code, so edit the root file, not the copy inside dist. source
• If your app has several .html entry points, add the line to each one. source
• The live site only changes after you rebuild and deploy the dist output. source

How do you remove it later?

Delete the GetFoxChat script line from index.html, rebuild, and redeploy.

Covers Vue 3 single-page apps scaffolded with create-vue (Vite). Nuxt sites have their own guide.