3.2 页内iframe形式
如果已经配置好的插件为 页内iframe形式 的对话框,可在插件页面中直接自定义按钮及其样式,并可以通过调用接口实现一些效果【参见 3.2.3】。
注:如果不知如何嵌入插件代码,详情请【参见 1】。
3.2.1 自定义单按钮及其样式
按钮代码html部分建议包装在一个div
内,css部分根据页面风格自行设计。
例如:
<div class="****">
// 按钮的组成部分,自主选择添加
...
</div>
自定义单按钮一般可包含三部分:
- 按钮名称或图标
- 对话框隐藏时新消息(数)提醒
- 当前最新消息详情
注:以上三部分根据自身需要进行选择添加,其中2和3为非必须的,仅支持页内iframe加载的插件样式。
例如:
<div class="****">
// 1. 按钮名称或图标
<span class="****">在线客服</span>
// 2. 对话框隐藏时新消息(数)提醒
<span class="****">2</span>
// 3. 当前最新消息详情
<div class="****">
// 最新消息详情解析,消息类型参数说明【参见 3.2.2】
...
</div>
</div>
注:以上仅为结构参考,选择符合自身需求的即可。
3.2.2 消息参数说明
消息参数如下:
{
v5: 'msg', // 此参数为固定值
avatar: '客服头像URL',
name: '客服名称',
time: '回复消息时间',
msg: '回复消息内容'
}
例如:
// 文本消息
{
v5: 'msg',
avatar: '',
name: '',
time: '',
msg: '文本消息'
}
// 图片消息
{
v5: 'msg',
avatar: '',
name: '',
time: '',
msg: '[新消息:图片]'
}
// 图文消息
{
v5: 'msg',
avatar: '',
name: '',
time: '',
msg: '[新消息:图文]'
}
3.2.3 接口调用实现相关功能
在详细了解插件代码嵌入和接口说明的情况下,来共同探讨一下自定义单按钮相关功能的实现。
/**
* 1. 隐藏原插件中的按钮
*/
V5CHAT('withoutBtn');
/**
* 2. 插件加载完成后获的回调【重要】
*/
V5CHAT('onPluginLoad', function() {
// 对话框显示的回调
V5CHAT('onChatShow', function () {
// 新消息(数)提醒隐藏
...
});
// 对话框隐藏的回调
V5CHAT('onChatHide', function () {
// 收到消息的回调
V5CHAT('onMessage', function (res) {
// res为返回的新消息【参见 3.2.2】
// 此处可实现的效果:新消息(数)提醒、最新消息展示
...
});
});
});
/**
* 3. 自定义按钮点击事件
*/
oBtn.onclick = function() {
// 对话框的显示与隐藏
var oV5Frame = document.querySelector('#v5frame');
if (oV5Frame && oV5Frame.style.display === 'block') {
V5CHAT('hideChat');
} else {
V5CHAT('showChat');
}
...
};