# Widget

В Платформа реализована возможность подключить Бота в кастомизированный виджет и вывести его на свой сайт. Виджет создается аналогично другим Канал Проекта.

## Подключение

### Конфигурация канала агента в Платформе

1. Кликните по кнопке настроек Агента.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-m_bL4GvN1_/de0e6c51b47058d8e7854370e44e3e29e8d1195855e34484c55e0ba55e6f4cbc2f103ac4ebcc2b78bf606d6b02118303275d07760b64f89e5ea954cd86466379ab9850814435bbe8d5ab7d3e80e7ac68c8a471b3ba0022e97fb3209a771f11a86b6c817e)
2. Нажмите кнопку Add channel.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-KJ7zJqauLN/e76804ae1c32c84507914bcbac89b59e5fa7160e857084643655c65f3192dbec4709a2cd8abae87edc6a858acbd80d17c3296d23c47a2c39eccf56433201a9779ccf4ea2580c347508e5f68b0ee94654585fa349ceadd2e6587a4bdebd6c5d9715835322)
3. Откроется панель выбора Конечный канал.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-s7QCSakdqU/c56376ab80440775df7dbe9b0854040613e5a1ee2dfabe51e794ca3caca9f5c8c062bd04ca5adeb304c0f4263f35aed50aacf13347520584de4625babdd1006e377ba6864d170804e7cbe276c0779c5c33c28b39a9ea44aa7a6d57b9774f7412ad104b53)
4. Выберите Widget.
5. Откроется панель создания Канал Проекта.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-8sgdSJcYQJ/c90673a24ae100ad9a085ff090c21352906ecfbcecb6f75a4064ff359d9784c3eeddf2bc49e27032b67d28480e2c25d87b7f71f8ec0a1be3aa3bb428627a7fce8a2be8c9d061ecf7ea37707a2222b06ff29c9363c2fe6074fb9c3eb364ea8167b1cde00a)
6. На вкладке Settings:
7. 1. По необходимости пропишите заголовок для данного Канал Проекта в поле названия с плейсхолдером New channel.\
      ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-hXh1Efo7PZ/feabe9a445963df171016ffcf086d36c1f580ece2a727eae10e5edb5d0a350cc845d016f91259ef3765c4e139a729e645d29ee5d62de1df34906f810796eecb5a7881bfac9a11b511c7f9ea99dfa988b2ab0c20278f24ee883a5adc4695449814b46923e)
   2. По необходимости задайте список  доменов, на которых может работать виджет, в поле Domain.\
      ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-tJvlpS5_Sr/e4df8addfcf1c1680c8c50e928d643393166a51721de31422a86853f914f400c8475392d10a074aecef077cb88caf69db61fa9b1a5e818b91af8448982892e2e76514abbc28a00b30fc240e1cb8121b3f7bc90c7990bcfe656f04bcc6dc1449bf50e84ce)
   3. 1. Можно указать как сам домен, так и паттерн в формате \*.domain.com. В таком случае виджет будет работать на всех сабдоменах domain.com.
   4. Сниппет в поле Snippet понадобится вам для установки виджета на сайт. Скопировать его можно нажатием кнопки COPY WIDGET CODE.\
      ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-ln1he0yokS/c16bb6f8ad9aa542e442f019373cc3876043ee2264b0cd738d7c831e13c63001576d1ed022b9a5711b3f0add059c30ca666b398154a190de6985fd7ce7bf10c9824c4012e68bb48b6eeaf84981c9ada9527c7d3cb7eeba64f35b29476349332bcaa1ac43)
8. Перейдите на вкладку Design:\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-Cj4hBvu2hT/dae91db4a66d168a05da16643c5305157ebff4528e6d2690952bb95e8f4841c00a05ea3cd9a55cb6e3f99850e9944e7f1173acc1ba8b47bf57d943f9496b43fae88f5ad2d2db896904097fe4b83defc6e608c1448ec4a6d31f1c7df51d6920be12b4d9f8)
9. 1. Укажите имя для Бота в поле Bot name.\
      ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-2bZSDIYDzt/4a5e533ccd77c163ddc8ae769d3a4d28b1e640bf7e2f82ba4134ff40d1c879aacc845b5ebe846061ff6853531abfd6c9687eb1a1cad1f7185e3d5870e11ea8d3f6aa1fa7403ffb05a282e41c3fc3ed78bb76f312beaa17ef8a3b826dd9a0735bda0c0c2c)
   2. Укажите заголовок для виджета в поле Widget title.\
      ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-oKRlOvN9wq/182c11c000ea7522c039418df3b9247bd82a6ed8caeacd85915ba34937525f184fb6447806f51051c05705de2315a51acdc8f6f077d181cbb7fc4df43da33af7a4d6ed2902b7855c06c42c51875fbd8bda3db459ce36807a677b76e2b5c3899b1723e976)
   3. Укажите цвет виджета в поле Widget color. Цвет можно указывать следующими способами:
   4. 1. HEX-код цвета в формате #ADFF2F;\
         ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-2tlExJ_uPC/31702fce3fa90ef9aa0ac6ee9478bbf38a15d0c8fd4a6f402375c14903fc208e5cfa071cd400167a68041e42b5fabc9efcad53ba38af524cedb07afee6928fa5b32c71b46f55b3103b18167d4cad995d211076f1c27d41e0644ece28a02b3a0c2edabf0a)
      2. название цвета на английском.\
         ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-xZ3EiD4tGs/98bb02e85e926f8d07b8cc6b0009604ab99fa94117ce49240cda3acab2d80d164403c6e32bc5387547a1f233d6d16ca3606907ed5046d66a0b500d9ea3eb2dece86fbddbf86cd48ec86cb486cdbfe4c982fd21b0ef9e8678d95510e3ce18e13d57125e6f)
   5. По необходимости загрузите изображение для виджета (логотип компании) в поле Company logo. Если изображение не будет загружено, то в виджете будет добавлено изображение по умолчанию.\
      ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-zFOTKQxAXP/0c48eaccbe27c0ce50a9e01917c4b97b029c9621e95048c3d68c0cc1966ea9136aac28ba803c068c489588984c109b72c2f1b6eeda5389a98f4b2179deddd3cdcc469982a6afd31df0c18c888938ba553d4443f72d4dfc6bdc8c902aa98145d62ac75c7a)
   6. По необходимости укажите плейсхолдер-подсказку в поле Placeholder in the expanded widget. Если вы не укажете подсказку, в поле ввода автоматически будет подставлен текст “Type a message”.\
      ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-G-ps5ty_bH/c827820c0d747a45bf2ed11b9be52b1b9d5a59b4569343100a3975ed47340adb83931ec46752b0134d2e2e77635c4731649d00356f850a228ba4f34642c69e9c0c8e31d80d6c194c3f39545abb17fc8e38b00f9663c60edb2cc360c55bd6c5fd818261f3)
   7. По необходимости добавьте приветственное сообщение от Бота. Для этого переключите тумблер Send welcome message on widget expanded и укажите сообщение в поле Bot's welcome message.\
      ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-KcfFvu0sEV/36a09a360b5f2b5b5cab241993aa79a51f3901d30a7301c795e31dcbf067f93985fdb244e623172df6f40d624016e773cce5cf31683ec191ee4c87226877ffcf2edb379b3aadddb1c5d28b3d0da7f6a6ec81defea37037873583b5e541d84dee977f2d56)
10. Для сохранения Канал Проекта без его активации, нажмите кнопку CREATE.\
    ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-nT1LJRG9Ht/a3f6db2c4f86563d01e1babaf967255957ad6745e544dafa0a234f22e5f972a57ecce42edc253b8bf8b83fec4f830ca54a8064b1a6ef0bc471ea0d6ccf9781e86ee0399f16c20f85c6376faee524aeaba5978c6f760d1cac4796854b7f5247f04141d786)
11. Для сохранения и активации Канал Проекта, нажмите кнопку CREATE & ACTIVATE.\
    ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-rw61hv72rT/5cb52c8e1ea2eed1e06180ecce57a179af0c183b275a487cdbb3031ab55195539e9ad107246dc1a4e63d5ab3077d0d136fee33a0cd0a53553d32909e6d4f03d53e2e2292fc66dfad3e8c75ffb5fdd94f200462a2e14c177c881c8074e25899121624b12c)
12. 1. Канал Проекта будет сохранен и активирован, если Агент обучен.
    2. В противном случае Канал Проекта будет сохранен, но не активирован.
13. Для отмены создания Канал Проекта нажмите кнопку CANCEL.\
    ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-Fb1uz8lUBN/c114fc628e327396e9740ebd4cad7ed2135b13bf7071b2949e66a872c3435b6d21115f85d2ec7795ce97168c44a9ace393dbfb3b1e045eac229d2881b5c0a11b23481399a4250c9e3629f061adc670263f3caaf6be1adeb20d2897e27cfed597e9433458)

### Установка виджета на сайт

1. Для установки виджета на ваш сайт скопируйте сниппет и вставьте его в \<body> в код.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-JABvDHJR8g/a532307faff86f11cd55881637dc1df39a7e58ae5f9208e4f361d7268d1ae12ea12829137e1256df80a97c281d017ae2174f7a35aae522fbda86f1a1f4726eba92a22c640325aaf716d9107ed1a6a4078568f1ee6747b5fbe7a9ea5fbcba39532d459cec)
2. Активируйте Канал Проекта, если он еще не активирован.
3. После этого виджет появится на сайте.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-myf5Sya38g/13088d56fe7d60b3f01fac85331f81e083638145c7435dd6775ac309d10132cb14dd9e83777f7337c2ee1b6011e536a99a9fa42bacd52e49e604ccdfa2b3a529c78b3d5b10a83779229ab6e227b9c4b1f78c94e3ae117dce04a8d6d245026a749ccd06bc)

## Редактирование и удаление Канала Агента

Для редактирования Канал Проекта, необходимо кликнуть по его иконке на карточке Агента.\
![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-bfkbpgjOmd/76fd6fc54e54154e5d9846620e1f26c013ba6ffeca775e132cf9e391bd687c04ff120fedac1d56dc72fa9fe39e35b4cff93a74a9e06824cc053129dd53b03d3b32eeccd095b6b97756a806bf9e056198a99d2218c50a4acb49cad92f7ff0f536b7a6f99c)

1. Чтобы отредактировать значение в любом поле, кликните по полю и впишите новое значение.
2. Чтобы применить изменения к активированному Канал Проекта, нажмите кнопку APPLY.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-g5jQHViMdA/e8d644eda88c5289d7212053c858af496bc5284ea8b7663c2e9e363083e26517d1a5828949e8b78fa24739a6ec92b5c83527647342ba390c393ff457fe1d6d80f3498fb6778926ac2722c5bd0a44b951645fba0c7bbc3fbc1a2e8dac4ecf1cd77f6c5886)
3. Чтобы деактивировать  Канал Проекта, нажмите кнопку DEACTIVATE.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-90Oi8Sv5Ur/ff8df9ae59ea6cd54ac78350b2106ca944fd5bbcd5c2c9a7044f0c77cdda9c3de61d76ab914055642321d1beb099ac2a2a8e4a1ffe89170a59fc912d4adb90d9e2c478de8bc761022706807a3968dee242b3fa683639587bb05ee51447d662972b0efc4a)
4. Чтобы применить изменения к деактивированному Канал Проекта, нажмите кнопку SAVE.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-1nfq5Oy8Jf/0992ce85afeace3edb8730323f3a55ec3bf3a9d5d07d109e47ff0cc3ea6ee217d85b4914519324730fe0e335e49cfaee2861b68f6abf4ad8bdd6be6f8ddd6f97020da303c374d7b0da737e7fb5640eadf7a40df9d5740e10edaff0a6fed5fc0b1feb8840)
5. Чтобы применить изменения и активировать Канал Проекта, нажмите кнопку SAVE & ACTIVATE.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-HhuaJ6-uLp/15bce0b9c31b9f0282221b74cea025f0e90e7005836ca289b5b91faa7ec1b05e6df0a045a8a5d85fb591c908ddcfc85ea2e221d33747cbea768437bc4ed0bde20502c78c29295660804cbb672cc607993e4e7e5deb14c2f9827c52102ceab1ca50eb7804)
6. 1. Изменения будут применены и Канал Проекта будет активирован, если Агент обучен.
   2. В противном случае изменения будут применены, но Канал Проекта не будет активирован.
7. Чтобы отменить внесение изменений, нажмите кнопку CANCEL.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl-C_CnAJ8RTh/f36b3fc407d5169910f95d00d8fe168b4dbc8b574b592b05a1e7c6d61705ce9265c020faab87489af9b5ba2525f1bf52548d93d7273e6574e1ab177fa39785cb15d6cdb0155f800dd9f45966fceffe4a194e244deee82b7bb12f8e121c0bd233a4b1bf2d)
8. Чтобы удалить Канал Проекта, нажмите кнопку DELETE.\
   ![image.png](https://codahosted.io/docs/_pM7PjYCmj/blobs/bl--K_MBkgftT/ccc0c2fef42a8888021f44c35a2e8ceecc340471df630b3b8313488b141a552d75bbae8da3d99de181aba389792d1f96dea3d890ec264bace3984d15f5263d479910dd017de1bcba4d3e52f8a38ffa26b85e7c6fb99a49692b1c9aeb4746c3b956427c99)

## Общение

### Сервисные сообщения из виджета

На данный момент не поддерживается передача Сервисные сообщения канала из виджета.

| Переменная                  | Конечный канал | Переменная в запросе из канала                                                               | Примечания |
| --------------------------- | -------------- | -------------------------------------------------------------------------------------------- | ---------- |
| channel\_visitor\_id        | Widget         | Генерируется системой в виде строки, значение channel\_visitor\_id и channel\_chat\_id равно |            |
| channel\_visitor\_firstname | Widget         | нет                                                                                          |            |
| channel\_visitor\_lastname  | Widget         | нет                                                                                          |            |
| channel\_visitor\_phone     | Widget         | нет                                                                                          |            |
| channel\_visitor\_email     | Widget         | нет                                                                                          |            |
| channel\_visitor\_account   | Widget         | нет                                                                                          |            |
| channel\_visitor\_auth      | Widget         | нет                                                                                          |            |
| channel\_visitor\_source    | Widget         | URL страницы, на которой работает виджет                                                     |            |

| Функционал общения                                                             | Конечный канал | Доступность в канале | Примечания                                                                                   |
| ------------------------------------------------------------------------------ | -------------- | -------------------- | -------------------------------------------------------------------------------------------- |
| channel\_chat\_id                                                              | Widget         | Да                   | Генерируется системой в виде строки, значение channel\_visitor\_id и channel\_chat\_id равны |
| Сообщения дойдут до собеседника, если агент напишет первый в существующем чате | Widget         | Да                   |                                                                                              |
| Кнопки                                                                         | Widget         | Да                   |                                                                                              |
| Перевод на оператора                                                           | Widget         | Нет                  |                                                                                              |
| Передача файлов в виде файлов от Агента (Attachment)                           | Widget         | Нет                  |                                                                                              |
| Передача файлов в виде ссылок от Агента (Attachment)                           | Widget         | Да                   |                                                                                              |
| Получение файла от Собеседника в сценарий                                      | Widget         | Нет                  |                                                                                              |
| Получение геолокации от собеседника в сценарии                                 | Widget         | Нет                  |                                                                                              |
| Доставка сообщений более 1000 символов от Агента до Собеседника                | Widget         | Да                   |                                                                                              |
| Использование маркдауна                                                        | Widget         | Нет                  |                                                                                              |
| Рассылки с помощью Notification                                                | Widget         | Нет                  |                                                                                              |
| Получить ссылку на источник лида                                               | Widget         | Да                   | В переменную channel\_visitor\_source  записана ссылка на страницу, где размещен виджет      |

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://chatme-ai-4.gitbook.io/docs/kak-vyvesti-agenta-v-konechnye-kanaly/widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.