Могу ли я иметь изображение с тегом замещения в шаблоне SendGrid?

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

Я попытался просто поместить тег в поле ввода, но он не принимает это. Есть ли способ, которым я могу сделать это?

Спасибо!

Источник

1 ответ

Решение

Я предполагаю, что вам удалось запустить API SendGrid через Node.js, поскольку вы помечаете вопрос с помощью тега Express.

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

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

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

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

файл изображения

Переключитесь на представление кода.

представление кода

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

код для замены

Замените этот код на ваш "тег замены".

тег замены

Сохраните шаблон. Ваш шаблон должен быть готов к использованию. В вашем коде Node.js установите тег замены.

mail.personalizations[0].addSubstitution(new helper.Substitution("your-subtitution-tag", "image-url"));

Я использовал эту библиотеку: https://github.com/sendgrid/sendgrid-nodejs Надеюсь, ваше письмо должно содержать новое изображение.

результат по электронной почте

Я размыл некоторое чувствительное содержание выше. Это результат электронной почты с моей стороны. Надеюсь это поможет!

Источник

Поэтому, как многие заметили, Sendgrid изменил возможность переключения между редактором "на основе кода" на редактор "design WYSIWYG" после того, как шаблон электронной почты был изначально создан, что делает ответ Николаса неуместным (извините, приятель). Нужно выбрать в точке создания, а затем он придерживается как этот тип режима редактора.

Я предполагаю, что многие из вас (я знаю, что знаю!) Хотели бы сохранить возможность иметь визуальный редактор ваших электронных писем (позволяющий дизайнерам и авторам копий выполнять свою работу, не мешая разработчикам вносить изменения), не отказываясь от настройки. Goodies Динамическое предложение электронной почты Sendgrid.

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

Следуйте этому набору инструкций, чтобы вставить динамическое значение в атрибут src тегов img в редакторе шаблонов "wysiwyg":

  1. Создайте новый шаблон редактора дизайна (он позволит вам выбрать его после добавления первой версии этого шаблона).
  2. Создайте свою электронную почту - добавляйте тексты, изображения, а что нет.
  3. Выберите поле элемента изображения (то, которое вы хотите внедрить позже в URL-адрес SRC) и нажмите на значок кода представления, чтобы увидеть код позади ( кнопка с выделенным кодом).
  4. Скопируйте в сторону значение URL, которое в данный момент существует (я предполагаю, что вы выбрали временное изображение просто для стилизации вашего электронного письма на шаге 2), а затем закройте это диалоговое окно, не внося никаких изменений.
  5. Перейдите в раздел " Импорт / экспорт " на левой боковой панели " Построить" (внизу), затем нажмите "Экспорт HTML". Сохраните файл и откройте его в текстовом редакторе.
  6. Найдите URL-адрес, скопированный на шаге (4), и замените его динамической переменной по вашему выбору (пример: {{my_dynamic_logo_url}}).
  7. Скопируйте все содержимое файла (после изменений на предыдущем шаге), затем вернитесь в редактор Sendgrid и нажмите кнопку " Импорт" в том же разделе " Импорт / экспорт " из шага (5).
  8. Вставьте туда содержимое файла и нажмите Ok. Он будет выглядеть одинаково (возможно, исчезнет только само изображение, но все в порядке - поверьте мне. Сохраните ваш шаблон сейчас.
  9. Вуаля - отправьте свою электронную почту через API, вставляя нужный URL-адрес {{my_dynamic_logo_url}} - теперь вы сможете увидеть это динамическое изображение, отображаемое в полученном электронном письме.
  10. Просто сделайте хороший 10-й раунд здесь:P
    Прикрепление изображения, которое может помочь с процессом
Источник

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

Например: src="{{ imageURI }}""

Источник
Другие вопросы по тегам