快速入门—为消息传递Web Widget创建自定义启动器
注意:年代trong>亚博Zendesk重新命名了我们的bot功能。Answer Bot现在是Zende亚博sk机器人。有关此更改的详细信息,请参见这个声明.
本教程使用JSFiddle,一个免费的在线代码编辑器,提供实时页面预览。但是,您可以使用其他预览代码编辑器,例如CodePen和JS本.
创建样例页面
在本节中,我们将使用JSFiddle创建一个“Hello World”页面。
在web浏览器中,转到https://jsfiddle.net/.
将以下HTML代码复制并粘贴到JSFiddle的左上角UI面板中的HTML编辑器中。
< !年代pan>文档类型年代pan>超文本标记语言年代pan>>年代pan>
<年代pan>超文本标记语言年代pan>朗年代pan>=年代pan>”年代pan>在年代pan>”年代pan>>年代pan>
<年代pan>头年代pan>>年代pan>
<年代pan>标题年代pan>>年代pan>你好世界!年代pan>年代pan>标题年代pan>>年代pan>
年代pan>头年代pan>>年代pan>
<年代pan>身体年代pan>>年代pan>
<年代pan>p年代pan>>年代pan>你好,世界!年代pan>年代pan>p年代pan>>年代pan>
年代pan>身体年代pan>>年代pan>
年代pan>超文本标记语言年代pan>>年代pan>
将小部件添加到您的网页
要在web页面上添加小部件,需要复制位于Admin Center中的web widget脚本。
在“管理中心”中,单击<年代trong>渠道年代trong>在侧边栏中,然后选择<年代trong>消息和社交>消息年代trong>.
点击<年代trong>Web部件年代trong>.
小部件的编辑页面打开。 单击<年代trong>风格年代trong>选项卡。
对于Title,输入<年代trong>示例自定义启动器年代trong>.
对于形状,点击<年代trong>自定义启动器年代trong>.
点击<年代trong>保存设置年代trong>.
单击<年代trong>反应年代trong>选项卡。
在页面底部,单击<年代trong>添加机器人年代trong>.
单击<年代trong>安装年代trong>选项卡。
单击<年代trong>复制年代trong>图标,位于代码段框架的底部。
单击复选框到<年代trong>自动嵌入Web Widget在您的帮助中心年代trong>.
点击<年代trong>保存设置年代trong>.
在JSFiddle中,将代码片段粘贴到HTML面板的结束正文标记之前。你的HTML应该如下所示:
< !年代pan>文档类型年代pan>超文本标记语言年代pan>>年代pan>
<年代pan>超文本标记语言年代pan>朗年代pan>=年代pan>”年代pan>在年代pan>”年代pan>>年代pan>
<年代pan>头年代pan>>年代pan>
<年代pan>标题年代pan>>年代pan>你好世界!年代pan>年代pan>标题年代pan>>年代pan>
年代pan>头年代pan>>年代pan>
<年代pan>身体年代pan>>年代pan>
<年代pan>p年代pan>>年代pan>你好,世界!年代pan>年代pan>p年代pan>>年代pan>
< !z3nabcd Zendesk插件脚本的亚博开始->年代pan>
<年代pan>脚本年代pan>id年代pan>=年代pan>”年代pan>ze-snippet年代pan>”年代pan>src年代pan>=年代pan>”年代pan>https://static.zdassets.com/ekr/snippet.js?key=18d3ed2d-b8d1-4abc-988f-8c109efc88bf年代pan>”年代pan>>年代pan>年代pan>脚本年代pan>>年代pan>
< !z3nabcd Zendesk插件脚亚博本结束->年代pan>
年代pan>身体年代pan>>年代pan>
年代pan>超文本标记语言年代pan>>年代pan>
构建自定义启动器
将小部件添加到网页后,创建自定义启动器需要三个步骤:
- 添加
< div >
元素添加到自定义启动器的网页中。 - 使用HTML和CSS自定义启动器的样式和格式。
- 使用客户端Web Widget api来定义启动器和小部件的行为方式。
将启动器div元素添加到网页中
的< div >
元素中包含以下与启动器相关的内容:
- 一个名为“conversation-badge”的id
- 自定义启动按钮文本的“对话”
- 未读对话数为1
JavaScript使用这些设置来设置变量值。
<年代pan>div年代pan>id年代pan>=年代pan>'年代pan>conversation-badge年代pan>'年代pan>>年代pan>
<年代pan>跨度年代pan>>年代pan>对话年代pan>年代pan>跨度年代pan>>年代pan>
<年代pan>跨度年代pan>id年代pan>=年代pan>'年代pan>unread-indicator年代pan>'年代pan>>年代pan>1年代pan>年代pan>跨度年代pan>>年代pan>
年代pan>div年代pan>>年代pan>
你的HTML应该如下所示:
< !年代pan>文档类型年代pan>超文本标记语言年代pan>>年代pan>
<年代pan>超文本标记语言年代pan>朗年代pan>=年代pan>”年代pan>在年代pan>”年代pan>>年代pan>
<年代pan>头年代pan>>年代pan>
<年代pan>标题年代pan>>年代pan>你好世界!年代pan>年代pan>标题年代pan>>年代pan>
年代pan>头年代pan>>年代pan>
<年代pan>身体年代pan>>年代pan>
<年代pan>p年代pan>>年代pan>你好,世界!年代pan>年代pan>p年代pan>>年代pan>
< !z3nabcd Zendesk插件脚本的亚博开始->年代pan>
<年代pan>脚本年代pan>id年代pan>=年代pan>”年代pan>ze-snippet年代pan>”年代pan>src年代pan>=年代pan>”年代pan>https://static.zdassets.com/ekr/snippet.js?key=18d3ed2d-b8d1-4abc-988f-8c109efc88bf年代pan>”年代pan>>年代pan>年代pan>脚本年代pan>>年代pan>
< !z3nabcd Zendesk插件脚亚博本结束->年代pan>
<年代pan>div年代pan>id年代pan>=年代pan>'年代pan>conversation-badge年代pan>'年代pan>>年代pan>
<年代pan>跨度年代pan>>年代pan>对话年代pan>年代pan>跨度年代pan>>年代pan>
<年代pan>跨度年代pan>id年代pan>=年代pan>'年代pan>unread-indicator年代pan>'年代pan>>年代pan>1年代pan>年代pan>跨度年代pan>>年代pan>
年代pan>div年代pan>>年代pan>
年代pan>身体年代pan>>年代pan>
年代pan>超文本标记语言年代pan>>年代pan>
自定义启动器样式和格式
现在我们将使用CSS来定制启动按钮的样式和格式。
我们的启动按钮有以下设计属性:
- 纽扣颜色为浅灰色
- 按钮文本颜色为黑色
- 按钮文本居中对齐
- 文本字体系列为Arial、Helvetica和sans-serif
- 10px * 30px填充
- 按钮大小:200px * 20px
- 按钮的圆角半径为5px
- 将按钮设置为块级伸缩容器,以便按钮内的项根据按钮的大小自动更改其大小和位置
- 鼠标悬停在按钮上时,光标形状为指针
的conversation-badge
CSS规则设置按钮的格式和布局。它包含我们上面定义的启动器的属性和值。将以下内容复制并粘贴到JSFiddle编辑器的CSS面板中。
# conversation-badge年代pan>{年代pan>
背景年代pan>:年代pan># D4D4D4年代pan>;年代pan>
颜色年代pan>:年代pan>黑色的年代pan>;年代pan>
宽度年代pan>:年代pan>200年代pan>px年代pan>;年代pan>
高度年代pan>:年代pan>20.年代pan>px年代pan>;年代pan>
这个特性年代pan>:年代pan>5年代pan>px年代pan>;年代pan>
显示年代pan>:年代pan>flex年代pan>;年代pan>
justify-content年代pan>:年代pan>中心年代pan>;年代pan>
字体类型年代pan>:年代pan>天线年代pan>,年代pan>海维提卡年代pan>,年代pan>无衬线年代pan>;年代pan>
填充年代pan>:年代pan>10年代pan>px年代pan>30.年代pan>px年代pan>;年代pan>
光标年代pan>:年代pan>指针年代pan>;年代pan>
}年代pan>
现在使用CSS自定义未读对话计数器的样式和格式。
我们的未读对话计数器具有以下设计属性:
- 文字颜色为白色
- 文本居中对齐
- 文字字体大小为12px
- 字体粗细为半粗体
- 文本行距为1.7
- 背景色为黑色
- 边界半径角为50%
- 反背景圆的最小宽度为20px
- 反背景圆的高度为20px
- 启动器文本和计数器之间的间距为10px
的unread-indicator
CSS规则设置未读对话的格式和布局。它包含我们上面定义的属性和值。将以下内容复制并粘贴到JSFiddle编辑器的CSS面板中conversation-badge
规则。
# unread-indicator年代pan>{年代pan>
颜色年代pan>:年代pan>白色年代pan>;年代pan>
text-align年代pan>:年代pan>中心年代pan>;年代pan>
字体大小年代pan>:年代pan>12年代pan>px年代pan>;年代pan>
行高年代pan>:年代pan>1.7年代pan>;年代pan>
背景年代pan>:年代pan>黑色的年代pan>;年代pan>
这个特性年代pan>:年代pan>50年代pan>%年代pan>;年代pan>
min-width年代pan>:年代pan>20.年代pan>px年代pan>;年代pan>
高度年代pan>:年代pan>20.年代pan>px年代pan>;年代pan>
粗细年代pan>:年代pan>600年代pan>;年代pan>
margin-left年代pan>:年代pan>10年代pan>px年代pan>;年代pan>
}年代pan>
的@keyframes
CSS定义了震动动画。它开始水平,旋转5度,返回水平,旋转-5度,然后返回水平。动画时长为0.25秒。
unread-indicator
规则。@keyframes年代pan>tilt-shaking年代pan>{年代pan>
0%年代pan>{年代pan>变换年代pan>:年代pan>旋转年代pan>(年代pan>0年代pan>度年代pan>)年代pan>;年代pan>}年代pan>
25%年代pan>{年代pan>变换年代pan>:年代pan>旋转年代pan>(年代pan>5年代pan>度年代pan>)年代pan>;年代pan>}年代pan>
50%年代pan>{年代pan>变换年代pan>:年代pan>旋转年代pan>(年代pan>0年代pan>如年代pan>)年代pan>;年代pan>}年代pan>
75%年代pan>{年代pan>变换年代pan>:年代pan>旋转年代pan>(年代pan>5年代pan>度年代pan>)年代pan>;年代pan>}年代pan>
100%年代pan>{年代pan>变换年代pan>:年代pan>旋转年代pan>(年代pan>0年代pan>度年代pan>)年代pan>;年代pan>}年代pan>
}年代pan>
.tilt-animation年代pan>{年代pan>
动画年代pan>:年代pan>tilt-shaking年代pan>0.25年代pan>年代年代pan>;年代pan>
}年代pan>
你的整个CSS应该如下所示:
/*页面中的元素*/年代pan>
# conversation-badge年代pan>{年代pan>
背景年代pan>:年代pan># D4D4D4年代pan>;年代pan>
颜色年代pan>:年代pan>黑色的年代pan>;年代pan>
宽度年代pan>:年代pan>200年代pan>px年代pan>;年代pan>
高度年代pan>:年代pan>20.年代pan>px年代pan>;年代pan>
这个特性年代pan>:年代pan>5年代pan>px年代pan>;年代pan>
显示年代pan>:年代pan>flex年代pan>;年代pan>
justify-content年代pan>:年代pan>中心年代pan>;年代pan>
字体类型年代pan>:年代pan>天线年代pan>,年代pan>海维提卡年代pan>,年代pan>无衬线年代pan>;年代pan>
填充年代pan>:年代pan>10年代pan>px年代pan>30.年代pan>px年代pan>;年代pan>
光标年代pan>:年代pan>指针年代pan>;年代pan>
}年代pan>
# unread-indicator年代pan>{年代pan>
颜色年代pan>:年代pan>白色年代pan>;年代pan>
text-align年代pan>:年代pan>中心年代pan>;年代pan>
字体大小年代pan>:年代pan>12年代pan>px年代pan>;年代pan>
行高年代pan>:年代pan>1.7年代pan>;年代pan>
背景年代pan>:年代pan>黑色的年代pan>;年代pan>
这个特性年代pan>:年代pan>50年代pan>%年代pan>;年代pan>
min-width年代pan>:年代pan>20.年代pan>px年代pan>;年代pan>
高度年代pan>:年代pan>20.年代pan>px年代pan>;年代pan>
粗细年代pan>:年代pan>600年代pan>;年代pan>
margin-left年代pan>:年代pan>10年代pan>px年代pan>;年代pan>
}年代pan>
/* CSS倾斜动画*/年代pan>
@keyframes年代pan>tilt-shaking年代pan>{年代pan>
0%年代pan>{年代pan>变换年代pan>:年代pan>旋转年代pan>(年代pan>0年代pan>度年代pan>)年代pan>;年代pan>}年代pan>
25%年代pan>{年代pan>变换年代pan>:年代pan>旋转年代pan>(年代pan>5年代pan>度年代pan>)年代pan>;年代pan>}年代pan>
50%年代pan>{年代pan>变换年代pan>:年代pan>旋转年代pan>(年代pan>0年代pan>如年代pan>)年代pan>;年代pan>}年代pan>
75%年代pan>{年代pan>变换年代pan>:年代pan>旋转年代pan>(年代pan>5年代pan>度年代pan>)年代pan>;年代pan>}年代pan>
100%年代pan>{年代pan>变换年代pan>:年代pan>旋转年代pan>(年代pan>0年代pan>度年代pan>)年代pan>;年代pan>}年代pan>
}年代pan>
.tilt-animation年代pan>{年代pan>
动画年代pan>:年代pan>tilt-shaking年代pan>0.25年代pan>年代年代pan>;年代pan>
}年代pan>
定义自定义启动器和Web Widget行为
自定义启动器和小部件行为使用Web小部件API命令.
常量年代pan>conversationBadge年代pan>=年代pan>文档年代pan>.年代pan>querySelector年代pan>(年代pan>“# conversation-badge”年代pan>)年代pan>
常量年代pan>unreadIndicator年代pan>=年代pan>文档年代pan>.年代pan>querySelector年代pan>(年代pan>“# unread-indicator”年代pan>)年代pan>
常量年代pan>populateUnreadIndicator年代pan>=年代pan>(年代pan>数年代pan>)年代pan>= >年代pan>{年代pan>
如果年代pan>(年代pan>!年代pan>数年代pan>)年代pan>返回年代pan>resetUnreadIndicator年代pan>(年代pan>)年代pan>
unreadIndicator年代pan>.年代pan>风格年代pan>.年代pan>背景年代pan>=年代pan>“# CC3333”年代pan>
unreadIndicator年代pan>.年代pan>innerHTML年代pan>=年代pan>数年代pan>
conversationBadge年代pan>.年代pan>setAttribute年代pan>(年代pan>“类”年代pan>,年代pan>“tilt-animation”年代pan>)年代pan>;年代pan>
}年代pan>
常量年代pan>resetUnreadIndicator年代pan>=年代pan>(年代pan>)年代pan>= >年代pan>{年代pan>
unreadIndicator年代pan>.年代pan>风格年代pan>.年代pan>背景年代pan>=年代pan>“黑”年代pan>
unreadIndicator年代pan>.年代pan>innerHTML年代pan>=年代pan>0年代pan>
conversationBadge年代pan>.年代pan>setAttribute年代pan>(年代pan>“类”年代pan>,年代pan>”年代pan>)年代pan>;年代pan>
}年代pan>
//未读消息年代pan>
泽年代pan>(年代pan>“使者:”年代pan>,年代pan>“unreadMessages”年代pan>,年代pan>(年代pan>数年代pan>)年代pan>= >年代pan>{年代pan>
populateUnreadIndicator年代pan>(年代pan>数年代pan>)年代pan>
}年代pan>)年代pan>
//在页面加载时总是关闭widget年代pan>
泽年代pan>(年代pan>“信使号”年代pan>,年代pan>“关闭”年代pan>)年代pan>;年代pan>
conversationBadge年代pan>.年代pan>onclick年代pan>=年代pan>(年代pan>)年代pan>= >年代pan>{年代pan>
//打开widget年代pan>
泽年代pan>(年代pan>“信使号”年代pan>,年代pan>“开放”年代pan>)年代pan>;年代pan>
//复位未读指示灯年代pan>
resetUnreadIndicator年代pan>(年代pan>)年代pan>
}年代pan>
在页面加载时关闭启动器
的泽(“信使”,“关闭”)
命令可防止在首次加载页面时显示Web Widget。
单击自定义启动程序将打开小部件
单击自定义启动器按钮时,泽(“信使”,“开放”)
打开Web Widget。的resetUnreadIndicator
函数被调用并执行以下操作:
- 将背景色设置为黑色(当有未读消息时,背景色为红色)
- 将未读邮件数设置为0
- 设置class属性,使不执行动画
常量年代pan>resetUnreadIndicator年代pan>=年代pan>(年代pan>)年代pan>= >年代pan>{年代pan>
unreadIndicator年代pan>.年代pan>风格年代pan>.年代pan>背景年代pan>=年代pan>“黑”年代pan>
unreadIndicator年代pan>.年代pan>innerHTML年代pan>=年代pan>0年代pan>
conversationBadge年代pan>.年代pan>setAttribute年代pan>(年代pan>“类”年代pan>,年代pan>”年代pan>)年代pan>;年代pan>
}年代pan>
监听消息
e ('messenger:on', 'unreadMessages', (count))
方法执行回调populateUnreadIndicator
当未读消息数量发生变化时的功能。该函数的作用如下:
- 将计数器圆的背景色设置为红色
- 更新计数以显示未读邮件的数量
- 设置类属性,以便执行震动动画
常量年代pan>populateUnreadIndicator年代pan>=年代pan>(年代pan>数年代pan>)年代pan>= >年代pan>{年代pan>
如果年代pan>(年代pan>!年代pan>数年代pan>)年代pan>返回年代pan>resetUnreadIndicator年代pan>(年代pan>)年代pan>
unreadIndicator年代pan>.年代pan>风格年代pan>.年代pan>背景年代pan>=年代pan>“# CC3333”年代pan>
unreadIndicator年代pan>.年代pan>innerHTML年代pan>=年代pan>数年代pan>
conversationBadge年代pan>.年代pan>setAttribute年代pan>(年代pan>“类”年代pan>,年代pan>“tilt-animation”年代pan>)年代pan>;年代pan>
}年代pan>
尝试一下
测试自定义启动器:
- 在JSFiddle中单击<年代trong>运行年代trong>图标位于左上角。右下角的控制台显示您的网页。
单击自定义启动器按钮。
输入<年代trong>文章年代trong>.
新闻<年代trong>返回年代trong>然后快速按下<年代trong>Esc年代trong>在机器人做出反应之前。
自定义启动器按钮激活,计数器更新,计数器后面的圆圈变为红色。