Add GetFoxChat to your Angular site

Watch it first

▶ Watch how

The line to add

Yours has your own site ID in place of YOUR_SITE_ID.

On Angular, this is what goes in src/index.html:

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

How do you add GetFoxChat to Angular, 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 src/index.html, the main HTML page served when someone visits your site. source
3. Paste the GetFoxChat line just before </body> and replace YOUR_SITE_ID with your site ID. source
4. Run ng build and deploy the new output. source
5. Back in GetFoxChat, press Check my site. The chat switches on once GetFoxChat finds the snippet on your live pages.

Angular's own guide: Angular docs: Workspace and project file structure. Checked 2026-09-30; if Angular renames a menu, its guide has the current wording.

Angular gotchas

• The Angular CLI adds its own script tags when building, so you normally do not touch index.html; this is the exception, and you only add one line. source
• The scripts option in angular.json is for JavaScript files you add to the application; for a script hosted on another server, index.html is the direct route. source
• If angular.json sets a different index file, edit that file instead. source

How do you remove it later?

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

Checked against angular.dev (current Angular). Single-application workspaces keep the file at src/index.html; extra projects keep it under projects/<name>/src.