消息传递中的语音API快速入门
在这10分钟的快速入门中,您将在网站上嵌入一个按钮,在消息Web Widget中启动语音呼叫。
你需要什么?
如果您还没有Zendesk支持帐户,请在以下网站注册开始亚博免费试用https://www.亚博zendesk.com/register/.
Ze亚博ndesk管理员已经配置了消息传递Web Widget。看到创建消息传递Web Widget.
Ze亚博ndesk管理员添加了Talk数字线。看到添加Talk数字线.
创建样例页面
使用JSFiddle创建一个“Hello World”页面。稍后,您将嵌入小部件并向页面添加调用按钮。
在web浏览器中,转到https://jsfiddle.net/.
将以下HTML代码复制并粘贴到JSFiddle的左上角UI面板中的HTML编辑器中。
<!文档类型超文本标记语言>
<超文本标记语言朗="在">
<头>
<标题>你好世界!标题>
头>
<身体>
<p>你好,世界!p>
身体>
超文本标记语言>
将小部件添加到您的网页
要将小部件添加到web页面,需要复制web widget脚本管理中心.
在“管理中心”中,单击渠道在侧边栏中,然后选择消息和社交>消息.
单击Web Widget通道,然后单击安装选项卡。
单击复制代码图标复制Web Widget代码片段。
在JSFiddle中,将代码片段粘贴到HTML面板的结束正文标记之前。你的HTML应该看起来像这样:
<!文档类型超文本标记语言>
<超文本标记语言朗="在">
<头>
<标题>你好世界!标题>
头>
<身体>
<p>你好,世界!p>
<!--Start of Zendesk Widget script -->
<脚本id="ze-snippet"src="https://static.zdassets.com/ekr/snippet.js?key=123abc456def789ghi">脚本>
<!--End of Zendesk Widget script -->
身体>
超文本标记语言>
识别你的数字线路
下一步是添加一个呼叫按钮。但是,首先必须确定数字线路,以便小部件知道当用户单击按钮时呼叫哪条线路。通过加a来做line_id
属性设置为API调用。不需要在Admin Center中进行配置。
line_id
属性配置Voice API调用。line_id
是为每个数字行自动生成的32个字符的字母数字字符串。line_id
不就行了吗id
.这条线id
是一个唯一标识符,也是自动生成的,但它是一个更短的纯整数字符串。要使Voice API工作,必须使用line_id
,不是线id
.line_id
:
使用浏览器开发人员控制台
浏览器开发人员控制台记录与web应用程序相关的信息,例如性能、网络请求和错误。每个浏览器都有不同的方法来打开开发人员控制台。在不同的浏览器中访问开发者控制台:
- 铬:打开Chrome DevTools
- Firefox:Web控制台
- Safari:使用Mac上Safari的开发菜单中的开发人员工具
- 微软的优势:打开Microsoft Edge DevTools
使用开发人员控制台检索line_id
:
在“管理中心”中,单击渠道在侧边栏中,然后选择聊天和发邮件>聊天.
打开浏览器开发人员控制台并定位它,以便您可以同时看到Admin Center UI和控制台。您可能需要展开浏览器窗口。
在“管理中心”中,单击行选项卡。
在开发人员控制台中,单击网络选项卡,然后单击预览选项卡。
选择lines.json与您的数字线路相关联的线路。
扩大行对象并搜索
line_id
.复制
line_id
价值。
使用Lines API
的line_id
属性也可以使用行API.您必须是Zendesk管理员亚博才能调用API。如果您没有使用此API的权限,请联系您的Zendesk管理员。亚博
打开一个基本的文本编辑器,粘贴curl语句:
旋度https://{子域名}.亚博.com/api/v2/渠道/的声音/行.json \
-v-u{email_address}:{密码}
将通用字段替换为Zendesk支持信息。亚博
接下来,打开计算机的命令行界面。
在Mac电脑上,按Cmd +空格键,然后输入“terminal”。 将编辑后的curl语句粘贴到命令行上,然后按Enter。
您的回复将如下所示: {“行”:[{“id”:11906798209047,“昵称”:“MyTestDigital”,“优先”:0,“default_group_id”:1500003172542,“line_type”:“数字”,“brand_id”:1500000615802,“line_id”:“53425 f6ca3b02dd719ad9654af3fce38”,
请注意lines API一次只返回25行。如果您想要的行不在初始响应对象中,则检查是否有
next_page
字段。你可以使用curl和jq解析JSON响应让它更容易阅读。 搜索
line_id
然后复制它的值。
添加呼叫按钮
现在添加按钮
元素添加到网页中,属性如下:
- 的idcall-us-button还有一个按钮标签现在就打电话给我们.
- 一个
onClick
回调,该回调触发Web Widget内的调用流。
在JSFiddle中,在HTML面板的结束正文标记之前复制并粘贴以下代码片段。
<按钮id='call-us-button'>
现在就打电话给我们
按钮>
你的HTML应该看起来像这样:
<!文档类型超文本标记语言>
<超文本标记语言朗="在">
<头>
<标题>你好世界!标题>
头>
<身体>
<p>你好,世界!p>
<!--Start of z3nabcd Zendesk Widget script -->
<脚本id="ze-snippet"src="https://static.zdassets.com/ekr/snippet.js?key=123abc456def789ghi">脚本>
<!--End of z3nabcd Zendesk Widget script -->
<按钮id='call-us-button'>
现在就打电话给我们
按钮>
身体>
超文本标记语言>
在JSFiddle中,将以下代码粘贴到JavaScript面板中以添加
onClick
回调到您刚刚创建的按钮。取代line_id_string
使用前面检索到的值。常量callUsButton=文档.querySelector(“# call-us-button”)
callUsButton.onclick=()= >{
泽(信使:开放的,“声音”,“line_id_string”)
}
控件在一个步骤中打开小部件和调用流Web小部件API.如果最终用户已经将小部件打开以进行聊天,则它将在聊天窗口的顶部覆盖调用流。
可选:自定义按钮样式和格式
下面是一个自定义呼叫按钮的CSS规则示例。随意更改或添加您想要的任何样式,然后将其添加到JSFiddle中的CSS窗口中。
# call-us-button {
背景:# 6699 cc的;
颜色:白色;
宽度:200 px;
高度:40像素;
border - radius: 5 px;
边框颜色:# 6699 cc的;
显示:flex;
justify-content:中心;
font-family:宋体;
Padding: 10px 30px;
光标:指针;
}
无障碍设计
当设计可访问性,按钮应该有一个可访问的名称()或描述性的
aria-label
属性(),但不能两者兼而有之。如果两者都存在,则屏幕阅读器将读取两次。
< >按钮
标记,图像的可访问名称是其alt
属性,并且表单输入的可访问名称是关联的<标识>
元素。如果这些选项都不可用,或者默认的可访问名称不合适,则使用aria-label
属性定义元素的可访问名称。尝试一下
现在您应该能够在小部件中启动调用流了。在JSFiddle中单击运行按钮,以运行代码并呈现示例页面。然后点击现在就打电话给我们按钮以查看正在运行的呼叫流。