Videobubble für HTML: Installation auf jeder Website

Wie installierst du CompleteGreet in HTML?

Füge eine Videobubble in eine einfache HTML-Seite ein. Das dauert etwa fünf Minuten und erfordert keine Build-Tools oder Paketmanager. Die Methode funktioniert für statische Seiten, Single-Page-Apps und jedes direkt ausgelieferte HTML.

Hier ist der genaue Ablauf:

1. Konto und Dashboard erstellen: Melde dich bei CompleteGreet an und öffne das Haupt-Dashboard. Klicke oben rechts auf Neues Widget. Der Builder öffnet eine leere Vorlage mit einer Schaltfläche für die Videoaufnahme.
2. Videobegrüßung aufnehmen oder hochladen: Klicke auf die Aufnahmeschaltfläche, nimm direkt im Browser auf oder lade eine MP4-Datei hoch. Die Vorschau zeigt die Bubble auf Desktop und Mobilgerät. Für schnelle Ladezeiten sollte das Video kürzer als 30 Sekunden sein.
3. Darstellung konfigurieren: Lege in der Seitenleiste Position und Markenfarbe fest und lade ein Profilbild hoch. Der Avatar erscheint in der Bubble, bevor das Video startet.
4. Call-to-Action festlegen: Öffne den Tab Interaktionen, ergänze Buttontext und Ziel-URL und aktiviere bei Bedarf ein Formular zur Erfassung von E-Mail-Adressen, bevor das Video abgespielt wird.
5. Installationscode kopieren: Klicke oben auf Speichern und Code abrufen. Ein Dialog zeigt ein einzelnes Script-Tag. Kopiere es und füge es direkt vor dem schließenden Tag in deine HTML-Datei ein. Das Skript lädt asynchron und blockiert den Seitenaufbau nicht.

Das ist der gesamte Ablauf. Nach dem nächsten Laden erscheint das Widget ohne weitere Konfiguration.

Bei statischen Generatoren wie Jekyll, Hugo oder Eleventy gehört dasselbe Skript in die Basisschablone. In React- oder Vue-Single-Page-Apps funktioniert es nach dem Mounting ebenfalls. Eine npm-Installation ist nicht erforderlich.

Das data-widget-id-Attribut des Script-Tags verbindet die Installation mit dem jeweiligen Widget. Wenn du unterschiedliche Videos für mehrere Seiten erstellst, erhält jedes Widget eine eigene ID. Im Dashboard kannst du Widgets duplizieren.

Teste die Installation in einem privaten Browserfenster. Die Bubble sollte kurz nach dem Laden erscheinen. Falls nicht, prüfe die Browserkonsole auf Skriptfehler und kontrolliere, ob das Widget im Dashboard auf Aktiv gesetzt ist.

Was kannst du in HTML anpassen?

Bei einer HTML-Seite funktioniert vieles wie bei verwalteten Plattformen. Du kontrollierst aber die Zielseiten über deine eigene Seitenstruktur oder JavaScript-Logik statt über einen zentralen Dashboard-Schalter.

Zielseiten in HTML werden über URLs oder Pfade gesteuert.

Du kannst das Widget mit einem einfachen Datenattribut nur auf bestimmten Pfaden anzeigen. So erhalten Preis- und Blogseiten unterschiedliche Begrüßungen. In einer Single-Page-App musst du es bei Routenwechseln gegebenenfalls über die JavaScript-API auslösen. Das erfordert etwas mehr Arbeit als eine Shopify-App.

Formulare und Call-to-Action

Die Call-to-Action-Buttons im Widget sind vollständig editierbar. Verlinke sie mit Calendly, einem Stripe-Checkout oder einer einfachen mailto-Adresse. Viele Teams verwenden einen Button für die Terminbuchung und einen zweiten für ein Demo-Video.

Bei den Formularfeldern liegt ein großer Teil der Anpassung.

Du entscheidest, ob Name, E-Mail, Telefon oder eigene Fragen zu Budget und Zeitplan erscheinen. Das Formular kann vor dem Video zur Freigabe des Inhalts oder danach zur Erfassung interessierter Leads angezeigt werden. HTML-Seiten können die Daten auch direkt an deinen eigenen Endpunkt senden, damit sie sofort im internen CRM ankommen.

Marke und Position

Farbe, Größe und Position der Bubble lassen sich im Dashboard anpassen. Zusätzlich kannst du in HTML per CSS eine Markenfarbe verwenden, die nicht in den Voreinstellungen enthalten ist. Standardmäßig steht die Bubble unten rechts mit 24 Pixel Abstand. Auf stark besuchten Produktseiten kann links besser funktionieren, wenn dort weniger Konkurrenz durch Chat-Widgets besteht. Viele Videobubble-Tools legen dich in kostenlosen Tarifen auf ihre Markenoptik fest. Bei CompleteGreet lässt sich das Branding gemäß den aktuellen Planbedingungen anpassen.

Ein Detail, das bei HTML-Installationen oft übersehen wird, ist der z-Index.

Wenn Navigationsleiste oder Modal einen höheren z-Index besitzen, kann die Videobubble darunter verschwinden. Ergänze dann in deiner Haupt-CSS-Datei eine Regel mit z-index: 9999 für den Widget-Container. Da das Skript asynchron lädt, gehört die Regel in das Stylesheet und nicht inline in den Einbettungscode.

<script src="https://app.completegreet.com/widget.js" data-id="YOUR_ID" async></script>

<body> <!-- Dein Seiteninhalt --> <script src="https://app.completegreet.com/widget.js" data-id="YOUR_ID" async></script> </body>

See the static HTML data above for the full breakdown.

Was solltest du vor dem Livegang prüfen?

Öffne deine veröffentlichte Seite in Chrome, Safari und Firefox und beobachte, wie das Videobubble-Widget erscheint. Es sollte unten in der Ecke stehen, ohne Navigation oder Footer-Buttons zu verdecken.

Mobilgeräte sind besonders wichtig.

Mehr als die Hälfte deiner Besucher kann das Widget auf einem Telefon sehen. Öffne die Seite in iOS Safari und Android Chrome. Die Bubble sollte sich anpassen, ohne den Vollbildmodus zu erzwingen, und der Schließen-Button muss mit dem Daumen erreichbar sein. Bei einer Überdeckung von Menü oder Checkout änderst du den Positionsabstand im Dashboard.

Prüfe, ob die Seitenregeln funktionieren. Besuche Seiten, auf denen das Widget nicht erscheinen soll, und kontrolliere, dass es verborgen bleibt. Es darf nur auf den URLs laden, die in deiner Zielkonfiguration angegeben sind.

Führe nach der Installation einen Test mit Google PageSpeed Insights durch. Videodateien erhöhen das Seitengewicht. Sinkt der LCP-Wert, prüfe asynchrones Laden und eine angemessene Dateigröße.

Teste Formularübermittlungen vollständig. Fülle das Kontaktformular im Widget aus, sende es ab und bestätige, dass der Lead in deinem Postfach oder CRM ankommt. Defekte Formulare zerstören Vertrauen schneller als gar kein Formular.

<script src="https://cdn.completegreet.com/widget.js" data-site-id="YOUR_ID" async></script>

Häufige Fragen

Wie füge ich CompleteGreet zu einer HTML-Seite hinzu, ohne Code-Dateien zu bearbeiten?

Ganz ohne Codebearbeitung lässt sich CompleteGreet in HTML nicht installieren. Das Skript muss in den HTML-Code eingefügt werden. Viele Website-Builder bieten dafür ein HTML- oder Custom-Code-Feld. Kopiere den Einbettungscode, öffne den HTML-Editor und füge ihn vor dem schließenden Tag ein. Die Bubble erscheint innerhalb weniger Minuten.

Wo genau sollte ich das CompleteGreet-Skript in meiner HTML-Datei einfügen?

Füge das CompleteGreet-Skript direkt vor dem schließenden Tag auf jeder Seite ein, auf der die Bubble erscheinen soll. So lädt der übrige Inhalt zuerst. Das Skript ist leicht und asynchron. Wenn das Widget nur auf bestimmten Seiten erscheinen soll, fügst du es nur dort ein oder nutzt Zielregeln im Dashboard.

Warum erscheint meine Videobubble nicht im HTML-Vorschaumodus?

In Vorschauen können Browser-Sicherheitsregeln oder iframe-Sandboxing externe Skripte blockieren. Prüfe die Live-Seite in einem normalen Tab. Manche HTML-Editoren entfernen JavaScript aus Sicherheitsgründen. Veröffentliche die Seite und kontrolliere außerdem, dass das Skript nicht in einem Kommentar oder in blockierenden Tags steht.

Kann ich CompleteGreet nur auf bestimmten HTML-Seiten wie meiner Preisseite anzeigen?

Ja. Füge das Skript nur in den gewünschten HTML-Dateien ein. Alternativ kannst du es zentral laden und im Dashboard URL-Regeln verwenden, um die Anzeige nach Pfad ein- oder auszuschalten. Das funktioniert auch bei statischen HTML-Seiten.

Verlangsamt CompleteGreet eine HTML-Seite?

Das Skript lädt asynchron nach dem Seiteninhalt. Die Videodatei wird erst bei einer Interaktion geladen. Die tatsächliche Wirkung hängt von Seite, Theme und weiteren Ressourcen ab. Miss die veröffentlichte Seite mit PageSpeed Insights und lade das Skript bei Bedarf am Ende des Body-Bereichs.

Wie teste ich die Videobubble auf Mobilgeräten?

Öffne die veröffentlichte HTML-Seite auf einem echten Telefon oder nutze den Gerätemodus der Entwicklertools. Prüfe Position, Wiedergabe, Formular und Schließen-Button. Das Widget darf wichtige Elemente wie Checkout-Buttons oder Navigation nicht verdecken.

Was kostet CompleteGreet pro Monat?

Die aktuelle Preisstruktur hängt von Plan, Besuchergrenze und Funktionen ab. Prüfe die Preisseite direkt vor der Anmeldung. Die Abrechnung basiert gemäß den aktuellen Bedingungen auf eindeutigen Besuchern, nicht auf einzelnen Wiedergaben oder Videominuten.