Wix text to speech — add AI voice narration with Custom Code
Give your Wix blog, business site, or Wix Studio project a listen-ready experience with GSpeech. Visitors can play natural Wix AI voice narration on posts and pages while audio is generated and cached in the GSpeech Cloud Console — No API Keys Required, and no TTS load on Wix hosting.
This guide shows how to add text to speech to Wix: paste the connection code with Wix Custom Code (or Custom HTML) before </body>, place Full Page / Button / Circle players with a Custom HTML embed, then map Content Selector and Render Element so the player reads blog posts, service pages, and about pages correctly.
Wix Custom Code TTS — site-wide embed via Settings → Custom Code, or per-page Custom HTML.
Cloud Audio Generation — synthesize once, cache, and replay across visits.
No API Keys Required — manage voices and players from one console.
Unlimited custom widgets — separate narration for blogs, service pages, and Studio layouts.
Best for: Wix blogs, local business sites, and Wix Studio marketing pages where you want AI voice on post bodies, service descriptions, and about copy — without building a custom TTS backend.
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 Wix site.
Copy the Wix code — open Integrations → Wix and copy the Connection code.
Paste before </body> — insert the code via Wix Custom Code (Settings → Custom Code) or a Custom HTML embed before the closing </body> tag, then publish.
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
Wix Custom Code, widgets, and content mapping
On Wix, GSpeech does not hardcode one player to one text block. You connect Custom Code once, then map each widget to the rich-text or section you want narrated:
1Connection code
Loads the engine through Wix Custom Code. Without it, Custom HTML mounts stay empty.
2Custom widget
Dashboard config: voice, language, design, Content settings, URL rules for blog vs business pages.
3Mount / Custom HTML
A marker on the Wix page (for example .gsp_full_player) where the player UI appears.
4Content mapping
Content Selector = what Wix text to read. Render Element = where the player appears. Exclude / Title / URLs refine the match.
Unlimited widgets — separate Full Page, Button, or Circle widgets for blog posts, service pages, and Studio layouts.
Unlimited players per widget — one published widget can power every matching Custom HTML mount allowed by Render Element + URL rules.
Custom HTML / embed — on Wix 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. Custom Wix sections need precise Content Selector / Render Element values.
Players
Add players with Wix Custom HTML
Place any of these mounts where the player should appear on the page (Custom HTML / embed). Click a card to copy. Then set the widget Render Element to the same class.
In the widget Content tab, point selectors at the Wix rich-text and section wrappers visitors should hear — typically blog bodies, service copy, and about sections.
id → # / class → . — e.g. id="main" → #main; class="wix-rich-text" → .wix-rich-text.
Gather pieces — Content Selector accepts several targets, comma-separated.
Trim pieces — Exclude List uses the same prefixes + commas.
Defines what text is spoken. Use CSS selectors, comma-separated. Examples for Wix-like markup:
.wix-rich-text, .blog-post-content, [data-testid="richTextElement"] — common Wix text wrappers.
.wix-rich-text,.blog-post-content,#my_id — multiple targets in one field.
parent_class — read the parent wrapper of the mount (useful when Custom HTML sits inside a text 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 Wix 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, a Wix section class, or a blog content wrapper 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: .share-buttons,.related-posts,.wix-comments,.no-speech.
TT
Title Selector / Title Text
Title Selector — dynamic title from the page (example: h1 or a Wix heading wrapper).
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 short promo sections on Wix business pages when DOM text should not drive audio.
Rule of thumb for Wix: Content Selector points at the rich-text you want narrated, Render Element points at the Custom HTML mount, and Exclude List skips comments, share bars, and related-post strips.
Examples
Practical mapping examples for Wix blogs and business pages
Example A
Wix blog post with Full Page Player
A blog post body and a Custom HTML mount under the title:
Exclude List — .share-buttons,.related-posts (optional)
Title Selector — h1 (optional)
Example B
Service page — mount inside rich text (parent_class)
If Custom HTML sits inside a Wix text section on a service page, 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
About and Studio pages with one Button widget
Place .gsp_button_player on about pages and repeating Studio layouts. One Button Player widget with Render Element .gsp_button_player can power all of them. Add more widgets only when voice, selectors, or URL rules must differ.
Select the website — open the Wix 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 blog or business pages.
Configure Player / Design — voice, panels, theme, width, margins.
Publish & listen — set Status to Published, refresh the live Wix page, test playback.
When Wix blog or 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: Wix text to speech and Custom Code
Does Wix support text to speech and AI voices with GSpeech?
Yes. GSpeech adds Wix text to speech with natural AI voices for blogs, business sites, and Wix Studio pages. You connect through Custom Code, place player mounts with Custom HTML, and manage voices in the Cloud Console — no API keys and no TTS processing on Wix servers.
How do I add the GSpeech player with Wix Custom Code?
Copy the Wix connection code from Integrations → Wix in your dashboard. Paste it in Settings → Custom Code (or Custom HTML) so it loads before </body>, then publish. Add a mount such as <div class="gsp_full_player"></div> on blog or service pages and set Render Element to the same class.
What is Content Selector vs Render Element on Wix?
Content Selector tells GSpeech which Wix text to narrate — for example .wix-rich-text or a blog post body. Render Element tells it where to show the player — usually your Custom HTML mount class. If audio text is wrong, fix Content Selector. If the player is missing, fix Render Element.
Will GSpeech audio slow down my Wix site?
No. Audio is generated and cached in the GSpeech cloud, not on Wix hosting. The connection script is lightweight, and players load only where you place mounts. Blog posts and business pages keep normal Wix performance while visitors listen on demand.
Do I need API keys for Wix AI voice narration?
No. GSpeech is No API Keys Required for Wix. You sign in to the Cloud Console, paste Custom Code, configure widgets, and publish. Voices, languages, and players are managed in one place without third-party TTS keys on your Wix site.
Help
Need help finding selectors for a Wix layout or Custom Code embed?
Contact GSpeech support.
Send a page URL and we will help map Content Selector / Render Element.
Loading