Så här utformar du din Klaviyo Customer Hub

Du kommer att lära dig

Lär dig mer om designalternativ för att utforma din Klaviyo Customer Hub-låda och hur du kan utforma den så att den matchar ditt varumärke. Eftersom Klaviyo Customer Hub-gränssnittet är en del av kundupplevelsen är det bästa sättet att utforma det så att det visas som en förlängning av din webbplats.

Innan du börjar

Den här guiden förklarar hur du anpassar stilen på ditt Klaviyo Customer Hub-gränssnitt. Innan du fortsätter ska du se till att Klaviyo Customer Hub-funktionerna är aktiverade.

Läs mer om Klaviyo Customer Hub.

Designalternativ för kundcenter

Klaviyo Customer Hub-lådan har flera anpassningsbara flikar:

• För dig
• Beställningar
• Profil
• Chatt (endast synlig när Webbchatt är aktiverat)

Du har olika alternativ för att anpassa designen på var och en av dessa flikar, inklusive redigering av text, färger, teckensnitt och mer. Valet av stilanpassning gäller för varje flik i Klaviyo Customer Hub-lådan för att säkerställa en konsekvent och varumärkesanpassad upplevelse för dina webbplatsbesökare. 

När du redigerar designinställningarna för din Klaviyo Customer Hub på Klaviyo använder du knappen Visa live för att se de ändringar som gjorts i hubbgränssnittet på din webbplats. Observera att om din Klaviyo Customer Hub är live publiceras sparade ändringar på din webbplats. 

Anpassa en huvudsaklig uppmaning till handling för varje flik

Som standard, när en kund loggar in på sin kundkonto, visar Klaviyo "Välkommen, förnamn" som huvudrubrik på fliken För dig i Klaviyo Customer Hub-lådan. Denna text är inte redigerbar.

För oautentiserade kunder kan du dock skriva en egen uppmanande rubrik som visas ovanför "Logga in"-knappen innan de loggar in. Detta kan vara till hjälp för att stimulera oautentiserade besökare att logga in och engagera sig i ditt Klaviyo Customer Hub-gränssnitt.

I exemplet nedan lyder huvuduppmaningen "Tjäna belöningar, spåra beställningar och spara din shoppinghistorik".

För att uppdatera huvuduppmaningen för ditt Klaviyo Customer Hub-gränssnitt:

1. Öppna fliken Klaviyo Customer Hub i Klaviyo:s vänstra navigering.
2. Klicka på Inställningar.
3. Välj fliken Innehåll.
4. Under Välkomstmeddelanden anpassar du en uppmaning till handling som ska visas ovanför knappen "logga in" för oautentiserade kunder. Du kan göra detta för varje flik i Klaviyo Customer Hub-lådan:
   • För dig
   • Beställningar
   • profil
     
5. Klicka på Spara. 

Designa din kundhub

För designalternativ för att anpassa ditt Klaviyo Customer Hub-gränssnitt:

1. Navigera till Klaviyo Customer Hub i Klaviyo:s vänstra navigering.
2. Välj Design.
3. Öppna menyn Stil. 
   
4. I menyn Stil kan du justera följande färg- och stilinställningar och förhandsgranska hur dessa justeringar kommer att se ut i Customer Hub-gränssnittet:
   • Teckensnitt
     • Rubriksnitt
       Används för rubriker på varje flik i Klaviyo Customer Hub. Välj Inherit from site för att automatiskt kopiera det teckensnitt som används i andra rubriker på din webbplats.
       

       Observera att du också kan lägga till ett eget typsnitt genom att välja Konfigurera eget typsnitt och sedan ange namn och storlek. Det anpassade teckensnittet måste redan finnas i avsnittet Teckensnitt på din Konto. 

     • Färg för rubriker
       Används för rubriktext på varje flik i Klaviyo Customer Hub.
     • Typsnitt för stycke
       Används för text inom varje avsnitt, innehåll block och knapp. Välj Inherit from site för att automatiskt kopiera det typsnitt som används i andra stycken på din webbplats.
     • Styckefärg
       Används för alla knappar, innehåll block och avsnittstext i Klaviyo Customer Hub.
   • Knappar
     • Knappfärg
       Bakgrundsfärgenför alla knappar i Klaviyo Customer Hub.
     • Färg på knapptext
       Färgen på texten på alla knappar i Klaviyo Customer Hub. 
     • Knapptext versaler
       Alternativen för versaler för text på alla knappar i Klaviyo Customer Hub.
   • Stil
     • Form
       Formenpå kanterna på innehållsblock, knappar och avsnitt i Customer Hub.
       
     • Bakgrundsfärg
       Basfärgen för Klaviyo Customer Hub under all text, innehållsblock och tillägg.
   • Layout
     • Position på skrivbordet
       Varifrån lådan för Klaviyo Customer Hub glider ut (vänster eller höger sida av visningsområdet). Om ditt varumärke använder en vagnslåda bör du överväga att använda vänsterjusterad positionering så att den inte överlappar Klaviyo Customer Hub.
   • Anpassad CSS-
     Du kan valfritt tillämpa avancerad styling med anpassad CSS. Se avsnittet Anpassad CSS nedan för mer information.
5. Klicka på Publicera för att publicera dina ändringar.

Anpassa widgeten Kundcenter

Förutom att designa Customer Hub själv kan du också anpassa hub-widgeten, som är ett litet, flytande element på din webbplats som besökare kan klicka på för att snabbt öppna Customer Hub-gränssnittet. Hub-widgeten fungerar ungefär som en formulärteaser och följer besökarna under hela deras besök på din webbplats. 

Så här anpassar du hubbwidgeten:

1. Välj Kundcenter i Klaviyos vänstra navigeringsfält.
2. Välj Design.
3. Öppna widgetmenyn.
   
4. Du kan anpassa navstartaren widget's:
   • Synlighets
     Vilka besökare på webbplatsen kan se och klicka på widgeten?
   • Öppna inställnings
     Vilken sida öppnas i Customer Hub? 
   • Form
     Widgets kantform
   • Färg
     Widgets färg
   • Position
     Var på en webbsida widgeten flyter
   • Avstånds
     Avstånd från vänster/höger och övre/nedre hörn, beroende på widgetens placering
5. Klicka på Publicera för att se dina ändringar live.

Anpassad CSS för Klaviyo Customer Hub

Om dina behov av varumärkesutveckling inte uppfylls av designalternativen i Klaviyo Customer Hub kan du använda avancerad styling med Custom CSS.

Klaviyo Customer Hub använder CSS-resets för att undvika kollision med webbplatsens CSS, men du kan behöva lägga till anpassad CSS för att hantera kantfall eller tillämpa unik styling, till exempel flytande lådor eller anpassade värden för kantradie.

Tillämpa anpassad CSS 

Lägg till anpassad CSS direkt i avsnittet Anpassad CSS i designinställningarna för Klaviyo Customer Hub och se till att spara dina ändringar.

Alla grundläggande element inom Klaviyo Customer Hub har klassnamn som inleds med kl-hub-:

• Alla textelement har klassen kl-hub-text, medan rubriker har klassen kl-hub-heading
• Knappar har klassen kl-hub-button, och inkluderar även deras variation (t.ex. kl-hub-button-primary, kl-hub-button-secondary, etc.)
• Själva Klaviyo Customer Hub-lådan har klassen kl-hub-drawer
• Textinmatningar har klassen kl-hub-inmatning
• Alla innehållsblock har klassen kl-hub-content-block, och inkluderar även deras block interna namn (t.ex. kl-hub-content-block -reward-program för ett innehåll block som heter "Reward-program")

Detta är inte en uttömmande lista; du kan hitta mer genom att inspektera Klaviyo Customer Hub med din webbläsares debugger. Om ett element har en klass som börjar med kl-hub- är det säkert att använda för anpassad CSS.

Exempel på CSS

Om du vill att alla knappar och rubriker i Klaviyo Customer Hub ska vara versaler kan du skriva följande anpassade CSS:

.kl-hub-knapp, .kl-hub-rubrik {

    text-transform: uppercase;
}

Ytterligare resurser

• Komma igång med Klaviyo Customer Hub
• Komma igång med Webbchatt
• Så skapar du innehållsblock för Klaviyo Customer Hub