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

引用 SDK

  1. SDK cdn assets(umd module)

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

  2. SDK Preview Sandbox

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

How To Use

Quick Access

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

const config = 
{
  InstanceId: 'ccc_xp_pre-cn-78v1gnp97002',
  BearerToken: '',
  env: 'online', // online || preOnline, 
  apiHost: 'scsp.aliyuncs.com', // scsp.aliyuncs.com || aiccs.aliyuncs.com
  Version: '2020-07-02', // Pop Api 版本号,默认值 '2020-07-02'
  locale: EnumLocale['zh-CN'],
  isPlugin: true, // 插件是否支持拖拽, 默认支持
  needDesensitize: false, // 是否对入呼/外呼号码脱敏展示, 默认不脱敏
};

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

softPhone.setConfig(config);

softPhone.register(EnumEventName.actionError, () => {
  softPhone.setConfig({
    BearerToken: 'newBearerToken' // when aliyun pop token expired
  });
});

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'));

Event Register

EnumEventName:
export enum EnumEventName {
  actionError = 'actionError',
  'actionError.tokenExpired' = 'actionError.tokenExpired',
  actionSuccess = 'actionSuccess',
  // 拨号盘流程回调
  onAgentCheckedin = 'onAgentCheckedin', // 上班签入成功回调
  onAgentCheckedout = 'onAgentCheckedout', // 下班签出成功回调
  onCallComing = 'onCallComing', // 新来电振铃回调
  onCallDialOut = 'onCallDialOut', // 外拨请求中回调
  onCallWillAnswer = 'onCallWillAnswer', // 呼入电话执行接听动作回调
  onCallEstablishForCallin = 'onCallEstablishForCallin', // 呼入通话建立完成回调(等同于完成接听):
  onCallEstablishForCallout = 'onCallEstablishForCallout', // 呼出通话建立完成回调
  onCallWillHangup = 'onCallWillHangup', // 执行挂断动作回调
  onCallDidHangup = 'onCallDidHangup', // 呼入电话挂断完成回调
  onCallOutDidHangup = 'onCallOutDidHangup', // 呼出电话挂断完成回调
}
Register Event 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)
}) 

Multi Language

EnumLocale:
export enum EnumLocale {
  en = 'en',
  'zh-CN' = 'zh-CN',
}

Default Language:zh_CN

Set Language Demo:
const { SoftPhone, EnumLocale } = window.SoftPhoneSDK;

const softPhone = SoftPhone.getInstance();

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

Static APIs

export enum APIs = {
  renderComponent = renderComponent, // 渲染组件到指定节点
  doCallOut = doCallOut, // 执行外呼
  startWork = startWork,  // 执行开始上班, 已废弃,可由 agentCheckin 替代
  agentCheckin = agentCheckin, // 执行拨号盘签入
  agentCheckout = agentCheckout // 执行拨号盘签出
}
doCallOut Demo
const { APIs } = window.SoftPhoneSDK;

APIs.doCallOut({
  number, // 要呼叫的号码
  onSuccess: this.onSuccess, // 外呼成功接通后的回调,参数为通话信息对象 
  param: {
    number, // 要呼叫的号码
    memberId, // 必填, 匿名或未知用户可传 -1
    memberName, // 必填,用户名称
    calloutNumber// 选填, 主叫号码,如未填则默认为配置的第一个
    fromSource: 'ticket_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
  }
})
agentCheckin Demo
const { APIs } = window.SoftPhoneSDK;

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

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

附:运行正常时,图例

123456

发布记录

0.4.3

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