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

Инструкция создания интернет-магазина MiniApp для чат-бота в телеграме.

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

1

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

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

Раздел "Интернет-магазин (MiniApp)"

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

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

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

Кнопка запуска мини-приложения. Может различаться для разных клиентов

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

2

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

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

Кнопка "Добавить категорию"

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

Создание категории

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

3

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

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

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

Раздел "Опции"

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

Создание опции

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

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

4

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

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

Кнопка "Добавить товар"

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

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

Основные характеристики товара

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

Вкладка "Изображения и видео"

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

Добавление характеристики

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

Вкладка "Опции"

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

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

5

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

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

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

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

Настройки. Вкладка "Основное"

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

6

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

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

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

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

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

Вкладка "Оплата и доставка"

Оплата

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

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

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

Выбор способа оплаты

Доставка

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

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

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

  • в фиксированной сумме: укажите в поле ввода фиксированное значение стоимости доставки

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

  • бесплатно

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

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

Бесплатная доставка начиная с заданной стоимости корзины

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

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

Добавить адрес пункта выдачи
7

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

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

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

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

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

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

  • Цвета из настроек Telegram: применяться цвета из темы Telegram, которую клиент выбрал в настройках своего приложения в разделе "Настройка чатов"

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

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

Выбор цветовой схемы
8

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

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

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

Тегирование событий

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

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

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

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

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

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

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

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

9

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

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

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

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

Раздел "Баннеры"

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

Создание баннеры

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

10

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

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

Вкладка "Уведомления" в разделе "Настройки"

Last updated

Was this helpful?