> For the complete documentation index, see [llms.txt](https://docs.jedidesk.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jedidesk.com/vidzhet/yak-stvoriti-chat-jedidesk.md).

# Як створити чат #jedidesk

#### **Навігація:**

1. [Налаштування мови та тексту](#id-1.-nalashtuvannya-movi-ta-tekstu)
2. [Налаштування міні-віджета](#id-2.-nalashtuvannya-mini-vidzheta)
3. [Згенерований код віджета](#id-3.-zgenerovanii-kod-vidzheta)
4. [Анімація набору повідомлень](#id-4.-animaciya-naboru-povidomlen)
5. [Відео-інструкція](#id-5.-video-instrukciya)

***

#### **1. Налаштування мови та тексту**

Відкрийте **Налаштування** **->** **Інтеграції** **->** [**Налаштування віджету**](https://app.jedidesk.com/settings-widget).

Кожна мова<mark style="color:red;">\*</mark> віджета налаштовується окремо. Натисніть на кнопку <mark style="background-color:blue;">**Виберіть мову**</mark>, та виберіть, наприклад, українську. \
Заповніть шаблони віджета та натисніть <mark style="background-color:blue;">**Зберегти**</mark>:

<figure><img src="/files/39NlCM8zoIVSSwAqFtA8" alt=""><figcaption><p>Список мов віджета за замовчуванням</p></figcaption></figure>

<figure><img src="/files/Bzb0LP4WbKGv3Oi4T75D" alt=""><figcaption><p>Налаштування віджета</p></figcaption></figure>

***

Якщо ви бажаєте скинути свої налаштування, натисніть <mark style="background-color:blue;">**Налаштування за замовчуванням**</mark>.

За замовчуванням для віджета доступно 3 мови: англійська, українська, російська, але ви завжди можете додати більше мов через кнопку <mark style="background-color:blue;">**Додати нову мову**</mark>:

<figure><img src="/files/Y5N54LyjwmhlvjBHC6z6" alt=""><figcaption><p>Додаткові мови для віджета</p></figcaption></figure>

***

Щоб обрана мова працювала в віджеті, активуйте її через перемикач:

<figure><img src="/files/AE58Vm6CWLIPM9u7Ope9" alt=""><figcaption><p>Активація обраної мови в віджеті</p></figcaption></figure>

***

Якщо вимкнути прийняття звернень через віджет, він буде працювати лише як редірект в підключені чат-боти, тому клієнти не зможуть звертатися через чат:

<figure><img src="/files/p6TdvMBGOcymlXbqzK2G" alt=""><figcaption><p>Активація віджета як чату</p></figcaption></figure>

{% hint style="danger" %} <mark style="color:red;">**Увага!**</mark> У тому випадку, коли віджет налаштований на кілька мов, мова віджету залежить від мови браузера клієнта, а не від мови веб-ресурсу, на якому розміщено віджет. Наприклад, якщо браузер налаштований на українську мову, клієнт буде бачити віджет на українській мові.
{% endhint %}

***

#### **2. Налаштування міні-віджета**

Окрім розгорнутого віджета, можна налаштувати міні-віджет:<br>

<figure><img src="/files/wTsVgN7kWXs2R07BQd4x" alt=""><figcaption></figcaption></figure>

***

#### **3.** Налаштування положення міні-віджета

У налаштуваннях зовнішнього вигляду віджета з’явилась можливість змінювати положення міні-віджета на сайті. Це допоможе розмістити іконку вище, нижче або змістити її вбік, якщо вона перекриває важливі елементи сайту.

**Вибір сторони відображення**

Спочатку оберіть, з якого боку сайту буде відображатися віджет:

* Ліворуч
* Праворуч

Якщо обрано положення ліворуч, боковий відступ буде рахуватися від лівого краю сайту. Якщо обрано праворуч — від правого краю сайту.

**Налаштування відступів для десктопа**

Для десктопної версії сайту можна налаштувати положення міні-іконки за допомогою відступів у пікселях.

**Desktop: відступ іконки знизу, px**\
Визначає, на скільки пікселів міні-віджет буде піднятий від нижнього краю екрана.

**Desktop: відступ іконки збоку, px**\
Визначає відступ міні-віджета від лівого або правого краю сайту, залежно від обраної сторони відображення.

**Пріоритет відображення іконки**\
Відповідає за те, як міні-віджет буде відображатися поверх інших елементів сайту. Якщо на сайті є інші плаваючі кнопки або блоки, які перекривають віджет, можна збільшити це значення.

<figure><img src="/files/txzv2N1uLjMmjcSaGKpg" alt=""><figcaption></figcaption></figure>

**Окремі налаштування для мобільних**

Якщо потрібно, щоб на смартфонах міні-віджет мав інше положення, увімкніть перемикач **Окремі налаштування для мобільних**.

Після увімкнення можна окремо задати положення міні-віджета для мобільної версії сайту. Це зручно, якщо на мобільному екрані іконка перекриває кнопки, меню, кошик або інші важливі елементи.<br>

<figure><img src="/files/CYrlRKE0OcCSSjeEfsaq" alt=""><figcaption></figcaption></figure>

**Розширені CSS-правки**

Для більш гнучкого налаштування доступний розділ **Розширені CSS-правки**. За замовчуванням це поле приховане. Щоб відкрити його, натисніть на назву розділу.

Цей розділ призначений для додаткового налаштування зовнішнього вигляду віджета через власні CSS-правила. Його варто використовувати лише тим користувачам або розробникам, які розуміють, як працюють CSS-стилі.

<figure><img src="/files/ehRdqEwGzCh39MUBzHcl" alt=""><figcaption></figcaption></figure>

#### 4. Згенерований код віджета

Після налаштування віджета, натисніть <mark style="background-color:blue;">**Зберегти**</mark> та скопіюйте згенерований код віджета для додавання на ваш веб-ресурс:

<figure><img src="/files/rUHcNQ1shlJQkn1KVq8f" alt=""><figcaption><p>Отримання згенерованого коду віджета</p></figcaption></figure>

***

#### 5. Анімація набору повідомлень

Коли ваш клієнт пише повідомлення у чаті через віджет, ви будете бачити це повідомлення та зможете заздалегідь підготуватися до відповіді:

<figure><img src="/files/VP93tSwZvIevgpdDl5Sm" alt=""><figcaption><p>Клієнт пише повідомлення в реальному часі</p></figcaption></figure>

<figure><img src="/files/Fgym2hk4va27HbSjwemz" alt=""><figcaption><p>Клієнт надіслав повідомлення</p></figcaption></figure>

***

Клієнт також буде бачити, що ви йому пишете, але не буде бачити текст:

<div><figure><img src="/files/pp9YZ7ki3xYKnd2q5uml" alt=""><figcaption><p>Менеджер пише повідомлення</p></figcaption></figure> <figure><img src="/files/nVYIj13IpPQs2PWBgzUw" alt=""><figcaption><p>Менеджер надіслав повідомлення</p></figcaption></figure></div>

***

#### 6. Відео-інструкція

{% embed url="<https://www.youtube.com/watch?v=cqGE3uflAkY>" %}
Відео-інструкція зі створення віджета #jedidesk
{% endembed %}