Quick Start
Add this script tag anywhere in your HTML (in the <head> or <body>):
<script async src="https://cdn.prospeaker.io/widget.js"
data-widget-key="YOUR_WIDGET_KEY"></script>
Replace YOUR_WIDGET_KEY with your actual widget key from the dashboard.
Widget Placement:
- • Default: The widget appears as a fixed-position button in the top-right corner
- • Custom location: Add
data-target="your-element-id"to place it at a specific element - • Inline placement: Create
<div id="widget-container"></div>where you want the widget to appear
Full HTML Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog Post</title>
</head>
<body>
<article>
<h1>My Article Title</h1>
<p>This content will be read aloud when visitors
click the Listen button.</p>
<p>ProSpeaker automatically finds your main content
using Mozilla Readability.</p>
</article>
<!-- ProSpeaker Widget -->
<script async src="https://cdn.prospeaker.io/widget.js"
data-widget-key="YOUR_WIDGET_KEY"></script>
</body>
</html>Configuration Options
You can customize the widget using data attributes:
| Attribute | Description | Default |
|---|---|---|
| data-widget-key | Your widget key (required) | — |
| data-target | Element ID or class to place widget at | Fixed position (top-right) |
| data-selector | CSS selector for content | Auto-detect |
| data-replace | Replace target element with widget | false |
Widget Placement Options
By default, the widget appears as a fixed-position button in the top-right corner. You can customize placement using these methods:
1. Fixed Position (Default)
The widget appears as a floating button in the top-right corner.
<script async src="https://cdn.prospeaker.io/widget.js"
data-widget-key="YOUR_WIDGET_KEY"></script>2. Place at Specific Element
Use data-target to place the widget at a specific element (by ID or class).
<div id="audio-player"></div>
<script async src="https://cdn.prospeaker.io/widget.js"
data-widget-key="YOUR_WIDGET_KEY"
data-target="audio-player"></script>3. Inline Placement
Create a widget-container div where you want the widget to appear.
<article>
<h1>My Article</h1>
<div id="widget-container"></div>
<p>Content here...</p>
</article>
<script async src="https://cdn.prospeaker.io/widget.js"
data-widget-key="YOUR_WIDGET_KEY"></script>Targeting Specific Content
ProSpeaker auto-detects article content using Mozilla Readability.
To target specific content, add the data-selector attribute:
<script async src="https://cdn.prospeaker.io/widget.js"
data-widget-key="YOUR_WIDGET_KEY"
data-selector=".article-content"></script>Platform-Specific Guides
WordPress
Add the script in Appearance → Theme Editor → header.php or use "Insert Headers and Footers" plugin. The widget appears as a fixed button by default.
Squarespace
Settings → Advanced → Code Injection → Header or Footer. The script can go in either location.
Webflow
Project Settings → Custom Code → Header Code or Footer Code. The widget will appear as a fixed button.
Ghost
Settings → Code injection → Site Header or Site Footer. Use data-target to place it at a specific location.
Wix
Settings → Custom Code → Head or Body - end. The widget appears as a fixed button by default.
Shopify
Online Store → Themes → Edit Code → theme.liquid. Add script in <head> or before </body>. Widget appears as fixed button.
Troubleshooting
Widget doesn't appear
Check that the script is in your HTML (View Source → search for "prospeaker"). Verify your widget key is correct.
Wrong content being read
Use the data-selector attribute to target specific content.
Audio doesn't play
Check browser console for errors. Ensure your domain is whitelisted in the dashboard.