Skip to content
FRStart for freeStart free
← All platforms

Static site generators guide

Your voice in your Markdown

One line in the base layout, one tag in the article's Markdown file. The rest of your pipeline doesn't change.

Create my free accountWatch the demo

What you need≈ 4 min to set up

  • Hugo, Jekyll, Astro, Eleventy or similar
  • HTML allowed in Markdown (Hugo setting below)
  • A Vokyt account, Free plan included

Step 1 of 4 · Copy the script

vokyt.cc/tableau-de-bord

Step by step

  1. 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 domain and your preview domains (Netlify, Vercel, GitHub Pages…). 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>

  2. 02

    Add the script to the base layout

    baseof.html, default.html, Layout.astro…

    Hugo: layouts/_default/baseof.html. Jekyll: _layouts/default.html. Astro: src/layouts/Layout.astro. Eleventy: _includes/base.njk.

    Paste the script line inside <head>.

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

  3. 03

    Hugo: allow HTML in Markdown

    hugo.toml

    By default Hugo replaces HTML written in Markdown with a comment. Turn it on in the config. Jekyll, Eleventy and Astro accept it out of the box.

    toml
    [markup.goldmark.renderer]
  unsafe = true

  4. 04

    Record a voice note

    30 s to 1 min 30

    Dashboard → New voice note: record in the browser or upload a file. Vokyt levels the sound and transcribes it within seconds.

    Review the transcript, then copy the note's tag from the “Intégration” (Embed) box.

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

  5. 05

    Write the tag in Markdown

    On its own line

    Paste the tag on its own line, surrounded by blank lines, under the relevant paragraph. In an .mdx file it is written the same way.

    Build and deploy: the player appears on the page.

    markdown
    Il m'a fallu trois essais pour réussir.

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

La suite de l'article…

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.

The player is replaced by <!-- raw HTML omitted -->

Hugo is hiding the HTML: add the unsafe = true setting (step 3) and rebuild the site.

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 accountAll platforms