Skip to content
Spelo
Spelo
GitHub
Get started →

Install on raw HTML / static sites

If your site is hand-written HTML, a static site generator (Jekyll, Hugo, Eleventy, Zola), or a generic static host (Netlify, Vercel, Cloudflare Pages, Firebase Hosting, GitHub Pages, S3+CloudFront), installation is a single <script> tag.

The snippet

<script
  src="https://spelo.ai/spelo.js"
  data-site-id="YOUR_SITE_ID"
  async
></script>

Where to paste it

Just before </body> on every page. The widget initializes on DOMContentLoaded, so placing it in <head> also works but delays first paint slightly on some browsers. Use the footer.

  1. Open the HTML file for each page (or your shared layout / partial).

  2. Find </body>.

  3. Paste the snippet directly above it:

    <body>
      <!-- your content -->
    

      <script
        src="https://spelo.ai/spelo.js"
        data-site-id="YOUR_SITE_ID"
        async
      ></script>
    </body>

  4. Deploy. Hit your site; orb appears at the bottom center.

Using a shared layout

Do not paste the snippet into every page individually — use your static site generator’s layout / partial system:

  • Jekyll — add it to _includes/footer.html
  • Hugo — add it to layouts/partials/footer.html
  • Eleventy — add it to your base layout template (e.g. _includes/base.njk)
  • Zola — add it to templates/base.html inside the <body>
  • Astro — see the Astro install page
  • Plain HTML — use an include directive (<!--#include file="footer.html"-->), a client-side fetch (not recommended), or copy-paste on every page

Hosting specifics

Netlify, Vercel, Cloudflare Pages

These hosts don’t affect the widget. Paste the snippet per the instructions above, deploy, done.

Firebase Hosting

Same — no special setup. If you’ve configured a strict Content Security Policy in firebase.json, see the CSP section below.

GitHub Pages

Works. GitHub Pages does not set a restrictive CSP.

S3 + CloudFront

Works. If you’ve configured a CSP via a response headers policy, whitelist Spelo (see below).

Content Security Policy

If your site sets a CSP header or <meta http-equiv="Content-Security-Policy">, include Spelo’s origins:

Content-Security-Policy:
  script-src 'self' https://spelo.ai;
  connect-src 'self' https://api.spelo.ai https://api.openai.com wss://*;
  media-src 'self' blob:;

Verify

  1. Reload your page.
  2. Gold orb should appear at the bottom center.
  3. DevTools → Network → spelo.js = 200 OK.
  4. Click orb → allow mic → speak. The edges of the screen glow while the AI responds.

Troubleshooting

  • Orb doesn’t show → check the browser console for 404s or CSP errors.
  • Works on some pages but not others → you probably added the snippet to one layout but your site has multiple layouts. Search your templates for </body> and add the snippet to every layout file.
  • See Orb not appearing for more.

Install on another platform

WordPress Shopify Webflow Wix Squarespace Framer Next.js React Vue / Nuxt Angular SvelteKit Astro