Squarespace text to speech — AI voice via Code Injection
Creators, coaches, and portfolio owners can add AI voice to Squarespace with GSpeech. Deliver natural narration on blogs, course pages, and case studies while audio is generated in the GSpeech Cloud Console — No API Keys Required, and no TTS load on Squarespace hosting.
This guide shows Squarespace Code Injection TTS: paste the embed in Footer Code Injection before </body>, place Full Page / Button / Circle players with a Code Block, then map Content Selector and Render Element so the player reads the right blog or portfolio text.
Code Injection + Code Block — site-wide footer embed plus per-page Custom HTML mounts.
Cloud Audio Generation — synthesize once, cache, and replay across visits.
No API Keys Required — voices and players from one console.
Creator-ready widgets — blogs, courses, and portfolio case studies with separate designs.
Best for: Squarespace blogs, coaching and course pages, and portfolio case studies where visitors should listen to long-form copy without leaving the page.
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 Squarespace site.
Copy the connection code — open Integrations → Squarespace / Html Website and copy the Connection code.
Paste before </body> — insert the code via Settings → Advanced → Code Injection (Footer) before the closing </body> tag, then save and publish.
The connection code loads GSpeech on every page where it is present. Players appear only where you place mounts with a Code Block / Embed / Custom HTML and only when the matching widget is published and configured.
Mapping model
Code Injection, Code Blocks, and content mapping
On Squarespace, Footer Code Injection loads the engine once. Each widget then maps blog blocks, course sections, or portfolio copy to a Code Block mount — without baking audio into every page layout:
1Connection code
Loads the engine from Footer Code Injection. Without it, Code Block mounts stay empty.
2Custom widget
Dashboard config: voice, language, design, Content settings, URL rules for blogs vs portfolios.
3Mount / Code Block
A marker in the page (for example .gsp_full_player) where the player UI appears.
4Content mapping
Content Selector = what Squarespace 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 blogs, courses, and portfolio layouts.
Unlimited players per widget — one published widget can power every matching Code Block mount allowed by Render Element + URL rules.
Code Block / Custom HTML — on Squarespace 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 sections need precise Content Selector / Render Element values.
Players
Add players with Code Block / Custom HTML
Place any of these mounts where the player should appear on the page (Code Block / Embed / Custom HTML). Click a card to copy. Then set the widget Render Element to the same class.
Map Squarespace blocks and blog text to the player
In the widget Content tab, point selectors at Squarespace blog items, block content, and portfolio sections visitors should hear — then place the player with a Code Block mount.
CS
Content Selector
Defines what text is spoken. Use CSS selectors, comma-separated. Examples:
article, .sqs-block-content, .blog-item-content, #page — read those elements.
article,section,#my_id,.my_class — multiple targets in one field.
parent_class — read the parent wrapper of the mount (useful for a Code Block placed inside a text section).
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, #page, or .blog-item-content 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. 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 short course intros or portfolio summaries when DOM content should not drive audio.
Rule of thumb for Squarespace: Content Selector targets .blog-item-content or .sqs-block-content, Render Element targets the Code Block mount, and Exclude List skips comments and share strips.
Examples
Practical mapping examples for Squarespace blogs and portfolios
Example A
Portfolio case study with Full Page Player
A case-study page with body content and a Code Block mount under the hero:
If the Code Block mount sits inside a course lesson section, 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
Creator blog posts with one Button widget
Place .gsp_button_player on many blog posts. One Button Player widget with Render Element .gsp_button_player can power all of them. Add more widgets only when voice, design, or URL rules must differ for courses vs portfolio pages.
Select the website — open the Squarespace 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 blogs or portfolios.
Configure Player / Design — voice, panels, theme, width, margins.
Publish & listen — set Status to Published, refresh the live Squarespace page, test playback.
When blog or portfolio text changes, Smart Audio Sync can regenerate narration in the background. Mapping fields still decide which text and where the player lives.
FAQ
FAQ: Squarespace text to speech and Code Injection
Does Squarespace support text to speech and AI voices with GSpeech?
Yes. GSpeech adds Squarespace text to speech with natural AI voices for blogs, course pages, and portfolios. You connect with Code Injection, place players with a Code Block, and manage everything in the Cloud Console — no API keys required.
How do I add the player with Code Injection and a Code Block?
Copy the connection code from Integrations → Squarespace / Html Website. Paste it in Settings → Advanced → Code Injection (Footer) before </body>. On each page that needs audio, add a Code Block with a mount such as <div class="gsp_full_player"></div> and set Render Element to that class.
What is Content Selector vs Render Element on Squarespace?
Content Selector chooses which Squarespace HTML to narrate — for example .blog-item-content or .sqs-block-content. Render Element chooses where the player appears — usually your Code Block mount class. Wrong text means fix Content Selector; missing player means fix Render Element.
Will GSpeech audio slow down my Squarespace site?
No. Audio is generated and cached in the GSpeech cloud, not on Squarespace. The Footer Code Injection script is lightweight, and players load only where you add Code Blocks. Blogs and portfolio pages keep normal performance while visitors listen on demand.
Do I need API keys to add AI voice to Squarespace?
No. GSpeech is No API Keys Required for Squarespace. Sign in to the Cloud Console, add Code Injection, configure widgets, and publish. Voices and players stay in one account without third-party TTS keys on your site.
Help
Need help finding selectors for a Squarespace layout or Code Injection embed?
Contact GSpeech support.
Send a page URL and we will help map Content Selector / Render Element.
