Skip to main content

Inline Mode

Place the Earpocket widget directly within your article content as a horizontal "Listen to this article" bar.

Overview​

Inline mode displays a horizontal bar above or within your article content, rather than a floating button in the corner. This creates a more integrated experience for readers.

The inline bar includes:

  • Headphones icon with "Listen to this article" text
  • Estimated listening duration (e.g., "8 min")
  • "Add to Podcast App" button

When clicked, a popup appears with options to listen in the browser or subscribe via podcast apps.

Basic Setup​

Add the script tag with data-position="inline" and place a marker element where you want the bar to appear:

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

<!-- 2. Place the marker where you want the bar -->
<article>
  <h1>Article Title</h1>
  <div data-earpocket></div>
  <p>Article content goes here...</p>
</article>

The widget will replace the <div data-earpocket></div> marker with the listen bar.

Placement Methods​

Place a <div data-earpocket></div> element exactly where you want the bar:

<article>
  <h1>My Great Article</h1>
  <p class="byline">By Jane Doe · March 15, 2024</p>
  
  <div data-earpocket></div>
  
  <p>Article content starts here...</p>
</article>

This gives you precise control over placement in your HTML.

Method 2: CSS Selector​

Target an existing element using the data-target attribute:

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

The bar will be inserted before the targeted element. This is useful when you can't modify the article HTML directly.

Multi-Article Pages​

For pages displaying multiple articles (like a homepage or category page), add data-url to each marker to specify which article each bar should convert:

<article>
  <h1>First Article</h1>
  <div data-earpocket data-url="https://yoursite.com/articles/first-article"></div>
  <p>First article content...</p>
</article>

<article>
  <h1>Second Article</h1>
  <div data-earpocket data-url="https://yoursite.com/articles/second-article"></div>
  <p>Second article content...</p>
</article>

Without data-url, the widget uses the current page URL.

Customization​

Custom Button Text​

Change the default "Add to Podcast App" button text:

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

Hide Duration​

If you prefer not to show the estimated listening time:

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

How It Works​

  1. Reader sees the bar — The inline bar appears where you placed the marker
  2. Reader clicks the button — The article is queued for audio conversion
  3. Popup appears — Shows QR code (desktop) or podcast app buttons (mobile)
  4. Audio delivered — The article appears in their podcast app within minutes

The bar updates to show "Added" status after the reader clicks, confirming the article is being processed.

Fallback Behavior​

If inline mode is configured but the target element cannot be found:

  1. The widget logs a warning to the browser console
  2. It automatically falls back to floating mode (bottom-right position)
  3. Readers can still use the widget normally

This ensures the listen functionality is always available, even if there's a placement issue.

Styling​

The inline bar is designed to blend with most site designs:

  • Subtle background with your site's accent color tint
  • Responsive layout that stacks vertically on mobile
  • Consistent typography that adapts to your page

The widget uses Shadow DOM isolation, so it won't conflict with your site's CSS.

Complete Example​

<!DOCTYPE html>
<html>
<head>
  <title>My Blog Post</title>
</head>
<body>
  <article>
    <header>
      <h1>Understanding Machine Learning</h1>
      <p class="meta">By Alex Chen · 12 min read</p>
    </header>
    
    <!-- Earpocket inline bar appears here -->
    <div data-earpocket></div>
    
    <section>
      <p>Machine learning is transforming how we build software...</p>
      <!-- Rest of article -->
    </section>
  </article>

  <!-- Earpocket Widget -->
  <script
    src="https://widget.earpocket.com/embed.js"
    data-site="YOUR_SITE_ID"
    data-position="inline"
    data-button-text="Listen to Article"
    async
  ></script>
</body>
</html>

What's Next?​