Jak pokazać lub ukryć launcher na konkretnych stronach

Czego się dowiesz?

Jak ukryć launcher (pływający przycisk, który otwiera czat online lub Klaviyo Customer Hub) na niektórych stronach Twojej witryny albo wyświetlać go tylko na wybranych stronach. Dodasz krótki fragment kodu CSS do motywu witryny na wybranych przez Ciebie stronach.

Działa to zarówno wtedy, gdy korzystasz z czatu online samodzielnie, jak i w ramach Klaviyo Customer Hub, oraz niezależnie od tego, do którego ekranu otwiera się Twój launcher (czat, Ulubione lub Dla Ciebie).

Kilka słów na początek

Potrzebujesz:

• Czat online lub Klaviyo Customer Hub na żywo w Twojej witrynie
• Dostęp do edycji kodu motywu Twojej strony
• Uprawnienie do edytowania ustawień projektu Klaviyo Customer Hub lub czatu online w Klaviyo, jeśli korzystasz z edytora Custom CSS dla poniższej reguły dla urządzeń mobilnych

Klaviyo nie ma obecnie ustawienia, które kontrolowałoby, na których stronach wyświetla się launcher, więc odbywa się to za pomocą CSS.

Wycinek

Ten CSS ukrywa moduł uruchamiający:

.kl-hub-launcher-container,
.kl-hub-launcher {
  display: none !important;
}

.kl-hub-launcher-container to element opakowujący, który pozycjonuje launcher, a .kl-hub-launcher to sam przycisk. Style Klaviyo ładują się po stylach Twojego motywu, więc zachowaj !important, inaczej launcher pojawi się ponownie.

Ukryj launcher na określonych stronach (Shopify)

1. Otwórz swój aktywny motyw w edytorze kodu Shopify.
2. Otwórz layout/theme.liquid.
3. Wklej poniższy kod tuż przed zamykającym znacznikiem </head> i zastąp nazwy szablonów stronami, na których chcesz ukryć launcher.
4. Kliknij Zapisz.

{% if template.name == 'cart' or template.name == 'collection' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endif %}

Typowe nazwy szablonów:

• index — twoja strona główna
• product — strony produktów
• collection — strony kolekcji
• cart — strona koszyka
• page — standardowe strony z treścią, takie jak O nas lub Kontakt
• blog i article — Twój blog i wpisy na blogu
• search — wyniki wyszukiwania

Strony płatności Shopify nie korzystają z Twojego motywu, więc nie możesz kierować ich w ten sposób.

Kieruj na jedną stronę według jej adresu URL

Aby kierować reklamy na jedną konkretną stronę, a nie na każdą stronę danego typu, sprawdź ścieżkę strony zamiast nazwy jej szablonu:

{% if request.path == '/pages/contact' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endif %}

Pokaż launcher tylko na określonych stronach (Shopify)

Wykonaj te same kroki, ale użyj unless zamiast if. Spowoduje to ukrycie programu uruchamiającego wszędzie poza stronami, które podasz na liście. W tym przykładzie program uruchamiający pojawia się tylko na Twojej stronie głównej i stronach produktów:

{% unless template.name == 'index' or template.name == 'product' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endunless %}

Ukrywaj launcher tylko na stronach, na których nie powinien się wyświetlać. Nie ukrywaj go wszędzie, a potem nie próbuj wymuszać jego wyświetlania na wybranych stronach — takie nadpisanie może powodować konflikty ze stylami Klaviyo i skutkować nieprawidłowym wyświetlaniem launchera.

Inne platformy e-commerce

To samo podejście działa na każdej stronie: dodaj fragment kodu wewnątrz znacznika style tylko na stronach, na których launcher ma być ukryty. W zależności od platformy możesz to zrobić w szablonie dla konkretnej strony, w polu niestandardowego kodu na poziomie strony lub w menedżerze znaczników.

Jeśli Twoja platforma dodaje klasę specyficzną dla strony do znacznika body, możesz zamiast tego ograniczyć fragment kodu do tej klasy. Zastąp page-cart klasą używaną przez Twoją platformę:

body.page-cart .kl-hub-launcher-container,
body.page-cart .kl-hub-launcher {
  display: none !important;
}

Ukryj wyrzutnię na urządzeniach mobilnych

Ukrywanie launchera według rozmiaru ekranu nie zależy od strony, więc ten kod CSS możesz dodać w ustawieniach projektu Klaviyo Customer Hub lub samodzielnego czatu online. Ukrywa on launcher w oknach przeglądarki o szerokości 767 pikseli lub mniejszej. Dostosuj szerokość tak, aby pasowała do mobilnego punktu granicznego w Twoim motywie:

@media (max-width: 767px) {
  .kl-hub-launcher-container,
  .kl-hub-launcher {
    display: none !important;
  }
}

Jeśli korzystasz z Klaviyo Customer Hub

1. Przejdź do Klaviyo Customer Hub > Projekt i kliknij Edytuj swój hub.
2. Wybierz Edit style na lewym pasku bocznym. W sekcji Custom CSS kliknij ikonę plusa, jeśli edytor jest zamknięty, a następnie dodaj powyższy CSS do dowolnego istniejącego CSS. Wklej tylko CSS, bez znaczników <style>.
3. Kliknij Zapisz. Jeśli trwa test widoczności, podczas zapisywania pojawi się ostrzeżenie. Wybierz Zakończ test i opublikuj tylko wtedy, gdy jesteś gotowy/gotowa zakończyć test i zastosować swoje zmiany.

Jeśli korzystasz z samodzielnego czatu online

1. Przejdź do Ustawienia > czat online > Projekt.
2. Przewiń do sekcji Niestandardowe i kliknij Dodaj niestandardowy CSS albo edytuj istniejący CSS. Dodaj powyższy kod CSS bez znaczników <style>.
3. Kliknij Zapisz.

Czego nie robi ukrycie launchera

• To nie wyłącza czatu online ani Klaviyo Customer Hub. Klienci nadal mogą je otwierać z linków do #k-hub (np. linku do Ulubionych w nagłówku), bloków FAQ na stronach produktów i osadzonych bloków. Usuń je lub ukryj osobno, jeśli nie chcesz ich na stronie.
• To nie wpływa na inne kanały. Customer Agent nadal odpowiada przez e-mail, SMS i WhatsApp.
• Nie kontroluje, kto może korzystać z czatu online. Aby wyłączyć czat online, przejdź do Ustawienia > Czat online > Ogólne. Jeśli używasz Klaviyo Customer Hub, możesz też ustawić status logowania na zalogowani kupujący, aby wymagać zalogowania przed rozpoczęciem czatu. Nie ukrywa to launchera przed wylogowanymi kupującymi. Kliknij Zapisz.

Przetestuj swoje zmiany

Przetestuj to jako klient, który spełnia ustawienia widoczności launchera. Otwórz okno przeglądania prywatnego i w razie potrzeby zaloguj się. Otwórz stronę, na której launcher powinien być ukryty, i potwierdź, że się nie pojawia. Następnie otwórz stronę, na której powinien się pojawić, i potwierdź, że nadal tam jest. W przypadku reguły mobilnej sprawdź szerokości ekranu zarówno poniżej, jak i powyżej wybranego punktu granicznego. Jeśli launcher nadal wyświetla się tam, gdzie nie powinien, sprawdź, czy nazwa lub ścieżka szablonu pasuje dokładnie, oraz czy snippet zawiera !important.

Najczęściej zadawane pytania

Czy w Klaviyo jest ustawienie, które pozwala wybrać, na których stronach ma się wyświetlać launcher?
Obecnie nie. Skorzystaj z podejścia CSS opisanego w tym artykule.

Czy to przestanie działać, gdy Klaviyo zaktualizuje czat online?
Klasy zaczynające się od kl-hub- są stabilne w przypadku standardowych aktualizacji, więc fragment kodu powinien nadal działać. Przetestuj ponownie po dużych zmianach w projekcie.

Czy mogę ukryć moduł uruchamiający dla niektórych kupujących zamiast na określonych stronach?
Tak. W Ustawienia > czat online > Ogólne użyj Widoczność widżetu, aby wybrać Wszyscy kupujący lub Tylko zalogowani kupujący, a następnie kliknij Zapisz. Ustawienia kierowania Customer Agent określają, którym segmentom agent odpowiada; nie ukrywają modułu uruchamiającego.

Dodatkowe źródła