HTML website text to speech — embed AI voice with one script
Developers and teams running custom HTML, static sites, or non-WordPress CMS stacks can embed TTS script once and deliver natural custom site AI voice with GSpeech. Playback and synthesis run through the GSpeech Cloud Console — No API Keys Required, no server-side TTS stack, and no extra hosting load.
This guide shows how to add text to speech to an HTML website: paste the one-line connection code before </body>, place Full Page / Button / Circle players with Custom HTML mounts, then map Content Selector and Render Element to your layout classes and IDs.
One-line embed — paste before </body> on any custom stack or static site.
Cloud Audio Generation — synthesize once, cache, and replay across visits.
No API Keys Required — voices and players from one console.
Selector-based mapping — target any article, main, or custom layout wrapper.
Best for: developers, static generators, and custom CMS themes where you control the HTML and want a single embed plus CSS selectors for custom layouts.
Create a website — if you have not added a site yet, follow create a website.
Open the site — go to your dashboard and select the site.
Copy the HTML code — open Integrations → Html Website and copy the Connection code.
Paste before </body> — insert the code in your template before the closing </body> tag, then deploy.
The connection code loads GSpeech on every page where it is present. Players appear only where you place mounts / Custom HTML and only when the matching widget is published and configured.
Mapping model
Embed script, mounts, and selector mapping for custom HTML
On a custom HTML site, one embed loads the engine. Each widget then maps your own classes and IDs to a mount — so you keep full control of the layout while narration stays in the Cloud Console:
1Connection code
Loads the engine before </body>. Without it, mounts do nothing.
2Custom widget
Dashboard config: voice, language, design, Content settings, URL rules for any route or template.
3Mount / Custom HTML
A marker in your page HTML (for example .gsp_full_player) where the player UI appears.
4Content mapping
Content Selector = what to read. Render Element = where the player appears. Exclude / Title / URLs refine the match.
Unlimited widgets — separate Full Page, Button, or Circle widgets for different layouts, languages, or designs.
Unlimited players per widget — one published widget can power every matching mount allowed by Render Element + URL rules.
Custom HTML mounts — on HTML sites the mount looks like <div class="gsp_full_player"></div>. On WordPress the same idea uses shortcodes such as [gspeech].
Defaults vs advanced — default mounts work quickly. Unique custom layouts need precise Content Selector / Render Element values.
Players
Add players with Custom HTML
Place any of these mounts where the player should appear on the page. Click a card to copy. Then set the widget Render Element to the same class.
In the widget Content tab, point selectors at the article, main, or custom wrappers you own — any CSS selector your markup exposes.
id → # — HTML id="main" → write #main.
class → . — HTML class="post-content" → write .post-content.
Gather pieces — Content Selector accepts several targets, comma-separated: #intro,.body,#summary.
Trim pieces — Exclude List uses the same # / . + commas: #comments,.ads,.share-buttons.
Find values — right-click → Inspect on the live page. Full beginner walkthrough: HTML values (# / .).
CS
Content Selector
Defines what text is spoken. Use CSS selectors, comma-separated (assemble content in pieces). Examples:
article, .post-content, #main, .custom-layout — read those elements (# = id, . = class).
article,section,#my_id,.my_class — multiple targets in one field (pieces combined into one narration).
parent_class — read the parent wrapper of the mount (useful for Custom HTML inside a content block).
self_class — read the same wrapper the mount sits in.
Leave empty if you use Content Text instead (fixed text, not DOM content).
RE
Render Element
Defines where the player UI is injected. It must match a real element on the page.
For Custom HTML mounts, set it to the mount class: .gsp_full_player, .gsp_button_player, or .gsp_circle_player.
You can also target layout containers such as body, #content, or .article-header when you are not using a dedicated mount.
If Content Selector is correct but nothing appears, Render Element is usually wrong or missing on that page.
RP
Render Position
Places the player Before or After the Render Element content. For a dedicated mount div, After/Before usually still works relative to that node — keep the mount empty and let the widget fill it.
EX
Exclude List
Selectors that must not be spoken, even if they sit inside Content Selector. Same # / . rules, comma-separated. Example: #comments,.sidebar,.ads,.no-speech.
TT
Title Selector / Title Text
Title Selector — dynamic title from the page (example: h1).
Title Text — fixed title shown in the player. Leave Title Selector empty when using Title Text.
CT
Content Text
Optional fixed narration text. When used, Content Selector can stay empty. Useful for static promo blocks when DOM content should not drive audio.
Rule of thumb for HTML sites: Content Selector points at the wrapper you control (for example article.post or #main), Render Element points at the mount, and Exclude List skips nav, ads, and comments.
Examples
Practical mapping examples for custom HTML layouts
Example A
Custom layout article with Full Page Player
Your static or CMS template includes an article and a mount:
Exclude List — .share-buttons,.related-posts (optional)
Title Selector — h1 (optional)
Example B
Mount inside a CMS content region — parent_class
If the mount sits inside a custom CMS content region, Content Selector can be relative:
Content Selector — parent_class (reads the parent of the mount)
Render Element — .gsp_full_player
Use self_class when the mount wrapper itself contains the text that should be narrated.
Example C
Static site templates with one Button widget
Place .gsp_button_player across many static templates. One Button Player widget with Render Element .gsp_button_player can power all of them. Create additional widgets only when voice, design, selectors, or URL rules must differ.
Select the website — open the HTML site you connected.
Add new widget — Widgets → Add new widget → choose type (Full Player, Button, Circle, …) → Create.
Configure Content — set Content Selector, Render Element, Exclude List, titles for your layout.
Configure Player / Design — voice, panels, theme, width, margins.
Publish & listen — set Status to Published, refresh the live page, test playback.
When page text changes, Smart Audio Sync can regenerate narration in the background. Mapping fields still decide which text and where the player lives.
FAQ
FAQ: HTML website text to speech embed
Does an HTML website support text to speech and AI voices with GSpeech?
Yes. GSpeech works on any HTML site, static generator, or custom CMS where you can paste a script before </body>. You get natural AI voices and modern players without building a server-side TTS pipeline.
How do I embed the GSpeech TTS script on a custom site?
Copy the connection code from Integrations → Html Website. Paste it once in your shared template before </body> and deploy. Then add a mount such as <div class="gsp_full_player"></div> in the layout where the player should appear and set Render Element to that class.
What is Content Selector vs Render Element on a custom HTML site?
Content Selector is any CSS selector for the text you want spoken — for example #main, article.post, or a class from your CMS. Render Element is where the player UI is injected — usually your mount class. Because you control the markup, you can map any custom layout precisely.
Will GSpeech audio slow down my HTML or static site?
No. Synthesis and caching happen in the GSpeech cloud. The embed is a lightweight client script, and players load only where mounts exist. Your hosting continues to serve normal HTML, CSS, and JS while visitors listen on demand.
Do I need API keys to embed custom site AI voice?
No. GSpeech is No API Keys Required for HTML sites. Paste the embed, configure widgets in the Cloud Console, and publish. Voices and players are managed from one account without third-party TTS keys in your codebase.
Help
Need help finding selectors for a custom theme or builder layout?
Contact GSpeech support.
Send a page URL and we will help map Content Selector / Render Element.
