CommunityBlogHelp CenterAPI PricingSign up
DocsAgents PlatformAPI reference
DocsAgents PlatformAPI reference
  • GET STARTED
    • Overview
    • Quickstart
    • Models
    • Changelog
  • CAPABILITIES
    • Text to Speech
    • Speech to Text
    • Text to Dialogue
    • Voice Changer
    • Voice Isolator
    • Dubbing
    • Sound Effects
    • Voices
    • Voice Remixing
    • Forced Alignment
    • Music
    • Voice Agents
  • DEVELOPER GUIDES
    • Libraries & SDKs
    • WebSockets
    • Error messages
    • Example projects
    • Next.js template
    • Showcase
  • BEST PRACTICES
    • Latency optimization
    • Security
    • Breaking changes policy
  • PRODUCT GUIDES
    • Overview
  • PRIVATE DEPLOYMENT
    • Overview
  • SERVICES
  • RESOURCES
    • Troubleshooting
    • Zero Retention Mode
LogoLogo
Login
Login
CommunityBlogHelp CenterAPI PricingSign up
PRODUCT GUIDESAudio toolsAudio Native

Integrate Audio Native into your Framer websites.

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

1

Add Audio Native script to your page

Navigate to your Framer page, sign in and go to your site settings. From the Audio Native embed code, extract the <script> tag and paste it in the “End of <body> tag” field.

Embed script
1 <script src="https://elevenlabs.io/player/audioNativeHelper.js" type="text/javascript"></script>
Audio Native
2

Add an Embed Element

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

Audio Native

In the config for the Embed Element, switch the type to HTML and paste the <div> snippet from the Audio Native embed code into the HTML box.

Embed div
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>
Audio Native
3

Publish your changes

Finally, publish your changes and navigate to the live version of your page. 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
Was this page helpful?
Previous

Audio Native with Webflow

Integrate Audio Native into your Webflow sites.
Next
Built with
Audio Native with Framer