Jak używać niestandardowego CSS do stylizowania czatu online

Czego się dowiesz?

Jak używać niestandardowego CSS, aby zmienić wygląd czatu online Klaviyo — launchera, okna czatu, dymków wiadomości i Composera wiadomości. Dowiesz się, których zmiennych motywu i punktów zaczepienia klas używać, oraz jak unikać selektorów, które mogą się zmienić, gdy Klaviyo aktualizuje interfejs.

Ten artykuł ma zastosowanie niezależnie od tego, czy używasz czatu online samodzielnie, czy jako części Klaviyo Customer Hub. Interfejs czatu jest taki sam w obu przypadkach, więc ten sam CSS działa w obu.

Kilka słów na początek

Potrzebujesz:

• Rola właściciela, administratora lub zarządcy
• Znajomość selektorów CSS i właściwości niestandardowych (zmiennych CSS)

Zanim zaczniesz pisać własny CSS, sprawdź, czy wbudowane ustawienia projektu nie robią już tego, czego potrzebujesz. Kolory, czcionki, kształt przycisku i pozycja launchera można skonfigurować bez kodu, a te ustawienia przetrwają aktualizacje Klaviyo. Sięgaj po własny CSS tylko wtedy, gdy ustawienia projektu tego nie obejmują.

Aby ukryć launcher na niektórych stronach Twojej witryny lub wyświetlać go tylko na wybranych stronach, zobacz Jak wyświetlać lub ukrywać launcher na określonych stronach.

Gdzie dodać swój niestandardowy CSS

To, gdzie znajdziesz edytor niestandardowego CSS, zależy od Twojej konfiguracji.

Jeśli korzystasz z Klaviyo Customer Hub

1. Przejdź do Klaviyo Customer Hub > Projekt, a następnie kliknij Edytuj swój Hub.
2. Wybierz Styl na lewym pasku bocznym, a następnie przewiń do Niestandardowy CSS.
3. Kliknij przycisk + obok Niestandardowy CSS i wprowadź swój CSS lub edytuj CSS, który już tam jest.
4. Kliknij Zapisz. Jeśli trwa test widoczności, zapisanie zakończy go wcześniej. Kliknij Zakończ test i opublikuj tylko wtedy, gdy jesteś gotowy(-a) zakończyć test.

Jeśli korzystasz z samodzielnego czatu online

1. Przejdź do Ustawienia > czat online > Projekt.
2. Przewiń do sekcji Niestandardowe na dole ustawień stylu.
3. Kliknij Dodaj niestandardowy CSS i wprowadź swój CSS lub edytuj CSS, który już tam jest.
4. Kliknij Zapisz.

Po zapisaniu sprawdź czat na swojej stronie internetowej w widokach dla komputerów i urządzeń mobilnych. Otwórz i zamknij panel uruchamiania, wyślij wiadomość i sprawdź stany odpowiedzi oraz przycisku wysyłania. Aby cofnąć zmianę, usuń odpowiedni CSS i zapisz ponownie.

Jak jest stosowany niestandardowy CSS

Twój CSS jest dodawany do znacznika style w Twoim sklepie internetowym, po własnych stylach Klaviyo. Wynikają z tego dwie rzeczy:

• Późniejsze reguły mogą nadpisywać wcześniejsze reguły. Twój CSS ładuje się po stylach Klaviyo, ale specyficzność selektorów, style inline i animacje nadal mogą mieć pierwszeństwo. Używaj !important tylko wtedy, gdy jest to potrzebne.
• Twój CSS nie jest ograniczony do czatu. Dotyczy całej strony. Zawsze ograniczaj swoje selektory do elementu czatu, zamiast pisać ogólne reguły, takie jak button { … }, które wpłynęłyby na cały Twój sklep.

Zacznij od zmiennych motywu

Zacznij od nadpisania zmiennych motywu Klaviyo w bloku :root. Dzięki temu możesz zmieniać współdzielone kolory i kształty bez kierowania zmian na poszczególne elementy. Te zmiany mogą też wpływać na inne części Klaviyo Customer Hub. Poniższe tabele pokazują domyślne wartości podstawowego arkusza stylów; ustawienia Twojego projektu mogą nadpisywać te wartości.

:root {
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-message-border-radius: 4px;
}

Zmienne wiadomości czatu

Wiadomości kupującego (wychodzące) celowo wykorzystują ponownie kolory Twojej marki: dymek używa --atlas-button-primary, a tekst używa --atlas-text-primary-inverse — oba ustawiasz w ustawieniach projektu.

Zmienne kolorów i powierzchni

Zmienne kształtu i odstępów

Zmienne typografii

Kilka z nich jest już zapisanych na podstawie twoich ustawień projektu. Ustawianie czcionek i kolorów w interfejsie ustawień projektu jest lepszym rozwiązaniem — używaj zmiennych dla wartości, których interfejs nie udostępnia.

Kieruj elementy za pomocą zaczepów klas

Gdy zmienna motywu nie wystarczy, kieruj elementy bezpośrednio. Klaviyo gwarantuje poniższe nazwy klas.

Elementy czatu

Okno czatu ma też klasę nazywającą bieżący ekran — .kl-hub-route-chat dla samego czatu. W samodzielnym czacie online jest to zawsze .kl-hub-route-chat. W Klaviyo Customer Hub zmienia się ona, gdy kupujący nawiguję (.kl-hub-route-home, .kl-hub-route-orders, i tak dalej), co pozwala zawęzić zakres CSS do jednego ekranu.

Przycisk wyślij nie ma dedykowanej klasy. Wybierz go w Composerze:

.kl-hub-chat-input-wrapper .kl-hub-button-primary:not(:disabled) {
  --atlas-button-primary: #2f4f4f;
}

Elementy udostępnione

Inne style dla wiadomości od agenta i kupującego

Wiadomości tekstowe wysyłane przez człowieka (agenta) i kupującego mają klasę .kl-hub-message . Używają jej też Customer Agent i automatyczne odpowiedzi. Nie ma stałej klasy, która wybiera tylko jeden typ nadawcy.

Użyj zmiennych motywu, aby inaczej stylizować dymki agenta i klienta. Customer Agent i automatyczne odpowiedzi nie mają dymka i używają --atlas-text-primary jako koloru tekstu. Ogranicz zakres zmiennych do .kl-hub-message, aby zachować te zmiany w ramach kontenerów wiadomości:

.kl-hub-message {
  /* Human-agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

  /* Customer Agent and automated replies */
  --atlas-text-primary: #2b2b2b;

  /* Shopper messages */
  --atlas-button-primary: #1f3a3d;
  --atlas-text-primary-inverse: #ffffff;
}

Przykłady

Wyrównaj okno czatu, dymki wiadomości, przyciski i pola wpisywania

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius-normal: 0;
  --atlas-button-border-radius-small: 0;
  --atlas-button-border-radius-tiny: 0;
  --atlas-input-border-radius-normal: 0;
  --atlas-input-border-radius-small: 0;
}

Nagłówki i przyciski pisane WIELKIMI LITERAMI

.kl-hub-heading,
.kl-hub-button {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Powiększ launcher, dodając niestandardowy cień

Launcher używa bardziej szczegółowych reguł CSS i animacji rozmiaru, dlatego w tym przykładzie użyto !important. Ustalenie na sztywno jego szerokości i wysokości zapobiega też jego rozszerzaniu się na potrzeby powiadomień lub treści Dodaj do koszyka. Zanim pozostawisz te nadpisania rozmiaru, sprawdź te stany pod kątem obciętej treści.

.kl-hub-launcher {
  width: 72px !important;
  height: 72px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

Poszerz okno czatu na komputerach stacjonarnych

@media (min-width: 900px) {
  .kl-hub-drawer.kl-hub-route-chat {
    width: 480px !important;
  }
}

Rozwiązywanie problemów z niestandardowym CSS

W samodzielnym czacie online Klaviyo sprawdza Twoje CSS przed zapisaniem. Jeśli sprawdzanie się nie powiedzie, zobaczysz komunikat Nieprawidłowy CSS. Sprawdź składnię. a Twoje zmiany nie zostaną zapisane.

To sprawdzenie odrzuca niepusty arkusz stylów, gdy przeglądarka nie potrafi zanalizować żadnych reguł. Możesz wyczyścić pole i zapisać, aby usunąć swój niestandardowy CSS. Jeśli widzisz ten błąd, sprawdź:

• Wklejanie zwykłego tekstu, kodu HTML lub znacznika stylu zamiast reguł CSS
• Wklejanie części deklaracji zamiast kompletnej reguły
• Arkusz stylów, w którym każda reguła ma błąd składniowy

Czego niestandardowy CSS nie może zrobić

• Zmień tekst. Niestandardowy CSS nie może edytować tekstu. Użyj do tego ustawień projektu i treści.
• Zmieniaj kolejność lub położenie elementów poza tym, na co pozwala układ CSS. Struktury czatu nie da się dostosować.
• Kieruj dymki agenta i kupującego oddzielnie według klasy. Użyj zmiennych motywu, zgodnie z opisem powyżej.
• Automatycznie dostosuj się do przeprojektowań. Haki klas i zmienne są stabilne w przypadku standardowych aktualizacji, ale znaczące przeprojektowanie może wymagać ponownego przejrzenia Twojego CSS. Przetestuj ponownie po dużych wydaniach.

Dodatkowe źródła