7

我正在 SendGrid 中创建一个模板，我试图将一个图像放在中心，以及我想成为一个标签的 URL，以便我可以在我的代码中动态替换，因为它将来自我的数据库。

我试图简单地在输入字段中放置一个标签，但它不接受。有没有办法我可以做到这一点？

谢谢！

4

3 回答 3

9

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

我目前也在尝试使用 SendGrid 构建事务性电子邮件模板，并且我设法做到了这一点。

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

添加图像

然后上传一张图片。上传图片后，双击图片元素。获取图像文件的名称并复制它。

图像文件

切换到代码视图。

代码视图

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

替换代码

将此代码替换为您的“替代标签”。

替换标签

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

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

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

电子邮件结果

我把上面的一些敏感内容模糊掉了。这是我的电子邮件结果。希望这可以帮助！

于 2016-12-29T10:21:06.027 回答
6

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

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

我找到了一个替代方案，虽然有点麻烦，但可以提供预期的结果。

按照这组说明在“所见即所得”模板编辑器中将动态值插入到img标签的src属性中：

  1. 创建一个新的设计编辑器模板（它允许您在添加该模板的第一个版本后选择它）。
  2. 设计您的电子邮件 - 添加文本、图像等等。
  3. 选择一个图像项框（您稍后要注入 SRC URL 的那个），然后单击查看代码图标以查看背后的代码（代码隐藏按钮）。
  4. 复制当前存在的 URL 值（我假设您选择了一个临时图像只是为了在步骤 2 中对您的电子邮件进行样式化），然后关闭此对话框而不进行任何更改。
  5. 转到左侧Build侧边栏的Import/Export部分（向下），然后单击 Export HTML。保存文件并在文本编辑器中打开它。
  6. 搜索您在步骤 (4) 中复制的 URL，并将其替换为您选择的动态变量（例如：{{my_dynamic_logo_url}}）。
  7. 复制整个文件内容（在上一步中进行更改之后），然后返回到 Sendgrid 编辑器，然后单击步骤 (5)中相同导入/导出部分中的导入按钮。
  8. 将文件内容粘贴到那里，然后单击确定。它看起来都一样（也许只有图像本身会消失，但没关系 - 相信我。现在保存您的模板。
  9. 瞧 - 通过 API 发送您的电子邮件，同时将所需的 URL 注入 {{my_dynamic_logo_url}} - 您现在应该能够看到显示在收到的电子邮件上的动态图像。
  10. 在这里做一个很好的第 10 轮：P
    附加图像可以帮助完成这个过程
于 2019-03-19T10:29:47.337 回答
1

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

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

于 2020-04-28T22:51:45.770 回答