1 什么是SDK嵌入方案

SDK嵌入方案可以将集简云的产品功能嵌入到您自己的产品内，为您的用户提供集简云的功能。用户体系通过接口打通，用户无需注册或者登录集简云使用。

示例：集简云SDK嵌入到WordPress中：

2 SDK嵌入方案的功能

快速在您的现有产品中增加集简云相关功能

用户体系打通，用户无需注册和登录集简云账户

自定义页面样式，包括应用列表选择，文案，样式，应用模板个性化展现等

自定义产品版本，可以制定个性化产品版本和价格进行售卖，增加您的产品收入

客户管理后台，您可以查看您客户的流程使用量等数据，进行调整客户的版本等多种操作

3 SDK嵌入方案的使用步骤：

3.1 申请SDK嵌入方案权限

SDK嵌入方案的API权限需要单独进行申请，请提交申请单，或者直接扫码下方二维码与我们联系：

申请开通后我们的工作人员提供技术支持。

3.2 使用流程

SDK嵌入提供了简单的方式，嵌入方仅需要在前端引用 jijyunConnect 即可使用

3.2.1 安装SDK

# 通过 npm
npm install jijyun-js-sdk

# 通过 yarn
yarn add jijyun-js-sdk

3.2.2 初始化iframe

const { jijyunConnect } = window.JijyunJSSDK

jijyunConnect({
  secret:'企业密匙',//从集简云开发者平台获取
  corp_id:'企业ID',//从集简云开发者平台获取
  //company_name:'注册企业名称',
  company_identification:'企业标识',
  //user_name:'注册企业用户名',
  user_identify:'用户识别码',//用户唯一识别码ID
  //user_mobile:'手机号码',
  //user_email:'邮箱',
  //user_isAdmin:'是否为管理员',//1：管理员，其他为否
  cfg_id:'页面配置',//页面配置
  //domain:'安全域名',//您的域名白名单，可省略
  src: '集简云sdk地址',
  pageType:'data-pipeline',//pipeline-template（流程模板）、data-pipeline（数据流程）、data-log（流程日志）、app-manage（应用管理）
  container: document.querySelector('#jijyun_file') // iframe 挂载的目标容器元素
}).then((jijyunSDK) => {
  // ...
})

使用传统的 <script> 的方式加载：

3.2.3 使用示例

const { jijyunConnect, pageType, getCorpToken, regCompany } = window.JijyunJSSDK
// pageType：pipeline-template（流程模板）、data-pipeline（数据流程）、data-log（流程日志）、app-manage（应用管理）、template-edit（通过模板创建流程）、pipeline-edit（通过流程id更新流程）
// getCorpToken(secret:string, corp_id:string, domain:string) 
// getCorpToken获取corp_token，可以在自己的后台请求接口（https://developer.jijyun.cn/api/sdk/corp_token）
// 或者前端请求获取getCorpToken得到corp_token，也可以从localStorage中获取（ localStorage.getItem('sdkCorptoken')）
// 执行注册企业
// regCompany(params) 函数是注册企业（需要corp_token）
// 也可以在自己的后台请求接口（https://developer.jijyun.cn/api/sdk/create_company），注册自己的企业
async function initJijyunSDK(){
  try {
    jijyunConnect({
      secret:'企业密匙',
      corp_id:'企业ID',
      company_identification:'企业标识',
      user_identify:'用户识别码',
      cfg_id:'页面配置',
      src: '集简云sdk地址',
      pageType:'pipeline-template',
      container: document.querySelector('#jijyun_file')
    }).then((jijyunSDK) => {
      console.log("jijyunSDK",jijyunSDK)
    })
  }catch(e) {
      console.log(e)
  }
}   
initJijyunSDK()

如果出现下面图片之一，说明已经注册并新建完成，您可以在系统中新建流程了

4 SDK后端接口

除了通过SDK展现页面以外，我们还提供了多个后端接口，可以提供用户付费版本产品开通，新增用户信息/权限，修改用户信息权限，修改用户付费版本等功能，请查看：SDK嵌入接口文档

4.1 使用SDK嵌入方案为模板传入动态数据

自定义变量功能不仅可以用于在流程中插入您定义好的特殊变量，也可以结合SDK嵌入方案在利用模板创建流程时，对流程中的特定变量进行同时赋值，达到动态定义字段值的效果。

示例：流程模板中有一个变量 “审批单编码”，不同的用户会根据嵌入方的要求使用不同的审批单编码，在嵌入方使用SDK嵌入功能调起流程模板时，就可以根据不同情况向模板传入不同的”审批单编码“，来达到为不同用户创建参数不同的流程的目的。

运行逻辑

具体使用的逻辑为：

1. 首先在变量管理功能中定义好您需要在流程中使用的变量
2. 在流程编辑中插入您定义好的变量
3. 将流程分享为模板，并通知集简云相关人员为您将模板转换为“简化流程模板”，并获得模板id。
4. 将集简云SDK嵌入到您的系统功能中
5. 当使用SDK调起模板时，同时将您定义的变量key和变量值传入到模板中。
6. 用户操作配置模板，使用传值功能配置的值客户无需配置（自动隐藏）。
7. 客户保存模板，调用SDK将客户配置的模板创建为自动化流程。
8. 流程开始自动运行。

配置方法

创建变量

首先，您需要在集简云[变量管理]功能中创建变量，如上图。

使用变量

变量创建完成后，您就可以在流程编辑中的字段配置里使用到您创建的变量，在为字段插入数据时选择[系统变量]-[自定义变量]-[您定义的变量名称]展开即可看到您定义的变量。

使用变量并保存流程后，您需要将当前流程分享为模板，分享为模板，模板生成后，您需要联系集简云相关人员，将您当前的流程模板转换为“简化版”以适用SDK的调用。

简化版模板的展示效果

通过SDK传入变量的值

模板生成为简化版之后，您就可以通过嵌入集简云前端SDK的方式调起模板，并且通过传值来定义模板中的指定变量的值，使模板生成的自动化流程使用您定义的字段值。

调用示例代码：

// 执行sdk
let jijyunSDK=null
async function initJijyunSDK(){
  try {
    jijyunSDK = await jijyunConnect({
      secret:'FDZFhsKTYXF0YpTQupCkhAZzxy4LaIYX',
      corp_id:'Oa7H4PTKfs6aaupAQD12I8GAh7zIlKo7',
      token:'token',// 通过token获取用户信息
      cfg_id:'8ff52200-ebce-11ec-a39c-d787b4a150a8',// 页面配置
      pageType:'template-edit',
      edit_id:'3656',// 模板id，字符串格式
      container: document.querySelector('#jijyun_file')
    })
  }catch(e) {
    console.log(e)
  }
}
initJijyunSDK()

// 开始监听iframe渲染是否完毕
window.addEventListener("message", function (e) {
  let data = e.data
  if (data) {
    try {
      data = JSON.parse(data)

       //iframe加载完毕，loading结束
      if(data.loadSuccess){
        
        //使用模板创建流程，必须指定baseValues，不传的话默认写为{}（空对象）
       const obj = {
                baseValues: {
                  Kingage_data:{//自定义变量的key
                    DingHuoLaiYuan: "SCM",//自定义变量中字段的key和值
                    DingHuo: "LaiYuan",
                    ShangPin_Id: "1620329104853222400",
                    CangKu_id: "1834196808503446528",
                    ZhangTao_id: "1675058640716194501"
                  }
                },
            };
        const jsonStr = JSON.stringify(obj);
        jijyunSDK.element.contentWindow.postMessage(jsonStr, '*');
      }

      //关闭或者保存后返回
      if (data.callback) {
        console.log('callback',data.callback)
        
        jijyunSDK.disconnect()
      }

    } catch (e) {}
  }
})

5 SDK客户管理与产品售卖功能

在嵌入集简云产品后，您可以使用将集简云功能作为您产品的付费功能售卖给您的用户，增加产品收入与客单价。 集简云提供了客户管理和产品（付费版本）管理功能。请查看：客户与产品管理