The universal install path. Two lines of HTML. Paste them before the closing body tag. Deploy. Done.
FoxChat is a single-script install. Whether your site is hand-rolled HTML, generated by a static-site builder, served by a CMS, or rendered by a single-page-app framework, the install pattern is identical: drop the snippet, set your site ID, deploy. This page covers the universal recipe and the small configuration knobs you can turn.
This is the entire install:
<script>window.foxchatConfig={siteId:'YOUR_SITE_ID'};</script>
<script src="https://getfoxchat.com/widget.js" data-site-id="YOUR_SITE_ID" async defer></script>
Replace YOUR_SITE_ID in both places with the UUID from your FoxChat dashboard. The dashboard's install page has a one-click Copy snippet button that pre-fills your site ID for you.
Paste the two lines just before the closing </body> tag of every page where you want FoxChat to appear. Two reasons it should be at the bottom rather than in <head>:
If your site uses a global layout template (most do), paste the snippet there once and every page picks it up.
After deploying, open any page on your site in a fresh browser window. Within a second or two, you should see the Foxy bubble in the bottom-right corner. Click it; the chat panel should open. If the bubble does not appear, run the dashboard's Verify Installation check — it loads your site headlessly, looks for the widget script, and reports any failures with specific guidance. See verify your installation for the full check.
The default snippet does the right thing for most sites. If you need to override a default, set additional properties on window.foxchatConfig before the second script tag loads:
<script>
window.foxchatConfig = {
siteId: 'YOUR_SITE_ID',
position: 'bottom-left', // bottom-right (default), bottom-left
hideOnPages: ['/admin', '/checkout/success']
};
</script>
The hideOnPages array takes path prefixes — any URL whose pathname starts with one of those strings will not render the bubble. Useful for not showing the chat widget on the admin or checkout-confirmation page where it would just be visual noise.
FoxChat dispatches custom events you can listen for, and accepts custom commands you can dispatch:
// Listen for chat open
window.addEventListener('foxchat:open', () => {
// your analytics call
});
// Programmatically open the chat
window.dispatchEvent(new CustomEvent('foxchat:command', {
detail: { action: 'open' }
}));
The full list of events and commands is in your dashboard's Developer tab. Common ones: open, close, sendMessage, identify (set the visitor's name and email so Foxy uses them in conversation).
If your site sends a strict Content-Security-Policy header, you need to allow the FoxChat domain in script-src and connect-src:
script-src 'self' https://getfoxchat.com; connect-src 'self' https://*.getfoxchat.com https://*.supabase.co;
The widget makes outbound requests to the FoxChat API and to its Supabase backend; both domains need to be in connect-src.
Will the script slow my page down? No measurable impact in Lighthouse audits. The script tag uses both async and defer, so the browser parses it in parallel with HTML parsing and never blocks rendering. The widget's first-paint payload is under 30 kilobytes gzipped; it lazy-loads the chat panel only when the visitor opens it.
Can I load the widget on only some pages? Yes. Three approaches: paste the snippet only into the page templates where you want the widget; use the hideOnPages array shown above; or wrap the snippet in your CMS's conditional logic (Liquid, Twig, JSX) so it only emits on matching paths. Most teams use the second approach because it keeps configuration in one place.
What if my framework removes script tags during build? Some static-site generators with aggressive optimization (Eleventy with the bundle plugin, Astro with the inline-everything strategy) will rewrite or strip third-party script tags. Either disable the optimization for the FoxChat snippet, or move the snippet into a layout component that the optimizer treats as opaque HTML.
Can I self-host the widget code? No, and we don't recommend trying. The widget version-pins itself to your account configuration; self-hosting an old build means missing security patches, fixes, and feature flags. Always reference https://getfoxchat.com/widget.js.
Does the widget work behind a reverse proxy? Yes, as long as the visitor's browser can reach getfoxchat.com directly. The script tag URL is absolute, so reverse proxies on your origin do not get involved. If you need the widget behind a strict same-origin proxy (rare), contact support.