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.
Klaviyo Customer Hub för Shopify stöder för närvarande vanliga skyltfönster och Shopify Headless. För WooCommerce, navigera till https://help.klaviyo.com/hc/en-us/articles/47792369863451
För feedback om Klaviyo Customer Hub-funktionalitet, e-post customerhub@klaviyo.com.
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.
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.
Även om utseendet på de flesta element i Klaviyo Customer Hub-lådan kan justeras, kan deras positioner inte. Endast allmänna layout alternativ är för närvarande tillgängliga.
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".
Obs: "rewards available" indikatorn visas automatiskt om du har någon av dem:
- En statisk kupong upprättad inom Klaviyo Customer Hub, ELLER
- Om du har aktiverat en lojalitetsintegrerare (t.ex. Smile).
För att uppdatera huvuduppmaningen för ditt Klaviyo Customer Hub-gränssnitt:
- Öppna fliken Service - Klaviyo Customer Hub i Klaviyo:s vänstra navigering.
- Klicka på Inställningar.
- 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
- Klicka på Spara.
Designa din kundhub
För designalternativ för att anpassa ditt Klaviyo Customer Hub-gränssnitt:
- Navigera till Klaviyo Customer Hub i Klaviyo:s vänstra navigering.
- Välj Design.
- Välj Hub längst upp i förhandsgranskningen.
- Från menyn Stil kan du justera inställningarna för visningsspråk, teckensnitt, färg och stil och förhandsgranska hur dessa justeringar kommer att se ut i Klaviyo Customer Hub-gränssnittet
- Du kan välja att använda avancerad styling med Custom CSS. Se avsnittet Anpassad CSS nedan för mer information.
- Se artikeln Språk- och lokalstöd i Klaviyo Customer Hub för mer information om hur du väljer ett annat språk.
- Klicka på Spara för att aktivera dina ändringar.
Anpassa widgeten Kundcenter
Förutom att designa själva Klaviyo Customer Hub kan du också anpassa hubben widget, som är ett litet, flytande element på din webbplats som besökare kan klicka på för att snabbt öppna Klaviyo Customer Hub-gränssnittet. På widget presenteras aktuell information för kunden, t.ex. inkommande chattmeddelanden och feedback när kunden lägger till varor i sin favoritlista. Vi rekommenderar att du aktiverar widget UI för att skapa meningsfullt engagemang med kunderna, särskilt när Webbchatt och Favoriter är aktiverade.
Så här anpassar du hubbwidgeten:
- Välj Kundcenter i Klaviyos vänstra navigeringsfält.
- Välj Design.
- Välj widget längst upp i förhandsgranskningen.
- Från menyn Allmänt kan du justera vilka kunder som ska se widget och vilken Klaviyo Customer Hub View som ska öppnas när widget klickas.
- Välj vilka kunder som ska se widget på din webbplats:
- Alla kunder (identifierade, inloggade och utloggade) - widget visas för alla.
- Igenkända eller inloggade kunder - widget visas endast om Klaviyo känner igen personen (Identified) eller om de är inloggade (Authenticated). Detta är idealiskt för att minska röran för helt nya besökare samtidigt som man bibehåller en upplevelse med hög tillgänglighet för återkommande besökare.
- Endast inloggade kunder - widget visas endast för de som har en Aktiv Shopify-session.
- Välj vilka kunder som ska se widget på din webbplats:
- Från Style-menyn kan du justera färg- och stilinställningar och förhandsgranska hur dessa justeringar kommer att se ut i Klaviyo Customer Hub widget-gränssnittet.
- I menyn Layout kan du justera hur widget ska placeras på din webbplats.
- Klicka på Spara för att aktivera dina ändringar.
Anpassa ytterligare widgetstatusar
Du kan anpassa ytterligare widget -tillstånd genom att välja caretten bredvid Icon och navigera till ett annat widget -tillstånd.
- Läget Lägg i varukorg är synligt på sidor med produktdetaljer. Den anpassningsbara widget uppmuntrar kunder att göra ett köp eller spara en produkt till senare när de har skrollat under toppen av produktdetaljsidan när den traditionella Lägg i varukorg-knappen inte längre är synlig. Läs mer om hur du konfigurerar widgeten Lägg till i kundvagn i Klaviyo Customer Hub.
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.
Att implementera anpassad CSS för din Klaviyo Customer Hub innebär att du måste redigera webbplatsens kod. Detta rekommenderas endast för tekniskt kunniga marknadsförare eller för dem som har tillgång till en utvecklare. Även om vår produkt gör support anpassad CSS, kan vårt team på supportinte hjälpa dig att lägga till anpassad CSS till Klaviyo Customer Hub utöver den allmänna vägledning som beskrivs i denna dokumentation. För att upprätthålla säkerheten för din data, Klaviyo och supportkan teamet inte öppna dina HTML-filer.
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 på Shopify
Lär dig mer om Klaviyo Customer Hub, en unik personlig upplevelse för webbutikens besökare som guidar dem från produktupptäckt till köp och efter köp support.
- Komma igång med Webbchatt
Lär dig mer om Webbchatt, som är en kanal för tvåvägskommunikation som du kan lägga till på din webbplats. Webbchatt kan ställas in på egen hand för att användas med Customer Agent och Helpdesk, men det är också utformat för att vara en sömlös del av Klaviyo Customer Hub. Webbchatt gör det möjligt för ditt företag att delta i levande, personliga konversationer med besökare på din webbplats så att de enkelt kan få svar på sina frågor eller hjälp med problem.
- Så skapar du innehållsblock för Klaviyo Customer Hub
Lär dig hur du skapar innehållsblock för din Klaviyo Customer Hub. Innehållsblock är mycket anpassningsbara och personliga block som har tillgång till Klaviyo profildata vilket gör att du kan visa integrationer (t.ex. lojalitetspoäng), personliga erbjudanden och mycket mer.
- Så här ställer du in widgeten Lägg till i kundvagn i Klaviyo Customer Hub
Lär dig hur du visar en interaktiv widget för Lägg till i kundvagn på dina produktdetaljsidor. Den anpassningsbara widget uppmuntrar kunder att göra ett köp eller spara en produkt till senare när de har skrollat under toppen av produktdetaljsidan när den traditionella Lägg i varukorg-knappen inte längre är synlig.