Un composant web, tous les frameworks

Pas à pas

1. 01

   Préparez Vokyt

   Compte, site, clé publique

   Créez votre compte Vokyt (gratuit), puis ouvrez Tableau de bord → Sites et intégration → Ajouter un site.

   Déclarez tous les domaines où le lecteur s'affichera : votre domaine de production et ceux de prévisualisation (par exemple les URL Vercel). Le lecteur refuse de s'afficher sur un domaine non déclaré : c'est ce qui empêche quelqu'un d'utiliser vos vocaux ailleurs.

   Copiez la ligne de script affichée : elle contient déjà votre clé publique (pk_live_…). Cette clé peut apparaître dans vos pages sans risque.

   htmlCopier

   <script src="https://vokyt.cc/player.js" data-key="pk_live_…" defer></script>

2. 02

   Chargez le script une fois

   next/script

   Dans le layout racine, ajoutez le script avec next/script. Les attributs data-* sont transmis tels quels.

   tsxCopier

   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>
     );
   }

3. 03

   Déclarez la balise pour TypeScript

   vokyt.d.ts

   Une seule fois dans le projet, pour que TypeScript connaisse <vokyt-player>.

   tsCopier

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

4. 04

   Utilisez la balise

   <vokyt-player>

   Placez la balise sous le paragraphe, dans un composant ou dans un fichier MDX.

   Vue : déclarez vokyt-player comme élément personnalisé (compilerOptions.isCustomElement). Svelte l'accepte tel quel.

   tsxCopier

   <vokyt-player note="note_…"></vokyt-player>