Для чего нужна выделенная кнопка в чате битрикс 24 ответы

Для чего нужна выделенная кнопка в чате?

Для того, чтобы, увидеть ответ, необходимо приобрести одну из следующих подписок:

Купить подписку можно на главной странице сайта

О проекте

Мы публикуем ответы на тесты, необходимые для получения сертификатов по 1С — Битрикс. Данные сертификаты требуются для получения компетенции и партнерства.

Разделы

Ответы

Контент — менеджер
Администратор.Базовый
Администратор.Модули
Bitrix Framework
Пользователь Сервиса Битрикс24

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

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

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

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

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

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

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

Битрикс 24 на любом коммерческом тарифе (на бесплатном АПИ не работает)
Чат-бот. Создается через раздел разработчика
Любой хостинг и домен с SSL Сертификатом
Документация и воображение

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

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

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

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

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

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

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

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

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

 Список ответов

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 += `'>)">$ `; > > function frameCommunicationInit() < if (!window.frameCommunication) < window.frameCommunication = >; > 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();

В итоге получили такую страницу

    Title  Список ответов

Массив 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 _{[партнерская ссылка удалена модератором]}
Документация для приложений для чата — Документация

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

Для чего нужна выделенная кнопка в чате битрикс 24 ответы

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

Как клавиатуру добавить к чат-боту

Клавиатура – это часть сообщения, при создании сообщения нужно добавить ключ KEYBOARD и передать параметры.

Методы, которые поддерживают клавиатуру:

imbot.message.add — отправка сообщения от чат-бота.
imbot.message.update — отправка изменения сообщения чат-бота.
imbot.command.answer — публикация ответа на команду.
im.message.add — отправка сообщения в чат.
im.message.update — отправка изменения сообщения чат-бота.

Рассмотрим на примере это сообщение:

restCommand('imbot.command.answer', Array( "COMMAND_ID" => $command['COMMAND_ID'], "MESSAGE_ID" => $command['MESSAGE_ID'], "MESSAGE" => "Hello! My name is EchoBot :)[br] I designed to answer your questions!", "KEYBOARD" => Array( Array( "TEXT" => "Bitrix24", "LINK" => "http://bitrix24.com", "BG_COLOR" => "#29619b", "TEXT_COLOR" => "#fff", "DISPLAY" => "LINE", ), Array( "TEXT" => "BitBucket", "LINK" => "https://bitbucket.org/Bitrix24com/rest-bot-echotest", "BG_COLOR" => "#2a4c7c", "TEXT_COLOR" => "#fff", "DISPLAY" => "LINE", ), Array("TYPE" => "NEWLINE"), // перенос строки Array("TEXT" => "Echo", "COMMAND" => "echo", "COMMAND_PARAMS" => "test from keyboard", "DISPLAY" => "LINE"), Array("TEXT" => "List", "COMMAND" => "echoList", "DISPLAY" => "LINE"), Array("TEXT" => "Help", "COMMAND" => "help", "DISPLAY" => "LINE"), ) ), $_REQUEST["auth"]);

Примечание: функция restCommand — это метод отправки данных в Битрикс24, данный метод есть в примере ЭхоБота, и представлен здесь в качестве примера. Вы можете использовать свою функцию или javascript-метод BX24.callMethod или bitrix24-php-sdk.

Клавиатура – это набор кнопок, каждая кнопка может состоять из следующих ключей:

TEXT – текст кнопки;
LINK – ссылка;
COMMAND – команда, которая будет отправлена боту;
COMMAND_PARAMS – параметры для команды;
BG_COLOR – цвет кнопки;
BLOCK – если указать Y, то после клика на одну кнопку клавиатура будет блокироваться. Клавиатуру блокируют только кнопки, которые отправляют ajax боту (учтите, что ссылки на внешние ресурсы LINK и мгновенные действия ACTION не блокируют клавиатуру). Блокировка нужна для ограничения выполнения ajax-команд из-за их асинхронности и времени ожидания: после нажатия кнопки клавиатура блокируется и ожидается реакция с бэкенда Битрикс24, чтобы пользователь не нажал вторую кнопку и т. д. Бэкенд обрабатывает команды и принимает решение, разблокировать ли клавиатуру, создав новую, или же скрыть её;
DISABLED – если указать Y, то данная кнопка не будет кликабельной;
TEXT_COLOR – цвет текста;
DISPLAY – тип кнопки. Если указан тип BLOCK, то на одной строчке может быть только эта кнопка. Если указан тип LINE, то кнопки будут выстроены друг за другом;
WIDTH – ширина кнопки. Обратите внимание, для максимального удобства набор кнопок в одну линию не рекомендуется делать более 225 пикселей, это максимальная ширина на мобильном устройстве.
APP_ID – идентификатор установленного приложения для чата.
APP_PARAMS – параметры для запуска приложения для чата.
ACTION – действие, может быть одно из следующих типов (REST ревизии 28):
- PUT – вставить в поле ввода.
- SEND – отправить текст.
- COPY – копировать текст в буфер обмена.
- CALL – позвонить.
- DIALOG – открыть указанный диалог.
- PUT – текст, который будет вставлен в поле ввода.
- SEND – текст, который будет отправлен.
- COPY – текст, который будет скопирован в буфер обмена.
- CALL – номер телефона в международном формате.
- DIALOG – идентификатор диалога, это может быть ID пользователя, либо ID чата в формате chatXXX .
Обязательными полями является TEXT и либо поле LINK, либо поле COMMAND.

Если указан ключ LINK, то кнопка становится внешней ссылкой. Если указаны поля COMMAND и COMMAND_PARAMS, то кнопка является действием и отправляет команду чат-боту, не публикуя ее в чат.

Если указаны поля APP_ID и APP_PARAMS, то кнопка откроет окно с приложением для чата.

Если необходимо сделать две строки с кнопками в ряд, то для их разделения нужно добавить кнопку со следующим содержимым: «TYPE» => «NEWLINE» .

Обработка команд чат-ботом

Для обработки нажатия кнопок клавиатуры, используются команды.
```
"COMMAND" => "page", // команда, которая будет отправлена чат-боту "COMMAND_PARAMS" => "1", // параметры для команды
```
- если команду написал пользователь самостоятельно, там будет TEXTAREA;
- если команда пришла из клавиатуры, то будет KEYBOARD;
- если команда пришла из контекстного меню, то будет MENU.
Готовый пример, можно посмотреть в обновленной версии ЭхоБота (bot.php).

Обработка открытия приложения для чата

Приложение для чата, запускаемые из контекстного меню, работают по принципам Контекстного приложения.

Примеры использования клавиатуры
1. EchoBot
  Постраничная навигация, кнопки при вызове команды «Помощь»
2. Марта
  Просто напишите марте Поиграй со мной! . Клавиатура используется как игровое поле:
3. Giphy
  Кнопка Еще позволяет без повторного введения поискового слова просматривать другие картинки на эту же тему:
Общение в чате

Одним из видов общения в Битрикс24 являются чаты. Мессенджер Битрикс24, кроме обычного общения, позволяет еще передавать файлы, создавать задачи и встречи из диалогов.

Создать новый чат

Для создания нового чата нужно нажать кнопку Cоздать чат и выбрать нужный тип чата:
- Чат – это чат один-на-один с коллегой, он виден только вам и вашему собеседнику. Найти нужного человека можно по имени, фамилии, должности или отделу.
- Групповой чат – это закрытый чат на несколько человек, он виден только приглашенным пользователям. Подробнее.
- Канал – это открытый чат для всех желающих, его могут найти по поиску любой коллега, просмотреть историю диалога и при желании вступить в него. Подробнее
- Видеоконференция HD – это видеоконференция, доступная приглашенным в нее или по ссылке. Подробнее.
Далее нужно пригласить в него собеседника, указав фамилию, имя, e-mail или ник из его профиля:

Диалоги (чаты)

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

Чаты с сотрудниками сгруппированы по дате последнего сообщения в данном чате по вкладкам в окне контактов. Вкладки и сами сообщения содержат аватары коллег. Это позволяет c легкостью переключаться между диалогами.

Если вы напишете сообщение отсутствующему сотруднику в оффлайн, то по возвращении коллеги на портал оно будет доставлено, также это сообщение будет присутствовать в истории диалога.

У каждого сообщения при наведении на него появляется меню действий. Пункты меню зависят от того, чье это сообщение и какой контент сообщения:
- Собственное – Копировать файл, Цитировать сообщение, Создать задачу, Обсудить в новом чате, Обсудить в ленте новостей, Редактировать сообщение и Удалить сообщение.
- Собеседника – Ответить, Копировать файл, Отметить как непрочитанное, Цитировать сообщение, Создать задачу, Обсудить в новом чате и Обсудить в ленте новостей.
При написании сообщения можно упоминать сотрудника в чате. Для этого просто нажмите клавишу на клавиатуре или +, или @, или нажмите иконку – будет выведен диалог, где можно найти и выбрать нужного человека:

Закрепить диалог

Часто используемые диалоги можно закреплять в контакт-листе. Для этого нужно вызвать правой кнопкой мыши меню и выбрать Закрепить диалог:

Скрыть диалог

Вы можете скрывать ненужные диалоги. Для этого нажмите правой кнопкой мыши на диалоге в контакт-листе и выберите в меню пункт Скрыть диалог:

Диалоги не удаляются, и вы их не покидаете – они просто скрываются в контакт-листе. Если кто-то напишет в этот чат сообщение, то диалог снова появится в списке. Также скрытый чат можно найти по поиску.

Просмотренные сообщения

В самом диалоге вы всегда увидите, кто прочитал ваше сообщение с помощью статуса Сообщение просмотрено:

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

Если вы перешли в диалог, понимаете, что адресованное сообщение важное, но у вас сейчас недостаточно времени для ответа, то можно отметить сообщения как непрочитанное, опция доступна в контекстном меню рядом с сообщением:

Сообщение будет помечено как непрочитанное и появится иконка нового сообщения:

Лайки, смайлики, отправка сообщений

Для выражения эмоций в чате есть лайки и смайлы:

Вы можете сменить сочетание клавиш для отправки сообщения прямо в чате: нажмите во время ввода сообщения на надпись Ctrl(Cmd) + Enter. Также можно изменять размер поля ввода текста, потянув за верхний край:

Сменить сочетание клавиш для отправки сообщения можно также в настройках мессенджера.

Работа с файлами

Чаты Битрикс24 позволяют загружать файлы прямо в диалог. Для этого нужно кликнуть по соответствующей кнопке возле поля ввода сообщения и Выбрать на компьютере или Выбрать на моем Диске нужный файл:

После загрузки файл отобразится в диалоге, также его можно будет Скачать на компьютер или Сохранить на Диск по ссылкам:

Есть и более быстрый вариант загрузки файла или картинки в диалог – просто перенесите с помощью drag & drop на область чата нужный файл:

Если необходимо Скопировать файл из одного чата в другой, достаточно его скопировать через контекстное меню и вставить в другой диалог:

Внешние (экстранет) пользователи

Общение с внешними (экстранет) пользователями не отличается от общения с сотрудниками компании, но при этом в чате такие пользователи выделяются специальным цветом : в Контакт-листе, в названии диалога, а также поле ввода сообщения с набираемым в нем текстом:

Примечание: Общение с внешними экстранет-пользователями доступно на всех тарифах Битрикс24. Экстранет-пользователи входят в общее число пользователей вашего Битрикс24.

Читать:
Как посмотреть статус в ватсапе и остаться незамеченным