So blendest du den Launcher auf bestimmten Seiten ein oder aus

Übersicht

So blendest du den Launcher (die schwebende Schaltfläche, mit der du Web-Chat oder Klaviyo Customer Hub öffnest) auf bestimmten Seiten deiner Website aus oder zeigst ihn nur auf bestimmten Seiten an. Du fügst auf den von dir ausgewählten Seiten ein kurzes CSS-Snippet zu deinem Website-Theme hinzu.

Das funktioniert, egal ob du den Web-Chat allein oder als Teil des Klaviyo Customer Hub verwendest und egal, zu welchem Bildschirm dein Launcher öffnet (Chat, Favoriten oder Für dich).

Bevor du anfängst

Du brauchst:

• Web-Chat oder Klaviyo Customer Hub live auf deiner Website
• Zugriff, um den Code des Themes deiner Website zu bearbeiten
• Berechtigung zum Bearbeiten der Design-Einstellungen für das Klaviyo Customer Hub oder den Web-Chat in Klaviyo, wenn du den benutzerdefinierten CSS-Editor für die unten stehende Mobile-Regel verwendest

Klaviyo hat derzeit keine Einstellung, die steuert, auf welchen Seiten der Launcher angezeigt wird, daher wird das mit CSS umgesetzt.

Das Snippet

Dieses CSS blendet den Launcher aus:

.kl-hub-launcher-container,
.kl-hub-launcher {
  display: none !important;
}

.kl-hub-launcher-container ist der Wrapper, der den Launcher positioniert, und .kl-hub-launcher ist die Schaltfläche selbst. Klaviyo-Styles werden nach den Styles deines Themes geladen, also behalte !important bei, sonst wird der Launcher wieder angezeigt.

Launcher auf bestimmten Seiten ausblenden (Shopify)

1. Öffne dein Live-Theme im Code-Editor von Shopify.
2. layout/theme.liquid öffnen.
3. Füge den Code unten direkt über dem schließenden </head> -Tag ein, und ersetze die Vorlagennamen durch die Seiten, auf denen du den Launcher ausblenden möchtest.
4. Klicke auf Speichern.

{% if template.name == 'cart' or template.name == 'collection' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endif %}

Häufige Vorlagennamen:

• index – deine Startseite
• product – Produktseiten
• collection – Kollektionsseiten
• cart – die Warenkorbseite
• page – Standardinhaltsseiten wie „Über uns“ oder „Kontakt“
• blog und article – dein Blog und deine Blogposts
• search – Suchergebnisse

Shopify-Checkout-Seiten verwenden nicht dein Theme, daher kannst du sie auf diese Weise nicht ansprechen.

Ziele auf eine einzelne Seite anhand ihrer URL ab

Um eine bestimmte Seite statt jeder Seite eines Typs anzusprechen, prüfe den Pfad der Seite statt ihren Vorlagennamen:

{% if request.path == '/pages/contact' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endif %}

Den Launcher nur auf bestimmten Seiten anzeigen (Shopify)

Befolge dieselben Schritte, aber verwende unless statt if. Damit wird der Launcher überall ausgeblendet, außer auf den Seiten, die du auflistest. In diesem Beispiel wird der Launcher nur auf deiner Startseite und auf deinen Produktseiten angezeigt:

{% unless template.name == 'index' or template.name == 'product' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endunless %}

Den Launcher nur auf den Seiten ausblenden, auf denen er nicht angezeigt werden soll. Blende ihn nicht überall aus und versuche dann, ihn für bestimmte Seiten wieder einzuschalten; die Überschreibung kann mit den Styles von Klaviyo in Konflikt geraten und den Launcher falsch anzeigen.

Andere E-Commerce-Plattformen

Der gleiche Ansatz funktioniert auf jeder Website: Füge das Snippet innerhalb eines Style-Tags nur auf den Seiten hinzu, auf denen der Launcher ausgeblendet werden soll. Je nach deiner Plattform kannst du das in einer seitenspezifischen Vorlage, in einem benutzerdefinierten Codefeld auf Seitenebene oder in deinem Tag-Manager tun.

Wenn deine Plattform dem body -Tag eine seitenspezifische Klasse hinzufügt, kannst du das Snippet stattdessen auf diese Klasse begrenzen. Ersetze page-cart durch die Klasse, die deine Plattform verwendet:

body.page-cart .kl-hub-launcher-container,
body.page-cart .kl-hub-launcher {
  display: none !important;
}

Launcher auf Mobilgeräten ausblenden

Das Ausblenden des Launchers nach Bildschirmgröße hängt nicht von der Seite ab. Daher kannst du dieses CSS in den Designeinstellungen deines Klaviyo Customer Hub oder deines eigenständigen Web-Chats einfügen. Es blendet den Launcher in Browserfenstern mit einer Breite von 767 Pixeln oder weniger aus. Passe die Breite an, damit sie zum mobilen Breakpoint deines Themes passt:

@media (max-width: 767px) {
  .kl-hub-launcher-container,
  .kl-hub-launcher {
    display: none !important;
  }
}

Wenn du den Klaviyo Customer Hub verwendest

1. Navigiere zu Klaviyo Customer Hub > Design und klicke auf Bearbeite deinen Hub.
2. Wähle in der linken Seitenleiste Stil bearbeiten aus. Klicke unter Benutzerdefiniertes CSS auf das Plus-Symbol, wenn der Editor geschlossen ist, und füge dann das oben stehende CSS zu vorhandenem CSS hinzu. Füge nur das CSS ein, ohne <style> -Tags.
3. Klicke auf Speichern. Wenn ein Sichtbarkeitstest läuft, wird beim Speichern eine Warnung angezeigt. Wähle Test beenden und veröffentlichen erst aus, wenn du bereit bist, den Test zu beenden und deine Änderungen anzuwenden.

Wenn du eigenständigen Web-Chat verwendest

1. Navigiere zu Einstellungen > Web-Chat > Design.
2. Scrolle zum Abschnitt Benutzerdefiniert und klicke auf Benutzerdefiniertes CSS hinzufügen, oder bearbeite das CSS, das sich bereits dort befindet. Füge das CSS oben ohne <style> Tags hinzu.
3. Klicke auf Speichern.

Was das Ausblenden des Launchers nicht bewirkt

• Dadurch werden Web-Chat oder Klaviyo Customer Hub nicht deaktiviert. Kund*innen können sie weiterhin über Links zu #k-hub (z. B. über einen Favoriten-Link in deiner Kopfzeile), FAQ-Blöcke auf Produktseiten und eingebettete Blöcke öffnen. Entferne oder blende diese separat aus, wenn du sie nicht auf der Seite haben möchtest.
• Das wirkt sich nicht auf andere Kanäle aus. Customer Agent antwortet weiterhin per E-Mail, SMS und WhatsApp.
• Es wird nicht gesteuert, wer den Web-Chat nutzen kann. Um den Web-Chat zu deaktivieren, Einstellungen > Web-Chat > Allgemein verwenden. Wenn Klaviyo Customer Hub verwendet wird, kann Anmeldestatus auch auf Angemeldete Shopper*innen gesetzt werden, um eine Anmeldung vor dem Chatten zu erzwingen. Dadurch wird der Launcher für abgemeldete Kund*innen nicht ausgeblendet. Klicke auf Speichern.

Teste deine Änderungen

Teste als Shopper*in, der*die deinen Einstellungen zur Launcher-Sichtbarkeit entspricht. Öffne ein privates Browserfenster und melde dich an, falls erforderlich. Öffne eine Seite, auf der der Launcher ausgeblendet sein sollte, und bestätige, dass er nicht angezeigt wird. Öffne dann eine Seite, auf der es angezeigt werden soll, und bestätige, dass es noch da ist. Überprüfe für die mobile Regel Bildschirmbreiten sowohl unterhalb als auch oberhalb deines gewählten Breakpoints. Wenn der Launcher immer noch dort angezeigt wird, wo er nicht angezeigt werden sollte, prüfe, dass der Name oder Pfad der Vorlage exakt übereinstimmt und dass das Snippet !important enthält.

FAQ

Gibt es in Klaviyo eine Einstellung, mit der du auswählen kannst, auf welchen Seiten der Launcher angezeigt wird?
Derzeit nicht. Verwende den CSS-Ansatz in diesem Artikel.

Funktioniert das nicht mehr, wenn Klaviyo den Web-Chat aktualisiert?
Klassen, die mit kl-hub- beginnen, sind bei normalen Updates stabil, daher sollte das Snippet weiterhin funktionieren. Teste nach größeren Redesigns erneut.

Kann ich den Launcher für bestimmte Shopper*innen statt für bestimmte Seiten ausblenden?
Ja. Unter Einstellungen > Web-Chat > Allgemein verwendest du Widget-Sichtbarkeit, um Alle Käufer*innen oder Nur angemeldete Käufer*innen auszuwählen, und klickst dann auf Speichern. Die Targeting-Einstellungen des Customer Agent legen fest, auf welche Segmente der Agent reagiert; sie blenden den Launcher nicht aus.

Weitere Ressourcen