# Widżet na stronie

> Jeden skrypt i kilka sposobów użycia: czat, pytania z linków, blok FAQ i przycisk Zapytaj AI.

Na stronę dodajesz **jeden skrypt**. Ładuje on asystenta ProseCaptain, a potem możesz go używać na kilka sposobów, w dowolnych miejscach strony.

```html
<script
  src="https://widget-api.prosecaptain.com/embed.js"
  data-widget-token="TWOJ_TOKEN"
  data-widget-id="ID_WIDZETU"
></script>
```

## Sposoby użycia

| Sposób | Co trzeba dodać | Jak wygląda |
|---|---|---|
| [Czat](/dokumentacja/widzet-czatu/) | nic, działa od razu po dodaniu skryptu | Przycisk w prawym dolnym rogu i pełne okno rozmowy |
| [Linki z pytaniem](/dokumentacja/javascript-api/#linki-z-pytaniem) | atrybut `pc-ask-question` na dowolnym linku lub przycisku | Twój własny link, który otwiera czat z gotowym pytaniem |
| [Blok FAQ](/dokumentacja/widzet-faq/) | kontener i moduł FAQ w miejscu bloku | Tytuł i sugerowane pytania jako przyciski |
| [Przycisk Zapytaj AI](/dokumentacja/widzet-zapytaj-ai/) | kontener i moduł Zapytaj AI w miejscu przycisku | Jeden przycisk „Zapytaj AI” w kolorze marki |
| [API JavaScript](/dokumentacja/javascript-api/) | własny kod | Otwieranie czatu i wysyłanie pytań z dowolnego miejsca strony |

Wszystkie te elementy rozmawiają w tym samym oknie czatu i korzystają z tej samej wiedzy asystenta. Moduły FAQ i Zapytaj AI używają już załadowanego skryptu, więc nic nie ładuje się drugi raz.

## Przykład: czat i pytania w treści

```html
<!-- raz na stronie, np. przed </body> -->
<script src="https://widget-api.prosecaptain.com/embed.js" data-widget-token="TWOJ_TOKEN" data-widget-id="ID_WIDZETU"></script>

<!-- dowolnie w treści -->
<p>Nie wiesz, który pakiet wybrać? <a href="#" pc-ask-question="Który pakiet jest dla mnie?">Zapytaj asystenta</a>.</p>
```

## Skąd wziąć kod

1. Zaloguj się w [app.prosecaptain.com](https://app.prosecaptain.com/signin).
2. Otwórz **Agent AI**, wybierz swój widżet i przejdź do zakładki **Instalacja**.
3. W karcie **Kod do osadzenia** wybierz **Widget czatu** i kliknij **Kopiuj do schowka**.

W kodzie są dwie wartości:

- `data-widget-token`: token workspace, wspólny dla wszystkich widżetów w workspace.
- `data-widget-id`: identyfikator widżetu. Bez niego użyty zostanie pierwszy opublikowany widżet z workspace.

Tytuł, pytania, kolor, język i instrukcje dla AI ustawiasz w aplikacji, w ustawieniach widżetu. Zmiany widać na stronie bez podmieniania kodu. Wybrane z nich możesz nadpisać [parametrami skryptu](/dokumentacja/parametry-widzetow/).

Na WordPressie nie musisz wklejać kodu. Zobacz [Widżety w WordPressie](/dokumentacja/wordpress/).