Jak stylizować swoje centrum obsługi klienta Klaviyo?

Czego się dowiesz

Dowiedz się o opcjach stylizacji szuflady Klaviyo Customer Hub i o tym, jak możesz ją zaprojektować, aby pasowała do Twojej marki. Ponieważ interfejs Klaviyo Customer Hub jest zakorzeniony w doświadczeniu klienta, najlepszą praktyką jest stylizowanie go tak, aby wyglądał jak rozszerzenie Twojej witryny.

Kilka słów na początek

W tym przewodniku wyjaśniono, jak dostosować styl interfejsu Klaviyo Customer Hub. Przed kontynuowaniem upewnij się, że funkcja Klaviyo Customer Hub jest włączona.

Dowiedz się więcej o Klaviyo Customer Hub.

Opcje projektowania centrum obsługi klienta

Szuflada Klaviyo Customer Hub ma wiele konfigurowalnych zakładek:

• Dla Ciebie
• Zamówienia
• Profil
• Czat (widoczny tylko wtedy, gdy czat online jest włączony)

W każdej z tych zakładek masz różne opcje dostosowywania wyglądu, w tym edycji tekstu, kolorów, czcionek i nie tylko. Wybory dostosowywania stylu są kaskadowane na każdej karcie w szufladzie Klaviyo Customer Hub, aby zapewnić spójne, zgodne z marką doświadczenie dla odwiedzających Twoją witrynę. 

Podczas edytowania ustawień projektu Klaviyo Customer Hub w Klaviyo, użyj przycisku Wyświetl na żywo, aby zobaczyć zmiany wprowadzone w interfejsie hubu na swojej stronie internetowej. Pamiętaj, że jeśli Klaviyo Customer Hub działa, zapisane zmiany są publikowane w Twojej witrynie. 

Dostosuj główne wezwanie do działania dla każdej karty

Domyślnie, gdy klient loguje się na swoje konto klienta, na stronie Klaviyo wyświetlany jest komunikat "Witaj, first.name". jako główny nagłówek na karcie Dla Ciebie w szufladzie Klaviyo Customer Hub. Tego tekstu nie można edytować.

W przypadku nieuwierzytelnionych kupujących możesz jednak napisać własny nagłówek wezwania do działania (CTA), który będzie wyświetlany nad przyciskiem "Zaloguj się", zanim się zalogują. Może to być pomocne w zachęcaniu nieuwierzytelnionych użytkowników do logowania się i angażowania w Twój interfejs Klaviyo Customer Hub.

W poniższym przykładzie główne wezwanie do działania (CTA) brzmi: "Zdobywaj nagrody, śledź zamówienia i zapisuj historię zakupów".

Aby zaktualizować Główne wezwanie do działania (CTA) dla Twojego interfejsu Klaviyo Customer Hub:

1. Otwórz zakładkę Klaviyo Customer Hub w nawigacji po lewej stronie Klaviyo.
2. Proszę kliknąć Ustawienia.
3. Proszę wybrać kartę Treść.
4. W sekcji Wiadomości powitalne dostosuj wezwanie do działania (CTA), które będzie wyświetlane nad przyciskiem "zaloguj się" dla nieuwierzytelnionych kupujących. Możesz to zrobić dla każdej zakładki szuflady Klaviyo Customer Hub:
   • Dla Ciebie
   • Zamówienia
   • profil
     
5. Kliknij przycisk Zapisz. 

Zaprojektuj centrum obsługi klienta

Aby uzyskać opcje projektowania w celu dostosowania interfejsu Klaviyo Customer Hub:

1. Przejdź do Klaviyo Customer Hub w nawigacji po lewej stronie Klaviyo.
2. Proszę wybrać projekt.
3. Otwórz menu Styl. 
   
4. W menu Styl można dostosować następujące ustawienia kolorów i stylu oraz wyświetlić podgląd tych zmian w interfejsie Centrum klienta:
   • Czcionki
     • Czcionka nagłówka
       Używana do nagłówków na każdej karcie Klaviyo Customer Hub. Wybierz opcję Odziedzicz z witryny, aby automatycznie replikować czcionkę używaną w innych nagłówkach w witrynie.
       

       Pamiętaj, że możesz także dodać niestandardową czcionkę, wybierając opcję Konfiguruj niestandardową czcionkę, a następnie wprowadzając jej nazwę i rozmiar. Ta niestandardowa czcionka musi już istnieć w sekcji Czcionki na Twoim koncie. 

     • Kolor nagłówka
       Używany do tekstu nagłówka na każdej karcie Klaviyo Customer Hub.
     • Czcionka akapitowa
       Używana do tekstu w każdej sekcji, bloku treści i przycisku. Wybierz opcję Odziedzicz z witryny, aby automatycznie replikować czcionkę używaną w innych akapitach w witrynie.
     • Kolor akapitu
       Używany dla wszystkich przycisków, bloków treści i tekstu sekcji w Klaviyo Customer Hub.
   • Przyciski
     • Kolor przycisku
       Kolor tła dla wszystkich przycisków w Klaviyo Customer Hub.
     • Kolor tekstu na przyciskach
       Kolor tekstu na wszystkich przyciskach w Klaviyo Customer Hub. 
     • Wielkość liter na przyciskach
       Opcje wielkości liter dla tekstu na wszystkich przyciskach w Klaviyo Customer Hub.
   • Styl
     • Kształt
       Kształt krawędzi bloków treści, przycisków i sekcji w Centrum obsługi klienta.
       
     • Kolor tła
       Podstawowy kolor Klaviyo Customer Hub pod całym tekstem, blokiem treści i rozszerzeniami.
   • Układ
     • Pozycja na pulpicie
       Skąd wysuwa się szuflada Klaviyo Customer Hub (z lewej lub prawej strony rzutni). Jeśli Twoja marka korzysta z szuflady koszyka, rozważ użycie pozycjonowania z wyrównaniem do lewej, aby nie nakładała się na Klaviyo Customer Hub.
   • Niestandardowy CSS
     Opcjonalnie można zastosować zaawansowane style za pomocą niestandardowego CSS. Więcej informacji znajdziecie Państwo w sekcji „Niestandardowy kod CSS” poniżej.
5. Proszę kliknąć opcję Publikuj, aby zmiany zostały wprowadzone.

Dostosuj widżet Centrum obsługi klienta

Oprócz zaprojektowania samego Centrum obsługi klienta, można również dostosować widżet centrum, czyli mały, pływający element na stronie internetowej, który odwiedzający mogą kliknąć, aby szybko otworzyć interfejs Centrum obsługi klienta. Widżet hub działa podobnie jak zapowiedź formularza, śledząc odwiedzających podczas całej ich podróży po Państwa stronie internetowej. 

Aby dostosować widżet centrum:

1. Wybierz opcję Centrum obsługi klienta w menu po lewej stronie w Klaviyo.
2. Proszę wybrać projekt.
3. Otwórz menu Widżety.
   
4. Możesz dostosować widżet programu uruchamiającego hub:
   • Widoczność
     Któr mogą zobaczyć i kliknąć widget
   • Otwórz ustawienia
     Która strona otwiera się w Centrum obsługi klienta? 
   • Kształt
     Kształt krawędzi widżetu
   • Kolor
     Kolor widżetu
   • Pozycja
     Miejscena stronie internetowej, w którym widżet jest wyświetlany
   • Odstępy
     Odległość od lewego/prawego i górnego/dolnego rogu, w zależności od położenia widżetu
5. Kliknij opcję Publikuj, aby zobaczyć zmiany na żywo.

Niestandardowy CSS dla Klaviyo Customer Hub

Jeśli Twoje potrzeby branding nie są spełnione przez opcje projektowania Klaviyo Customer Hub, możesz zastosować zaawansowaną stylizację za pomocą Custom CSS.

Podczas gdy Klaviyo Customer Hub używa resetowania CSS, aby uniknąć kolizji z CSS Twojej witryny, może być konieczne dodanie niestandardowego CSS, aby rozwiązać przypadki brzegowe lub zastosować unikalną stylizację, taką jak pływająca szuflada lub niestandardowe wartości promienia obramowania.

Zastosuj niestandardowy CSS 

Dodaj dowolny niestandardowy CSS bezpośrednio do sekcji Niestandardowy CSS w ustawieniach projektu Klaviyo Customer Hub i pamiętaj o zapisaniu zmian.

Wszystkie podstawowe elementy w Klaviyo Customer Hub mają nazwy klas poprzedzone przedrostkiem kl-hub-:

• Wszystkie elementy tekstowe mają klasę kl-hub-text, podczas gdy nagłówki mają klasę kl-hub-heading
• Przyciski mają klasę kl-hub-button, a także zawierają swój wariant (np. kl-hub-button-primary, kl-hub-button-secondary itp.).
• Sama szuflada Klaviyo Customer Hub ma klasę kl-hub-drawer
• Wejścia tekstowe mają klasę kl-hub-input
• Wszystkie bloki zawartości mają klasę kl-hub-content-blok, a także zawierają nazwę wewnętrzną bloku (np. kl-hub-content-blok-reward-program dla bloku zawartości o nazwie "Reward-program").

Nie jest to wyczerpująca lista; możesz znaleźć więcej, sprawdzając Klaviyo Customer Hub za pomocą debuggera przeglądarki. Jeśli element ma klasę zaczynającą się od kl-hub-, można go bezpiecznie używać w niestandardowym CSS.

Przykład CSS

Jeśli chcesz, aby wszystkie przyciski i nagłówki w Klaviyo Customer Hub były pisane wielkimi literami, możesz napisać następujący niestandardowy CSS:

.kl-hub-button, .kl-hub-heading {

    text-transform: uppercase;
}

Dodatkowe źródła

• Pierwsze kroki z Centrum obsługi klienta Klaviyo
• Pierwsze kroki z czatem online
• Jak utworzyć blok treści dla Klaviyo Customer Hub