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 pola Composer. Dowiesz się, które zmienne motywu i nazwy klas można bezpiecznie wykorzystywać jako cele, a które przestaną działać, gdy Klaviyo wyśle aktualizację.

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ą.

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.
2. Przewiń do sekcji Niestandardowe na dole ustawień stylu.
3. Kliknij Dodaj niestandardowy CSS lub edytuj znajdujący się tam CSS.
4. Kliknij Zapisz.

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 lub edytuj znajdujący się tam CSS.
4. Kliknij Zapisz.

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:

• Twoje CSS wygrywa. Ponieważ ładuje się jako ostatnie, Twoje reguły zastępują domyślne ustawienia Klaviyo bez konieczności używania !important w większości przypadków.
• 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

Najbardziej niezawodnym sposobem na zmianę stylu czatu online jest nadpisanie zmiennych motywu Klaviyo w bloku :root. Są one stabilne, poprawnie kaskadują w całym interfejsie i znacznie rzadziej się psują niż kierowanie zmian na poszczególne elementy.

: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 {
  background: #2f4f4f;
}

Elementy udostępnione

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

Jest to najczęstsza prośba i wymaga ona szczególnego podejścia. Bąbelki agenta i kupującego udostępniają pojedynczą wiadomość .kl-hub Klasa — nie ma stabilnej klasy, która by je odróżniała, więc nie można jej wybrać bezpośrednio.

Zamiast tego użyj zmiennych motywu, które już traktują te dwa elementy inaczej:

:root {
  /* Agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

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

Przykłady

Zrób wszystko na kwadratowo

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius: 0;
  --atlas-input-border-radius-normal: 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ń

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

Launcher ustawia kilka właściwości bezpośrednio na elemencie, więc reguły launchera muszą mieć !important, aby zadziałały. To jedyne miejsce, w którym jest to regularnie wymagane.

Poszerz okno czatu na komputerach stacjonarnych

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

Jeśli twój CSS nie chce się zapisać

Gdy zapisujesz, Klaviyo sprawdza, czy Twój CSS jest poprawnie analizowany. Jeśli nie, zobaczysz komunikat Nieprawidłowy CSS. Sprawdź składnię. a Twoje zmiany nie zostaną zapisane.

Arkusz stylów jest odrzucany tylko wtedy, gdy nie generuje żadnych reguł, co zwykle oznacza, że to, co wkleiłeś(-aś), nie jest CSS. Najczęstsze przyczyny:

• 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