Profil
Dashboard
Abmelden
Inhaltsverzeichnis
Wichtigste Punkte
- Sobald du den Embed-Code von CompleteGreet hast, dauert das Hinzufügen eines Videobubble-Widgets zu React oder Vue in vielen Fällen nur wenige Minuten. Plane trotzdem Zeit für Konfiguration und Tests ein.
- Du bestimmst genau, wann die Bubble erscheint und auf welchen Seiten sie sichtbar ist.
- Teste die Videobubble immer auf echten Geräten. Die Größenänderung im Browser erkennt nicht alle Probleme.
Wie installierst du CompleteGreet auf React oder Vue?
Gute Nachrichten: Das Hinzufügen einer Videobubble zu React oder Vue ist nach dem Abruf des Embed-Codes meist schnell erledigt. Bei beiden Frameworks funktioniert die Einbindung gleich, weil das Widget als eigenständiges Skript außerhalb deines Komponentenbaums geladen wird. Du brauchst kein npm-Paket und keinen Provider. Füge das Skript ein und teste es.
So gehst du Schritt für Schritt vor:
- Melde dich im CompleteGreet Dashboard an und klicke oben in der Navigation auf Installieren.
- Wähle deine Website-Plattform aus dem Dropdown-Menü. Für React oder Vue wählst du Benutzerdefiniertes HTML.
- Kopiere das Script-Tag aus dem Codefeld. Es sieht wie ein normales Script-Tag mit einer eindeutigen Website-ID aus.
- Öffne deine index.html-Datei, füge das Skript direkt vor dem schließenden body-Tag ein und speichere die Datei.
- Starte deinen Entwicklungsserver und rufe eine beliebige Seite auf. Die Bubble sollte in der unteren Ecke erscheinen.
Siehst du die Bubble nicht sofort? Lade die Seite einmal vollständig neu, das hilft häufig.
Was ist mit Next.js und Nuxt.js?
Bei Next.js oder Nuxt.js gibt es eine kleine Besonderheit. Durch serverseitiges Rendering darf das Widget erst im Browser und nicht während des Server-Renderings geladen werden.
Verwende bei Next.js die Next-Script-Komponente mit der Strategie lazyOnload. Importiere Script aus next/script, füge die Komponente in deine Layout-Datei ein und setze strategy auf lazyOnload. Dadurch wartet das Widget, bis die übrige Seite geladen ist, und du vermeidest Hydration-Konflikte, die die Bubble beeinträchtigen können.
Erstelle für Nuxt eine Plugin-Datei namens completegreet.client.js im plugins-Ordner. Die Endung .client.js sorgt dafür, dass der Code nur im Browser ausgeführt wird. Registriere das Plugin in deiner nuxt.config.ts mit mode auf client, damit Fehler wie window is not defined beim Server-Build vermieden werden.
Sobald das Widget geladen ist, behandeln beide Frameworks es gleich. Die Videobubble erscheint automatisch auf jeder Route, du musst das Skript nicht in einzelne Seiten einfügen.
Was kannst du auf React oder Vue anpassen?
Seiten- und Besucher-Targeting
CompleteGreet gibt dir Kontrolle darüber, wann und wo die Bubble erscheint. Du kannst URL-Muster festlegen, sodass sie nur auf bestimmten Routen wie /pricing oder /demo angezeigt wird. Für eine genauere Auswahl kannst du Gerätetyp, Verweildauer oder Scrolltiefe berücksichtigen.
Der zeitsparende Teil: Alle Targeting-Regeln liegen im Dashboard und nicht in deinem Code. Dein Marketingteam kann die Sichtbarkeit anpassen, ohne auf einen neuen Deploy zu warten. Das eingebettete Skript übernimmt die Regeln zur Laufzeit.
CTA-Aktionen und Klickverhalten
Der Button in deiner Videobubble ist flexibel. Du kannst ihn mit einer externen URL verknüpfen, ein Calendly-Modal öffnen, einen E-Mail-Entwurf starten oder ein eigenes JavaScript-Ereignis auslösen.
In React oder Vue kannst du zusätzlich Event-Listener einrichten, die direkt mit deinem App-Status sprechen. So können Daten zwischen Widget und Komponentenlogik fließen, ohne umständliche Workarounds. Dein Routing bleibt übersichtlich und die Interaktionslogik getrennt.
Formularfelder und Lead-Weiterleitung
Nach einem Klick auf die Bubble kannst du vor dem Start des Videos ein kurzes Formular anzeigen. Name und E-Mail sind Standardfelder. Du kannst aber eigene Felder wie Unternehmensgröße oder Anwendungsfall ergänzen, wenn sie für die Qualifizierung wichtig sind.
Einsendungen erscheinen im Dashboard und können Webhooks an dein Backend auslösen. Viele Teams leiten diese Leads in ihr CRM oder einen Slack-Kanal weiter. Prüfe dabei Felder, Einwilligung und die tatsächliche Integration.
Visuelles Branding und Positionierung
Farben, Eckenradius und das Avatarbild in der Bubble lassen sich anpassen. Du kannst die Bubble unten rechts oder unten links platzieren oder eigene Koordinaten verwenden, wenn die Standardposition mit einer festen Navigation kollidiert.
Unter den besten Videowidget Optionen für moderne Frameworks fällt CompleteGreet durch die automatische Übernahme von Schriften auf. Das Widget liest die CSS-Variablen deiner Website und passt die Typografie daran an, ohne dass du sie manuell konfigurieren musst.
–cg-primary: #3D5ACE;
–cg-accent: #E48333;
–cg-bg: #f7f7fb;
–cg-border: #e2e2ea;
–cg-text: #1a1a2e;
–cg-text-sec: #4a4a68;
–cg-text-muted: #7a7a96;
–cg-white: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
background: var(–cg-bg);
border: 1px solid var(–cg-border);
border-radius: 12px;
max-width: 600px;
margin: 0 auto;
overflow: hidden;
}
#cg-ig-PL8 .cg-accent-bar {
height: 4px;
background: var(–cg-primary);
}
#cg-ig-PL8 .cg-header {
padding: 24px 24px 16px;
text-align: center;
}
#cg-ig-PL8 .cg-header h3 {
margin: 0 0 8px;
font-size: 20px;
font-weight: 700;
color: var(–cg-text);
line-height: 1.3;
}
#cg-ig-PL8 .cg-header p {
margin: 0;
font-size: 14px;
color: var(–cg-text-sec);
line-height: 1.5;
}
#cg-ig-PL8 .cg-progress {
display: flex;
justify-content: space-between;
padding: 0 32px 24px;
position: relative;
}
#cg-ig-PL8 .cg-progress::before {
content: ”;
position: absolute;
top: 12px;
left: 48px;
right: 48px;
height: 2px;
background: var(–cg-border);
z-index: 0;
}
#cg-ig-PL8 .cg-progress-step {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(–cg-white);
border: 2px solid var(–cg-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(–cg-text-muted);
position: relative;
z-index: 1;
}
#cg-ig-PL8 .cg-progress-step.active {
border-color: var(–cg-primary);
background: var(–cg-primary);
color: var(–cg-white);
}
#cg-ig-PL8 .cg-progress-step.complete {
border-color: var(–cg-primary);
background: var(–cg-white);
color: var(–cg-primary);
}
#cg-ig-PL8 .cg-steps {
padding: 0 24px 24px;
}
#cg-ig-PL8 .cg-step {
display: flex;
gap: 16px;
margin-bottom: 20px;
position: relative;
}
#cg-ig-PL8 .cg-step:last-child {
margin-bottom: 0;
}
#cg-ig-PL8 .cg-step-badge {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(–cg-primary);
color: var(–cg-white);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
#cg-ig-PL8 .cg-step-content {
flex: 1;
background: var(–cg-white);
border: 1px solid var(–cg-border);
border-radius: 8px;
padding: 16px;
}
#cg-ig-PL8 .cg-step-title {
font-size: 15px;
font-weight: 600;
color: var(–cg-text);
margin: 0 0 6px;
}
#cg-ig-PL8 .cg-step-desc {
font-size: 13px;
color: var(–cg-text-sec);
margin: 0 0 12px;
line-height: 1.5;
}
#cg-ig-PL8 .cg-code-block {
background: #1a1a2e;
border-radius: 6px;
padding: 12px 40px 12px 12px;
position: relative;
overflow-x: auto;
}
#cg-ig-PL8 .cg-code-block pre {
margin: 0;
font-family: “SF Mono”, Monaco, “Cascadia Code”, “Roboto Mono”, Consolas, “Courier New”, monospace;
font-size: 12px;
line-height: 1.6;
color: #e2e2ea;
white-space: pre-wrap;
word-break: break-word;
}
#cg-ig-PL8 .cg-code-block .cg-copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: var(–cg-accent);
color: var(–cg-white);
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
cursor: default;
}
#cg-ig-PL8 .cg-cta {
padding: 0 24px 24px;
text-align: center;
}
#cg-ig-PL8 .cg-cta-btn {
display: inline-block;
background: var(–cg-primary);
color: var(–cg-white);
text-decoration: none;
font-size: 15px;
font-weight: 600;
padding: 14px 28px;
border-radius: 8px;
transition: background 0.2s;
}
#cg-ig-PL8 .cg-cta-btn:hover {
background: #2f48a8;
}
#cg-ig-PL8 .cg-source {
text-align: center;
padding: 0 24px 20px;
font-size: 11px;
color: var(–cg-text-muted);
}
#cg-ig-PL8 .cg-source a {
color: var(–cg-text-muted);
text-decoration: none;
}
@media (max-width: 480px) {
#cg-ig-PL8 .cg-header {
padding: 20px 16px 12px;
}
#cg-ig-PL8 .cg-progress {
padding: 0 20px 20px;
}
#cg-ig-PL8 .cg-progress::before {
left: 32px;
right: 32px;
}
#cg-ig-PL8 .cg-steps {
padding: 0 16px 20px;
}
#cg-ig-PL8 .cg-step {
gap: 12px;
}
#cg-ig-PL8 .cg-step-content {
padding: 14px;
}
#cg-ig-PL8 .cg-cta {
padding: 0 16px 20px;
}
#cg-ig-PL8 .cg-cta-btn {
padding: 12px 20px;
font-size: 14px;
width: 100%;
box-sizing: border-box;
}
}
Eine Setup-Anleitung in fünf Schritten zeigt, wie du die CompleteGreet-Videobubble auf React- oder Vue-Websites installierst, einschließlich Kontoerstellung, Paketinstallation, Komponentenimport, Konfiguration und Veröffentlichung.
CompleteGreet in fünf Minuten installieren
Füge mit diesen kurzen Schritten eine Videobubble zu deiner React- oder Vue-Website hinzu.
Konto erstellen
Registriere dich bei CompleteGreet und rufe deine eindeutige Widget-ID im Dashboard ab.
Paket installieren
Führe den Installationsbefehl im Stammverzeichnis deines Projekts aus.
npm install @completegreet/react
Komponente importieren
Füge die Import-Anweisung in deiner Haupt-App oder Layout-Datei ein.
import { VideoBubble } from '@completegreet/react';
Zur App hinzufügen
Platziere die Komponente mit deiner Widget-ID in deinem JSX oder Vue-Template.
<VideoBubble widgetId="your-widget-id" position="bottom-right" />
Anpassen und veröffentlichen
Lade dein Begrüßungsvideo hoch, lege Farben fest und veröffentliche die Website. Die Bubble ist anschließend sichtbar, sobald die Konfiguration geladen ist.
Alle Schritte findest du in der statischen Übersicht oben.
Was solltest du vor dem Livegang prüfen?
Bevor du die Website freischaltest, teste die Videobubble auf echten Geräten. Verlasse dich nicht auf eine Browserbreite. Auf iOS Safari kann sich das Widget anders verhalten als in Chrome auf Mobilgeräten. Prüfe, wie der schwebende Button mit deinen Navigationselementen zusammenspielt.
Prüfe deine Core Web Vitals vor und nach der Installation. Ein Videobubble-Widget sollte LCP oder CLS nicht in einen problematischen Bereich verschieben. Miss die Werte auf deiner eigenen Website. Google-Leitfaden zu Web Vitals empfiehlt, Layoutverschiebungen unter 0,1 zu halten. Prüfe deshalb, ob der Platzhalter während des Ladens springt.
Sieh dir das Targeting auf jeder Route genau an. Bei React und Vue kann das Widget bei Routenwechseln bestehen bleiben, wenn du das Skript in einem Layout-Wrapper platzierst, oder bei jeder Navigation neu laden. Beides kann richtig sein, solange es deiner Absicht entspricht.
Prüfe, dass die Begrüßung nur auf den im Dashboard ausgewählten URLs erscheint. Stelle außerdem sicher, dass sie in Checkout-Abläufen und privaten Bereichen ausgeblendet wird.
Ein Punkt wird oft übersehen: die mobile Datennutzung.
Ein 30-sekündiges Hintergrundvideo kann das monatliche Datenvolumen eines Besuchers stark belasten, wenn es auf jeder Seite automatisch startet. Verwende auf Mobilgeräten ein statisches Vorschaubild mit einer klaren Wiedergabeschaltfläche und überlasse den Start dem Besucher.
Auch Konflikte mit Modals und Schubladen können Live-Websites stören. Ein Hamburger-Menü oder Warenkorb kann unter der Videobubble liegen, oder die Bubble verschwindet hinter einem Popup. Solche Probleme mit der Stapelreihenfolge findest du meist erst in einer echten Umsetzung.
Gehe abschließend den gesamten Besucherweg als ausgeloggter Nutzer durch. Lösche Cookies und Cache und prüfe den Weg von der Einstiegsseite bis zur gewünschten Aktion. Die Videobubble sollte sich natürlich in das Erlebnis einfügen und nicht im falschen Moment Aufmerksamkeit verlangen.
Eine Videobubble auf einer React- oder Vue-Website wird über ein leichtes, asynchron geladenes Skript eingebunden und blockiert den Komponenten-Renderzyklus nicht. Du erzeugst im Dashboard eine eindeutige Website-ID und fügst den Initialisierungscode in das Root-Layout oder die zentrale Einstiegsdatei ein.
Unten findest du die genaue Reihenfolge für die Installation, einschließlich des richtigen Platzes für das Snippet in Single-Page-Apps und der Prüfung, ob die Bubble auf allen Routen korrekt erscheint.
Melde dich zuerst im CompleteGreet Dashboard an und wähle in der oberen Navigation Neue Website hinzufügen. Gib deine Domain ein und wähle React oder Vue als Plattform. Danach erhältst du die passenden Installationshinweise.
Kopiere das Script-Tag aus dem Installationsfenster. Dein Code sieht wie im folgenden Beispiel aus, wobei deine Website-ID den Platzhalter ersetzt:
Beispiel für ein CompleteGreet-Script mit deiner Website-ID- Öffne deine Projektdateien und suche die zentrale HTML-Vorlage oder die Root-Layout-Komponente.
- Füge das Skript in React-Apps vor dem schließenden head-Tag in den Head-Bereich ein. In Vue kannst du es in index.html oder nuxt.config eintragen.
- Speichere die Datei und starte den Entwicklungsserver neu, damit das Skript mit der ersten Seitenanfrage geladen wird.
Da das Widget asynchron geladen wird, sollte es deine Time-to-Interactive-Werte nicht blockieren. Nach der Aktivierung erscheint die Bubble standardmäßig unten rechts und baut die WebRTC-Verbindung erst auf, wenn jemand klickt.
Wenn du React Router oder Vue Router nutzt, bleibt die Bubble bei Routenwechseln bestehen und muss nicht neu initialisiert werden. Das Skript erkennt URL-Änderungen selbst und hält den Videostatus während der Navigation aufrecht.
Websites mit Videobubbles können mehr Anfragen erhalten, aber die Wirkung ist nicht garantiert. Miss deine eigenen Daten vor und nach der Installation, besonders auf Seiten mit hoher Kaufabsicht wie Preisen oder Produktfunktionen.
Teste deine Umsetzung auf Desktop und Mobilgeräten, bevor du sie veröffentlichst. Die Bubble sollte an verschiedenen Bildschirmgrößen sichtbar bleiben, ohne zu stören. Der Dialog für Kameraberechtigungen muss den W3C-Leitlinien zur Barrierefreiheit für die Kompatibilität mit Screenreadern entsprechen.
Häufig gestellte Fragen
Wie füge ich CompleteGreet zu einer React-App hinzu, ohne die Bundle-Größe unnötig zu erhöhen?
Die Bundle-Größe wird dadurch nicht automatisch größer, da CompleteGreet asynchron geladen wird. Du fügst ein Script-Tag in index.html ein oder lädst es mit useEffect dynamisch. Das Videowidget wird außerhalb deines Komponentenbaums gerendert und löst dort keine erneuten Renderings aus. Dein zentraler JavaScript-Code bleibt schlank.
Warum wird meine CompleteGreet-Videobubble bei lokaler Entwicklung in der React-App nicht angezeigt?
In vielen Fällen stimmt die Domain nicht überein. Prüfe in den Website-Einstellungen des CompleteGreet Dashboards, ob deine Localhost-URL freigeschaltet ist. Lokale Entwicklungs-URLs fehlen oft in der Liste erlaubter Domains. Füge localhost:3000 oder den verwendeten Port hinzu und teste die Bubble erneut.
Verlangsamt CompleteGreet die Leistung meiner React-App?
In der Regel nicht. CompleteGreet lädt Ressourcen verzögert, sobald die Seite interaktiv ist. Das Skript wird erst nach der Grundinitialisierung aktiv und lädt Videos erst bei Interaktion. So kann deine React-App zuerst rendern. Prüfe die Web Vitals trotzdem auf deiner Website.
Kann ich in meiner React-Router-App auf verschiedenen Routen unterschiedliche CompleteGreet-Videos anzeigen?
Ja. Du kannst anhand der aktuellen Route unterschiedliche Videos auslösen, indem du die API von CompleteGreet in einem useEffect beobachtest, der auf Standortänderungen reagiert. Richte im Dashboard getrennte Kampagnen für die Pfade ein und prüfe, ob das Widget die Videos beim Navigieren wie erwartet wechselt.
Funktioniert CompleteGreet mit serverseitig gerenderten React-Frameworks wie Next.js?
Ja. CompleteGreet läuft im Browser und kann deshalb mit Next.js und anderen SSR-Frameworks eingesetzt werden. Lade das Skript in useEffect oder componentDidMount, um die serverseitige Ausführung zu vermeiden. Das Widget wird erst nach Abschluss der Hydration initialisiert.
Wie viel kostet CompleteGreet für ein React-SaaS-Startup mit 10.000 monatlichen Besuchern?
CompleteGreet verwendet einen monatlichen Preis, der auf der Zahl eindeutiger Besucher basiert, nicht auf Videoaufrufen oder angesehenen Minuten. Bei 10.000 Besuchern kannst du anhand der aktuellen Preisseite einen passenden Tarif prüfen. Vergleiche die aktuellen Bedingungen, da Preise und Tarifgrenzen geändert werden können.
