How it works
One tag in, voice agent out
Three steps to add a real voice assistant to any website. No rebuild, no manual content sync, no chatbot training. The agent reads your live pages and talks to your visitors.
Paste one line of code
Two install patterns, one runtime. For plain HTML, WordPress, Shopify, Squarespace, Wix, or Webflow: a single script tag goes anywhere in your site's <head> or before </body>. The tag is async, so it never blocks first paint. For Next.js, Astro, Remix, Vite + React, or any modern framework: install the @spelo/system SDK (one tarball, real React + Astro components with TypeScript types) and drop <SpeloProvider /> into your root layout. The SDK install is npm-compatible. The package.json name is @spelo/system, so your imports look identical to a regular npm dependency.
Three install paths, same engine underneath. Pick the one that matches your stack:
Script tag
HTML, WordPress, Shopify, Squarespace, Wix, Webflow
<script src="https://spelo.ai/spelo.js" data-site-id="YOUR_SITE_ID" async></script>React SDK
Next.js, Remix, Vite + React, Gatsby
// 1. Install
// npm install https://spelo.ai/sdk/spelo-system-latest.tgz
// 2. Drop into your root layout (app/layout.tsx, _app.tsx, or main.tsx)
import { SpeloProvider } from '@spelo/system/react';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<SpeloProvider siteId="YOUR_SITE_ID" />
</body>
</html>
);
}Astro SDK
Astro 4+ with view transitions
---
// 1. Install
// npm install https://spelo.ai/sdk/spelo-system-latest.tgz
// 2. Drop into your Base.astro layout
import Spelo from '@spelo/system/astro/Spelo.astro';
import { ViewTransitions } from 'astro:transitions';
---
<html>
<head>
<ViewTransitions />
</head>
<body>
<slot />
<Spelo siteId="YOUR_SITE_ID" />
</body>
</html>Spelo reads every page on demand
When a visitor opens a conversation, Spelo scrapes the rendered DOM of the page they're on, including headings, sections, products, navigation links, CTAs, and image alt text, and sends a structured summary to the model. There is no reindexing job, no vector store sync, no manual content upload. Your live site IS the knowledge base. Update a price or add a product at 9:00 a.m. and the assistant knows by 9:00:01.
The visitor talks. The page reacts.
The visitor clicks the pill in the corner, says what they want, and watches the page respond. Say "Show me your pricing" and the page navigates. Say "Find black running shoes in size 10" and the catalog filters. Say "Book me Tuesday at 4 PM" and the booking form fills and submits. The assistant talks back in real voice with sub-second latency. When the visitor moves to another page, the conversation keeps going.
Pick the engine for your site
Spelo runs on two voice engines and you choose which one powers your site from the dashboard. OpenAI Realtime (gpt-realtime) is the premium option, with eight voices, English-first, ~$0.30 per minute, best when every interaction needs to sound polished. Google Gemini Live (gemini-2.5 native audio) is the efficient option, with thirty voices, 97 languages, ~$0.023 per minute (about 10× cheaper), best for cost-sensitive sites and any audience that isn't English-first. New signups default to Gemini. Both engines call the same tools (scroll, navigate, click, fill, database lookup) and present the same widget to your visitors. Picking one over the other doesn't change the install snippet, the UX, or any of the on-page actions. Switch engines anytime; the site doesn't need to be reinstalled.
How long does setup take?
About two minutes. Sign up at app.spelo.ai, copy your site ID, paste the script tag (or install the SDK package), and the orb appears on your site. No code changes, no theme edits beyond the one tag.
Do I need to feed Spelo content manually?
No. Spelo scrapes the rendered DOM live on every conversation request. Your existing pages ARE the knowledge base. If you want to add docs the assistant should reference, you can upload PDFs or paste FAQ text in the dashboard, but it is optional.
How does Spelo handle navigation?
On modern framework sites installed via the SDK, the React tree is persistent across route changes, so voice keeps going through navigation with no audio drop. On classic sites with the script tag, the agent stays in the voice session across the page reload, and a fresh page auto-resumes the call from sessionStorage in roughly one second.
What about latency?
End-of-speech to first audio response is sub-second, fast enough that visitors can interrupt naturally and the conversation feels human, not robotic.
Will the script slow down my site?
The bootstrap is around 40 KB minified. The voice library (~500 KB) lazy-loads only when the visitor clicks the pill, so first paint is unaffected. Lighthouse scores stay clean for visitors who never engage.
How do I add Spelo to a Next.js or Astro site?
Run npm install https://spelo.ai/sdk/spelo-system-latest.tgz to get @spelo/system into your project. For Next.js (App Router or Pages): import { SpeloProvider } from "@spelo/system/react" in app/layout.tsx and drop <SpeloProvider siteId="..." /> just before </body>. For Astro 4+: import Spelo from "@spelo/system/astro/Spelo.astro" and place <Spelo siteId="..." /> inside Base.astro's body, then enable <ViewTransitions /> in <head> for cross-page voice continuity. The package ships real React + Astro components with TypeScript declarations; the engine itself loads from spelo.ai's CDN at runtime so your install is small.
What does Spelo do with the conversation data?
Audio transits our zero-retention edge briefly on its way to whichever model your site is configured to use (OpenAI Realtime or Google Gemini Live). It is never logged or stored on our infrastructure. Conversations are recorded for review only on plans that opt in. We never sell visitor data; full details are in our privacy policy.
Can the assistant take actions besides talking?
Yes. The built-in tools include navigate (to any page), scroll_to (to a named section), scroll_by (vague directional), click_element (any button by visible text), and fill_field (any form field by label). Live database lookup is available on the Done-For-You add-on.
Stop letting visitors leave without a word.
Every visitor is a potential lead. Spelo turns silent visits into conversations and every conversation into a contact in your CRM. One script tag, one minute to install.