Создание email-контента с помощью HTML-редактора

Если вы хорошо владеете HTML и предпочитаете писать код самостоятельно, вы можете создавать email-сообщения с помощью HTML-редактора Wavesend.

Создание email-контента

Чтобы начать создание email-контента, вставьте ваш HTML-код на вкладку HTML. Редактор предоставляет предварительный просмотр email-сообщений в реальном времени по мере вашей работы.

Либо вы можете загрузить HTML-файл, нажав на кнопку Upload HTML File на нижней панели.

Чтобы добавить персонализации в ваши email-сообщения, используйте пользовательские Tag. Для этого:

Нажмите на иконку Tag в нижней части редактора.
Выберите нужный Tag, его модификатор и при необходимости укажите значение по умолчанию.
Нажмите Insert, чтобы добавить пользовательский Tag в ваш email-контент.

Чтобы добавить эмодзи в ваше email-сообщение, нажмите на иконку Emoji в нижней части редактора.

Использование локализации

Локализация позволяет вам предоставлять персонализированный опыт пользователям на разных языках.

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

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

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

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

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>

  </div>
</body>
</html>

С такой настройкой, если язык пользователя — немецкий, он увидит Email на немецком; пользователи, которые выбрали получение Email на английском, увидят его на английском, а те, кто выбрал испанский, получат его на испанском. Это гарантирует, что все Recipients получат ваше сообщение на предпочитаемом ими языке.

Вставка и объединение блоков email-контента

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

Например, если у вас есть email-контент А (верхний колонтитул) и email-контент Б (информационная рассылка), вы можете вставить email-контент А в email-контент Б, не копируя контент вручную каждый раз.

Синтаксис

Чтобы вставить одну часть контента в другую, используйте следующий синтаксис:

{% email_content "AAAAA-BBBBB" %}

Где «AAAAA-BBBBB» — это ID email-контента, который вы хотите вставить. Вы можете найти ID под названием контента в вашем списке email-контента.

Пример

Допустим, у вас есть две части контента:

Контент заголовка (ID: «AAAAA-BBBBB») с предопределенным дизайном верхнего колонтитула.
Контент информационной рассылки, в который вы хотите включить верхний колонтитул.

Чтобы вставить верхний колонтитул в информационную рассылку, вы должны использовать следующее:

{% email_content "AAAAA-BBBBB" %}

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

Добавление ссылки для отписки

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

Добавьте ссылку для отписки в ваш Email следующим образом:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Unsubscribe </a>

Значение атрибута %%PW_EMAIL_UNSUBSCRIBE%% будет заменено ссылкой для отписки от Wavesend в момент отправки email-сообщения. Когда Recipients переходят по ссылке, они отказываются от ваших Email и учитываются в показателе отписок для этого конкретного email-сообщения в Message History.

Обратите внимание, что если вы используете собственную ссылку для отписки вместо ссылки Wavesend, пользователи, отказавшиеся от подписки с помощью вашего метода, не учитываются в показателе отписок, представленном в Message History. Это означает, что количество отписавшихся пользователей, которое вы увидите в статистике конкретного Email в Message History, будет включать только тех пользователей, которые перешли по ссылке Wavesend по умолчанию, а не тех, кто отписался по вашей собственной ссылке.

Чтобы вы могли доставлять важные Email своим клиентам, мы не удаляем отписавшихся пользователей из вашей пользовательской базы. Для пользователей, которые перешли по ссылке отписки из ваших Email, для default Tag «Unsubscribed Emails» устанавливается значение ‘true’.

Пожалуйста, рассмотрите возможность создания Segment для пользователей, которые не отписались (те, у кого значение Tag «Unsubscribed Emails» — ‘false’), чтобы продолжать отправлять им сообщения. Во избежание жалоб не отправляйте Email пользователям, которые отписались от ваших сообщений.

Сохранение email-контента

После того как вы закончите создание вашего Email, нажмите кнопку Save в верхней части редактора.

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

Если вы еще не настроили данные отправителя, обязательно сделайте это. Затем нажмите Save.

Теперь, когда ваш email-контент готов, его можно использовать в email-кампаниях. Подробнее

Отправка тестового Email

Перед отправкой email-кампании вы можете отправить тестовый Email, чтобы посмотреть, как контент будет отображаться в почтовых ящиках Recipients. Это позволит вам проверить макет, контент и любые персонализированные элементы, чтобы убедиться в их точности перед завершением кампании. При необходимости скорректируйте контент на основе результатов теста.

Чтобы отправить тестовый Email, нажмите Test email в email-редакторе.

В открывшемся окне:

В поле Email address введите адрес электронной почты, на который вы хотите получить тестовый Email.

Если KYC не пройдена, вам нужно будет выбрать верифицированный адрес электронной почты из списка тестовых адресов, а не вводить Email.

Если ваш Email содержит динамический контент (плейсхолдеры для персонализированных данных), добавьте образцы значений для тестирования.

Например:

Age (integer): Введите число для плейсхолдера возраста (например, 21).
FirstName (string): Введите образец имени (например, David).

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

После того как вы заполните необходимые данные, нажмите Send test email, чтобы отправить тестовое сообщение на указанный адрес электронной почты.