Перейти к основному контенту

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

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

При создании и тестировании чат-бота в канале Metabot Widget необходимо провести первоначальные настройки виджета. Как это сделать подробно описано в статье Metabot Widget.

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

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

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

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

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

  1. Разместим на тестовой странице сайта 2 кнопки с диплинками:
  • Демо-бот;
  • Поддержка.
  1. Создадим 3 ссылки в разделе Ссылки с именем диплинков, например, Deeplink1, Deeplink2, Deeplink3.

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

  • Имя — указать имя ссылки, например "Deeplink1";
  • Текст — текстовое сообщение, которое будет отображено в чат-виджете;
  • Тип ссылки — выбираем пункт Ссылка на бот-скрипт (Deep Link).

Нажимаем кнопку Создать.


изображение.png

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

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

изображение.png

  1. Создадим маршруты в разделе Маршруты с регулярными выражениями соответствующими именам созданных ссылок.

ДЕМО-БОТ

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

изображение.png

ПОДДЕРЖКА

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

изображение.png

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

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

изображение.png

изображение.png

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

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

изображение.png

изображение.png


Контроль автоопределения текущего раздела сайта выполняется с помощью V8 условий в маршруте с диплинком.

Добавляются 2 диплинка для ТЕСТОВОГО БОТА с таким условие (условия немного отличаются):
// Запуск диплинка ДЕМО-БОТ

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;
}
Смысл данного условия в том, что при клике на кнопку с диплинком с фронта передается параметр service.

Далее в диплинке ТЕСТОВЫЙ БОТ мы определяем какой это сервис и запускаем необходимый скрипт.

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

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

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

изображение.png

изображение.png
// Запуск диплинка ТЕСТОВЫЙ БОТ, если сервис с сайта не передан или не определен

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

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

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

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

изображение.png

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

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

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

изображение.png

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

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

изображение.png

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

изображение.png

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

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

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

  • Внешняя ссылка — возможность перехода из чат-виджета в мессенджеры и соц.сети, где также будет диалог с чат-ботом или оператором, например, в Telegram;
 {
        "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"
        }
    },

 "href": <ссылка на телеграм аккаунт бота с икранирующими \/ символами>

 "value": <ссылка на загруженный файл иконки с икранирующими \/ символами, картинку можно загрузить на платформу в разделе Магазин- Медиагалерея>

изображение.png

  • Объединение диплинков в папки — различные кнопки с диплинками можно объединить/сгруппировать в папки;
  {
        "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

 изображение.png

  • Кнопка с диплинком в теле чат-виджета:
    • Если лид новый и еще не общался с ботом в виджет;
{
        "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

    • Если лид уже общался с ботом в виджете, то продолжение кода;
 "existConversation": {
            "title": {
                "color": "#1B1C1E",
                "text": "Продолжить диалог"
            },
            "subtitle": {
                "text": "Продолжить ранее начатый диалог"
            },
            "icon": {
                "type": "url",
                "value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message_round.svg"
            }
        }

На виджете так изображение.png

  • Кнопка в футере виджета:
    • Если лид новый и еще не общался с ботом в виджет;
  {
        "type": "actionOpen",
        "title": {
            "color": "#1B1C1E",
            "text": "Задать вопрос"
        },
        "event": {
            "dataset": {
                "deeplink": "E7tsR7VFWUGHKBgg"
            }
        },
        "icon": {
            "type": "url",
            "value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message.svg"
        }
    },

 изображение.png

    • Если лид уже общался с ботом в виджете, в кнопки можно добавить диплинки с переходом в нужные точки сценарной ветки чат-бота;
 {
        "type": "actionContinue",
        "title": {
            "color": "#1B1C1E",
            "text": "Задать новый вопрос"
        },
        "event": {
            "dataset": {
                "deeplink": "E7tsR7VFWUGHKBgg"
            }
        },
        "icon": {
            "type": "url",
            "value": "https:\/\/user43148.clients-cdnnow.ru\/img\/message.svg"
        }
    },

изображение.png

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

изображение.png


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

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

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

изображение.png

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

  • ДЕМО-БОТ:
{"type":"deepLink","event":{"dataset":{"deeplink":"{{ ^#Deeplink1 }}"}},
"title":{"color":"#1B1C1E","background":"#1B1C1E","text":"Deeplink1"},"background":"#E8F3FF"}
  • ПОДДЕРЖКА:
 {"type":"deepLink","event":{"dataset":{"deeplink":"{{ ^#Deeplink2 }}"}},
 "title":{"color":"#1B1C1E","background":"#1B1C1E","text":"Deeplink2"},"background":"#E8F3FF"}
  • СТАРТ общий:
 {"type":"deepLink","event":{"dataset":{"deeplink":"{{ ^#Deeplink3 }}"}},
 "title":{"color":"#1B1C1E","background":"#1B1C1E","text":"Deeplink3"},"background":"#E8F3FF"}
Нет комментариев
Наверх