开放平台
首页平台概述
开发者
  • API文档
  • SDK
产品功能
  • 新手入门
  • 产品功能
常见问题
首页平台概述
开发者
  • API文档
  • SDK
产品功能
  • 新手入门
  • 产品功能
常见问题
  1. 聚合站点嵌入指南
  • 平台概述
  • 接入指南
    • 业务流程
    • 接入指南
    • 基础概念说明
    • 开通账号/权限
    • 平台兼容性说明
    • 快直播OBS推流配置建议
    • 视频直播OBS推流配置建议
  • 直播观看嵌入指南
    • 产品介绍
    • 嵌入说明
    • 嵌入示例
    • 嵌入页消息推送
    • 嵌入微信小程序
    • 嵌入模式支付对接
    • 嵌入页第三方K值验证
  • 直播管理嵌入指南
    • 产品介绍
    • 嵌入说明
    • 嵌入示例
  • 聚合站点嵌入指南
    • 聚合页嵌入指南
    • 小程序嵌入指南
    • 创建三方用户「站点专用」
    • 更新三方用户「站点专用」
  • 相关协议
    • 微吼直播 SDK 隐私政策
    • 微吼直播 SDK 开发者使用规范
  1. 聚合站点嵌入指南

聚合页嵌入指南

简介#

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

嵌入域名设置#

全局嵌入链接设置#

控制台设置全局嵌入地址,通过控制台如下地址进行设置: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 嵌入方式打开)

流程图:#

流程图

字段描述:#

参数格式含义
typestringvhOpenHref,消息类型
datastring跳转地址 url
例如:https://webinar.aa.com/webinar?dep_params=dep_id%3D77620%26dep_type%3D4%26channel%3Dmain
dataTypestringthirdLink: 第三方外链,如https://www.baidu.com
webinar-embed: 网络研讨会嵌入页
page-embed: 单场大会
series-embed:系列会
idnumber站点 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

流程图#

size:800,1000

示例代码#

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
size:600,1000
因 小程序网页嵌入,是我司 增值服务功能。
如需开通请跟商务联系。微信小程序中使用直播、视频播放能力需要申请“网络文化经营许可证”,并配置到小程序后台中;
如没有该许可证,提交代码时有概率被腾讯审核拦截无法更新代码。详情参见 小程序嵌入指南
修改于 2025-06-10 01:36:33
上一页
嵌入示例
下一页
小程序嵌入指南
Built with