Tutoriels
Vokyt sur tous les sites
Le lecteur Vokyt tient en deux lignes de HTML. S'il est possible d'ajouter du code à votre site, vous pouvez y mettre vos vocaux. Choisissez votre plateforme : chaque tutoriel a sa démonstration animée et son pas-à-pas.
Choisissez votre plateforme
- ExtensionWordPressL'extension officielle : enregistrement depuis l'éditeur, bloc dédié et dictée.5 min →
- GhostCode injection, puis une carte HTML dans l'article.5 min →
- WebflowCustom code du site, puis un HTML Embed dans le Rich Text.6 min →
- Shopifytheme.liquid, puis la vue HTML de l'article de blog.7 min →
- SquarespaceInjection de code, puis un bloc Code dans le billet.5 min →
- Sans codeWixUn bouton vers le lien d'écoute, sans code.3 min →
- HTML et CMS maisonLe script dans le gabarit, la balise dans l'article.3 min →
- Hugo, Jekyll, Astro, EleventyLe script dans le gabarit de base, la balise dans le Markdown.4 min →
- Next.js, React, Vue, SvelteUn composant web standard : aucun paquet à installer.5 min →
- DéveloppeursDictée dans TipTapLa dictée Vokyt dans votre éditeur, en une extension.10 min →
Le principe, en 2 lignes
Une ligne de script, une seule fois pour tout le site, idéalement dans l'en-tête. Elle charge le lecteur (moins de 15 Ko) et porte la clé publique de votre site.
<script src="https://vokyt.cc/player.js" data-key="pk_live_…" defer></script>Puis, dans chaque article, la balise du vocal, à l'endroit où il doit apparaître :
<vokyt-player note="note_…"></vokyt-player>- 1Tableau de bord → Sites et intégration : ajoutez votre site et tous ses domaines (avec et sans www, et le domaine de prévisualisation de la plateforme si vous l'utilisez). Le lecteur refuse de s'afficher sur un domaine non déclaré.
- 2Copiez la clé publique pk_live_… dans la ligne de script.
- 3Tableau de bord → Vocaux → un vocal → encadré « Intégration » : copiez sa balise <vokyt-player>.
La clé publique (pk_live_…) peut apparaître dans vos pages. La clé secrète (sk_live_…) ne doit jamais s'y trouver : elle ne sert qu'aux extensions côté serveur.
Medium, Substack, LinkedInLien d'écoute
Ces plateformes n'acceptent pas de code personnalisé. Utilisez le lien d'écoute du vocal : collé seul sur une ligne, il affiche un aperçu avec image ; ou publiez l'audiogramme vidéo (offres Créateur et Pro) sur LinkedIn, Instagram et X.
Le vocal ne s'affiche pas ?
- Le domaine exact de la page (avec ou sans www) est-il déclaré dans Sites et intégration ?
- La ligne de script est-elle présente une seule fois, avec la bonne clé pk_live_… ?
- Le vocal est-il prêt (transcription terminée) dans le tableau de bord ?
- L'éditeur a-t-il gardé la balise ? Affichez le code source de la page publiée et cherchez vokyt-player.
Toujours bloqué ? Écrivez à bonjour@vokyt.cc avec l'adresse de la page.