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: bottom-right, bottom-left, top-right, top-left, or inline
data-theme	No	auto	Color theme: auto, light, or dark
data-target	No	—	CSS selector for inline mode target element
data-url	No	—	Override article URL (for multi-article pages)
data-button-text	No	Add to Podcast App	Custom button text (inline mode)
data-show-duration	No	true	Show estimated listening duration (inline mode)

---

Widget Modes

The widget supports two display modes:

Floating Mode (Default)

A fixed-position button that appears in a corner of the screen. Best for sites that want a persistent, always-visible listen option.

<script
  src="https://widget.earpocket.com/embed.js"
  data-site="YOUR_SITE_ID"
  data-position="bottom-right"
  async
></script>

Inline Mode

A horizontal bar placed within your article content. Best for publishers who want the listen option integrated directly into their article layout.

<script
  src="https://widget.earpocket.com/embed.js"
  data-site="YOUR_SITE_ID"
  data-position="inline"
  async
></script>

<!-- Place this where you want the bar to appear -->
<div data-earpocket></div>

When to use each mode

• Floating: General-purpose sites, blogs with varied layouts, single-page apps
• Inline: News sites, long-form content, publisher platforms where the listen option should feel native to the article

For detailed inline mode setup, see Inline Mode.

---

Position

Control where the floating 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>

<!-- Inline (anchored to article) -->
<script src="..." data-site="..." data-position="inline" 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
inline	Anchored within article content

---

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

---

Inline Mode Options

These options apply when using data-position="inline":

Target Element

Specify where the inline bar should appear using a CSS selector:

<script
  src="https://widget.earpocket.com/embed.js"
  data-site="YOUR_SITE_ID"
  data-position="inline"
  data-target="#article-header"
  async
></script>

Alternatively, place a marker element with data-earpocket:

<div data-earpocket></div>

Custom Button Text

Change the button label:

<script
  src="..."
  data-site="..."
  data-position="inline"
  data-button-text="Listen to Article"
  async
></script>

Duration Display

Show or hide the estimated listening time:

<!-- Show duration (default) -->
<script src="..." data-site="..." data-show-duration="true" async></script>

<!-- Hide duration -->
<script src="..." data-site="..." data-show-duration="false" async></script>

---

Full Examples

Floating Widget

<script
  src="https://widget.earpocket.com/embed.js"
  data-site="my-blog"
  data-position="bottom-left"
  data-theme="dark"
  async
></script>

Inline Widget

<script
  src="https://widget.earpocket.com/embed.js"
  data-site="my-blog"
  data-position="inline"
  data-button-text="Listen Now"
  data-show-duration="true"
  async
></script>

<article>
  <h1>My Article Title</h1>
  <div data-earpocket></div>
  <p>Article content...</p>
</article>

---

What's Next?

• Inline Mode — Detailed guide for inline widget setup
• Platform Guides — WordPress, Ghost, Wix, and more
• Advanced Usage — Manual initialization and troubleshooting