PPMESSAGE 高级集成方法

使用 ‘网页聊天插件’的‘网站插件代码’ 集成 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 的效果：

Screen Shot 2017-05-01 at 12.46.52 PM.png

不过仅仅改这个聊天图标的位置是不够的，PPMESSAGE 还不够聪明，点击聊天图标后，聊天对话窗口还是从默认的右下窗口弹出，这个效果可能不是你想要的：

Screen Shot 2017-05-01 at 12.50.53 PM.png

聊天按钮出现在聊天窗口的中央了。

这时候需要继续更改窗口位置。

改变聊天窗口的位置###

还是刚才的代码，控制聊天窗口位置的是 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();
})();

实验一下吧：

Screen Shot 2017-05-01 at 1.17.03 PM.png

还有一个你想改变的，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 对象已经存在的情况下使用。

执行效果如下：

Screen Shot 2017-05-01 at 1.26.41 PM.png

开发者可以在处理指定元素的 click、hover 等事件的时机来调用 PP.show() 或者 PP.hide()。

能够定制这么多了，如果还觉得不够？可以通过 PPMESSAGE联系我们，随时哟。