IVR SDK前端接入指南

通过该文档,您可以实现将IVR页面嵌入到第三方系统中,直接在您系统中实现IVR流程的展示、编辑、发布等功能,下面的工作需要您公司的前端工程师来实施。

一、前端资源

备注:更新前端资源版本以后,一定要在本地环境做全面测试以后再发布线上环境!

<!--sdk样式文件-->
<link rel="stylesheet" type="text/css" href="https://g.alicdn.com/cloudcallcenter/acc-ivr/{version-ivr-sdk}/main.min.css">
<!--sdk js文件-->
<script type="text/javascript" src="https://g.alicdn.com/cloudcallcenter/acc-ivr/{version-ivr-sdk}/accIvrSdk.min.js"></script>

以上静态资源,将上面的{version-ivr-sdk}替换为对应的版本号,当前最新版本号为:
version-ivr-sdk ==> 1.7.0

二、初始化SDK

接入SDK之前需要做的工作:

  1. 必须使用chrome浏览器,版本号为58以上。原因是云呼叫中心的通话是通过webRTC技术实现的,目前chrome浏览器对于WebRTC技术兼容是高的。为了保证您的通话质量及安全性,所以我们做出了这样的要求。

初始化SDK:

window.accIvr = new window.AccIvrSdk(config)

注意:当在同一个页面重复初始化实例时,需在下次初始化之前调用 window.accIvr.unmountInstance() 方法卸载上次渲染的组件,避免重复渲染组件,出现意外情况。

三、config必选配置

1. dom

挂载元素id

2. instanceId

创建呼叫中心实例填写的域名, 
 https://ccc.console.aliyun.com/AccV2Instance  

访问地址查看,workbench/xxx/agentdest中间的字符串(xxx就是实例id)
1

3. regionId

云呼服务器部署的集群,如果没有特殊说明,为'cn-shanghai'

四、config可选配置

1. width

宽度,默认100%,参数类型:Number (px)或者String(%)

2. height

高度,默认100%,参数类型:Number (px)或者String(%)

3. baseURL

加载IVR页面的路径。
如果是hash路由,是window.location.hash。
如果是browser路由,是window.location.pathname。

4. isBrowserHistory

Boolean,如果是browser路由,指定为true。如果是hash路由可不指定。

******以下参数是前端请求服务端接口的API地址及请求参数配置:******

请求路径为:${ajaxOrigin}${ajaxPath}?${ajaxApiParamName}=${apiName}&product=CloudCallCenter&version=2020-07-01&region=${regionId}

5. ajaxOrigin

请求源,默认请求当前源(location.origin),参数类型:String;

6. ajaxPath

请求路径,默认为”/data/api.json”

7. withCredentials

表示跨域请求时是否需要使用凭证,是否允许携带cookie,参数类型:Boolean

8. ajaxApiParamName

ajaxType为param时指定区分action的名称,默认action,参数类型:String;

9. ajaxMethod

请求方式,post|get 默认post,参数类型:String;

10. ajaxOtherParams

其他自定义参数和request同一层级,参数类型:Object;

11. ajaxHeaders

请求的header,参数类型:Object;
  1. uploadAudioPageUrl

自定义上传音频的页面路径,默认云呼控制台的音频上传页面(https://ccc-v2.aliyun.com/workbench/{InstanceId}/media)

******请求接口的参数配置结束******

******以下是钩子函数:路由变化时的回调函数,类型均为function******

13. onChangeRouter(url)

当路由发生变化时触发。你可以根据路由变化做出相应处理

以下是配置示例:

window.customIvr = new window.AccIvrSdk({
  dom: 'ivr',
  instanceId: 'XXX',
  regionId: 'cn-shanghai',
  ajaxPath: '/aliyun/ccc/api',
  ajaxMethod: 'post',
  useOpenApiSdk: false,
  width: '800px',
  height: '500px',
  baseURL: '/ivr',
  onChangeRouter(url) {
    console.log(url);
  },
});

五、SDK说明

IVR SDK中内置了一些路由配置,对应不同页面和操作:

接口

描述

${baseURL}

IVR列表页面

${baseURL}/delete

删除IVR

${baseURL}/publish

发布IVR

${baseURL}/version

IVR版本信息

${baseURL}/export

导出IVR

${baseURL}/create

创建新的IVR

${baseURL}/modify/:contactFlowId

编辑IVR

${baseURL}/clone

克隆IVR

${baseURL}/import

导入IVR

六、服务端准备工作

因为IVR SDK是嵌入到了您的自有业务系统中,在IVR SDK的使用过程中,会发起多个请求到自有业务系统的服务端,请求的调用地址可以通过四、config可选配置中的ajax相关配置来设置。需要将IVR SDK发出的请求经过您的服务端转发到云呼叫中心的服务端(也就是调用云呼叫中心的openAPI),然后将返回结果透传回软电话SDK中即可。详细步骤如下:

  • 可以通过AK/SK方式请求接口,或通过oauth2方式请求接口。

  • 转发SDK发的请求到云呼叫中心服务端,根据API概述调用对应openAPI,将返回结果透传回软电话SDK即可,软电话SDK所需的返回结果必须是JSON数据格式。

类型

接口

描述

业务接口

ListContactFlows

获取IVR列表

GetContactFlowVersion

获取IVR流程版本信息

ListSnapshotsOfContactFlow

获取IVR流程快照信息

StartEditContactFlow

开始编辑IVR流程

PublishContactFlow

发布IVR流程

GetContactFlow

获取IVR流程画布信息

DiscardEditingContactFlow

丢弃IVR流程编辑内容

DeleteContactFlow

删除IVR流程

RollbackContactFlow

回滚IVR流程到指定版本

ListSkillGroups

获取技能组列表信息

ListPhoneNumbers

获取电话号码列表

GetSmsConfig

获取短信配置信息

ListConfigItems

获取当前工作台配置信息

ListCallTags

获取黑名单标签列表

ListMedias

获取当前实例下的音频列表

DeleteMedia

删除音频

GetAudioFileDownloadUrl

获取指定音频URL

ListAsrSettings

获取语音配置开启状态

CheckNlsServiceStatus

检查智能语音服务是否授权

ListProjects

获取语音项目列表

GetTtsAuditionFile

获取文本试听音频链接

ListBriefSkillGroups

获取简单的技能组列表

ListCustomizedVoiceNavigatorInstances

获取智能导航实例和号码的映射

七、更新日志

v1.7.0

Features

  • 优化部分API请求报错的错误提示

v1.6.0

Bug Fixes

  • 分支节点删除或新增后节点数据连线异常

  • 设置变量参数能选择系统参数,应只能选择自定义参数

Features

  • 添加部分系统音频

  • 转人工添加暂时离队节点

阿里云首页 云呼叫中心 相关技术圈