Конструктор html письмо: Stripo — бесплатный конструктор email-шаблонов: визуальный и HTML редакторы

Лучшие конструкторы html писем в 2021 году

Email-рассылка способна на большее, чем просто сообщать новости. Дизайн письма создает настроение, формирует впечатление о компании, влияет на лояльность клиентов и конверсию.

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

Что такое конструктор email писем

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

• Экономия времени. Даже если кто-то из сотрудников отлично владеет html, оформление письма вручную займет слишком много времени. Конструктор email рассылок позволяет создавать шаблоны быстрее и без лишних усилий.
• Готовые дизайны. Используя конструктор email писем, не придется изощряться с оформлением, поскольку готовые шаблоны созданы профессиональными дизайнерами. Достаточно изменить дизайн под свои потребности.
• Совместимость с большинством email-клиентов гарантирует, что письмо будет выглядеть одинаково у каждого получателя, и все элементы дизайна отобразятся корректно.
• Простая совместная работа. Многие конструкторы писем онлайн дают возможность совместного редактирования, благодаря чему в создании дизайна может участвовать вся команда.
• Легкий доступ. Еще одно преимущество онлайн-конструктора писем  —  это то, что созданные дизайны хранятся в облаке. Не нужно ждать, пока коллеги отправят файлы  —  доступ к ним возможен в любое время с любого устройства.

Как выбрать конструктор html писем

Конструктор емейл писем  —  очень популярный сервис. Существует большой выбор программ с разным функционалом и на любой бюджет. Какие функции наиболее важны при выборе конструктора писем для рассылки?

Достаточная библиотека готовых шаблонов

Есть простые бесплатные онлайн-конструкторы html писем, которые содержат не большое количество дизайнов. Есть сервисы с тысячами шаблонов. Если вариантов слишком мало, вероятно, будет сложно найти подходящий дизайн. С другой стороны, оплачивая дорогой конструктор с огромным количеством шаблонов, компании часто используют всего несколько из них. Хорошее решение  —  подобрать сервис, где шаблонов достаточно много, но не слишком. К слову, CRM-система NetHunt позволяет хранить от 10 и более готовых шаблонов и бесплатно рассылать неограниченное количество писем через Gmail.

Встроенный редактор изображений

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

Быстрый предварительный просмотр

Прежде чем использовать шаблон в емейл-кампании, необходимо убедиться, что он корректно отобразится у получателей. Для этого в конструкторе html-писем нужна функция предварительного просмотра.

Совместимость с почтовыми клиентами

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

Интеграция с сервисом рассылки

Интеграция конструктора email-шаблонов с вашим сервисом рассылки  —  важная функция для удобства работы и экономии времени.

Простой и понятный интерфейс

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

Совместное редактирование

Эта функция становится все более актуальной, особенно при переходе многих компаний на удаленную работу. Совместное редактирование позволяет работать над шаблоном нескольким сотрудникам одновременно и видеть изменения в реальном времени.

5 лучших конструкторов HTML-шаблонов емейл писем в 2021 году

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

1. Stripo

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

2. Mailchimp

Много лет Mailchimp остается одним из самых известных онлайн конструкторов html писем: 23% маркетологов по всему миру используют именно этот сервис. В Mailchimp сравнительно немного шаблонов, но простое управление. Кроме того, он позволяет загружать и редактировать сторонние шаблоны писем, которые можно скачать в интернете. Конструктор шаблонов email  —  это одна из функций Mailchimp, поскольку в первую очередь он является сервисом рассылки.

3. Canva

Если вы ищете бесплатный онлайн конструктор html писем, присмотритесь к Canva. Это многофункциональный сервис создания дизайнов для различных целей: баннеров, визиток, флаеров, презентаций и многого другого. Есть и конструктор email-шаблонов. Преимущества Canva  —  это большой выбор бесплатных шаблонов и элементов (понравившиеся платные можно приобретать отдельно), великолепное управление, встроенный редактор изображений, широкий функционал (включая анимацию), совместное редактирование, русскоязычный интерфейс и гибкие тарифы. Базовый тариф  —  бесплатный.

4. BEE Free

Создатели этого сервиса назвали его Best Email Editor и не преувеличили. Это бесплатный онлайн конструктор html писем с возможностью покупки pro-версии. Он содержит более 500 адаптивных шаблонов писем, редактор изображений, возможность управлять отображением элементов дизайна в зависимости от размера экрана получателя. Поддерживает интеграцию с MailChimp и Gmail. Из недостатков: отсутствие русскоязычного интерфейса и возможности хранить созданные шаблоны в облаке.

5. Chamaileon

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

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

Get more NetHunt in your life

Receive popular, monthly sales and marketing insights

Thank you!

You have been subscribed.

Опубликовано февраль 22, 2021, дополнено февраль 24, 2021

Поделиться постом с друзьями и коллегами!

Конструкторы HTML писем

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

Конструкторы HTML-писем

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

Читайте также: Программы для рассылки писем

Mosaico

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

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

После создания шаблона письма получить его можно в виде файла формата HTML. Дальнейшее его использование будет зависеть от ваших целей.

Перейти к сервису Mosaico

Tilda

Онлайн-сервис Tilda является полноценным конструктором сайтов на платной основе, но предоставляется им и бесплатная пробная подписка на две недели. При этом непосредственно сам сайт создавать не нужно, достаточно зарегистрировать аккаунт и создать шаблон письма, используя стандартные заготовки.

Редактор писем содержит множество инструментов как для создания шаблона с нуля, так и для корректировки стандартных образцов.

Итоговый вариант разметки можно будет получить после публикации на специальной вкладке.

Перейти к сервису Tilda

CogaSystem

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

Перейти к сервису CogaSystem

GetResponse

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

Перейти к сервису GetResponse

ePochta

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

Основное достоинство при этом сводится к возможности бесплатного использования HTML-конструктора, в то время как оплата необходима только для непосредственного создания рассылки.

Скачать ePochta Mailer

Outlook

Outlook наверняка знаком большинству пользователей ОС Windows, так как входит в стандартный пакет офисных приложений от Microsoft. Это почтовый клиент, в котором имеется свой редактор HTML-сообщений, которые после создания можно будет отправить потенциальным адресатам.

Программа является платной, без каких-либо ограничений все ее функции могут быть использованы только после приобретения и установки пакета Microsoft Office.

Скачать Microsoft Outlook

Заключение

Мы рассмотрели лишь некоторые из существующих сервисов и приложений, однако при углубленном поиске в сети можно найти множество альтернативных вариантов. При этом стоит помнить о возможности создания шаблонов напрямую из специальных текстовых редакторов при должном знании языков разметки. Такой подход является наиболее гибким и не требует финансовых вложений.

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

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

Блочный редактор — это визуальный конструктор, в котором письма можно собирать из разных элементов (картинки, текст, кнопки).

Создание рассылки в блочном редакторе проходит в пять этапов:

1. Выберите шаблон

Все письма в блочном редакторе можно создать с нуля или на основе шаблонов. Шаблоны бывают двух видов:

Базовые — это заготовки из элементов, которые расположены на странице в соответствии с типом рассылки: приветственное письмо, каталог товаров, оповещения, акции, новости и письмо подтверждения (последний доступен только в разделе Контент).

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

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

2. Добавьте секции

Письма состоят из секций, у которых можно задать следующие настройки:

• стиль — цвет или картинка на фон (можно установить на всю ширину секции и отдельно для блока контента по центру),

• персонализация — видимость секции для получателей: её можно показать не всем, а только определённому типу подписчиков,

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

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

Чтобы открыть настройки, просто нажмите на секцию. При этом справа появятся три иконки, чтобы переместить, скопировать или удалить секцию:

3. Добавьте элементы

Всего в редакторе семь элементов:

• текст,

• картинки,

• кнопки,

• разделитель (визуально отбивает секции друг от друга),

• кнопка «Поделиться» (для фейсбука, твиттера и ВКонтакте),

• профили в соцсетях,

• HTML-блок.

Чтобы добавить элемент, перетащите его в нужную секцию, а чтобы удалить — в корзину (она появится в левой части экрана, если нажать на элемент в письме и удерживать левую кнопку мыши).

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

Важно: ошибки в вёрстке в HTML-блоке могут поломать отображение всего остального.

4. Задайте настройки письма

В общих настройках можно установить цвет текста, ссылок и кнопок, а также фон письма. Обратите внимание: фон письма выравнивается не по центру, а по левому краю, так как не все почтовые клиенты умеют его центрировать. Установить его по центру можно только в настройках секции (во вкладке «Стили»).

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

В режиме предпросмотра можно посмотреть, как письмо будет выглядеть на разных экранах (на компьютере, планшете и смартфоне), а также проверить, работают ли персонализация и функции PROScript (если они есть). Чтобы открыть предпросмотр, нажмите на иконку любого гаджета в верхней части редактора и выберите слева режим:

• посмотреть письмо для подписчиков, у которых нет данных для персонализации,

• посмотреть письмо с данными конкретного подписчика (нужно ввести его адрес),

• посмотреть все настроенные варианты персонализации.

Помните, что все почтовые клиенты немного по-разному отображают письма. Если вы хотите точно знать, как подписчики увидят ваше рассылку, заведите ящики на основных доменах (Яндекс, Mail, Gmail, Outlook) и отправьте себе несколько тестовых копий. На бесплатных аккаунтах можно отправить только одну тестовую копию — на почту, на которую зарегистрирован аккаунт.

Как работать с почтовыми шаблонами

В Битрикс24 есть возможность создать свои почтовые шаблоны и использовать их при отправке писем из CRM.

Управление почтовыми шаблонами находится на странице CRM > Настройки > Работа с почтой > Почтовые шаблоны.

Как создать шаблон?

Для создания шаблона нажмите на кнопку Добавить почтовый шаблон:

Рассмотрим доступные поля для заполнения:

• Доступен всем

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

• Активен – для того, чтобы шаблон можно было использовать, отметьте это поле, иначе он не появится в списке выбора шаблонов при отправке писем.

• Название – название шаблона в списке шаблонов.

• Привязка – выберите сущность (Лид, Сделка, Контакт, Компания, Счет, Предложение или без привязки к сущности), для которой можно будет использовать шаблон.

  Обратите внимание, шаблон будет доступен только для выбранной сущности.

• От кого – адрес почты, который будет указан в качестве отправителя.

• Тема – укажите тему письма.

В теме и в самом теле письма можно добавлять поля выбранной сущности, которые вы хотите вставить в шаблон, а также можно прикрепить файл:

Также в шаблонах можно использовать и html-форматирование. Для этого переключитесь в режим html-форматирования и отредактируйте шаблон под ваш стиль:

Переключившись обратно в визуальный редактор, вы сразу же увидите, как будет выглядеть ваш html-код:

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

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

После всех настроек не забудьте нажать Сохранить.

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

Как написать письмо по созданному шаблону?

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

Откроется форма создания письма, в этой форме в поле Шаблон будут доступны созданные почтовые шаблоны:

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

Далее можно дополнить письмо нужной информацией и отправить.

Как удалить почтовый шаблон?

Перейдите в список шаблонов и выберите в меню действий Удалить почтовый шаблон:

Дизайн и верстка email-рассылок с помощью Stripo

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

Тренды email-маркетинга  меняются быстро, особенно дизайн и верстка. Для создания письма теперь не нужно задействовать всю команду – достаточно email-маркетолога. Затраты времени на создание действительно красивого и эффективного письма должны сводиться к минимуму. 

Такую возможность предоставляет онлайн-редактор Stripo.

Библиотека готовых шаблонов и блоков

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

Чтобы не создавать элементы письма каждый раз заново, их можно сохранить в библиотеке блоков. Теперь меню, футер, карточки товаров и многое многое другое никуда не пропадёт, а всегда будет под рукой. Что, опять же, освободит время для выполнения других задач.

Создание основных блоков

1. Блок меню

Добавлять меню и менять его впоследствии тоже просто. При работе с блоком в один клик мыши добавляются и редактируются новые пункты меню.

Выглядит этот процесс так:

2. Социальные сети

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

В Stripo одним кликом выбирается размер, цвет, отображение иконок. При этом не нужно заходить в HTML-код.

Оценить скорость добавления и простоту редактирования блока можно ниже.

3. Добавление видео

В Stripo это вопрос нескольких кликов:

Инструменты для творчества

Stripo не только автоматизирует рутину, но и упрощает творческий процесс.  Если раньше, чтобы отредактировать картинку, нужен был Photoshop или с десяток онлайн-приложений, то теперь все эти задачи решаются в одном редакторе.

1. Встроенный банк картинок и создание баннеров

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

После чего из этой картинки непосредственно в Stripo создается готовый баннер.  

Редактор позволяет накладывать фильтры, менять размер отображаемой части картинки и  многое другое. Вот как это работает:

 Так выглядит готовый баннер:

2. Встроенный фоторедактор, или мини-фотошоп

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

Адаптивность

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

Письма в мобильных  выглядят классно — это ценное преимущество.

 Создание и редактирование карточек товара

И совершенно новый функционал. В Stripo можно настроить динамический контент, или smart-containers. Т.е. можно сгенерировать абсолютно любую карточку товара, всего лишь вставив ссылку на него в нужную строку.

В случаях, когда нужно добавлять десятки товаров в письмо, вручную на это уходит несколько часов. В Stripo аналогичная работа потребует меньше часа.

Чего ждать от Stripo в будущем?

• Скоро в редакторе появятся новые функции:
• настройка сложного динамического контента;
• автоматическая обработка больших массивов данных для преобразования их в письмо;
• тестирование отображения писем на Litmus;
• создание интерактивных таймеров непосредственно в Stripo.

 

«Конструктор писем» от Tilda Publishing помогает делать по-настоящему красивые рассылки

«Конструктор писем» — новая функция Tilda, редактор для создания рассылок. Его можно интегрировать с аккаунтом MailChimp, SendGrid, Unisender или получить HTML-код готового письма, который импортируется в любой другой сервис рассылок.

Почему это классно

Не нужно привлекать программиста или дизайнера, чтобы сделать рассылку. Можно вставить свой контент в готовый шаблон и получить красиво оформленное и оригинальное письмо. Не нужно ничего адаптировать: рассылка автоматически масштабируется под разные устройства. Отправить письмо можно прямо из Tilda или в любом другом сервисе, скопировав HTML-код.

Ира Смирнова

дизайнер Tilda Publishing.

Идея «Конструктора писем» родилась из наших нужд. Мы пытались верстать свои рассылки сначала в одном сервисе, потом в другом. Это было мучительно, долго и изматывало нервы нашим дизайнерам. Тогда мы подумали: а почему бы не сделать «Конструктор писем» на Tilda? Сначала сделали MVP — буквально несколько блоков только для наших задач. Когда поняли, что это безумно удобно, расширили библиотеку, функциональность, сделали шаблоны, настроили интеграцию и открыли для всех пользователей.

Для кого сделан «Конструктор писем»

«Конструктор писем» — универсальный инструмент, который помогает сфокусироваться на целях вашего проекта. Сервис подойдёт специалистам, которые имеют дело с рассылками. В понятном интерфейсе разберётся и предприниматель, и маркетолог, и дизайнер.

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

Как это работает

1. Заходите в аккаунт Tilda.

2. Создаёте проект рассылки и в нём — новое письмо.

3. Выбираете шаблон письма.

4. Вставляете и редактируете свой контент.

5. Отправляете тестовое письмо на проверку.

6. Подключаете сервис отправки писем (MailChimp, SendGrid или Unisender).

7. Задаёте дату отправки письма или сразу отправляете по своей базе.

8. Либо получаете код и импортируете в любой другой сервис.

Какие есть функции

По аналогии с конструктором сайтов письмо собирается из блоков по одному из шаблонов. Шаблон — просто образец хорошего дизайна, его можно менять как угодно.

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

Возможности для онлайн-торговли

В «Конструкторе писем» Tilda к карточкам можно добавлять кнопки действий и отправлять товары, статьи и списки с разным содержанием.

Электронная почта сегодня главный инструмент онлайн-торговли и ретаргетинга. Всё больше магазинов отказываются от текстов в рассылках в пользу интерактивных карточек товаров с возможностью быстрого перехода к покупке. В «Конструкторе писем» Tilda эту функцию можно активно использовать.

SEO

У каждого письма есть своя страница с адресом — можно подключить отдельный домен или субдомен вашего сайта. После отправки письма можно поделиться ссылкой на него в блоге или социальных сетях. Такие обновления положительно влияют на SEO.

Сделать свою рассылку

снижаем стоимость разработки регулярного письма — Блог EMAILMATRIX

У компании EMAILMATRIX большой опыт работы с некоммерческими организациями. Совместно с «Гринпис» мы реализовали предновогоднюю емейл-кампанию с благотворительной эстафетой и спецпроект по раздельному сбору мусора в Москве и МО. Но всё равно было волнительно приступать к проекту для Всемирного фонда природы (WWF). Это одна из крупнейших международных природоохранных организаций, главная цель которой — сохранение биологического разнообразия Земли. Коллеги из фонда обратились к нам с большим пулом задач — о решении самой интересной, а именно о внедрении конструктора писем для рассылки, я расскажу в этой статье.

Начало работ

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

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

Для их решения мы сформировали план работ:

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

Разработка конструктора писем для регулярных рассылок

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

1. текст сплошной, не расставлены основные акценты;
2. дизайн устаревший;
3. вёрстка неадаптивная.

Письма выглядели так:

Емейлы до внедрения конструктора писем для рассылок

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

Конструктор писем для рассылок реализовали на базе существующих функций GetResponse, т. к. клиент уже работал в этой платформе.

Реализация конструктора писем для рассылок

1. Подготовительный этап

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

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

2. Этап разработки подстановочных блоков конструктора писем для рассылок

На первом этапе работы над welcome-письмами мы уже разработали новый дизайн, так что собирать шаблон было намного проще, поскольку:

• основная концепция писем уже была готова — мы решили, что они должны быть яркими, с красивыми фотографиями природы и животных, ведь главная миссия фонда — сохранение биоразнообразия Земли. Такие образы помогают проникнуться идеей WWF;
• часть необходимых блоков уже присутствовала в этих письмах.

Пример емейла из приветственной цепочки WWF, который послужил основой для дизайна конструктора писем для рассылок

Важно

При разработке конструктора писем для рассылок важно учесть все блоки (например, заголовки, которые вы будете использовать в оформлении письма, баннеры для разных информационных разделов, текстовое наполнение), которые понадобятся при формировании последующих писем регулярной коммуникации. Тщательно анализируйте все письма, которые рассылались ранее.

В итоге у нас получилось письмо, которое на следующем этапе мы заверстали и разбили на отдельные редактируемые блоки.

Шаблон емейла со всеми блоками конструктора писем для рассылки

3. Вёрстка и настройка блоков в платформе

Сложности, с которыми мы столкнулись, начав верстать блоки и добавлять их в конструктор писем для рассылок:

• HTML-сниппеты
  Getresponse их не поддерживает. Выбрали реализацию через стандартные блоки платформы.
• Адаптация
  Невозможно повлиять на адаптацию блоков в мобильной версии.
• Редактирование
  Чтобы блок был редактируемым, сделали добавление картинки в блок фоном, чтобы тексты можно было править в шаблоне.

Конечно же, со всеми проблемами мы справились и создали подстановочные блоки, которые можно редактировать.

Выглядело это таким образом:

Выглядит сложно, но не пугайтесь. Мы написали подробную инструкцию по работе с новым конструктором писем для рассылок.

Вот пример выдержки из инструкции:

Выводы

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

Спойлер: в следующей статье я расскажу о тактике реактивации, следите за обновлениями блога.

документов ТОПОЛ | Встраиваемый редактор электронной почты для приложений SaaS

Введение

Плагин

Topol — это редактор электронной почты с возможностью перетаскивания, который вы можете встроить на свой сайт. Шаблоны электронной почты управляются на вашей стороне (самостоятельно). После сохранения редактора мы предоставляем вам HTML и JSON шаблона электронной почты. Редактор может загружать только шаблоны в формате JSON, созданные специально в нашем редакторе. Обратите внимание, что загрузить HTML в редактор невозможно.

Интеграция займет у вас всего несколько минут.

1. Интегрируйте плагин Topol за 2 простых шага
2. Сохраните и загрузите свои шаблоны
3. Расширенная конфигурация плагина
4. Пользовательское хранилище — AWS или GCS
5. Пользовательский файловый менеджер
6. Пользовательские конечные точки API

Интеграция плагинов

Шаг 1. Создайте токен API

В вашем аккаунте Topol перейдите в Настройки -> Плагин и создайте токен API.

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

  topol.io
www.topol.io
* .topol.io
локальный: 563295
  

Ключ API всегда связан с заданными доменами и не будет работать в другом домене.

Шаг 2. Добавьте необходимый код

Как только вы получите ключ API, сначала вставьте этот HTML-код в свое приложение:

Здесь будет отображаться плагин.(Важно указать явную высоту и ширину для элемента, иначе высота и ширина div могут быть слишком малы для построителя TOPOL.io.)

apiKey — как получить токен API
userId — UserId — это идентификатор вашего пользователя (вы не найдете его в нашем приложении, просто используйте любой идентификатор, который хотите). UserID — это буквенно-цифровая строка (она может содержать буквы, цифры, _ или -), которая идентифицирует уникального пользователя вашего приложения и позволяет плагину загружать ресурсы для этого пользователя (например,г. картинки). Он будет считаться уникальным пользователем при ежемесячном выставлении счетов.

Затем вставьте это в свой файл с реализацией плагина:

   <сценарий>
const TOPOL_OPTIONS = {
    id: "#app",
    авторизовать: {
        apiKey: "ВАШ_API_KEY",
        userId: "UserID",
    },
    обратные вызовы: {
        onSave: function (json, html) {
           
        }
    }
};

TopolPlugin.init (TOPOL_OPTIONS);

fetch ('https://tlapi.github.io/topol-editor/templates/1.json')
    .then (response => response.text ())
    .then (template => {
        
        TopolPlugin.load (шаблон)
    }
);

  

Руководство по обновлению

Обновление редактора 2 до редактора 3 (расчетное время обновления составляет 5 минут)

Пожалуйста, обратите внимание, что нет никаких серьезных критических изменений в функциональности плагинов или структурах шаблонов и т. Д. Если у вас возникнут какие-либо проблемы с новой версией, вы можете вернуться к версии Editor 2.

Из:

Кому:

Коды языков теперь соответствуют стандарту ISO 639-1.

Измененные коды языков:

9122 Рабочий с JS-фреймворками

При использовании таких фреймворков, как Vue, React или Angular, каждый раз, скрывая редактор, следует использовать TopolPlugin.destroy () для завершения работы редактора:

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

При повторном открытии инициализируйте редактор с помощью TopolPlugin.init (TOPOL_OPTIONS) .

Конфигурация плагина

Вы можете настроить плагин в соответствии с вашими потребностями, указав конкретную конфигурацию в переменной TOPOL_OPTIONS .

Вот список всех возможных вариантов:

  var TOPOL_OPTIONS = {
    id: "#app",
    авторизовать: {
        apiKey: "Ваш ключ API",
        userId: "Идентификатор пользователя",
    },
    title: "Мой конструктор шаблонов",
    язык: "en",
    removeTopBar: ложь,
    topBarOptions: [
        "отменить повторить",
        "changePreview",
        "previewSize",
        "previewTestMail",
        "сохранить и закрыть",
        "спасти"
    ],
    mainMenuAlign: "влево",
    hideSettingsTab: false,
    disableAlerts: ложь,
    свет: ложь,
    customFileManager: ложь,
    contentBlocks: {
        text: {
            отключено: правда,
            disabledText: 'Текст во всплывающей подсказке',
            скрыто: правда
        },
    },
    mergeTags: [
        {
            name: 'Объединить теги',
            Предметы: [
                {
                    значение: "* | FIRST_NAME | *",
                    текст: "Имя",
                    label: "Имя клиента"
                },
                {
                    значение: "* | LAST_NAME | *",
                    текст: "Фамилия",
                    label: «Фамилия клиента»
                },
                
                
                {
                    name: 'Объединить вложенные теги',
                    Предметы: [
                        {
                            значение: "* | FIRST_NAME_NESTED | *",
                            текст: "Имя 2",
                            label: "Имя клиента 2"
                        },
                        {
                            значение: "* | LAST_NAME_NESTED | *",
                            текст: "Фамилия 2",
                            label: "Фамилия клиента 2"
                        }
                    ]
                }
            ]
        }, {
            name: 'Специальные ссылки',
            Предметы: [
                {
                    значение: " Отказаться от подписки ",
                    текст: "Отписаться",
                    label: "Ссылка для отказа от подписки"
                },
                {
                    значение: " Веб-версия ",
                    текст: "Веб-версия",
                    label: "Ссылка на веб-версию"
                }
            ]
        }, {
            name: 'Особое содержание',
            Предметы: [
                {
                    value: "Для получения дополнительных сведений посетите наш  интернет-магазин !",
                    текст: "Посетите наш сайт",
                    label: "Призыв к действию"
                }
            ]
        }
    ],
    
    
    
    fontSizes: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, ...],

    tinyConfig: {
      
      
      
    },

    saveBlocks: [
        {
            id: 1,
            name: 'Мой сохраненный блок 001',
            img: 'src to my img',
            определение: [{"tagName": "mj-section", "attributes": {"full-width": false, "padding": "9px 0px 9px 0px", "background-color»: "# 000000"}, "тип": ноль, "дети": [{"tagName": "mj-столбец", "атрибуты": {"ширина": "33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-social "," attributes ": {" padding ":" 10px 10px 10px 10px "," text- mode ":" false "," icon-size ":" 35px "," align ":" center "," containerWidth ": 198}," children ": [{" tagName ":" mj-social-element ", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /facebook.png", "name": "facebook-noshare", "alt": "facebook", "href": "https: \ / \ / www.facebook.com \ / PROFILE", "background-color": "transparent"}} , {"tagName": "mj-social-element", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /twitter.png "," name ":" twitter-noshare "," alt ":" twitter "," href ":" https : \ / \ / www.twitter.com \ / PROFILE "," background-color ":" transparent "}}, {" tagName ":" mj-social-element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /instagram.png "," alt ":" instagram "," name ":" instagram "," href ":" https: \ / \ / www.instagram.com \ / PROFILE "," background-color ":" transparent "}}]," uid ":" dAoF8AoOO "," style ":" simplewhite "}]," uid ":" SJ3I0XVx7 "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-image "," attributes ": {" src ":" https: \ / \ / storage.googleapis .com \ / jan50 \ /blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt ":" "," href ":" "," containerWidth ": 200," width ": 100," widthPercent ": 50}," uid ":" MFT0c-tu6X "}]," uid ":" r1e280m4xQ "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-spacer "," attributes ": {" height ":" 50px "," containerWidth ": 200}," uid ":" 0nV_PAUDZ2 "}]," uid ":" B1W380QVxX "}]," layout ": 1," backgroundColor ":" "," backgroundImage ":" "," paddingTop ": 0," paddingBottom ": 0 , "paddingLeft": 0, "paddingRight": 0, "uid": "GD8ksoWQzG"}]
        }
    ],
    premadeBlocks: {
        'заголовки': [
            {
                'img': 'url',
                'определение': [{"tagName": "mj-section", "attributes": {"full-width": false, "padding": "9px 0px 9px 0px", "background-color»: "# 000000" }, «тип»: null, «дети»: [{«tagName»: «mj-столбец», «атрибуты»: {«ширина»: «33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-social "," attributes ": {" display ":" facebook: url twitter: url google: url) "," padding ":" 10px 10px 10px 30px "," text-mode ":" false "," icon-size ":" 25px "," base-url ":" https: // s3-eu-west- 1.amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/ "," facebook-href ":" https://www.facebook.com/PROFILE "," facebook-icon-color ":" нет "," facebook-alt ":" Sdílet "," twitter-href ":" https://www.twitter.com/PROFILE "," twitter-icon-color ":" none "," twitter-alt ": "", "google-href": "https: // plus.google.com/PROFILE "," google-icon-color ":" none "," google-alt ":" "," instagram-icon-color ":" none "," linkedin-icon-color ":" none "," align ":" left "," youtube-icon-color ":" none "," youtube-alt ":" "," youtube-icon ":" https: // s3-eu-west-1. amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/youtube.png "," youtube-href ":" https://www.youtube.com "," containerWidth ": 200}," uid ": "h2lqIiX4lm"}], "uid": "SJ3I0XVx7"}, {"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"} , "children": [{"tagName": "mj-image", "attributes": {"src": "https: // хранилище.googleapis.com/jan50/blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt ":" "," href ":" "," containerWidth ": 200," width ": 100," widthPercent " ": 50}," uid ":" rkEyL-HeQ "}]," uid ":" r1e280m4xQ "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% " , "vertical-align": "top"}, "children": [{"tagName": "mj-spacer", "attributes": {"height": 15, "containerWidth": 200}, "uid": "rJfqLiXEgm"}], "uid": "B1W380QVxX"}], "layout": 1, "backgroundColor": "", "backgroundImage": "", "paddingTop": 0, "paddingBottom": 0, "paddingLeft ": 0," paddingRight ": 0," uid ":" rkqIjQNe7 "}
                ]
            }]
    },
    
    обратные вызовы: {
        onSaveAndClose: function (json, html) {
            
            приставка.журнал (HTML);
            
            console.log (json);
            
            
        },
        onSave: function (json, html) {
            
            console.log (HTML);
            
            console.log (json);
        },
        onTestSend: function (email, json, html) {
            
            console.log (HTML);
            
            console.log (json);
            
            console.log (электронная почта);
            
        },
        onOpenFileManager: function () {
            
        },
        onBlockSave (json) {
            var name = window.подсказка ('Введите имя блока:')
            if (имя! == null) {
                console.log ('блок сохранения', json)
            }
        },
        onBlockRemove (id) {
            if (window.confirm ('Вы уверены?')) {
                console.log ('удаление блока', id)
            }
        },
        onBlockEdit (id) {
            var name = window.prompt ('Имя блока:', 'Мой блок 001')
            if (имя! == null) {
                console.log ('сохранение отредактированного блока', id)
            }
        },
        onPreview (html) {
          
        },
        onInit () {
          
        },
        onAlert (уведомление) {

        }
    },
    apiAuthorizationHeader: 'Токен на предъявителя',
    api: {
        
        IMAGE_UPLOAD: "/ изображения / загрузка",
        
        ПАПКИ: "/ images / folder-contents",
        
        IMAGE_EDITOR_UPLOAD: "/ images / image-editor-upload",
        
        АВТОСОХРАНИТЬ: "/ автосохранение",
        
        АВТОСОХРАНИТЬ: "/ автосохранение",
        
        GET_AUTOSAVE: "/ автосохранение /",
        
        КОРМЫ: "/ feeds",
        
        ПРОДУКТЫ: "/ products
    }
};
  

Вот список всех функций плагина:

  TopolPlugin.init (TOPOL_OPTIONS);


TopolPlugin.load ('json-template');


TopolPlugin.save ();


TopolPlugin.togglePreview ();


TopolPlugin.chooseFile ('http://url.to/picture.png');


TopolPlugin.setSavedBlocks ([
  {
    'id': 11,
    'name': 'Мой сохраненный блок - от setSavedBlocks',
    'определение': [{"tagName": «mj-section», «attributes»: {«full-width»: false, «padding»: «9px 0px 9px 0px», «background-color»: «# 000000») }, "type": null, "children": [{"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"}, " children ": [{" tagName ":" mj-social "," attributes ": {" padding ":" 10px 10px 10px 10px "," text-mode ":" false "," icon-size ":" 35px " , "align": "center", "containerWidth": 198}, "children": [{"tagName": "mj-social-element", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /facebook.png "," name ":" facebook-noshare "," alt ":" facebook "," href ":" https : \ / \ / www.facebook.com \ / PROFILE "," background-color ":" transparent "}}, {" tagName ":" mj-social-element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /twitter.png "," name ":" twitter-noshare ", "alt": "twitter", "href": "https: \ / \ / www.twitter.com \ / PROFILE", "background-color": "transparent"}}, {"tagName": "mj-social -element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /instagram.png "," alt ":" instagram "," name ":" instagram "," href ":" https: \ /\/www.instagram.com\/PROFILE","background-color":"transparent"}}******************************************************************************************************************************************************************* "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-image "," attributes ": {" src ":" https: \ / \ / storage.googleapis.com \ / jan50 \ /blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt " : "", "href": "", "containerWidth": 200, "width": 100, "widthPercent": 50}, "uid": "MFT0c-tu6X"}], "uid": "r1e280m4xQ"} , {"tagName": "mj-column", "attributes": {"width": "33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-spacer "," attributes ": {" height ":" 50px "," containerWidth ": 200} , "uid": "0nV_PAUDZ2"}], "uid": "B1W380QVxX"}], "layout": 1, "backgroundColor": "", "backgroundImage": "", "paddingTop": 0, "paddingBottom" : 0, «paddingLeft»: 0, «paddingRight»: 0, «uid»: «GD8ksoWQzG»}]
  },
  {
    'id': 12,
    'img': 'https://d5aoblv5p04cg.cloudfront.net/editor/blocks/menu1.jpg',
    'определение': [{"tagName": «mj-section», «attributes»: {«full-width»: false, «padding»: «9px 0px 9px 0px», «background-color»: «# 000000») }, «тип»: null, «дети»: [{«tagName»: «mj-столбец», «атрибуты»: {«ширина»: «33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-social "," attributes ": {" padding ":" 10px 10px 10px 10px "," text- mode ":" false "," icon-size ":" 35px "," align ":" center "," containerWidth ": 198}," children ": [{" tagName ":" mj-social-element ", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /facebook.png", "name": "facebook-noshare", "alt": "facebook", "href": "https: \ / \ / www.facebook.com \ / PROFILE", "background-color": "transparent"}} , {"tagName": "mj-social-element", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /twitter.png "," name ":" twitter-noshare "," alt ":" twitter "," href ":" https : \ / \ / www.twitter.com \ / PROFILE "," background-color ":" transparent "}}, {" tagName ":" mj-social-element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /instagram.png "," alt ":" instagram "," name ":" instagram "," href ":" https: \ / \ / www.instagram.com \ / PROFILE "," background-color ":" transparent "}}]," uid ":" dAoF8AoOO "," style ":" simplewhite "}]," uid ":" SJ3I0XVx7 "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-image "," attributes ": {" src ":" https: \ / \ / storage.googleapis .com \ / jan50 \ /blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt ":" "," href ":" "," containerWidth ": 200," width ": 100," widthPercent ": 50}," uid ":" MFT0c-tu6X "}]," uid ":" r1e280m4xQ "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-spacer "," attributes ": {" height ":" 50px "," containerWidth ": 200}," uid ":" 0nV_PAUDZ2 "}]," uid ":" B1W380QVxX "}]," layout ": 1," backgroundColor ":" "," backgroundImage ":" "," paddingTop ": 0," paddingBottom ": 0 , "paddingLeft": 0, "paddingRight": 0, "uid": "GD8ksoWQzG"}]
      }
])


TopolPlugin.createNotification ({
  title: 'Заголовок уведомления',
  text: 'Важное сообщение, которое вы хотите отобразить',
  тип: 'информация'
  expectSideEffect: true | ложный
  настойчивый: верно | ложный
})
  

Интернационализация

Список всех поддерживаемых в настоящее время языков:

Языки используют стандарт ISO 639-1.

Добавить еще один язык легко. Не стесняйтесь обращаться к нам (get @ topol.io).

Объединить теги Специальные ссылки Специальное содержание

Теги слияния, специальные ссылки или специальный контент обеспечивают простой способ вставки текстовых фрагментов из текстового редактора.

Мы используем следующую структуру для тегов слияния:

Вы найдете его на панели инструментов текстовой функции:

У вас есть возможность использовать вложенные теги слияния.

Пример кода:

  mergeTags: [
        {
            name: 'Объединить теги',
            Предметы: [
                {
                    значение: "* | FIRST_NAME | *",
                    текст: "Имя",
                    label: "Имя клиента"
                },
                {
                    значение: "* | LAST_NAME | *",
                    текст: "Фамилия",
                    label: «Фамилия клиента»
                },
                {
                    name: 'Объединить вложенные теги',
                    Предметы: [
                        {
                            значение: "* | FIRST_NAME_NESTED | *",
                            текст: "Имя 2",
                            label: "Имя клиента 2"
                        },
                        {
                            значение: "* | LAST_NAME_NESTED | *",
                            текст: "Фамилия 2",
                            label: "Фамилия клиента 2"
                        }
                    ]
                }
            ]
        }, {
            name: 'Специальные ссылки',
            Предметы: [
                {
                    значение: " Отказаться от подписки ",
                    текст: "Отписаться",
                    label: "Ссылка для отказа от подписки"
                },
                {
                    значение: " Веб-версия ",
                    текст: "Веб-версия",
                    label: "Ссылка на веб-версию"
                }
            ]
        }, {
            name: 'Особое содержание',
            Предметы: [
                {
                    value: "Для получения дополнительных сведений посетите наш  интернет-магазин !",
                    текст: "Посетите наш сайт",
                    label: "Призыв к действию"
                }
            ]
        }
    ],
  

Готовые блоки

готовых блоков используются для того, чтобы пользователи могли использовать подготовленные части электронного письма. Например, верхние или нижние колонтитулы. Вы можете определить свои собственные готовые блоки с помощью опции premadeBlocks в объекте TOPOL_OPTIONS. Вы можете скрыть готовые блоки и кнопку готового блока, используя premadeBlocks: false .

  premadeBlocks: {
  'заголовки': [
    {
      'img': 'url',
      'name': 'Готовый заголовок 1',
      
      'определение': [{"tagName": «mj-section», «attributes»: {«full-width»: false, «padding»: «9px 0px 9px 0px», «background-color»: «# 000000») }, "type": null, "children": [{"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"}, " children ": [{" tagName ":" mj-social "," attributes ": {" display ":" facebook: url twitter: url google: url »,« padding »:« 10px 10px 10px 30px »,« text- mode ":" false "," icon-size ":" 25px "," base-url ":" https: // s3-eu-west-1.amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/","facebook-href":"https://www.facebook.com/PROFILE","facebook-icon-color":"none ", "facebook-alt": "Sdílet", "twitter-href": "https://www.twitter.com/PROFILE", "twitter-icon-color": "none", "twitter-alt": "" , "google-href": "https://plus.google.com/PROFILE", "google-icon-color": "none", "google-alt": "", "instagram-icon-color": "none", "linkedin-icon-color": "none", "align": "left", "youtube-icon-color": "none", "youtube-alt": "", "youtube-icon" : "https: // s3-eu-west-1.amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/youtube.png","youtube-href":"https://www.youtube.com","containerWidth":200},"uid ": "h2lqIiX4lm"}], "uid": "SJ3I0XVx7"}, {"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"} , "children": [{"tagName": "mj-image", "attributes": {"src": "https://storage.googleapis.com/jan50/blackberrylogo.png", "padding": "19px 10px 10px 10px "," alt ":" "," href ":" "," containerWidth ": 200," width ": 100," widthPercent ": 50}," uid ":" rkEyL-HeQ "}], "uid": "r1e280m4xQ"}, {"tagName": "mj-column", "attributes": {"width": "33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-spacer "," attributes ": {" height ": 15," containerWidth ": 200}," uid ":" rJfqLiXEgm "}]," uid ":" B1W380QVxX "}]," layout ": 1," backgroundColor ":" "," backgroundImage ":" "," paddingTop ": 0," paddingBottom ": 0 , "paddingLeft": 0, "paddingRight": 0, "uid": "rkqIjQNe7"}]
    }
  ]
}
  

Список доступных категорий

• заголовки
• содержание
• ecomm // блоки электронной коммерции
• нижние колонтитулы

Сохраненные блоки

Пользователи могут сохранять свои разделы, нажимая кнопку «Сохранить» при наведении указателя мыши на раздел.Чтобы включить эту функцию, установите savedBlocks с по [] , чтобы отключить ее, не устанавливайте значение вообще или устанавливайте его на null Вы можете скрыть сохраненные блоки и кнопку готового блока, используя premadeBlocks: false a savedBlocks: false .

Каждый блок имеет следующую структуру:

  {
  id: 1,
  name: 'Мой сохраненный блок 001',
  img: 'http: // ...',
  определение: 'json',
}
  

Для работы сохраненных блоков необходимо выполнить три действия: onBlockSave , onBlockEdit и onBlockRemove .Все их нужно реализовать на объекте callbacks .

Пример:

  onBlockSave (json) {
  var name = window.prompt ('Введите имя блока:')
  if (имя! == null) {
    console.log ('блок сохранения', json)
  }
},
onBlockRemove (id) {
  if (window.confirm ('Вы уверены?')) {
    console.log ('удаление блока', id)
  }
},
onBlockEdit (id) {
  var name = window.prompt ('Имя блока:', 'Мой блок 001')
  if (имя! == null) {
    console.log ('сохранение отредактированного блока', id)
  }
}
  

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

  TopolPlugin.setSavedBlocks ([{
  id: 1,
  name: 'Мой сохраненный блок 001',
  img: 'http: // ...',
  определение: 'json',
}]);
  

Эта функция принимает массив всех сохраненных блоков, которые вы хотите показать в редакторе.

шаблоны

Мы предоставляем две встроенные темы. Темный режим и светлый режим.

Установив опцию light: true , вы переключите дизайн редактора на светлую тему.

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

При использовании этой опции light: true в опциях не даст никакого эффекта.

Темный режим по умолчанию:

  тема: {
  предустановка: 'темный',
  borderRadius: {
      small: '4px'
      большой: '8px'
  },
  цвета: {
      '900': "# 13171E",
      '800': "# 1F2329",
      '700': "# 272A30",
      '600': "# 32363E",
      '500': "# 3C4048",
      '400': "# 494D55",
      '350': "# 575B62",
      '300': "# 828488",
      '200': "#CBCBCD",
      белый: '#ffffff',
      первичный: '# 917DFF',
      'первичный свет': '# A696FF',
      'primary-dark': '# 836EFA',
      вторичный: '# 00D7CA',
      'вторичный свет': '# 08E8DA',
      ошибка: '# D52A3D',
      'error-light': '# FA5151',
      'успех': '## 00DE52',
      'успех-свет': '# 0CE16B',
      'active': '# 409EFF',
      'активный свет': '#ACCCFB',
  }
}
  

Режим освещения по умолчанию:

  тема: {
  предустановка: 'светлый',
  borderRadius: {
      small: '4px'
      большой: '8px'
  },
  цвета: {
      '900': "# 161616",
      '800': "# 262626",
      '700': "# 393939",
      '600': "# 666666",
      '500': "# 6f6F6f",
      '450': "# 8D8D8D",
      '400': "# c5c5c5",
      '350': "# C7C7C7",
      '300': "# D6D6D6",
      '200': "#EDEDED",
      '150': "# F5F5F5",
      '100': "# F9F9FA",
      белый: '#ffffff',
      первичный: '# 9179ff',
      'первичный свет': '# a696ff',
      'primary-dark': '# 8369fe',
      вторичный: '# 00d8cb',
      'вторичный свет': '# 00e9db',
      ошибка: '# d62738',
      'error-light': '# fd4f4c',
      'успех': '# 00e049',
      'active': '# 4482ff',
      'active-light': '# 6aa6ff',
  }
}
  

Главное меню выровнять

Установив опцию mainMenuAlign: "right" , вы попадете в главное меню в правой части конструктора.

Удалить верхнюю планку

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

Опции верхней панели

Если вы хотите скрыть только некоторые элементы на верхней панели, вы можете сделать это с помощью опции topBarOptions: [] . Вы можете добавить эти элементы, чтобы отобразить их:

• «undoRedo» Показывает кнопку отмены / повтора

• "changePreview" Показывает кнопку предварительного просмотра «Изменить»

• "previewSize" Показывает кнопку предварительного просмотра для мобильных / настольных ПК

• "previewTestMail" Показывает кнопку отправки тестового сообщения электронной почты

• «сохранить» Показывает кнопку сохранения

• "saveAndClose" Показывает кнопку «Сохранить и закрыть»

Значение по умолчанию — [] .

Пустой массив означает, что все элементы видны.

Тестовая отправка

Когда пользователь нажимает Отправить тест (значок). Шаблон отображается, а затем вызывается обратный вызов. Тестовый ввод можно скрыть, выполнив команду previewTestMail в параметрах верхней панели.

  onTestSend: function (email, json, html) {
    console.log (HTML);
    console.log (json);
    
    console.log (электронная почта);
},
  

Режим предварительного просмотра на настольных и мобильных устройствах

Когда верхняя панель удалена, Вы можете получить доступ к режиму предварительного просмотра, используя функцию:

  TopolPlugin.togglePreview ();
  

Показать пользовательское уведомление в редакторе

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

  обратных вызовов: {
  

  onAlert (уведомление) {
    
  }
}
  

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

  TopolPlugin.createNotification ({
  title: 'Заголовок уведомления',
  text: 'Важное сообщение, которое вы хотите отобразить',
  тип: 'информация'
  expectSideEffect: true | ложный
  настойчивый: верно | ложный
});
  

Тип уведомления по умолчанию — информация.

Вернуть и отменить

Вы можете применить функцию повтора и отмены к объекту TopolPlugin.

  TopolPlugin.undo ();
TopolPlugin.redo ();
  

При инициализации

Вызывается при загрузке редактора. Может быть полезно для реализации пользовательской загрузки перед загрузкой редактора.

Параметры блоков содержимого

Эта опция позволяет работать с блоками содержимого. Вы можете отключить блок, полностью скрыть его или предоставить всплывающую подсказку для отключенного блока содержимого.

У вас есть возможность изменить следующие блоки содержимого:

текст, изображение, gif, кнопка, разделитель, разделитель, социальные сети, видео, HTML, товар

  contentBlocks: {
    text: {
        отключено: правда,
        disabledText: 'Текст во всплывающей подсказке',
        скрыто: правда
    },
}
  

Редактор изображений

В редакторе изображений есть встроенное средство выбора шрифтов, чтобы использовать его в полной мере, необходимо предоставить токен API Google Fonts.

  googleApiKey: 'YOUR_API_TOKEN'
  

Опции сохранения и загрузки

Собственные шаблоны

Вы можете найти предопределенные шаблоны ниже (щелкните, чтобы показать код JSON).Используйте «начать с нуля» для нового пустого шаблона:

  TopolPlugin.load ("{\" tagName \ ": ...");
  

Пример загрузки API:

  выборка ('https://tlapi.github.io/topol-editor/templates/1.json')
    .then (response => response.text ())
    .then (template => {
        
        TopolPlugin.load (шаблон)
    }
);
  

Пример встроенной загрузки:

  TopolPlugin.load (JSON.stringify ({
    "tagName": "mj-global-style",
    "attributes": {
        "h2: color": "# 000",
        "h2: font-family": "Helvetica, без засечек",
        "h3: color": "# 000",
        "h3: font-family": "Ubuntu, Helvetica, Arial, sans-serif",
        "h4: color": "# 000",
        "h4: font-family": "Ubuntu, Helvetica, Arial, sans-serif",
        ": color": "# 000",
        ": font-family": "Ubuntu, Helvetica, Arial, sans-serif",
        ": высота строки": "1.5 ",
        "a: color": "# 24bfbc",
        "button: background-color": "# e85034",
        "containerWidth": 600,
        "шрифты": "Helvetica, sans-serif, Ubuntu, Arial",
        "mj-text": {
            "высота строки": 1,5,
            "font-size": 15
        },
        "mj-button": []
    },
    "дети": [
        {
            "tagName": "mj-контейнер",
            "attributes": {
                "цвет фона": "#FFFFFF",
                "containerWidth": 600
            },
            "дети": [
                {
                    "tagName": "mj-section",
                    "attributes": {
                        "полная ширина": ложь,
                        "padding": "9px 0px 9px 0px"
                    },
                    "дети": [
                        {
                            "tagName": "mj-столбец",
                            "attributes": {
                                "ширина": "100%"
                            },
                            "дети": [],
                            "uid": "HJQ8ytZzW"
                        }
                    ],
                    «макет»: 1,
                    "backgroundColor": null,
                    "backgroundImage": null,
                    "paddingTop": 0,
                    "paddingBottom": 0,
                    "paddingLeft": 0,
                    "paddingRight": 0,
                    "uid": "Byggju-zb"
                }
            ]
        }
    ],
    "стиль": {
        "h2": {
            "font-family": "\" Кабина \ ", без засечек"
        }
    },
    "шрифты": [
        "\" Кабина \ ", без засечек"
    ]
}));
  

onSave и onSaveAndClose

Когда пользователь нажимает кнопку Save или Save & Close , вызывается конечная точка SAVE API, а затем вызывается onSave / onSaveAndClose.

Вы можете вставить обратный вызов, который вызывается сразу после вызова конечной точки SAVE API. Обратный вызов имеет атрибут данных , который содержит данные ответа.

  onSave: function (json, html) {
    console.log (HTML);
    console.log (json);
},
onSaveAndClose: function (json, jtml) {
    console.log (HTML);
    console.log (json);
}
  

Пользовательский файловый менеджер

customFileManager

Если вы хотите отключить наш встроенный файловый менеджер, просто определите customFileManager: true в объекте параметров.Тогда редактор будет использовать следующие функции.

onOpenFileManager

Когда пользователь нажимает на Выберите файл (например, как свойство изображения). Этот обратный вызов называется. Например, вы можете разработать свой собственный диалог файлового менеджера.

  onOpenFileManager: function () {
    
},
  

выбрать файл

Когда пользователь выбирает файл, вам необходимо вызвать функцию chooseFile в экземпляре TopolPlugin. с URL-адресом файла.

  TopolPlugin.selectFile ('http://url.to/picture.png');
  

Специальное хранилище

Мы предоставляем встроенное решение для хранения с AWS S3 и Google Cloud Storage . Однако вы можете использовать в качестве собственного хранилища , как описано ниже.

Учебное пособие

— Как интегрировать пользовательское AWS
Учебное пособие — Как интегрировать пользовательское облачное хранилище Google
Варианты самостоятельного размещения

Пользовательские конечные точки API

Использование конечной точки CUSTOM API может быть полезно в различных сценариях.

Когда необходимо использовать пользовательские конечные точки API.

• Пользовательское собственное хранилище файлов
• Использование автосохранения
• Работа с кормами и продуктами

Безопасность

Мы предлагаем возможность добавить заголовок авторизации к пользовательским конечным точкам API. Вы можете вставить токен, используя следующую опцию в TOPOL_OPTIONS. Этот токен авторизации будет добавлен ко всем текущим запросам к вашему серверу.

  apiAuthorizationHeader: 'Bearer token',
  

Это разрешится в параметре: Авторизация Bearer_token

Если вы хотите назвать параметр самостоятельно, вы можете использовать следующую опцию:

  apiAuthorizationHeader: {
    'Param-name': 'секрет'
  }
  

Проблемы CORS

При работе с настраиваемыми конечными точками не забудьте разрешить нашему серверу d5aoblv5p04cg.cloudfront.net как известный источник. В противном случае вы столкнетесь с проблемами CORS.

Самостоятельное хранилище

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

ПАПКИ

Получить изображения

Метод: GET

Вызывается при открытии диспетчера файлов.Этот вызов используется для получения файлов и папок. с этими параметрами GET путь , userId , uuid

Ответ:

  [{
    "имя": "имя файла",
    "дата": дата последнего изменения,
    «размер»: 500,
    "путь": "/ путь /",
    "тип": "файл" ИЛИ "папка",
    "extension": ".jpg",
    "url": "https://url-to-image.com/image.jpeg"
}]
  

Добавить изображения

Метод: POST

Вызывается при добавлении папки в файловый менеджер.

Кузов:

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

Ответ:

  [{
  "url": "url_of_uploaded_image"
}]
  

Удалить изображения

Метод: POST

Мы добавляем / удаляем к api .FOLDER URL.

Тело: массив каталогов, подлежащих удалению

Ожидаемый ответ — это код состояния 200 или 204.

ЗАГРУЗКА ИЗОБРАЖЕНИЯ

Метод: POST

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

Ответ:

  Content-Type: приложение / json

{
  "успех": правда,
  "url": "http://191n.mj.am/img/191n/1t/hs.png"
}
  

IMAGE_EDITOR_UPLOAD

Метод: POST

Эту конечную точку следует использовать при получении отредактированного изображения из встроенного редактора изображений.

Запрос:

  Content-Type: приложение / json

{
  "content": "изображение в формате base64",
  "filename": "Имя файла"
}
  

Ожидаемый ответ:

  {
  "url": "https: // url-to-image.com / image.jpeg "
}
  

Автосохранение

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

Сначала вам нужно включить автосохранение опций с помощью enableAutosaves: true

АВТОСЕЙБЫ

Метод: GET

Эта конечная точка вызывается при получении всех автосохранений.

Параметры:

  Content-Type: приложение / json

{
  "ключ": "ключ API",
  "имя хоста": "происхождение"
  "templateId": "идентификатор шаблона",
  "uuid": "userId"
}
  

Ожидаемый ответ:

  {
  успех: правда,
  данные: [
    {
      uid: 'userID',
      ключ: 'autosaveKey',
      время: «Время ISO 8601»
    }
  ]
}
  

AUTOSAVE

Метод: POST

Эта конечная точка вызывается при создании автосохранения.

Эти данные следует использовать для сохранения JSON шаблона, времени создания автосохранения, идентификатора пользователя и уникального идентификатора автосохранения. Эти данные затем используются при извлечении автосохранения.

Запрос:

  Content-Type: приложение / json

{
  "definition": "MJML в JSON",
  "ключ": "ключ API",
  "имя хоста": "происхождение"
  "templateId": "идентификатор шаблона",
  "uuid": "userId"
}
  

Ожидаемый ответ: СОСТОЯНИЕ 200

GET_AUTOSAVE

Метод: GET

Эта конечная точка вызывается при получении созданного автосохранения.

Эта конечная точка добавляет ‘/ {{key}}’

Параметры:

  Content-Type: приложение / json

{
  "ключ": "ключ API",
  "имя хоста": "происхождение"
  "templateId": "идентификатор шаблона",
  "uuid": "userId"
}
  

Ожидаемый ответ:

  {
  успех: правда,
  данные: "{" tempalte ":" jsonTemplate "}"
}
  

Продукт из кормов

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

ПРОДУКТ

Метод: GET

Эта конечная точка вызывается при получении продуктов из FEED.

Параметры:

  Content-Type: приложение / json

{
  "id": "productID",
  "search": "строка поискового запроса",
  "per_page": "ожидаемых товаров на странице"
  "current_page": "текущая страница продуктов с разбивкой на страницы",
  "feed": "активный идентификатор FEED"
}
  

Ожидаемый ответ:

  {
  успех: правда,
  данные: [
    {
      id: 'идентификатор продукта',
      name: 'название продукта',
      description: 'описание продукта',
      url: 'ссылка на товар',
      img_url: 'ссылка на изображение товара',
      price_with_vat: 'цена товара с НДС',
      валюта: 'валюта цены',
      price_before: 'исходная цена после скидки на товар',
      product_feed_id: 'идентификатор корма, которому принадлежит продукт'
    }
  ],
  
  from: "с id ресурса",
  to: "Идеи ресурса",
  total_records: "общее количество записей ресурса",
  per_page: "ресурс на страницу",
  current_page: "текущая страница ресурса",
  last_page: "последняя страница ресурса",
}
  

КОРМОВ

Метод: GET

Эта конечная точка вызывается при получении ФИДОВ продуктов.

Параметры:

  Content-Type: приложение / json

{
  "id": "идентификатор фида",
  "search": "строка поискового запроса",
  "per_page": "ожидаемых фидов на странице"
  "current_page": "текущая страница фидов, разбитых на страницы",
}
  

Ожидаемый ответ:

  {
  успех: правда
  данные: [
    {
      id: 'идентификатор ленты',
      name: "название ленты"
    }
  ],
  
  from: "с id ресурса",
  to: "Идеи ресурса",
  total_records: "общее количество записей ресурса",
  per_page: "ресурс на страницу",
  current_page: "текущая страница ресурса",
  last_page: "последняя страница ресурса",
}
  

Разное

Домены, используемые TOPOL.Плагин io

Какие домены использует плагин? Иногда проблема может быть вызвана брандмауэром в сети ваших клиентов, поэтому им может потребоваться добавить домены в белый список. Плагин TOPOL.io использует следующие домены:

  d5aoblv5p04cg.cloudfront.net
fonts.googleapis.com
  

---

Флаги, сделанные Freepik с www.flaticon.com

Word в HTML — простота использования и мгновенное преобразование

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

Как преобразовать текст в HTML?

1. Вставьте содержимое из Microsoft Word или Excel или напишите текст в визуальном редакторе.
2. Ваш текст будет мгновенно преобразован в чистый HTML. Вы можете сохранить или удалить форматирование.
3. Преобразованный HTML-код появится в редакторе HTML.

Вы также можете создавать новое содержимое, вводя текст непосредственно в поле визуального редактора.Работает как любой текстовый редактор. У вас есть полный контроль над шрифтами, размером шрифта, цветом шрифта, а также возможностью создавать списки, таблицы и вставлять изображения.

Как преобразовать документ MS Word в HTML?

1. Нажмите синюю кнопку «Загрузить файл» и выберите свой документ
2. Ваш файл будет мгновенно преобразован в чистый HTML
3. Текст из вашего файла будет отображаться в визуальном редакторе
4. Преобразованный HTML-код появится в редакторе HTML

Word to HTML поддерживает файлы Word (.DOCX и .DOC), файлы PDF, RTF (богатый текстовый формат), файлы Open Doc (из Libre или Open Office) и текстовые файлы .TXT. Если ваш документ содержит изображения, таблицы или другое богатое содержимое, он также будет преобразован для вас в HTML.

При загрузке документа у вас есть три дополнительных параметра:

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

2. Полностраничный режим: Создание автономных файлов HTML? Нет проблем, этот параметр добавляет в HTML теги и. Это необходимо для правильного отображения страницы. Если вы вставляете данные в веб-систему, такую ​​как WordPress, Amazon, eBay и т. Д., Эта опция вам не понадобится.

3. Фиксированный HTML: Если вам нужно, чтобы ваш HTML выглядел точно так же, как ваш входной документ, отметьте эту опцию фиксированного HTML.Но имейте в виду, что фиксированный макет может не очень хорошо смотреться на мобильных устройствах. Это полезно при использовании в качестве отдельной HTML-страницы или при отображении в

Старый код	Новый код
jp	ja
se	sv
fi	fin
iw	000 he