Place a Custom Widget

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. One target or several, comma-separated — e.g. #main or #intro,.product-description,#specs.
• 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 — also comma-separated; skip nav, ads, comments inside the selected content (e.g. #comments,.ads,.share-buttons).

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.

How to write id, class, and commas

You do not need to know HTML deeply — remember two prefixes, then assemble or trim with commas:

• id → # — id="footer-listen" → #footer-listen.
• class → . — class="gsp_button_player" → .gsp_button_player.
• Tag only — article, section, h1 (no prefix).
• Gather pieces — Content Selector can list several wrappers: #intro,.body,#cta-note.
• Trim pieces — Exclude List uses the same # / . + commas. See Exclude List & nospeech and the HTML call guide’s HTML values section.
• Find them — right-click the block on the live page → Inspect → copy id / class into the console with the correct prefix.

Voice, language, and most player chrome still follow website Settings when the widget field says Use Global — placement does not force a custom voice. See Global vs custom settings.

How to place a custom widget

1. Ensure the site connection code (or WordPress / CMS integration) is live.
2. Add an empty mount where the player should show — for example <div class="gsp_button_player"></div> in the footer or sidebar Custom HTML.
3. In the Cloud Console, open (or create) the matching Full / Button / Circle widget and Publish it.
4. Set Render Element to the mount class (e.g. .gsp_button_player).
5. Set Content Selector to the article / product wrapper (or several pieces with commas, e.g. #intro,.entry-content). Keep parent_class when the mount sits inside that content. Remember: id → #, class → ..
6. Optional: Exclude List (comma-separated, same # / . rules) and Allowed / Blocked URLs so the player only appears where you want.
7. Save, hard-reload the live page, and confirm the player appears in the custom location while reading the right content.

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.