> ## Documentation Index
> Fetch the complete documentation index at: https://pomoc.wenetasystent.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Wygląd widgetu

> Jak dostosować wygląd chatbota — kolory, tytuł, wiadomość powitalną i inne ustawienia wizualne widgetu.

## Dostosuj widgeta do swojej marki

Wszystkie ustawienia wyglądu znajdziesz w panelu Asystent AI w sekcji **Chatbot** (w grupie „Konfiguracja"), w zakładce **Wygląd**. Zmiany są widoczne na Twojej stronie po zapisaniu — nie musisz ponownie instalować kodu.

## Co możesz zmienić

<Steps>
  <Step title="Tytuł chatbota">
    Nazwa wyświetlana w nagłówku widgetu. Wpisz coś, co od razu mówi klientowi, z kim rozmawia.

    **Przykłady:**

    * "Asystent firmy XYZ"
    * "Doradca ABC Budownictwo"
    * "Pomoc — Studio Graficzne Pixel"
  </Step>

  <Step title="Wiadomość powitalna">
    Tekst widoczny na ekranie powitalnym, zanim klient zada pierwsze pytanie. Powinna zachęcać do rozmowy i jasno mówić, w czym bot może pomóc.

    **Przykład:** "Cześć! Jestem asystentem firmy XYZ. Zapytaj mnie o nasze usługi, cennik lub umów się na spotkanie."
  </Step>

  <Step title="Kolor widgetu">
    Kolor pojawia się na przycisku czatu oraz w nagłówku okna rozmowy.

    Masz do wyboru:

    * **8 predefiniowanych kolorów** — kliknij, żeby wybrać
    * **Dowolny kolor hex** — wpisz kod koloru (np. `#FF5733`), jeśli chcesz dopasować się dokładnie do palety swojej strony
  </Step>

  <Step title="Pozycja widgetu">
    Wybierz, w którym rogu strony ma się pojawić przycisk czatu:

    * **Prawy dolny róg** (domyślnie)
    * **Lewy dolny róg**
  </Step>

  <Step title="Wymaganie emaila">
    Jeśli włączysz tę opcję, klient musi podać swój adres email przed rozpoczęciem rozmowy.

    <Tip>
      Zalecamy włączenie tej opcji. Dzięki temu zbierasz dane kontaktowe potencjalnych klientów i możesz się z nimi skontaktować po rozmowie.
    </Tip>
  </Step>

  <Step title="Wymaganie telefonu">
    Opcjonalne pole — możesz dodatkowo wymagać numeru telefonu przed rozmową. Przydatne w branżach, gdzie kontakt telefoniczny jest głównym kanałem sprzedaży.
  </Step>

  <Step title="Link do polityki prywatności">
    Podaj adres URL swojej polityki prywatności. Link pojawi się w stopce widgetu, co buduje zaufanie klientów i spełnia wymogi RODO.
  </Step>
</Steps>

## Jak zmienić ustawienia

<Steps>
  <Step title="Zaloguj się do panelu">
    Wejdź na [app.wenetasystent.ai](https://app.wenetasystent.ai) i zaloguj się na swoje konto.
  </Step>

  <Step title="Przejdź do Chatbot → Wygląd">
    W panelu bocznym, w grupie **Konfiguracja**, kliknij **Chatbot**. Otworzy się strona „Konfiguracja chatbota". Wybierz zakładkę **Wygląd**.
  </Step>

  <Step title="Zmień wybrane ustawienia">
    Wprowadź zmiany, a następnie kliknij przycisk **Zapisz**, aby je zastosować.
  </Step>

  <Step title="Sprawdź efekt na stronie">
    Odśwież swoją stronę w przeglądarce. Zmiany powinny być widoczne od razu.
  </Step>
</Steps>

<Note>
  Zmiana wyglądu widgetu nie wymaga ponownej instalacji kodu na stronie. Wystarczy odświeżyć stronę, żeby zobaczyć nowe ustawienia.
</Note>

<Tip>
  Wybierz kolor pasujący do Twojej strony — widget powinien wyglądać jak naturalna część Twojej marki, a nie obcy element. Jeśli Twoja strona jest utrzymana w niebieskich tonach, ustaw niebieski kolor widgetu.
</Tip>

***

## Pozycja widgetu i konflikty z innymi elementami

Widget domyślnie pojawia się w **prawym dolnym rogu** strony (pozycję zmienisz w panelu — patrz krok „Pozycja widgetu" powyżej). Czasem w tym samym rogu znajduje się już inny element strony — najczęściej **baner zgody na pliki cookie**. Może to spowodować, że:

* widget **nakłada się** na baner cookie (jeden zasłania drugi), albo
* widget **w ogóle się nie uruchamia**, dopóki baner cookie zajmuje ten róg.

<Steps>
  <Step title="Zmień róg widgetu">
    Najprostsze rozwiązanie: w panelu (**Chatbot → Wygląd → Pozycja widgetu**) przenieś przycisk czatu do **przeciwnego rogu** niż baner cookie. Jeśli baner jest po prawej, ustaw widget po lewej.
  </Step>

  <Step title="Odsuń widget banerem CSS (opcjonalnie)">
    Jeśli oba elementy muszą zostać w tym samym rogu, możesz **odsunąć widget** od dołu strony własnym stylem CSS na swojej stronie. Dodaj poniższy fragment (np. w sekcji „Własny kod" / „Custom CSS" swojego CMS-a) i dostosuj wartość `bottom` do wysokości Twojego banera:

    ```css theme={null}
    /* Odsuwa przycisk czatu w górę, żeby nie nakładał się na baner cookie */
    #asystent-widget,
    .asystent-widget-launcher {
      bottom: 90px !important;
    }
    ```

    <Note>
      Nazwy klas/identyfikatorów oraz dokładny offset mogą zależeć od Twojej strony i wersji widgetu. Zwiększaj wartość `bottom` (np. 90px → 120px), aż przycisk przestanie zasłaniać baner. Jeśli nie masz pewności co do selektora, skontaktuj się z pomocą Asystent AI.
    </Note>
  </Step>

  <Step title="Zaakceptuj lub schowaj baner cookie">
    Gdy testujesz widget, zaakceptowanie (lub zamknięcie) banera cookie zwykle zwalnia róg i pozwala widgetowi się uruchomić. Jeśli po zamknięciu banera widget nadal się nie pokazuje, sprawdź [Widget się nie wyświetla](/troubleshooting/widget-not-showing).
  </Step>
</Steps>

<Warning>
  Jeśli używasz wtyczki do zgód cookie, która **ukrywa elementy firm trzecich** (np. iframe), może ona chować także widget Asystent AI. W takim wypadku dodaj domenę `widget.wenetasystent.ai` do wyjątków (whitelisty) w ustawieniach wtyczki cookie.
</Warning>

***

## Czego (jeszcze) nie można zmienić

Nie wszystkie elementy widgetu da się obecnie personalizować w panelu:

* **Własna ikona / logo / avatar chatbota** — obecnie nie można podmienić ikony przycisku ani awatara bota na własne logo.
* **Tekst powitania w formularzu czatu** — powitanie wyświetlane w formularzu (przed rozpoczęciem rozmowy) jest obecnie nieedytowalne.

<Note>
  Pracujemy nad rozszerzeniem opcji personalizacji. Jeśli któraś z tych możliwości jest dla Ciebie ważna, daj nam znać — to pomaga nam ustalać priorytety.
</Note>