我可以在SendGrid模板中使用替换标记的图像吗?

时间:2016-12-16 02:42:54

标签: express sendgrid sendgrid-templates

我在SendGrid中创建了一个模板,我试图将图像放在中心,而我希望将URL作为标记,以便我可以在代码中动态替换,因为它将来自我的数据库。

我试图在输入字段中放置一个标记,但它并不接受。 有没有办法可以实现这个目标?

谢谢!

3 个答案:

答案 0 :(得分:6)

我假设您已经设法通过Node.js触发SendGrid API,因为您使用Express标记标记了问题。

我目前正在尝试使用SendGrid构建交易电子邮件模板,我设法完成了这项工作。

您可能希望首先使用构建器添加新的图像元素。

add an image

然后上传图片。上传图像后,双击图像元素。抓取图像文件的名称并复制它。

image file

切换到代码视图。

code view

在代码视图中,找到包含图像文件名称的html标记。这是我案例中的一个例子。

code to replace

将此代码替换为“替换标记”。

substitution tag

保存模板。您的模板应该可以使用了。在Node.js代码中,设置替换标记。

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

我使用了这个库:https://github.com/sendgrid/sendgrid-nodejs希望您的电子邮件中包含新图片。

email result

我模糊了上面的一些敏感内容。这是我的电子邮件结果。希望这有帮助!

答案 1 :(得分:1)

许多人注意到,在最初创建电子邮件模板后,Sendgrid已将在“基于代码的”编辑器与“设计所见即所得”编辑器之间切换的功能更改了,从而使Nicholas的答案无关紧要(对不起)。必须在创建点进行选择,然后将其保留为该类型的编辑器模式。

我假设你们中的许多人(我知道我愿意!)希望保留对电子邮件进行可视化编辑的能力(允许设计师和文案作者在不打扰开发人员更改的情况下完成工作),同时又不放弃关于Sendgrid的动态电子邮件提供的定制好东西。

我发现了一种替代方法,尽管有点麻烦,但可以达到预期的结果。

按照以下说明在“所见即所得”模板编辑器中的 img 标签的 src 属性中插入动态值:

  1. 创建一个新的 Design Editor 模板(添加该模板的第一个版本后,您就可以选择它)。
  2. 设计您的电子邮件-添加文本,图片和其他内容。
  3. 选择一个图像项目框(您想在以后插入SRC URL的框),然后单击查看代码图标以查看(code-behind button)后面的代码。
  4. 复制当前存在的URL值(假设您选择了一个临时图像只是为了在第2步上设置电子邮件的样式),然后关闭此对话框而不进行任何更改。
  5. 转到左侧 Build 侧栏(位于此处)中的 Import / Export 部分,然后单击“导出HTML”。保存文件并在文本编辑器中将其打开。
  6. 搜索您在步骤(4)中复制的URL,并将其替换为您选择的动态变量(例如:{{my_dynamic_logo_url}})。
  7. 复制整个文件的内容(在上一步中进行更改之后),然后返回到Sendgrid编辑器,并在同一 Import / Export 中单击 Import 按钮。 em>步骤(5)中的部分。
  8. 在其中粘贴文件内容,然后单击“确定”。看起来会一样(也许只是图像本身会消失,但是没关系-相信我。立即保存模板。
  9. Voila-通过API发送电子邮件,同时将所需的URL注入{{my_dynamic_logo_url}}-您现在应该能够看到接收到的电子邮件上显示的动态图像。
  10. 只要在这里成为第10圈就好:P
    Attaching image that can help with the process

答案 2 :(得分:0)

如果对使用新的动态交易电子邮件模板的任何人有帮助,这对我很有用。我从构建屏幕添加了空白图像。然后单击图标以显示该图像的原始HTML代码。我只是简单地使用handlebars语法将适当的属性添加到“ src”属性。不需要其他更改。

例如:src="{{ imageURI }}""