3.2 页内iframe形式

如果已经配置好的插件为 页内iframe形式 的对话框，可在插件页面中直接自定义按钮及其样式，并可以通过调用接口实现一些效果【参见 3.2.3】。

注：如果不知如何嵌入插件代码，详情请【参见 1】。

3.2.1 自定义单按钮及其样式

按钮代码html部分建议包装在一个div内，css部分根据页面风格自行设计。

例如：

<div class="****">
    // 按钮的组成部分，自主选择添加
    ...
</div>

自定义单按钮一般可包含三部分：

1. 按钮名称或图标
2. 对话框隐藏时新消息(数)提醒
3. 当前最新消息详情

注：以上三部分根据自身需要进行选择添加，其中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');
    }
    ...
};