Hoe je aangepaste CSS gebruikt om webchat vorm te geven

Wat je leert

Hoe je aangepaste CSS gebruikt om het uiterlijk van Klaviyo-webchat te wijzigen: de launcher, het chatvenster, de berichtbubbels en de Composer voor berichten. Je leert welke themavariabelen en classnamen je veilig kunt targeten, en welke kapotgaan wanneer Klaviyo een update uitrolt.

Dit artikel is van toepassing, of je nu webchat op zichzelf gebruikt of als onderdeel van Klaviyo Customer Hub. De chatinterface is in beide gevallen hetzelfde, dus dezelfde CSS werkt voor allebei.

Voordat je van start gaat

Je hebt nodig:

• Een rol als eigenaar, Beheerder of manager
• Bekendheid met CSS-selectors en aangepaste eigenschappen (CSS-variabelen)

Voordat je aangepaste CSS schrijft, kijk eerst of de ingebouwde ontwerpinstellingen al doen wat je nodig hebt. Kleuren, lettertypen, knopvorm en de positie van de launcher zijn allemaal zonder code te configureren, en die instellingen blijven behouden na Klaviyo-updates. Gebruik aangepaste CSS alleen voor wat de ontwerpinstellingen niet dekken.

Waar je je aangepaste CSS toevoegt

Waar je de editor voor aangepaste CSS vindt, hangt af van je configuratie.

Als je Klaviyo Customer Hub gebruikt

1. Navigeer naar Klaviyo Customer Hub > Ontwerp.
2. Scroll naar het gedeelte Aangepast onderaan de stijlinstellingen.
3. Klik op Aangepaste CSS toevoegen of bewerk de CSS die er al staat.
4. Klik op Opslaan.

Als je standalone webchat gebruikt

1. Navigeer naar Instellingen > Webchat > Design.
2. Scroll naar het gedeelte Aangepast onderaan de stijlinstellingen.
3. Klik op Aangepaste CSS toevoegen of bewerk de CSS die er al staat.
4. Klik op Opslaan.

Hoe aangepaste CSS wordt toegepast

Je CSS wordt toegevoegd aan een style tag op je storefront, na de eigen stijlen van Klaviyo. Hieruit volgen twee dingen:

• Jouw CSS wint. Omdat die als laatste laadt, overschrijven je regels in de meeste gevallen de standaardinstellingen van Klaviyo zonder dat je !important nodig hebt.
• Je CSS is niet beperkt tot de chat. Het is van toepassing op je hele pagina. Beperk je selectors altijd tot een chatelement in plaats van kale regels te schrijven zoals button { … }, die je hele storefront zouden beïnvloeden.

Begin met themavariabelen

De meest betrouwbare manier om webchat opnieuw vorm te geven, is door de thema-variabelen van Klaviyo in een :root-blok te overschrijven. Deze zijn stabiel, ze lopen correct door de hele interface heen en ze gaan veel minder snel stuk dan wanneer je je richt op individuele elementen.

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

Variabelen voor chatberichten

Shopper- (uitgaande) berichten hergebruiken bewust je merkkleuren: de bubbel gebruikt --atlas-button-primary en de tekst gebruikt --atlas-text-primary-inverse, die je allebei instelt in de ontwerpinstellingen.

Kleur- en oppervlaktevariabelen

Vorm- en afstandsvariabelen

Typografievariabelen

Een aantal hiervan is al ingevuld op basis van je ontwerpinstellingen. Lettertypen en kleuren instellen in de gebruikersinterface van de ontwerpinstellingen heeft de voorkeur — gebruik de variabelen voor waarden die de UI niet blootstelt.

Richt je op elementen met class-hooks

Als een themavariabele niet volstaat, richt je dan direct op elementen. Klaviyo garandeert de onderstaande class-namen.

Chatelementen

Het chatvenster bevat ook een class met de naam van het huidige scherm — .kl-hub-route-chat voor de chat zelf. In standalone webchat is dit altijd .kl-hub-route-chat. In Klaviyo Customer Hub verandert dit terwijl de shopper navigeert (.kl-hub-route-home, .kl-hub-route-orders, enzovoort), waardoor je CSS kunt afbakenen tot één scherm.

De verzendknop heeft geen specifieke class. Richt je erop via de Composer:

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

Gedeelde elementen

Agent- en shopperberichten anders opmaken

Dit is het meest voorkomende verzoek en hiervoor is een specifieke aanpak nodig. Bubbels van agents en shoppers delen dezelfde .kl-hub-message class — er is geen stabiele class die ze onderscheidt, dus je kunt er niet direct één selecteren.

Gebruik in plaats daarvan de themavariabelen, die de twee al verschillend behandelen:

: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;
}

Voorbeelden

Alles afronden

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

Hoofdletters voor koppen en knoppen

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

Maak de launcher groter met een aangepaste schaduw

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

De launcher stelt verschillende eigenschappen rechtstreeks in op het element, dus launcherregels hebben !important nodig om effect te hebben. Dit is de enige plek waar het doorgaans vereist is.

Maak het chatvenster op desktop breder

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

Als je CSS niet wil opslaan

Wanneer je opslaat, controleert Klaviyo of je CSS kan worden geparseerd. Als dat niet zo is, zie je Ongeldige CSS. Controleer je syntaxis. en je wijzigingen worden niet opgeslagen.

Een stylesheet wordt alleen volledig geweigerd wanneer het helemaal geen regels oplevert, wat meestal betekent dat wat je hebt geplakt geen CSS is. Veelvoorkomende oorzaken:

• Platte tekst, HTML of een style-tag plakken in plaats van CSS-regels
• Een deel van een declaration plakken in plaats van een volledige rule
• Een stylesheet waarin elke regel een syntaxfout heeft

Wat aangepaste CSS niet kan doen

• Tekst wijzigen. Aangepaste CSS kan de bewoording niet wijzigen. Gebruik daarvoor de instellingen voor ontwerp en content.
• Elementen opnieuw ordenen of verplaatsen buiten wat de CSS-layout toestaat. De structuur van de chat is niet aanpasbaar.
• Richt je afzonderlijk op agent- en shopperbubbels per class. Gebruik themavariabelen, zoals hierboven beschreven.
• Doorsta herontwerpen automatisch. Class-hooks en variabelen blijven stabiel bij normale updates, maar bij een ingrijpend herontwerp moet je je CSS mogelijk opnieuw bekijken. Test opnieuw na grote releases.

Extra hulpbronnen