> 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/api-documentation/widget-api.md).

# Widget API

**1. Відкриття віджету:** 

```
JediDesk("openWidget")
```

Використовуйте цю функцію, щоб відкривати вікно віджета в потрібний момент.

***

**2. Закриття віджету:** 

```
JediDesk("closeWidget") 
```

Використовуйте цю функцію, щоб закривати вікно віджета в потрібний момент.

***

**3. Передача даних користувача:** 

```
JediDesk("customerData", {
    name: "Max",
    phone: "+380990000000",
    email: "max@gmail.com",
    note: "VIP",
    language: "en",
    custom_fields: [{
            "id": 1,
            "value": "123"
        },
        {
            "id": 2,
            "value": "test"
        },
        {
            "id": 551,
            "value": "test321"
        }
    ]
})
```

Використовуйте цю функцію, щоб заповнювати та передавати дані про користувача віджету в потрібний момент.

***

**Дозволені поля для передачі:**

| **Параметр**   | **Тип**                | **Опис**                                                                                                                                                                                                                     |
| -------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name           | string                 | Імʼя користувача                                                                                                                                                                                                             |
| phone          | string                 | Номер телефону користувача                                                                                                                                                                                                   |
| email          | string                 | Email користувача                                                                                                                                                                                                            |
| note           | string                 | Додатковий опис користувача, нотатки                                                                                                                                                                                         |
| language       | enum('uk', 'en', 'ru') | Мова користувача                                                                                                                                                                                                             |
| custom\_fields | array                  | <p>Поля, що налаштовуються. Масив об'єктів. <br><br>Параметри об'єктів: </p><p><strong>id</strong> - унікальний id поля (призначається при створення поля в адмін-панелі).</p><p><strong>value</strong> - значення поля.</p> |

**4.AI Page Context — передача даних сторінки для AI асистента**

````
Дані передаються через метод `JediDesk('pageContext', data)` або через поле `page_context` у виклику `JediDesk('customerData', data)`.

Варіант 1: окремий виклик `pageContext`

```js
JediDesk('pageContext', {
  product_name: 'iPhone 16 128GB',
  price: '29999',
  currency: 'UAH',
  category: 'Смартфони',
  availability: 'В наявності'
});
```
Варіант 2: разом із даними клієнта

js
JediDesk('customerData', {
  name: 'Іван',
  page_context: {
    product_name: 'iPhone 16 128GB',
    price: '29999',
    currency: 'UAH'
  }
});
````

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

Передаючи дані сторінки через Widget API, ви дозволяєте AI одразу розуміти контекст звернення і відповідати точніше.

Повний приклад інтеграції

```html
<script>
  // 1. Ініціалізація JediDesk Widget
  !function(e,t){ /* embed code */ }(window, document);

  // 2. Функція збору даних поточної сторінки
  function getJediDeskPageContext() {
    return {
      product_name: document.querySelector('[data-product-name]')?.dataset.productName || '',
      price:        document.querySelector('[data-product-price]')?.dataset.productPrice || '',
      currency:     'UAH',
      category:     document.querySelector('[data-product-category]')?.dataset.productCategory || '',
      availability: document.querySelector('[data-product-available]')?.dataset.productAvailable || '',
      sku:          document.querySelector('[data-product-sku]')?.dataset.productSku || ''
    };
  }

  // 3. Передача при завантаженні
  JediDesk('pageContext', getJediDeskPageContext());
</script>
```

**5. Підписатись на подію віджета:**&#x20;

```
window.addEventListener("JediDeskFullyLoaded", (e) => {
    // Тут можна розмістити JS-код, який оброблює подію 
});
```

Використовуйте цю функцію, щоб отримувати сповіщення про різні події, які звʼязані із віджетом.

**Можливі події:**

<table data-header-hidden><thead><tr><th></th><th></th><th data-hidden></th><th data-hidden></th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td><strong>Подія</strong></td><td><strong>Опис</strong></td><td><strong>Опис</strong></td><td><strong>Опис</strong></td><td><strong>Опис</strong></td><td></td></tr><tr><td>JediDeskFullyLoaded</td><td>Ініціалізація віджету повністю завершена</td><td>string</td><td>Імʼя користувача</td><td>Ініціалізація віджету повністю завершена</td><td></td></tr><tr><td>JediDeskOpenedWidget</td><td>Було відкрито віджет</td><td>string</td><td>Номер телефону користувача</td><td>Було відкрито віджет</td><td></td></tr><tr><td>JediDeskClosedWidget</td><td>Було закрито віджет</td><td></td><td></td><td>Було закрито віджет</td><td></td></tr><tr><td>JediDeskClientSendMessage</td><td>Користувач відправив повідомлення менеджеру.<br><br>Вміст параметра detail (e.detail):<br><strong>text</strong> <em>(string)</em> - текст повідомлення<br><strong>firstMessage</strong> <em>(boolean) -</em> чи є це повідомлення першим у діалозі</td><td>string</td><td>Email користувача</td><td>Було закрито віджет</td><td></td></tr><tr><td>JediDeskManagerSendMessage</td><td>Менеджер відправив повідомлення користувачу.<br><br>Вміст параметра detail (e.detail):<br><strong>text</strong> <em>(string)</em> - текст повідомлення<br><strong>hasAI</strong> <em>(boolean)</em> - текст згенеровано і відправлено автоматично за допомогою ШІ</td><td></td><td></td><td></td><td></td></tr></tbody></table>