Next.js and frameworks guide

One web component, every framework

No SDK to install: a script loaded once, a tag in your pages. Shadow DOM, no style conflicts.

Create my free account Watch the demo

What you need≈ 5 min to set up

Next.js 13+ (App or Pages Router), React 19, Vue 3 or Svelte
One declared domain per environment (production, staging)
A Vokyt account, Free plan included

Step 1 of 4 · Copy the script

vokyt.cc/tableau-de-bord

Step by step

01
Set up Vokyt
Account, site, public key
Create your Vokyt account (free), then open Dashboard → Sites and integration → Add a site.
Declare every domain where the player will show: your production domain and preview domains (for example Vercel URLs). The player won't show on an undeclared domain: that is what stops anyone from using your voice notes elsewhere.
Copy the script line shown: it already contains your public key (pk_live_…). That key is safe to put in your pages.
html
```
<script src="https://vokyt.cc/player.js" data-key="pk_live_…" defer></script>
```

Load the script once

next/script

In the root layout, add the script with next/script. data-* attributes are passed through as is.

tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        {children}
        <Script src="https://vokyt.cc/player.js" data-key="pk_live_…" strategy="afterInteractive" />
      </body>
    </html>
  );
}

Declare the tag for TypeScript

vokyt.d.ts

Once in the project, so TypeScript knows <vokyt-player>.

import "react";
declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "vokyt-player": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & { note: string };
    }
  }
}

04
Use the tag
<vokyt-player>
Place the tag under the paragraph, in a component or an MDX file.
Vue: declare vokyt-player as a custom element (compilerOptions.isCustomElement). Svelte accepts it as is.
tsx
```
<vokyt-player note="note_…"></vokyt-player>
```

Frequently asked questions

Why doesn't the player show?

9 times out of 10, the page's exact domain isn't declared in Sites and integration (with or without www, preview domain). Also check the script line is present once and the voice note is ready.

Does it work with server rendering?

Yes: the tag is rendered on the server, then the player activates in the browser. To also put the transcript in the HTML, call GET /v1/notes/{id}/embed with your secret key in a server component.

Will it slow my site down?

The player weighs under 15 KB, loads deferred and uses no cookies. Audio is only downloaded when the reader presses play.

Other platforms

Ready to let readers hear you?

Create your account, record a first voice note and follow the steps: it's free to start.

Create my free account All platforms