图片通知场景 - 简道云

图片通知场景

1. 简介

1.1 场景简介

图片通知场景是指通过设置邮件正文类型为 html ，并根据企业需求编写对应的代码从而自定义通知内容中的标题、图片、表格等，从而将业务相关信息发送给指定邮箱。

1.2 应用场景

图片通知场景适用于有特定样式要求的通知类消息中，如物流发货通知、产品推荐通知、中奖通知等等。

1.3 预期效果

以中奖信息通知为例，活动负责人提交中奖人邮箱及中奖内容后，中奖人即可收到对应的中奖通知。效果如下所示：

2. 插件安装及启用

2.1 安装插件

1）直接安装

您可点击右方链接直接安装插件：自定义邮件通知插件安装。
安装成功后，可参考本文【3.2 启用插件】，前往「开放平台 >> 插件管理」处启用插件。

2）插件市场处安装

在简道云「插件市场」处，安装「自定义邮件通知」插件。插件市场处安装方法可参见文档：插件市场中【2.3 插件安装】。

2.2 启用插件

在插件管理中，打开「邮件通知」插件右侧开关，启用插件。

3. 表单搭建

插件使用体验可先安装：自定义邮件通知插件模板表单。本文将按照示例表单进行讲解。

新建「中奖信息通知」表单，用于活动负责人填写中奖信息，字段设置如下所示：

字段名称	字段类型
中奖人邮箱	单行文本
奖品图片	图片

4. 智能助手配置

4.1 添加智能助手

设计完表单后，在「扩展功能 >> 智能助手」处点击「新建智能助手」，并修改智能助手名称为「中奖信息邮件通知」，触发方式选择「表单触发 >> 中奖信息通知」。

4.2 设置触发动作

由于当活动负责人提交中奖人员信息时触发智能助手，故「触发动作」选择「新增数据」。

4.3 插件节点设置

添加插件节点，且插件节点设置如下：

执行插件：选择「自定义邮件通知」插件；
收件人邮箱地址：设置为「字段值」，即「触发数据—邮箱」字段；
邮件主题：设置为「自定义」，根据邮件内容自定义主题名称，如帆软吉祥物申领结果通知
邮件正文类型：设置为「自定义」，选择「html」；
邮件内容：设置为「自定义」，根据企业需求自定义邮件代码；
正文图片：设置为「字段值」，即「触发数据—奖品图片」；
发件人邮箱地址：设置为「自定义」，填写发件人的邮箱；
发件人姓名：设置为「自定义」，如杨乐多；
授权码：设置为「自定义」，输入自定义邮件通知【2.1 开启服务并获取授权码】中，获取到的授权码；
自定义 SMTP 协议发送方式：设置为「自定义」，默认为「自动选择」。

注：如需设置附件字段，则附件大小不超过 20 M。

4.4 效果演示

效果参见本文【1.3 预期效果】。

5. 注意事项

5.1 IP白名单

如果您的 SMTP 服务器允许外部访问但需要 IP 地址加白名单，请设置白名单IP为：47.97.99.12.

5.2 服务器地址及端口

配置服务器地址及端口时，配置如下所示的任一端口即可：

系统默认端口：提供 465 和 587 两个端口；
自定义服务器端口：若使用的邮箱不属于系统默认端口支持的邮箱类型，则需要前往对应邮箱的后台设置处，查询邮箱对应的服务器地址及端口号。详细查找方法可参见自定义邮件通知【2.3 获取服务器地址和端口】。

不同邮箱类型的 SMTP 服务器地址，及支持的端口如下所示：

邮箱类型	SMTP 服务器地址	端口465	端口587
163 邮箱	smtp.163.com	支持	不支持
126 邮箱	smtp.126.com	支持	不支持
新浪邮箱	smtp.sina.com smtp.sina.cn	支持	支持
QQ 邮箱	smtp.qq.com	支持	不支持
微软outlook邮箱	smtp-mail.outlook.com	——	支持

5.3 发送方式说明

由于发送加密方式，是邮箱服务商提供的，故应当匹配邮件服务商支持的加密方式，如下所示：

发送方式	说明
自动选择	端口为 465 时，按照 SSL 加密方式发送端口为587和994时，按照 STARTLSA 加密方式发送其他情况，按照 SSL 加密方式发送
SSL 加密	使用 smtp 的 ssl 全程加密方式
STARTLS 加密	使用 smtp 的 hello 后，通过 starttls 命令开启加密
强制不加密	使用普通 TCP 流发送，不进行任何加密处理

5.4 代码示例

在设置自定义邮件内容时，需编写对应的 html 代码，您可根据自己需求自行编写代码，也可直接使用官方提供的代码，代码示例如下：

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>
            中奖信息通知
        </title>
        <!--通常不在这里写样式，除非是非常通用的或邮件客户端特定的样式--></head>
    <body style="margin: 0; padding: 0; min-width: 100%!important;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #f8f8f8;">
            <tr>
                <td align="center" valign="top">
                    <table width="600" border="0" cellspacing="0" cellpadding="20" style="width: 100%; max-width: 600px; margin: 0 auto; background-color: #ffffff;">
                        <tr>
                            <td style="padding: 10px 0; text-align: center; color: #333; font-size: 24px; font-family: Arial, sans-serif;">
                                恭喜您中奖啦
                            </td>
                        </tr>
                        <tr>
                            <td style="font-family: Arial, sans-serif; color: #666; line-height: 1.6;">
                                <p>
                                    感谢您参与我们的活动，恭喜您获得简道云赠送的活动奖品。
                                </p>
                                <p>
                                    请查看以下奖品详情：
                                </p>
                                <table border="1" style="width: 100%; border-collapse: collapse; margin: 20px 0;">
                                    <tr>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">
                                            奖品示例
                                        </th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">
                                            奖品名称
                                        </th>
                                        <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">
                                            价格
                                        </th>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">
                                            <img src="cid:image1" alt="帆哥公仔" style="max-width: 100px; height: auto;"></td>
                                        <td style="padding: 8px; border: 1px solid #ddd; text-align: left;">
                                            帆哥公仔
                                        </td>
                                        <td style="padding: 8px; border: 1px solid #ddd; text-align: left;">
                                            $19.99
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 8px; border: 1px solid #ddd; text-align: center;">
                                            <img src="cid:image2" alt="简道云鼠标垫" style="max-width: 100px; height: auto;"></td>
                                        <td style="padding: 8px; border: 1px solid #ddd; text-align: left;">
                                            简道云鼠标垫
                                        </td>
                                        <td style="padding: 8px; border: 1px solid #ddd; text-align: left;">
                                            $29.99
                                        </td>
                                    </tr>
                                    <!--更多的活动行...--></table>
                                <a href="https://www.jiandaoyun.com" style="display: inline-block; padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; font-size: 16px; border-radius: 5px;">
                                    访问我们的网站了解更多活动
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-size: 12px; color: #999; padding: 10px 0;">
                                版权所有©2024示例公司
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
 
</html>