​
Embed ElevenLabs on any web page

Loading the Elevenlabs Text to Speech AudioNative Player...

Audio Native is an embedded audio player that automatically voices content of a web page using ElevenLab’s text-to-speech service. It can also be used to embed pre-generated content from a project into a web page. All it takes to deploy on your site is a brief snippet of html. In addition, Audio Native comes with built-in metrics so you can track audience engagement through a listener dashboard.

​
Set up

Before creating and deploying Audio Native players, you’ll need to go through a few steps to configure Audio Native on your account.

It’s best not to skip any of these steps in order to understand how Audio native works and prevent potential misuse of the service. Don’t worry about getting everything right the first time you configure Audio Native, you can always change the settings later!

  1. Navigate to Audio Native
  2. Enable Audio Native
    • Click on the button to enable Audio Native on your account
    • Toggle Audio Native on and click Next
  3. Configure whitelisted sites - these are the list of website domains that will be permitted to play your content. Your Audio Native players will only work on sites that begin with the domains that you specify in this list.
    • For example, below if “elevenlabs.io/” is whitelisted, then the Audio Native player will work on any site on the elevenlabs website.
    • However if we want to restrict it to just the blog page, then we can specify that in the whitelist by listing “elevenlabs.io/blog” instead. In this case, the Audio Native player will only work on any of the blog pages, and not other elevenlabs.io sites.
    • If you want to only allow Audio Native on specific sites, then list the full url of the site.
  4. Configure your Audio Native player’s appearance and default settings.
    • Configure sessionization - the Audio Native metrics dashboard tracks user sessions. Use the number input to configure how long you want a session to last.
    • Select a default voice. This is the voice that will be used if you are using Audio Native to automatically convert content from the page it’s embedded in. If you use Audio Native to play content already generated in a Project, it will keep the voice used in the Project.
    • Change Text, Image, and Appearance - The last two steps let you make aesthetic changes to the player in order to match any design style and color palette.
  5. Grab the code snippet
    • Now that you have the Audio Native set up, you can use this code snippet to embed Audio Native into the html of any (whitelisted) site you’d like to have voiced by ElevenLabs.

​
Deploying Audio Native

To see an example implementation check out our dubbing studio blog post.

The embedded player automatically collects listening metrics, retention and more. Plus, it can be readily extended to any article through simple copy-pasting.

There are three ways to deploy your Audio Native Player

​
Method 1: Embed and automatically voice the site

Take the code that you generated during Audio Native set up and embed it into your website. The next time the site is opened, Audio Native will:

  1. Create a new Project (make sure you have Project slots available otherwise it will throw an error)
  2. Grab the webpage’s contents and put it into the newly created Project
  3. Convert the Project into audio and deliver it to the Audio Native player

Once this process is complete, you can edit the Audio by editing the resulting Project. To update the audio after saving your edits to the project, select versions and publish the new version:

​
Method 2: Embed audio from an existing project

If you already have a Project converted to voice audio and would like to embed that voice audio in an Audio Native player, simply select share on the Project and use the generated html snippet to embed the voice audio on any whitelisted site.

​
Method 3: Embed audio from content using our API

You can use our API to programmatically create an Audio Native player for your existing content.

Using this API method you can submit your content as either a .html or .txt file and we will return an embeddable html code for an Audio Native player which can be inserted into your website or blog. Our Audio Native HTML embed code follows a standardised format, with a unique identifier for the uploaded content.

In the background when this api is called it will automatically convert your content into an ElevenLabs Project, optionally convert the project into audio straight away, and then enable sharing on this project audio using the returned Audio Native player.

Future edits to the content can be done by calling this method again with the new content, or from within the Projects UI.