使用 ‘网页聊天插件’的‘网站插件代码’ 集成 PPMESSAGE，即可以显示 PPMESSAGE 的聊天图标。可以通过更改‘网页插件代码’来实现对 PPMESSAGE 聊天图标和聊天对话窗口的更多控制。
把插件代码的格式变的好看些：
<script>
window.ppSettings = {
app_uuid:'a600998e-efff-11e5-9d9f-02287b8c0ebf'
};
(function(){
var w=window,d=document;
function l() {
var a=d.createElement('script');
a.type='text/javascript';
a.async=!0;
a.charset='utf-8';
a.src='https://ppmessage.cn/ppcom/assets/pp-library.min.js';
var b=d.getElementsByTagName('script')[0];
b.parentNode.insertBefore(a,b)
}
l();
})();
</script>
改变聊天按钮的位置###
默认情况下聊天按钮的位置在整个网页的右下角，改变聊天按钮的位置需要在 ppSettings 中增加一些控制信息：
<script>
window.ppSettings = {
app_uuid:'a600998e-efff-11e5-9d9f-02287b8c0ebf',
view: {
launcher_is_show: true,
launcher_bottom_margin: '20px',
launcher_right_margin: '30px',
launch_style: {
mode: 'normal',
position:'right',
bottom: 95
}
}
};
(function(){
var w=window,d=document;
function l() {
var a=d.createElement('script');
a.type='text/javascript';
a.async=!0;
a.charset='utf-8';
a.src='https://ppmessage.cn/ppcom/assets/pp-library.min.js';
var b=d.getElementsByTagName('script')[0];
b.parentNode.insertBefore(a,b)
}
l();
})();
</script>
这些控制信息都是默认值，就是说不控制就是这样的。
其中 launcher_bottom_margin 和 launcher_right_margin 是用来控制聊天按钮距离浏览器窗口右边和底边的距离，更改着这个大小，看看效果吧。
这是把 launcher_bottom_margin 改成 300px，launcher_right_margin 改成 200px 的效果：
不过仅仅改这个聊天图标的位置是不够的，PPMESSAGE 还不够聪明，点击聊天图标后，聊天对话窗口还是从默认的右下窗口弹出，这个效果可能不是你想要的：
聊天按钮出现在聊天窗口的中央了。
这时候需要继续更改窗口位置。
改变聊天窗口的位置###
还是刚才的代码，控制聊天窗口位置的是 view.launch_style.position/bottom，分别表示聊天窗口是在浏览器的左侧还是右侧，以及距离浏览器的底边高度。如果应用自定义的 lauch_style，需要将 lauch_style.mode 指定为 custom。应用了自定义的风格，聊天对话的窗口弹出动画方式自动改变。如果 position 为 right 那么聊天窗口将从浏览器的右侧滑出。
window.ppSettings = {
app_uuid:'a600998e-efff-11e5-9d9f-02287b8c0ebf',
view: {
launcher_bottom_margin: '200px',
launcher_right_margin: '30px',
launcher_is_show: true,
launch_style: {
mode: 'custom',
position:'right',
bottom: 295
}
}
};
(function(){
var w=window,d=document;
function l() {
var a=d.createElement('script');
a.type='text/javascript';
a.async=!0;
a.charset='utf-8';
a.src='https://ppmessage.cn/ppcom/assets/pp-library.min.js';
var b=d.getElementsByTagName('script')[0];
b.parentNode.insertBefore(a,b)
}
l();
})();
实验一下吧：
还有一个你想改变的，PPMESSAGE 也已经替你想到了，改变聊天按钮的图标。
隐藏聊天按钮的图标###
隐藏聊天按钮的图标需要一个新的变量，launcher_is_show，赋予它 true 或者 false，即可控制显示聊天按钮或者隐藏聊天按钮，代码再 copy 一遍：
window.ppSettings = {
app_uuid:'a600998e-efff-11e5-9d9f-02287b8c0ebf',
view: {
launcher_bottom_margin: '200px',
launcher_right_margin: '30px',
launcher_is_show: false,
launch_style: {
mode: 'custom',
position:'right',
bottom: 295
}
}
};
(function(){
var w=window,d=document;
function l() {
var a=d.createElement('script');
a.type='text/javascript';
a.async=!0;
a.charset='utf-8';
a.src='https://ppmessage.cn/ppcom/assets/pp-library.min.js';
var b=d.getElementsByTagName('script')[0];
b.parentNode.insertBefore(a,b)
}
l();
})();
效果就不展示了，因为隐藏了就没有效果了。这时候你必然需要打开关闭聊天窗口，因为聊天按钮已经被隐藏了，打开和关闭聊天窗口的功能是它完成的。
打开、关闭聊天窗口###
这个不要任何定制，只需要执行，PP.show() 去打开聊天窗口，PP.hide() 去关闭聊天窗口，唯一需要注意的是一定要在 PP 对象已经存在的情况下使用。
执行效果如下：
开发者可以在处理指定元素的 click、hover 等事件的时机来调用 PP.show() 或者 PP.hide()。
能够定制这么多了，如果还觉得不够？可以通过 PPMESSAGE联系我们，随时哟。
