Widget
Ein Widget ist ein eingebettetes Mini-Modul auf einer Website, das eine eigenständige Funktion bereitstellt – zum Beispiel ein Live-Chat-Button, ein Newsletter-Anmeldeformular oder ein Bewertungs-Banner. Es lädt mit einem einzigen Code-Snippet und arbeitet unabhängig vom übrigen Seiten-Code.
Was ist ein Widget?
Ein Widget ist ein in sich abgeschlossener Funktions-Baustein, den Sie über ein kleines Code-Snippet (meist 1–3 Zeilen JavaScript) in Ihre Website einfügen. Das Widget kümmert sich selbst um Darstellung, Logik und Datenübertragung – Sie müssen keine eigenen Komponenten bauen.
Der Begriff stammt ursprünglich aus der Software-Entwicklung (kleine UI-Bausteine) und wird heute vor allem im Web-Kontext für externe, einbettbare Funktionen verwendet: Live-Chat, Cookie-Banner, Newsletter-Forms, Recensions-Carousels, Buchungs-Kalender.
Typische Widget-Arten bei SendSeven
| Widget | Funktion | Einsatzort |
|---|---|---|
| Live-Chat-Widget | Chat-Button unten rechts, eingehende Nachrichten landen in der Unified Inbox | Service, Sales-Hilfe |
| Newsletter-Widget | Anmeldeformular für WhatsApp/E-Mail-Listen mit Double-Opt-in | Marketing-Pages, Blog |
| Click-to-Chat-Widget | Direkter Sprung in WhatsApp/Telegram/Messenger | Produktseiten, Kontaktseiten |
Mobile-spezifisches Verhalten
Auf mobilen Geräten arbeitet ein gut gebautes Widget anders als auf Desktop. Das SendSeven Live-Chat-Widget hat zwei Toggle-Optionen für Mobile:
- Fullscreen on Mobile (Standard: an) – Beim Tippen auf die Bubble öffnet sich der Chat als Vollbild-Panel, nicht als kleines Overlay. Verwendet
100dvh, damit die iOS-Tastatur das Eingabefeld nicht abschneidet. - Pop-out to New Tab (Standard: aus) – Fügt ein Icon hinzu, mit dem Besucher den Chat in einem eigenen Tab öffnen können. Beide Tabs synchronisieren sich, der Besucher kann auf der Hauptsite weiter browsen, ohne die Konversation zu verlieren.
Wie ein Widget technisch funktioniert
- Snippet einbetten: Eine Zeile JavaScript im Footer Ihrer Website. Lädt asynchron, blockiert nicht das Rendering.
- Konfiguration laden: Das Widget zieht beim ersten Aufruf seine Einstellungen aus Ihrem SendSeven-Konto (Farben, Position, Übersetzungen).
- UI rendern: Innerhalb eines isolierten Containers (häufig Shadow DOM), damit keine CSS-Konflikte mit Ihrer Seite entstehen.
- Interaktion abwickeln: Klick auf den Button → Chat öffnet sich → Nachrichten werden über die REST API ausgetauscht.
- Persistenz: Eine Cookie/LocalStorage-Session sorgt dafür, dass der Besucher beim Wiederkommen seine Konversation findet.
Was ein Widget vom iFrame unterscheidet
Ein iFrame ist eine eingebettete Webseite – komplette Sandbox, schwer responsive zu integrieren. Ein Widget ist nativer Teil Ihrer Seite, fühlt sich nahtloser an, lässt sich besser stilistisch einpassen und arbeitet performanter.
Datenschutz und Widgets
- Consent: Das Widget darf erst laden, wenn der Besucher dem Marketing-Consent zugestimmt hat – sonst ist es ein Datenschutzverstoß.
- Cookie-frei nutzbar: Reine Funktions-Widgets (Live-Chat) können ohne Tracking-Cookies arbeiten – nur Session-Storage für laufende Unterhaltungen.
- EU-Hosting: Achten Sie darauf, dass die Widget-CDN und das Backend in der EU liegen. SendSeven Widgets werden aus Frankfurt ausgeliefert.
Anpassung
SendSeven Widgets lassen sich im Widget-Editor anpassen: Farben (Onyx + Photon Lime out-of-the-box), Position, Begrüßungstext, Avatar, Öffnungszeiten, Sprache (alle 11 Locales). Das gerenderte Snippet zieht diese Konfiguration live aus dem Backend – Änderungen sind ohne neuen Deploy aktiv.