HTML-редактор кода

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

Создание контента для email

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

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

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

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

Интерфейс вставки пользовательского тега, показывающий выбор тега и опции значения по умолчанию

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

Добавление изображений

Чтобы добавить изображение в ваш email, включите тег <img> в ваш HTML и установите атрибут src на URL изображения.

Чтобы повторно использовать изображение из вашего Media store, скопируйте его URL оттуда и вставьте в атрибут src. Инструкции см. в разделе Копирование URL изображения.

<img src="YOUR-MEDIA-STORE-URL" alt="Summer sale banner" width="600" style="display:block;max-width:100%;height:auto;" />

Замените YOUR-MEDIA-STORE-URL на URL, который вы скопировали из Media store.

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

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

В 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 на английском, увидят его на английском. Те, кто выбрал испанский, получат его на испанском. Это гарантирует, что все получатели увидят ваше сообщение на предпочитаемом ими языке.

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

Pushwoosh позволяет объединять контент email, вставляя один фрагмент контента в другой. Это упрощает повторное использование элементов, таких как заголовки, футеры или определенные блоки контента, в разных email.

Например, если у вас есть Контент email A (заголовок) и Контент email B (новостная рассылка), вы можете вставить Контент email A в Контент email B, не копируя контент вручную каждый раз.

Синтаксис

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

{% email_content "AAAAA-BBBBB" %}

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

Отображение ID контента email, показывающее название контента и уникальный идентификатор

Пример

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

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

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

{% email_content "AAAAA-BBBBB" %}

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

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

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

Ссылка для отписки

Добавьте эту ссылку, чтобы пользователи могли отказаться от получения сообщения, которое они получили:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Отписаться </a>

Переменная заменяется на URL отписки Pushwoosh при отправке email.

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

Клики учитываются в показателе отписок для этого сообщения в Message History.

Отписаться от всех категорий

Добавьте ссылку, которая отписывает пользователя от всех категорий email сразу:

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Отписаться от всех email </a>

Чтобы вы могли доставлять важные email своим клиентам, мы не удаляем отписавшихся пользователей из вашей базы. Для пользователей, которые полностью отказались от подписки (например, через стандартную ссылку отписки, когда центр предпочтений не включен, или через ссылку “Отписаться от всех”), тег по умолчанию Unsubscribed Emails устанавливается в ‘true’.

Рассмотрите возможность создания сегмента пользователей, которые не отписались (значение тега ‘false’), чтобы продолжать отправлять им сообщения. Чтобы избежать жалоб, не отправляйте email пользователям, которые отписались.

Ссылка на центр управления предпочтениями

Добавьте прямую ссылку на центр управления предпочтениями, где пользователи могут управлять категориями, которые они получают:

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Управлять предпочтениями </a>

Узнайте, как работает центр управления предпочтениями

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

Пример футера email со всеми тремя типами ссылок для отписки: Отписаться, Управлять предпочтениями, Отписаться от всех email

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

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

Диалоговое окно сохранения контента email, показывающее поля для названия и метки

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

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

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

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

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

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

Кнопка 'Тестовый email' в интерфейсе редактора email

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

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

Если KYC не была пройдена, вам нужно будет выбрать подтвержденный email-адрес из списка тестовых адресов вместо ввода email.

Выпадающий список для выбора проверенного тестового email-адреса

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

Например:

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

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

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

Диалоговое окно подтверждения отправки тестового email с полями для примеров данных