聊天工作台 iframe 接入

本文档将详细介绍如何在您的网站中嵌入句子「聊天工作台」。

iframe接入

iframe接入的形式，「聊天工作台」将会隐藏左侧菜单和顶部，要将「聊天工作台」相关功能页面嵌入您的网站，请使用iframe标签，并设置src属性为ssoUrl。例如：

<iframe src="https://wechat.juzibot.com/sso/oidc?code=***&redirectPath=***"></iframe>

url参数分为两类: 页面功能相关和sso相关，iframe接入必须使用sso才能登录，sso相关参数可详细参考sso文档

1. 页面功能相关

名称	类型	是否必须	备注
redirectPath	string	是	跳转的页面路径。秒回页面路由规则是/main/:orgId/:groupId/xxx，redirectPath的值是:groupId后的路径， 例如： ‘/chat’对应聚合聊天。注意需encodeURIComponent处理
hideQueryCondition	string	否	true或false，是否隐藏客户分层
onlyShowBroadcastConfig	string	否	true或false，是否隐藏「批量触达-无限制群发-群发设置」
hideConfigTabSideBar	string	否	true或false，是否隐藏「设置-自定义侧边栏」，即将废弃，推荐使用visibleConfigTabs
visibleConfigTabs	string	否	它是一个逗号分割的字符串，控制「设置」菜单下显示的标签页，默认显示全部，标签页对应的值如下: botList: 托管账号列表 groupMember: 小组成员 edit: 编辑 monitorConfig: 报警监测 sideBarConfig: 自定义侧边栏 例如，visibleConfigTabs=botList,groupMember 只显示托管账号列表和小组成员
hideWxkf	string	否	true或false，是否隐藏微信客服(设置-托管账号列表-添加托管账号-微信客服选项)

2. sso相关

• code: string，必填，sso授权code。
• isCreateUser: boolean，可选，是否根据username创建用户。
• username: string，可选，用户名。如果不传或不存在，将不会创建用户。
• corpName: string，可选，企业名。在根据code获取的企业信息不存在时，会根据此名称创建一个企业。如果不传，则不会创建企业。
• isAdmin: boolean，可选，创建用户时是否设为超级管理员。
• client_id: string, 必填，sso client id。

示例代码

const ssoBaseUrl = 'https://wechat.juzibot.com/sso/oidc';  // 注意：私有部署环境请替换为部署的域名
const code = 'your-sso-code';
const redirectPath = encodeURIComponent('/chat');
const isCreateUser = true;
const username = 'your-username';
const corpName = 'your-corp-name';
const isAdmin = true;

const ssoUrl = `${ssoBaseUrl}?code=${code}&redirectPath=${redirectPath}&isCreateUser=${isCreateUser}&username=${username}&corpName=${corpName}&isAdmin=${isAdmin}`;

// 使用ssoUrl作为iframe的src属性值
document.getElementById('your-iframe-id').src = ssoUrl;

iframe接口

iframe接入的形式，页面部分功能(如消息通知时的favicon闪烁)将无法正常使用。内嵌iframe页面使用postMessage提供一系列接口，可通过这些接口控制外层页面的某些功能。

消息通知favicon闪烁

当有符合聚合聊天『消息提醒』通知条件的消息时，内嵌页面会发送通知到外层页面，外层页面可监听此消息，并实现消息通知时的favicon闪烁。

// 内嵌页面处于失焦，并且收到符合『消息提醒』的新消息时 payload = true
// 内嵌页面得到焦点时 payload = false
window.parent.postMessage({ type: "favicon_blink", payload: true }, "*"); 

注意

1. 此接口仅在内嵌页面是新版『聚合聊天』时支持
2. 内嵌页面持续处于聚焦状态时不会有消息通知