Audio Native with Ghost

Integrate Audio Native into your Ghost blog.

Follow the steps in the Audio Native overview to get started with Audio Native before continuing with this guide.

1

Add HTML to your blog post

Navigate to your Ghost blog, sign in and open the settings page for the blog post you wish to narrate.

2

Add the embed code to your blog post

Click the ”+” symbol on the left and select “HTML” from the menu.

Audio Native

Paste the Audio Native embed code into the HTML box and press enter.

Embed code snippet
1    <div
2        id="elevenlabs-audionative-widget"
3        data-height="90"
4        data-width="100%"
5        data-frameborder="no"
6        data-scrolling="no"
7        data-publicuserid="public-user-id"
8        data-playerurl="https://elevenlabs.io/player/index.html"
9        data-projectid="project-id"
10    >
11        Loading the <a href="https://elevenlabs.io/text-to-speech" target="_blank" rel="noopener">Elevenlabs Text to Speech</a> AudioNative Player...
12    </div>
13    <script src="https://elevenlabs.io/player/audioNativeHelper.js" type="text/javascript"></script>
Audio Native
3

Update the blog post

Click the “Update” button in the top right corner of the editor, which should now be highlighted in green text.

Audio Native
4

Navigate to the live version of the blog post

Finally, navigate to the live version of the blog post. You should see a message to let you know that the Audio Native project is being created. After a few minutes the text in your blog will be converted to an audio article and the embedded audio player will appear.

Audio Native
Built with