So fügst du eine Video Bubble zu Webflow hinzu

Kurz gesagt fügst du das Skript von CompleteGreet in die Einstellungen deines Webflow Projekts ein und veröffentlichst die Website. Prüfe anschließend die Bubble auf allen Seiten, auf denen sie erscheinen soll.

Eine einfache Einbindung kann schnell gehen. Plane trotzdem Zeit für das Video, das Design, die Einwilligung, die Anzeigeregeln und die Tests ein. In der Regel musst du nicht auf jeder einzelnen Seite Code ergänzen.

Für CompleteGreet gelten die Tarife und Grenzen, die aktuell auf der Preisseite und in deinem Konto angezeigt werden. Verlasse dich nicht auf ältere Preise, Rabatte oder Regeln für zusätzliche Nutzung. Vergleiche die erwartete Besucherzahl mit der Kapazität und den Funktionen, die derzeit tatsächlich enthalten sind. Das ist besonders wichtig, wenn dein Traffic im Jahresverlauf schwankt oder während einer Kampagne steigt.

Ob eigener Code auf einer veröffentlichten Domain genutzt werden kann, hängt vom aktuellen Webflow Tarif ab. Eine geeignete Testdomain kannst du verwenden, wenn dein Tarif und deine Konfiguration dies zulassen.

Farbe, Position und Aktionsschaltflächen lassen sich ohne eigenes CSS anpassen. Prüfe das Ergebnis dennoch im tatsächlichen Layout deiner Website.

CompleteGreet ist vor allem für persönliche Videobegrüßungen und einfache Aktionen gedacht, nicht für komplexe Umfragen. Auf einer Webflow Website kann die Lösung eine persönliche Ansprache ermöglichen, ohne die Nutzerführung unnötig zu überladen.

Wie installierst du CompleteGreet auf Webflow?

Das Einbinden einer Video Bubble auf einer Webflow Website erfordert ein Skript und einen Test der veröffentlichten Seite. Ob eigener Code auf einer aktiven Domain möglich ist, hängt vom aktuellen Webflow Tarif ab. Eine Testdomain kann verwendet werden, wenn deine Konfiguration dies unterstützt.

Gehe dabei so vor:

1. Melde dich bei CompleteGreet an und erstelle das Widget. Wähle dein Video, schreibe eine kurze Begrüßung und lege fest, wie sie zunächst angezeigt werden soll.

2. Speichere das Widget und öffne den Bereich mit dem Installationscode. Kopiere das vollständige Skript, das zur richtigen Bubble und Website gehört.

3. Öffne dein Webflow Projekt, gehe zu den Projekteinstellungen und suche den Bereich für eigenen Code. Füge das CompleteGreet Skript dort ein, wo es in der aktuellen Dokumentation empfohlen wird.

4. Speichere die Einstellungen und veröffentliche die Website. Eigener Code wird in der Vorschau des Designers möglicherweise nicht ausgeführt. Prüfe deshalb die veröffentlichte Adresse oder die Testdomain.

Das sorgt häufig für Verwirrung: Webflow führt eigenen Code auf veröffentlichten Seiten aus, aber nicht immer im Designer oder in einer schreibgeschützten Vorschau. Das offizielle Webflow Hilfezentrum erklärt dieses Verhalten. Wenn die Bubble während der Bearbeitung nicht erscheint, öffne die veröffentlichte Adresse und prüfe sie dort.

Lade die Seite nach der Veröffentlichung ohne den alten Zwischenspeicher neu, damit du die neuesten Dateien siehst.

Die Bubble sollte an der gewählten Position erscheinen, ohne wichtige Inhalte zu verdecken oder Ton ohne eine Aktion des Besuchers abzuspielen.

Was kannst du in Webflow anpassen?

Du kannst Zielgruppen, Seiten, Aktionen und das Erscheinungsbild der Bubble steuern. Welche Optionen verfügbar sind, hängt von der aktuellen Version und deinem Tarif ab.

Seiten und Zielgruppen

Mit Seitenregeln kannst du eine Begrüßung zum Beispiel auf der Preisseite anzeigen, ohne sie im gesamten Blog einzublenden. Beginne mit einigen wichtigen Seiten und teste sowohl eingeschlossene als auch ausgeschlossene Bereiche.

Wenn deine aktuelle Konfiguration dies unterstützt, können neue und wiederkehrende Besucher unterschiedliche Botschaften sehen.

Du kannst auch Zielgruppen anhand der Trafficquelle erwägen. Nutze diese Regeln nur, wenn Tracking, Einwilligung und Funktion in deinem Konto geprüft wurden.

Aktionsschaltflächen und Formulare

Eine Schaltfläche kann einen Kalender, einen Download oder eine andere Seite öffnen. Wähle einen klaren Text, der zur Seite passt, und miss die tatsächliche Aktion.

Teste jeweils eine Variante mit echtem Traffic. Den Webflow Code musst du nicht ändern, um den Text in CompleteGreet anzupassen.

Die in der Bubble verfügbaren Formulare können Kontaktdaten erfassen, ohne Besucher von der Seite wegzuleiten. Prüfe Felder, Pflichtangaben, Einwilligung und Speicherung in deiner aktuellen Konfiguration.

Prüfe in CompleteGreet, ob jede Testübermittlung am richtigen Ort erfasst wird.

Prüfe vor der Veröffentlichung auch Benachrichtigungen und unterstützte Integrationen. Sende ohne gesonderte Erlaubnis keine echte externe Anfrage.

Visuelles Erscheinungsbild und Position

Passe Logo, Farben, Vorschaubild und Position mit den aktuell verfügbaren Optionen an. Die Bubble muss genügend Abstand zu Menü, Einwilligungsbanner, Chat und wichtigen Schaltflächen halten.

Prüfe Ecken, Schatten und den ersten Begrüßungstext im visuellen Editor. Halte den Text auf kleinen Bildschirmen kurz, aber beurteile ihn immer im tatsächlichen Layout.

Vergiss die mobile Ansicht nicht. Nutze eine kompaktere Variante oder blende die Bubble auf kleinen Bildschirmen aus, wenn diese Funktion verfügbar und für deine Seite sinnvoll ist. Teste die tatsächlichen Bildschirmbreiten des Projekts.

Eine allgemein gestaltete Bubble kann wie ein fremdes Fenster wirken. Passende Farben, eine gute Position und eine klare Aktion machen sie zu einem natürlicheren Teil der Seite. Sieh dir auch unseren Vergleich von Video Widgets an, wenn du weitere Kriterien berücksichtigen möchtest.

Alle Schritte findest du in der statischen Übersicht oben.

Was solltest du vor der Veröffentlichung prüfen?

Gehe vor der Veröffentlichung die gesamte Konfiguration in mehreren Desktop Browsern durch. Öffne die veröffentlichte Seite in den Browsern, die deine Zielgruppe nutzt, und prüfe Position, Wiedergabe, Schließen, Untertitel sowie das Zusammenspiel mit anderen festen Elementen. Achte besonders darauf, dass die Video Bubble in der richtigen Ecke erscheint, auf Klicks reagiert und weder Navigation noch Einwilligungsbanner oder wichtige Schaltflächen verdeckt.

Tests auf Mobilgeräten sind genauso wichtig. Der Anteil mobiler Besucher unterscheidet sich von Website zu Website. Nutze deshalb deine eigenen Daten und teste die Bubble immer auf kleinen Bildschirmen.

Öffne die Website in Safari auf iOS und Chrome auf Android. Die Bubble sollte sich an den Bildschirm anpassen, das Video wie vorgesehen wiedergeben und eine leicht erreichbare Schaltfläche zum Schließen besitzen. Passe die Position an, wenn sie das Menü oder den Bezahlvorgang verdeckt.

Prüfe anschließend die Seitenregeln.

Stelle sicher, dass die Bubble nur dort geladen wird, wo sie hilfreich ist. Teste jede Adressregel, einschließlich Varianten mit und ohne abschließenden Schrägstrich. Schließe Seiten aus, auf denen die Bubble eine wichtige Aktion stören könnte.

Miss auch die technische Leistung. Videos und Skripte fügen der Seite zusätzliche Ressourcen hinzu. Orientiere dich an Googles Leitfaden zu Web Vitals und vergleiche die Website vor und nach der Installation. Wenn sich die Ergebnisse verschlechtern, prüfe das Laden des Skripts, das Videoformat, die Dateigröße und das Startverhalten.

Teste den vollständigen Formularablauf mit geeigneten Testdaten. Bestätige, dass die Daten wie vorgesehen gespeichert und weitergeleitet werden, bevor du die Konfiguration als fertig betrachtest.

Veröffentliche die Website erst, wenn Position, Regeln, Barrierefreiheit, technische Leistung und mögliche Formulare geprüft wurden.

Häufig gestellte Fragen

Wie viel kostet CompleteGreet und was ist im Tarif enthalten?

Preis, Besucherzahl, Websites, Bubbles und enthaltene Funktionen hängen vom aktuellen Tarif ab. Jährliche Abrechnung, Rabatte und Tarifgrenzen können sich ändern. Prüfe deshalb die Preisseite, die Bedingungen und dein Konto, bevor du Angebote vergleichst. Sieh auch nach, wie wiederkehrende Besucher, zusätzlicher Traffic und mögliche Tarifwechsel behandelt werden, damit dein Budget auf den aktuellen Regeln beruht.

Funktioniert CompleteGreet mit Shopify, WordPress und individuell entwickelten React Websites?

CompleteGreet kann auf unterstützten Plattformen wie Shopify, WordPress, Wix, Squarespace, Webflow und WooCommerce sowie auf individuell entwickelten Websites genutzt werden, die den erforderlichen Code zulassen. Die Installation kann über eine App, eine Integration oder ein Skript erfolgen. Prüfe auf jeder Plattform die aktuelle Dokumentation, die Einwilligungslösung, das Theme und das tatsächliche Ergebnis. Gehe nicht davon aus, dass überall dieselben Funktionen oder dieselbe Lademethode gelten.

Wie lange dauert die Einrichtung von CompleteGreet auf einer Website?

Der Zeitaufwand hängt vom Video, der Plattform, dem Design, der Einwilligung, den Anzeigeregeln und den Tests ab. Eine einfache Installation kann schnell gehen. Plane zusätzlich Zeit für Aufnahme, Untertitel, Vorschaubild, mobile Ansicht und die Prüfung von Formularen ein. Nutze die Installationsmethode aus der aktuellen Dokumentation der jeweiligen Plattform. Eine feste Dauer oder eine bestimmte technische Leistung kann vor dem Test auf der tatsächlichen Website nicht garantiert werden.

Welche Unternehmen sollten CompleteGreet anstelle eines Livechats wählen?

Die Lösung kann für Dienstleister, Berater, Coaches und Onlineshops geeignet sein, die vor der Kontaktaufnahme eine echte Person zeigen möchten. Eine kurze Videobegrüßung kann das Angebot erklären oder auf den nächsten Schritt hinweisen. Die Wirkung solltest du auf deiner Website messen. Wenn ein sofortiges Gespräch mit einem Mitarbeiter erforderlich ist, kann ein Livechat besser geeignet sein. Unternehmen mit komplexen Fragen oder betreutem Support sollten prüfen, ob sie beide Lösungen benötigen.

Wie zählt CompleteGreet einzelne Besucher für die Abrechnung?

Die Zählung richtet sich nach der Definition und den Regeln des aktuellen Tarifs. Prüfe, wie ein einzelner Besucher definiert wird, welcher Zeitraum gilt und wie wiederkehrende Besuche, verschiedene Geräte und mehrere Videoaufrufe behandelt werden. Sieh auch nach, was geschieht, wenn sich der Traffic der Grenze nähert oder sie überschreitet. Nutze keinen älteren Artikel als verbindliche Grundlage für die Abrechnung, da sich Tarife und Bedingungen ändern können.

Welche Einschränkungen sollte ich kennen, bevor ich CompleteGreet auswähle?

CompleteGreet ist für Videobegrüßungen, Vertrauensaufbau und einfache Aktionen gedacht. Es ist kein Werkzeug für komplexe Umfragen, lange bedingte Formulare oder einen direkten Chat in beide Richtungen. Wenn du viele Verzweigungen, eine umfangreiche Datenerfassung oder ein laufendes Gespräch mit einem Mitarbeiter benötigst, solltest du ein spezialisiertes Werkzeug wählen. Prüfe vor deiner Entscheidung außerdem die aktuellen Grenzen, Integrationen, Barrierefreiheit und Datenschutzanforderungen.