Skip to content
FRStart for freeStart free
← All platforms

HTML guide

Two lines of HTML, and the author speaks

No dependency, no framework: one script tag in the template, one <vokyt-player> tag in the article.

Create my free accountWatch the demo

What you need≈ 3 min to set up

  • Ability to edit the shared template (header.php, base.html…)
  • An editor that keeps HTML as is
  • 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, with and without www, and your staging domain if you have one. 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 template

    <head>

    Paste the script line in the <head> of the template shared by all pages. The defer attribute loads it without blocking rendering.

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

  3. 03

    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>

  4. 04

    Place the tag in the article

    <vokyt-player>

    Paste the tag under the relevant paragraph. If your editor strips unknown HTML, add vokyt-player and its note attribute to its allowlist.

    The player renders the transcript; to also have it in the HTML (search engines), call GET /v1/notes/{id}/embed server-side, as the WordPress plugin does.

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

  5. 05

    Deploy

    The player appears

    Deploy and open the page: the player shows, picks up your font and link colour, and follows dark mode.

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.

Can I change the colours?

The player inherits the font and link colour. To force a colour, set the --vokyt-accent CSS variable on the tag or a parent.

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