Before adding Audio Native to Framer, you’ll need to create & customize your player, whitelist your blog’s domain, and copy your embed code. If you need help completing those steps, refer to our Audio Native overview.

Now that you’ve created & customized your Audio Native player, navigate to Framer. Go to Site Settings in Extract the <script> tag from the ElevenLabs Embed Code and add it to your Framer Site Settings in the field: End of <body> tag.

Now on your Framer blog page, add an Embed Element from Utilities.

In the config for the Embed Element, switch the type to HTML and the <div> snippet from the ElevenLabs Embed Code.

Publish your changes and after a few minutes, the embedded audio player will appear and you can click play to hear the AI-generated audio blog.

Follow these steps for any Framer blog posts that you wish to turn into audio articles.

Audio Native in SquarespaceAudio Native in Webflow