跳到主要内容

Web页面嵌入能力说明

使用场景

腾讯电子签支持开发者将部分核心前端页面集成到自己的系统中,可以通过iframe嵌入的方式,解决前端的复杂问题,从而大大提高集成效率。

支持的集成页面

常规页面创建模板
编辑模板
预览模板
创建印章
印章列表
印章详情
预览合同
合同详情页
企业拓展服务配置页面
发起合同页面通过模板发起合同

主题风格配置

API链接

创建页面主题配置

能力说明

通过此接口,可以配置Web页面嵌入时,页面中的个性化配置,包括主题色,及是否显示Logo。

接口能力说明

获取常规模块web页面(模板、印章、拓展服务)

API链接

获取常规模块web页面

接口能力说明

通过此接口可获取创建印章、企业拓展服务配置等常规页面。EmbedType参数是WEB嵌入资源类型,根据不同的取值获取Web页面嵌入的链接。

页面名称参数值资源ID
创建模板CREATE_TEMPLATE
编辑模板MODIFY_TEMPLATE模板ID
预览模板PREVIEW_TEMPLATE模板ID
创建印章CREATE_SEAL
印章列表页PREVIEW_SEAL_LIST
印章详情页PREVIEW_SEAL_DETAIL印章ID
预览合同PREVIEW_FLOW合同flowID
合同详情页PREVIEW_FLOW_DETAIL合同flowID
企业拓展服务配置页EXTEND_SERVICE

获取企业签署合同web页面

API链接

获取发起合同web页面

接口能力说明

通过此接口指定一个模板,获取发起合同的web页面。支持在页面上手动编辑签署方信息、补充合同内容,也可以通过接口传参的方式快速填充。

一些个性化配置:

  1. 隐藏添加签署人步骤:若您系统中已经获取了签署人信息,可接口传参给电子签,且隐藏该步骤。
  2. 支持控制是否允许编辑签署方信息:若您系统中已经获取了签署人信息,可接口传参给电子签,仅在电子签页面展示签署人信息,不允许编辑。
  3. 控制是否允许修改发起方的控件内容:若您系统中已经规范保存了发起合同签需要补充的内容,不允许发起人在电子签上二次修改,可设置控件禁用。
  4. 发起前审批:支持控制是否提交待审批的合同,审核通过后触发合同发起。
  5. 签署前审批:支持控制本企业签署方,签署前是否需要审批,审批通过后方可签署合同。

详细能力参见接口文档。

页面示例

创建模板/编辑模板

预览模板

预览合同

合同详情

企业拓展服务

创建印章

印章列表

印章详情

获取发起合同web页面

iframe嵌入前端代码示例

以获取创建模板(CREATE_TEMPLATE)页面的场景为例。以下为React组件的封装方法,可供参考。

// 以获取模板的方法举例
export default function CreateTemplate() {
const [srcUrl, setSrcUrl] = useState('');
const [loading, setLoading] = useState(true);

const getCreateTemplateUrl = async () => {
setLoading(true);
// getWebUrl内部封装,ChannelCreateEmbedWebUrl
const res = await getWebUrl({
EmbedType: 'CREATE_TEMPLATE',
});
setLoading(false);
setSrcUrl(res?.data?.data?.WebUrl || '');
};

useEffect(() => {
getCreateTemplateUrl();
}, []);

return (
<div className="demo-wrapper">
{loading ? <div class="loading"></div> : <iframe src={srcUrl}></iframe>}
</div>
);
}

Web端消息接口

腾讯电子签在嵌入的页面中,提供了对外暴露的消息接口,用于在iframe集成的时候,实现内外数据通信。消息通讯的机制,适用于一些业务数据的传递,以及对页面事件的监控。

开发者在使用iframe集成腾讯电子签页面后,可以在自己的系统页面内,使用addEventListener注册事件监听器。即可接收到腾讯电子签的前端页面推送的消息。

目前已支持的消息类型如下:

消息类型描述页面范围
NOT_LOGIN页面未登录或者登录态失效时触发所有页面

以下为React组件的封装方法,可供参考

import React, { useRef } from 'react';

const Iframe = ({ src }) => {
const iframeRef = useRef();

useEffect(() => {
const handler = (evt) => {
// 通过messageType判断场景类型
// 通过origin判断消息来源于电子签域名
if (evt.data.messageType === 'NOT_LOGIN' && evt.origin === 'embed.qian.tencent.com') {
// 处理你的业务逻辑
}
};
window.addEventListener('message', handler); // 绑定消息的监听
return () => {
// 注意要记得解绑
window.removeEventListener('message', handler);
};
}, []);

return <iframe ref={iframeRef} src={src}></iframe>;
};

export default Iframe;