Skip to main content

Widget Installation

Add the Earpocket widget to your website with a single line of code.

Quick Start​

Add this code to your website, just before the closing </body> tag:

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

Replace YOUR_SITE_ID with your unique site identifier.

That's it!

The widget will automatically appear on your pages. No additional configuration required.

Choose Your Mode​

Earpocket supports two display modes:

ModeBest ForAppearance
Floating (default)General sites, blogsFixed button in corner
InlineNews sites, publishersBar within article content

Floating Mode​

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

Inline Mode​

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

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

For detailed inline setup, see Inline Mode.

Step-by-Step Installation​

1. Get Your Site ID​

Before installing the widget, you need a Site ID:

  1. Create an account at app.earpocket.com (free, no credit card)
  2. Create a site in your dashboard
  3. Copy your Site ID (format: site_xxxxxxxxxxxx)

Your Site ID links the widget to your account and enables audio delivery.

Already have an account?

Find your Site ID on your Dashboard or on any site's detail page.

2. Add the Script Tag​

Place the script tag in your HTML. The best location is just before </body>:

<!DOCTYPE html>
<html>
  <head>
    <title>My Article</title>
  </head>
  <body>
    <article>
      <h1>My Great Article</h1>
      <p>Article content here...</p>
    </article>

    <!-- Earpocket Widget -->
    <script
      src="https://widget.earpocket.com/embed.js"
      data-site="YOUR_SITE_ID"
      async
    ></script>
  </body>
</html>

3. Verify Installation​

Load your page in a browser. You should see the Earpocket button appear (typically in the bottom-right corner).

Platform-Specific Guides​

For detailed instructions on popular platforms, see Platform Guides:

What's Next?​