How to Add ElevenLabs Audio to Every Ghost Post

Integrations & API
1

How to Add ElevenLabs Audio to Every Ghost Post

I wanted one simple thing:

Every Ghost post should have a “Listen” button.

I did not want to paste ElevenLabs code into every post manually.

The solution was much simpler:

Set up ElevenLabs Audio Native once, then add one script to Ghost Code Injection.

That’s it.

Here’s how.

1. Set up Audio Native in ElevenLabs

In ElevenLabs, open Audio Native.

Choose the voice you want.

Then add your Ghost domain under Allowed Sites.

Example:

https://yourblog.com

Then click Get Embed Code.

You’ll see something containing:

data-publicuserid="YOUR_ID_HERE"

Copy that long ID.

Do not use your ElevenLabs API key.

2. Test it on one Ghost post first

Open one post in Ghost.

Add an HTML card near the top of the article:

+ → HTML

Paste the ElevenLabs embed code into that HTML card.

Publish/update the post.

Open the live post.

You may initially see:

Converting the page to audio…

Give it a minute or two.

Then the ElevenLabs player should appear.

Press Play.

If it works, move on.

3. Add it to every post automatically

Now go to:

Ghost → Settings → Advanced → Code Injection → Site Footer

Paste this:

<style>
.elevenlabs-ghost-player {
    width: 100%;
    margin: 24px 0 32px;
}
</style>

<script>
(function () {

    if (!document.body.classList.contains('post-template')) {
        return;
    }

    if (document.getElementById('elevenlabs-audionative-widget')) {
        return;
    }

    const content =
        document.querySelector('.gh-content') ||
        document.querySelector('.post-content') ||
        document.querySelector('.article-content');

    if (!content) return;

    const wrapper = document.createElement('div');

    wrapper.className = 'elevenlabs-ghost-player';

    wrapper.innerHTML = `
        <div
            id="elevenlabs-audionative-widget"
            data-height="90"
            data-width="100%"
            data-frameborder="no"
            data-scrolling="no"
            data-publicuserid="YOUR_PUBLIC_USER_ID"
            data-playerurl="https://elevenlabs.io/player/index.html"
        >
            Loading audio...
        </div>
    `;

    content.insertBefore(wrapper, content.firstChild);

    if (!document.querySelector('script[src*="audioNativeHelper.js"]')) {
        const script = document.createElement('script');
        script.src = 'https://elevenlabs.io/player/audioNativeHelper.js';
        script.async = true;
        document.body.appendChild(script);
    }

})();
</script>

Replace:

YOUR_PUBLIC_USER_ID

with the ID you copied from ElevenLabs.

Click Save.

4. You’re done

Now every Ghost post gets the ElevenLabs player automatically.

You do not need to:

  • edit every old post

  • add a new embed every time you publish

  • build an API

  • use GitHub

  • run your own server

The same Ghost Code Injection works for old posts and future posts.

One final tip: open your old posts once after installing this. That lets ElevenLabs generate the audio ahead of time, so readers don’t see the initial “Converting the page to audio…” message.

I tested this across 35 Ghost essays, and all 35 ended up with working audio.

That’s the whole setup.

1 Like
2

Looked at the Eleven Labs site – don’t see “Audio Native” anywhere. Is it under something else?

3

https://elevenlabs.io/app/audio-native

It works great!