Hoe je je Klaviyo Customer Hub kunt stylen

Wat je leert

Leer meer over de ontwerpopties voor het stylen van je Klaviyo Customer Hub-lade en hoe je deze kunt aanpassen aan je merk. Omdat de Klaviyo Customer Hub interface ingebakken zit in de klantervaring, is het de beste gewoonte om deze zo te stylen dat hij lijkt op een uitbreiding van je website.

Voordat je van start gaat

In deze handleiding wordt uitgelegd hoe je de stijl van je Klaviyo Customer Hub interface kunt aanpassen. Controleer voordat u verder gaatof de Klaviyo Customer Hub functies zijn ingeschakeld.

Meer informatie over Klaviyo Customer Hub.

Ontwerpopties voor de Customer Hub

De Klaviyo Customer Hub-lade heeft meerdere aanpasbare tabbladen:

• Voor jou
• Bestellingen
• Profiel
• Chat (alleen zichtbaar als webchat is ingeschakeld)

Je hebt verschillende opties om het ontwerp van elk van deze tabbladen aan te passen, waaronder het bewerken van tekst, kleuren, lettertypen en meer. Selectie van stijlaanpassingen worden doorgevoerd op elk tabblad in de Klaviyo Customer Hub lade om een consistente, merkeigen ervaring voor uw websitebezoekers te garanderen. 

Terwijl je de ontwerpinstellingen voor je Klaviyo Customer Hub bewerkt in Klaviyo, gebruik je de knop Bekijk live om de wijzigingen in de hub-interface op je website te zien. Merk op dat als je Klaviyo Customer Hub live is, opgeslagen wijzigingen worden gepubliceerd op je site. 

Pas een primaire call-to-action aan voor elk tabblad.

Wanneer een shopper zich aanmeldt bij zijn klant account, wordt op Klaviyo standaard "Welkom, voornaam" weergegeven. als hoofdkop op het Voor jou tabblad van de Klaviyo Customer Hub lade. Deze tekst kan niet worden bewerkt.

Voor niet-geauthenticeerde shoppers kun je echter je eigen call-to-action kop schrijven die boven de knop "Aanmelden" wordt weergegeven voordat ze inloggen. Dit kan handig zijn om niet-geauthenticeerde bezoekers te stimuleren om zich aan te melden en te betrekken bij je Klaviyo Customer Hub interface.

In het onderstaande voorbeeld luidt de belangrijkste call-to-action "Verdien beloningen, volg bestellingen en bewaar je winkelgeschiedenis".

Naar update de belangrijkste call-to-action voor je Klaviyo Customer Hub interface:

1. Open de Klaviyo Customer Hub tab in Klaviyo's linker navigatie.
2. Klik op Instellingen.
3. Selecteer het tabblad Inhoud.
4. Pas onder Welkomstberichten een call-to-action aan die wordt weergegeven boven de knop "sign in" voor niet-geauthenticeerde shoppers. Je kunt dit doen voor elk tabblad van de Klaviyo Customer Hub lade:
   • Voor jou
   • Bestellingen
   • profiel
     
5. Klik op Opslaan. 

Ontwerp uw Customer Hub

Voor ontwerpopties om je Klaviyo Customer Hub interface aan te passen:

1. Navigeer naar Klaviyo Customer Hub in Klaviyo's linker navigatie.
2. Selecteer Ontwerp.
3. Open het menu Stijl. 
   
4. In het menu Stijl kunt u de volgende kleur- en stijlinstellingen aanpassen en een voorbeeld bekijken van hoe deze aanpassingen eruit zullen zien in het canvas van de Customer Hub-interface:
   • Lettertypen
     • Lettertype koptekst
       Gebruikt voor kopteksten op elk tabblad van Klaviyo Customer Hub. Kies Erven van site om automatisch het lettertype te kopiëren dat in andere koppen op je site wordt gebruikt.
       

       Je kunt ook een aangepast lettertype toevoegen door Configureer aangepast lettertype te selecteren en vervolgens de naam en grootte in te voeren. Dit aangepaste lettertype moet al bestaan in de sectie Lettertypen van je account. 

     • Kleur koptekst
       Wordt gebruikt voor de koptekst op elk tabblad van Klaviyo Customer Hub.
     • Paragraaf lettertype
       Gebruikt voor tekst binnen elke sectie, inhoudsblok en knop. Kies Erven van site om automatisch het lettertype te kopiëren dat in andere alinea's op je site wordt gebruikt.
     • Alinea kleur
       Wordt gebruikt voor alle knoppen, inhoudsblokken en sectieteksten in Klaviyo Customer Hub.
   • Knoppen
     • Knoppenkleur
       De achtergrondkleur voor alle knoppen in Klaviyo Customer Hub.
     • Knop tekstkleur
       De kleur van de tekst op alle knoppen in Klaviyo Customer Hub. 
     • 
       Dehoofdletteroptiesvoor tekst op alle knoppen in Klaviyo Customer Hub.
   • Stijl
     • Vorm
       De vorm van de randen van inhoudsblokken, knoppen en secties in Customer Hub.
       
     • Achtergrondkleur
       De basiskleur van Klaviyo Customer Hub onder alle tekst, inhoudsblok en extensies.
   • Indeling
     • Positie op bureaublad
       Waar de Klaviyo Customer Hub lade uitschuift (links of rechts op viewport). Als je merk een winkelwagenlade gebruikt, overweeg dan om deze links uitgelijnd te positioneren zodat deze niet overlapt met Klaviyo Customer Hub.
   • Aangepaste CSS-
     U kunt optioneel geavanceerde opmaak toepassen met aangepaste CSS. Raadpleeg het gedeelte Aangepaste CSS hieronder voor meer informatie.
5. Klik op Publiceren om uw wijzigingen live te zetten.

De widget Klantenhub aanpassen

Naast het ontwerpen van Customer Hub zelf, kunt u ook de hub-widget aanpassen. Dit is een klein, zwevend element op uw website waarop bezoekers kunnen klikken om snel de Customer Hub-interface te openen. De hub-widget werkt ongeveer als een formulier-teaser en volgt bezoekers tijdens hun hele bezoek aan uw website. 

Om de hub-widget aan te passen:

1. Selecteer Klantenservice in het navigatiemenu aan de linkerkant van Klaviyo.
2. Selecteer Ontwerp.
3. Open het widgetmenu.
   
4. Je kunt de hub launcher widget's aanpassen:
   • Zichtbaarheids
     Welke bezoekers van de site kunnen de widget zien en erop klikken?
   • Open de instellingen
     Welke pagina wordt geopend in Customer Hub? 
   • Vorm
     De vorm van de randen van de widget
   • Kleur
     De kleur van de widget
   • Positie-
     Waar op een webpagina de widget zweeft
   • Afstand
     Afstand vanaf de linker-/rechter- en boven-/onderhoek, afhankelijk van de locatie van de widget.
5. Klik op Publiceren om uw wijzigingen live te bekijken.

Aangepaste CSS voor Klaviyo Customer Hub

Als de ontwerpopties van Klaviyo Customer Hub niet voldoen aan je behoeften op branding, kun je geavanceerde styling toepassen met Custom CSS.

Hoewel Klaviyo Customer Hub CSS-resets gebruikt om botsingen met de CSS van uw site te voorkomen, kan het nodig zijn om aangepaste CSS toe te voegen om edge cases aan te pakken of unieke styling toe te passen, zoals zwevende lade of aangepaste randradiuswaarden.

Aangepaste CSS toepassen 

Voeg alle aangepaste CSS direct toe aan de sectie Aangepaste CSS in de ontwerpinstellingen van je Klaviyo Customer Hub en zorg ervoor dat je de wijzigingen opslaat.

Alle basiselementen in de Klaviyo Customer Hub hebben klassenamen die voorafgegaan worden door kl-hub-:

• Alle tekstelementen hebben de klasse kl-hub-tekst, terwijl kopteksten de klasse kl-hub-kopteksthebben.
• Knoppen hebben de klasse kl-hub-button en bevatten ook hun variatie (bijv. kl-hub-button-primary, kl-hub-button-secondary, enz.)
• De Klaviyo Customer Hub-lade zelf heeft de klasse kl-hub-drawer
• Tekstinvoer heeft de klasse kl-hub-invoer
• Alle inhoudsblokken hebben de klasse kl-hub-content-blok, en bevatten ook hun blok Interne naam (bijvoorbeeld, kl-hub-content-blok-beloningsprogramma voor een inhoudsblok met de naam "Beloningsprogramma").

Dit is geen volledige lijst; je kunt meer vinden door de Klaviyo Customer Hub te inspecteren met de debugger van je browser. Als een element een class heeft die begint met kl-hub-, dan is het veilig om te gebruiken voor aangepaste CSS.

CSS voorbeeld

Als je alle knoppen en koppen in de Klaviyo Customer Hub hoofdletters wilt maken, kun je de volgende aangepaste CSS schrijven:

.kl-hub-knop, .kl-hub-koptekst {

    text-transform: uppercase;
}

Extra hulpbronnen

• Aan de slag met Klaviyo Customer Hub
• Aan de slag met webchat
• Hoe maak je een inhoudsblok voor Klaviyo Customer Hub?