Mikrofon auf deiner Website
Schritt für Schritt.

Vorab: anfassen statt lesen

Die Beispielseite „Korn & Krume“ ist eine kleine Bäckerei-Website mit zwei laufenden Widgets – einmal im Text, einmal schwebend. Dort gibt es den Knopf „Quelltext anzeigen“ und das fertige Paket zum Herunterladen (HTML, Bilder, Schriften – entpacken, Schlüssel eintragen, Doppelklick). Die Seite ist bewusst „richtig“ gestaltet; das Prinzip dahinter ist trotzdem nur eine Zeile, und genau die bauen wir hier von Null auf.

Was du brauchst: ein Speeeak-Konto mit Widget-Recht, einen Texteditor (TextEdit, Editor, VS Code – egal) und einen Browser. Keine Programmierkenntnisse.

Schritt 1 · Den Widget-Schlüssel holen

1. Im Konto auf Widgets → „Widget anlegen“ (beim ersten Mal fragt Speeeak nach dem AV-Vertrag – ein Klick).
2. Name vergeben (z. B. „Kontaktseite“), Überschrift und Hinweistext schreiben, Felder (Name, E-Mail) wählen, Farbe setzen.
3. Unter Erlaubte Websites die Adresse deiner Website eintragen, z. B. https://meine-baeckerei.de. Zum Üben am eigenen Rechner zusätzlich http://localhost – oder das Feld leer lassen (dann darf jede Website das Widget zeigen).
4. Speichern. Oben steht jetzt dein Schlüssel: 16 Zeichen, beginnt mit w. Den brauchst du gleich.

Der Schlüssel ist kein Geheimnis – er steht später im Quelltext deiner Seite. Er sagt Speeeak nur, wessen Widget das ist. Schutz vor Fremdnutzung bietet die Liste der erlaubten Websites.

Schritt 2 · Eine leere Seite

Neue Datei index.html anlegen und das hier hineinkopieren. Das ist die kleinste gültige Website der Welt:

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meine Website</title>
</head>
<body>
  <h1>Hallo!</h1>
  <p>Hier kommt gleich ein Mikrofon hin.</p>
</body>
</html>

Datei speichern, im Browser öffnen (Doppelklick). Du siehst „Hallo!“. Mehr ist eine Website nicht.

Schritt 3 · Das Mikrofon – eine Zeile

Dort, wo das Widget erscheinen soll (unter dem Absatz), diese Zeile einfügen. DEIN-SCHLÜSSEL durch deinen Schlüssel aus Schritt 1 ersetzen:

<script src="https://speeeak.de/js/widget.js" data-widget="DEIN-SCHLÜSSEL" data-art="text" async></script>

Speichern, Seite neu laden: Das Mikrofon ist da. Sprich etwas ein – die Nachricht landet in deinem Konto unter Eingang.

Nichts passiert? Schritt 7 (Fehlersuche).

Schritt 4 · Schwebend statt im Text

Soll das Mikrofon auf jeder Seite unten in der Ecke warten, nimmst du statt text eine schwebende Darstellung. Die Zeile kommt dann ans Ende, kurz vor </body>:

<script src="https://speeeak.de/js/widget.js" data-widget="DEIN-SCHLÜSSEL"
  data-art="popup" data-text="Nachricht einsprechen" data-position="rechts" async></script>

Beide Darstellungen dürfen gleichzeitig auf einer Seite sein – die Beispielseite macht genau das.

Schritt 5 · Farbe und Datenschutz-Link

<script src="https://speeeak.de/js/widget.js" data-widget="DEIN-SCHLÜSSEL"
  data-art="popup" data-text="Nachricht einsprechen" data-position="rechts"
  data-farbe="#5b3a1e" data-textfarbe="#ffffff"
  data-datenschutz="https://meine-baeckerei.de/datenschutz" async></script>

Schritt 6 · Online stellen

Die Datei auf deinen Webspace laden (FTP, Hosting-Dateimanager, Netlify-Drag-&-Drop – was du hast). Dann im Konto beim Widget unter Erlaubte Websites die echte Adresse eintragen, falls noch nicht geschehen. Fertig.

Das Mikrofon funktioniert nur über https:// – Browser erlauben Mikrofonzugriff nicht auf unverschlüsselten Seiten. Fast jedes Hosting hat heute kostenlos ein Zertifikat; localhost am eigenen Rechner ist die Ausnahme und darf.

Schritt 7 · Wenn es nicht klappt

Variante A · WordPress

Am einfachsten mit dem Speeeak-Plugin: installieren, Schlüssel eintragen, Darstellung anklicken – fertig, ohne eine Zeile Code (Anleitung mit Bildern). Ohne Plugin geht es trotzdem:

1. Im Text einer Seite: Block „Benutzerdefiniertes HTML“ einfügen, Zeile aus Schritt 3 hineinkopieren.
2. Schwebend auf allen Seiten: Design → Theme-Datei-Editor → footer.php, Zeile aus Schritt 4 vor </body> – oder sauberer über ein Plugin wie „WPCode“ (Snippet „Footer“).
3. Seitenbaukasten (Elementor, Divi, Bricks): Widget/Element „HTML“ an die gewünschte Stelle ziehen, Zeile hinein.

Variante B · React, Next.js, Vue

In Apps, die ihre Seiten selbst zusammenbauen, darf ein <script> nicht einfach im JSX stehen – es würde nie ausgeführt. Darum gibt es die fertige Komponente SpeeeakWidget.jsx:

import SpeeeakWidget from './SpeeeakWidget';

export default function Kontakt() {
  return (
    <section>
      <h2>Sag uns, was du dir wünschst</h2>
      <SpeeeakWidget schluessel="DEIN-SCHLÜSSEL" farbe="#5b3a1e" />
    </section>
  );
}

Die Komponente bettet den Recorder als iframe im Text ein und passt die Höhe automatisch an. Props: schluessel, breite, farbe, datenschutz. Für die schwebenden Darstellungen legst du die Script-Zeile aus Schritt 4 ins HTML-Grundgerüst der App (public/index.html bzw. in Next.js _document/layout). Für Vue oder Svelte: dasselbe – ein iframe auf https://speeeak.de/w/DEIN-SCHLÜSSEL mit allow="microphone".

Variante C · Community-Plattformen

Plattformen, die du nicht selbst hostest, lassen unterschiedlich viel zu. Drei Fälle:

Faustregel: Darf ich irgendwo HTML einfügen? Dann Schritt 3. Darf ich Code in Head oder Footer legen? Dann Schritt 4. Darf ich nur Links setzen? Dann Landingpage oder Kurz-Link.

Zum Schluss · Testimonials, Hörerpost, Rückrufwunsch

Das Widget ist ein Mikrofon mit Überschrift – was die Leute hineinsprechen, bestimmst du mit dem Text. „Sprich uns dein Lob ein“ macht daraus ein Testimonial-Tool, „Deine Frage für die nächste Folge“ einen Hörerpost-Kasten, „Beschreib dein Anliegen, wir rufen zurück“ ein Kontaktformular ohne Tippen. Überschrift, Hinweis, Felder und Dankestext stellst du je Widget im Konto ein – du kannst also mehrere Widgets für mehrere Zwecke haben.

Beispielseite öffnen Beispiel herunterladen (ZIP)