Skip to content
FRStart for freeStart free
← All platforms

Webflow guide

Your voice in your Webflow blog

The script in site Custom code, an HTML Embed in the CMS post: the player picks up your font and link colour.

Create my free accountWatch the demo

What you need≈ 6 min to set up

  • A paid Site plan (custom code requires it)
  • Designer or Site settings access
  • 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 yoursite.webflow.io if you test on the staging domain. 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 Custom code

    Site settings › Custom code

    In the Webflow dashboard: Site settings → Custom code → Head code.

    Paste the script line and click Save changes. Custom code only goes live once the site is published.

    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

    Add an HTML Embed in the post

    Rich Text › + › HTML Embed

    Open the post in the CMS collection. In the Rich Text field, put the cursor under the paragraph, click + then HTML Embed.

    Paste the note's tag and save. Webflow's preview may show an empty box: that's normal, the player loads on the published site.

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

  5. 05

    Publish the site

    Publish

    Click Publish (custom domain and .webflow.io), then open the published post: the player appears with the transcript.

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.

I can't see Custom code

Custom code is only available on a paid Site plan. On a free site the player can't load; the note's listening link still works as a regular link.

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