Salebot.pro
Search…
⌃K

Кнопки

Как создать кнопки? Как добавить в кнопку ссылку? Как добавить кнопки без создания стрелок? Как разместить кнопки в несколько строчек с переменным количеством столбцов? Читаем в данной статье
Кнопки — это один из самых интуитивно понятных для пользователей элемент чат-ботов.
Добавляя кнопки к сообщению, мы упрощаем пользователю задачу: он нажимает на кнопку и переходит в нужный блок в зависимости от его ответа. Если человек не нажмет на кнопку, а напишет то же самое текстом, он также перейдет в соответствующий блок.
Сначала давайте рассмотрим мессенджеры, которые поддерживают кнопки (Телеграм, Viber, Facebook messenger, Вконтакте, официальный Instagram, Whatsapp бизнес).
Они поддерживают два типа кнопок: те, что появляются ниже поля (клавиатурные или реплай) ввода и кнопки в тексте (инлайн)

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

Кнопки можно создавать двумя способами - используя настройки кнопок в нужном блоке и используя стрелки между блоками. Первый вариант более функционален и удобен в работе.
Чтобы сделать кнопки из блока, открываете нужный блок, там выбираете раздел Кнопки:
Редактор блока: переходим в раздел Кнопки
раздел Кнопки: добавить кнопку и расширенные настройки кнопок
В раскрытом меню расширенных настроек кнопок увидите два переключателя - Показать кнопки и Показать стрелки как кнопки. Отключаем Показать стрелки как кнопки и нажимаем "Добавить кнопку"
раздел Кнопки: добавить кнопку и расширенные настройки кнопок
У вас откроется следующее:
Настройки новой кнопки по умолчанию
Здесь в поле "Текст" вы пишете текст, который будет в кнопке.
Пример кнопки Запросить телефон
Далее нажимаете "Добавить". Возвращаетесь к блоку, где у вас появились настройки кнопки
раздел Кнопки: пример кнопки Запросить телефон
Кнопки могут быть клавиатурные (они исчезают после нажатия или ввода текста с клавиатуры) и в кнопки тексте (они не пропадают после нажатия).
Бот реагирует на нажатие этих кнопок одинаково.
Сделаем еще одну кнопку: для этого нажмем на +
раздел Кнопки: добавить кнопку
Пример: две кнопки, тип кнопок - Клавиатурные
Кнопки вы можете менять местами и ставить в один ряд, для этого просто перетащите кнопку на нужное место.
Пример: две кнопки в ряд
и настраиваем дальше:
От нашего блока с кнопками создаем еще два, соединяя стрелками. Кликаем правой кнопкой мыши на стрелку, открываются ее настройки (или можно подвести курсор к стрелке и нажать на шестеренку). Проверяем: переключатель "Отображать как кнопку" должен быть выключен.
Настройки стрелки
Если в настройках блока включить Показать стрелки как кнопки и в настройках стрелки включить Отображать как кнопку в сообщении кнопки задвоятся
Далее переводим курсор в поле Условие. Там вам будут предложены варианты, которые у вас прописаны в кнопках:
Можете ввести условие вручную или выбрать из предложенных. Что у нас получилось:
Сообщение с кнопками
Пример диалога

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

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

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

Для их создания в разделе Кнопки можно выбрать тип кнопок Клавиатура (клавиатурные кнопки) и Кнопки в тексте. Выберите Кнопки в тексте как на изображении ниже
раздел Кнопки: тип кнопок -Кнопки в тексте
Так выглядят кнопки в тексте в Viber:
Пример кнопок в тексте в Viber
А так в Telegram:
Пример кнопок в тексте в Telegram

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

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

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

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

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

Работает в Телеграм и Viber
При создании кнопки нужно выбрать "Запросить телефон"
Настройка кнопки Запросить телефон
По нажатию на кнопку откроется это окно, требующее подтвердить передачу номера.
Когда клиент разрешит передачу номера телефона, телефон будет передан в бота в качестве реплики клиента.
Номер телефона автоматически запишется в переменную phone

Как сделать кнопку - Запрос геолокации (Вконтакте, Телеграм и Viber)

Работает в Вконтакте, Телеграм и Viber
При создании кнопки нужно выбрать "Запросить геолокацию"
кнопка Запросить геолокацию
После того, как клиент разрешит передачу местоположения, в бота перейдет сообщение с долготой и широтой.
Долгота и широта автоматически запишутся в переменные latitude и longitude.

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

На данный момент работает только в Фейсбуке.
При создании кнопки выбираете "Звонок" и заполняете все поля:

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

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

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

Кнопка только для Вконтакте и Телеграм.
При создании кнопки выбираете "Callback-кнопка(только Вконтакте, Telegram)" и заполняете все поля:
Первое поле содержит текст, который будет отображаться на кнопке. Второе поле - это текст Callback’а, приходящего при нажатии на кнопку.
При нажатии на кнопку этого типа вконтакте можно увидеть загрузку, как на картинке ниже, а в Telegram в редких случаев на кнопке на очень короткий промежуток времени появится иконка часов.
После нажатия в разделе клиенты от клиента придет соответствующий кнопке callback.

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

Для входа в приложение существует 3 разновидности кнопок:
  1. 1.
    кнопка в тексте;
  2. 2.
    кнопка в клавиатуре;
  3. 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).
Как этим пользоваться: впишем в это поле текст, который будет четко давать понять клиенту, что ему необходимо отправить, чтобы перейти в нужный раздел и посмотрим, как это будет выглядеть в 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}]
Вы получили такое же меню, но без стрелок соединения. Если все сделано верно, то нажав на кнопку такого меню вам придет сообщение из нужного блока-ответа.
Пример расширенных настроек кнопок
Отображение кнопок в 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"}]

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

Facebook и Instagram

В Facebook и Instagram существует ограничение на количество кнопок. 12 reply(обычных клавиатурных) и 3 inline (в тексте)
В Инстаграм ссылки можно размещать только в инлайн-кнопках.
Рисунок 9

Viber

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

ВКонтакте

reply

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

inline

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

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

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

Видеоурок