聚合页嵌入指南

简介

嵌入功能为您提供了将活动聚合页、落地页直接嵌入自己营销产品的能力，通过复制微吼提供的活动聚合页、落地页嵌入链接，并按照文档进行参数配置即可实现在小程序、网站内嵌入活动聚合页、落地页，缩短开发周期的同时节省开发成本。

全局嵌入链接设置

控制台设置全局嵌入地址，通过控制台如下地址进行设置：https://e.vhall.com/v3/cms/embed-setting/link

如果没有此权限，则需要先联系微吼运营人员开通对应权限

嵌入域名解析及泛域名证书提供

由于嵌入页在不同的顶级域名下 cookie 等信息无法正常设置和读取，所以需要提供两个嵌入使用的三级域名及一个三级泛域名证书
假如您的域名为：aa.com，则可将 event.dep.aa.com 和 live.dep.aa.com 两个域名 CNAME 到 dep.vhall.com，同时将 *.dep.aa.com 证书提供给我们

嵌入集成链接

链接获取方式：

在「微吼活动平台」中复制对应站点的嵌入链接

嵌入链接示例：

https://{embed_domain}/proxy?dep_params={dep_params}&p_source_type=1&sign_type=0&signed_at={signed_at}&app_key={app_key}&third_user_id={third_user_id}&sign={sign}

URL 参数

参数	是否必须	含义
dep_params	是	从官网地址栏获取后，始终透传值给 iframe 链接如果您的地址栏有此参数，在加载 iframe 的时候一定要透传此值在控制台复制分享链接、用户在站点跳转单场大会等场景都会有此参数
p_source	否	嵌入场景标识区分 1: pc 网页 2: h5 网页 3: 微信小程序 4:app 客户端
third_user_id	否	三方用户 id 登录态时必传；未登录时，不传需要先通过「创建三方用户「站点专用」」进行创建
app_key	否	应用 key 登录态时，使用 third_user_id 接入时，必传；未登录时，不传
sign_type	否	签名方式：0 - md5（默认）、1 - RSA 登录态时，使用 third_user_id 接入时，必传；未登录时，不传
signed_at	否	签名时间戳，签名时间在一天以内登录态时，使用 third_user_id 接入时，必传；未登录时，不传
sign	否	签名算法，可查看：签名机制不同的地方是，此处业务参数只有 third_user_id 参与签名，公共参数相同，签名操作要在服务端进行，前端签名会有暴露密钥风险每次刷新页面的时候一定要重新计算签名，因为签名是有时效的，时效一天
p_source_type	是	是否外部处理外链跳转 1: post meesage 外部处理，内部不跳转值为 1 时，第三方控制链接跳转，嵌入页内部不进行跳转，会向顶级页面发送 vhOpenHerf post Message 通知外部处理；不传或其他值，嵌入页默认处理，内部跳转，同时发送 vhOpenHerf post Message
logged_out	否	退出后，必须拼接 logged_out=1, 通知嵌入页内部退出。不能与 sign_type、sign、third_user_id、sign_at、app_key 参数同时存在

dep_params 的创建方式：

示例：
let query = dep_id=${站点ID}&dep_type=${dep_type}&channel=${渠道}

dep_params=${encodeURIComponent(query)}

部分信息：

dep_type 枚举：
1 // 直播间
4 // 单场大会
5 // 系列会
6 // 聚合主站

dep_id 集成的站点 ID：后台站点分享中的数字 ID

集成后页面结构示意图

注：页头为三方的页面，站点页面内容为微吼的嵌入页内容，页脚可以没有，如果必须有页脚则需要提供单独的页脚页面以嵌入的方式集成到微吼的页面中，具体集成方式请查看文档中的《第三方页脚集成》部分，切记不可页眉页脚作为容器，仅将微吼嵌入页集成到中间部分，会存在兼容问题

使用 iframe 加载嵌入页-登录状态接入流程

流程图

登录态嵌入代码示例

注意事项

（1）是否已创建微吼用户的判断，可在请求创建微吼用户接口成功之后自己保存已创建的状态，或者请求微吼（获取用户）接口进行判断，返回结果 code=200 且 user_id>0 为已创建

（2）iframe 地址参数避免拼接重复字段，避免嵌入页无法登录的情况。

（3）当容器页面刷新时，需要更新 third_user_id、sign、sign_type、sign_at、app_key 的值，避免出现 sign 过期失效的情况。

使用 iframe 加载嵌入页-游客接入流程

游客嵌入代码示例

使用 iframe 加载嵌入页-退出登录接入流程

业务场景：

用户在您官网退出登录以后需要将退出登录的状态同步到 iframe 里，聚合站点同步退出登录状态

流程图

退出登录嵌入代码示例

第三方监听 vhOpenHref 处理流程

业务场景：

（1）用户在聚合站点内添加单场大会、系列会、网络研讨会时，微吼会抛出 postmessage 消息到外层，由外层接收消息进行跳转处理

（2）链接跳转第三方，如聚合站点配置图片外链，跳转至https://www.baidu.com, 同样需要外层来进行跳转（注：由于有的三方链接不支持嵌入页打开，所以此场景请不要使用 iframe 嵌入方式打开）

流程图：

字段描述：

参数	格式	含义
type	string	vhOpenHref，消息类型
data	string	跳转地址 url 例如：https://webinar.aa.com/webinar?dep_params=dep_id%3D77620%26dep_type%3D4%26channel%3Dmain
dataType	string	thirdLink: 第三方外链，如https://www.baidu.com webinar-embed: 网络研讨会嵌入页 page-embed: 单场大会 series-embed:系列会
id	number	站点 id

注意事项

iframe 地址参数避免拼接重复字段，避免嵌入页无法登录的情况。

当容器页面刷新时，需要更新 third_user_id、sign、sign_type、sign_at、app_key 的值，避免出现 sign 过期失效的情况

代码示例

第三方监听 vhThirdLogin 处理流程

业务场景：

用户在嵌入页进行登录时不会调用微吼的登录功能，而是抛出 postMessage 消息给外层，由外层弹出登录框或者加载登录页面进行登录，登录后将用户身份 third_user_id 以及签名参数拼接在 iframe 链接中，重新加载嵌入页

流程图

代码示例

第三方页脚集成

描述：页脚由三方进行开发，微吼嵌入到聚合站点或者单场大会、网络研讨会等页面内，需要集成到哪个页面则可在微吼控制台进行配置
控制台配置字段描述

参数	格式	含义
iframe 链接	string	必填，https://开头的第三方页脚页面地址

样式链接	string	必填，https://开头的 iframe 容器样式地址样式内容需根据 iframe 容器 class（比如.third-footer-container）进行设置，一般只需设置 iframe 的高度接口，详细参考后面的【示例代码】
class 名称	string	非必填，iframe 容器 class，默认 PC 端 pc 端： third-footer-container pc 中文落地页：third-footer-container pc zh 英文落地页： third-footer-container pc en wap 端： third-footer-container wap 中文落地页：third-footer-container wap zh 英文落地页： third-footer-container wap en

流程图

示例代码

iframe 链接：https://cnstatic01.e.vhall.com/common-static/saas-web-cms/scnet/footer/index.html

样式链接：https://cnstatic01.e.vhall.com/common-static/saas-web-cms/scnet/footer/index.css

class 名称：third-footer-container

控制台配置页脚示意图

聚合站点配置页脚：聚合站点->底部配置->自定义样式页脚
size:600,1000

单场大会及系列会配置页脚：单场大会｜系列会->底部配置->自定义样式页脚
size:600,1000

网络研讨会配置页脚：直播管理->直播详情->直播详情->全局嵌入链接，点击设置页脚
size:600,1000

简介#

全局嵌入链接设置#

嵌入域名解析及泛域名证书提供#

嵌入集成链接#

链接获取方式：#

嵌入链接示例：#

URL 参数#

集成后页面结构示意图#

使用 iframe 加载嵌入页-登录状态接入流程#

流程图#

登录态嵌入代码示例#

注意事项#

使用 iframe 加载嵌入页-游客接入流程#

游客嵌入代码示例#

使用 iframe 加载嵌入页-退出登录接入流程#

业务场景：#

流程图#

退出登录嵌入代码示例#

第三方监听 vhOpenHref 处理流程#

业务场景：#

流程图：#

字段描述：#

注意事项#

代码示例#

第三方监听 vhThirdLogin 处理流程#

业务场景：#

流程图#

代码示例#

第三方页脚集成#

流程图#

示例代码#

控制台配置页脚示意图#

简介

全局嵌入链接设置

嵌入域名解析及泛域名证书提供

嵌入集成链接

链接获取方式：

嵌入链接示例：

URL 参数

集成后页面结构示意图

使用 iframe 加载嵌入页-登录状态接入流程

流程图

登录态嵌入代码示例

注意事项

使用 iframe 加载嵌入页-游客接入流程

游客嵌入代码示例

使用 iframe 加载嵌入页-退出登录接入流程

业务场景：

流程图

退出登录嵌入代码示例

第三方监听 vhOpenHref 处理流程

业务场景：

流程图：

字段描述：

注意事项

代码示例

第三方监听 vhThirdLogin 处理流程

业务场景：

流程图

代码示例

第三方页脚集成

流程图

示例代码

控制台配置页脚示意图