HTML-рассылка: картинки, кнопки и ссылки в письме без кода

Как работать с рассылками в HTML-режиме

Зачем это нужно: когда стандартного редактора рассылок недостаточно и вы хотите полностью контролировать внешний вид письма — добавить собственные изображения, расположить блоки по-своему, вставить фирменные цвета и элементы — используется HTML-режим. Он даёт полную свободу оформления: вы работаете напрямую с кодом письма, как это делают профессиональные дизайнеры рассылок.

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

---

Шаг 1. Откройте раздел «Email-маркетинг» и создайте новую рассылку

В боковом меню выберите раздел Маркетинг → Email-маркетинг. Нажмите кнопку «Создать рассылку».

Здесь отображается список всех ваших рассылок. Чтобы создать новую — нажмите синюю кнопку в правом верхнем углу.

---

Шаг 2. Перейдите в HTML-режим

Заполните основные поля рассылки (название, тему письма, сегмент получателей). Когда будете готовы редактировать содержимое письма, прокрутите страницу вниз и нажмите кнопку «Перейти в HTML-режим».

В открывшемся HTML-редакторе вы увидите три основные кнопки:

• Готовые блоки — быстрая вставка типовых элементов письма
• Подстановки переменных — список персональных данных гостя для автоматической подстановки
• Предпросмотр — моментальный просмотр как будет выглядеть письмо

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

---

Шаг 3. Используйте готовые блоки для быстрой вставки

Нажмите кнопку «Готовые блоки» — откроется панель с четырьмя типами элементов.

Доступные блоки:

Одно изображение — добавит в письмо картинку на всю ширину. После вставки найдите в коде слово URL_ИЗОБРАЖЕНИЯ и замените его на ссылку на ваше изображение из облачного хранилища (например Яндекс.Диск, Google Drive или любое другое). Ссылка должна быть публичной — доступной без пароля.

Два изображения рядом — добавит два блока по 50% ширины. Удобно для сравнения или галереи. Замените оба слова URL_ИЗОБРАЖЕНИЯ_1 и URL_ИЗОБРАЖЕНИЯ_2 на свои ссылки.

Блок с текстом — добавит абзац с текстом. Замените слова «Введите ваш текст здесь» на нужный текст прямо в коде.

Кнопка «Забронировать» — добавит синюю кнопку по центру письма. Найдите слово ССЫЛКА и вставьте адрес вашей страницы бронирования.

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

---

Шаг 4. Используйте переменные для персонализации

Нажмите кнопку «Подстановки переменных» — откроется список данных, которые система автоматически подставит для каждого гостя.

Чтобы вставить переменную, скопируйте её (кнопка справа от названия) и вставьте в нужное место кода. Например, ##FirstName## превратится в имя гостя при отправке.

Доступные переменные:

• ##FirstName## — имя гостя
• ##HotelName## — название вашего отеля
• ##CheckInDate##, ##CheckOutDate## — даты заезда и выезда
• ##HotelAddress##, ##HotelPhone##, ##HotelEmail## — контакты отеля

---

Шаг 5. Проверьте письмо в предпросмотре

Нажмите кнопку «Предпросмотр» — письмо отобразится в реальном виде прямо под редактором.

В предпросмотре вы увидите как письмо выглядит с вашим брендингом: логотипом отеля, фирменным цветом в шапке и контактами в подвале. Именно в таком виде оно придёт гостям.

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

---

Подсказки

• Как добавить изображение из интернета: откройте любое изображение в браузере, скопируйте его адрес из адресной строки и вставьте в место URL_ИЗОБРАЖЕНИЯ в коде. Убедитесь, что ссылка начинается с https://.
• Как изменить цвет кнопки «Забронировать»: в коде кнопки найдите background-color:#2563eb и замените цвет на нужный (например #d52158 — тёмно-розовый).
• Как выровнять кнопку по левому краю: в строке с кнопкой замените text-align:center на text-align:left.
• Как добавить рекламную маркировку: если письмо содержит акцию или конкурс, добавьте условия участия в подвал письма — это требование законодательства об рекламе.
• Тестовое письмо перед отправкой: нажмите кнопку «Получить тестовое письмо», укажите свой адрес почты — и получите письмо точно так, как увидит его гость.

---

Частые вопросы

Можно ли вернуться к стандартному редактору после перехода в HTML-режим? Нет. Переход в HTML-режим необратим для данной рассылки. Если хотите сохранить стандартный вариант, создайте копию рассылки до перехода.

Изображение не отображается в предпросмотре — почему? Скорее всего, ссылка на изображение недоступна или введена с ошибкой. Проверьте, что ссылка открывается в браузере без необходимости входить в аккаунт. Используйте публичные ссылки из облачных хранилищ.

Что такое переменные и зачем они нужны? Переменные — это специальные метки в тексте (##FirstName##, ##HotelName## и т.д.), которые система автоматически заменяет реальными данными при отправке. Так одно шаблонное письмо может стать персональным для каждого гостя.

Письмо выглядит хорошо в предпросмотре, но плохо в почтовом клиенте — что делать? Разные почтовые клиенты (Яндекс.Почта, Gmail, Mail.ru) могут отображать HTML по-разному. Отправьте себе тестовое письмо и проверьте в нескольких сервисах. Как правило, таблицы отображаются стабильнее других элементов.

Как добавить несколько изображений подряд? Нажимайте кнопку «Одно изображение» в панели «Готовые блоки» столько раз, сколько нужно картинок. Каждый раз блок вставится в текущую позицию курсора.