Create a widget
Create a Circle Player — floating circular listen control
The Circle Player is a floating circular control for page audio. It stays compact, works well on marketing pages and mobile layouts, and still uses GSpeech Cloud Audio Generation with cached AI voices.
Configure Content Selector for the text to narrate, Render Element for the mount class (often .gsp_circle_player), and Title Text for the hover label.
- Floating circle UI — minimal footprint, strong visual cue.
- Hover title — Title Text shows when users hover the control.
- Custom HTML mount — <div class="gsp_circle_player"></div>
Open Cloud Console
Button Player
Live demos
Setup
How to create a Circle Player
- Sign in (or register free).
- Open the dashboard and choose your website.
- Widgets → Add new widget.
- Enter a title → type Circle Player → Create.
- Open Content: set Content Selector and Render Element (# = id, . = class; commas gather / exclude pieces).
- Set Title Text (shown on hover).
- Save, publish, and test on mobile and desktop.
New to HTML values? id → #, class → ., commas. Voice and most player options default to Use Global from website Settings — Global vs custom settings.
Custom HTML
Mount code
- Circle Player: <div class="gsp_circle_player"></div>
FAQ
Circle Player FAQ
-
Yes. Test placement so it does not cover important CTAs. Title Text on hover may be less visible on touch devices — keep labels clear in content elsewhere if needed.
-
Full Player is a dedicated listen bar for long articles. Circle is a compact floating control when you want audio without a full-width player chrome.
Issues? Contact Us.
