Инлайн-режим (inline mode) в Telegram

Что такое инлайн-режим в Телеграме?

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

Чтобы обратиться к боту, у которого подключен инлайн-режим, достаточно в поле сообщения ввести @*имя бота*.

Самый яркий и популярный пример бота, работающего в инлайн-режиме, это @gif, с помощью которого вы можете выбрать и отправить гиф-изображения:

Как включить инлайн-режим

Для работы бота в инлайн-режим, нужно включить эту опцию в настройках бота в BotFather.

Выбираем нужного бота и переходим в настройки Bot Settings

Далее Inline Mode

И нужно включить инлайн режим, если он не включен

Как изменить плейсхолдер

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

Чтобы изменить нужно нажать кнопку Edit inline placeholder:

Напишите, что именно должно отображаться в плейсхолдере:

Как настроить результаты вывода

После нажатия на вариант из списка в инлайн-режиме, отправится сообщение, которое указано в заголовке выбранного варианта, и на это значение можно настроить реакцию в воронке.

Чтоб указать данные для вывода в инлайн режиме, нужно задать переменную inline_bot. В инлайн-режиме поиск по значениям в переменной inline_bot происходит практически в реальном времени.

Данные в переменной могут быть заданы тремя вариантами. Рассмотрим от самого простого, до максимальных настроек.

Массив с текстовыми данными

Например поиск будет происходить по массиву продуктов

Поиск происходит по вхождению введенной фразы в вариантах в массиве:

При вводе '@название__вашего__бота' и начальных букв команд открывается меню со значениями, которые вы указали в переменной проекта.

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

Настройка блока выглядит следующим образом:

Пример данных:

["Молоко", "Хлеб", "Макароны", "Шоколад", "Яйца", "Масло", "Слойка", "Чай", "Овощи", "Фрукты"]

Массив со словарями для вариантов кнопок

Второй вариант более настраиваемый, вместо текстовых значений массив будет содержать словари.

Разберем максимальный набор параметров для одного варианта (словаря). Для примера возьмем следующий:

{"title": "Оплата", "description": "Способы оплаты описание",

"thumb_url": "https://img.icons8.com/dusk/50/000000/card-exchange.png", "message_text": "оплата товара 1"}

title - заголовок кнопки

description - описание

thumb_url - ссылка на картинку

message_text - Этот текст отправится при выборе этого варианта

1. Пример вывода и после нажатия 2. отправился заданный текст

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

Например: {"title": "Настройка"}

Пример данных:

[{"title": "Корзина", "description": "Выбранные товары", "thumb_url": "https://img.icons8.com/dusk/64/000000/shopping-basket.png"},

{"title": "Доставка", "description": "Варианты доставки заказа", "thumb_url": "https://img.icons8.com/dusk/64/000000/delivery--v1.png"},

{"title": "Оплата", "description": "Способы оплаты описание",

"thumb_url": "https://img.icons8.com/dusk/50/000000/card-exchange.png", "message_text": "оплата товара 1"},

{"title": "Настройка"}]

Словарь со списком для вариантов кнопок

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

В примере поиск будет происходить по ключам меню, посты и продукты.

Структура следующая:

"ключ": [массив кнопок]

{"поисковая фраза1": [{"title": "Корзина", "description": "Выбранные товары"},

{"title": "Оплата", "description": "Способы оплаты",

"thumb_url": "#{переменная с урлом}", "message_text": "Способы оплаты"},

{"title": "Доставка", "description": "Варианты доставки заказа",

"thumb_url": "ссылка на картинку"}],

"поисковая фраза2": [{"title": "Первый", "description": "Описание 1111"},

{"title": "Четвертый", "description": "#{переменная}"}],

"поисковая фраза3": ["Молоко", "Хлеб", "#{переменная}", "Шоколад"]}

Разберем максимальный набор параметров для одного варианта (словаря). Для примера возьмем следующий:

{"title": "Оплата", "description": "Способы оплаты описание",

"thumb_url": "https://img.icons8.com/dusk/50/000000/card-exchange.png", "message_text": "оплата товара 1"}

title - заголовок кнопки

description - описание

thumb_url - ссылка на картинку

message_text - Этот текст отправится при выборе этого варианта

Минимально один вариант (словарь) должен содержать ключ title со значением, которое отправится при нажатии на этот пункт.

Например: {"title": "Настройка"}

Пример данных:

{"меню": [{"title": "Корзина", "description": "Выбранные товары",

"thumb_url": "https://img.icons8.com/dusk/64/000000/shopping-basket.png"},

{"title": "Оплата", "description": "Способы оплаты",

"thumb_url": "https://img.icons8.com/dusk/50/000000/card-exchange.png", "message_text": "Способы оплаты"},

{"title": "Доставка", "description": "Варианты доставки заказа",

"thumb_url": "https://img.icons8.com/dusk/64/000000/delivery--v1.png"}],

"посты": [{"title": "Первый", "description": "Описание 1111"},

{"title": "Второй", "description": "Описание 2222"},

{"title": "Третий", "description": "Описание 333"},

{"title": "Четвертый", "description": "Описание 44444"}],

"продукты": ["Молоко", "Хлеб", "Макароны", "Шоколад", "Яйца", "Масло", "Слойка", "Чай", "Овощи", "Фрукты"]}

Пример ввода значений в переменную inline_bot:

Вывод при отсутствии фильтрации

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

Инлайн-кнопка с заданным поисковым значением

Чтоб задать поисковую фразу нужно в инлайн-кнопку добавить параметр inline_query.

Со значением которое автоматически подставляется в запрос.

Например добавим три кнопки, которые соответствуют примеру из предыдущей главы

[{"line":0,"index_in_line":0,"text":"Покажи меню","type":"inline","inline_query":"меню"},{"line":0,"index_in_line":1,"text":"Статьи","type":"inline","inline_query":"посты"},{"line":2,"index_in_line":0,"text":"Список продуктов","type":"inline","inline_query":"продукты"}]

При нажатии на кнопку, например, Статьи выведется найденный список кнопок (при добавлении указали для этой кнопки "inline_query":"посты"):

Варианты берутся из заданной переменной, как описано выше в разделе "Словарь со списком":

Примечания

• Переменную inline_bot можно задать не только в общих переменных, но и просто переменной, но в таком случае ее значение нужно заключить в одинарные кавычки.

Пример в поле калькулятор:

inline_bot = '["Молоко", "Хлеб", "Макароны", "Шоколад", "Яйца", "Масло", "Слойка", "Чай", "Овощи", "Фрукты", "#{aa}"]'

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

Для примера простой вариант в массиве:

Инлайн-режим и Google-таблицы

Для упрощения работы с инлайн-режимом Telegram реализован механизм, который позволяет получить необходимые настройки с использованием шаблона данных в Google-таблице.

Приступим к работе:

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

1. Перейдем к наполнению данных в заданной структуре:

1. Теперь перейдем в проект и и настроим заполнение переменной inline_bot данными из таблицы. Для этого создаем отдельный блок, который будет запускаться только менеджером. Выполняем следующие настройки:

Подробнее о функции:

nabor=set_inline_menu_from_sheet(sheet_id, 'меню для кнопок',2)

Исполняем блок и получаем заветные словари в общих переменных:

1. Далее подключаем inline-режим для нашего бота. Подробно это рассмотрено выше

2. При желании меняем плейсхолдер. Как это сделать рассказано выше

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

Например, для отправки меню клиенту используйте inline_bot_buttons: