Platform Guides

Step-by-step instructions for adding Earpocket to popular website platforms.

---

WordPress

Option 1: Theme Footer (Simple)

Add the script to your theme's footer.php file, just before </body>:

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

Option 2: Plugin (Recommended)

Use a plugin like "Insert Headers and Footers" or "WPCode":

1. Install and activate the plugin
2. Go to the plugin settings
3. Paste the script tag in the "Footer" section
4. Save changes

Option 3: Inline Mode with Theme Editing

For inline mode, edit your theme's single post template (single.php or similar):

<article>
  <h1><?php the_title(); ?></h1>
  <?php the_post_thumbnail(); ?>
  
  <!-- Earpocket inline bar -->
  <div data-earpocket></div>
  
  <?php the_content(); ?>
</article>

Then add the script with data-position="inline" to your footer.

Option 4: Shortcode (Advanced)

Create a simple shortcode in your theme's functions.php:

function earpocket_shortcode() {
  return '<div data-earpocket></div>';
}
add_shortcode('earpocket', 'earpocket_shortcode');

Then use [earpocket] in your posts where you want the bar to appear.

---

Ghost

Floating Mode

Add the script via Ghost's Code Injection:

1. Go to Settings → Code injection
2. Paste in the Site Footer section:

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

3. Click Save

Inline Mode

For inline mode, you'll need to edit your theme:

1. Download your current theme from Settings → Design → Change theme → Advanced
2. Edit post.hbs to add the marker:

<article class="post">
  <header>
    <h1>{{title}}</h1>
  </header>
  
  <!-- Earpocket inline bar -->
  <div data-earpocket></div>
  
  <section class="post-content">
    {{content}}
  </section>
</article>

3. Upload the modified theme
4. Add the script with data-position="inline" via Code Injection

---

Wix

Floating Mode

1. Go to your Wix Editor
2. Click Add Elements (+) → Embed Code → Embed HTML
3. Paste the script tag
4. Position the element anywhere (it will float regardless)
5. Publish your site

Inline Mode

1. Go to your Wix Editor
2. Navigate to your blog post template
3. Click Add Elements (+) → Embed Code → Embed HTML
4. Paste both the script and marker:

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

5. Position the embed element where you want the bar
6. Publish your site

---

Squarespace

Floating Mode

1. Go to Settings → Advanced → Code Injection
2. Paste the script in the Footer section:

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

3. Click Save

Inline Mode

1. Edit your blog post or page
2. Add a Code Block where you want the bar
3. Paste:

<div data-earpocket></div>

4. Add the script with data-position="inline" to Code Injection (Footer)
5. Save and publish

---

Webflow

Floating Mode

1. Go to Project Settings → Custom Code
2. Paste the script in the Footer Code section
3. Publish your site

Inline Mode

1. Add the script to Project Settings → Custom Code → Footer Code:

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

2. In the Designer, add an Embed element where you want the bar
3. Paste: <div data-earpocket></div>
4. Publish your site

---

Next.js

Use the Script component in your layout or page:

import Script from 'next/script';

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

For inline mode, add the marker in your article component:

export default function Article({ content }) {
  return (
    <article>
      <h1>{content.title}</h1>
      <div data-earpocket></div>
      <div dangerouslySetInnerHTML={{ __html: content.body }} />
    </article>
  );
}

---

Gatsby

Use gatsby-ssr.js to add the script:

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

For inline mode, add the marker in your blog post template:

export default function BlogPost({ data }) {
  return (
    <article>
      <h1>{data.post.title}</h1>
      <div data-earpocket></div>
      <div dangerouslySetInnerHTML={{ __html: data.post.html }} />
    </article>
  );
}

---

Hugo

Add to your base template (e.g., layouts/_default/baseof.html):

<!DOCTYPE html>
<html>
<head>
  {{ partial "head.html" . }}
</head>
<body>
  {{ block "main" . }}{{ end }}
  
  <script
    src="https://widget.earpocket.com/embed.js"
    data-site="YOUR_SITE_ID"
    async
  ></script>
</body>
</html>

For inline mode, edit your single post template (layouts/_default/single.html):

{{ define "main" }}
<article>
  <h1>{{ .Title }}</h1>
  <div data-earpocket></div>
  {{ .Content }}
</article>
{{ end }}

---

Jekyll

Add to your default layout (_layouts/default.html):

<!DOCTYPE html>
<html>
<head>
  {% include head.html %}
</head>
<body>
  {{ content }}
  
  <script
    src="https://widget.earpocket.com/embed.js"
    data-site="YOUR_SITE_ID"
    async
  ></script>
</body>
</html>

For inline mode, edit your post layout (_layouts/post.html):

---
layout: default
---
<article>
  <h1>{{ page.title }}</h1>
  <div data-earpocket></div>
  {{ content }}
</article>

---

Static HTML Sites

Add the script just before </body>:

<!DOCTYPE html>
<html>
<head>
  <title>My Article</title>
</head>
<body>
  <article>
    <h1>Article Title</h1>
    <div data-earpocket></div>
    <p>Content...</p>
  </article>

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

---

What's Next?

• Configuration — All available options
• Inline Mode — Detailed inline mode guide
• Advanced Usage — Manual initialization and troubleshooting