Кастомизация
бота
в WebApp Telegram и MAX

Содержание

1. Введение
2. Что такое кастомизация WebApp
3. Что можно кастомизировать в WebApp
4. Зачем нужна кастомизация в WebApp
5. Как вы можете это сделать
6. Цветовая тема WebApp
7. Цветовая тема в Telegram
8. Цветовая тема в MAX
9. Что такое переменные цветов
10. Настройка цветовой темы
11. Настройка цветовой темы для Telegram
12. Настройка цветовой темы для MAX
13. Кастомизация стилей компонентов
14. Что можно кастомизировать помимо переменных цветов
15. Что вам потребуется для кастомизации стилей
16. Как создавать свои стили
17. Кастомизация прелоадера
18. Что такое прелоадер
19. Как кастомизировать прелоадер
20. Заказать кастомизацию WebApp
21. Заказать разработка индивидуального дизайна WebApp

Введение

В этой статье вы узнаете, какие возможности кастомизации внешнего вида WebApp есть на платформе ChatFood.ru.

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

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

Что такое кастомизация WebApp

Представьте, что у вас есть набор элементов, из которых строится ваше приложение WebApp (Telegram или MAX). Этот набор (шапка, карточки товаров, корзина и так далее) - компоненты. О них, кстати, мы рассказываем в отдельном разделе.

Так вот, эти компоненты можно тюнинговать так, как вам нужно:

• менять цвета фона, кнопок, обводки
• менять радиус закругления
• менять размер шрифта

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

Технические свойства самих компонентов - это отдельная тема. В этой статье мы их не рассматриваем. Здесь мы говорим именно про внешний вид компонентов.

Что можно кастомизировать в WebApp

На сегодняшний день на платформе ChatFood.ru доступны следующие опции кастомизации WebApp:

• Менять основные цвета темы через переменные. Например, в светлой теме Telegram по умолчанию светлый фон и синяя кнопка, в темной - темно-синий фон и синяя кнопка. Вы можете сделать кнопку красной или любого другого цвета, поменять цвет фона.
• Настраивать цвета в компонентах, которые не используют переменные темы.
• Менять размер шрифта, например, у названий товаров.
• Менять радиусы закругления элементов, например, у фотографий товаров в каталоге.
• Устанавливать свой логотип загрузки приложения при открытии WebApp вместо логотипа ChatFood.ru (это платная услуга). Можно даже сделать его анимированным.

Зачем нужна кастомизация в WebApp

Ваш бренд - это не просто логотип бота. Это цвета, стиль, настроение, которое вы транслируете клиенту.

Когда гость открывает ваш бот и видит привычные для вашего бренда цвета, кнопки, шрифты - он доверяет вам больше. Это работает на лояльность и запоминаемость.

Кастомизация WebApp позволяет вам:

• Выделяться среди конкурентов. Большинство ресторанов используют стандартные ботов без настроек. Ваш будет другим.
• Работать под своим брендом, а не под Telegram или ChatFood. Клиент видит ваш стиль, а не чужой.
• Создать единую экосистему. Ваш сайт, соцсети, приложение и бот в Telegram/MAX - везде одинаковые цвета и стиль.

И самое главное: это гораздо дешевле, чем разрабатывать свое мобильное приложение или сайт с индивидуальным дизайном.

Разработка отдельного приложения под заказ стоит недешево и занимает месяцы. А кастомизация WebApp на ChatFood.ru - это доступная платная услуга или даже бесплатно, если вы делаете настройки сами.

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

Как вы можете это сделать

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

Также самый быстрый и комфортный вариант - обратиться к нам в поддержку в Telegram или MAX. Мы рассчитаем стоимость индивидуальной кастомизации для вас.

Цветовая тема WebApp

В Telegram и MAX боте цветовая тема работает по-разному.

Изначально наш сервис был создан с фокусом на Telegram-ботов. В WebApp мы использовали переменные дизайн-системы самого Telegram. Использование переменных позволяет по умолчанию адаптировать цвет темы под устройство и тему самого Telegram конкретного гостя. Поэтому боты, сделанные на нашей платформе, выделяются на фоне конкурентов - конкуренты, как правило, не используют переменные дизайн-системы Telegram, и их боты выглядят не цельно с самим Telegram.

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

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

Цветовая тема в Telegram

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

Чтобы бот работал в такой конфигурации, вам ничего делать не нужно.

Цветовая тема в MAX

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

То есть независимо от того, какая тема MAX настроена у гостя, WebApp всегда будет открываться в темных тонах. Мы просто задаем конкретные значения цветов.

Что такое переменные цветов

Переменные цветов - это как именные ячейки, в которые вы кладете нужный вам цвет.

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

Например, вы задали переменной цвета кнопки красный цвет. Все кнопки в вашем боте станут красными автоматически, а также другие элементы, которым мы присвоили эту переменную, например иконкам.

Это удобно, быстро и не требует программирования.

Рассмотрим, какие переменные есть в дизайн-системе WebApp, которые мы заимствовали из Telegram:

Переменная	Описание
tg-theme-bg-color	цвет основного фона
tg-theme-text-color	цвет основного текста
tg-theme-hint-color	цвет второстепенного текста
tg-theme-link-color	цвет ссылки
tg-theme-button-color	цвет фона кнопки
tg-theme-button-text-color	цвет текста кнопки
tg-theme-button-text-color	дополнительный цвет фона
tg-theme-secondary-bg-color	дополнительный цвет фона
tg-theme-bottom-bar-bg-color	дополнительный цвет фона
tg-theme-accent-text-color	цвет выделенного текста
tg-theme-section-bg-color	дополнительный цвет фона
tg-theme-section-header-text-color	дополнительный цвет текста
tg-theme-section-separator-color	цвет разделителя
tg-theme-subtitle-text-color	дополнительный цвет текста
tg-theme-destructive-text-color	цвет ошибки

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

Цвета, которые прописаны без переменных, тоже можно редактировать. Расскажем об этом ниже.

Кроме того, из всей дизайн-системы Telegram мы используем не все переменные. В дизайне WebApp задействовано, как правило, 4-5 основных.

Ниже пример, какие переменные используются на главной странице WebApp (он же каталог).

Настройка цветовой темы

Для того чтобы перейти к настройке цветовой темы, перейдите в личный кабинет бота, откройте раздел Настройки > WebApp, вкладка Стили.

Вы можете настраивать переменные для темы WebApp отдельно для Telegram-бота и MAX-бота. В этом разделе мы расскажем, как это сделать.

Настройка цветовой темы для Telegram

При заходе в раздел Стили вы увидите CSS-свойства, которые используются в верстке для назначения внешних стилей конкретным блокам. CSS-свойства - это набор правил, которые определяют внешний вид WebApp. Но здесь мы выводим не все стили WebApp (их очень много), а только переменные цветов в CSS-формате. Переменные хранят значения цветов в формате HEX.

В самом верху вы увидите отдельный CSS-блок с названием TELEGRAM THEME. Обратите внимание: этот блок выделен /* в начале и */ в конце. Такой блок называется закомментированным. В CSS-разметке это делается для того, чтобы скрыть участок и сделать его неактивным.

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

Пока участок закомментирован - бот работает в стандартном режиме: подхватывает тему устройства гостя.

Рассмотрим два кейса кастомизации цветовой темы WebApp в Telegram:

Кейс 1

Меняем только цвет кнопок и цвет текста в кнопках, остальное оставляем автоматическим (минимальная кастомизация темы)

Допустим, вы хотите оставить автоматические цвета устройства пользователя, но изменить главный цвет (например, цвет кнопок) на свой - скажем, розовый.

Для этого полностью скопируйте CSS-блок с названием TELEGRAM THEME и вставьте его ниже.

Нам понадобятся две переменные:

• tg-theme-button-color - отвечает за цвет кнопок
• tg-theme-button-text-color - отвечает за цвет текста на кнопках

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

Теперь нужно сделать блок активным. Напомним: если блок закомментирован (обернут в /* ... */), он не применяется к боту. Уберите в конце скопированного блока закрывающий комментарий */ и перенесите его сразу после строки-маркера TELEGRAM THEME.

Название строки-маркера можно сменить, например, на "Моя тема" - так вы сможете быстро найти свои настройки в будущем.

Далее задайте свои HEX-цвета для обеих переменных. Например:

Переменная	Описание	HEX
tg-theme-button-color	Розовый	#FF9DC3
tg-theme-button-text-color	Черный	#000000

Нажмите "Сохранить" и проверьте, что получилось в боте.

Кейс 2

Меняем все переменные на свои цвета.

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

Скопируйте черновик CSS-блока TELEGRAM THEME еще раз и вставьте ниже. Закомментируйте или удалите CSS-блок, который вы создали в первом кейсе ранее. Активным может быть только один CSS-блок, иначе они будут конфликтовать между собой, и ничего не получится. Назовите новый CSS-блок как вам нужно.

В этом кейсе мы ничего не удаляем из переменных, а каждой назначаем свой собственный HEX-цвет.

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

Ниже предлагаем HEX-цвета для быстрого тестирования, которые вы можете применить:

Переменная	HEX
tg-theme-bg-color	#012826
tg-theme-text-color	#FFFFFF
tg-theme-hint-color	#A2D3D1
tg-theme-link-color	#E9560B
tg-theme-button-color	#E9560B
tg-theme-button-text-color	#FFFFFF
tg-theme-button-text-color	#023C3A
tg-theme-secondary-bg-color	#023C3A
tg-theme-bottom-bar-bg-color	#023C3A
tg-theme-accent-text-color	#E9560B
tg-theme-section-bg-color	#023C3A
tg-theme-section-header-text-color	#023C3A
tg-theme-section-separator-color	#02504D
tg-theme-subtitle-text-color	#A2D3D1
tg-theme-destructive-text-color	#E9560B

Обратите внимание: многие переменные используют один и тот же HEX (в этом примере мы используем 8 уникальных HEX цветов) - это нормально. Рекомендуем следовать такому же принципу по этому примеру, подставляя свои HEX-цвета.

Настройка цветовой темы для MAX

Как упоминалось выше, в MAX нет автоматической подстройки темы - у них нет своих переменных, которые они подставляли бы в WebApp. Поэтому по умолчанию мы назначаем HEX-цвета для переменных самостоятельно.

Ниже, после блока TELEGRAM THEME в разделе Стили, вы также можете увидеть два CSS-блока: MAX DARK THEME и MAX LIGHT THEME. По умолчанию мы включаем темную тему, а светлая полностью закомментирована и неактивна.

Как включить светлую тему в MAX

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

Кастомизация темы в MAX

Для кастомизации темы в MAX действуйте так же, как и в случае с Telegram: скопируйте CSS-блок MAX DARK THEME (или MAX LIGHT THEME, если настраиваете светлую тему), поставьте нужные HEX-цвета в переменные и сохраните изменения. Первоначальную тему MAX полностью закомментируйте.

Кастомизация стилей компонентов

Не все элементы в компонентах используют переменные. У таких элементов цвета могут быть зашиты и скрыты от вашего взгляда. Но их тоже можно редактировать.

Кроме того, вы можете отказаться от использования переменных в том или ином компоненте и задать ему конкретный цвет отдельно - с помощью CSS-стилей.

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

В этом разделе мы расскажем, как это сделать.

Что можно кастомизировать помимо переменных цветов

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

CSS позволяет управлять практически любым визуальным аспектом компонента. Вот что можно менять:

Цвета там, где нет переменных

Например, цвет кнопки и цвет текста кнопки в компоненте выбора способа получения (OrderMethodComponent) прописан жестко. Вы можете переопределить их через CSS, даже если для них нет отдельной переменной.

Размер шрифта

Вы можете увеличить или уменьшить размер шрифта в том или ином компоненте.

Радиусы закругления

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

Отступы

Расстояния между товарами в каталоге, отступы внутри карточки и так далее - все это тоже настраивается.

Обводки и рамки

Можно добавить рамку вокруг выбранного товара, изменить ее цвет или толщину.

Что можно еще

Можно даже скрывать любые элементы в компонентах принудительно, если они вам не нужны.

Главный принцип

Вы берете любой элемент WebApp, смотрите в инструментах разработчика его CSS-класс, пишете свои стили для этого класса и добавляете их в раздел Стили.

Все работает как обычный CSS. Если вы знакомы с основами - разберетесь без проблем. Если нет - можно обратиться к специалисту или в нашу поддержку.

Что вам потребуется для кастомизации стилей

Вам потребуется компьютер или ноутбук, а также Desktop версия Telegram со включенным "Режимом разработчика".

Что такое "Режим разработчика"

Это встроенный в Desktop-версию Telegram инструмент для разработчиков. Он позволяет открыть WebApp бота не как обычное окно, а как отдельную страницу с инструментами отладки - такими же, как в браузере (Chrome DevTools).

С его помощью вы можете:

• Посмотреть CSS-классы любого элемента в WebApp
• Прямо на месте менять стили и видеть результат в реальном времени
• Найти, какой именно класс отвечает за нужный вам элемент
• Скопировать готовые CSS-правила и перенести их в раздел Стили на платформе

Как включить "Режим разработчика"

MacOS

В зависимости от настроек, нижняя панель приложения может выглядеть по-разному.

1. Откройте список чатов.
2. Внизу экрана найдите вкладку «Настройки» — иконку шестерни. Если в приложение добавлено несколько аккаунтов, на месте шестерни будет ваша аватарка.
3. 5 раз подряд нажмите на эту кнопку как можно быстрее — откроется debug-меню. Если меню не открывается, продолжайте нажимать, ускоряя темп.
4. Далее переведите переключатель Debug Web App в активный.
5. Перезагрузите клиент Telegram.

Windows

1. В приложении Telegram нажмите ☰ в левом верхнем углу и выберите Настройки.
2. Нажмите «Продвинутые настройки».
3. Прокрутите вниз, выберите «Экспериментальные настройки» или «Продвинутые настройки».
4. Включите опцию "Режим разработчика" (Developer Mode) или "Включить отладку WebApp" (Enable WebView inspection) - в зависимости от версии.
5. Перезагрузите клиент Telegram.

После этого при открытии WebApp бота нажмите правой кнопкой мыши внутри окна WebApp и выберите "Inspect" (или "Просмотреть код"). Откроется панель разработчика, где вы можете исследовать структуру и стили WebApp.

Как создавать свои стили

Это краткая инструкция для специалистов о том, как работать с CSS-стилями в WebApp Telegram с помощью режима разработчика и как применять их в личном кабинете ChatFood.ru.

1. Открываем веб-инспектор

Включите режим разработчика в Desktop-версии Telegram, откройте WebApp вашего бота. Нажмите правой кнопкой мыши в любом месте WebApp и выберите "Просмотреть код" или "Проверить элемент" (зависит от ОС и версии).

Откроется Developer Tools. Нас интересует вкладка "Elements" ("Элементы").

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

2. Находим нужный элемент

Нажмите на иконку "Выбор элемента" (в левом верхнем углу веб-инспектора). Затем кликните на интересующий элемент в WebApp - например, на карточку товара, кнопку или заголовок.

В левой панели вы увидите HTML-разметку с подсвеченным выбранным элементом и его CSS-классы. В соседней панели веб-инспектор покажет все CSS-стили, применяемые к этому элементу.

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

3. Применяем стили в ChatFood

Перейдите в личный кабинет бота: Настройки > WebApp > вкладка Стили.

Ниже настроек цветовой темы вставьте свой CSS-код, применив его к названию нужного класса, и задайте нужные характеристики. Пример:

.OrderMethodComponent .btn {
 background: #43b547 !important;
 color: #fff !important; 
}

Что делает этот код

В данном случае мы для кнопки внутри компонента OrderMethodComponent меняем цвет фона и цвет текста.

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

Кастомизация прелоадера

Что такое прелоадер

Когда вы открываете WebApp бота, контент (каталог с товарами или другая страница) загружается не мгновенно. Пока идет загрузка, мы показываем прелоадер - анимированный логотип ChatFood по умолчанию.

Этот логотип и цвет фона можно заменить на любые другие - например, на ваши. Доступны форматы PNG, JPG, SVG, а также анимированный JSON (Lottie).

Как кастомизировать прелоадер

Чтобы установить свой логотип вместо логотипа ChatFood, свяжитесь с нами в поддержке. Это платная услуга.

Заказать кастомизацию WebApp

Чтобы мы кастомизировали внешний вид вашего бота под ваш бренд, напишите нам в поддержку.

Что мы можем предложить:

• Настройка цветовой темы в Telegram и MAX под ваши фирменные цвета по вашему брендбуку. Даже если брендбука нет - мы подберем цвета сами.
• Кастомизация стилей компонентов по вашему техническому заданию. Если персональной цветовой темы вам недостаточно, составьте список того, что хотите изменить, и мы это сделаем.
• Установка индивидуального прелоадера со статичным или анимированным логотипом.

Заказать разработку индивидуального дизайна для WebApp

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

Это будет не доработка стандартного шаблона, а разработка с нуля. Мы создадим дизайн-проект в Figma с поэтапным согласованием с вами, после чего сделаем верстку и установим индивидуальный шаблон на платформу ChatFood. Этот дизайн будет использоваться только вами.

Связаться с нами можно в поддержке Telegram или MAX, а также по электронной почте m@chatfood.ru.