Как добавить Макс на сайт: кнопка, иконка, ссылка — 5 способов (2026)

Мессенджер MAX — самый быстрорастущий мессенджер в России. По данным РБК, в нём уже 85 млн пользователей. Если ваш бизнес ещё не добавил кнопку Макс на сайт — вы теряете клиентов. В этой статье разберём 5 способов добавить Макс на сайт — от простой HTML-ссылки до профессионального виджета с аналитикой.

Зачем добавлять Макс на сайт

Прежде чем перейти к техническим способам, разберёмся — зачем вообще нужна кнопка мессенджера на сайте:

• 80% посетителей предпочитают написать, а не позвонить
• Скорость ответа в мессенджере в 5 раз выше, чем по email
• Конверсия сайтов с кнопкой мессенджера на 25–40% выше
• MAX — российский мессенджер, данные хранятся в РФ, нет рисков блокировки

Способ 1: Простая HTML-ссылка

Самый быстрый способ — текстовая ссылка. Подходит для минимальных правок:

<a href="https://max.ru/u/ВАШ_ХЕШИ" target="_blank" rel="noopener noreferrer">
  Написать в MAX
</a>

Где взять ссылку:

1. Откройте приложение MAX
2. Нажмите на свой аватар → профиль
3. Нажмите на QR-код → «Поделиться»
4. Скопируйте ссылку вида https://max.ru/u/...

Подробнее о получении ссылки — в нашей статье «Ссылка на MAX — как сделать».

Плюсы: максимально просто, 30 секунд.
Минусы: некрасиво, нет иконки, нет аналитики.

Способ 2: Кнопка с иконкой MAX (готовый HTML + CSS)

Красивая кнопка с градиентом в стиле MAX. Скопируйте код и вставьте на сайт:

<a href="https://max.ru/u/ВАШ_ХЕШИ" target="_blank" rel="noopener noreferrer"
   style="display:inline-flex; align-items:center; gap:10px; padding:14px 28px;
   background:linear-gradient(135deg, #00D4FF, #7B68EE, #8B00FF);
   color:white; border-radius:14px; text-decoration:none; font-weight:600;
   font-family:system-ui, sans-serif; font-size:16px;
   box-shadow:0 4px 15px rgba(123,104,238,0.3);
   transition:all 0.3s ease;">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15l-5-5 1.41-1.41L11 14.17l7.59-7.59L20 8l-9 9z"/>
  </svg>
  Написать в MAX
</a>

Плюсы: красиво, градиент MAX, можно вставить в любое место.
Минусы: нет аналитики, нельзя добавить другие мессенджеры.

Способ 3: Плавающая кнопка (fixed CSS)

Кнопка в правом нижнем углу экрана, которая всегда видна:

<a href="https://max.ru/u/ВАШ_ХЕШИ" target="_blank" rel="noopener noreferrer"
   style="position:fixed; bottom:24px; right:24px; z-index:9999;
   width:60px; height:60px; border-radius:50%;
   background:linear-gradient(135deg, #00D4FF, #7B68EE, #8B00FF);
   display:flex; align-items:center; justify-content:center;
   box-shadow:0 4px 20px rgba(123,104,238,0.4);
   transition:transform 0.3s; cursor:pointer;">
  <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
  </svg>
</a>

Плюсы: всегда на виду, не мешает контенту.
Минусы: только один канал, нет аналитики, нет приветствия.

Способ 4: Иконка Макс в блоке контактов

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

<div style="display:flex; gap:16px; align-items:center;">
  <!-- WhatsApp -->
  <a href="https://wa.me/79001234567" target="_blank" title="WhatsApp"
     style="width:48px; height:48px; border-radius:12px; background:#25D366;
     display:flex; align-items:center; justify-content:center;">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/></svg>
  </a>
  <!-- Telegram -->
  <a href="https://t.me/your_username" target="_blank" title="Telegram"
     style="width:48px; height:48px; border-radius:12px; background:#26A5E4;
     display:flex; align-items:center; justify-content:center;">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.12.02-1.96 1.25-5.54 3.66-.52.36-1 .53-1.42.52-.47-.01-1.37-.26-2.03-.48-.82-.27-1.47-.42-1.42-.88.03-.24.37-.49 1.02-.75 3.98-1.73 6.64-2.88 7.97-3.44 3.79-1.58 4.58-1.86 5.09-1.87.11 0 .37.03.54.17.14.12.18.28.2.47-.01.06.01.24 0 .38z"/></svg>
  </a>
  <!-- MAX -->
  <a href="https://max.ru/u/ВАШ_ХЕШИ" target="_blank" title="MAX"
     style="width:48px; height:48px; border-radius:12px;
     background:linear-gradient(135deg, #00D4FF, #7B68EE, #8B00FF);
     display:flex; align-items:center; justify-content:center;">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
  </a>
</div>

Плюсы: красиво смотрится в разделе контактов.
Минусы: не floating, видно только на одной странице.

Способ 5: Виджет WritesApp (рекомендуем)

Лучший способ добавить Макс на сайт — через конструктор виджетов WritesApp. Вы получаете:

• Плавающую кнопку с анимацией и приветствием
• Все мессенджеры в одном виджете: Макс + WhatsApp + Telegram + VK + Viber
• 6 стилей дизайна — от классики до glassmorphism
• Аналитику кликов — источники, устройства, конверсии
• A/B тестирование — система найдёт лучший вариант автоматически
• Установку за 2 минуты — без программистов

Как установить:

1. Зарегистрируйтесь бесплатно
2. Создайте виджет → добавьте канал MAX (вставьте ссылку)
3. Настройте дизайн: цвет, стиль, позицию, приветствие
4. Скопируйте код:

<script src="https://writesapp.ru/widget.js" data-widget-id="ВАШ_ID" async></script>

5. Вставьте перед </body> на вашем сайте. Готово!

Плюсы: профессиональный вид, мультиканальность, аналитика, A/B тесты, бесплатный план.
Минусы: нет (серьёзно).

Конкуренты берут от 6 500 ₽ за установку виджета MAX (maxwidget.ru). WritesApp даёт бесплатный старт — 1 виджет, до 10 000 посетителей/мес.

Создать виджет Макс бесплатно →

Сравнение способов

Установка на популярные CMS

Тильда

1. Откройте редактор страницы
2. Добавьте блок T123 (Вставить HTML-код)
3. Вставьте код виджета WritesApp (или HTML-кнопку из способов выше)
4. Опубликуйте сайт

Для всех страниц: Настройки сайта → Ещё → HTML-код → Перед </body>.

WordPress

1. Войдите в WordPress → Внешний вид → Виджеты
2. Добавьте «Произвольный HTML» в нужную область
3. Вставьте код
4. Сохраните — кнопка Макс появится на всех страницах

Альтернатива: плагин Insert Headers and Footers → вкладка Footer → вставьте код.

1С-Битрикс

1. Панель управления → Настройки → Настройки продукта → Заголовок сайта
2. Вставьте код перед </body>
3. Сохраните

Любой сайт (HTML)

1. Откройте файл index.html (или шаблон сайта)
2. Найдите закрывающий тег </body>
3. Вставьте код прямо перед ним
4. Загрузите на хостинг

Подробнее об установке на CMS →

Частые ошибки при добавлении Макс на сайт

1. Забыли target="_blank"

Без этого атрибута ссылка откроется в том же окне, и пользователь потеряет ваш сайт. Всегда добавляйте target="_blank" rel="noopener noreferrer".

2. Не работает ссылка на профиль

Ссылки на профиль в MAX зависят от настроек приватности. Если у вас включён «Безопасный режим», писать смогут только контакты. Для бизнеса рекомендуем использовать ссылку на бота (https://max.ru/@botname) — она работает без ограничений.

3. Нет иконки MAX

Официальной SVG-иконки MAX в открытом доступе нет. Используйте иконку чата (как в примерах выше) или установите виджет WritesApp — в нём уже есть корректная иконка Макс.

4. Кнопка не видна на мобильных

Проверьте z-index (не менее 9999) и размер кнопки (не менее 48×48px для удобного нажатия). Плавающая кнопка должна быть не ближе 16px от края экрана.

Итоги

WritesApp — не просто кнопка Макс. Это все мессенджеры в одном виджете: Макс + WhatsApp + Telegram + VK + Viber + телефон + email. Один код на сайт — все каналы работают.

Добавить Макс на сайт бесплатно →

Читайте также:

• Ссылка на MAX — как сделать, получить, скопировать
• Как создать бота в MAX
• Виджет мессенджера Макс на сайт