Inhaltsverzeichnis
Kurz zusammengefasst
- CompleteGreet wird über die Code-Injektion in Squarespace eingebunden. Prüfe zuerst, ob dein aktueller Squarespace-Tarif Zugriff auf diese Funktion bietet.
- Nach der Installation kannst du das Erscheinungsbild, die Seiten für die Anzeige der Bubble und die Aktion nach einem Klick festlegen.
- Vor der Veröffentlichung solltest du Desktop und Mobilgeräte, URL-Regeln, Leistung, Barrierefreiheit und alle Aktionen in der Bubble testen.
Kurz gesagt fügst du den Code von CompleteGreet in den Bereich für die Code-Injektion in Squarespace ein. Anschließend testest du die Bubble auf der veröffentlichten Website.
CompleteGreet bietet Tarife mit Grenzen für eindeutige Besucher. Orientiere dich an der aktuellen Preisseite und deinem Konto, wenn du Preise, Kapazität und enthaltene Funktionen prüfst.
Der Zugriff auf die Code-Injektion und Skripte von Drittanbietern hängt von deinem aktuellen Squarespace-Tarif ab. Prüfe die Dokumentation und deine Konfiguration, bevor du beginnst.
Der Zeitaufwand hängt vom Tarif, dem Video, dem Erscheinungsbild, den Aktionen und der Gründlichkeit deiner Tests ab.
CompleteGreet ist für persönliche Videobegrüßungen und klare Aktionen gedacht. Die Lösung kann einer Squarespace-Website eine menschlichere Wirkung geben, ohne den Weg der Besucher unnötig kompliziert zu machen.
Wie installierst du CompleteGreet in Squarespace?
Du installierst CompleteGreet mit dem Code aus deinem Konto und dem Bereich für die Code-Injektion in Squarespace. Wie lange das dauert, hängt von der Website und dem Umfang deiner Tests ab.

Eine Video-Bubble ist ein kleines Videoelement in einer Ecke der Website. Sie kann eine Begrüßung von dir oder deinem Team zeigen und Besucher weiterleiten. Unser Leitfaden dazu, was eine Video-Bubble ist erklärt, wie diese Art von Video-Widget funktioniert.
Gehe so vor:
1. Erstelle eine neue Bubble in CompleteGreet und gib ihr einen leicht erkennbaren Namen, zum Beispiel Squarespace Startseite.
2. Nimm deine Begrüßung auf oder lade sie in einem unterstützten Format hoch. Prüfe vor dem Upload die aktuellen Dateitypen und Größenbeschränkungen in deinem Konto.
3. Wähle Vorschaubild, Position, Farben und Schaltflächentext. Du kannst diese Einstellungen später in CompleteGreet ändern, ohne den Code erneut einzufügen.
4. Veröffentliche die Bubble und kopiere den vollständigen Installationscode für die Website und das Widget.
5. Öffne die Squarespace-Verwaltung in einem neuen Tab. Gehe zu den erweiterten Einstellungen und suche den Bereich für die Code-Injektion. Squarespace nutzt diesen Bereich für Skripte von Drittanbietern, die auf der Website geladen werden sollen. Die offizielle Squarespace-Dokumentation zeigt, wo der Code nach der aktuellen Methode eingefügt wird.
6. Füge den vollständigen CompleteGreet-Code an der Stelle ein, die in der aktuellen Dokumentation empfohlen wird. Prüfe, ob beim Einfügen kein Teil des Codes verloren gegangen ist.
7. Speichere die Änderungen in Squarespace.
8. Öffne die veröffentlichte Website in einem privaten Browserfenster. Prüfe, ob die Bubble erscheint, sich öffnen lässt und die gewählten Aktionen ausführt. Wenn sie nicht erscheint, lade die Seite vollständig neu und prüfe Cache sowie Skripteinwilligung.
Der Zugriff auf die Code-Injektion kann auf bestimmte Squarespace-Tarife beschränkt sein, und die Bedingungen können sich ändern. Prüfe daher vor der Installation die aktuelle Tarifübersicht und Dokumentation. Stelle außerdem sicher, dass Template und Sicherheitseinstellungen das Skript zulassen.
Wie eindeutige Besucher gezählt werden, hängt vom aktuellen CompleteGreet-Tarif ab. Prüfe die Definition und Grenzen auf der Preisseite und in deinem Konto.
Was kannst du in Squarespace anpassen?
Du kannst Erscheinungsbild, Verhalten und Aktionen der Bubble festlegen. Die verfügbaren Optionen hängen vom aktuellen Tarif und der Version ab. Tools für Video-Bubbles haben unterschiedliche Regeln für URLs, Aktionen, Anpassungen und Grenzen.

Seiten und Besucher
Wähle die Seiten, auf denen die Bubble wirklich hilft. Du kannst sie zum Beispiel auf der Startseite zeigen und dort ausblenden, wo sie eine wichtige Aktion stören könnte. Prüfe, welche Optionen dein Konto für Verzögerung, Besuchergruppen und die Anzeige auf verschiedenen Geräten bietet.
Teste Mobilgeräte und Desktop getrennt, da Squarespace-Templates Inhalte auf kleinen und großen Bildschirmen unterschiedlich anordnen können. Die Bubble darf weder Menü noch wichtige Schaltflächen, Formulare oder den Einwilligungsbanner verdecken.
Aktionsschaltflächen und Formulare
Eine Schaltfläche kann einen Kalender, ein Formular, eine Produktseite oder eine andere passende Adresse öffnen. Nutze einen kurzen Text, der klar erklärt, was nach dem Klick passiert.
Wenn dein Konto Kontaktformulare im Widget unterstützt, können diese Namen und E-Mail-Adressen erfassen, ohne Besucher von der Seite wegzuführen. Verwende nur die benötigten Felder und prüfe Einwilligung sowie Speicherung.
Markenauftritt und Erscheinungsbild
Passe die Farben an die Palette deiner Squarespace-Website an. Wähle außerdem Vorschaubild, Position und Abstand zu den Rändern. Lass ausreichend Platz für Chat, Einwilligungsbanner und bereits vorhandene feste Schaltflächen.
Wähle eine Größe, die sichtbar ist, ohne Inhalte zu verdecken. Es gibt keine universelle Größe für alle Templates. Teste das Vorschaubild deshalb auf mehreren Seiten und echten Geräten.
Nach dem Austausch von Video oder Vorschaubild kann der Cache weiterhin die alte Version zeigen. Lade die Seite vollständig neu und prüfe sie in einem privaten Fenster.
#cg-ig-PL4 {
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
#cg-ig-PL4 .cg-accent-bar {
height: 4px;
background: #3D5ACE;
}
#cg-ig-PL4 .cg-content {
padding: 24px;
}
#cg-ig-PL4 .cg-title {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
line-height: 1.3;
}
#cg-ig-PL4 .cg-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0 0 24px 0;
line-height: 1.5;
}
#cg-ig-PL4 .cg-steps {
display: flex;
flex-direction: column;
gap: 0;
}
#cg-ig-PL4 .cg-step {
display: flex;
gap: 16px;
position: relative;
padding-bottom: 24px;
}
#cg-ig-PL4 .cg-step:last-child {
padding-bottom: 0;
}
#cg-ig-PL4 .cg-step:not(:last-child)::before {
content: ”;
position: absolute;
left: 15px;
top: 32px;
width: 2px;
height: calc(100% – 16px);
background: #e2e2ea;
}
#cg-ig-PL4 .cg-step-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: #3D5ACE;
color: #ffffff;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
#cg-ig-PL4 .cg-step-content {
flex: 1;
padding-top: 4px;
}
#cg-ig-PL4 .cg-step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 6px 0;
line-height: 1.4;
}
#cg-ig-PL4 .cg-step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0 0 12px 0;
line-height: 1.5;
}
#cg-ig-PL4 .cg-code-box {
background: #1a1a2e;
border-radius: 8px;
padding: 12px 16px;
position: relative;
}
#cg-ig-PL4 .cg-code-label {
font-size: 11px;
color: #7a7a96;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
display: block;
}
#cg-ig-PL4 .cg-code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, “Roboto Mono”, Consolas, monospace;
font-size: 12px;
color: #E48333;
margin: 0;
line-height: 1.6;
word-break: break-all;
}
#cg-ig-PL4 .cg-code-note {
font-size: 11px;
color: #7a7a96;
margin-top: 8px;
font-style: italic;
}
#cg-ig-PL4 .cg-path-box {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 6px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 8px;
}
#cg-ig-PL4 .cg-path-icon {
width: 16px;
height: 16px;
background: #3D5ACE;
border-radius: 3px;
flex-shrink: 0;
}
#cg-ig-PL4 .cg-path-text {
font-size: 13px;
color: #4a4a68;
margin: 0;
}
#cg-ig-PL4 .cg-path-arrow {
color: #7a7a96;
font-size: 12px;
}
#cg-ig-PL4 .cg-cta {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #e2e2ea;
}
#cg-ig-PL4 .cg-cta-btn {
display: block;
width: 100%;
background: #3D5ACE;
color: #ffffff;
text-decoration: none;
text-align: center;
padding: 14px 20px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
transition: background 0.2s ease;
}
#cg-ig-PL4 .cg-cta-btn:hover {
background: #2f4aa8;
}
#cg-ig-PL4 .cg-source {
margin-top: 16px;
font-size: 11px;
color: #7a7a96;
text-align: center;
}
#cg-ig-PL4 .cg-source a {
color: #7a7a96;
text-decoration: underline;
}
#cg-ig-PL4 .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;
}
@media (max-width: 480px) {
#cg-ig-PL4 .cg-content {
padding: 16px;
}
#cg-ig-PL4 .cg-title {
font-size: 18px;
}
#cg-ig-PL4 .cg-step {
gap: 12px;
}
#cg-ig-PL4 .cg-step-num {
width: 28px;
height: 28px;
font-size: 13px;
}
#cg-ig-PL4 .cg-step:not(:last-child)::before {
left: 13px;
top: 28px;
}
}
CompleteGreet in Squarespace installieren
Füge die Video-Bubble über die Code-Injektion hinzu und prüfe die veröffentlichte Website.
CompleteGreet-Konto erstellen
Erstelle die Video-Bubble und wähle Erscheinungsbild sowie Aktionen.
Installationscode kopieren
Öffne den Installationsbereich in CompleteGreet und kopiere den vollständigen Code.
<CompleteGreet-Code zum Einfügen in Squarespace>
Füge den Code im Bereich für die Code-Injektion in Squarespace ein.
Einstellungen für die Code-Injektion öffnen
Suche den Bereich für die Code-Injektion in der Squarespace-Verwaltung.
Einstellungen › Erweitert › Code-Injektion
Code einfügen
Füge den vollständigen CompleteGreet-Code an der von Squarespace empfohlenen Stelle ein.
Speichern und veröffentlichen
Speichere die Änderungen und prüfe die Bubble auf der veröffentlichten Website.
Alle Schritte findest du in der statischen Übersicht oben.
Was solltest du vor der Veröffentlichung prüfen?
Nimm dir vor der Veröffentlichung einige Minuten für eine vollständige Kontrolle. So findest du Fehler bei Position, Wiedergabe, Seitenregeln und Formularen, bevor Besucher darauf stoßen.
Beginne am Desktop in einem privaten Fenster. Prüfe, wie die Bubble geladen wird, wo sie liegt und ob das Vorschaubild scharf ist. Öffne anschließend das Video und kontrolliere Wiedergabe, Ton, Schaltflächen und alle Aktionen.
Drücke die Wiedergabetaste und prüfe, ob Bild, Ton, Untertitel und Steuerelemente wie vorgesehen funktionieren.
Wechsle danach zu einem Mobilgerät. Eine Video-Bubble verhält sich auf einem kleinen Bildschirm anders. Prüfe die Position, das Öffnen des Videos und die Größe der Schließen-Schaltfläche. Besucher müssen die Bubble mit dem Daumen öffnen und schließen können, ohne dass die Navigation verdeckt wird.
Ein Formular, das am Desktop einfach aussieht, kann auf einem Smartphone beengt wirken. Beschränke die Felder auf das tatsächlich Nötige, prüfe die Tastatur für jedes Feld und teste das vollständige Absenden auf einem Mobilgerät.
URL-Regeln verursachen häufig Fehler. Teste mehrere echte Squarespace-Seiten und bestätige, dass die Bubble nur dort erscheint, wo sie nützlich ist. Prüfe auch die auszuschließenden Seiten.
Eine persönliche Begrüßung kann auf der Startseite, der Preisseite oder einer Leistungsseite passen. Auf Zahlungs-, Passwort- oder rechtlichen Seiten ist sie nicht automatisch sinnvoll. Nutze Regeln, die der tatsächlichen Struktur der Website entsprechen.
Miss auch die Leistung. Eine Video-Bubble fügt der Seite Skripte und Medien hinzu. Vergleiche die Website vor und nach der Installation auf Desktop und Mobilgeräten, damit du langsameres Laden, Layoutverschiebungen oder verzögerte Klicks erkennst.
Vergleiche die Messwerte mit Googles Hinweisen zu Web Vitals und untersuche Warnungen zu Layoutverschiebungen oder verzögerten Interaktionen. Passe das Laden in der tatsächlichen Konfiguration an, wenn sich die Werte verschlechtern.
Teste auch mit einer langsameren Mobilfunkverbindung und nicht nur in einem schnellen Büronetzwerk. Prüfe, wie schnell sich die Bubble öffnet, wie das Video abgespielt wird und ob die Schaltflächen unter realistischen Bedingungen reagieren.
Lass zum Schluss eine Person, die das Projekt nicht kennt, die Seite ausprobieren. Bitte sie, das Video zu öffnen und die Aktion in der Bubble zu nutzen. Ein neuer Blick entdeckt oft Probleme, die dem Team nicht mehr auffallen.
Ein neuer Nutzer kann in wenigen Sekunden Reibungspunkte entdecken, die du selbst wochenlang übersehen hast.
Veröffentliche erst, wenn Erscheinungsbild, Aktionen, Leistung und Bedienung geprüft wurden.
Eine Video-Bubble kann eine Squarespace-Website persönlicher machen, ohne die visuelle Struktur zu zerstören.
Prüfe dennoch jedes Template und jede Mobilansicht, da die Position variieren kann.
Asynchrones Laden bedeutet nicht automatisch, dass die Leistung unverändert bleibt. Miss die veröffentlichte Seite vor und nach der Installation.
Barrierefreiheit
Berücksichtige reduzierte Bewegung, Untertitel und die Regeln des Browsers für automatische Wiedergabe. Schließen-Schaltfläche, Wiedergabe und Fokus müssen per Tastatur funktionieren.
Nutze auch die Richtlinien des W3C zur Barrierefreiheit wenn du Tastaturbedienung, Fokus, Screenreader, Kontrast und Alternativen zum Video prüfst.
Teste in Safari unter iOS und Chrome unter Android, da Template und Bildschirmbreite die Position der Bubble verändern können.
Häufig gestellte Fragen
Was kostet CompleteGreet für die Website eines kleinen Unternehmens?
Preis, Besuchergrenze, Anzahl der Bubbles und enthaltene Funktionen richten sich nach dem aktuellen Tarif. Prüfe Preisseite und Konto, bevor du die Optionen vergleichst.
Welche Plattformen funktionieren mit CompleteGreet?
CompleteGreet kann auf unterstützten Plattformen wie Shopify, WordPress, Wix, Squarespace, Webflow und WooCommerce sowie auf Websites eingesetzt werden, die den benötigten Installationscode zulassen. Prüfe die aktuelle Dokumentation für jede Plattform.
Wie lange dauert die Installation von CompleteGreet in einem Shopify-Shop?
Der Zeitaufwand hängt von Video, Erscheinungsbild, Aktionen und Tests ab. Shopify kann eine eigene App oder eine andere Installationsmethode als Squarespace nutzen. Folge daher der aktuellen Anleitung.
Was passiert, wenn die Website mehr Besucher erhält, als der Tarif erlaubt?
Zählweise und Umgang mit zusätzlichem Traffic richten sich nach dem aktuellen Tarif und den Bedingungen. Prüfe vor der Auswahl, was nahe und oberhalb der Grenze passiert.
Eignet sich CompleteGreet für Kundenfeedback oder nur für Begrüßungen?
CompleteGreet eignet sich für Videobegrüßungen, einfache Formulare und klare Aktionen. Eine eigene Umfrageplattform kann besser passen, wenn du lange Formulare mit vielen Verzweigungen benötigst.
Berechnet CompleteGreet bei einem Traffic-Anstieg zusätzliche Kosten?
Die Tarife haben Grenzen für eindeutige Besucher. Prüfe vor einer Kampagne oder saisonalen Spitze die aktuellen Bedingungen und den Umgang mit Tarifwechseln oder zusätzlichem Traffic.
