Reader

Drop-in audio player that reads your articles aloud with Spitch voices, with optional on-page translation.

Reader is a drop-in audio player for your articles. You add a single <script> tag to your site, and every reader gets a Listen player that reads the article aloud using Spitch voices — with optional on-page translation into other languages.

There’s nothing to maintain after install. Reader finds the article text on each page automatically, generates the audio on demand, and works across page navigations on modern (single-page) sites.

How It Works

1. Enable Reader in Studio

   Turn Reader on for your team in Spitch Studio and register the origins (websites) allowed to use it.

2. Paste one script tag

   Drop the snippet into your site template, once.

3. Visitors press play

   On each article page, Reader detects the readable content, inserts a compact player above it, and streams narration when a visitor presses play.

The same snippet works on every page and every allowed origin — there are no per-article IDs to manage.

Setting Up in Studio

Open Reader in Spitch Studio (a team workspace on desktop) and click Set up Reader. You’ll then have three tabs.

Setup

Setting	What it does
Live / Paused	Master switch. When paused, the player is hidden on every origin.
Translation targets	Pick up to 4 target languages from Tier 1 and Tier 2 for visitors to switch to; pick none to turn translation off. Choose Contextual (natural phrasing) or Direct (original sentence structure).
Voice	The single Spitch voice used for all narration in every language — Default, Kingsley, Remi, or any of your custom voices created with the voices API.
Allowed origins	The HTTPS sites permitted to run your Reader. Requests from any other origin are rejected.
Accent color	The player’s primary color (play button, waveform, active accents). Choose from the curated palette — Spitch green is the default.

Save settings to publish your changes. The player background is transparent and automatically adapts to light or dark host pages, so it blends into your site.

Integrations

A copy-paste snippet plus step-by-step install guides for Generic HTML, React / Next.js, Framer, Wix, Webflow, Squarespace, WordPress, Ghost, Shopify, and Blogger.

Analytics

Usage for your Reader. See Analytics below for what’s reported.

Installing the Snippet

Add this once, just before the closing </body> tag (or in your platform’s “footer / body-end” code area):

<script async
  src="https://cdn.spitch.app/reader.js"
  data-spitch-reader></script>

That’s all. Reader auto-mounts when the page loads and places the player above the first readable block of the article.

Most no-code platforms (Webflow, Wix, Squarespace, Ghost, Framer, Shopify, Blogger, WordPress) have a custom-code / code-injection area — paste the snippet there and publish.

Some hosted plans strip third-party <script> tags. Reader can’t run until script injection is allowed by your platform/plan.

Placement and Content Detection

By default, Reader chooses where to read and where to appear automatically.

Where It Reads

Reader looks for the article in this order:

1. Any element you mark with data-spitch-reader-content
2. <article>
3. <main>
4. The densest block of paragraphs on the page

Non-content elements (nav, header, footer, scripts, forms, images, etc.) are ignored.

Where It Appears

Reader inserts itself directly above the first readable block. To pin it to a specific spot instead, add a target selector with data-mount:

<script async
  src="https://cdn.spitch.app/reader.js"
  data-spitch-reader
  data-mount="#reader-slot"></script>

Single-Page Apps

Reader listens for client-side navigation and re-mounts on the new article automatically.

On framework sites (e.g. Next.js), make sure article HTML is server-rendered or statically generated so the text is present when Reader starts.

Languages and Translation

Reader automatically detects the article’s source language from the page’s lang and locale signals, then narrates it with the one voice you chose in Studio.

In Studio, choose up to 4 translation targets from the Tier 1 and Tier 2 language catalog. Visitors can switch to those languages from the player menu. When they do, Reader translates the article text in place — preserving links and formatting — and narrates the translated version with the same chosen voice. Translation style follows your Contextual / Direct setting.

Choose no targets to turn translation off. Reader then narrates only the original article language and does not show a language menu.

The Player

The inserted player is intentionally minimal:

• Play / pause with live status (Listen → Generating → Listening, plus Translating and Loading states)
• Waveform scrubber to seek within the narration
• Language selector — shown only when at least one translation target is configured
• Share — an icon-only control that copies a link to the generated audio
• Spitch attribution — displayed below the player bar

Audio streams as it’s generated (shown as LIVE until the full track is ready) and is cached per page for the visitor’s session, so repeat plays are instant.

Analytics

The Analytics tab reports, for a chosen period (hourly, daily, or monthly):

Metric	What it counts
Page loads	How many times the player mounted on a page.
Plays	Visitors who listened for at least 10 seconds.
Play rate	Plays ÷ page loads.

You can view activity over time or break results down by article. Events typically appear within a few minutes of activity.

Reader analytics begin in 2026; buckets are shown in UTC.

Requirements and Limitations

• HTTPS origin, registered in Studio. Reader will not run on unregistered origins, plain http://, or localhost/loopback addresses.
• Readable, server-rendered article text (a short minimum length). Purely client-rendered pages need SSR or static generation.
• Script injection must be permitted by your platform/plan.
• Reader is a team feature, configured from the Studio desktop app.

Set up Reader in Spitch Studio

Enable Reader, register your origins, and grab the snippet.