Своя реализация быстрых ответов в чатах Битрикс 24

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

Прежде чем перейти к статье, хочу вам представить, запущенную мной онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!

Приветствую. Недавно столкнулся с интересной задачей, по созданию быстрых ответов в чате открытых линий в битрикс 24. Этот функционал уже реализован, но доступен только на профессиональном тарифе (14к в месяц на минуточку. Для стартапа из 2 человек не считая собаки это дорого).Но битрикс имеет отличное и функциональное АПИ позволяющее нам сделать такой же функционал. Для начала ставим задачу:

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

Как это работает в битриксе сейчас

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

Вот так выглядит оригинальное менюбыстрых ответов и мы хотим что-то похожее, но попроще
Вот так выглядит оригинальное менюбыстрых ответов и мы хотим что-то похожее, но попроще

Что нужно для реализации подсказок в чате?

  1. Битрикс 24 на любом коммерческом тарифе (на бесплатном АПИ не работает)

  2. Чат-бот. Создается через раздел разработчика

  3. Любой хостинг и домен с SSL Сертификатом

  4. Документация и воображение

Все ссылки будут в разделе ссылки в конце статьи.

Анализируем документацию

Для решения нашей задачи нужно изучить документацию Битрикса для чат ботов. Новое приложение для чата нам не подходит (я не смог его завести и этот момент требует дополнительного изучения). Для работы нам нужно будет выполнить один единственный метод imbot.app.register и будет счастье. Для выполнения этого метода нам нужен URL адрес IFrame и BotId. Начнем все с IFrame

Готовим мини приложение

Наши подсказки будут работать как IFrame приложение и нам потребуется подготовить одну страницу на html. Или PHP. Или на любом другом удобном вам языке. Для работы я выбрал работу с HTML прямо в редакторе моего хостинг провайдера (потому что для такой задачи почти не нужно писать код). Для красоты используем bootstrap.

Приступаем:

Про написание кода в консоли хостинга

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

Вот так выглядит наше приложение для чата
Вот так выглядит наше приложение для чата

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

<body>
<p>Список ответов</p>
<ul class="list-group" id="answerList">

</ul>
</body>

id нужен для добавления сообщений через скрипт. Для JS скрипта берем код прямо из документации раздел Cоздание IFRAME-обработчика и добавляем метод с отрисовкой наших ответов из шаблонов. Сами ответы закинем в массив для удобства редактирования. В результате получим чтото такое:

$(document).ready(function(){
        createList();
    });
    const items=[
        {
            message:'Список наших складов',
            title:'Список наших складов'
        },
        {
            message: 'Здравствуйте, приветствую вас',
            title: 'приветствую'
        }
    ]

    function createList(){
        for (let i = 0; i < items.length; i++) {
            document.getElementById("answerList").innerHTML +=
                `<li class="list-group-item"
onclick="frameCommunicationSend({'action': 'send', 'message': '${items[i].message}'})">${items[i].title}</li>`;
        }
    }

    function frameCommunicationInit()
    {
        if (!window.frameCommunication)
        {
            window.frameCommunication = {timeout: {}};
        }
        if(typeof window.postMessage === 'function')
        {
            window.addEventListener('message', function(event){
                var data = {};
                try { data = JSON.parse(event.data); } catch (err){}

                if (data.action == 'init')
                {
                    frameCommunication.uniqueLoadId = data.uniqueLoadId;
                    frameCommunication.postMessageSource = event.source;
                    frameCommunication.postMessageOrigin = event.origin;
                }
            });
        }
    }
    // функция отправки данных в основное окно
    function frameCommunicationSend(data)
    {
        data['uniqueLoadId'] = frameCommunication.uniqueLoadId;
        var encodedData = JSON.stringify(data);
        if (!frameCommunication.postMessageOrigin)
        {
            clearTimeout(frameCommunication.timeout[encodedData]);
            frameCommunication.timeout[encodedData] = setTimeout(function(){
                frameCommunicationSend(data);
            }, 10);
            return true;
        }

        if(typeof window.postMessage === 'function')
        {
            if(frameCommunication.postMessageSource)
            {
                frameCommunication.postMessageSource.postMessage(
                    encodedData,
                    frameCommunication.postMessageOrigin
                );
            }
        }
    }
    frameCommunicationInit();
В итоге получили такую страницу
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>
<body>
<p>Список ответов</p>
<ul class="list-group" id="answerList">

</ul>

</body>
<script type="text/javascript">

    $(document).ready(function(){
        createList();
    });
    const items=[
        {
            message:'Список наших складов',
            title:'Список наших складов'
        },
        {
            message: 'Здравствуйте, приветствую вас',
            title: 'приветствую'
        }
    ]

    function createList(){
        for (let i = 0; i < items.length; i++) {
            document.getElementById("answerList").innerHTML +=
                `<li class="list-group-item"
onclick="frameCommunicationSend({'action': 'send', 'message': '${items[i].message}'})">${items[i].title}</li>`;
        }
    }

    function frameCommunicationInit()
    {
        if (!window.frameCommunication)
        {
            window.frameCommunication = {timeout: {}};
        }
        if(typeof window.postMessage === 'function')
        {
            window.addEventListener('message', function(event){
                var data = {};
                try { data = JSON.parse(event.data); } catch (err){}

                if (data.action == 'init')
                {
                    frameCommunication.uniqueLoadId = data.uniqueLoadId;
                    frameCommunication.postMessageSource = event.source;
                    frameCommunication.postMessageOrigin = event.origin;
                }
            });
        }
    }
    // функция отправки данных в основное окно
    function frameCommunicationSend(data)
    {
        data['uniqueLoadId'] = frameCommunication.uniqueLoadId;
        var encodedData = JSON.stringify(data);
        if (!frameCommunication.postMessageOrigin)
        {
            clearTimeout(frameCommunication.timeout[encodedData]);
            frameCommunication.timeout[encodedData] = setTimeout(function(){
                frameCommunicationSend(data);
            }, 10);
            return true;
        }

        if(typeof window.postMessage === 'function')
        {
            if(frameCommunication.postMessageSource)
            {
                frameCommunication.postMessageSource.postMessage(
                    encodedData,
                    frameCommunication.postMessageOrigin
                );
            }
        }
    }
    frameCommunicationInit();

</script>
</html>

Массив items содержит наши шаблоны: title - заголовок шаблона, message - Ответ для чата. Функция frameCommunicationSend отправляет сообщение сразу в чат.

Этих данных нам достаточно для создания чат бота.

Создаем Чат бота

Все просто. переходим в раздел разработчикам (в меню рядом с маркетом или можно найти по ссылке https:// ваш домен .bitrix24.ru/devops/ и переходим в Добавить Чат Бот->Передавать сообщения из чата.

Раздел разработчиков. Тут создаем Чат Бота. Он Будет отвечать за приложение
Раздел разработчиков. Тут создаем Чат Бота. Он Будет отвечать за приложение
По идее подходят оба варианта, но проверено все на правом
По идее подходят оба варианта, но проверено все на правом

Заполняем карточку создания бота. ВАЖНО: эти настройки для приложения с подсказками и только. Эти настройки не подходят для бота с автоответами или другими функциями.

  • Название бота - Любое название. лучше написать что-то эпичное

  • URL обработчика бота - Тут указываем наш url мини приложения. (Только если бот не будет ничего делать (показ шаблонов ответов это не действие)и если мы хотим только работать с подсказками.)

  • Тип бота* - Любой

  • Исходящий вебхук Обязательно включить

  • URL вашего обработчика* (для вебхука) url нашего приложения

  • Токен приложения - не трогаем

  • События - не трогаем

  • Настройка прав - нам нужны создание и управление чат ботами и Встраивание приложений

    После создания бота мы получим его ID и уже можем добавить его в приложение чата. Для этого необходимо выполнить простой Http запрос (Вот тут ссылка на документацию)

    URL Запроса => Вебхук для вызова rest api от нашего чат бота/imbot.app.register

    Json с запросом

{
    "CODE":"echo", //не трогаем
    "IFRAME":"URL нашего приложения",
    "HASH":"d1ab17949a572b0979d8db0d5b349c56",//любая строка
    "BOT_ID":Id бота,
    "FILDS":{
        "TITLE":"Любое название"
    },
    "CLIENT_ID":"malsv32dibb18b0cwony8673lqs3rony",
    "LANG":[
        {
            "LANGUAGE_ID":"ru",
            "TITLE":"Любое название"
        }
    ]
}

Выполняем этот запрос и в приложении чата появится заветная строчка с нашими приложением (прочих приложениях для чата. Для добавления иконки нужно добавить поле ICON_FILE в base64) открываем и наслаждаемся

Вот так выглядит наше решение. просто и элегантно, Для добавления ответов на вопросы просто редактируем массив
Вот так выглядит наше решение. просто и элегантно, Для добавления ответов на вопросы просто редактируем массив

Ссылки

  • Если вдруг у вас нет битрикса - Битрикс24

  • Документация для приложений для чата - Документация

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

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Используете ли вы открытые линии для общения с клиентами?
100% Да 1
0% Нет 0
Проголосовал 1 пользователь. Воздержавшихся нет.
Источник: https://habr.com/ru/articles/757426/


Интересные статьи

Интересные статьи

Ещё один небольшой pet-проект: про кафе и коворкинги на солнечном Кипре. "Рабочие места" для цифровых кочевников ヽ(。_°)ノДелюсь процессом разработки, фичами и граблями. Общий подход к разработке прагма...
Дети и взрослые часто смотрят на вещи по-разному. Ребёнком я наедался сладким до кариеса каждые полгода, а взрослым отказался от сахара и нахожу рацион из натуральных продуктов только вкуснее. Ребёнко...
В этой статье мы популярно объясняем на собственном опыте как организовать массовую выгрузку, обработку и загрузку фотографий товаров из Bitrix, используя Python и минимальное количество SQL. Для проч...
Привет, Хаброжители! Мы сдали в типографию очередную новинку "Время UNIX. A History and a Memoir". Из книги вы узнаете о том, как зарождалась система Unix, чем она примечате...
Продолжу неспешный разбор реализации базовых типов в CPython, ранее были рассмотрены словари и целые числа. Тем, кто думает, что в их реализации не может быть ничего интересного и хитрого, рекоме...