React / Next.js

React (Vite or Create React App)

Add the script to your index.html file. This loads the widget on every page of your app.

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>

    <script
      src="https://app.audyr.com/widget/widget.min.js"
      data-token="YOUR_TOKEN">
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>

    <script
      src="https://app.audyr.com/widget/widget.min.js"
      data-token="YOUR_TOKEN">
    </script>
  </body>
</html>

Next.js — App Router

Use the next/script component in your root layout. The afterInteractive strategy loads the widget once the page is interactive, so it won’t block rendering.

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.audyr.com/widget/widget.min.js"
          data-token="YOUR_TOKEN"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Next.js — Pages Router

Add the widget to _app.tsx using next/script. It will render on every page.

pages/_app.tsx

import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://app.audyr.com/widget/widget.min.js"
        data-token="YOUR_TOKEN"
        strategy="afterInteractive"
      />
    </>
  )
}

Always use next/script rather than a plain <script> tag in Next.js. It handles loading strategy and deduplication automatically.

HTML Vue / Nuxt

Getting started

Installation

React / Next.js

React (Vite or Create React App)

Next.js — App Router

Next.js — Pages Router

​React (Vite or Create React App)

​Next.js — App Router

​Next.js — Pages Router

React (Vite or Create React App)

Next.js — App Router

Next.js — Pages Router