How-tos
Place a custom widget — player in footer, sidebar, or any layout spot
A custom widget placement lets you put a Full / Button / Circle player anywhere your layout allows — footer, sidebar, header strip, or a Custom HTML block — while still controlling what gets narrated. Two fields do the mapping: Render Element (where the player appears) and Content Selector (what text is read).
- Why useful — listen UI can live outside the article body (sticky footer, sidebar CTA) without changing how content is selected.
- Render Element — CSS selector for the mount / container where the player UI is injected.
- Content Selector — CSS selector (or parent_class / self_class) for the text that becomes audio.
- Same idea on HTML & builders — Custom HTML mounts on HTML / Wix / Shopify / Squarespace use the same pair of fields.
Open Cloud Console
HTML connection guide
All How-tos
Mapping
Render Element vs Content Selector
- Render Element = place. Example mounts: .gsp_full_player, .gsp_button_player, .gsp_circle_player — or a layout node like #footer-listen.
- Content Selector = what to read. Example: article.post, #main, .product-description.
- parent_class — read the parent of the mount (handy when the mount sits inside the content block).
- self_class — read the same wrapper the mount sits in.
- Exclude List — skip nav, ads, comments inside the selected content.
Rule of thumb: Content Selector points at the text you control; Render Element points at the empty mount (or container) where the player should appear.
Setup
How to place a custom widget
- Ensure the site connection code (or WordPress / CMS integration) is live.
- Add an empty mount where the player should show — for example <div class="gsp_button_player"></div> in the footer or sidebar Custom HTML.
- In the Cloud Console, open (or create) the matching Full / Button / Circle widget and Publish it.
- Set Render Element to the mount class (e.g. .gsp_button_player).
- Set Content Selector to the article / product wrapper visitors should hear (or keep parent_class when the mount sits inside that content).
- Optional: add Exclude List and Allowed / Blocked URLs so the player only appears where you want.
- Save, hard-reload the live page, and confirm the player appears in the custom location while reading the right content.
Examples
Common layouts
- Sidebar listen button — Render Element .gsp_button_player in the sidebar; Content Selector article or .entry-content.
- Footer strip — mount in the footer template; Content Selector still targets the main article so footer chrome is not spoken.
- Builder Custom HTML — same mounts on Wix / Shopify / Squarespace Custom Code / HTML blocks; map classes exactly as in the HTML guide.
FAQ
Custom widget FAQ
-
Check Render Element first — the mount class must exist on that page and match the widget. Also confirm the widget is Published and URL allow/block rules are not hiding it.
-
Yes. One published widget can fill every matching Render Element mount allowed by your URL rules. Create extra widgets only when voice, design, or selectors must differ.
