Für Webflow
Ein Mikrofon im Design,
per Embed-Element.
Dein Webflow-Design ist fertig – jetzt fehlt eine Stelle, an der Besucher nicht tippen, sondern reden. Das Speeeak-Widget kommt als eine Script-Zeile ins Code-Embed-Element oder in die Custom-Code-Einstellungen. Farbe passt du an, den Rest macht das Widget.
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 das Widget gut in Webflow passt
Das Code-Embed-Element ist für genau so etwas gedacht: fremdes HTML an einer Stelle im Layout. Das Widget läuft darin als eigener Rahmen und bringt sein Aussehen mit – dein Design bleibt unberührt.
Soll der schwebende Knopf auf jeder Seite sichtbar sein, gehört die Zeile in die Site-Einstellungen unter „Custom code“ in den Footer-Code. Eine Stelle, überall da.
Die Nachricht geht direkt in deinen Speeeak-Eingang. Du brauchst kein Formular-Backend, keinen Automatisierungsdienst und keine Mail-Weiterleitung – nur den Schlüssel.
So baust du es ein
- Widget anlegen und Schlüssel kopieren. Im Speeeak-Konto unter „Widgets“ ein Widget anlegen – Überschrift, Felder, Einwilligungstext, Farbe – und die fertige Script-Zeile mit deinem Schlüssel kopieren.
- Zeile in Webflow einfügen. An einer Stelle: Im Designer das „Add“-Panel öffnen, das Element Code Embed auf die Seite ziehen (in Rich-Text-Elementen über das „+“ und „Custom code“), die Zeile einfügen, speichern. Auf allen Seiten: Site settings → Reiter Custom code → Feld Footer code, Zeile mit
data-art="knopf"einfügen, „Save changes“. Für eine einzelne Seite gibt es dasselbe Feld in den Page settings („Before </body> tag“). - Domain freigeben und veröffentlichen. In Speeeak unter „Erlaubte Websites“ deine Domain eintragen – auch die
webflow.io-Staging-Adresse, wenn du dort testest. Dann die Site veröffentlichen: Custom Code wirkt erst nach dem Publish.
Tipp: Im Designer zeigt Webflow für Script-Tags nur einen Platzhalter. Das ist normal – das Widget erscheint in der Vorschau und auf der veröffentlichten Seite. Custom Code ist in Webflow Teil der bezahlten Site- und Workspace-Pläne (Stand Oktober 2026).
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
- Kontakt ohne Formularfelder: Auf der Kontaktseite „Sag uns kurz, worum es geht“ – Name und E-Mail sind freiwillig oder Pflicht, wie du willst.
- Kundenstimmen für die Agentur-Site: Nach dem Projekt eine Minute einsprechen lassen, mit Einwilligung zur Veröffentlichung.
- Rückrufwunsch: Schwebende Pille auf jeder Seite, Nachricht landet mit Betreff in deinem Eingang, du antwortest per Stimme.
- Datenschutz: Einwilligungstext und Datenschutz-Link deiner Seite im Widget, Löschlink für den Absender, Server in der EU, AV-Vertrag per Klick.
Häufige Fragen
Brauchen Besucher ein Konto oder eine App?
Nein. Das Widget läuft im Browser – Mikro erlauben, sprechen, abschicken. Auf dem Handy wie am Rechner.
Kann ich die Breite im Designer steuern?
Ja. Lege das Code-Embed-Element in einen Div mit Klasse und steuere Breite, Abstände und Breakpoints über diesen Div. Die Höhe passt das Widget selbst an.
Zählt das Widget als Formular in Webflow?
Nein. Es nutzt keine Webflow-Formulare und keine Formular-Kontingente. Die Nachrichten liegen in Speeeak, nicht in Webflow.
Was kostet das?
Das kostenlose Konto enthält ein Widget für eine Website mit Speeeak-Link und 30 Nachrichten im Monat. Pro (19 € im Monat) hat fünf Widgets, Text-Umwandlung und keinen Speeeak-Link. Alle Grenzen stehen auf der Preisseite.
Webflow ist eine Marke ihrer jeweiligen Inhaber. Speeeak steht in keiner Verbindung zu diesem Anbieter.