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

Кнопка или виджет MAX сокращает путь от страницы сайта до диалога, подписки или свежих публикаций. В MAXorg доступны три варианта: плавающая кнопка ведёт к боту, виджет канала показывает канал и подписку, виджет постов выводит последние материалы. Настройка выполняется в кабинете, а на сайт вставляется одна строка кода.

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

Что подготовить перед установкой

Добавьте действующего бота MAX в кабинет. Для кнопки у бота должен быть username: переход строится по адресу https://max.ru/username. Без username элемент может отображаться, но не откроет нужный диалог. Для канального и постового виджета добавьте бота в нужный канал. Если канал не появляется в списке, выдайте боту права администратора и обновите данные.

Найдите в конструкторе сайта раздел пользовательского HTML или глобальных скриптов. Он может называться «Код сайта», «HTML перед body», «Скрипты» или «Дополнительный код». Если такого поля нет, потребуется администратор сайта. Внешний script также может блокироваться политикой Content Security Policy, и тогда домен скрипта надо разрешить точечно.

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

Как настроить кнопку MAX

После регистрации в кабинете откройте виджеты, выберите «Кнопка для сайта», задайте внутреннее название и укажите бота. Выберите круглый формат или вертикальный ярлык, левую или правую сторону. Заголовок должен объяснять действие: «Задать вопрос в MAX» точнее, чем «Мы рядом». У ярлыка нет подзаголовка, поэтому смысл поместите в одну строку.

Выберите готовую иконку или загрузите PNG, JPEG, WebP либо GIF до 5 МБ. После кадрирования проверьте, читается ли знак в маленьком круге. Настройте до трёх всплывающих фраз, но оставьте только конкретные: «Уточнить срок доставки» или «Поможем выбрать тариф». Пустые строки не показываются.

1. Выберите бота с рабочим username.
2. Настройте формат, сторону, текст и иконку.
3. Проверьте живое превью.
4. Нажмите «Сохранить и запустить».
5. Откройте код для вставки и скопируйте строку целиком.

Расписание и мобильная версия

Расписание задаётся по дням недели и часам в часовом поясе аккаунта. Оно управляет видимостью кнопки, но не останавливает бота. Если ночью бот принимает обращения, настройте приветствие с честным сроком ответа. Не пишите «оператор онлайн», когда сообщения читают только в рабочее время.

Опцию скрытия на мобильных включайте после проверки, а не по привычке: посетители телефона чаще готовы перейти в мессенджер. Откройте страницу на узком экране и убедитесь, что кнопка не перекрывает корзину, меню, форму, уведомление cookies и системные элементы браузера. Если конфликт есть, смените сторону или место установки.

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

Для подписки выберите «Виджет канала», затем бота и доступный ему канал. Настройте светлую или тёмную тему, текст и цвет кнопки. Можно показать 3, 4, 5, 6 или 8 аватаров. Фактическое число бывает меньше: API может не вернуть изображения, а бот пропускает дубли, свой аккаунт и участников без доступной картинки.

Для контентной витрины выберите «Виджет постов». Он выводит 3, 4, 5, 6, 8 или 10 последних непустых публикаций, найденных среди максимум 50 сообщений. Текст поста ограничен 2000 знаками. Фото, видео, аудио и файлы отображаются только при наличии доступного URL. Это витрина последних материалов, а не полный архив канала.

• пустое превью: проверить членство и права бота;
• нет части аватаров: проверить доступность изображений через API;
• нет вложения: сверить, вернул ли MAX доступный URL;
• данные устарели: обновить канал в кабинете.

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

Куда вставить готовый код

После запуска MAXorg выдаёт тег script с async. Вставьте его один раз в поле перед закрывающим body или head, если конструктор предлагает такой выбор. Для показа на всём сайте используйте глобальный код. Для одной точки входа вставьте скрипт только на нужной странице. Не дублируйте его в шаблоне, подвале и системе аналитики одновременно.

Сохраните настройки конструктора и отдельно опубликуйте сайт. Сохранение виджета в MAXorg не публикует изменения сайта, а вставленный код не покажет виджет со статусом «Сохранён» или «Пауза». Для безопасного запуска сначала поставьте код на тестовую страницу, затем включите виджет.

Как проверить результат

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

Статистика MAXorg считает просмотры, наведения и клики, но не равна числу разговоров или подписок. Зафиксируйте дату изменения текста и сравнивайте не только клики, но и реальные обращения. Начните с одной страницы, соберите данные за неделю и лишь затем включайте глобальный показ.

1. Страница отвечает и загружается без заметной задержки.
2. Клик ведёт к правильному адресу MAX.
3. Расписание соответствует часовому поясу аккаунта.
4. Элемент не закрывает интерфейс на мобильном.
5. Пауза в кабинете скрывает виджет.

Что делать, если виджет не появился

Сначала проверьте статус «Запущен», публикацию сайта и отсутствие копии script в текстовом блоке. Затем откройте консоль браузера: сообщение о Content Security Policy означает запрет внешнего скрипта. Разрешите конкретный домен через администратора платформы, не отключая защиту целиком.

Если элемент есть, но переход не работает, проверьте username бота. Если пуст виджет канала или постов, верните боту доступ к каналу и обновите данные. Если проблема только на телефоне, отключите настройку скрытия и проверьте адаптивный шаблон. Дополнительные сценарии собраны в блоге MAXorg.