---
title: "Widżet AI na stronę"
description: "Osadź dymek czatu AI Requiply na swojej stronie, aby odwiedzający mogli pytać o dostępność i ceny bez opuszczania Twojej witryny."
canonical_url: "https://requiply.com/docs/pl/guides/online-booking/web-widget"
---
# Widżet AI na stronę

> Osadź dymek czatu AI Requiply na swojej stronie, aby odwiedzający mogli pytać o dostępność i ceny bez opuszczania Twojej witryny.

Integracja **Widżet AI na stronę** pozwala osadzić dymek czatu AI Requiply na Twojej własnej stronie. Odwiedzający mogą zadawać pytania, a asystent odpowiada na podstawie publicznych danych Twojej organizacji w Requiply.

Ta strona znajduje się w **Ustawienia → Integracje → Widżet na stronę**.

![Strona Widżet na stronę z kluczem widżetu, kodem do osadzenia, dozwolonymi domenami, ustawieniami wyglądu, akcjami i podglądem na żywo](https://requiply.com/docs/assets/settings/integrations/web-widget/widget-key-page.png)

<warning>

**Plany.** W planie **Advanced** odwiedzającym najpierw odpowiada asystent AI. Przy włączonej [skrzynce Rozmowy](https://requiply.com/docs/pl/guides/conversations/inbox) widżet działa też w planie **Core** jako czat z Twoim zespołem: wiadomości odwiedzających trafiają do Rozmów, gdzie odpowiada na nie Twój zespół. Gdy skrzynka jest wyłączona, widżet wymaga planu Advanced, a w innych planach zamiast konfiguracji klucza widżetu widać zachętę do przejścia na wyższy plan.

</warning>

## Kto odpowiada odwiedzającym

Przełącznik **Asystent AI odpowiada jako pierwszy** na tej stronie decyduje, kto odpowiada w widżecie:

- **Włączony** (plan Advanced): asystent odpowiada na podstawie Twojego katalogu, cen i dostępności, tworzy rezerwacje, a przy włączonej skrzynce przekazuje rozmowę Twojemu zespołowi, gdy odwiedzający poprosi o człowieka. Sposób przekazania konfiguruje się w [ustawieniach skrzynki omnichannel](https://requiply.com/docs/pl/guides/conversations/channels#karta-asystent-ai).
- **Wyłączony**: każda wiadomość trafia prosto do Twojego zespołu w [Rozmowach](https://requiply.com/docs/pl/guides/conversations/inbox), a odpowiedzi zespołu pojawiają się w widżecie odwiedzającego.

Przełącznik jest wspólny z czatem w portalu klienta w [Ustawieniach portalu](https://requiply.com/docs/pl/guides/online-booking/portal-settings#czat) i zapisuje się od razu. Rozmowy z widżetu mają w skrzynce oznaczenie z dymkiem czatu, opisane jako **Widżet na stronie**.

Co odwiedzający widzi w widżecie:

- **Formatowanie w odpowiedziach asystenta.** **Pogrubiony** tekst, listy wypunktowane (pokazywane z •) i linki. Linki otwierają się w nowej karcie.
- **Informacja, gdy rozmowę przejmuje zespół.** Gdy wiadomość odwiedzającego trafia do Twojego zespołu bez odpowiedzi asystenta, np. po przekazaniu rozmowy albo gdy czat obsługuje członek zespołu, widżet pokazuje *Your message went to our team. A manager will reply here.* (Twoja wiadomość trafiła do naszego zespołu. Odpowie tu menedżer.) Informacja pojawia się raz na każde oczekiwanie i ponownie dopiero po następnej odpowiedzi.
- **Odpowiedzi zespołu** pojawiają się w tym samym czacie na bieżąco.

<note>

Edycja lub usunięcie odpowiedzi w [skrzynce odbiorczej](https://requiply.com/docs/pl/guides/conversations/inbox#edycja-i-usuwanie-odpowiedzi) nie zmienia jej w widżecie. Odwiedzający, który już otrzymał odpowiedź, nadal widzi pierwotny tekst, więc sprawdź odpowiedź przed wysłaniem jej odwiedzającemu z widżetu.

</note>

## Dlaczego widżet na stronę jest ważny

Widżet daje odwiedzającym Twoją stronę możliwość samodzielnego zapytania o Twoją wypożyczalnię bez opuszczania strony. Korzysta z publicznego klucza widżetu, kontrolowanej listy dozwolonych domen i skryptu widżetu czatu Requiply.

Typowe zastosowania:

- Odpowiadanie na pytania o oddziały, opcje dostawy, metody płatności, szczegóły katalogu i dostępność.
- Szybki sposób, aby odwiedzający zapytali o możliwości wynajmu, zanim wyślą zapytanie o rezerwację.
- Dopasowanie wyglądu czatu na stronie do koloru marki i preferowanego motywu.
- Możliwość wygenerowania nowego klucza widżetu lub jego unieważnienia przez administratorów, gdy osadzony kod trzeba wymienić.

<note>

**Klucz strony** to publiczny identyfikator, który można bezpiecznie umieścić w kodzie HTML strony. Nadal ograniczają go dozwolone domeny skonfigurowane na tej stronie.

</note>

## Co zobaczysz

Zanim powstanie klucz, strona pokazuje stan pusty z przyciskiem **Utwórz klucz widżetu**. W planach innych niż Advanced w tym samym miejscu widać **Przejdź na wyższy plan, aby utworzyć klucz widżetu**.

![Stan pusty strony Widżet na stronę z akcją tworzenia klucza lub zachętą do przejścia na plan Advanced](https://requiply.com/docs/assets/settings/integrations/web-widget/empty-state.png)

Gdy klucz już istnieje, strona pokazuje:

- **Klucz widżetu**: aktywny publiczny klucz strony z etykietą stanu **Aktywny**.
- **Kod do osadzenia**: blok skryptu do wklejenia na Twojej stronie.
- **Dozwolone domeny**: domeny stron, na których widżet może się wczytywać.
- **Wygląd**: ustawienia koloru głównego, motywu i stylu narożników.
- **Akcje**: wygenerowanie nowego klucza, unieważnienie klucza i zapisanie zmian.
- **Podgląd**: podgląd na żywo dymka czatu i panelu w ramce iframe.

## Tworzenie klucza widżetu

<steps level="3">

### Otwórz stronę

Przejdź do **Ustawienia → Integracje → Widżet na stronę**.

### Utwórz klucz

Kliknij **Utwórz klucz widżetu**. Requiply tworzy aktywny klucz strony dla organizacji.

### Dodaj dozwolone domeny

Dodaj każdą domenę strony, na której widżet ma się wczytywać, np. `https://example.com` i `https://www.example.com`.

### Dostosuj wygląd

Wybierz kolor główny, motyw i styl narożników, które mają widzieć odwiedzający.

### Zapisz zmiany

Kliknij **Zapisz**. Widżet nie wczyta się nigdzie, dopóki nie zostanie zapisana co najmniej jedna dozwolona domena.

</steps>

## Osadzanie widżetu

Skopiuj **Kod do osadzenia** i wklej go tuż przed zamykającym tagiem `</body>` na każdej stronie witryny, na której ma się pojawić dymek czatu.

```html
<script>
  window.RequiplyWidget = {
    siteKey: "rq_widget_example",
    primaryColor: "#016E88",
    colorMode: "light",
    borderRadius: "round"
  };
</script>
<script async src="https://app.requiply.com/requiply-widget.js"></script>
```

Kod wygenerowany w Requiply zawiera Twój prawdziwy klucz strony i bieżące ustawienia wyglądu.

<warning>

Dodaj swoją stronę w sekcji **Dozwolone domeny**, zanim przetestujesz kod. Jeśli domeny brakuje, klucz widżetu istnieje, ale widżet nie może się wczytać z tej strony.

</warning>

## Dozwolone domeny

Dozwolone domeny określają, gdzie można używać publicznego klucza widżetu. Dodaj dokładną domenę każdej strony, na której ma się pojawić dymek czatu.

<table>
<thead>
  <tr>
    <th>
      Przykład
    </th>
    
    <th>
      Uwagi
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        https://example.com
      </code>
    </td>
    
    <td>
      Pozwala na domenę główną.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        https://www.example.com
      </code>
    </td>
    
    <td>
      Dodaj osobno, jeśli używana jest wersja z <code>
        www
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        https://shop.example.com
      </code>
    </td>
    
    <td>
      Dodaj osobno każdą subdomenę.
    </td>
  </tr>
</tbody>
</table>

Nie dodawaj ścieżek, takich jak `/pricing` czy `/booking`. Domena to tylko protokół, host i opcjonalny port.

<note>

Strona ostrzega, gdy nie skonfigurowano żadnej domeny: „Nie dodano jeszcze domen: widżet nie wczyta się nigdzie, dopóki nie dodasz co najmniej jednej.”

</note>

## Wygląd

Ustawienia wyglądu zmieniają zarówno zapisaną konfigurację widżetu, jak i podgląd na żywo.

<table>
<thead>
  <tr>
    <th>
      Ustawienie
    </th>
    
    <th>
      Opcje
    </th>
    
    <th>
      Co zmienia
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Kolor główny
      </strong>
    </td>
    
    <td>
      Dowolny kolor szesnastkowy
    </td>
    
    <td>
      Kolor dymka czatu, nagłówka, przycisku wysyłania i wiadomości odwiedzającego. Domyślnie kolor marki Twojej organizacji.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Motyw
      </strong>
    </td>
    
    <td>
      Systemowy, Jasny, Ciemny
    </td>
    
    <td>
      Czy widżet stosuje motyw systemowy odwiedzającego, czy wymusza wygląd jasny lub ciemny.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Narożniki
      </strong>
    </td>
    
    <td>
      Zaokrąglone, Łagodne, Ostre
    </td>
    
    <td>
      Zaokrąglenie narożników panelu, wiadomości, pola tekstowego i przycisków.
    </td>
  </tr>
</tbody>
</table>

![Podgląd na żywo z dymkiem czatu widżetu AI, panelem czatu, powitaniem, polem wiadomości i wybranym wyglądem](https://requiply.com/docs/assets/settings/integrations/web-widget/live-preview.png)

Użyj **Przywróć kolor marki**, jeśli kolor główny ma znów odpowiadać kolorowi marki organizacji.

## Generowanie nowego klucza lub unieważnienie klucza

Użyj tych akcji, gdy osadzony kod trzeba wymienić lub wyłączyć.

<tabs>
<tabs-item label="Wygeneruj nowy klucz">

Kliknij **Wygeneruj nowy klucz**, aby unieważnić bieżący klucz strony i wydać nowy.

Po wygenerowaniu nowego klucza:

- Skopiuj nowy kod do osadzenia.
- Zastąp stary kod wszędzie, gdzie jest zainstalowany.
- Dbaj o aktualność dozwolonych domen i ustawień wyglądu.

<warning>

Wygenerowanie nowego klucza psuje każdą stronę, która nadal używa poprzedniego klucza strony.

</warning>
</tabs-item>

<tabs-item label="Unieważnij klucz">

Kliknij **Unieważnij klucz**, aby wyłączyć widżet wszędzie, gdzie jest osadzony.

Po unieważnieniu strona wraca do stanu bez klucza, a nowy klucz możesz utworzyć później.

</tabs-item>
</tabs>

## Typowe scenariusze

### Uruchomienie widżetu na stronie

1. Przejdź do **Ustawienia → Integracje → Widżet na stronę**.
2. Kliknij **Utwórz klucz widżetu**.
3. Dodaj domeny swojej strony.
4. Ustaw kolor główny, motyw i narożniki.
5. Kliknij **Zapisz**.
6. Skopiuj kod do osadzenia.
7. Wklej kod przed `</body>` na każdej stronie witryny, na której ma się pojawić widżet.
8. Otwórz stronę i sprawdź, czy pojawia się dymek czatu.

### Dodanie widżetu do innej domeny

1. Dodaj nową domenę w sekcji **Dozwolone domeny**.
2. Kliknij **Zapisz**.
3. Dodaj ten sam kod do osadzenia na nowej stronie.

### Wymiana klucza, który wyciekł lub jest stary

1. Kliknij **Wygeneruj nowy klucz**.
2. Potwierdź w oknie dialogowym.
3. Skopiuj nowy kod.
4. Zastąp stary kod na swojej stronie.

## Rozwiązywanie problemów

**Widżet się nie pojawia**
Sprawdź, czy strona zawiera wygenerowany kod, czy adres URL skryptu się wczytuje i czy bieżąca domena strony jest na liście **Dozwolone domeny**.

**Widżet pojawia się w jednej domenie, ale nie w innej**
Dodaj osobno każdą dokładną domenę. `https://example.com` i `https://www.example.com` to różne domeny.

**Podgląd się zmienia, ale strona nie**
Kliknij **Zapisz**, a potem odśwież stronę. Sprawdź też, czy kod na stronie zawiera bieżące wartości `primaryColor`, `colorMode` i `borderRadius`.

**Odwiedzający widzą błąd asystenta**
Spróbuj ponownie za chwilę. Jeśli problem się powtarza, sprawdź w [Zużyciu AI](https://requiply.com/docs/pl/ai/ai-usage), czy Twoja organizacja ma dostępne kredyty AI.


## Sitemap

See the full [sitemap](https://requiply.com/docs/sitemap.md) for all pages.