集成PPMessage网页聊天插件
使用 ‘网页聊天插件’的‘网站插件代码’ 集成 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>
您只需将上面的代码嵌入到网站页面<head>与</head>标签之间即可实现与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 还不够聪明，点击聊天图标后，聊天对话窗口还是从默认的右下窗口弹出，这个效果可能不是你想要的：
image
聊天按钮出现在聊天窗口的中央了。 这时候需要继续更改窗口位置。
改变聊天窗口的位置
还是刚才的代码，控制聊天窗口位置的是 view.launch_style.position/bottom，分别表示聊天窗口是在浏览器的左侧还是右侧，以及距离浏览器的底边高度。如果应用自定义的 lauch_style，需要将 lauch_style.mode 指定为 custom。应用了自定义的风格，聊天对话的窗口弹出动画方式自动改变。position 可以取的值有 left/right/center； 如果 position 为 right 那么聊天窗口将从浏览器的右侧滑出，如果是 center，那么聊天窗口将从页面中间淡出，并且居于页面中间。
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();
})();
实验一下吧：
image
还有一个你想改变的，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();
})();
值得注意的是 launcher_is_show 不是必须与 custom mode 一起使用。
下面你一定需要打开关闭聊天窗口的接口了，因为聊天按钮已经被隐藏了，本来打开和关闭聊天窗口是它来完成的。
打开、关闭聊天窗口
调用 PP.show() 去打开聊天窗口，PP.hide() 去关闭聊天窗口，唯一需要注意的是一定要在 PP 对象已经存在的情况下使用。
执行效果如下：
image
开发者可以在处理指定元素的 click、hover 等事件的时机来调用 PP.show() 或者 PP.hide()。如果想了解 PPMESSAGE 的聊天窗口的打开状态可以用 PP.isOpen() 来检查，如果正在使用类似 angularjs 这样的前端框架，那么就可以用 ng-if/*ngIf 来绑定不同的界面操作按钮。
开发者也可以通过 onHide 和 onShow 来响应聊天窗口打开和关闭的事件，通过回调函数来控制自己的界面显示：
PP.onHide(function() {
});
PP.onShow(function() {
})
用程序发送一条消息给座席
在 首页 的产品价格中，PPMESSAGE 的来访者如果点击 ‘想了解更多’，网页程序就会自动冒充客户给座席发送一条消息，实现的方法是调用了 PPMESSAGE 的内部 API，这些 API 是不能够直接使用的，因为没有上下文；如果有像发消息这样的例外，一定会明确说明。
function send_message(_msg) {
if (!window.PP) {
return;
}
if (!window.PP.isOpen()) {
window.PP.show()
}
setTimeout(function() {
new window.PP.fn.Service.PPMessage.Builder(window.PP.fn.Service.PPMessage.TYPE.TEXT)
.textMessageBody(_msg).build().send();
}, 1000);
return;
}
通过调用这个 send_message 函数就可以发送文本消息给客服。免去了客户手动输入。
响应来消息的事件
如果聊天按钮被隐藏，那么它本身所附加的功能和体验也一样被隐藏掉了。特别是当访客在你的网页浏览的时候，座席人员发送给访客的信息提示会看不见。
这时候前端开发者需要考虑处理 PPMESSAGE 的来消息事件，PPMESSAGE 通过创建一个 CustomEvent 来通知有新消息到来，这是 PPMESSAGE 的构建事件的过程：
var event = new CustomEvent("event:ppmessage:incoming-message", {
user: { // 哪个座席发送的消息
user_fullname:,
user_icon:,
uuid:,
},
messageType:, //TEXT/IMAGE
message: {
text: {body:,},
image: {url:,}
}
});
document.dispatchEvent(event);
开发者可以这样收到这个消息：
document.addEventListener("event:ppmessage:incoming-message", function(e) {
console.log(e);
});
设置访客自定义字段值
在网页客户端可以为访客的自定义字段赋值，这样可以便于给访客分类，或者为流程将访客导向不同的座席做一些提前的数据准备。
这个接口必须在聊天组件已经成功加载的情况下执行
window.PP.setVar({"extra_field_TEXT_1": "Hello World"}, function() {
//成功设置
}, function() {
//设置失败
});
上边的代码演示了给一个访客的自定义字段进行赋值，自定义字段的内部名称为 extra_field_TEXT_1，赋值为 Hello World，这个值可以在流程中读出，也可以显示在访客的详细信息之中。
image
如果在网站上同时显示几个座席信息，比如‘售前’、‘售后’、‘技术’等等，让访客根据自己的需要点击不同的座席进行沟通；就可以响应访客的不同的点击事件进行自定义字段赋值，然后再打开聊天窗口，这样座席人员就知道访客是想找谁沟通：
window.PP.setVar({"extra_field_TEXT_1": "STH_BASED_ON_DIFF_BUTTON"}, function() {
//成功设置
window.PP.show();
}, function() {
//设置失败
});
