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. Proszę otworzyć zakładkę Service - Klaviyo Customer Hub na stronie Klaviyow nawigacji po lewej stronie.
2. Proszę kliknąć Ustawienia.
3. 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
     
4. 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. Wybierz Hub w górnej części podglądu.
   
   
   
   
4. W menu Styl możesz dostosować język wyświetlania, czcionki, kolor i ustawienia stylu oraz wyświetlić podgląd tych zmian w kanwie interfejsu Klaviyo Customer Hub.
5. Opcjonalnie można zastosować zaawansowaną stylizację za pomocą niestandardowego CSS. Aby uzyskać więcej informacji, proszę zapoznać się z sekcją Niestandardowy CSS poniżej.
6. Zobacz artykuł Obsługa języków i ustawień regionalnych w Klaviyo Customer Hub, aby uzyskać więcej informacji na temat wyboru innego języka.
7. Kliknij przycisk Zapisz, aby wprowadzić zmiany.

Dostosuj widżet Centrum obsługi klienta

Oprócz projektowania samego Klaviyo Customer Hub, możesz także dostosować widżet huba, który jest małym, pływającym elementem na Twojej stronie internetowej, który odwiedzający mogą kliknąć, aby szybko otworzyć interfejs Klaviyo Customer Hub. Widżet prezentuje kupującym aktualne informacje, takie jak przychodzące wiadomości na czacie i informacje zwrotne podczas dodawania pozycji do listy ulubionych. Zalecamy włączenie szerokiego interfejsu użytkownika, aby zwiększyć zaangażowanie klientów, zwłaszcza gdy włączone są czat online i Ulubione.

Aby dostosować widżet centrum:

1. Wybierz opcję Centrum obsługi klienta w menu po lewej stronie w Klaviyo.
2. Proszę wybrać projekt.
3. Wybierz widżet w górnej części podglądu.
   
   

   

4. W menu Ogólne możesz dostosować, którzy kupujący powinni zobaczyć widżet i który widok Klaviyo Customer Hub powinien się otworzyć po kliknięciu widżetu.
5. W menu Styl możesz dostosować ustawienia kolorów i stylów oraz wyświetlić podgląd tych zmian w widżecie interfejsu Klaviyo Customer Hub.
6. W menu Układ możesz dostosować sposób rozmieszczenia widżetu na stronie.
7. Kliknij przycisk Zapisz, aby wprowadzić zmiany.

Dostosuj dodatkowe stany widżetów

Możesz dostosować dodatkowe stany widżetu, wybierając znacznik obok ikony i przechodząc do innego stanu widżetu.

• Stan Dodaj do koszyka jest widoczny na stronach szczegółów produktu. Konfigurowalny widżet zachęca kupujących do dokonania zakupu lub zapisania produktu na później, gdy przewiną stronę poniżej górnej części strony szczegółów produktu, gdy tradycyjny przycisk Dodaj do koszyka nie jest już widoczny. Dowiedz się więcej o tym, jak skonfigurować widżet Dodaj do koszyka w Klaviyo Customer Hub.

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
• Jak skonfigurować widżet Dodaj do koszyka w Klaviyo Customer Hub?