Widget Configuration
Customize the Earpocket widget using data attributes on the script tag.
Configuration Options
| Attribute | Required | Default | Description |
|---|---|---|---|
data-site | Yes | — | Your unique site identifier |
data-position | No | bottom-right | Widget position on the page |
data-theme | No | auto | Color theme |
data-api-url | No | https://api.earpocket.com | API endpoint |
data-player-url | No | https://play.earpocket.com | Web player URL |
data-feeds-url | No | https://feeds.earpocket.com | RSS feeds URL |
Position
Control where the widget button appears:
<!-- Bottom right (default) -->
<script src="..." data-site="..." data-position="bottom-right" async></script>
<!-- Bottom left -->
<script src="..." data-site="..." data-position="bottom-left" async></script>
<!-- Top right -->
<script src="..." data-site="..." data-position="top-right" async></script>
<!-- Top left -->
<script src="..." data-site="..." data-position="top-left" async></script>
| Value | Description |
|---|---|
bottom-right | Fixed to bottom-right corner (default) |
bottom-left | Fixed to bottom-left corner |
top-right | Fixed to top-right corner |
top-left | Fixed to top-left corner |
Theme
The widget supports light and dark themes:
<!-- Auto-detect from system preference (default) -->
<script src="..." data-site="..." data-theme="auto" async></script>
<!-- Force light theme -->
<script src="..." data-site="..." data-theme="light" async></script>
<!-- Force dark theme -->
<script src="..." data-site="..." data-theme="dark" async></script>
| Value | Description |
|---|---|
auto | Matches user's system preference (default) |
light | Always use light theme |
dark | Always use dark theme |
Full Example
Here's a fully configured widget:
<script
src="https://api.earpocket.com/widget.js"
data-site="my-blog"
data-position="bottom-left"
data-theme="dark"
async
></script>
Local Development
For development environments, override the URLs:
<script
src="http://localhost:4000/widget.js"
data-site="dev-site"
data-api-url="http://localhost:8787"
data-player-url="http://localhost:3000"
data-feeds-url="http://localhost:8787/v1/feed"
async
></script>
Development Only
Never use localhost URLs in production. The default URLs will work automatically.
What's Next?
- Advanced usage — Manual initialization and troubleshooting