# 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. Для установки виджета на ваш сайт скопируйте сниппет и вставьте его в \ в код.\ ![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 записана ссылка на страницу, где размещен виджет |