Aller au contenu
ENCommencer gratuitementCommencer
← Toutes les plateformes

Tutoriel Webflow

Votre voix dans votre blog Webflow

Le script dans le Custom code du site, un HTML Embed dans l'article CMS : le lecteur prend la police et la couleur de vos liens.

Créer mon compte gratuitVoir la démonstration

Ce qu'il vous faut≈ 6 min d'installation

  • Une offre Site payante (le code personnalisé l'exige)
  • Accès Designer ou Site settings
  • Un compte Vokyt, offre Gratuit comprise

Étape 1 sur 4 · Copier le script

vokyt.cc/tableau-de-bord

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, avec et sans www, et monblog.webflow.io si vous testez sur le domaine de prévisualisation. 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.

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

  2. 02

    Ajoutez le script au Custom code

    Site settings › Custom code

    Dans le tableau de bord Webflow : Site settings → Custom code → Head code.

    Collez la ligne de script et cliquez sur Save changes. Le code personnalisé n'est actif qu'après publication du site.

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

  3. 03

    Enregistrez un vocal

    30 s à 1 min 30

    Tableau de bord → Nouveau vocal : enregistrez depuis le navigateur ou envoyez un fichier. Vokyt harmonise le son et transcrit en quelques secondes.

    Relisez la transcription, puis copiez la balise du vocal dans l'encadré « Intégration ».

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

  4. 04

    Ajoutez un HTML Embed dans l'article

    Rich Text › + › HTML Embed

    Ouvrez l'article dans la collection CMS. Dans le champ Rich Text, placez le curseur sous le paragraphe, cliquez sur + puis HTML Embed.

    Collez la balise du vocal et enregistrez. L'aperçu de Webflow peut afficher un cadre vide : c'est normal, le lecteur se charge sur le site publié.

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

  5. 05

    Publiez le site

    Publish

    Cliquez sur Publish (domaine personnalisé et .webflow.io), puis ouvrez l'article publié : le lecteur apparaît avec la transcription.

Questions fréquentes

Le lecteur ne s'affiche pas, pourquoi ?

Dans 9 cas sur 10, le domaine exact de la page n'est pas déclaré dans Sites et intégration (avec ou sans www, domaine de prévisualisation). Vérifiez aussi que la ligne de script est présente une seule fois et que le vocal est prêt.

Je ne vois pas Custom code

Le code personnalisé n'est disponible qu'avec une offre Site payante. Sur un site gratuit, le lecteur ne peut pas être chargé ; le lien d'écoute du vocal reste utilisable comme lien classique.

Est-ce que ça ralentit mon site ?

Le lecteur pèse moins de 15 Ko, se charge en différé (defer) et n'utilise aucun cookie. L'audio n'est téléchargé que lorsque le lecteur appuie sur lecture.

Autres plateformes

Prêt à faire entendre votre voix ?

Créez votre compte, enregistrez un premier vocal et suivez les étapes : c'est gratuit pour commencer.

Créer mon compte gratuitToutes les plateformes