Widget na stronie, link do agenta i aplikacja na telefonie
Jak dodać agenta do strony za pomocą jednej linijki kodu, jak działa krótki link do mediów społecznościowych i komunikatorów oraz jak klient instaluje Twojego agenta na telefonie jako aplikację.
Agent ma dwa oblicza. Na stronie internetowej to okno w rogu, które otwiera się po kliknięciu przycisku. W mediach społecznościowych i komunikatorach to strona dostępna pod krótkim linkiem, która działa jak mały sklep i może być zainstalowana na telefonie jako aplikacja. Katalog, warunki, dialogi i zgłoszenia są przy tym wspólne: agent jest jeden.
Wszystko, co opisano poniżej, znajduje się w sekcji „Widżet i link”.
Link do agenta#
Krótki adres typu comag.vibevox.pro/c/your-shop. Umieszcza się go w nagłówku profilu Instagram, TikTok lub Telegram, wysyła w WhatsApp, dodaje do opisu pod filmem na YouTube.
Po wysłaniu do komunikatora link rozwija się w kartę: okładka, nazwa sklepu i opis. Wszystkie trzy pola można dostosować:
- Tytuł podglądu — domyślnie nazwa sklepu.
- Opis podglądu — krótka fraza o tym, o co można zapytać.
- Okładka — generowana automatycznie z Twojego koloru akcentowego, logo i zdjęć produktów. Możesz wgrać własną, rozmiar 1200 na 630 pikseli.
Najłatwiej sprawdzić, jak wygląda podgląd, wysyłając link do siebie w Telegramie.
Kod dla strony internetowej#
Jedna linia kodu, którą wstawia się przed zamykającym tagiem </body> na wszystkich stronach. Kopiuje się ją przyciskiem w panelu administracyjnym.
Gdzie dokładnie wkleić na popularnych platformach:
| Platforma | Gdzie wkleić |
|---|---|
| Tilda | „Ustawienia witryny → Więcej → Kod HTML dla body” |
| Shopify | „Motyw → Edytuj kod → theme.liquid, przed </body>” |
| WordPress | „Wygląd → Edytor motywów → footer.php, lub wtyczka do wstawiania kodu” |
| Wix | „Ustawienia → Kod niestandardowy → dodaj do Body end” |
| Własna strona | Bezpośrednio w szablon przed </body> |
Po wklejeniu w prawym dolnym rogu pojawi się przycisk. Położenie można zmienić na lewe w ustawieniach, kolor i motyw — również tam.
Widżet ładuje się asynchronicznie i nie spowalnia strony. Jeśli masz skonfigurowane ścisłe CSP, zezwól na domenę comag.vibevox.pro w script-src i connect-src.
Wygląd#
Ustawienia, które widzi kupujący:
- Nazwa sklepu i imię asystenta. To drugie to podpis rozmówcy w nagłówku czatu.
- Powitanie. Pierwsza fraza. Dobre powitanie obiecuje korzyść, a nie tylko wita.
- Podpowiedzi na początku dialogu. Do czterech przycisków z pytaniami. Puste — zostaną wygenerowane automatycznie na podstawie katalogu.
- Ton komunikacji. Z listy lub własny: „ciepły i zwięzły”, „ekspercki, na Pan/Pani”.
- Kolor akcentowy. Jeden kolor definiuje przycisk, linki i podświetlenie kart.
- Logo. Stanie się ono również ikoną aplikacji na telefonie.
- Przycisk mikrofonu. Rozpoznawanie mowy w przeglądarce. Jeśli przeglądarka tego nie obsługuje, kupujący nagra wiadomość głosową, którą rozszyfruje Gemini.
Po prawej stronie znajduje się podgląd na żywo: zmienia się on w miarę pisania. Przycisk „Zapisz” przenosi zmiany na stronę.
Jasny i ciemny motyw#
Czat ma dwa motywy graficzne, które przełącza się w jednym polu ustawień — „Motyw”.
| Wartość | Co widzi kupujący |
|---|---|
| „Jak u odwiedzającego” | Motyw dostosowuje się do ustawień telefonu lub komputera użytkownika: ciemny w nocy, jasny w dzień. |
| „Jasny” | Zawsze jasne okno, niezależnie od urządzenia. |
| „Ciemny” | Zawsze ciemne okno. |
Domyślnie ustawione jest „jak u odwiedzającego”, i w większości przypadków jest to właściwy wybór: osoba z ciemnym motywem na telefonie nie dostanie w twarz białym błyskiem, a ta, która przywykła do jasnego, zobaczy znajome okno.
Sztywny motyw jest potrzebny, gdy sama strona internetowa jest utrzymana w jednej konwencji. Ciemny landing page z jasnym czatem w rogu wygląda jak łatka, i na odwrót. W takim przypadku ustaw ten sam motyw co na stronie, a widżet wtopi się w design.
Kolor akcentowy działa niezależnie od obu motywów: przyciski, linki i podświetlenie kart przyjmują Twój firmowy kolor, a tło i tekst zmieniają się wraz z motywem. Najłatwiej sprawdzić obie opcje w podglądzie po prawej stronie — odświeża się on natychmiast, gdy zmieniasz wartość.
Karty produktów prowadzą do Twojej witryny#
Agent odpowiada nie jednolitym tekstem, lecz kartami: zdjęcie, nazwa, cena, przycisk. Za przyciskiem zawsze kryje się adres — strona produktu na Twojej witrynie lub oryginalny post w mediach społecznościowych, jeśli karta została stamtąd pobrana.
Wewnątrz widżetu na stronie przejście następuje w tym samym oknie, aby nie tworzyć wielu zakładek. Na stronie agenta dostępnej pod linkiem karta otwiera się w nowej zakładce, aby dialog nie został utracony.
Dla sklepów na Shopify i WooCommerce jest miły szczegół: przycisk nie tylko otwiera produkt, ale także dodaje go do koszyka sklepu za pomocą standardowego mechanizmu platformy. Szczegóły znajdziesz w artykułach o Shopify i WordPress.
I jeszcze: widżet odczytuje znacznik produktu na stronie, na której jest otwarty, i przekazuje go agentowi. Dlatego pytanie „a czy jest w niebieskim?” na karcie produktu jest rozumiane w kontekście, bez konieczności precyzowania, o co chodzi.
Aplikacja na telefonie kupującego#
Strona agenta może być zainstalowana jako aplikacja. Kupujący otwiera link z telefonu, widzi propozycję dodania do ekranu głównego i otrzymuje ikonę z Twoim logo.
- Nazwa pod ikoną — jedno słowo do 12 znaków. Puste — weźmiemy pierwsze słowo nazwy sklepu.
- Ikona — wgrane logo. Jeśli logo nie ma, używane jest logo Commerce Agents.
- Na iPhone'ach instalacja odbywa się poprzez „Udostępnij” → „Dodaj do ekranu początkowego”, jest to ograniczenie Safari, a agent sam podpowiada kroki.
Po instalacji kupującemu można wysyłać powiadomienia push z sekcji „Dialogi”. Zgodę na nie wyraża sam, klikając dzwonek w nagłówku czatu.
Załączniki od kupującego#
W czacie jest spinacz: zdjęcia, wideo lub audio do 20 megabajtów. Jeśli przeglądarka nie ma rozpoznawania mowy, przytrzymanie mikrofonu nagrywa wiadomość głosową.
Plik analizuje Gemini: co jest pokazane, jaki tekst znajduje się na obrazie, co zostało powiedziane na głos. Agent odpowiada na podstawie tej analizy, a Ty widzisz w dialogu zarówno sam plik, jak i krótki opis. To przydaje się w branżach, gdzie łatwiej jest pokazać niż opisać: części zamienne, naprawy, dobór na podstawie zdjęć.
Piksel zakupu dla strony z koszykiem#
Jeśli płatność odbywa się na Twojej stronie, a nie w czacie, wklej na stronę „Dziękujemy za zamówienie” krótki fragment z panelu administracyjnego, podstawiając numer zamówienia i kwotę. Zakup zostanie powiązany z dialogiem, a w statystykach będzie widać, które rozmowy kończą się sprzedażą.
Sprawdzenie#
Trzy minuty, które warto poświęcić po konfiguracji:
- Otwórz stronę w trybie incognito i kliknij przycisk widżetu. Zadaj pytanie o produkt.
- Otwórz link do agenta z telefonu. Sprawdź, czy oferowana jest instalacja.
- Wyślij link do siebie na komunikator i zobacz podgląd.
- Zajrzyj do „Dialogów”: tam powinny pojawić się obie konwersacje.
Częste pytania#
Widżet na stronie i link — czy to różni agenci#
To ten sam. Katalog, warunki, dialogi i zgłoszenia są wspólne. Różni się tylko wygląd: na stronie okno jest w rogu, pod linkiem — strona na cały ekran, którą można zainstalować na telefonie.
Czy można zmienić adres linku#
Adres jest generowany z nazwy sklepu podczas tworzenia witryny. Jeśli potrzebujesz innego, napisz do nas na Telegramie — zmienimy ręcznie, aby nie zepsuć już rozpowszechnionych linków.
Czy widżet spowolni stronę#
Nie. Skrypt waży niewiele i ładuje się asynchronicznie, po załadowaniu głównej zawartości strony. Samo okno czatu ładuje się tylko wtedy, gdy kupujący kliknie przycisk.
Co widzi kupujący, jeśli agent jest wyłączony#
Nic: przycisk się nie pojawia, a strona pod linkiem pokazuje, że agent jest niedostępny. Przełącznik znajduje się w sekcji „Widżet i link”.
Jak usunąć napis „Działa na Commerce Agents”#
Na razie nie ma takiej możliwości: podpis pozostaje na wszystkich planach taryfowych. Jest klikalny i prowadzi na naszą stronę — to część ceny, dzięki której usługa kosztuje 29 € zamiast znacznie wyższej kwoty.