Кнопки
Как создать кнопки? Как добавить в кнопку ссылку? Как добавить кнопки без создания стрелок? Как разместить кнопки в несколько строчек с переменным количеством столбцов? Читаем в данной статье
Кнопки — это один из самых интуитивно понятных для пользователей элемент чат-ботов.
Добавляя кнопки к сообщению, мы упрощаем пользователю задачу: он нажимает на кнопку и переходит в нужный блок в зависимости от его ответа. Если человек не нажмет на кнопку, а напишет то же самое текстом, он также перейдет в соответствующий блок.
Сначала давайте рассмотрим мессенджеры, которые поддерживают кнопки (Телеграм, Viber, Facebook messenger, Вконтакте, официальный Instagram, Whatsapp бизнес).
Они поддерживают два типа кнопок: те, что появляются ниже поля ввода сообщения (клавиатурные или reply) и кнопки в тексте (инлайн, inline), т.е внутри сообщения.
Кнопки можно создавать двумя способами - используя настройки кнопок в нужном блоке и используя стрелки между блоками. Первый вариант более функционален и удобен в работе.
Чтобы сделать кнопки из блока, открываете нужный блок, там выбираете раздел Кнопки:
Редактор блока: переходим в раздел Кнопки
раздел Кнопки: добавить кнопку и расширенные настройки кнопок
В раскрытом меню расширенных настроек кнопок увидите два переключателя - Показать кнопки и Показать стрелки как кнопки. Отключаем Показать стрелки как кнопки и нажимаем "Добавить кнопку"
раздел Кнопки: добавить кнопку и расширенные настройки кнопок
У вас откроется следующее:
Настройки новой кнопки по умолчанию
Здесь в поле "Текст" вы пишет е текст, который будет в кнопке.
Пример кнопки Запросить телефон
Далее нажимаете "Добавить". Возвращаетесь к блоку, где у вас появились настройки кнопки
раздел Кнопки: пример кнопки Запросить телефон
Кнопки могут быть клавиатурные (они исчезают после нажатия или ввода текста с клавиатуры) и в кнопки тексте (они не пропадают после нажатия).
Бот реагирует на нажатие этих кнопок одинаково.
Сделаем еще одну кнопку: для этого нажмем на +
раздел Кнопки: добавить кнопку
Пример: две кнопки, тип кнопок - Клавиатурные
Кнопки вы можете менять местами и ставить в один ряд, для этого просто перетащите кнопку на нужное место.
Пример: две кнопки в ряд
и настраиваем дальше:
От нашего блока с кнопками создаем еще два, соединяя стрелками. Кликаем правой кнопкой мыши на стрелку, открываются ее настройки (или можно подвести курсор к стрелке и нажать на шестеренку). Проверяем: переключатель "Отображать как кнопку" должен быть выключен.
Настройки стрелки
Если в настройках блока включить Показать стрелки как кнопки и в настройках стрелки включить Отображать как кнопку в сообщении кнопки задвоятся
Далее переводим курсор в поле Условие. Там вам будут предложены варианты, которые у вас прописаны в кнопках:
Можете ввести условие вручную или выбрать из предложенны х. Что у нас получилось:
Сообщение с к нопками
Пример диалога
Например, у вас в боте есть меню, и вам нужно в разных блоках сделать кнопку "назад в меню". Чтобы не протягивать стрелку к блоку "меню" по всей воронке, сделайте следующее:
— открываете настройки блока "меню" и ставите тип блока "Первостепенная проверка условия"
— в поле "Условие" в этом блоке вписываете текст кнопки, которая будет вести на этот блок
блок Первостепенной проверки условия настроен на три разных условия
Как вы видите, в поле Условие добавлено два условия — блок будет срабатывать по любому из них. Вы можете добавить несколько условий для перехода в этот блок, условия разде ляются между собой с помощью знака ; (точка с запятой). Например, меню;назад в меню;вернуться к меню
В нужных блоках добавляете кнопку:
Для их создания в разделе Кнопки можно выбрать тип кнопок Клавиатура (клавиатурные кнопки) и Кнопки в тексте.
Выберите Кнопки в тексте как на изображении ниже
раздел Кнопки: тип кнопок -Кнопки в тексте
Так выглядят кнопки в тексте в Viber:
Пример кнопок в тексте в Viber
А так в Telegram:
Пример кнопок в тексте в Telegram
Чтобы создать кнопку со ссылкой, откройте настройки кнопки, введите название кнопки и ссылку, куда будет вести кнопка:
Пример настроек кнопки с ссылкой
Тогда при нажатии на эту кнопку будет открываться ссылка.
ВКонтакте: сообщение с кнопкой с ссылкой
У каждого мессенджера свои особенности. Например, в Telegram и Instagram ссылку можно поставить только в "Кнопку в тексте".
Также вы можете вместо ссылки подставить переменную, в которой хранится нужная вам ссылка.
В разделе Калькулятор присваиваете переменной ссылку
Настройки кнопки с ссылкой с использованием переменной
При необходимости вы можете указать цвет кнопки — это работает в ВК и Viber.
В ВК вам доступны 4 цвета кнопок (синий, красный, зеленый, белый). Если кнопка со ссылкой, то выбор цвета недоступен. Для выбора цвета нажмите на соответствующий квадрат в настройках.
В Вайбере можете выбрать любой цвет кнопки — нажмите на черный квадрат и откроется палитра.
Работает в Телеграм и Viber
При создании кнопки нужно выбрать "Запросить телефон"
Настройка кнопки Запросить телефон
По нажатию на кнопку откроется это окно, требующее подтвердить передачу номера.
Когда клиент разрешит передачу номера телефона, телефон будет передан в бота в качестве реплики клиента.
Номер телефона автоматически запишется в переменную phone
Кнопка с функцией Оплата упрощает работу с подключенными платежными системами для выдачи ссылки на оплату.
рис. Форма создания кнопки Оплата
Обратите внимание, что во многих мессенджерах ссылки можно ставить только в кнопки в тексте (inline). Не забудьте после создания кнопки выбрать подходящий тип кнопки в настройках блока.
Кнопка с функцией Оплата доступна для платежных систем:
Prodamus
Robokassa
Tinkoff
Юkassa
Cloudpayments
Выбор платежной системы из подключенных к проекту
Внутри одного блока можно создавать кнопки Оплата для разных платежных систем с разными суммами к оплате
Если к проекту не подключены платежные системы данный тип кнопок будет не доступен
Форма кнопки Оплата, если к проекту НЕ подключены платежные системы.
поле Текст. Данный текст будет указан на кнопке с ссылкой на оплату в сообщении
Функция. Выбираем тип кнопки Оплата
поле Функция. Для создания кнопки для выдачи ссылки в кнопке на оплату выбираем функцию Оплата
поле Платежная система. В списке отображаются подключенные к проекту платежные системы
В зависимости от выбранной платежной системы обязательные поля для формирования ссылки и для создания чека будут отличаться.
Посмотреть настройки кнопки с функцией Оплата для разных платежных систем можно здесь:
Обязательными полями для формирования ссылки будут Сумма и Наименование товара/Описание товара.
поле Сумма. В данном поле нужно указать сумму к оплате.
поле Наименование товара. В данном поле нужно указать название товара, которое будет указано на странице оплаты.
В наименовании товара НЕЛЬЗЯ использовать двойные кавычки.
Можете заменить их на апострофы или одинарные кавычки.
В зависимости от выбранной платежной системы в настройках кнопки появятся выпадающие меню "Данные для формирования чека" и/или "Дополнительная информация". При клике по ним откроются дополнительные поля
Рекомендуем заполнять все обязательные поля формы создания кнопки Оплата, чтобы исключить ошибки формирова ния ссылки на оплату.
Как только пользователь получит блок с кнопкой "Оплата" автоматически будут созданы переменные клиента:
Служебная переменная клиента
__payments , которая хранит сумму, идентификатор созданной ссылки, нужна для идентификации хука от платежной системы.Служебную переменную клиента __payments НЕЛЬЗЯ удалять или изменять!
Переменная клиента
error_payment_button создается, если при формировании кнопки возникла ошибка.В значение переменной error_payment_button запишется либо текст ошибки, либо ответ платежной системы с ошибкой.
Значение переменных становятся актуальными при переходе в следующий блок
Успешный платеж.
После успешной оплаты в бота придет КОЛБЭК, который состоит из 10 символов секретного ключа платежной системы, слова _success и через пробел сумма платежа
Например:
ovg58keefc_success 44, где: ovg58keefc : 10 символов секретного ключа платежной системы
_success : результат обработки запроса (успешный платеж)
44 : сумма платежа
Колбеки (уведомления) от платежной системы пользователь НЕ ВИДИТ. Они отображаются только во вкладке Клиенты и видны оператору.
Пример использования:
Шаг 1. В блоке "с кнопкой Оплата" добавляем кнопки с функцией Оплата.
Шаг 2. В поле Условие соединения от этого блока к блоку "Успешная оплата" указываем колбэк. Аналогично работает, если указать колбэк об успешной оплате в поле Условие блока Первостепенной проверки условия.
Важно: выбор соответствия Полное совпадение или По наличию ключевых слов
Кол бэк об успешной оплате в поле Условие соединения(стрелки)
Колбэк об успешной оплате в поле Условие блока.
Платеж с ошибкой
При ошибке проведения оплаты в бота придет КОЛБЭК, который состоит из 10 символов секретного ключа платежной системы, слова _fail и через пробел сумма платежа
Например,
ovg58keefc_fail 44 , гдеovg58keefc : 10 символов секретного ключа платежной системы_fail : результат обработки запроса - платеж не выполнен или с ошибкой. 44 : сумма платежаЗависит от платежной системы. Не все платежные системы присылают колбэк об ошибке платежа.
Если сумма указанная в настройках кнопки отличается от суммы, которую клиент оплатил, то придет КОЛБЭК, который состоит из 10 символов секретного ключа платежной системы, слова _different_amounts и через пробел уникальный ID платежа
Например:
ovg58keefc_different_amounts 123456 , где: ovg58keefc : 10 символов секретного ключа платежной системы_different_amounts : результат обработки запроса (сумма оплаты отличается от суммы в ссылке)
123456 : уникальный ID платежа
Работает в Вконтакте, Телеграм и Viber
При создании кнопки нужно выбрать "Запросить геолокацию"
кнопка Запросить геолокацию
После того, как клиент разрешит передачу местоположения, в бота пер ейдет сообщение с долготой и широтой.
Долгота и широта автоматически запишутся в переменные latitude и longitude.
На данный момент работает только в Фейсбуке.
При создании кнопки выбираете "Звонок" и заполняете все поля:
Кнопка только для Telegram.
При создании кнопки выбираете "Поделиться (только Telegram)" и заполняете все поля:
При нажатии на получившуюся кнопку будет предложено выбрать кому из списка контактов переслать информацию. После выбора получателя будет вставлен текст из строки “передаваемая информация”. Таким образом можно передавать любые данные и ссылки (в том числе на сообщения из каналов в телеграмм).
Кнопка только для Вконтакте и Телеграм.
При создании кнопки выбираете "Callback-кнопка(только Вконтакте, Telegram)" и заполняете все поля:
Первое поле содержит текст, который будет отображаться на кнопке. Второе поле - это текст Callback’а, который приходит в бота при нажатии на кнопку.
При нажатии на кнопку этого типа вконтакте можно увидеть загрузку, как на картинке ниже, а в Telegram в редких случаев на кнопке на очень короткий промежуток времени появится иконка часов.
При нажатии на кнопку этого типа ВКонтакте можно увидеть загрузку, как на картинке ниже.
В Telegram в редких случаев на кнопке на очень короткий промежуток времени появится иконка часов.
После нажатия в разделе клиенты от клиента придет соответствующий кнопке callback.
Тип кнопки с функцией Callback в Telegram должен быть Кнопка в тексте (inline).
Для входа в приложение существует 3 разновидности кнопок:
- 1.кнопка в тексте;
- 2.кнопка в клавиатуре;
- 3.кнопка меню бота.
Для первых двух вариантов создаем кнопку и выбираем Telegram Web Application. В поле текст вводим тот текст, который будет на кнопке, а в поле ссылка - ссылку на Ваше веб-приложение.
После создания кнопки выберите какая именно кнопка нужна.
Если не укажете явно, то будет создана кнопка в клавиатуре. Отличие кнопки только в ее типе, но сама работа кнопки будет одинаковой в любом из трех вариантов.
Также вот примеры, создающие кнопки через расширенные настройки кнопок.
Кнопка в тексте:
[{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"здесь будет ссылка на ваше приложение"}]
Кнопка в клавиатуре: [{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"здесь будет ссылка на ваше приложение"}]
Третий вид кнопок создается через калькулятор:
tg_set_chat_menu_button(type, text, web_app_url, platform_id), где
type — необязательный параметр, в котором указываем один из 3 типов кнопки (“default”, “commands”, “web_app”),
text — необязательный параметр, если не был выбран type, в нем указывается текст на кнопке,
web_app_url - необязательный параметр, ссылка на ваше веб-приложение (указывается только при выборе type “web_app”),
platform_id - необязательный параметр, указывает на конкретный диалог с пользователем, если по каким-то причинам Вы хотите отображать кнопку только кому-то конкретному.
Вот пример создания кнопки, для входа в веб-приложение: tg_set_chat_menu_button('web_app', 'Web app', 'здесь будет ссылка на ваше приложение')
В результате получите кнопку возле поля ввода сообщения, которая будет на виду постоянно:
Результатом нажатия на любую из 3 кнопок будет открытие веб-приложения через бота в отдельном окне.
Не забывайте что Ваше веб-приложение нужно определенным образом настроить. Рекомендации от разработчиков платформы Telegram доступны по ссылке: Web Apps for Bots.
Откройте приветственный зеленый блок для редактирования. В разделе Кнопки нажмите Расширенные настройки, появится поле "Подсказка в мессенджерах без кнопок".
Текст, добавленный в поле "Подсказка в мессенджерах без кнопок" будет отображаться только в мессенджерах, не поддерживающих кнопки (в частности WhatsApp).
Как этим пользоваться: впишем в это поле текст, который будет четко давать понять клиенту, что ему необходимо отправить, чтобы перейти в нужный раздел и посмотрим, как это будет выглядеть в WhatsApp.
Настройки подсказок в мессенджерах без кнопок
.jpg?alt=media&token=89c86978-3fea-4b30-8e48-a6d939801a57)
Сообщение в Whatsapp
Но это еще не все. Чтобы сработало условие при отправке цифр и не поменялись названия кнопок в остальных мессенджерах, добавим через точку с запятой в условия перехода цифры, соответствующие нашей подсказке.
Пример на рисунке ниже означает, что переходы из блока теперь будут срабатывать и на фразу от клиента и на цифру.
Официальный Whatsapp Business API поддерживает кнопки.
Как создавать кнопки в WABA можно прочитать по ссылке:
Whatsapp Business API
Salebot.pro
Как работают кнопки в шаблонах WABA
Теперь давайте рассмотрим более сложный способ создания кнопок: создание кнопок в поле "Расширенные настройки кнопок" в разделе "Кнопки" редакторе блока.
Простой вариант создания кнопок: создание кнопок протягиванием стрелок с условием:
Создание кно пок протягиванием стрелок с условием
Давайте изменим типы белых блоков в нашей схеме на блоки с Первостепенной проверкой условия (светло-зеленые). В Условие этих блоков запишите текст, написанный на их стрелках. Теперь удалите все стрелки в нашей схеме
Создание кнопок без протягивания стрелок
В редакторе блока с приветственным текстом в расширенных настройках раздела Кнопки запишите следующий текст (код кнопок):
[{"type": "reply", "text": "Расскажи об услугах", "line": 0, "index_in_line": 0}, {"type": "reply", "text": "Стоимость услуг", "line": 0, "index_in_line": 1}, {"type": "reply", "text": "Контакты", "line": 1, "index_in_line": 0}, {"type": "reply", "text": "Оставить заявку", "line": 1, "index_in_line": 1}] Вы получили такое же меню, но без стрелок соединения. Если все сделано верно, то нажав на кнопку такого меню вам придет сообщение из нужного блока-ответа.
Пример расширенных настроек кнопок
Отображение кнопок в Telegram
text - Текст кнопки(единственный обязательный параметр);
url - ссылка, по которой будет переход при нажатии на кнопку(телеграмме работает только для кнопок в тексте);
color - цвет кнопки;
line - номер линии(если значение не указано, кнопки будут друг под другом);
index_in_line - позиция кнопки в линии;
type - принимает значения reply(кнопка в клавиатуре), inline(кнопка в тексте), location(запрос местоположения), phone(запрос номера телефона).
one_time - заполните это свойст во значением 1, и клавиатура не удалится после отправки сообщения (это свойство относится только к кнопкам reply и работает только ВКонтакте).
Для создания кнопки с ссылкой необходимо указать параметр URL, остальные настройки идентичны с обычными кнопками.
[{"type": "inline", "text":"ссылка в гугл", "url":"https://google.com"}]
Клавиатурные кнопки можно создавать с помощью стрелок. Для этого протяните соединение (стрелку) и откройте редактор соединения(стрелки):
Чтобы создать кнопки с помощью стрелок включите этот ползунок, а в поле Условие стрелки напишите текст, который будет на кнопке.
Работает только в мессенджерах, где поддерживаются кнопки.
С помощью стрелок можно создать ТОЛЬКО клавиатурные кнопки
Стрелки с включенным ползунком Отображать как кнопку
ВК: Кнопки созданные стрелками
Телеграм: Кнопки созданные стрелками
Номер в линии и номер линии: Кнопки созданные с помощью стрелок по умолчанию отображаются вертикально друг под другом. С помощью этого поля можно изменить номер линии для отображения кнопки, созданной стрелкой.
НУМЕРАЦИЯ линий и позиции в линии НАЧИНАЕТСЯ С 0.
Первая кнопка в верхней линии будет иметь настройки 0 и 0
Пример настроек отображения кнопки, созданной с помощью стрелки
Цв ет кнопки: При необходимости вы можно указать цвет кнопки — это работает в ВК и Viber.
В ВК вам доступны 4 цвета кнопок (синий, красный, зеленый, белый). Если кнопка со ссылкой, то выбор цвета недоступен. Для выбора цвета нажмите на соответствующий квадрат в настройках.
В Вайбере можете выбрать любой цвет кнопки — нажмите на значок "Пипетка" и откроется палитра.
В Facebook и Instagram существует ограничение на количество кнопок. 12 reply(обычных клавиатурных) и 3 inline (в тексте)
В Инстаграм ссылки можно размещать только в инлайн-кнопках.
Рисунок 9
Максимальное количество смволов в наименовании кнопки 23 символа. Если их больше, то Facebook обрезает текст после 23 символа и вставляет троеточие.
В Viber существует ограничение на количество кнопок. 24 reply(обычных клавиатурных) и 7 inline (в тексте)
Viber позволяет добавить много знаков в наименование кнопки. Но нужно не забывать, что длинный текст переносится на новую строку и часть текста может быть не видна, а часть передвинуться на соседнюю кнопку.
Клавиатура показывается под полем ввода в диалоге с пользователем. Максимальный размер стандартной клавиатуры — 5 × 10. Максимальное количество клавиш: 40.
Клавиатура может отображаться внутри сообщения — это inline-отображение. Чтобы включить его, передайте параметр inline в объект клавиатуры. Её максимальный размер составит 5 × 6. Максимальное количество клавиш: 10.
ВКонтакте допускается до 40 символов в наименовании кнопки. Если символов больше, то кнопки не отправляются.
В Одноклассниках может быть 42 знака в наименовании кнопки, остальные платформа обрежет и вставит троеточие.
Максимальное количество символов в наименовании кнопок допускается 32 знака. Если их больше, то Telegram посреди текста вырезает кусок текста и вставляет троеточие.
В одном сообщении отправить оба вида кнопок не получится. О том, как соединить два вида кнопок в боте Telegram можно прочитать здесь:
Telegram
Salebot.pro
Как совместить два вида кнопок в боте Telegram
Итак, сегодня мы рассмотрели как легко и просто на конструкторе Salebot, можно создавать кнопки в различных мессенджерах, что, на данном этапе, позволяет вам создавать функциональных ботов.
Данная ошибка может возникнуть, если нарушены ограничения мессенджера для кнопок. Например, для Telegram ограничение на длину текста в названии кнопки до 32 символов.
Решение: сократить длину названия в настройках кнопки или использовать кнопки с функцией Callback
Last modified 5d ago