Quickstart

Add a voice orb to any website in about 5 minutes. By the end of this page you’ll have a working voice assistant on your live site that visitors can speak to.

Before you start

You need:

• A website you can add a <script> tag to (any platform — WordPress, Shopify, Webflow, Next.js, etc.)
• An email address for Spelo sign-up (free plan, no credit card)

Optional: an OpenAI API key if you want to use your own (BYOK). Otherwise Spelo’s managed plan covers it.

The 5-minute walkthrough

1. Sign up at app.spelo.ai

   Email + magic link, no credit card. The free plan includes 100 minutes of voice per month — enough to test on real visitors before upgrading.

2. Create a site

   Click + New site and fill in:

   Field	Example	What it does
   Business name	Ember & Oak	Shown to visitors in the orb tooltip
   Domain	emberandoak.com	Used to verify Origin on every API call
   Industry	Restaurant	Loads a voice template tuned for the vertical

   Click Save. You now have a site_id like abc123xy. Keep that tab open — you’ll need it in step 3.

3. Copy your install snippet

   From the site detail page, click Install → Copy. You get one line, customized to your site:

   HTML

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

   Paste before </body> on every page (in your layout/template file).

   WordPress

   Install our free plugin and enter your site_id in Settings → Spelo. No code required.

   Manual fallback:

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

   Add via your theme’s footer.php or a “Custom HTML” snippet plugin.

   Shopify

   Add to layout/theme.liquid, just before </body>:

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

   See Shopify install for the theme-snippet method that survives theme updates.

   React / Next.js

   In Next.js App Router, add to app/layout.tsx:

   import Script from 'next/script';
   
   <Script
     src="https://spelo.ai/spelo.js"
     data-site-id="abc123xy"
     strategy="afterInteractive"
   />

   See Next.js install for Pages Router and CSP notes.

4. Paste it on your site

   The snippet goes once, in your global layout file, before the closing </body> tag. It loads on every page automatically. Pick the install guide that matches your platform for the exact file to edit:

   Don’t see your platform above? We have step-by-step guides for 13 platforms:

   WordPress

   Shopify

   Webflow

   Wix

   Squarespace

   Framer

   Next.js

   Vue / Nuxt

   Astro

5. Speak to the orb

   Open your site in a new tab. You should see a small orb at the bottom-right of the screen.

   • Click it. The browser asks for mic permission — Allow.
   • Say: “What’s on the menu today?” (or whatever your site is about)
   • The orb turns gold, the edges of the screen glow, and the AI speaks its answer.

   What just happened

   The widget scraped the page content as you spoke, sent it to OpenAI’s Realtime API over WebRTC (direct from your browser, no Spelo middleman), and streamed the audio response back. The whole round-trip is typically under 800ms.

6. (Optional) Train it on your content

   Out of the box, Spelo reads whatever page the visitor is on. To answer questions about your whole site (FAQs, services, blog posts, anything), trigger a crawl:

   Dashboard → your site → Knowledge → Crawl my site. Takes 2–10 minutes depending on size. After it finishes, Spelo can answer cross-page questions like “Do you have a refund policy?” even from your homepage.

   For database-backed answers (products, inventory, schedules), see Connect your data — supports Postgres, MySQL, MongoDB, Shopify, Airtable, REST APIs, and webhooks.

You should now have

• ✅ A working voice orb on every page of your site
• ✅ An AI that reads the page DOM and answers questions about it
• ✅ Usage metering live in the Spelo dashboard
• ✅ (Optional) A full-site knowledge base if you ran the crawl

What to do next

Customize the orb Color, position, size, edge-glow style. Match your brand in 30 seconds.

Tune the personality Custom instructions, restricted topics, tone, formality. The AI follows your brief.

Connect your database Let the AI search products, inventory, FAQs, anything — read-only by default.

Capture leads to your CRM Push conversations and contact info into HubSpot, Salesforce, Notion, or any webhook.

Common hiccups

Symptom	Cause	Fix
Orb does not appear	Script not loaded, wrong data-site-id, or domain not registered	Orb not appearing
”Failed to get token”	CORS or domain mismatch — your site’s Origin isn’t on your site’s registered domain list	Token errors
Mic permission denied	Browser blocks mic on non-HTTPS origins (except localhost)	Mic permission
AI gives generic answers	The crawl hasn’t run yet, or the page DOM is rendered after the snippet loads (SPA hydration)	Slow responses

Going to production

Nothing more to do. The free plan works in production with a small “Powered by Spelo” badge on the orb. When you upgrade to Starter ($29/mo) or higher, branding disappears and database adapters unlock. See Plans and limits.