# Chat

W Responso masz możliwość utworzenia chatu i osadzenia go na stronie swojego sklepu internetowego. Wiadomości z chatu będą trafiały do inboxu Responso, gdzie możesz nimi wygodnie zarządzać.

## Tworzenie chatu

1. Po zalogowaniu do Responso, kliknij przycisk ***Dodaj kanał*** w prawym górnym rogu.
2. Wybierz ***Chat*****.**
3. *Kliknij przycisk **Utwórz***.
4. Zobaczysz okno konfiguracji czatu wraz z podglądem. Dzięki temu przed wprowadzeniem zmian możesz zobaczyć, jak będą one wyglądać. Zmiany wprowadzane w sekcjach po lewej stronie będą od razu pojawiały się w podglądzie czatu widocznym po prawej.<br>

   <figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FcirE1Et82qGzUvoTkUsm%2FDokumentacha%20chat%201.png?alt=media&#x26;token=01e3127e-c393-4fbb-a935-750d923c816d" alt=""><figcaption></figcaption></figure>

### Podstawowe ustawienia

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2F6Ml1jzdGNAaLaSnYoorL%2FDokumentacha%20chat%201.png?alt=media&#x26;token=6f85dc9f-1c22-4f1c-b32b-8a191d764c5c" alt=""><figcaption></figcaption></figure>

**Nazwa** – to będzie nazwa twojego chatu wyświetlana na liście utworzonych chatów w Responso.&#x20;

**Adres URL do Twojego sklepu** – tutaj wklej adres stron y, na której chcesz osadzić czat.

### Wygląd

W tej sekcji możesz określić kolory i umiejscowienie okna czatu.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2Fbrt8E6BCQEryW3wYuL67%2FDokumentacja%20chat%202.png?alt=media&#x26;token=0ca37e22-40dd-4a0b-9294-baeb6a9c49cc" alt=""><figcaption></figcaption></figure>

**Kolor podstawowy** – to kolor elementów takich jak zaznaczenie wiadomości klienta, przycisk wysyłki czy nagłówek okna czatu w widoku formularza. Możesz wybrać dowolny kolor używając suwaka, próbnika (aby pobrać kolor z dowolnego miejsca na ekranie) lub wpisać kod RGB.

**Kolor wtórny –** to kolor innych elementów, takich jak tekst wiadomości klienta, wiadomości powitalnej. Możesz wybrać dowolny kolor używając suwaka, próbnika (aby pobrać kolor z dowolnego miejsca na ekranie) lub wpisać kod RGB.

**Wyrównanie** – możesz zdecydować, czy okno czatu ma się wyświetlać po lewej czy po prawej na Twojej stronie.

**Odstęp pionowy** – to odstęp ikony i okna czatu od dolnej krawędzi strony.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FWpzJ1q7tJQGUqROs21Cc%2FDokumentacja%20chat%203.png?alt=media&#x26;token=d96c62c5-7e90-4938-9176-eb34d41bc69c" alt=""><figcaption></figcaption></figure>

Aby podgląd był możliwie jak najbardziej zbliżony do wyglądu Twojej strony, na której osadzisz czat, możesz również zmienić kolor tła podglądu.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FwFa2L0PJgkmSPSg6Wnff%2FDokumentacja%20chat%204.png?alt=media&#x26;token=5763cba6-7495-414b-aad0-27413e410357" alt=""><figcaption></figcaption></figure>

### **Formularz przed czatem**

W tej sekcji możesz zdecydować, czy konwersacja na czacie ma się rozpoczynać wypełnieniem krótkiego formularza. Formularz zawiera pola: Imię i nazwisko, e-mail, temat wiadomości i treść wiadomości. Modyfikacja pól formularza nie jest możliwa. Wszystkie pola są wymagane do rozpoczęcia czatu.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FtYFjDYyTZqgNgjklLD3m%2FDokumentacja%20chat%205.png?alt=media&#x26;token=c37d278f-7e3d-4bfb-9141-9b179c12d3da" alt=""><figcaption></figcaption></figure>

**Widoczność formularza** – przesuń suwak, aby dodać do czatu formularz. Pojawi się on w podglądzie.

**Wiadomość powitalna** – to wiadomość, która będzie widoczna w nagłówku chatu, zarówno w widoku formularza jak i wiadomości po godzinach pracy.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FjV2DjXotfN5PT6bq7uvW%2FDokumentacja%20chat%206.png?alt=media&#x26;token=440b0684-3ccc-4d77-84c0-0c1c1e580fa7" alt=""><figcaption></figcaption></figure>

### Lista dostępu do ścieżek

W tej sekcji możesz zdecydować, na których podstronach Twojego sklepu ma być wyświetlany czat.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2F5s2UvLNPcmNtYOx0soeD%2FDokumentacja%20chat%207.png?alt=media&#x26;token=88e5c625-eb5c-4d44-bda3-1993206bf50c" alt=""><figcaption></figcaption></figure>

**Typ listy** – wybierz, czy lista ścieżek, które podasz, ma być czarną listą czy białą listą. Wybierz ten typ listy, który łatwiej Ci będzie stworzyć – jeśli chcesz wyświetlać czat tylko na kilku podstronach, wybierz białą listę. Jeśli chcesz go wyświetlać prawie wszędzie i wykluczeń jest niewiele, wybierz czarną listę. Jeśli chcesz wyświetlać czat wszędzie, pozostaw typ czarna lista i nie dodawaj żadnych ścieżek.

**Czarna lista** oznacza, że czat będzie wyświetlany **wszędzie poza wskazanymi podstronami**.

**Biała lista** oznacza, że czat będzie wyświetlany **tylko na wskazanych podstronach**.

**Lista ścieżek** – kliknij *Dodaj* i w polu, które się pojawi, wklej ścieżkę (adres podstrony), na na których czat ma być wyświetlany (w przypadku typu: biała lista) lub na których ma być niewidoczny (w przypadku typu: czarna lista).

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FmSwqbqr6YksmOnuBW6za%2FZrzut%20ekranu%202025-03-14%20o%2011.22.48.png?alt=media&#x26;token=c3935574-f1ef-4e41-84cd-c7e90c43a67c" alt=""><figcaption></figcaption></figure>

### Godziny pracy

W tej sekcji możesz określić, w jakich godzinach czat ma być dostępny.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FD9qZnHO3McTRuzcnNcN4%2FDokumentacja%20chat%209.png?alt=media&#x26;token=b062baf7-b1d8-49df-93fd-b79fc4c11b44" alt=""><figcaption></figcaption></figure>

Dni i godziny dostępności czatu możesz ustawić dowolnie. W każdej chwili możesz je zmienić. Upewnij się tylko, że w godzinach dostępności czatu pracują agenci z dostępem do niego, aby wiadomości pisane przez klientów na czacie nie pozostały bez odpowiedzi.

**Strefa czasowa** – pamiętaj, że wpisane powyżej godziny będą godzinami dla wybranej strefy czasowej.

### Po godzinach pracy

Tutaj możesz zdecydować, co ma się dziać z oknem czatu po godzinach wskazanych w poprzedniej sekcji.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FW3mlOWdHlwIMVvn4HaAS%2FDokumentacja%20chat%2010.png?alt=media&#x26;token=682b0f04-298b-4463-b5d9-af45f7c723fa" alt=""><figcaption></figcaption></figure>

**Zachowanie po godzinach pracy**

* **Wyświetl komunikat** – jeśli zdecydujesz się na tę opcję, po godzinach pracy czat będzie widoczny, ale nie będzie można wysłać wiadomości. Widoczny będzie komunikat, który możesz wpisać poniżej.
* **Ukryj widżet czatu** – wybór tej opcji sprawi, że po godzinach pracy czatu ani ikona, ani okno czatu nie będą widoczne dla klientów. Wiadomość po godzinach pracy zniknęła także z podglądu.

**Wiadomość wyświetlana na czacie po godzinach pracy** – komunikat wpisany w tym polu jest od razu widoczny na podglądzie.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FMg5dotM81gRjNG8PK3xy%2FDokumentacja%20chat%2011.png?alt=media&#x26;token=87ec8835-f754-468a-8792-e20db4a26daa" alt=""><figcaption></figcaption></figure>

### **Dodatkowe ustawienia**

W tej sekcji możesz wskazać agentów, którzy będą mieć dostęp do czatu.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2F09Vqm0fZ20P9M9xMZafN%2FDokumentacja%20chat%2012.png?alt=media&#x26;token=da496357-3201-42e1-b457-0e5ccbb0b200" alt=""><figcaption></figcaption></figure>

**Lista agentów z dostępem do czatu** – po kliknięciu w to pole zobaczysz listę agentów do wyboru. Możesz wybrać dowolną liczbę pracowników. **Jeśli nie wskażesz nikogo, nikt nie będzie mógł odpisywać na wiadomości z chatu**.&#x20;

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FW474BzHsMqZZk5vJoFuo%2FDokumentacja%20chat%2013.png?alt=media&#x26;token=f4880a5f-4601-4d1f-99b0-6176c5f816fe" alt=""><figcaption></figcaption></figure>

5. Po ustawieniu wszystkich parametrów kliknij ***Utwórz***, aby zapisać czat.

## Osadzenie czatu na stronie

1. Twój nowoutworzony czat pojawił się na liście w zakładce Chat. Aby osadzić go na stronie sklepu, kliknij ***Wyświetl kod***.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2F4KANXHcmrcWGUkZFYzqi%2FChat%20%E2%80%93%20lista%20chato%CC%81w.png?alt=media&#x26;token=20f0aba6-1ba8-41a6-8444-8c79bf684bd9" alt=""><figcaption></figcaption></figure>

2. Kliknij ***Kopiuj***.<br>

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2F8UO8GwhUywiNG7feqiP6%2FChat%20%E2%80%93%20kod%20chatu.png?alt=media&#x26;token=c81db82f-9dc5-4967-95a9-d417e2b0646e" alt="" width="371"><figcaption></figcaption></figure>

3. Wklej skopiowany kod do kodu swojej strony internetowej tam, gdzie dodajesz inne skrypty JavaScript (z reguły znajdują się one pod koniec sekcji body).

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FMlWDgl35tITMA9s22p3N%2Fchat-shopify.mp4?alt=media&token=5792f420-83d3-421d-b666-2666003b835e>" %}
Osadzenie czatu w kodzie na przykładzie Shopify
{% endembed %}

4. Na stronie Twojego e-sklepu pojawi się ikonka chatu.

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FH6wjrMFv5DdlrKTXdSOZ%2FChat%20%E2%80%93%20ikona%20chatu%20na%20stronie.png?alt=media&#x26;token=558117c0-081b-4d31-8984-682e76ac4893" alt="" width="563"><figcaption><p>Przykładowa strona sklepu z zaimplementowanym chatem. Ikonka chatu widoczna w prawym dolnym rogu.</p></figcaption></figure>

## Język chatu

Treści edytowalne i wiadomości wymieniane na chacie mogą być w dowolnym języku. Treści domyślne (pomocnicze; np. *Wpisz wiadomość*, *Agent dołączył do czatu*) będą wyświetlane w zależności od ustawień lokalizacji przeglądarki w jednym z dostępnych języków:

* en\_US - angielski
* pl\_PL - polski
* pt\_BR - brazylijski
* ro\_RO - rumuński
* de\_DE - niemiecki
* it\_IT - włoski
* cs\_CZ - czeski

Jeśli ustawienia lokalizacji przeglądarki są inne niż wymienione powyżej, domyślne wiadomości czatu będą w języku angielskim.

## Konwersacja z kupującym na chacie

1. Aby zainicjować czat, klient musi kliknąć ikonę czatu. Wtedy, w zależności od ustawień, zobaczy od razu okno konwersacji lub widok formularza. Kupujący powinien wpisać imię i nazwisko, adres e-mail (posłuży do powiązania ticketu z zamówieniami z BaseLinkera), temat, którego dotyczy wiadomość i treść wiadomości. Aby wysłać wiadomość, należy kliknąć *Rozpocznij czat*.<br>

   <figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FBtn1nBRFNTCZPn0grpg3%2FChat%20%E2%80%93%20okno%20chatu%20start.png?alt=media&#x26;token=1606f848-f04e-4f70-93a3-602f9a5d1768" alt="" width="317"><figcaption></figcaption></figure>
2. Po rozpoczęciu chatu klient otrzymuje informację, że oczekuje na agenta.<br>

   <figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FBcBv0jbEexgxqZ5oiznZ%2FChat%20-%20czekiwanie%20na%20agenta.png?alt=media&#x26;token=d4d46f8f-9d08-482d-85f7-8e6cef3f9372" alt="" width="363"><figcaption></figcaption></figure>
3. Gdy pracownik otworzy ticket wiadomości z chatu, kupujący otrzyma informację, że konkretny agent dołączył do czatu. Otworzenie ticketu przez agenta powoduje automatyczne przypisanie danego ticketu do tego agenta.<br>

   <figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FW7dZSq3EI3NEHf7gD5am%2FChat%20%E2%80%93%20agent%20do%C5%82a%CC%A8czy%C5%82.png?alt=media&#x26;token=427a139d-378f-4b56-98c3-b4ec9d8be4b5" alt="" width="345"><figcaption></figcaption></figure>

## Tickety chatu – co możesz z nimi zrobić?

Tickety czatu wyglądają identycznie jak inne, standardowe tickety w Responso. Po prawej stronie w widoku ticketu możesz zobaczyć informacje o tickecie: jego ID, datę utworzenia, datę i nadawcę ostatniej wiadomości w tickecie, status, priorytet, login sprzedawcy (to nazwa chatu, jaka została mu nadana podczas jego tworzenia) oraz inbox, do którego jest przypisany. Możesz z tego miejsca zobaczyć lub dodać tagi, przypisanego agenta, zespół, obserwujących czy powiązane z ticketem zadania.&#x20;

Nad ticketem, pod przyciskiem z wielokropkiem, znajdziesz możliwości modułu zadań: możesz utworzyć task powiązany z ticketem lub wyświetlić projekty.

Podobnie jak w przypadku innych ticketów, dla ticketu chatu dostępne są informacje o zamówieniach z BaseLinkera, jeśli udało się na podstawie podanego przez kupującego adresu e-mail odnaleźć i powiązać jakiekolwiek zamówienia.

Dla ticketu chatu dostępne są także szybkie akcje: nowy ticket (jeśli chcesz w tym momencie szybko utworzyć nowy ticket w ramach integracji IMAP / przekierowania e-mail), zamknięcie ticketu, dodanie nadawcy do listy kontaktów czy wyłączenie następnego autorespondera.

### Automatyczne akcje dla ticketów chatu

Autorespondery, podobnie jak inne automatyczne akcje, mogą być tworzone także dla ticketów chatu.

Aby utworzyć automatyczną akcję dla ticketów chatu, w warunkach wybierz Integracje – jest – \[nazwa chatu]. Dodając kolejne warunki możesz szczegółowo określić, których ticketów z czatu ma dotyczyć dany workflow – np. wybierając konkretny sentyment czy kontekst. W ramach akcji masz dostępne wszystkie możliwości – możesz m.in. wysłać autoresponder, automatycznie zmienić status w BaseLinkerze (jeśli będą dostępne zamówienia do powiązania) czy ustawić priorytet.<br>

<figure><img src="https://2081275209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxBd7AiJvoHKedJlJN54%2Fuploads%2FQzRS3AdCQCdAnXfnoUcn%2FChat%20%E2%80%93%20automatyczna%20akcja.png?alt=media&#x26;token=e42e3e7d-b265-4ca6-a135-be07f8970625" alt="" width="563"><figcaption></figcaption></figure>