Jak dostosować wygląd swojego chatbota

Shoply AI Chat i AI Search oferują ponad 40 opcji dostosowywania wyglądu aplikacji.

W tej sekcji przeprowadzimy Cię przez różne opcje personalizacji dostępne dla Twojego chatbota AI. Możesz dopasować jego wygląd, projekt okna czatu i sposób komunikacji tak, aby odpowiadały Twojej marce.

Gotowy, aby zacząć? Otwórz Customize AI Chat w swojej Shoply AI Admin Console, niezależnie od tego, czy korzystasz z Shopify, czy z innej platformy internetowej. Jeśli chatbot nie jest jeszcze widoczny, postępuj zgodnie z listą kontrolną instalacji i widoczności.

Podgląd okna czatu

Wypróbuj ten sam motyw i ilustracje o szerokości desktopowej używane w panelu administracyjnym. Wybierz jasny lub ciemny wygląd i porównaj, ile miejsca zajmuje okno czatu.

Aby zmienić sposób, w jaki AI mówi, a nie to, jak wygląda, zobacz jak dostosować osobowość swojego AI.

Wybór ikony czatu

Select an icon

Możesz wybrać ikonę czatu spośród 17 predefiniowanych ikon albo przesłać własny obraz jako ikonę czatu.

Kolor i rozmiar ikony czatu

Primary Color

To jest główny kolor motywu, który jest również używany jako kolor wyróżnionego tekstu w oknie czatu.

Jeśli na swojej stronie używasz jasnego motywu, wybierz kolor motywu inny niż biały — dzięki temu wyróżniony tekst pozostanie czytelny na jasnym tle. Jeśli na swojej stronie używasz ciemnego motywu, wybierz kolor motywu inny niż czarny.

Complementary Color

To kolor uzupełniający, który współpracuje z kolorem podstawowym, tworząc gradienty (płynne przejścia między dwoma kolorami) dla ikony czatu i nagłówka okna czatu, dzięki czemu ikona czatu jest bardziej atrakcyjna wizualnie i lepiej dopasowana do Twojej marki.

Icon’s Line Color

To jest kolor obramowania ikony czatu.

Whether to remove the background color of the chat icon.

Ta opcja jest często przydatna, jeśli przesyłasz obraz jako ikonę czatu i chcesz usunąć kolor tła (kolor podstawowy) ikony czatu.

Whether to remove the shadow of the chat icon.

Ta opcja pozwala usunąć efekt cienia pod ikoną czatu, aby uzyskać bardziej płaski, minimalistyczny wygląd. Jest to szczególnie przydatne, jeśli Twój sklep ma czystą, nowoczesną estetykę albo jeśli przesłałeś własną ikonę, która już zawiera własne efekty cienia lub głębi.

Floating Icon Size for desktop and mobile.

Na urządzeniach mobilnych możesz chcieć ustawić mniejszy rozmiar ikony czatu, aby nie zasłaniała klientowi widoku ekranu.

Pozycjonowanie ikony czatu

Chat icon positioning’s on desktop and on mobile.

Z-index of Chat Icon:

Użyj wyższej wartości, jeśli chcesz, aby ikona pozostawała przed innymi elementami interfejsu.

Auto-hide chat icon on mobile

Ukryj ikonę czatu po określonej liczbie sekund na urządzeniach mobilnych.

Ta opcja jest dostępna tylko na urządzeniach mobilnych. Pomaga zapobiec zasłanianiu przez ikonę czatu widoku ekranu klienta.

Dostosowywanie okna czatu

Gdy klikniesz ikonę czatu Shoply AI, pojawi się okno czatu. Klienci mogą wchodzić w interakcję z Shoply AI za pośrednictwem tego okna czatu.

W tej sekcji przeprowadzimy Cię przez różne opcje dostępne do dostosowania okna czatu.

Color Theme (dark mode or light mode) of the chat window

Jeśli wybierzesz tryb ciemny, tło okna czatu będzie czarne, a kolor czcionki biały. Zalecamy wybranie trybu ciemnego, jeśli motyw Twojego sklepu również jest ciemny.

Width of the chat window on desktop

Ta opcja dotyczy tylko komputerów stacjonarnych. Na urządzeniach mobilnych okno czatu zawsze zajmuje cały ekran.

Select the branding image and background image

Możesz przesłać własny obraz brandingowy i obraz tła dla okna czatu albo po prostu pozwolić, by Shoply AI wygenerował te obrazy za Ciebie.

Jeśli zdecydujesz się użyć obrazu wygenerowanego przez AI, Shoply AI wygeneruje obrazy brandingowe i obrazy tła na podstawie opisu Twojego sklepu.

Adjust the transparency and aspect ratios of the background image for the chat window.

Obrazy tła w oknie czatu mogą sprawić, że tekst wyświetlany nad nimi będzie nieczytelny. Dlatego domyślnie dodajemy półprzezroczystą warstwę nad obrazem tła.

Whether to remove Shoply AI’s Logo in Input Bar

Ta opcja pozwala usunąć logo Shoply AI z paska wprowadzania wiadomości, aby uzyskać czystszy i bardziej spójny z marką wygląd. Jest to szczególnie przydatne, jeśli chcesz zachować spójną tożsamość marki w całym sklepie bez logo firm trzecich albo jeśli wolisz bardziej minimalistyczny projekt interfejsu czatu.

Ta opcja jest dostępna tylko w płatnych planach.

Predefiniowane wiadomości dla AI Chat

Możesz także ustawić lub edytować domyślne wiadomości, które prowadzą klientów, gdy po raz pierwszy wchodzą w interakcję z Twoim chatbotem. Dodatkowo możesz skonfigurować opcje tłumaczenia dla tych wiadomości (zobacz tę stronę FAQ, aby uzyskać więcej szczegółów).

Popup Welcome message (shows above chat icon if not empty)

Jeśli pozostawisz wiadomość powitalną pustą, nie będziemy wyświetlać wiadomości powitalnej nad ikoną czatu.

Pre-defined messages in chat window

Możesz skonfigurować do 3 typów predefiniowanych wiadomości w oknie czatu:

1. Pierwsza wiadomość w oknie czatu — To początkowa wiadomość powitalna, która automatycznie pojawia się, gdy klienci po raz pierwszy otwierają okno czatu. Użyj jej, aby przywitać klientów i nadać ton rozmowie.

2. Do 4 pytań na start — To klikalne sugestie pytań wyświetlane na początku czatu. Pomagają one pokierować klientami, pokazując typowe pytania, które mogą kliknąć, aby rozpocząć rozmowę, dzięki czemu łatwiej jest im zacząć.

3. Wiadomość zastępcza w polu wpisywania — To tekst podpowiedzi, który pojawia się w polu wpisywania czatu, zanim klienci zaczną pisać. Daje wskazówkę, o co klienci mogą zapytać, na przykład “Zapytaj mnie o cokolwiek 🤗” albo “Jak mogę Ci dziś pomóc?”

Te ustawienia kontrolują standardowe otwarcie czatu. Gdy klient otwiera czat przez link “Question About This Product?”, Shoply zamiast tego pokazuje nazwę produktu, krótkie wyróżnienie produktu oraz automatycznie wygenerowane pytania dotyczące tego produktu. Nie musisz pisać pytań startowych dla każdego produktu. Dowiedz się, jak działają pytania produktowe wspierane przez AI, albo wykonaj kroki, aby dodać przycisk pytań o produkt.

Zobacz przykład dla każdego typu predefiniowanych wiadomości: