Så visar eller döljer du startprogrammet på specifika sidor

Du kommer att lära dig

Så här döljer du launchern (den flytande knappen som öppnar Webbchatt eller Klaviyo Customer Hub) på vissa sidor på din webbplats, eller visar den bara på vissa sidor. Du lägger till en kort CSS-kodsnutt i webbplatsens tema på de sidor du väljer.

Detta fungerar oavsett om du använder Webbchatt på egen hand eller som en del av Klaviyo Customer Hub, och oavsett vilken skärm din launcher öppnar till (chatt, Favoriter eller För dig).

Innan du börjar

Du behöver:

• Webbchatt eller Klaviyo Customer Hub live på din webbplats
• Åtkomst för att redigera din webbplats temakod
• Behörighet att redigera designinställningarna för Klaviyo Customer Hub eller Webbchatt i Klaviyo, om du använder redigeraren för anpassad CSS för mobilregeln nedan

Klaviyo har för närvarande ingen inställning som styr vilka sidor startprogrammet visas på, så detta görs med CSS.

Utdraget

Den här CSS-koden döljer startprogrammet:

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

.kl-hub-launcher-container är wrappern som placerar launchern och .kl-hub-launcher är själva knappen. Klaviyo's stilar läses in efter ditt temas, så behåll !important annars kommer launchern att dyka upp igen.

Dölj startprogrammet på specifika sidor (Shopify)

1. Öppna ditt live-tema i Shopifys kodredigerare.
2. Öppna layout/theme.liquid.
3. Klistra in koden nedan precis ovanför den avslutande </head> -etiketten och ersätt mallnamnen med de sidor där du vill dölja startprogrammet.
4. Klicka på Spara.

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

Vanliga mallnamn:

• index – din startsida
• product – produktsidor
• collection – samlingssidor
• cart – varukorgssidan
• page – standardinnehållssidor, som Om eller Kontakt
• blog och article – din blogg och dina blogginlägg
• search – sökresultat

Shopifys kassasidor använder inte ditt tema, så du kan inte rikta in dem på det här sättet.

Rikta in dig på en enskild sida efter dess URL

Om du vill rikta in dig på en specifik sida i stället för alla sidor av en viss typ kan du kontrollera sidans sökväg i stället för dess mallnamn:

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

Visa startprogrammet endast på specifika sidor (Shopify)

Följ samma steg, men använd unless i stället för if. Detta döljer startprogrammet överallt förutom på de sidor du listar. I det här exemplet visas startprogrammet bara på din startsida och dina produktsidor:

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

Dölj bara startprogrammet på de sidor där det inte ska visas. Dölj det inte överallt och försök sedan tvinga fram det på vissa sidor; åsidosättningen kan hamna i konflikt med Klaviyos stilar och visa startprogrammet felaktigt.

Andra e-handelsplattformar

Samma metod fungerar på alla webbplatser: lägg till kodsnutten i en style-etikett bara på de sidor där launchern ska döljas. Beroende på din plattform kan du göra detta i en sidspecifik mall, ett anpassat kodfält på sidnivå eller i din tag manager.

Om din plattform lägger till en sidspecifik klass i body -etiketten kan du i stället begränsa kodsnutten till den klassen. Ersätt page-cart med den klass som din plattform använder:

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

Dölj startprogrammet på mobila enheter

Att dölja launchern baserat på skärmstorlek beror inte på sidan, så den här CSS-koden kan ligga i dina designinställningar för Klaviyo Customer Hub eller fristående Webbchatt. Den döljer launchern i webbläsarfönster som är 767 pixlar breda eller smalare. Justera bredden så att den matchar din temamalls mobila brytpunkt:

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

Om du använder Klaviyo Customer Hub

1. Gå till Klaviyo Customer Hub > Design och klicka på Redigera din Hub.
2. Välj Redigera stil i det vänstra sidofältet. Under Anpassad CSS klickar du på plusikonen om redigeraren är stängd och lägger sedan till CSS:en ovan i eventuell befintlig CSS. Klistra in endast CSS:en, utan <style> -etiketter.
3. Klicka på Spara. Om ett synlighetstest körs öppnas en varning när du sparar. Välj Avsluta testet och publicera först när du är redo att avsluta testet och tillämpa dina ändringar.

Om du använder fristående Webbchatt

1. Gå till Inställningar > Webbchatt > Design.
2. Scrolla till avsnittet Anpassad och klicka på Lägg till anpassad CSS, eller redigera CSS:en som redan finns där. Lägg till CSS:en ovan utan <style> -etiketter.
3. Klicka på Spara.

Vad det inte innebär att dölja startprogrammet

• Det stänger inte av Webbchatt eller Klaviyo Customer Hub. Shoppare kan fortfarande öppna dem från länkar till #k-hub (som en Favoriter-länk i ditt sidhuvud), FAQ-block på produktsidor och inbäddade block. Ta bort eller dölj dessa separat om du inte vill ha dem på sidan.
• Det påverkar inte andra kanaler. Customer Agent svarar fortfarande via e-post, sms och WhatsApp.
• Den styr inte vem som kan använda Webbchatt. Stäng av Webbchatt genom att gå till Inställningar > Webbchatt > Allmänt. Om du använder Klaviyo Customer Hub kan du också ange Inloggningsstatus till Inloggade kunder för att kräva inloggning innan du chattar. Detta döljer inte startprogrammet för utloggade kunder. Klicka på Spara.

Testa dina ändringar

Testa som en kund som uppfyller dina synlighetsinställningar för launchern. Öppna ett privat webbläsarfönster och logga in om det behövs. Öppna en sida där launchern ska vara dold och bekräfta att den inte visas. Öppna sedan en sida där den ska visas och bekräfta att den fortfarande finns där. För mobilregeln ska du kontrollera skärmbredder både under och över din valda brytpunkt. Om launchern fortfarande visas där den inte ska, kontrollera att mallnamnet eller sökvägen matchar exakt och att kodsnutten innehåller !important.

Vanliga frågor

Finns det en inställning i Klaviyo för att välja vilka sidor som visar launchern?
Inte i nuläget. Använd CSS-metoden i den här artikeln.

Kommer det här att sluta fungera när Klaviyo uppdaterar webbchatten?
Klasser som börjar med kl-hub- är stabila vid vanliga uppdateringar, så kodsnutten ska fortsätta fungera. Testa igen efter större omdesign.

Kan jag dölja startprogrammet för vissa shoppare i stället för vissa sidor?
Ja. I Inställningar > Webbchatt > Allmänt använder du widget synlighet för att välja Alla besökare eller Endast inloggade besökare och klickar sedan på Spara. Customer Agent:s inriktningsinställningar väljer vilka segment som agenten svarar på; de döljer inte startprogrammet.

Ytterligare resurser