---
title: Widget na stronie, link do agenta i aplikacja na telefonie
description: 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ę.
section: guide
keywords: widget na stronę, kod widgetu, instalacja widgetu, Tilda, Shopify, WordPress, link do agenta AI, PWA, aplikacja PWA, powiadomienia push, podgląd linku, link do chatbota, widget do sklepu internetowego
updated: 2026-09-06
---
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.

> [!tip] 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](/wiki/pl/platform-shopify) i [WordPress](/wiki/pl/platform-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:

1. Otwórz stronę w trybie incognito i kliknij przycisk widżetu. Zadaj pytanie o produkt.
2. Otwórz link do agenta z telefonu. Sprawdź, czy oferowana jest instalacja.
3. Wyślij link do siebie na komunikator i zobacz podgląd.
4. 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.