呼叫工具条详细说明

 步骤1: 向自己服务器端发起异步请求，获取工具条的`SDK`地址；
 步骤2: 加载SDK并进行初始化设置；
 步骤3: (按需使用) 初始化完成后，进行SDK接口调用；

qiConnect.on({cookieAccessibleChanged: function(data){
    if (data.result) {
        console.log('此时可以获取cookie');
    } else {
        console.log('没有获取cookie权限');
        // 【非常重要】如果已经隐藏了工具条，请务必暂时将工具条置为可见状态，才能点击按钮授权
    }
}});

POST http://qiyukf.com/openapi/ipcc/login?appKey=1c088a89de51d0af457616605f28390f&checksum=f570a5eb049eb803b086e45829b07e48&time=1511832531

curl -X POST \
  '[http://qiyukf.com/openapi/ipcc/login?appKey=1c088a89de51d0af457616605f28390f&checksum=f570a5eb049eb803b086e45829b07e48&time=1511832531](http://qiyukf.com/openapi/ipcc/login?appKey=1c088a89de51d0af457616605f28390f&checksum=f570a5eb049eb803b086e45829b07e48&time=1511832531)' \
  -H 'content-type: application/json;charset=utf-8' \
  -d '{"staffName": "admin"}'

{
    "code": 200,
    "message": "",
    "result": {
        "sdk_url": "[https://xxx.qiyukf.com/toolbar/script/get?token=cb1ec3c43089493eb4039945685ebf51](https://xxx.qiyukf.com/toolbar/script/get?token=cb1ec3c43089493eb4039945685ebf51)",
        "corp_code": "xxx",
        "token": "cb1ec3c43089493eb4039945685ebf51"
    }
}

// 呼叫工具条的加载、销毁、重新加载（代码仅供参考）

// 工具方法-加载script
const loadScript = (options = {}) => new Promise((resolve, reject) => {
  const script = document.createElement('script');
  Object.assign(script, options);
  script.addEventListener('load', () => resolve(script));
  script.addEventListener('error', reject);
  document.body.appendChild(script);
});

class Adaptor {
  // 呼叫工具条加载状态枚举
  static loadStatusMap = {
    0: '未加载',
    1: '加载中',
    2: '加载成功',
    3: '加载失败',
    4: '已销毁',
  }

  constructor() {
    // 初始化属性
    Object.assign(this, {
      script: null, // script元素
      loadStatus: 0 // 工具条加载状态
    });
  }

  // 加载工具条
  async load() {
    const adaptor = this;
    adaptor.loadStatus = 1; // 工具条加载中

    try {
      // login需要自己实现，参考上面的【获取SDK接入地址】
      const { sdk_url } = await login();
      
      // 在页面中插入script标签，src为sdk_url
      // 这个script会在window上添加qiConnect对象，提供一系列API
      adaptor.script = await loadScript({
        async: true,
        src: sdk_url
      });
      
      if(!window.qiConnect.CODE) {
        // 如果window.qiConnect.CODE不存在，说明token过期
        adaptor.loadStatus = 3; // 工具条加载失败
        return Promise.reject(new Error('token过期'))
      }

	  // 监听呼叫工具条事件
      window.qiConnect.on({
        onload() {
          this.loadStatus = 2; // 工具条加载成功
        },
        initSuccess() {
		  // 呼叫功能初始化成功
          // 如果使用软电话模式，可以设置坐席状态为在线
          qiConnect.setStatus([1])
        },
        session() {
          // 通话开始
        }
      });
      
      return Promise.resolve(window.qiConnect)
    } catch (error) {
      adaptor.loadStatus = 3; // 工具条加载失败
      return Promise.reject(error)
    }
  }
  
  // 登出并销毁工具条
  async logoffAndDestroy() {
    try {
      await window.qiConnect?.logoffAsync(); // 登出工具条
    } catch(_error) {}
    window.qiConnect?.clean(); // 销毁工具条UI
    // 销毁load方法插入的script标签
    this.script?.remove();
    this.script = null;
    this.loadStatus = 4; // 工具条已销毁
  }
  
  // 重新加载工具条
  async reload() {
    await this.logoffAndDestroy();
    return this.load();
  }
}

const adaptor = new Adaptor();

// 加载失败时重新加载
adaptor.load().catch(() => {
  adaptor.reload();
});

<style>
    #CONTAINER-CC-TOOLBAR {
        top: 100px;
        right: 100px;
        z-index: 100001;
    }
</style>

qiConnect.on({onload: function(){
    // other code ……
}});

qiConnect.on({initSuccess: function(){
    // other code ……
}});

qiConnect.on({session: function(data){
    // other code ……
}});

qiConnect.on({sessionClose: function(data){
    // other code ……
}});

qiConnect.on({ answered: function(data){
    // other code ……
}});

qiConnect.on({ byeFailed: function(data){
    // other code ……
}});

qiConnect.on({statusOptionsChanged: function(data){
    // other code ……
}});

qiConnect.on({statusChanged: function(data){
    // other code ……
}});

qiConnect.on({statusChangeFailed: function(data){
    // other code ……
}});

qiConnect.on({overProcess: function(data){
    // other code ……
}});

qiConnect.on({acceptedByKefu: function(data){
    // other code ……
}});

qiConnect.on({asrContentUpdate: function(data){
    // other code ……
}});

qiConnect.on({cookieAccessibleChanged: function(data){
    if (data.result) {
        console.log('此时可以获取cookie');
    } else {
        console.log('没有获取cookie权限');
        // 此时工具条会展示授权按钮
        // 如果已经隐藏了工具条，请务必暂时将工具条置为可见状态，才能点击按钮授权
    }
}});

const errorTypeMap = {
	'out-call': '外呼错误',
    'in-call': '呼入错误',
    'rights': '权限错误',
    'consult': '咨询转接错误',
    'intercom': '内部通话错误',
    'conference': '多方通话错误',
    'status': '设置状态错误',
    'others': '其他错误',
}

qiConnect.on({error: function(data){
    const { type, message = '' } = data;
	console.error(`出现异常，错误类型：${errorTypeMap[type] || errorTypeMap.others}，错误信息：${message}`);
}});

qiConnect.on({
  // 要在呼叫工具条加载后（ready事件）进行配置
  ready(){
    qiConnect.config({
      preserveNumber: true, // 通话结束后，在呼叫面板中保留对方号码
      ignoreRefresh: true, // 关闭页面不弹窗提示、不通知刷新事件
      applyCallInSummary: true, // 开启来电摘要
    });
  }
})

<form onsubmit="return false;" id="yyy">
    <p id="call">外呼号码<input type="text" name="mobile" />
        <input type="button" value="外呼" name="buttonCall" />
    </p>
</form>

document.getElementById('yyy').buttonCall.onclick = function() {
    if (!form.mobile.value) return alert('请输入电话号码');
    qiConnect.call({
      numbers: form.mobile.value
    });
}

<form onsubmit="return false;" id="yyy">
    <p id="call">外呼号码<input type="text" name="mobile" />
        <input type="button" value="挂断" name="buttonBye" />
    </p>
</form>

var isCalling = false;
qiConnect.on({
    answered: function(data){
        isCalling = true;
    },
    sessionClose: function() {
        isCalling = false;
    },
    byeFailed: function(data) {
        alert('挂断异常：'+data.cause);
    }
});

document.getElementById('yyy').buttonBye.onclick = function() {
    if(isCalling){
        qiConnect.bye();
    }
}

<form onsubmit="return false;" id="exampleLogoff">
     <input type="button" value="退出七鱼工具条" name="buttonLogoff" />
</form>

document.getElementById('exampleLogoff').buttonLogoff.onclick = function() {
    // some code...
   var conditionLogoffQiyu = true; //退出七鱼系统的条件
   if (conditionLogoffQiyu) {
      window.qiConnect.logoff();
   }
   // some code...
}

<form onsubmit="return false;" id="exampleLogoffAsync">
     <input type="button" value="退出七鱼工具条" name="buttonLogoffAsync" />
</form>

document.getElementById('exampleLogoffAsync').buttonLogoffAsync.onclick = function() {
    // some code...
   var conditionLogoffQiyu = true; //退出七鱼系统的条件
   if (conditionLogoffQiyu) {
      // 使用Promise
      window.qiConnect.logoffAsync().then(() => {
        console.log('登出成功')
      }).catch(({ message }) => {
        console.error(message)
      });
      // 使用回调
      window.qiConnect.logoffAsync({}, ({ status, message }) => {
        if (status) {
            console.log('登出成功')
        } else {
            console.error(message)
        }
      })
   }
   // some code...
}

// qiConnect.statusOptions
[
    { "label": "离线", "value": "0" },
    { "label": "小休", "value": "1",
        "children": [
            { "label": "会议", value: "0" }
        ]
    },
    ...
]

<form onsubmit="return false;" id="yyy">
    <label> 请选择状态:
        <select name="chooseStatus">
            // qiConnect.statusOptions 当前可选状态
            <option value="statusOption.value">statusOption.label</option>
        </select>
    </label>
</form>

const selectElement = document.querySelector('[name="chooseStatus"');

selectElement.addEventListener('change', (event) => {
  const status = event.target.value;
  // 可选状态若存在二级状态 参数格式示例 [status, subStatus]
  qiConnect.setStatus([status]);
});

// 在回调函数中进一步处理流程
// 切换为软电话模式
qiConnect.setMode({ mode: 0 }, ({ status, message, code }) => {
    if (status) {
        // 呼叫服务模式设置成功
        console.info('服务模式设置成功');
    } else {
        // 呼叫服务模式设置失败
        console.error('服务模式设置失败', message);
        // 如果code为18051，表示没有设置转接的手机号码，此时需要获取验证码
        if (code === 18051) {
            // 输入手机号
            const mobile = prompt('请输入手机号');
            // 获取手机验证码
            qiConnect.getCaptcha({ mobile })
                .then(() => {
                    console.info('获取手机验证码成功');
                }).then(() => {
                    // 输入验证码
                    const captcha = prompt('请输入手机验证码');
                    return qiConnect.bindPhone({ mobile, captcha })
                }).then(() => {
                    console.info('绑定手机号成功');
                }).catch(({ message }) => {
                    // 获取手机验证码/绑定手机号失败
                    console.error(message);
                });
        }
    }
});

// 在promise中进一步处理流程
// 切换为sip话机模式
qiConnect.setMode({ mode: 2 }).then(() => {
    // 呼叫服务模式设置成功
    console.info('服务模式设置成功');
}).catch(({ message, code }) => {
    // 呼叫服务模式设置失败
    console.error('服务模式设置失败', message);
    // 如果code为18051，表示没有设置转接的手机号码，此时需要获取验证码
    if (code === 18051) {
        // 输入手机号
        const mobile = prompt('请输入手机号');
        // 获取手机验证码
        qiConnect.getCaptcha({ mobile })
            .then(() => {
                console.info('获取手机验证码成功');
            }).then(() => {
                // 输入验证码
                const captcha = prompt('请输入手机验证码');
                return qiConnect.bindPhone({ mobile, captcha })
            }).then(() => {
                console.info('绑定手机号成功');
            }).catch(({ message }) => {
                // 获取手机验证码/绑定手机号失败
                console.error(message);
            });
    }
});

qiConnect.on({
    onload: () => {//呼叫工具条加载完毕的事件通知
        console.log('demo info: 呼叫工具条加载完毕！');
        qiConnect.keepPanelUnfold(true);
    }
});

// 在回调函数中进一步处理流程
qiConnect.getCaptcha({ mobile: '1xxxxxxxxxx' }, ({ status, message }) => {
    if (status) {
        console.info('获取手机验证码成功');
    } else {
        console.error('获取手机验证码失败', message);
    }
});

// 在promise中进一步处理流程
qiConnect.getCaptcha({ mobile: '1xxxxxxxxxx' }).then(() => {
    console.info('获取手机验证码成功');
}).catch(({ message }) => {
    console.error('获取手机验证码失败', message);
});

// 输入手机号
const mobile = prompt('请输入手机号');
// 获取手机验证码
qiConnect.getCaptcha({ mobile })
    .then(() => {
        console.info('获取手机验证码成功');
    }).then(() => {
        // 输入验证码
        const captcha = prompt('请输入手机验证码');
        return qiConnect.bindPhone({ mobile, captcha })
    }).then(() => {
        console.info('绑定手机号成功');
    }).catch(({ message }) => {
        // 获取手机验证码/绑定手机号失败
        console.error(message);
    });

// 1. 确认出现问题的大致起止时间
// 假设问题开始时间为2023-12-12 13:10
const startTime = new Date(2023, 11, 12, 13, 10, 0, 0)
// 假设问题结束时间为2023-12-12 13:30
const endTime = new Date(2023, 11, 12, 13, 30, 0, 0)
// 2. 为了导出日志上下文，前后各预留5分钟
const buffer = 5 * 60 * 1000;
const range = [startTime.getTime() - buffer, startTime.getTime() + buffer];
// 3. 导出日志
qiConnect.exportLocaleLogs({ range });
// 4. 把日志文件转发给七鱼对接同学

// 当前为处理中状态

// 使用方式1-callback
qiConnect.overProcess({}, ({ status, message }) => {
    if (status) {
        // 完成处理成功
        console.info('完成处理成功');
    } else {
        // 完成处理失败
        console.error('完成处理失败', message);
    }
});

// 使用方式2-promise
qiConnect.overProcess({}).then(() => {
    // 完成处理成功
    console.info('完成处理成功');
}).catch((error) => {
    // 完成处理失败
    console.error('完成处理失败', error.message);
});

qiConnect.toggle(true); // 展开面板
qiConnect.toggle(false); // 收起面板

qiConnect.setNumber({ number: '13000000000' }); // 设置拨号盘中的号码为13000000000，但不外呼

// 此时为外呼失败状态
qiConnect.cancelAfterFail(); // 跳过重拨状态，恢复为空闲状态

// 此时为外呼失败状态
qiConnect.recallAfterFail(); // 重拨