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://api.earpocket.com/widget.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.

Step-by-Step Installation​

1. Get Your Site ID​

Sign up at earpocket.com to get your site ID. This identifies your website and links audio to your account.

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://api.earpocket.com/widget.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 Guides​

WordPress​

Add the script to your theme's footer.php or use a plugin like "Insert Headers and Footers":

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

Next.js​

Use the Script component in your layout:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://api.earpocket.com/widget.js"
        data-site="YOUR_SITE_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

React (Vite, CRA)​

Add to your index.html:

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

Gatsby​

Use gatsby-ssr.js:

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="earpocket"
      src="https://api.earpocket.com/widget.js"
      data-site="YOUR_SITE_ID"
      async
    />,
  ]);
};

Hugo / Jekyll / Static Sites​

Add to your base template or layout file, before </body>:

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

What's Next?​