Installing SpideyChat Outside the Usual Platforms

Webflow

Project Settings, Custom Code, Footer Code. Paste the script and republish. It then appears on every page of the site.

For a single page only, use that page's own settings instead of the project-level field.

React and Next.js

• Next.js app router: in the root layout, loaded after interactive
• Next.js pages router: in the custom document, before the closing body
• Plain React: in the index HTML, or injected once on mount
• Load it lazily — never as part of the initial bundle

The mistake in single-page applications is loading the widget on every route change. Load it once and let it persist; otherwise conversations reset when the user navigates.

Static sites and generators

Astro, Hugo, Eleventy, Jekyll and hand-built HTML all take the same approach: put the script in the shared layout template, before the closing body tag.

One edit covers the whole site because the template is shared.

Content security policies

If your site sends a content security policy header, the widget's domain needs allowing for scripts and connections. Otherwise it silently fails to load.

That is the most common cause of “it works locally and not in production” with any third-party widget.

Check it after deploying

1. Open the live site in a private window
2. Confirm the widget appears and opens
3. Ask it one real question
4. Check the browser console for blocked requests

Frequently asked questions