本文将告诉您如何进行呼叫中心SDK前端接入。

引用 SDK

  1. SDK cdn assets(umd module)

    https://g.alicdn.com/xspace/phone/0.4.15/sdk.js

  2. SDK Preview Sandbox

    https://g.alicdn.com/xspace/phone/0.4.15/index.html#/sample/use-sdk

接入手册

1、快速接入

// 分别为 软电话类,支持的事件枚举,多语言枚举,静态 APIs
const { SoftPhone, EnumEventName, EnumLocale, APIs } = window.SoftPhoneSDK;

const config = 
{
  InstanceId: 'ccc_xp_pre-cn-78v1gnp97002',   // 实例id,可在阿里云控制台实例列表获取
  BearerToken: '',                            // bearerToken,通过【三方账号授权】置换token中的access_token
  env: 'online',                              // online || preOnline, 
  apiHost: 'api.rhinokeen.com',               // scsp.aliyuncs.com || aiccs.aliyuncs.com || api.rhinokeen.com
  Version: '',                                // Pop Api 版本号,默认为'2020-07-02'. scsp.aliyun.com对应版本为'2020-07-02';aiccs.aliyun.com对应版本为'2019-10-15';api.rhinekeen.com无需版本
  locale: EnumLocale['zh-CN'],
  isPlugin: true,                             // 插件是否支持拖拽, 默认支持
  needDesensitize: false,                     // 是否对入呼/外呼号码脱敏展示, 默认不脱敏
  autoChangeOnLineTime: 1,                    // 自定义话后处理时间,单位为 s,为 0 代表不需要自动切状态,默认为 1 s自动结束话后处理
  canChangeStatusByHand: true,                // 是否能够手动切换状态的能力,默认为true,展示操作栏,支持手动更新
  disableUI: false                            // 是否隐藏UI, 默认为 false,不隐藏
};

const softPhone = SoftPhone.getInstance();    // softphone follow Singleton Pattern

softPhone.setConfig(config);

softPhone.register(EnumEventName.actionError, () => {
  softPhone.setConfig({
    BearerToken: 'newBearerToken'             // token失效后,此处进行事件注册,获取新的token
  });
});

const SoftPhoneUI: React.ElementType<any> = softPhone.getUIComponent();

// if use React Framework, you can render component directly
const ExampleApp: React.FC = () => {
  return (
    <SoftPhoneUI />
  );
}

// if not use React Framework, you can render softphone to specified ElementNode
APIs.renderComponent(SoftPhoneUI, document.querySelector('#phone-container'));
            

2、事件注册

事件回调枚举:
export enum EnumEventName {
  actionError = 'actionError',
  actionSuccess = 'actionSuccess',    // 拨号盘流程回调
  onAgentCheckedin = 'onAgentCheckedin', // 上班签入成功回调
  onAgentCheckedout = 'onAgentCheckedout', // 下班签出成功回调
  onCallComing = 'onCallComing', // 新来电振铃回调
  onCallDialOut = 'onCallDialOut', // 外拨请求中回调
  onCallWillAnswer = 'onCallWillAnswer', // 呼入电话执行接听动作回调
  onCallEstablishForCallin = 'onCallEstablishForCallin', // 呼入通话建立完成回调(等同于完成接听):
  onCallEstablishForCallout = 'onCallEstablishForCallout', // 呼出通话建立完成回调
  onCallWillHangup = 'onCallWillHangup', // 执行挂断动作回调
  onCallDidHangup = 'onCallDidHangup', // 呼入电话挂断完成回调
  onCallOutDidHangup = 'onCallOutDidHangup', // 呼出电话挂断完成回调
  'actionError.tokenExpired' = 'actionError.tokenExpired',  // token失效回调
}
注册监听Demo:
const { SoftPhone, EnumEventName } = window.SoftPhoneSDK;

const softPhone = SoftPhone.getInstance();

// register action error callback
const unRegister = softPhone.register(EnumEventName['actionError.tokenExpired'], (eventData) => {
  // here! your can update BearerToken by softPhone.setConfig({BearerToken: 'xxx'});
  const { type, data } = eventData;
  console.log('[SoftPhone actionError.tokenExpired]',type, data);
});

unRegister() // unRegister current actionError.tokenExpired

// you can use this instance API register softphone process callback like:

softPhone.register(EnumEventName.onCallDidHangup, (phoneData) => {
  console.log(phoneData)
}) 

3、前端静态API列表

export enum APIs = {
  renderComponent = renderComponent, // 渲染组件到指定节点
  doCallOut = doCallOut, // 执行外呼
  startWork = startWork,  // 执行开始上班, 已废弃,可由 agentCheckin 替代
  agentCheckin = agentCheckin, // 执行拨号盘签入
  agentCheckout = agentCheckout, // 执行拨号盘签出
  getAgentBarStatus = getAgentBarStatus, // 获取当前拨号盘状态
  callAnswer = callAnswer,    // 来电接听
  callHangup = callHangup     // 电话挂断
}
发起呼叫 Demo
const { APIs } = window.SoftPhoneSDK;

APIs.doCallOut({
  number, // 要呼叫的号码
  onSuccess: this.onSuccess, // 外呼成功接通后的回调,参数为通话信息对象 
  param: {
    number, // 要呼叫的号码
    memberId, // 必填, 匿名或未知用户可传 -1
    memberName, // 必填,用户名称,未知可传 '匿名会员'
    calloutNumber// 选填, 主叫号码,如未填则默认为配置的第一个
    fromSource: 'other_system_out', // 必填, hotlinebs_out || ticket_out || other_system_out (热线||工单||其他系统)
    taskId: this.props.common.taskId, 
    // 如需查动作记录/服务记录时, channelId || caseId 必传其中之一
    channelId: this.props.channelId, // 会话id
    caseId: this.props.common.caseId, // 工单id
  }
})
坐席签入 Demo
const { APIs } = window.SoftPhoneSDK;

APIs.agentCheckin(); // 是否成功可通过注册 onAgentCheckedin 事件来监听
坐席签出 Demo
const { APIs } = window.SoftPhoneSDK;

APIs.agentCheckout(); // 是否成功可通过注册 onAgentCheckedout 事件来监听

获取坐席状态 Demo

const { APIs } = window.SoftPhoneSDK;

const status = await APIs.getAgentBarStatus(); // 拨号盘状态值,值对应的状态如下:

// AgentCheckout: 1, // 签出
// AgentCheckin: 2, // 签入
// AgentReady: 3, // 空闲
// AgentBreak: 4, // 小休
// AgentCallRelease: 5, // 通话结束(挂断的时候)
// AgentAcw: 6, // 话后处理
// AgentRinging: 7, // 振铃
// AgentCallAnswerRequest: 8, // 接听请求中
// AgentCallDialOut: 9, // 拨号请求中
// AgentCallInboundEstablish: 10, // 呼入通话
// AgentCallOutBoundEstablish: 11, // 呼出通话
// AgentCallInternalBoundEstablish: 12, // 内部通话 b打给c
// AgentCallConsultEstablish: 13, // 被动求助通话建立
// AgentCallHeld: 14, // 通话保持
// AgentCallConferenceWaitAnswer: 16, // 发起三方
// AgentCallThirdConsult: 17, // 三方通话中
// AgentThirdRetrieveRequest: 18, // 三方取回中
// AgentCallConference: 19, // 会议  三方通话状态

接听来电 Demo

// 参数可从 AgentRinging 的事件回调参数里取 
APIs.callAnswer(connId, jobId, acid, aid);

挂断电话 Demo

// 参数可从 AgentRinging 或 AgentCallDialOut 的事件回调参数里取 
APIs.callHangup(connId, jobId, acid, aid);

4、多语言

已支持语言枚举:
export enum EnumLocale {
  en = 'en',
  'zh-CN' = 'zh-CN',
}

默认语言:zh_CN

设置语言 Demo:
const { SoftPhone, EnumLocale } = window.SoftPhoneSDK;

const softPhone = SoftPhone.getInstance();

softPhone.setConfig({
  locale: EnumLocale.en, // default = 'zh_CN'
});

发布记录

0.4.12

  • 新增对外的接听和挂断API。
  • 新增隐藏UI的配置参数。

0.4.10

  • 归属地外化多 tab 不显示问题修复
  • 增加初始化配置参数-autoChangeOnLineTime 用来配置话后处理时间(默认为 0,不触发)
  • 增加初始化配置参数-canChangeStatusByHand 用来配置是否隐藏手动操作状态栏的能力(默认为 false,不需要隐藏)

0.4.9

  • 号码列表支持“号码组外呼”
  • 浮层层级提升至 9999
  • 拨打电话,上下班等操作提供“同步api”
  • 增加“获取拨号盘状态”的前端 api
  • fuyun api token 过期事件修复
  • 入呼、外呼归属地外化

0.4.7

  • 拨号盘内部事件通信优化,弃用msg-bus
  • iconfont 更新

0.4.6

  • Demo 页增加cdnPath的可配置化

0.4.5

  • 增加对后端接口外呼的支持
  • 支持在已加载 SIPml-api 的环境下依旧能够正常运行
  • 修改默认外呼来源为other_system_out

0.4.4

  • 增加双步转 UI 调整
  • 测试环境变量修改

0.4.3

  • 交互体验优化
  • 增加系统外呼透露
  • 增加是否脱敏展现号码的配置项
  • 增加是否可拖动的配置项
  • Fuyun & Pop 空入参优化
  • 转交逻辑优化,加入咨询 & 会议逻辑(暂时隐藏)
  • 部分已知 bug 修复

附:运行正常时,图例

123456