Кнопки
Как создать кнопки? Как добавить в кнопку ссылку? Как добавить кнопки без создания стрелок? Как разместить кнопки в несколько строчек с переменным количеством столбцов? Читаем в данной статье
Кнопки — это один из самых интуитивно понятных для пользователей элемент чат-ботов.
Добавляя кнопки к сообщению, мы упрощаем пользователю задачу: он нажимает на кнопку и переходит в нужный блок в зависимости от его ответа. Если человек не нажмет на кнопку, а напишет то же самое текстом, он также перейдет в соответствующий блок.
Сначала давайте рассмотрим мессенджеры, которые поддерживают кнопки (Телеграм, Viber, Facebook* messenger, Вконтакте, официальный Instagram*, Whatsapp бизнес).
Принадлежит компании Meta, деятельность которой признана в России экстремистской и запрещена.
Они поддерживают два типа кнопок: те, что появляются ниже поля ввода сообщения (клавиатурные или reply) и кнопки в тексте (инлайн, inline), т.е внутри сообщения.
Как создавать кнопки
Кнопки можно создавать двумя способами: используя настройки кнопок в нужном блоке и используя стрелки между блоками. Первый вариант более функционален и удобен в работе.
Чтобы сделать кнопки из блока, открываете нужный блок, там выбираете раздел Кнопки:
В раскрытом меню расширенных настроек кнопок увидите два переключателя - Показать кнопки и Показать стрелки как кнопки. Отключаем Показать стрелки как кнопки и нажимаем "Добавить кнопку"
У вас откроется следующее:
Здесь в поле "Текст" вы пишете текст, который будет в кнопке.
Далее нажимаете "Добавить". Возвращаетесь к блоку, где у вас появились настройки кнопки
Кнопки могут быть клавиатурные (они исчезают после нажатия или ввода текста с клавиатуры) и кнопки в тексте (они не пропадают после нажатия).
Бот реагирует на нажатие этих кнопок одинаково.
Сделаем еще одну кнопку: для этого нажмем на +
Кнопки вы можете менять местами и ставить в один ряд: для этого просто перетащите кнопку на нужное место.
и настраиваем дальше:
От нашего блока с кнопками создаем еще два, соединяя стрелками. Кликаем правой кнопкой мыши на стрелку, открываются ее настройки (или можно подвести курсор к стрелке и нажать на шестеренку). Проверяем: переключатель "Отображать как кнопку" должен быть выключен.
Далее переводим курсор в поле Условие. Там вам будут предложены варианты, которые у вас прописаны в кнопках:
Можете ввести условие вручную или выбрать из предложенных. Что у нас получилось:
Как правильно прописать название кнопки
При создании кнопки вы всегда выбираете наиболее интересные и привлекательные названия для привлечения клиентов. Однако необходимо соблюдать следующее правило: в названии кнопки не должно быть кавычек.
Неправильный вариант:
Если вам необходимо как-либо выделить слова, вы можете использовать одинарные кавычки.
Правильный вариант:
Также вы можете сделать кнопки ярче и красочнее, воспользовавшись эмодзи:
Как выглядит кнопка с эмодзи в Телеграм:
Как можно сделать кнопку без протягивания стрелок
Например, у вас в боте есть меню, и вам нужно в разных блоках сделать кнопку "назад в меню". Чтобы не протягивать стрелку к блоку "меню" по всей воронке, сделайте следующее:
— открываете настройки блока "меню" и ставите тип блока "Первостепенная проверка условия"
— в поле "Условие" в этом блоке вписываете текст кнопки, которая будет вести на этот блок
Как вы видите, в поле Условие добавлено два условия — блок будет срабатывать по любому из них. Вы можете добавить несколько условий для перехода в этот блок, условия разделяются между собой с помощью знака ; (точка с запятой). Например, меню;назад в меню;вернуться к меню
В нужных блоках добавляете кнопку:
Как сделать кнопки в тексте
Для их создания в разделе Кнопки можно выбрать тип кнопок Клавиатура (клавиатурные кнопки) и Кнопки в тексте. Выберите Кнопки в тексте как на изображении ниже
Так выглядят кнопки в тексте в Viber:
А так в Telegram:
Как сделать кнопки со ссылкой
Чтобы создать кнопку со ссылкой, откройте настройки кнопки, введите название кнопки и ссылку, куда будет вести кнопка:
Тогда при нажатии на эту кнопку будет открываться ссылка.
Также вы можете вместо ссылки подставить переменную, в которой хранится нужная вам ссылка.
Как задать цвет кнопки
При необходимости вы можете указать цвет кнопки — это работает в ВК и Viber.
В ВК вам доступны 4 цвета кнопок (синий, красный, зеленый, белый). Если кнопка со ссылкой, то выбор цвета недоступен. Для выбора цвета нажмите на соответствующий квадрат в настройках.
В Вайбере можете выбрать любой цвет кнопки — нажмите на черный квадрат и откроется палитра.
Как сделать кнопку - Запросить телефон (Telegram и Viber)
При создании кнопки нужно выбрать "Запросить телефон"
При нажатии на кнопку откроется окно, требующее подтвердить передачу номера:
Когда клиент разрешит передачу номера телефона, телефон будет передан в бота в качестве реплики клиента.
Номер телефона автоматически запишется в переменную phone
Как сделать кнопку - Оплата
Кнопка с функцией Оплата упрощает работу с подключенными платежными системами для выдачи ссылки на оплату.
Кнопка с функцией Оплата доступна для платежных систем:
Prodamus Robokassa Tinkoff Юkassa Cloudpayments
Если к проекту не подключены платежные системы, данный тип кнопок будет не доступен
Основные поля кнопки Оплата
поле Текст. Данный текст будет указан на кнопке с ссылкой на оплату в сообщении Функция. Выбираем тип кнопки Оплата
поле Функция. Для создания кнопки для выдачи ссылки в кнопке на оплату выбираем функцию Оплата
поле Платежная система. В списке отображаются подключенные к проекту платежные системы
В зависимости от выбранной платежной системы обязательные поля для формирования ссылки и для создания чека будут отличаться.
Посмотреть настройки кнопки с функцией Оплата для разных платежных систем можно здесь:
для Prodamus здесь
для Robokassa здесь
для Тинькофф здесь
для ЮKassa здесь
Обязательными полями для формирования ссылки будут Сумма и Наименование товара/Описание товара. поле Сумма. В данном поле нужно указать сумму к оплате.
поле Наименование товара. В данном поле нужно указать название товара, которое будет указано на странице оплаты.
В наименовании товара НЕЛЬЗЯ использовать двойные кавычки. Можете заменить их на апострофы или одинарные кавычки.
В зависимости от выбранной платежной системы в настройках кнопки появятся выпадающие меню "Данные для формирования чека" и/или "Дополнительная информация". При клике по ним откроются дополнительные поля
Рекомендуем заполнять все обязательные поля формы создания кнопки Оплата, чтобы исключить ошибки формирования ссылки на оплату.
Переменные при использовании кнопки с функцией Оплата
Как только пользователь получит блок с кнопкой "Оплата" автоматически будут созданы переменные клиента:
Служебная переменная клиента __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.
Как создать кнопку "Звонок" (Facebook*)
*На территории Российской Федерации запрещена деятельность социальных сетей Facebook и Instagram, принадлежащих компании Meta Platforms Inc., признанная экстремистской!
При создании кнопки выбираете "Звонок" и заполняете все поля:
Как создать кнопку "Поделиться (Telegram)"
При создании кнопки выбираете "Поделиться (только Telegram)" и заполняете все поля:
При нажатии на получившуюся кнопку будет предложено выбрать, кому из списка контактов переслать информацию. После выбора получателя будет вставлен текст из строки “передаваемая информация”. Таким образом можно передавать любые данные и ссылки (в том числе на сообщения из каналов в телеграмм).
Видео обзор по созданию кнопки "Поделиться".
Как добавить Callback-кнопку (Вконтакте, Telegram)
При создании кнопки выбираете "Callback-кнопка (только Вконтакте, Telegram)" и заполняете все поля:
При нажатии на кнопку этого типа ВКонтакте можно увидеть загрузку, как на картинке ниже. В Telegram в редких случаев на кнопке на очень короткий промежуток времени появится иконка часов.
После нажатия в разделе клиенты от клиента придет соответствующий кнопке callback.
Видеоурок: 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 кнопок будет открытие веб-приложения через бота в отдельном окне.
Видео обзор работы с 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, принадлежащих компании Meta Platforms Inc., признанная экстремистской!
В 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 знака в наименовании кнопки, остальные платформа обрежет и вставит троеточие.
Telegram
Максимальное количество символов в наименовании кнопок допускается 32 знака. Если их больше, то Telegram посреди текста вырезает кусок текста и вставляет троеточие.
Одновременно inline и reply
В одном сообщении отправить оба вида кнопок не получится. О том, как соединить два вида кнопок в боте Telegram можно прочитать здесь:
Итак, сегодня мы рассмотрели как легко и просто на конструкторе Salebot, можно создавать кнопки в различных мессенджерах, что, на данном этапе, позволяет вам создавать функциональных ботов.
Возможные ошибки создания кнопок
Bad Request: BUTTON_DATA_INVALID
Данная ошибка может возникнуть, если нарушены ограничения мессенджера для кнопок. Например, для Telegram ограничение на длину текста в названии кнопки до 32 символов.
Решение: сократить длину названия в настройках кнопки или использовать кнопки с функцией Callback
Также данная ошибка может всплывать в случае, если текст слишком длинный (для Телеграм ограничение 1-64 байта):
Видеоурок
Last updated
Was this helpful?