Магазин в Telegram-боте (Мини-приложение)

Как создать интернет-магазин MiniApp в Телеграм. Пошаговая инструкция по созданию мини-приложения в Телеграм

Перед созданием магазина подключите мессенджер к чат-боту - см. Подключение Telegram

Как создать мини-приложение (MiniApp) в Телеграм

Активируйте магазин

Зайдите в конструктор бота и перейдите в раздел "Интернет-магазин (MiniApp)".

Активируйте переключатели "Активировать магазин" и "Активировать кнопку запуска MiniApp".

В чат-боте появится кнопка перехода в магазин.

Кнопка может появиться в приложении с задержкой со стороны Telegram (около 5 минут).

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

Вы можете скопировать ссылку на магазин, чтобы использовать запуск магазина по ссылке в сценарии бота.

Создайте категорию

Перейдите в раздел "Категории" и нажмите "Добавить категорию".

Заполните поле "Название" и загрузите изображение категории. Дождитесь загрузки изображения и после нажмите "Создать".

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

Создайте опции для товаров

Опции позволяют создавать варианты товара, например, разные цвета, сорта, размеры, веса и т.д. Для каждого варианта товара можно указать свою стоимость.

пример miniapp в телеграм

Перейдите в раздел "Опции" и нажмите "Добавить опцию".

Заполните название опции и добавьте варианты.

Чтобы изменить порядок отображения опций, укажите значение сортировки. Опции отображаются от большего значения сортировки к меньшему. Чем больше значение сортировки, тем раньше (выше/левее) отображается опция.

Нажмите кнопку "Создать".

Добавьте товары

Перейдите в раздел "Товары" и нажмите "Добавить товар".

На вкладке "Основное" заполните название, категорию, цену и описание товара.

Товар без категории будет отображаться в отдельном разделе. Название для этого раздела можно изменить в настройках магазина в поле "Остальные товары".

Перейдите на вкладку "Изображения и видео" и загрузите изображение. Опционально вы можете загрузить дополнительные изображения и видео.

Перейдите на вкладку "Характеристики" и нажмите кнопку "Добавить". Введите название характеристики и ее значение.

Перейдите на вкладку "Опции" и выберите необходимые опции (см. п. "Создайте опции для товаров").

Нажмите кнопку "Создать".

Посмотреть карточку созданного товара можно в разделах "Настройки" и "Дизайн". Кликните на карточку товара, чтобы перейти к странице товара.

Отредактируйте основные тексты

Перейдите в раздел "Настройки".

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

После изменения текстов нажмите кнопку "Сохранить".

Чтобы увидеть изменения, обновите страницу приложения.

Изменение текстов может появиться в приложении с задержкой со стороны Telegram (около 5 минут).

Настройте способы доставки и оплаты

Перейдите в раздел "Настройки" и затем нажмите на вкладку "Оплата и доставка".

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

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

Если платежная система поддерживает несколько валют, то для поддерживаемых валют оплата будет без конвертации, для неподдерживаемых — будет сконвертирована в рубли.

Оплата

Если вы планируете использовать онлайн-оплату, то сначала подключите платежные системы. Для этого перейдите в раздел "Настройки" на вкладку "Интеграции". Подробнее о подключении платежных систем смотрите Платежные системы.

платежи в miniapp

После добавления платежных систем вернитесь в раздел "Интернет-магазин (MiniApp) -> Настройки" и продолжите настройку оплаты.

Для MiniApp доступны 4 платежные системы: Robokassa, Юkassa, Prodamus и Т-Банк.

Выберите способ оплаты.

Оплата наличными (при получении) доступна только при выборе доставки самовывозом.

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

Доставка

Выберите способ доставки.

Если вы выбрали способ доставки "Доставка магазином", то выберите способ расчета стоимости доставки:

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

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

Если вы выбрали способ доставки "Самовывоз", то добавьте адреса пунктов выдачи.

Увеличьте порядок сортировки, чтобы адрес пункта выдачи отображался выше в списке.

После изменения настроек доставки и оплаты не забудьте сохранить изменения.

Настройте дизайн магазина

Перейдите в раздел "Дизайн". Здесь вы можете настроить цвета для текстов, кнопок и фонов, загрузить изображение для фона и задать радиус скругления для карточек и кнопок.

Выберите шаблон:

Две карточки: в строке будет отображаться две категории или два товара
Одна карточка: в строке будет отображаться одна категория или один товар

Выберите цветовую схему:

Цвета из настроек Telegram: применяться цвета из темы Telegram, которую клиент выбрал в настройках своего приложения в разделе "Настройка чатов"
Пользовательская тема: выберите цвета из палитр. Чтобы задать произвольный цвет, выберите первый кружок в палитре.
Готовые темы (темная, светлая и т.д.): темы с предустановленными цветами. Вы можете изменить готовую тему и сохранить — ваши изменения сохранятся в "Пользовательскую тему".

Настройте тегирование

Опционально вы можете включить тегирование событий в магазине.

Перейдите в раздел "Настройки" и затем нажмите на вкладку "Тегирование событий".

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

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

Добавленные теги добавляются в список контактов в поле "Теги".

Вы можете использовать эти теги в рассылках и в сценарии бота.

Для магазинов, созданных до 17.04.2025, для корректной работы тегов необходимо выключить и снова включить переключатели в разделе "Главная".

запуск miniapp

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

Опционально вы можете изменить текст тега.

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

Чтобы скопировать текст тега, нажмите кнопку Скопировать справа от тега.

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

События "Запуск магазина по кнопке" и "Запуск магазина по ссылке" обрабатываются только один раз для одного устройства пользователя.

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

Загрузите баннер

Опционально вы можете добавить баннеры.

Баннер отображается в верхней части магазина.

Перейдите в раздел "Баннеры" и нажмите на "Добавить баннер".

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

Вы можете настроить, на каких страницах показывать баннер, например, можно показывать баннер только на главной странице ("Список категорий").

Настройте уведомления

Перейдите в раздел "Настройки" и укажите email, на который хотите получить уведомления о заказах.

Конструктор MiniApp в Telegram LEADTEXleadteh.ru

Создание MiniApp Магазина в Телеграм

Бонус для новых пользователей и возможность получить 500 рублей баллами в подарок 🎁
- Регистрируйтесь на LEADTEX - Создавайте и тестируйте первый проект - Не пропускайте специальный оффер. Получить подарок 👈

PreviousЛюбое событие Telegram NextАкции с промокодом в магазине MiniApp

Last updated 2 months ago

Was this helpful?