A microphone on your website
Step by step.

First: try it instead of reading

The example site “Korn & Krume” is a small bakery website with two live widgets – one inline, one floating. There you'll find the button “Show source” and the complete package to download (HTML, images, fonts – unzip, enter your key, double-click). The site is deliberately designed “properly”; the principle behind it is still just one line, and that's exactly what we build here from scratch.

What you need: a Speeeak account with widget access, a text editor (TextEdit, Notepad, VS Code – any will do) and a browser. No programming skills.

Step 1 · Get your widget key

1. In your account go to Widgets → “Create widget” (the first time, Speeeak asks for the data processing agreement – one click).
2. Give it a name (e.g. “Contact page”), write a heading and a hint text, choose fields (name, email), set a colour.
3. Under Allowed websites enter the address of your website, e.g. https://my-bakery.com. To practise on your own computer, also add http://localhost – or leave the field empty (then any website may show the widget).
4. Save. At the top you now see your key: 16 characters, starting with w. You'll need it in a moment.

The key is not a secret – it will be in the source code of your page later. It only tells Speeeak whose widget this is. The list of allowed websites protects it from being used by others.

Step 2 · An empty page

Create a new file index.html and paste this into it. This is the smallest valid website in the world:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My website</title>
</head>
<body>
  <h1>Hello!</h1>
  <p>A microphone will appear here in a moment.</p>
</body>
</html>

Save the file, open it in the browser (double-click). You see “Hello!”. That's all a website is.

Step 3 · The microphone – one line

Where the widget should appear (below the paragraph), insert this line. Replace YOUR-KEY with your key from step 1:

<script src="https://speeeak.de/js/widget.js" data-widget="YOUR-KEY" data-art="text" async></script>

Save, reload the page: the microphone is there. Say something – the message lands in your account under Inbox.

Nothing happens? Step 7 (troubleshooting).

Step 4 · Floating instead of inline

If the microphone should wait in the bottom corner of every page, use a floating display instead of text. The line then goes at the end, just before </body>:

<script src="https://speeeak.de/js/widget.js" data-widget="YOUR-KEY"
  data-art="popup" data-text="Leave a voice message" data-position="rechts" async></script>

Both displays may be on one page at the same time – the example site does exactly that.

Step 5 · Colour and privacy link

<script src="https://speeeak.de/js/widget.js" data-widget="YOUR-KEY"
  data-art="popup" data-text="Leave a voice message" data-position="rechts"
  data-farbe="#5b3a1e" data-textfarbe="#ffffff"
  data-datenschutz="https://my-bakery.com/privacy" async></script>

Step 6 · Go online

Upload the file to your web space (FTP, hosting file manager, Netlify drag & drop – whatever you have). Then, in your account, enter the real address under Allowed websites for the widget, if you haven't already. Done.

The microphone only works over https:// – browsers don't allow microphone access on unencrypted pages. Almost every hosting provider offers a free certificate today; localhost on your own computer is the exception and is allowed.

Step 7 · If it doesn't work

Variant A · WordPress

Easiest with the Speeeak plugin: install, enter your key, click a display – done, without a single line of code (guide with pictures). It works without the plugin too:

1. Inline on a page: insert a “Custom HTML” block, paste the line from step 3.
2. Floating on all pages: Appearance → Theme File Editor → footer.php, line from step 4 before </body> – or, more cleanly, via a plugin like “WPCode” (snippet “Footer”).
3. Page builders (Elementor, Divi, Bricks): drag the “HTML” widget/element to the desired spot, paste the line.

Variant B · React, Next.js, Vue

In apps that assemble their pages themselves, a <script> can't simply sit in the JSX – it would never run. That's why there is the ready-made component SpeeeakWidget.jsx:

import SpeeeakWidget from './SpeeeakWidget';

export default function Contact() {
  return (
    <section>
      <h2>Tell us what you'd like</h2>
      <SpeeeakWidget schluessel="YOUR-KEY" farbe="#5b3a1e" />
    </section>
  );
}

The component embeds the recorder inline as an iframe and adjusts the height automatically. Props: schluessel, breite, farbe, datenschutz. For the floating displays, put the script line from step 4 into the app's HTML skeleton (public/index.html or, in Next.js, _document/layout). For Vue or Svelte: the same – an iframe pointing to https://speeeak.de/w/YOUR-KEY with allow="microphone".

Variant C · Community platforms

Platforms you don't host yourself allow different amounts. Three cases:

Rule of thumb: Can I insert HTML somewhere? Then step 3. Can I put code in the head or footer? Then step 4. Can I only add links? Then landing page or short link.

Finally · Testimonials, listener mail, call-back requests

The widget is a microphone with a heading – what people say into it is up to your text. “Tell us what you liked” turns it into a testimonial tool, “Your question for the next episode” into a listener-mail box, “Describe your request, we'll call you back” into a contact form without typing. You set heading, hint, fields and thank-you text per widget in your account – so you can have several widgets for several purposes.

Open example site Download example (ZIP)