Så använder du anpassad CSS för att utforma Webbchatt

Du kommer att lära dig

Så använder du anpassad CSS för att ändra utseendet på Klaviyo Webbchatt – startikonen, chattfönstret, meddelandebubblorna och Composer för meddelanden. Du får veta vilka temavariabler och klassnamn som är säkra att använda och vilka som kommer att gå sönder när Klaviyo släpper en uppdatering.

Den här artikeln gäller oavsett om du använder Webbchatt separat eller som en del av Klaviyo Customer Hub. Chattgränssnittet är detsamma i båda fallen, så samma CSS fungerar för båda.

Innan du börjar

Du behöver:

• En roll som Ägare, Administratör eller Chef
• Bekantskap med CSS-väljare och anpassade egenskaper (CSS-variabler)

Innan du skriver anpassad CSS bör du kontrollera om de inbyggda designinställningarna redan gör det du behöver. Färger, typsnitt, knappform och position för launcher går alla att konfigurera utan kod, och de inställningarna överlever Klaviyo-uppdateringar. Ta till anpassad CSS bara för det som designinställningarna inte täcker.

Var du lägger till din anpassade CSS

Var du hittar redigeraren för anpassad CSS beror på din konfiguration.

Om du använder Klaviyo Customer Hub

1. Gå till Klaviyo Customer Hub > Design.
2. Rulla ned till avsnittet Anpassat längst ned i stilinställningarna.
3. Klicka på Lägg till anpassad CSS eller redigera CSS-koden som redan finns där.
4. Klicka på Spara.

Om du använder fristående Webbchatt

1. Gå till Inställningar > Webbchatt > Design.
2. Rulla ned till avsnittet Anpassat längst ned i stilinställningarna.
3. Klicka på Lägg till anpassad CSS eller redigera CSS-koden som redan finns där.
4. Klicka på Spara.

Hur anpassad CSS tillämpas

Din CSS läggs till i en style-etikett i din webbshop, efter Klaviyos egna stilar. Två saker följer av detta:

• Din CSS vinner. Eftersom den läses in sist åsidosätter dina regler Klaviyo's standardinställningar utan att du i de flesta fall behöver !important.
• Din CSS är inte avgränsad till chatten. Den gäller för hela sidan. Avgränsa alltid dina selektorer till ett chattelement i stället för att skriva fristående regler som button { … }, vilket skulle påverka hela din webbshop.

Börja med temavariabler

Det mest tillförlitliga sättet att anpassa stilen i Webbchatt är att åsidosätta Klaviyos temavariabler i ett :root-block. De är stabila, de kaskaderar korrekt genom hela gränssnittet och risken är mycket mindre att de går sönder än om du riktar in dig på enskilda element.

:root {
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-message-border-radius: 4px;
}

Variabler för chattmeddelanden

Shopper-meddelanden (utgående) återanvänder medvetet dina varumärkesfärger: bubblan använder --atlas-button-primary och texten använder --atlas-text-primary-inverse, som du båda ställer in i designinställningarna.

Färg- och ytvariabler

Variabler för form och avstånd

Typografivariabler

Flera av dessa är redan skrivna utifrån dina designinställningar. Att ställa in typsnitt och färger i gränssnittet för designinställningar är att föredra – använd variabler för värden som gränssnittet inte visar.

Rikta in dig på element med klasskrokar

När en temavariabel inte räcker kan du rikta in dig på element direkt. Klaviyo garanterar klassnamnen nedan.

Chattelement

Chattfönstret har också en klass som namnger den aktuella skärmen – .kl-hub-route-chat för själva chatten. I fristående Webbchatt är detta alltid .kl-hub-route-chat. I Klaviyo Customer Hub ändras den när kunden navigerar (.kl-hub-route-home, .kl-hub-route-orders, och så vidare), vilket gör att du kan avgränsa CSS till en skärm.

Skicka-knappen har ingen dedikerad klass. Rikta in den via Composer:

.kl-hub-chat-input-wrapper .kl-hub-button-primary {
  background: #2f4f4f;
}

Delade element

Styla agent- och kundmeddelanden olika

Det här är den vanligaste förfrågan och den kräver ett specifikt tillvägagångssätt. Agent- och kundbubblor delar den gemensamma klassen .kl-hub-message — det finns ingen stabil klass som skiljer dem åt, så du kan inte välja en direkt.

Använd i stället temavariablerna, som redan hanterar de två olika:

:root {
  /* Agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

  /* Shopper messages */
  --atlas-button-primary: #1f3a3d;
  --atlas-text-primary-inverse: #ffffff;
}

Exempel

Gör allt fyrkantigt

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius: 0;
  --atlas-input-border-radius-normal: 0;
}

Rubriker och knappar med VERSALER

.kl-hub-heading,
.kl-hub-button {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Gör startaren större med en anpassad skugga

.kl-hub-launcher {
  width: 72px !important;
  height: 72px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

Launchern ställer in flera egenskaper direkt på elementet, så launcherregler behöver !important för att få effekt. Det är det enda stället där det regelmässigt krävs.

Bredda chattfönstret på datorn

@media (min-width: 900px) {
  .kl-hub-drawer {
    width: 480px;
  }
}

Om din CSS inte sparas

När du sparar kontrollerar Klaviyo att din CSS kan tolkas. Om den inte kan det ser du Ogiltig CSS. Kontrollera din syntax. och dina ändringar sparas inte.

En stilmall avvisas bara direkt när den inte genererar några regler alls, vilket oftast betyder att det du klistrade in inte är CSS. Vanliga orsaker:

• Att klistra in oformaterad text, HTML eller en style-etikett i stället för CSS-regler
• Att klistra in en del av en deklaration i stället för en fullständig regel
• En stilmall där varje regel har ett syntaxfel

Det anpassad CSS inte kan göra

• Ändra text. Anpassad CSS kan inte redigera formuleringar. Använd inställningarna för design och innehåll för det.
• Ordna om eller flytta element utöver vad CSS-layouten tillåter. Chatten har en struktur som inte går att anpassa.
• Skapa separata bubblor för målagent och kund baserat på klass. Använd temavariabler, som beskrivs ovan.
• Överlev omdesign automatiskt. Class hooks och variabler är stabila vid vanliga uppdateringar, men en större omdesign kan kräva att du ser över din CSS. Testa igen efter större releaser.

Ytterligare resurser