25/11/2025, 16:50 Audio Native with React | ElevenLabs Documentation
Scribe v2 Realtime is now available. Learn more about the model here.
Search / Ask AI
Product guides Audio tools Audio Native
Audio Native with React
Integrate Audio Native into your React apps.
Follow the steps in the Audio Native overview to get started with Audio Native before continuing
with this guide.
This guide will show how to integrate Audio Native into React apps. The focus will be on a Next.js
project, but the underlying concepts will work for any React based application.
1 Create an Audio Native React component
After completing the steps in the Audio Native overview, you’ll have an embed code
snippet. Here’s an example snippet:
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"
12 </div>
13 Need help?
<script src="https://elevenlabs.io/player/audioNativeHelper.js" type="text/ja
Ask anything
We can extract the data from the snippet to create a customizable React component.
Powered by ElevenLabs Agents
https://elevenlabs.io/docs/product-guides/audio-tools/audio-native/react 1/4
25/11/2025, 16:50 Audio Native with React | ElevenLabs Documentation
Scribe v2 Realtime is now available. Learn more about the model here.
ElevenLabsAudioNative.tsx
1 // ElevenLabsAudioNative.tsx
2
3 'use client';
4
5 import { useEffect } from 'react';
6
7 export type ElevenLabsProps = {
8 publicUserId: string;
9 textColorRgba?: string;
10 backgroundColorRgba?: string;
11 size?: 'small' | 'large';
12 children?: React.ReactNode;
13 };
14
15 export const ElevenLabsAudioNative = ({
16 publicUserId,
17 size,
18 textColorRgba,
19 backgroundColorRgba,
20 children,
21 }: ElevenLabsProps) => {
22 useEffect(() => {
23 const script = document.createElement('script');
24
25 script.src = 'https://elevenlabs.io/player/audioNativeHelper.js';
26 script.async = true;
27 document.body.appendChild(script);
28
29 return () => {
30 document.body.removeChild(script);
31 };
32 }, []);
33
34 return (
35 <div
36 id="elevenlabs-audionative-widget"
37 data-height={size === 'small' ? '90' : '120'}
38 data-width="100%"
39 data-frameborder="no"
Need help?
40 data-scrolling="no"
41 data-publicuserid={publicUserId}
Ask anything
42 data-playerurl="https://elevenlabs.io/player/index.html"
43 data-small={size === 'small' ? 'True' : 'False'}
Powered by ElevenLabs Agents
https://elevenlabs.io/docs/product-guides/audio-tools/audio-native/react 2/4
25/11/2025, 16:50 Audio Native with React | ElevenLabs Documentation
44 data-textcolor={textColorRgba ?? 'rgba(0, 0, 0,
Scribe v2 Realtime is now available. Learn more about the1.0)'}
model here.
45 data-backgroundcolor={backgroundColorRgba ?? 'rgba(255, 255, 255, 1.0)'}
46 >
47 {children ? children : 'Elevenlabs AudioNative Player'}
48 </div>
49 );
50 };
51
52 export default ElevenLabsAudioNative;
The above component can be found on GitHub .
2 Use the Audio Native component
Before using the component on your page, you need to retrieve your public user ID from
the original code snippet. Copy the contents of data-publicuserid from the embed code
snippet and insert it into the publicUserId prop of the component.
page.tsx
1 import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';
2
3 export default function Page() {
4 return (
5 <div>
6 <h1>Your Page Title</h1>
7
8 // Insert the public user ID from the embed code snippet
9 <ElevenLabsAudioNative publicUserId="<your-public-user-id>" />
10
11 <p>Your page content...</p>
12 </div>
13 );
14 }
3 Customize the player with component props
The component props can be used to customize the player. For example, you can change
the size, text color, and background color. Need help?
page.tsx Ask anything
1 Powered by ElevenLabs Agents
import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';
https://elevenlabs.io/docs/product-guides/audio-tools/audio-native/react 3/4
25/11/2025, 16:50 Audio Native with React | ElevenLabs Documentation
2 Scribe v2 Realtime is now available. Learn more about the model here.
3 export default function Page() {
4 return (
5 <div>
6 <h1>Your Page Title</h1>
7
8 <ElevenLabsAudioNative
9 publicUserId="<your-public-user-id>"
10 size="small"
11 textColorRgba="rgba(255, 255, 255, 1.0)"
12 backgroundColorRgba="rgba(0, 0, 0, 1.0)"
13 />
14
15 <p>Your page content...</p>
16 </div>
17 );
18 }
Was this page helpful? Yes No
Audio Native with Ghost
Previous Next
Integrate Audio Native into your Ghost blog.
Built with
Need help?
Ask anything
Powered by ElevenLabs Agents
https://elevenlabs.io/docs/product-guides/audio-tools/audio-native/react 4/4
