Hoe je aangepaste CSS gebruikt om webchat vorm te geven

Wat je leert

Zo gebruik je aangepaste CSS om het uiterlijk van de Klaviyo-webchat te wijzigen — de launcher, het chatvenster, berichtballonnen en de Composer voor berichten. Je leert welke thema-variabelen en class hooks je moet gebruiken en hoe je selectors kunt vermijden die kunnen veranderen wanneer Klaviyo de interface bijwerkt.

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.

Als je de launcher op bepaalde pagina's van je site wilt verbergen of alleen op bepaalde pagina's wilt weergeven, bekijk dan De launcher op specifieke pagina's weergeven of verbergen.

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 en klik vervolgens op Je hub bewerken.
2. Selecteer Stijl in de linkerzijbalk en scrol vervolgens naar Aangepaste CSS.
3. Klik op de knop + naast Aangepaste CSS en voer je CSS in, of bewerk de CSS die er al staat.
4. Klik op Opslaan. Als er een zichtbaarheidstest loopt, wordt die vroegtijdig beëindigd als je opslaat. Klik alleen op Test beëindigen en publiceren als je klaar bent om de test te beëindigen.

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 en voer je CSS in, of bewerk de CSS die er al staat.
4. Klik op Opslaan.

Controleer na het opslaan de chat op je website op desktop- en mobiele breedtes. Open en sluit de launcher, stuur een bericht en controleer de status van de antwoord- en verzendknoppen. Als je een wijziging ongedaan wilt maken, verwijder je de betreffende CSS en sla je opnieuw op.

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:

• Latere regels kunnen eerdere regels overschrijven. Je CSS laadt na de stijlen van Klaviyo, maar selector specificity, inline styles en animaties kunnen nog steeds voorrang krijgen. Gebruik !important alleen wanneer nodig.
• 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

Begin met het overschrijven van de themavariabelen van Klaviyo in een :root-blok. Hiermee kun je gedeelde kleuren en vormen aanpassen zonder je op individuele elementen te richten. Deze wijzigingen kunnen ook invloed hebben op andere onderdelen van Klaviyo Customer Hub. De tabellen hieronder tonen de standaardwaarden van de basisstylesheet; je ontwerpinstellingen kunnen deze waarden overschrijven.

: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:not(:disabled) {
  --atlas-button-primary: #2f4f4f;
}

Gedeelde elementen

Agent- en shopperberichten anders opmaken

Tekstberichten tussen een mens en een shopper delen de .kl-hub-message class. Klantenserviceagent en geautomatiseerde antwoorden gebruiken die ook. Er is geen stabiele class die slechts één type afzender selecteert.

Gebruik themavariabelen om de bubbles van menselijke agents en shoppers verschillend te stylen. Klantenserviceagent en geautomatiseerde antwoorden hebben geen bubble en gebruiken --atlas-text-primary voor hun tekstkleur. Scope de variabelen naar .kl-hub-message om deze wijzigingen binnen berichtcontainers te houden:

.kl-hub-message {
  /* Human-agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

  /* Customer Agent and automated replies */
  --atlas-text-primary: #2b2b2b;

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

Voorbeelden

Maak het chatvenster, de berichtballonnen, knoppen en invoervelden vierkant

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius-normal: 0;
  --atlas-button-border-radius-small: 0;
  --atlas-button-border-radius-tiny: 0;
  --atlas-input-border-radius-normal: 0;
  --atlas-input-border-radius-small: 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

De launcher gebruikt specifiekere CSS-regels en grootte-animaties, dus dit voorbeeld gebruikt !important. Door de breedte en hoogte vast te zetten, voorkom je ook dat hij uitzet voor meldingen of Add to Cart-content. Controleer die staten op afgeknipte content voordat je deze overschrijvingen van de grootte behoudt.

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

Maak het chatvenster op desktop breder

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

Aangepaste CSS oplossen

In standalone webchat controleert Klaviyo je CSS voordat het wordt opgeslagen. Als de controle mislukt, zie je Ongeldige CSS. Controleer je syntaxis. en je wijzigingen worden niet opgeslagen.

Deze controle wijst een niet-lege stylesheet af wanneer de browser geen enkele regel kan parseren. Je kunt het veld leegmaken en opslaan om je aangepaste CSS te verwijderen. Als je de fout ziet, controleer dan op:

• 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