Für React, Next.js und Vue
Ein Aufnahme-Widget
als Komponente.
In einer App, die ihre Seiten selbst zusammenbaut, wird ein nacktes Script-Tag im JSX nie ausgeführt. Deshalb gibt es für Speeeak eine fertige React-Komponente – vier Props, fertig. Für Vue, Svelte und alle anderen reicht ein iframe oder die Script-Zeile im Grundgerüst.
Echte Beispielseite mit echtem Widget – probier es aus. Was du hier einsprichst, landet nur bei uns und wird nicht veröffentlicht. In voller Größe öffnen
Warum eine Komponente statt eines Script-Tags
Ein <script> im JSX wird vom Browser nicht ausgeführt. Die Komponente SpeeeakWidget setzt stattdessen einen iframe mit Mikrofon-Freigabe und passt seine Höhe automatisch an den Inhalt an.
schluessel, breite, farbe, datenschutz. Alles andere – Felder, Einwilligungstext, Danke-Text – stellst du im Speeeak-Konto ein und änderst es ohne neues Deployment.
Die Aufnahme geht direkt vom Browser des Besuchers zu Speeeak. Deine App braucht keinen Upload-Endpunkt, keine Audio-Verarbeitung, keinen Speicher. Die Nachricht liegt in deinem Speeeak-Eingang.
So baust du es ein
- Widget anlegen und Schlüssel kopieren. Im Speeeak-Konto unter „Widgets“ ein Widget anlegen und den Widget-Schlüssel kopieren. Er beginnt mit
wund ist 16 Zeichen lang. - Komponente einbinden. Datei
SpeeeakWidget.jsxaus der Doku (docs.speeeak.de/react) ins Projekt legen und verwenden:<SpeeeakWidget schluessel="DEIN-SCHLÜSSEL" farbe="#6751df" />. Für die schwebenden Darstellungen (Pille, Lasche, runder Knopf) legst du stattdessen die Script-Zeile aus Speeeak ins HTML-Grundgerüst – inpublic/index.html, bei Next.js in_documentoderlayout. Vue, Svelte und Co.: ein<iframe src="https://speeeak.de/w/DEIN-SCHLÜSSEL" allow="microphone">tut dasselbe wie die Komponente. - Domain freigeben. In Speeeak unter „Erlaubte Websites“ die Domain deiner App eintragen – auch die Staging- oder Vorschau-Domain, wenn du dort testen willst. Ohne Eintrag nimmt das Widget keine Nachrichten an.
Tipp: Lokal auf
http://localhostfunktioniert die Mikrofon-Freigabe im Browser. Auf jedem anderen Host braucht die Seitehttps://, sonst fragt der Browser erst gar nicht nach dem Mikrofon.
Diese Vorlage übernehmen
Texte, Felder, Farbe und Darstellung sind vorbereitet – du passt Name und Farbe an, kopierst eine Zeile Code in deine Website, fertig.
Vorlage ins Konto übernehmen Einbau Schritt für Schritt
Kostenloses Konto: 1 Widget mit Speeeak-Link. Pro: 5 Widgets, Speeeak-Link abschaltbar.
Was du damit machst
- Feedback in der App: Ein Mikrofon auf der Einstellungs- oder Hilfeseite – „Was fehlt dir?“ bringt mehr als ein Sterne-Dialog.
- Support ohne Ticketformular: Nutzer beschreiben ihr Problem in 30 Sekunden Sprache, du hörst, was wirklich los ist, und antwortest per Stimme über den Hörlink.
- Onboarding-Stimmen: Nach den ersten Tagen kurz einsprechen lassen, wie der Einstieg war – mit Einwilligung zur Veröffentlichung als Kundenstimme.
- Schnittstelle: Mit Business (49 € im Monat) holst du Nachrichten per API ab oder lässt dir per Webhook Bescheid geben – dann landet die Stimme auch in deinem eigenen System.
Häufige Fragen
Muss ich etwas aus npm installieren?
Nein. Die Komponente ist eine einzelne JSX-Datei ohne Abhängigkeiten. Kopieren, importieren, fertig. TypeScript-Projekte benennen sie in .tsx um und ergänzen die Prop-Typen.
Funktioniert das mit Server-Side-Rendering?
Ja. Die Komponente rendert einen iframe, der braucht kein Fenster-Objekt beim ersten Durchlauf. Die Höhenanpassung läuft erst im Browser.
Kann ich das Aussehen anpassen?
Farbe und Breite über Props, Darstellung und Texte im Speeeak-Konto. Innerhalb des iframes greift dein CSS nicht – das ist Absicht, damit das Widget überall gleich bedienbar bleibt.
Was kostet das?
Kostenlos: ein Widget für eine Website mit Speeeak-Link, 30 Nachrichten im Monat. Pro (19 € im Monat): fünf Widgets, Text-Umwandlung, Speeeak-Link abschaltbar. Business (49 € im Monat) bringt API und Webhooks dazu.
React, Next.js, Vue und Svelte sind Marken ihrer jeweiligen Inhaber. Speeeak steht in keiner Verbindung zu diesen Anbietern.