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

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

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

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

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

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

Для их создания в настройках кнопок нужно выбрать "Кнопки в тексте"
Так данная клавиатура будет выглядеть в Viber
А так в Telegram

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для входа в приложение существует 3 разновидности кнопок:
  1. 1.
    кнопка в тексте;
  2. 2.
    кнопка в клавиатуре;
  3. 3.
    кнопка меню бота.
Для первых двух вариантов создаем кнопку и выбираем Telegram Web Application. В поле текст вводим тот текст, который будет на кнопке, а в поле ссылка - ссылку на Ваше веб-приложение.
Could not load image
После создания кнопки выберите какая именно кнопка нужна.
Could not load image
Если не укажете явно, то будет создана кнопка в клавиатуре. Отличие кнопки только в ее типе, но сама работа кнопки будет одинаковой в любом из трех вариантов.
Также вот примеры, создающие кнопки через расширенные настройки кнопок. Кнопка в тексте:
[{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"здесь будет ссылка на ваше приложение"}]
Could not load image
Кнопка в клавиатуре: [{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"здесь будет ссылка на ваше приложение"}]
Could not load image
Третий вид кнопок создается через калькулятор:
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', 'здесь будет ссылка на ваше приложение') В результате получите кнопку возле поля ввода сообщения, которая будет на виду постоянно:
Could not load image
Результатом нажатия на любую из 3 кнопок будет открытие веб-приложения через бота в отдельном окне.
Не забывайте что Ваше веб-приложение нужно определенным образом настроить. Рекомендации от разработчиков платформы Telegram доступны по ссылке: Web Apps for Bots.

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

Давайте выделим теперь наш приветственный зеленый блок и справа в "Настройках сообщений" нажмем на "Настройки кнопок". Появится поле "Подсказка в мессенджерах без кнопок".
Текст, добавленный в поле "Подсказка в мессенджерах без кнопок" будет отображаться только в мессенджерах, не поддерживающих кнопки (в частности WhatsApp)..
Как этим пользоваться: впишем в это поле текст, который будет четко давать понять клиенту, что ему необходимо отправить, чтобы перейти в нужный раздел и посмотрим, как это будет выглядеть в WhatsApp.
Но это еще не все. Чтобы сработало условие при отправке цифр и не поменялись названия кнопок в остальных мессенджерах, добавим через точку с запятой в условия перехода цифры, соответствующие нашей подсказке.
Пример на рисунке ниже означает, что переходы из блока теперь будут срабатывать и, когда клиент пришлет фразу, и, когда цифру.
Официальный вотсап поддерживает кнопки.
Как создавать кнопки в WABA можно прочитать по ссылке:
Whatsapp Business API
Salebot.pro

Как настроить кнопки вручную

Теперь давайте рассмотрим более сложный способ создания кнопок. Все будет происходить в поле "Расширенные настройки кнопок" в "Редактировании соединения".
Давайте изменим типы белых блоков в нашей схеме на блоки с Первостепенной проверкой условия (на т-зеленые). В Условие этих блоков запишите текст, написанный на их стрелках. Теперь удалите все стрелки в нашей схеме и запишите в поле "Расширенные настройки кнопок" следующий текст:
[{"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}]
Вы получили такое же меню, но без стрелок соединения. Если все сделано верно, то нажав на кнопку такого меню вам придет сообщение из нужного блока-ответа (Рисунок 9).
Рисунок 9

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

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

Обратите внимание, что в Телеграм и ВКонтакте при использовании в одном блоке кнопок в клавиатуре и в тексте появляется сообщение "Выберите вариант". Чтобы этого избежать не используйте два этих типа кнопок одновременно.
Рисунок 10
Итак, сегодня мы рассмотрели как легко и просто на конструкторе Salebot, можно создавать кнопки в различных мессенджерах, что, на данном этапе, позволяет вам создавать функциональных ботов.

Видеоурок