Install on Webflow
Webflow lets you add custom code at the project level (site-wide) or per-page. For Spelo, you almost always want project-level so the orb appears everywhere.
Steps
-
Open Project Settings
Webflow Designer → Project Settings (top left dropdown) → Custom Code tab.
-
Paste the snippet in Footer Code
<script src="https://spelo.ai/spelo.js" data-site-id="YOUR_SITE_ID" async></script> -
Save Changes
-
Publish
Click Publish in the top right → Publish to Selected Domains. Custom code only runs on the published site, not the designer preview.
-
Verify
Open the live site (webflow.io subdomain or your custom domain). Orb at the bottom.
Webflow-specific notes
- CMS Collections — the widget works on CMS template pages. No special config.
- Ecommerce — the widget auto-disables on the Webflow checkout route (
/checkout). - Memberships — respects your login wall. Configure which pages show the orb via enabled/disabled pages.
- Workspace plan — Webflow requires at least a Basic site plan (published) for custom code to run. Free staging subdomains also work.
Page-level override
If you only want the orb on specific pages (e.g. blog posts), clear the project-level code and paste the snippet per page instead:
- Open a page in the Designer
- Page Settings (gear icon) → Custom Code → Before
</body> - Paste the snippet → Save → Publish
Verify
DevTools → Network → filter spelo.js. You should see a 200 from spelo.ai on every page you installed it on.
Troubleshooting
- Works in staging but not production → you published to the staging (webflow.io) domain but not to your custom domain. Publish → Publish to Selected Domains and check both checkboxes.
- CSP errors → Webflow does not set a CSP by default. If you’ve added one via a Reverse Proxy (Cloudflare, etc.), allow
spelo.aiandapi.spelo.ai. - Orb missing on a single page → that page has a page-level custom code override that replaces the project-level. Add the snippet back on that page’s settings, or clear its custom code.