# Metabot Widget с диплинками

### Чат-виджет с диплинками

При создании и тестировании чат-бота в канале Metabot Widget необходимо провести первоначальные настройки виджета. Как это сделать подробно описано в статье [Metabot Widget](https://docs.metabot24.ru/books/2-instrukciya-polzovatelya/page/metabot-widget).

Здесь мы рассмотрим дополнительные настройки бота и виджета, которые позволят вам изучить метод настройки с диплинками.

### Настройка маршрутов с диплинками

Для того, чтобы настроить в чат-виджете дополнительные кнопки, например, переход в определенные сценарные ветки или быстрый вывод информации, необходимо настроить маршруты с переходами в данные разделы сценария или скрипты.

Также можно настроить на странице сайта кнопку с запуском диплинка и переходом в чат-виджет в соответствующий сценарий.

Рассмотрим пример:

<div id="bkmrk-%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC-%D0%BD%D0%B0-%D1%82%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE"><div><div class="css-175oi2r r-bnwqim"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-18u37iz r-1777fci" data-rnwr1430-1777fci="true" data-rnwr700-i023vh-1777fci="true" data-rnwrdesktop-cdhzog-="true"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-1l5ssaz"><div class="css-175oi2r" data-rnwr700-1ow6zhx-="true" data-rnwrdesktop-1wezhl="true"><div class="css-175oi2r"><div class="r-1oszu61 r-1xc7w19 r-1phboty r-1yadl64 r-deolkf r-6koalj r-1mlwlqe r-eqz5dr r-1q142lx r-crgep1 r-ifefl9 r-bcqeeo r-t60dpp r-bnwqim r-417010 r-1yzf0co r-tskmnb r-xd6kpl" data-key="78a5d466b9a044479fead77469d00b93"><div class="r-1oszu61 r-1xc7w19 r-1phboty r-1yadl64 r-deolkf r-6koalj r-eqz5dr r-crgep1 r-ifefl9 r-bcqeeo r-t60dpp r-bnwqim r-417010 r-1ro0kt6 r-16y2uox r-1wbh5a2" data-block-content="78a5d466b9a044479fead77469d00b93"><div class="css-1rynq56 r-gg6oyi r-ubezar r-16dba41 r-135wba7 r-1nf4jbm r-fdjqy7 r-1xnzce8" dir="auto">1. Разместим на тестовой странице сайта 2 кнопки с диплинками:

- Демо-бот;
- Поддержка.

2. Создадим 3 ссылки в разделе **Ссылки** с именем диплинков, например, Deeplink1, Deeplink2, Deeplink3.

</div></div></div></div></div></div></div></div></div></div>Заполним следующие параметры:

<div id="bkmrk-%D0%98%D0%BC%D1%8F---%D1%83%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D1%8C-%D0%B8%D0%BC%D1%8F-%D1%81%D1%81"><div><div><div class="css-175oi2r r-bnwqim"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-18u37iz r-1777fci" data-rnwr1430-1777fci="true" data-rnwr700-i023vh-1777fci="true" data-rnwrdesktop-cdhzog-="true"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-1l5ssaz"><div class="css-175oi2r" data-rnwr700-1ow6zhx-="true" data-rnwrdesktop-1wezhl="true"><div class="css-175oi2r"><div class="r-1oszu61 r-1xc7w19 r-1phboty r-1yadl64 r-deolkf r-6koalj r-1mlwlqe r-eqz5dr r-1q142lx r-crgep1 r-ifefl9 r-bcqeeo r-t60dpp r-bnwqim r-417010 r-1yzf0co r-tskmnb r-xd6kpl" data-key="78a5d466b9a044479fead77469d00b93"><div class="r-1oszu61 r-1xc7w19 r-1phboty r-1yadl64 r-deolkf r-6koalj r-eqz5dr r-crgep1 r-ifefl9 r-bcqeeo r-t60dpp r-bnwqim r-417010 r-1ro0kt6 r-16y2uox r-1wbh5a2" data-block-content="78a5d466b9a044479fead77469d00b93"><div class="css-1rynq56 r-gg6oyi r-ubezar r-16dba41 r-135wba7 r-1nf4jbm r-fdjqy7 r-1xnzce8" dir="auto">- **Имя** — указать имя ссылки, например "Deeplink1";
- **Текст** — текстовое сообщение, которое будет отображено в чат-виджете;
- **Тип ссылки** — выбираем пункт **Ссылка на бот-скрипт** (Deep Link).

</div></div></div></div></div></div></div></div></div></div></div>Нажимаем кнопку **Создать.**

<div id="bkmrk-"><div><div class="css-175oi2r r-bnwqim"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-18u37iz r-1777fci" data-rnwr1430-1777fci="true" data-rnwr700-i023vh-1777fci="true" data-rnwrdesktop-cdhzog-="true"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-1l5ssaz"><div class="css-175oi2r" data-rnwr700-1ow6zhx-="true" data-rnwrdesktop-1wezhl="true"><div class="css-175oi2r"><div class="r-1oszu61 r-1xc7w19 r-1phboty r-1yadl64 r-deolkf r-6koalj r-1mlwlqe r-eqz5dr r-1q142lx r-crgep1 r-ifefl9 r-bcqeeo r-t60dpp r-bnwqim r-417010 r-1yzf0co r-tskmnb r-xd6kpl" data-key="78a5d466b9a044479fead77469d00b93"><div class="r-1oszu61 r-1xc7w19 r-1phboty r-1yadl64 r-deolkf r-6koalj r-eqz5dr r-crgep1 r-ifefl9 r-bcqeeo r-t60dpp r-bnwqim r-417010 r-1ro0kt6 r-16y2uox r-1wbh5a2" data-block-content="78a5d466b9a044479fead77469d00b93"><div class="css-1rynq56 r-gg6oyi r-ubezar r-16dba41 r-135wba7 r-1nf4jbm r-fdjqy7 r-1xnzce8" dir="auto">  
</div></div></div></div></div></div></div></div></div></div>[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/ytTVr6DkUhCDpJLz-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/ytTVr6DkUhCDpJLz-izobrazenie.png)

Аналогично создаем ссылки с именами: "Deeplink2" и "Deeplink3".

Результатом проделанных действий будут созданные 3 ссылки как на рисунке ниже.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/8o4pkayiPs9J64x9-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/8o4pkayiPs9J64x9-izobrazenie.png)

<div id="bkmrk-%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B4%D0%B8%D0%BC-%D0%BC%D0%B0%D1%80%D1%88%D1%80%D1%83%D1%82%D1%8B-%D0%B2-"><div><div><div class="css-175oi2r r-bnwqim"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-18u37iz r-1777fci" data-rnwr1430-1777fci="true" data-rnwr700-i023vh-1777fci="true" data-rnwrdesktop-cdhzog-="true"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-1l5ssaz"><div class="css-175oi2r" data-rnwr700-1ow6zhx-="true" data-rnwrdesktop-1wezhl="true"><div class="css-175oi2r"><div class="r-1oszu61 r-1xc7w19 r-1phboty r-1yadl64 r-deolkf r-6koalj r-1mlwlqe r-eqz5dr r-1q142lx r-crgep1 r-ifefl9 r-bcqeeo r-t60dpp r-bnwqim r-417010 r-1yzf0co r-tskmnb r-xd6kpl" data-key="78a5d466b9a044479fead77469d00b93"><div class="r-1oszu61 r-1xc7w19 r-1phboty r-1yadl64 r-deolkf r-6koalj r-eqz5dr r-crgep1 r-ifefl9 r-bcqeeo r-t60dpp r-bnwqim r-417010 r-1ro0kt6 r-16y2uox r-1wbh5a2" data-block-content="78a5d466b9a044479fead77469d00b93">3. Создадим маршруты в разделе [Маршруты](https://docs.metabot24.ru/books/2-instrukciya-polzovatelya/page/marsruty) с регулярными выражениями соответствующими именам созданных ссылок.

</div></div></div></div></div></div></div></div></div></div>#### ДЕМО-БОТ

Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля:

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/gmjcRmGbrX69aVWm-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/gmjcRmGbrX69aVWm-izobrazenie.png)

#### ПОДДЕРЖКА

Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля:

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/8M46hkw7mjMLP5zP-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/8M46hkw7mjMLP5zP-izobrazenie.png)

#### Тестовый бот - СЕРВИС ОПРЕДЕЛЕН - ДЕМО-БОТ

Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля, также необходимо указать условие JS:

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/MBp7aZ0QhFqMuq5H-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/MBp7aZ0QhFqMuq5H-izobrazenie.png)

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/2lrDIKtaz8pyHr1M-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/2lrDIKtaz8pyHr1M-izobrazenie.png)

#### Тестовый бот - СЕРВИС ОПРЕДЕЛЕН - ПОДДЕРЖКА

Должны быть активированы следующие свойства маршрута и заполнены соответствующие поля, также необходимо указать условие JS:

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/y1tPLfQvJoWrYwkT-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/y1tPLfQvJoWrYwkT-izobrazenie.png)

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/Emj7PEbXmH4zD5oy-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/Emj7PEbXmH4zD5oy-izobrazenie.png)

<div id="bkmrk-%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D1%8B%D0%B9-%D0%B1%D0%BE%D1%82---%D0%A1%D0%95%D0%A0%D0%92%D0%98-1"><div><div class="css-175oi2r r-bnwqim"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-18u37iz r-1777fci" data-rnwr1430-1777fci="true" data-rnwr700-i023vh-1777fci="true" data-rnwrdesktop-cdhzog-="true"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-1l5ssaz"><div class="css-175oi2r" data-rnwr700-1ow6zhx-="true" data-rnwrdesktop-1wezhl="true"><div class="css-175oi2r"><div class="r-1oszu61 r-1xc7w19 r-1phboty r-1yadl64 r-deolkf r-6koalj r-1mlwlqe r-eqz5dr r-1q142lx r-crgep1 r-ifefl9 r-bcqeeo r-t60dpp r-bnwqim r-417010 r-1yzf0co r-tskmnb r-xd6kpl" data-key="78a5d466b9a044479fead77469d00b93"><div class="r-1oszu61 r-1xc7w19 r-1phboty r-1yadl64 r-deolkf r-6koalj r-eqz5dr r-crgep1 r-ifefl9 r-bcqeeo r-t60dpp r-bnwqim r-417010 r-1ro0kt6 r-16y2uox r-1wbh5a2" data-block-content="78a5d466b9a044479fead77469d00b93">  
</div></div></div></div></div></div></div></div></div><p class="callout info">Контроль автоопределения текущего раздела сайта выполняется с помощью V8 условий в маршруте с диплинком.</p>

<div id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D1%8F%D1%8E%D1%82%D1%81%D1%8F-2-%D0%B4%D0%B8%D0%BF%D0%BB%D0%B8%D0%BD"><div><div><div class="css-175oi2r r-bnwqim"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-18u37iz r-1777fci" data-rnwr1430-1777fci="true" data-rnwr700-i023vh-1777fci="true" data-rnwrdesktop-cdhzog-="true"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-1l5ssaz"><div class="css-1rynq56 r-gg6oyi r-ubezar r-16dba41 r-135wba7 r-1nf4jbm r-fdjqy7 r-1xnzce8" dir="auto">Добавляются 2 диплинка для ТЕСТОВОГО БОТА с таким условие (условия немного отличаются):</div><div class="css-1rynq56 r-gg6oyi r-ubezar r-16dba41 r-135wba7 r-1nf4jbm r-fdjqy7 r-1xnzce8" dir="auto"></div><div class="css-1rynq56 r-gg6oyi r-ubezar r-16dba41 r-135wba7 r-1nf4jbm r-fdjqy7 r-1xnzce8" dir="auto"></div></div></div></div></div></div></div>```JavaScript
// Запуск диплинка ДЕМО-БОТ

var requestJson = null;
if (request) {
  requestJson = request.json;
}

var requestDeeplinkData = null;
if (requestJson && requestJson.deeplink) {
  requestDeeplinkData = requestJson.deeplink;
}

var requestService = null;
if (requestDeeplinkData && requestDeeplinkData.service) {
  requestService = requestDeeplinkData.service;
}

if (requestService === null || requestService === '') {
  return false;
}

var availServices = ['demo_bot'];
if (availServices.includes(requestService)) {
  return true;
} else {
  return false;
}
```

<div id="bkmrk-%D0%A1%D0%BC%D1%8B%D1%81%D0%BB-%D0%B4%D0%B0%D0%BD%D0%BD%D0%BE%D0%B3%D0%BE-%D1%83%D1%81%D0%BB%D0%BE%D0%B2%D0%B8"><div><div class="css-175oi2r r-bnwqim"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-18u37iz r-1777fci" data-rnwr1430-1777fci="true" data-rnwr700-i023vh-1777fci="true" data-rnwrdesktop-cdhzog-="true"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-1l5ssaz"><div class="css-1rynq56 r-gg6oyi r-ubezar r-16dba41 r-135wba7 r-1nf4jbm r-fdjqy7 r-1xnzce8" dir="auto"></div><div class="css-1rynq56 r-gg6oyi r-ubezar r-16dba41 r-135wba7 r-1nf4jbm r-fdjqy7 r-1xnzce8" dir="auto">Смысл данного условия в том, что при клике на кнопку с диплинком с фронта передается параметр *service.*  
</div></div></div></div></div></div>Далее в диплинке ТЕСТОВЫЙ БОТ мы определяем какой это сервис и запускаем необходимый скрипт.

#### Тестовый бот - СЕРВИС НЕ ОПРЕДЕЛЕН

Последним маршрутом с диплинком ТЕСТОВЫЙ БОТ и V8 условием идет маршрут, который запускает приветствие бота если сервис не распознан.

<p class="callout warning">В нем условие можно и не писать, но в таком случае этот маршрут должен обязательно идти последним в списке.  
На случай если кто-то случайно передвинет его выше в списке маршрутов, v8 просто не даст ему запуститься, если сервис ОПРЕДЕЛЕН.</p>

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/SNoZLzUgjIdTQwu7-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/SNoZLzUgjIdTQwu7-izobrazenie.png)

<div id="bkmrk--11"><div><div class="css-175oi2r r-bnwqim"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-18u37iz r-1777fci" data-rnwr1430-1777fci="true" data-rnwr700-i023vh-1777fci="true" data-rnwrdesktop-cdhzog-="true"><div class="css-175oi2r r-1ro0kt6 r-16y2uox r-1wbh5a2 r-1l5ssaz"><div class="css-1rynq56 r-gg6oyi r-ubezar r-16dba41 r-135wba7 r-1nf4jbm r-fdjqy7 r-1xnzce8" dir="auto">[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/YOjDgJ7qO4CsevN6-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/YOjDgJ7qO4CsevN6-izobrazenie.png)</div><div class="css-1rynq56 r-gg6oyi r-ubezar r-16dba41 r-135wba7 r-1nf4jbm r-fdjqy7 r-1xnzce8" dir="auto"></div><div class="css-1rynq56 r-gg6oyi r-ubezar r-16dba41 r-135wba7 r-1nf4jbm r-fdjqy7 r-1xnzce8" dir="auto"><div class="description"><div class="wiki"></div></div></div></div></div></div></div></div>```JavaScript
// Запуск диплинка ТЕСТОВЫЙ БОТ, если сервис с сайта не передан или не определен

var requestJson = null;
if (request) {
  requestJson = request.json;
}

var requestDeeplinkData = null;
if (requestJson && requestJson.deeplink) {
  requestDeeplinkData = requestJson.deeplink;
}

var requestService = null;
if (requestDeeplinkData && requestDeeplinkData.service) {
  requestService = requestDeeplinkData.service;
}

if (requestService === null || requestService === '') {
  return true;
}

var availServices = ['demo_bot', 'support'];
if (availServices.includes(requestService)) {
  return false;
} else {
  return true;
}
```

### Настройка чат-виджета с диплинками

Список диплинков указывается в виде json массива. В списке можно указывать макросы с названием ссылок или хэш код, если такой макрос не найден, то в поле диплинка будет подставлена строка как есть.

Дополнительной валидации правильности заполнения списка диплинков на платформе нет. Есть только общая проверка, что в поле введен json.

#### Автогенерация списка диплинков

В настройках канала Metabot Widget есть опция **Автогенерация спиcка диплинков.**

Если данная опция включена, то список диплинков заполненный вручную ниже не будет задействован.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/AtgxOK11PetRkrHU-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/AtgxOK11PetRkrHU-izobrazenie.png)

Эта опция позволяет не заполнять список диплинков, они будут генерироваться автоматически при формировании кода виджета.

При автогенерации списка диплинков ссылки с диплинками будут выстроены в той же последовательности, как и в разделе **Ссылки**, поэтому в данном разделе имеется сортировка ссылок.

#### Генерация списка диплинков для заполнения вручную

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/10er1NjGJ3v4rv7D-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/10er1NjGJ3v4rv7D-izobrazenie.png)

Диплинки могут быть настроены в виде кнопок со ссылками или кнопки объединены в папки.

##### Настройка виджета с диплинками в виде кнопок со ссылками.

При такой генерации учитывается порядок ссылок бота, которые описаны в предыдущем пункте.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/qVAwiRD3jxGS4fZv-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/qVAwiRD3jxGS4fZv-izobrazenie.png)

Для того, чтобы отредактировать список диплинков, необходимо открыть канал на редактирование по кнопке **Редактировать**.

Можно убрать лишние диплинки, блок настройки одного диплинка выделен на рисунке.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/SZmNUZeRp8SXiGcu-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/SZmNUZeRp8SXiGcu-izobrazenie.png)

При предварительном просмотре чат-виджет имеет 3 кликабельные кнопки с диплинками перехода в сценарные скрипты.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/yBcCKcqm3LH9yCJC-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/yBcCKcqm3LH9yCJC-izobrazenie.png)

##### Настройка виджета с диплинками объединенными в папки.

При генерации списка диплинков вручную в json массиве можно написать код, который позволит сгруппировать кнопки с диплинками в папки и добавить кнопки перехода на мессенджеры, также вывод различных надписей на кнопках, зависящих от поведения пользователя (новый диалог или продолжающийся).

Рассмотрим несколько примеров:

- **Внешняя ссылка** — возможность перехода из чат-виджета в мессенджеры и соц.сети, где также будет диалог с чат-ботом или оператором, например, в Telegram;

```JavaScript
 {
        "type": "link",
        "href": "https:\/\/t.me\/Stage_metabot_bot",
        "target": "_blank",
        "title": {
            "text": "переходи в Телеграм",
            "color": "#1B1C1E"
        },
        "icon": {
            "type": "url",
            "value": "https:\/\/app.metabot24.com\/uploads\/business\/34\/telegram_logo_icon_168692.png?nc=1689846288"
        }
    },
```

<p class="callout info"> "href": &lt;ссылка на телеграм аккаунт бота с икранирующими \\/ символами&gt;</p>

<p class="callout info"> "value": &lt;ссылка на загруженный файл иконки с икранирующими \\/ символами, картинку можно загрузить на платформу в разделе Магазин- Медиагалерея&gt;  
</p>

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/ZGK6KhCVCm6HvFGH-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/ZGK6KhCVCm6HvFGH-izobrazenie.png)

- **Объединение диплинков в папки —** различные кнопки с диплинками можно объединить/сгруппировать в папки;

```JavaScript
  {
        "type": "folder",
        "title": {
            "text": "Сервисы тестового САЙТА",
            "color": "#ffffff"
        },
        "icon": {
            "type": "url",
            "value": "https:\/\/user43148.clients-cdnnow.ru\/img\/more.svg"
        },
        "data": [
            {
                "type": "deepLink",
                "event": {
                    "dataset": {
                        "deeplink": "{{ ^#Deeplink1 }}"
                    }
                },
                "title": {
                    "color": "#1B1C1E",
                    "background": "#1B1C1E",
                    "text": "ДЕМО-БОТ"
                },
                "background": "#E8F3FF"
            },
            {
                "type": "deepLink",
                "event": {
                    "dataset": {
                        "deeplink": "{{ ^#Deeplink2 }}"
                    }
                },
                "title": {
                    "color": "#1B1C1E",
                    "background": "#1B1C1E",
                    "text": "ПОДДЕРЖКА"
                },
                "background": "#E8F3FF"
            },
            {
                "type": "deepLink",
                "event": {
                    "dataset": {
                        "deeplink": "{{ ^#Deeplink3 }}"
                    }
                },
                "title": {
                    "color": "#1B1C1E",
                    "background": "#1B1C1E",
                    "text": "СТАРТ общий"
                },
                "background": "#E8F3FF"
            }
        ]
    },
```

 [![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/3O1hkgi9GvS5nc7x-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/3O1hkgi9GvS5nc7x-izobrazenie.png)

 [![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/Qk3G28sdDNp7vtVh-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/Qk3G28sdDNp7vtVh-izobrazenie.png)

- **Кнопка с диплинком в теле чат-виджета:**
    - Если лид новый и еще не общался с ботом в виджет;

```JavaScript
{
        "type": "deepLink",
        "newConversation": {
            "title": {
                "color": "#1B1C1E",
                "text": "Начать диалог"
            },
            "subtitle": {
                "text": "Начать диалог с ботом"
            },
            "event": {
                "dataset": {
                    "deeplink": "someDeeplinkHashCode"
                }
            },
            "icon": {
                "type": "url",
                "value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message_round.svg"
            }
        },
```

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/a8GDElaJFbRMFMkH-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/a8GDElaJFbRMFMkH-izobrazenie.png)

- - Если лид уже общался с ботом в виджете, то продолжение кода;

```JavaScript
 "existConversation": {
            "title": {
                "color": "#1B1C1E",
                "text": "Продолжить диалог"
            },
            "subtitle": {
                "text": "Продолжить ранее начатый диалог"
            },
            "icon": {
                "type": "url",
                "value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message_round.svg"
            }
        }
```

На виджете так [![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/iNIB03nBi4fvrXjp-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/iNIB03nBi4fvrXjp-izobrazenie.png)

- **Кнопка в футере виджета**: 
    - Если лид новый и еще не общался с ботом в виджет;

```JavaScript
  {
        "type": "actionOpen",
        "title": {
            "color": "#1B1C1E",
            "text": "Задать вопрос"
        },
        "event": {
            "dataset": {
                "deeplink": "E7tsR7VFWUGHKBgg"
            }
        },
        "icon": {
            "type": "url",
            "value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message.svg"
        }
    },
```

 [![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/NkTniqllOvKVFAgY-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/NkTniqllOvKVFAgY-izobrazenie.png)

- - Если лид уже общался с ботом в виджете, в кнопки можно добавить диплинки с переходом в нужные точки сценарной ветки чат-бота;

```
 {
        "type": "actionContinue",
        "title": {
            "color": "#1B1C1E",
            "text": "Задать новый вопрос"
        },
        "event": {
            "dataset": {
                "deeplink": "E7tsR7VFWUGHKBgg"
            }
        },
        "icon": {
            "type": "url",
            "value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message.svg"
        }
    },
  
```

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/Ps5SvQXcFVALJC0G-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/Ps5SvQXcFVALJC0G-izobrazenie.png)

В целом чат-виджет может быть настроен с различными диплинками, мессенджерам и соц.сетями.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/hqEdeYhsvWubqtzV-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/hqEdeYhsvWubqtzV-izobrazenie.png)

### Настройка диплинков на сайте  


Для того, чтобы настроить диплинки на странице сайта необходимо на раздел сайта или кнопку установить код, который генерируется автоматически при создании ссылки.

Раздел **Ссылки** с типом ссылки Deep Link.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/v2w7jIYWM4EIumKY-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/v2w7jIYWM4EIumKY-izobrazenie.png)

Например, на беке есть кнопки: Демо-бот, Поддержка и Старт общий, то для их настройки надо передать:

- ДЕМО-БОТ:

```JavaScript
{"type":"deepLink","event":{"dataset":{"deeplink":"{{ ^#Deeplink1 }}"}},
"title":{"color":"#1B1C1E","background":"#1B1C1E","text":"Deeplink1"},"background":"#E8F3FF"}
```

- <span class="wba" title="JSON для использования в списке диплинков канала Metabot Widget">ПОДДЕРЖКА:  
    </span>

```JavaScript
 {"type":"deepLink","event":{"dataset":{"deeplink":"{{ ^#Deeplink2 }}"}},
 "title":{"color":"#1B1C1E","background":"#1B1C1E","text":"Deeplink2"},"background":"#E8F3FF"} 
```

- СТАРТ общий:

```JavaScript
 {"type":"deepLink","event":{"dataset":{"deeplink":"{{ ^#Deeplink3 }}"}},
 "title":{"color":"#1B1C1E","background":"#1B1C1E","text":"Deeplink3"},"background":"#E8F3FF"}
```