> 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

Сервіс #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="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FVNHsyFAddOkEEsUqL5xb%2FUA_Widget_01.png?alt=media&amp;token=7151d386-7368-4c75-af73-3cd9d530d4fb" alt=""><figcaption><p>Список мов віджета за замовчуванням</p></figcaption></figure>

<figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FafBgL2tn0umzRs7737YX%2FUA_Widget_02.png?alt=media&amp;token=5a55cec3-8b79-48fe-8504-b5e97bce4a99" alt=""><figcaption><p>Налаштування віджета</p></figcaption></figure>

***

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

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

<figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FFsVRiBnNwNKdaqU2hDEh%2FUA_Widget_03.png?alt=media&amp;token=b44414b7-72cc-47ba-b5d5-1ca53a3b3339" alt=""><figcaption><p>Додаткові мови для віджета</p></figcaption></figure>

***

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

<figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FJitILbPTccdsMSFXqDm6%2FUA_Widget_04.png?alt=media&amp;token=c089d671-6280-455c-bade-1ac543798659" alt=""><figcaption><p>Активація обраної мови в віджеті</p></figcaption></figure>

***

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

<figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FKPaJDwHAloEDpCPgydPh%2FUA_Widget_05.png?alt=media&amp;token=c4528e93-29da-408a-b06e-00cd86777562" alt=""><figcaption><p>Активація віджета як чату</p></figcaption></figure>

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

***

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

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

<figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FdjnYyaZyWZTtSSfpd0cJ%2F%7BA60B0B46-224D-47DC-9401-EEF9B363CE60%7D.png?alt=media&amp;token=290c5430-da73-4734-bc36-2a733eca5348" alt=""><figcaption></figcaption></figure>

***

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

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

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

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

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

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

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

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

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

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

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

<figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FkVpx6wV8dz7dIsWJbh16%2Fimage.png?alt=media&amp;token=0da3fae7-8695-42ab-a80f-236f7f200f2b" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FXkRvLPE8hO2JV12cwtWV%2Fimage_2026-07-24_17-42-32.png?alt=media&amp;token=276fea0a-41a2-44ff-b23b-6c0f3742a8d4" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FZgCOYOgfTfNslhV9OoYE%2Fimage.png?alt=media&amp;token=4f6981a9-c8ba-4cd3-8f37-2662a758591a" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2F5wMikv0JqIY7OPIodc4w%2FUA_Widget_07.png?alt=media&amp;token=b2c94c20-05c9-4751-bace-f311ddcac657" alt=""><figcaption><p>Отримання згенерованого коду віджета</p></figcaption></figure>

***

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

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

<figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FvdXaKr7S8ujuaxyl74TV%2FUA_Animation_1.png?alt=media&amp;token=a1662070-beed-4c3e-94ed-ff9fd116924f" alt=""><figcaption><p>Клієнт пише повідомлення в реальному часі</p></figcaption></figure>

<figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FaTlfzRkBfcKBvezDKQlG%2FUA_Animation_2.png?alt=media&amp;token=8c20ecd9-426e-40e7-927c-683bfc04ccc8" alt=""><figcaption><p>Клієнт надіслав повідомлення</p></figcaption></figure>

***

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

<div><figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FwUDGXpm12xvtvuvS40ZY%2FUA_Animation_3.png?alt=media&amp;token=62d51fac-6992-4cea-835e-8c49e638c57b" alt=""><figcaption><p>Менеджер пише повідомлення</p></figcaption></figure> <figure><img src="https://4292724302-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkehX3Ue2D5LVuBJjMnb%2Fuploads%2FGNr7SwNrwZ93OgZljxsN%2FUA_Animation_4.png?alt=media&amp;token=f4efb8b6-2f94-4b59-9562-ba9222e286ce" alt=""><figcaption><p>Менеджер надіслав повідомлення</p></figcaption></figure></div>

***

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

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