通过该文档,您可以实现将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.9.2
二、初始化SDK
接入SDK之前需要做的工作:
必须使用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)
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®ion=${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;
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.9.2
Features
用户挂机分支可以连接到短信节点
保存时不验证连线和配置,只在发布的时候验证
连线节点验证,连过用户挂机分支的节点不能再连接话务节点
分支模块自适应文字宽度,使用户配置的时候能看全各个分支的内容,方便连线
v1.8.2
Features
收号节点和满意度收集节点添加超时和错误提示音
v1.7.0
Features
优化部分API请求报错的错误提示
v1.6.0
Bug Fixes
分支节点删除或新增后节点数据连线异常
设置变量参数能选择系统参数,应只能选择自定义参数
Features
添加部分系统音频
转人工添加暂时离队节点