Profil
Dashboard
Abmelden
Inhaltsverzeichnis
Das Wichtigste auf einen Blick
- Die Einrichtung erfolgt ohne manuelle Theme-Änderung über die Shopify-App.
- Du kannst Position, Zielseiten, Call-to-Action und Gestaltung im Dashboard anpassen.
- Prüfe deinen Shop in Chrome, Safari und Firefox sowie auf einem echten Smartphone.
Wie installierst du CompleteGreet auf Shopify?
Die Einrichtung dauert weniger als fünf Minuten und erfordert keine Programmierung. Die App ist im Shopify App Store verfügbar und verbindet den Shop, ohne dass du Theme-Dateien manuell bearbeiten musst.
Suche im Shopify-Admin unter Apps nach „CompleteGreet“ und klicke auf App installieren. Shopify zeigt die benötigten Berechtigungen für Theme und Bestellungen an. Bestätige die Verbindung mit Installieren.
Die App leitet dich zu CompleteGreet weiter, damit du ein Konto erstellst. Gib E-Mail-Adresse und Passwort ein und bestätige die Registrierung. Danach öffnet sich dein Dashboard.
Lade deine erste Videobegrüßung hoch. Klicke oben rechts auf Upload, wähle die Datei aus und warte, bis die Verarbeitung abgeschlossen ist. Für schnelle Ladezeiten sollte sie kleiner als 50 MB und kürzer als 60 Sekunden sein.
Konfiguriere deine Videobubble Einstellungen:
- Lege die Position fest. Unten rechts funktioniert bei vielen Shopify-Shops gut, wenn sich Warenkorb-Buttons oben rechts befinden.
- Wähle die Seiten aus, auf denen das Widget erscheinen soll. Beginne mit Startseite und Produktseiten.
- Formuliere den Call-to-Action passend zur Seite. „Frag mich alles“ kann persönlicher wirken als ein allgemeines „Kontakt“.
- Lege deine Geschäftszeiten fest, damit außerhalb dieser Zeiten eine Kalenderbuchung angezeigt werden kann, sofern diese Funktion in deinem aktuellen Plan verfügbar ist.
Bei Themes für den Online Store 2.0 fügt die App automatisch einen CompleteGreet-Bereich im Theme-Editor hinzu. Ziehe ihn in den Footer und klicke auf Speichern. Bei älteren Themes kopierst du den Einbettungscode aus dem CompleteGreet-Dashboard, öffnest unter Online Store und Themes den Code-Editor und fügst ihn in theme.liquid direkt vor dem schließenden Tag ein.
Das ist ein internes Beispiel und keine Zusage für andere Shops.
Veröffentliche die Theme-Änderung oder speichere den Code. Danach sollte die Bubble auf der Live-Seite erscheinen.
Was kannst du auf Shopify anpassen?
Du kannst fast jedes visuelle Detail der Videobubble ohne Code anpassen. Wähle unten links oder unten rechts, lege die Größe fest und lade ein eigenes Vorschaubild mit deinem Gesicht statt eines generischen Play-Symbols hoch. Teste die Größe auf Mobilgeräten und Desktop separat.
Zielseiten und Verzögerung
Zeige das Widget nur auf Produktseiten mit konkreter Kaufabsicht oder schließe es im Checkout aus, damit es nicht stört. Du kannst Kollektionen auswählen und eine Verzögerung von etwa fünf Sekunden festlegen, damit Besucher zuerst den Inhalt sehen.
Call-to-Action und Formulare
Der integrierte Formular-Builder kann Name, E-Mail, Telefon und eigene Felder erfassen, etwa „Welche Größe suchst du?“. Verbinde die Angaben mit deinen erlaubten CRM- oder E-Mail-Integrationen und prüfe die Datenübertragung.
Der Buttontext ist wichtiger, als viele Teams erwarten. Eine konkrete Frage kann besser funktionieren als „Nachricht senden“. Die Farbe sollte zur Marke passen und genügend Kontrast haben. Viele Videobubble-Tools beschränken dich auf feste Paletten, doch die Shopify-Theme-Integration kann die exakten Markenfarben übernehmen.
Die Aufnahmequalität trennt eine verständliche Begrüßung von einer schwer nutzbaren. Verwende seitliches Fensterlicht statt einer Deckenlampe, und achte besonders auf klaren Ton. Ein einfaches Mikrofon kann mehr bewirken als 4K-Auflösung.
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
border-top: 4px solid #3D5ACE;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
#cg-ig-PL5 .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-PL5 .ig-header {
text-align: center;
margin-bottom: 24px;
}
#cg-ig-PL5 .ig-title {
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
}
#cg-ig-PL5 .ig-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0;
}
#cg-ig-PL5 .step-container {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
#cg-ig-PL5 .step-item {
display: flex;
gap: 16px;
align-items: flex-start;
background: #ffffff;
padding: 16px;
border-radius: 8px;
border: 1px solid #e2e2ea;
}
#cg-ig-PL5 .step-number {
width: 32px;
height: 32px;
background: #3D5ACE;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
#cg-ig-PL5 .step-content {
flex: 1;
}
#cg-ig-PL5 .step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0;
line-height: 1.5;
}
#cg-ig-PL5 .code-block {
background: #1a1a2e;
border-radius: 6px;
padding: 12px;
margin-top: 8px;
position: relative;
}
#cg-ig-PL5 .code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, monospace;
font-size: 12px;
color: #e2e2ea;
margin: 0;
word-break: break-all;
}
#cg-ig-PL5 .copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: #3D5ACE;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
cursor: default;
}
#cg-ig-PL5 .stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
#cg-ig-PL5 .stat-box {
background: #ffffff;
padding: 16px 8px;
border-radius: 8px;
text-align: center;
border: 1px solid #e2e2ea;
}
#cg-ig-PL5 .stat-number {
font-size: 24px;
font-weight: 700;
color: #3D5ACE;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .stat-label {
font-size: 11px;
color: #7a7a96;
margin: 0;
line-height: 1.3;
}
#cg-ig-PL5 .case-study {
background: #ffffff;
border-left: 3px solid #E48333;
padding: 12px 16px;
border-radius: 0 8px 8px 0;
margin-bottom: 20px;
}
#cg-ig-PL5 .case-label {
font-size: 12px;
font-weight: 600;
color: #E48333;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .case-text {
font-size: 12px;
color: #4a4a68;
margin: 0;
line-height: 1.5;
}
#cg-ig-PL5 .cta-button {
display: block;
width: 100%;
background: #3D5ACE;
color: #ffffff;
text-align: center;
padding: 14px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 15px;
margin-bottom: 16px;
}
#cg-ig-PL5 .source-line {
font-size: 11px;
color: #7a7a96;
text-align: center;
margin: 0;
}
@media (max-width: 480px) {
#cg-ig-PL5 {
padding: 16px;
}
#cg-ig-PL5 .ig-title {
font-size: 18px;
}
#cg-ig-PL5 .stats-grid {
grid-template-columns: 1fr;
}
#cg-ig-PL5 .step-item {
padding: 12px;
}
}
CompleteGreet in Shopify installieren
Einrichtung in vier Schritten, ohne Programmierung
Im Shopify App Store installieren
Suche im Shopify-Admin im Bereich Apps nach „CompleteGreet“ und klicke auf Installieren.
Konto verbinden
Melde dich bei deinem CompleteGreet-Konto an oder erstelle ein neues Konto und erlaube Shopify den Zugriff.
Videobegrüßung hochladen
Nimm eine 30- bis 60-sekündige Begrüßung auf oder lade sie direkt im Dashboard hoch.
Widget-Code hinzufügen, optional
Für eine individuelle Position füge dieses Snippet vor dem schließenden -Tag ein:
70 %
Mehr Anfragen
21 %
Verweildauer auf der Website ↑
17 %
Mehr Conversions ↑
Fallbeispiel Merchshark.dk
Dänischer Merchandise-Shop mit 70 Prozent mehr Anfragen und 17 Prozent höherer Conversion-Rate nach dem Einsatz eines Videowidgets.
See the static HTML data above for the full breakdown.
Was solltest du vor dem Livegang prüfen?
Öffne deinen Shop in Chrome, Safari und Firefox und beobachte, wie die Videobubble erscheint. Sie sollte unten in der Ecke stehen, ohne Navigationsmenü, Warenkorb-Button oder Checkout zu verdecken. Bei Überschneidungen änderst du den Positionsabstand in den Widget-Einstellungen.
Mobiler Traffic ist in Shopify-Shops besonders wichtig.
Teste auf iOS Safari und Android Chrome mit echten Geräten, nicht nur mit Emulatoren. Die Bubble sollte sich anpassen, ohne den Vollbildmodus zu erzwingen, und der Schließen-Button muss gut erreichbar sein. Verdeckt sie das mobile Menü oder eine feste Warenkorb-Leiste, springen Besucher möglicherweise ab.
Bei den Seitenregeln passieren die meisten Fehler.
Prüfe, ob deine Anzeigeregeln zur Absicht passen. Eine Begrüßung gehört auf die Startseite, nicht in den Checkout. Seitenspezifische Botschaften sollten nur auf den passenden Produktseiten erscheinen. Ein dänischer Shop meldete mehr Anfragen, nachdem Begrüßungen auf Kollektionen gezielt angezeigt und im Checkout ausgeblendet wurden.
Führe nach der Installation einen Test mit Google PageSpeed Insights durch. Videodateien erhöhen das Seitengewicht, und Shopify-Themes sind oft bereits umfangreich. Sinkt der LCP-Wert, kontrolliere 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. Ein defektes Formular zerstört Vertrauen schneller als gar kein Formular.
Gehe den Shop abschließend wie ein Kunde durch. Öffne ein Produkt, lege es in den Warenkorb und starte den Checkout. Das Widget sollte hilfreich bleiben und nicht stören. Prüfe Links, Bilder und Formular-Feedback vor der Veröffentlichung.
Videowidgets machen aus einem statischen Shopify-Shop eine interaktive Nutzerreise, in der Besucher eine echte Person statt eines automatisierten Chat-Symbols sehen. Die Technologie sollte asynchron laden, damit der Seitenaufbau nicht blockiert wird, im Einklang mit den Empfehlungen zu Google Web Vitals für schnelle Interaktionen.
Die Installation erfordert ein einzelnes Skript und anschließend die Konfiguration im visuellen Dashboard.
CompleteGreet liefert das Video über ein leichtes JavaScript-Snippet aus, das nach dem Laden des Seiteninhalts startet. Kopiere den Code einmal in das Theme und verwalte Zielseiten und andere Einstellungen danach im externen Dashboard.
- Melde dich im CompleteGreet-Dashboard an und wähle im Seitenmenü Domain hinzufügen.
- Gib die URL deines Shopify-Shops ein und kopiere das erzeugte Installationsskript.
- Öffne in Shopify Online Store und Themes und klicke auf Aktionen und Code bearbeiten.
- Öffne die Datei theme.liquid und füge das Skript direkt vor dem schließenden head-Tag ein.
- Speichere die Datei und kehre zu CompleteGreet zurück, um den Verbindungsstatus zu prüfen.
Das Skript kann Videodateien über einen CDN-Endpunkt laden, damit der Hauptthread des Browsers für Warenkorb und Checkout frei bleibt. Shops mit großen Bildern oder komplexen Cart-Skripten sollten diese nicht blockierende Architektur trotzdem mit eigenen Web-Vitals-Tests prüfen.
Nach der Aktivierung können sich Anfragen verändern, doch der Zeitraum und die Ursache müssen im eigenen Shop gemessen werden. Prüfe aktuelle Planpreise und enthaltene Videobubbles, statt eine feste DKK-Angabe aus einem alten Beispiel zu übernehmen.
Mobile Tests bleiben wichtig, weil sich Shopify-Themes bei verschiedenen Bildschirmgrößen unterschiedlich verhalten. Prüfe auf kleinen Geräten wie dem iPhone SE, dass die Bubble den Checkout-Button nicht verdeckt, bevor du sie auf allen Produktseiten aktivierst.
Häufige Fragen
Wie füge ich CompleteGreet ohne Code zu meinem Shopify-Shop hinzu?
Installiere die CompleteGreet-App aus dem Shopify App Store und folge dem Einrichtungsdialog. Erteile die nötigen Berechtigungen, nimm eine Begrüßung auf oder lade sie hoch und speichere. Die App kann das Skript anschließend automatisch einfügen. Prüfe die Live-Storefront trotzdem selbst.
Warum erscheint meine Videobubble nicht in der Shopify-Theme-Vorschau?
Die Theme-Vorschau läuft in einer isolierten Umgebung und kann externe Skripte aus Sicherheitsgründen blockieren. Auf der veröffentlichten Storefront kann die Bubble trotzdem funktionieren. Öffne den Shop in einem privaten Fenster oder auf einem Mobilgerät.
Kann ich das Widget nur auf Shopify-Produktseiten anzeigen?
Ja. Lege im CompleteGreet-Dashboard URL-Regeln an, die nur Pfade mit /products/ einschließen. Einzelne Produktseiten kannst du über Handles ausschließen. Prüfe die Regeln mit deinem aktuellen Shopify-Plan.
Verlangsamt CompleteGreet meinen Shopify-Shop?
Das Skript wird asynchron geladen und blockiert dadurch nicht den ersten Seitenaufbau. Die tatsächliche Wirkung hängt von Theme, Video, Apps und weiteren Ressourcen ab. Miss die veröffentlichte Seite mit Google PageSpeed und deinen Web-Vitals-Werkzeugen.
Was kostet CompleteGreet für einen Shopify-Shop mit 5.000 monatlichen Besuchern?
Der Preis richtet sich nach aktuellem Plan, Besuchergrenze und enthaltenen Funktionen. Prüfe die aktuelle Preisseite direkt vor der Anmeldung. CompleteGreet rechnet nach eindeutigen Besuchern, nicht nach einzelnen Wiedergaben oder Minuten, sofern die aktuellen Bedingungen dies bestätigen.
Kann ich CompleteGreet mit einem Konto auf mehreren Shopify-Shops verwenden?
Das hängt von den aktuellen Planbedingungen ab. Prüfe, wie viele Domains, Besucher und Integrationen enthalten sind, bevor du mehrere Shops verbindest. Für mehrere Marken kann ein passender Mehrseiten- oder Enterprise-Tarif erforderlich sein.
