Кнопки

Как создать кнопки? Как добавить в кнопку ссылку? Как добавить кнопки без создания стрелок? Как разместить кнопки в несколько строчек с переменным количеством столбцов? Читаем в данной статье

Кнопки — это один из самых интуитивно понятных для пользователей элемент чат-ботов.

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

Сначала давайте рассмотрим мессенджеры, которые поддерживают кнопки (Телеграм, Viber, Facebook messenger, Вконтакте, официальный Instagram, Whatsapp бизнес).

Они поддерживают два типа кнопок: те, что появляются ниже поля ввода сообщения (клавиатурные или reply) и кнопки в тексте (инлайн, inline), т.е внутри сообщения.

Как создавать кнопки

Кнопки можно создавать двумя способами: используя настройки кнопок в нужном блоке и используя стрелки между блоками. Первый вариант более функционален и удобен в работе.

Чтобы сделать кнопки из блока, открываете нужный блок, там выбираете раздел Кнопки:

В раскрытом меню расширенных настроек кнопок увидите два переключателя - Показать кнопки и Показать стрелки как кнопки. Отключаем Показать стрелки как кнопки и нажимаем "Добавить кнопку"

У вас откроется следующее:

Здесь в поле "Текст" вы пишете текст, который будет в кнопке.

Далее нажимаете "Добавить". Возвращаетесь к блоку, где у вас появились настройки кнопки

Кнопки могут быть клавиатурные (они исчезают после нажатия или ввода текста с клавиатуры) и кнопки в тексте (они не пропадают после нажатия).

Бот реагирует на нажатие этих кнопок одинаково.

Сделаем еще одну кнопку: для этого нажмем на +

Кнопки вы можете менять местами и ставить в один ряд: для этого просто перетащите кнопку на нужное место.

и настраиваем дальше:

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

Если в настройках блока включить "Показать стрелки как кнопки" и в настройках стрелки включить "Отображать как кнопку в сообщении", кнопки задвоятся

Далее переводим курсор в поле Условие. Там вам будут предложены варианты, которые у вас прописаны в кнопках:

Можете ввести условие вручную или выбрать из предложенных. Что у нас получилось:

Как можно сделать кнопку без протягивания стрелок

Например, у вас в боте есть меню, и вам нужно в разных блоках сделать кнопку "назад в меню". Чтобы не протягивать стрелку к блоку "меню" по всей воронке, сделайте следующее:

— открываете настройки блока "меню" и ставите тип блока "Первостепенная проверка условия"

— в поле "Условие" в этом блоке вписываете текст кнопки, которая будет вести на этот блок

Как вы видите, в поле Условие добавлено два условия — блок будет срабатывать по любому из них. Вы можете добавить несколько условий для перехода в этот блок, условия разделяются между собой с помощью знака ; (точка с запятой). Например, меню;назад в меню;вернуться к меню

В нужных блоках добавляете кнопку:

Как сделать кнопки в тексте

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

Так выглядят кнопки в тексте в Viber:

А так в Telegram:

Как сделать кнопки со ссылкой

Чтобы создать кнопку со ссылкой, откройте настройки кнопки, введите название кнопки и ссылку, куда будет вести кнопка:

Тогда при нажатии на эту кнопку будет открываться ссылка.

У каждого мессенджера свои особенности. Например, в Telegram и Instagram ссылку можно поставить только в "Кнопку в тексте".

Также вы можете вместо ссылки подставить переменную, в которой хранится нужная вам ссылка.

Как задать цвет кнопки

При необходимости вы можете указать цвет кнопки — это работает в ВК и Viber.

В ВК вам доступны 4 цвета кнопок (синий, красный, зеленый, белый). Если кнопка со ссылкой, то выбор цвета недоступен. Для выбора цвета нажмите на соответствующий квадрат в настройках.

В Вайбере можете выбрать любой цвет кнопки — нажмите на черный квадрат и откроется палитра.

Как сделать кнопку - Запросить телефон (Telegram и Viber)

Работает в Телеграм и 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)

Работает в Вконтакте, Телеграм и Viber

При создании кнопки нужно выбрать "Запросить геолокацию"

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

Долгота и широта автоматически запишутся в переменные latitude и longitude.

Как создать кнопку "Звонок" (Facebook*)

*На территории Российской Федерации запрещена деятельность социальных сетей Facebook и Instagram, принадлежащих компании Meta Platforms Inc., признанная экстремистской!

На данный момент работает только в Фейсбуке*.

При создании кнопки выбираете "Звонок" и заполняете все поля:

Как создать кнопку "Поделиться (Telegram)"

Кнопка только для Telegram.

При создании кнопки выбираете "Поделиться (только Telegram)" и заполняете все поля:

При нажатии на получившуюся кнопку будет предложено выбрать, кому из списка контактов переслать информацию. После выбора получателя будет вставлен текст из строки “передаваемая информация”. Таким образом можно передавать любые данные и ссылки (в том числе на сообщения из каналов в телеграмм).

Видео обзор по созданию кнопки "Поделиться".

Как добавить Callback-кнопку (Вконтакте, Telegram)

Кнопка только для Вконтакте и Телеграм.

При создании кнопки выбираете "Callback-кнопка (только Вконтакте, Telegram)" и заполняете все поля:

При нажатии на кнопку этого типа ВКонтакте можно увидеть загрузку, как на картинке ниже. В Telegram в редких случаев на кнопке на очень короткий промежуток времени появится иконка часов.

После нажатия в разделе клиенты от клиента придет соответствующий кнопке callback.

Тип кнопки с функцией Callback в Telegram должен быть Кнопка в тексте (inline).

Видеоурок: Callback-кнопки

Как установить боту кнопку для входа в Ваше веб-приложение (Web App)

Для входа в приложение существует 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.

Видео обзор работы с WebApp кнопками

Как заменить кнопки в WhatsApp

Откройте приветственный зеленый блок для редактирования. В разделе Кнопки нажмите "Расширенные настройки", появится поле "Подсказка в мессенджерах без кнопок".

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

Как этим пользоваться: впишем в это поле текст, который будет четко давать понять клиенту, что ему необходимо отправить, чтобы перейти в нужный раздел и посмотрим, как это будет выглядеть в WhatsApp.

Но это еще не все. Чтобы сработало условие при отправке цифр и не поменялись названия кнопок в остальных мессенджерах, добавим через точку с запятой в условия перехода цифры, соответствующие нашей подсказке.

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

Официальный Whatsapp Business API поддерживает кнопки.

Как создавать кнопки в 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}]

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

Видеоурок работы с кодом кнопок.

Все возможные настройки кнопок в этом поле

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.

Какие есть ограничения

Facebook* и Instagram*

В Facebook и Instagram существует ограничение на количество кнопок. 12 reply(обычных клавиатурных) и 3 inline (в тексте)

В Инстаграм* ссылки можно размещать только в инлайн-кнопках.

Максимальное количество символов в наименовании кнопки - 23 символа. Если их больше, то Facebook* обрезает текст после 23 символа и вставляет троеточие.

Viber

В Viber существует ограничение на количество кнопок. 24 reply(обычных клавиатурных) и 7 inline (в тексте)

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

ВКонтакте

reply

Клавиатура показывается под полем ввода в диалоге с пользователем. Максимальный размер стандартной клавиатуры — 5 × 10. Максимальное количество клавиш: 40.

inline

Клавиатура может отображаться внутри сообщения — это inline-отображение. Чтобы включить его, передайте параметр inline в объект клавиатуры. Её максимальный размер составит 5 × 6. Максимальное количество клавиш: 10.

ВКонтакте допускается до 40 символов в наименовании кнопки. Если символов больше, то кнопки не отправляются.

Одноклассники

В Одноклассниках может быть 42 знака в наименовании кнопки, остальные платформа обрежет и вставит троеточие.

Максимальное количество символов в наименовании кнопок допускается 32 знака. Если их больше, то Telegram посреди текста вырезает кусок текста и вставляет троеточие.

Одновременно inline и reply

В одном сообщении отправить оба вида кнопок не получится. О том, как соединить два вида кнопок в боте Telegram можно прочитать здесь:

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

Возможные ошибки создания кнопок

Bad Request: BUTTON_DATA_INVALID

Данная ошибка может возникнуть, если нарушены ограничения мессенджера для кнопок. Например, для Telegram ограничение на длину текста в названии кнопки до 32 символов.

Решение: сократить длину названия в настройках кнопки или использовать кнопки с функцией Callback

Также данная ошибка может всплывать в случае, если текст слишком длинный (для Телеграм ограничение 1-64 байта):