Profil
Dashboard
Abmelden
Inhaltsverzeichnis
Kurz zusammengefasst
- Die Installation kann einfach sein, doch der Zeitaufwand hängt vom Theme, den Zugriffsrechten und der Gründlichkeit deiner Tests ab. Du musst nicht zwingend selbst Code schreiben.
- Im CompleteGreet-Dashboard kannst du im Rahmen der aktuellen Funktionen festlegen, wo das Widget im Shop erscheint und wie es sich verhält.
- Teste vor der Veröffentlichung auf echten Smartphones und Tablets, statt nur das Browserfenster zu verkleinern. Prüfe außerdem, ob die Seitenregeln das Widget nur auf den ausgewählten URLs anzeigen.
Wie installierst du CompleteGreet in WooCommerce?
In einer Standardkonfiguration kann die Installation schnell gehen. Es gibt jedoch keine feste Dauer für alle Shops. Häufig kannst du die Einrichtung ohne Programmierkenntnisse erledigen.
Öffne das WordPress-Dashboard und suche den Bereich, in dem das Theme oder benutzerdefinierter Code verwaltet wird. Menünamen und Zugriff können sich je nach Theme und Lösung unterscheiden.
Eine Video-Bubble wird normalerweise über einen kleinen Integrationscode im Kopf- oder Fußbereich der Website geladen. Wähle die Methode, die für deine WordPress- und WooCommerce-Konfiguration empfohlen wird.
- Wenn du Theme-Dateien direkt bearbeitest, musst du zuerst die richtige Datei im aktiven Child-Theme finden. Die offizielle WooCommerce-Dokumentation empfiehlt ein Child-Theme und eine Sicherung, bevor du Template-Dateien änderst. Teste die Integration immer in einer sicheren Umgebung, bevor du veröffentlichst.
- Suche die Stelle, die in der aktuellen Installationsanleitung für den Integrationscode angegeben ist.
- Rufe den aktuellen CompleteGreet-Code aus deinem Konto ab und füge ihn mit der empfohlenen Methode ein.
- Speichere die Änderungen.
- Öffne den Shop in einem privaten Browserfenster und prüfe, ob die Bubble an den erwarteten Stellen erscheint.
Wenn du einen Cache wie WP Rocket oder LiteSpeed Cache verwendest, leere ihn vor dem Test. Andernfalls siehst du möglicherweise eine ältere Version der Seite.
Einige WooCommerce-Shops mit verwaltetem Hosting erlauben keine direkte Bearbeitung von Theme-Dateien.
In diesem Fall kann eine bewährte Lösung für Code im Kopf- und Fußbereich eine Alternative sein. Füge den CompleteGreet-Code in das richtige Feld ein und prüfe, ob die Methode mit dem Theme und den Sicherheitsregeln der Website kompatibel ist.
Was kannst du in WooCommerce anpassen?
Nach der Einrichtung kannst du mit den verfügbaren Einstellungen festlegen, wo das Widget erscheint und wie es im Shop aussieht.
Ausrichtung auf Seiten und Besucher
Mit Seitenregeln kannst du das Widget auf ausgewählten Produktseiten, Shopseiten oder anderen Katalogbereichen anzeigen. Prüfe, welche Regeln im aktuellen Tarif verfügbar sind.
Weitere Bedingungen können von Lösung und Tarif abhängen, etwa Besucherstatus, UTM-Quelle oder verweisende Domain. Teste jede Regel vor der Veröffentlichung, statt von einer sofortigen Übernahme der Änderungen auszugehen.
Konfiguration der Aktionsschaltfläche
Du kannst den Schaltflächentext anpassen und unter den in deinem Konto verfügbaren Optionen eine Aktion wählen, etwa das Öffnen einer URL oder anderer Inhalte.
Falls dein Tarif diese Optionen bietet, kannst du die Farben so anpassen, dass das Widget besser zum Theme des Shops passt.
Formularfelder und Erfassung von Anfragen
Wenn die Lösung Formulare bietet, kannst du auswählen, welche Felder und Beschriftungen erscheinen. Pflichtfelder müssen getestet werden, damit das Absenden wie erwartet funktioniert.
Prüfe selbst, wie die Validierung mit leeren, ungültigen und unerwünschten Eingaben umgeht.
Markenauftritt und Position
Nutze Farben, Texte und Hintergründe, die zum Markenauftritt passen. Probiere verschiedene Ecken aus und wähle eine Position, die weder wichtige Schaltflächen noch Produktinformationen verdeckt.
Wähle ein Vorschaubild, das vor der Wiedergabe natürlich wirkt. Prüfe, wie Gesichter und andere Motive auf kleinen Bildschirmen zugeschnitten werden.
Diese Tools für Video-Bubbles können mit vielen WooCommerce-Themes funktionieren. Die Kompatibilität muss jedoch im tatsächlichen Theme und nach Theme-Updates bestätigt werden.
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
position: relative;
overflow: hidden;
}
#cg-ig-PL7::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #3D5ACE;
}
#cg-ig-PL7 .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#cg-ig-PL7 .ig-header {
text-align: center;
margin-bottom: 24px;
}
#cg-ig-PL7 .ig-title {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
}
#cg-ig-PL7 .ig-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0;
}
#cg-ig-PL7 .progress-bar {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
position: relative;
}
#cg-ig-PL7 .progress-bar::before {
content: ”;
position: absolute;
top: 14px;
left: 40px;
right: 40px;
height: 2px;
background: #e2e2ea;
z-index: 0;
}
#cg-ig-PL7 .progress-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
#cg-ig-PL7 .step-circle {
width: 30px;
height: 30px;
border-radius: 50%;
background: #3D5ACE;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
}
#cg-ig-PL7 .step-label {
font-size: 11px;
color: #4a4a68;
font-weight: 500;
}
#cg-ig-PL7 .steps-container {
display: flex;
flex-direction: column;
gap: 16px;
}
#cg-ig-PL7 .step-card {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 8px;
padding: 16px;
}
#cg-ig-PL7 .step-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
#cg-ig-PL7 .step-number {
width: 28px;
height: 28px;
border-radius: 50%;
background: #3D5ACE;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
#cg-ig-PL7 .step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0;
}
#cg-ig-PL7 .step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0 0 12px 0;
line-height: 1.5;
}
#cg-ig-PL7 .code-block {
background: #1a1a2e;
border-radius: 6px;
padding: 12px;
position: relative;
margin-top: 8px;
}
#cg-ig-PL7 .code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, “Roboto Mono”, Consolas, monospace;
font-size: 12px;
color: #f7f7fb;
margin: 0;
word-break: break-all;
line-height: 1.4;
}
#cg-ig-PL7 .copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: #E48333;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
#cg-ig-PL7 .cta-section {
margin-top: 20px;
text-align: center;
padding-top: 16px;
border-top: 1px solid #e2e2ea;
}
#cg-ig-PL7 .cta-button {
display: inline-block;
background: #3D5ACE;
color: #ffffff;
text-decoration: none;
padding: 12px 24px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
}
#cg-ig-PL7 .cta-button:hover {
background: #2d4ab8;
}
#cg-ig-PL7 .source-line {
margin-top: 16px;
font-size: 11px;
color: #7a7a96;
text-align: center;
}
@media (max-width: 480px) {
#cg-ig-PL7 {
padding: 16px;
}
#cg-ig-PL7 .ig-title {
font-size: 18px;
}
#cg-ig-PL7 .step-label {
font-size: 10px;
}
#cg-ig-PL7 .step-title {
font-size: 14px;
}
}
Illustration einer beispielhaften Einrichtung eines Video-Widgets in WooCommerce, vom Konto über Installation und Verbindung bis zur Aktivierung.
CompleteGreet für WooCommerce
Beispiel für eine Einrichtung in vier Schritten
CompleteGreet-Konto erstellen
Erstelle ein Konto und prüfe im aktuellen Dashboard, welche Integrationsmethode für WooCommerce empfohlen wird.
Installationsmethode wählen
Nutze die empfohlene Integration oder eine kontrollierte Codeposition. Bearbeite keine Theme-Dateien ohne Sicherung und Child-Theme.
Rufe den aktuellen Integrationscode aus deinem CompleteGreet-Konto ab.
Shop verbinden
Folge der aktuellen Anleitung in deinem Konto und teile niemals private Schlüssel oder Zugangsdaten in öffentlichem Code.
Füge den Schlüssel in das geschützte Feld ein, das für die Integration vorgesehen ist.
Aktivieren und konfigurieren
Aktiviere das Widget und passe Position, Auslöser und Videoinhalt an. Teste jede Auswahl vor der Veröffentlichung.
Quelle: Beispielhafte Einrichtung auf Grundlage des Arbeitsablaufs im Artikel
Die vollständige Übersicht findest du in den statischen Angaben oben.
Was solltest du vor der Veröffentlichung prüfen?
Teste auf echten Geräten, bevor du das Widget für alle aktivierst. Prüfe außerdem, ob die Seitenregeln die Anzeige auf die tatsächlich ausgewählten URLs begrenzen.
Auf mehr als nur einem Computer testen
Desktop- und Mobilbrowser behandeln Video-Bubbles unterschiedlich. Ein Vorschaubild, das auf einem großen Bildschirm klein wirkt, kann auf einem kompakten Smartphone viel Platz einnehmen. Öffne die Website deshalb auf echten Geräten und prüfe, ob die Schließen-Schaltfläche leicht zu bedienen ist.
iOS beschränkt automatische Wiedergabe mit Ton. Lass die Begrüßung deshalb ohne Ton starten oder warte, bis Besucher selbst die Wiedergabetaste drücken.
Logik der Seitenregeln prüfen
Viele Fehler entstehen bei der Ausrichtung. Du hast vielleicht Seiten unter /shop/ ausgewählt, während Produktseiten in deiner Konfiguration /product/ oder eine lokalisierte Struktur verwenden.
Wenn das Widget über der Kasse erscheint, kann es Kunden beim Bezahlen stören. Schließe die Kasse bei Bedarf aus.
Gehe die Anzeigeregeln einzeln durch. Teste mehrere Seitentypen, darunter Produkte, Kategorien, Warenkorb und Kasse, und bestätige die korrekte Logik.
Prüfe auch die Ladezeit. Eine Video-Bubble fügt der Seite zusätzliche Ressourcen hinzu, und WooCommerce-Shops laden oft bereits große Produktbilder und Warenkorb-Skripte. Miss deshalb eine repräsentative Seite mit PageSpeed Insights.
Vergleiche die Messwerte mit der aktuellen Anleitung zu Google Web Vitals . Wenn das Widget einen wichtigen Messwert beeinträchtigt, kannst du verzögertes Laden testen oder die Aktivierung aufschieben, bis Besucher zu scrollen beginnen.
Prüfe außerdem, ob das Widget die Lightbox für Produktbilder oder einen ausfahrbaren Warenkorb überlagert. Wenn sich diese Elemente hinter der Video-Bubble öffnen, muss die Ebenenreihenfolge angepasst und erneut getestet werden.
WooCommerce-Shops verkaufen visuell. Käufer können zögern, wenn sie das Produkt nicht im Einsatz sehen oder keine Antwort auf eine Frage erhalten. Ein Video-Widget kann direkt im Kaufprozess eine persönlichere Erklärung geben.
Historische Beispiele können zeigen, welche Kennzahlen andere Shops verfolgt haben. Sie sind jedoch keine Garantie für deinen Shop.
Kennzahlen, die du verfolgen solltest
Miss die Anzahl qualifizierter Anfragen vor und nach dem Test. Das Ergebnis hängt von Traffic, Botschaft, Produkten und Position ab. Nutze daher keinen allgemeinen Prozentsatz als Erwartung.
Verfolge auch Absprungrate und Ladezeit. Eine schnelle und unaufdringliche Erfahrung kann wichtiger sein als ein hoher Produktionswert, doch die Wirkung muss mit deinen eigenen Messungen belegt werden.
Voraussetzungen für die Installation
Normalerweise benötigst du Administratorrechte in WordPress und eine unterstützte WooCommerce-Version. Prüfe vor der Installation die Anforderungen in der aktuellen Dokumentation.
Wenn deine Konfiguration direkte Videoübertragung oder WebRTC-Funktionen bietet, prüfe, ob das Hosting die notwendigen Verbindungen unterstützt. Das gilt nur für Funktionen, die tatsächlich genutzt werden.
Lies vor der Aktivierung neuer Erweiterungen die offizielle WordPress- und WooCommerce-Dokumentation zu aktuellen Serveranforderungen und sicheren Vorgehensweisen.
Gehe nicht davon aus, dass eine bestimmte Trafficmenge, ein Preis oder ein Anstieg der Conversions automatisch zu einer schnellen Amortisation führt. Berechne Kosten und Wert mit dem aktuellen Tarif, deinen eigenen Margen und qualifizierten Anfragen.
Beginne auf Seiten mit klarer Kaufabsicht, etwa Produktdetailseiten und Warenkorb. Vergleiche das Ergebnis mit einem Kontrollzeitraum, bevor du das Widget auf der gesamten Website anzeigst.
Häufig gestellte Fragen
Wie füge ich CompleteGreet zu WooCommerce hinzu, ohne den Kassencode zu ändern?
Nutze die in der aktuellen Anleitung empfohlene Integrationsmethode, etwa eine kontrollierte Codeposition oder eine kompatible Erweiterung. Schließe die Kasse bei Bedarf mit Seitenregeln aus und teste den Zahlungsablauf vor der Veröffentlichung.
Warum erscheint die CompleteGreet-Bubble nicht in der Vorschau des WooCommerce-Themes?
Einige Themes laden die Vorschau in einem Rahmen oder mit einem Cache, der externe Skripte blockieren kann. Teste eine sichere veröffentlichte Testseite und prüfe Konsole, Cache sowie Einwilligungseinstellungen, bevor du eine Schlussfolgerung ziehst.
Kann CompleteGreet nur auf Produktseiten angezeigt und im Warenkorb ausgeblendet werden?
Nutze die in deinem Konto verfügbaren Seitenregeln, um die richtigen Produktadressen einzuschließen und Warenkorb sowie Kasse auszuschließen. URLs können lokalisiert sein. Teste deshalb alle relevanten Seitentypen.
Macht CompleteGreet einen WooCommerce-Shop langsamer?
Jede zusätzliche Ressource kann die Leistung beeinflussen. Miss repräsentative Seiten vor und nach der Installation auf Mobilgeräten und Desktop. Prüfe Core Web Vitals, Produktbilder, Cache und den Ladezeitpunkt des Widgets.
Wie lässt sich der CompleteGreet-Preis mit Video-Widgets vergleichen, die pro Minute abrechnen?
Preis und Berechnungsmodell können sich ändern. Vergleiche den aktuellen CompleteGreet-Tarif anhand von echtem Traffic, Websites, Funktionen und möglichen Grenzen mit den Alternativen. Verlasse dich nicht auf einen alten Preisunterschied.
Eignet sich CompleteGreet für einen WooCommerce-Shop mit hochpreisigen Produkten?
Eine persönliche Videobegrüßung kann bei einem Kauf mit hohem Informationsbedarf einen Test wert sein. Eine höhere Conversion ist jedoch nicht garantiert. Nutze das Video, um eine konkrete Frage zu beantworten, und miss qualifizierte Anfragen sowie abgeschlossene Käufe.
