使用 ‘網(wǎng)頁聊天插件’的‘網(wǎng)站插件代碼’ 集成 PPMESSAGE笆怠，即可以在您的網(wǎng)站顯示 PPMESSAGE 的聊天圖標。集成PPMessage 網(wǎng)頁聊天組件后滞项，您網(wǎng)站上的訪客行為數(shù)據(jù)和消息都會發(fā)送給后臺系統(tǒng)和座席人員，后臺系統(tǒng)通過 PPMESSAGE 的各種核心組件進行數(shù)據(jù)獲取和客戶路由，將訪客分配給選定的座席耸携；座席也可以通過觀察后臺的客戶瀏覽信息主動與訪客發(fā)起會話廓握。初始的網(wǎng)站插件代碼如下：
<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>
您只需將上面的代碼嵌入到網(wǎng)站頁面<head>與</head>標簽之間即可實現(xiàn)與PPMessage的集成物赶。可以通過更改‘網(wǎng)頁插件代碼’來實現(xiàn)對 PPMESSAGE 聊天圖標和聊天對話窗口的更多控制蹂风。您可以通過”網(wǎng)頁聊天鏈接“按鈕隨時查看聊天組件外觀和工作狀態(tài)喜命。
美化聊天界面
讓我們把插件代碼的格式變的好看些：
<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>
改變聊天按鈕的位置
默認情況下聊天按鈕的位置在整個網(wǎng)頁的右下角沟沙，改變聊天按鈕的位置需要在 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 還不夠聰明二庵，點擊聊天圖標后贪染，聊天對話窗口還是從默認的右下窗口彈出，這個效果可能不是你想要的：
聊天按鈕出現(xiàn)在聊天窗口的中央了催享。 這時候需要繼續(xù)更改窗口位置杭隙。
改變聊天窗口的位置
還是剛才的代碼，控制聊天窗口位置的是 view.launch_style.position/bottom因妙，分別表示聊天窗口是在瀏覽器的左側(cè)還是右側(cè)痰憎，以及距離瀏覽器的底邊高度。如果應(yīng)用自定義的 lauch_style攀涵，需要將 lauch_style.mode 指定為 custom铣耘。應(yīng)用了自定義的風格，聊天對話的窗口彈出動畫方式自動改變以故。position 可以取的值有 left/right/center蜗细； 如果 position 為 right 那么聊天窗口將從瀏覽器的右側(cè)滑出，如果是 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();
})();
實驗一下吧：
還有一個你想改變的，PPMESSAGE 也已經(jīng)替你想到了吊骤，改變聊天按鈕的圖標缎岗。
隱藏聊天按鈕的圖標
隱藏聊天按鈕的圖標需要一個新的變量，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 一起使用鸭巴。
下面你一定需要打開關(guān)閉聊天窗口的接口了眷细，因為聊天按鈕已經(jīng)被隱藏了，本來打開和關(guān)閉聊天窗口是它來完成的奕扣。
打開薪鹦、關(guān)閉聊天窗口
調(diào)用 PP.show() 去打開聊天窗口掌敬，PP.hide() 去關(guān)閉聊天窗口惯豆，唯一需要注意的是一定要在 PP 對象已經(jīng)存在的情況下使用。
執(zhí)行效果如下：
開發(fā)者可以在處理指定元素的 click奔害、hover 等事件的時機來調(diào)用 PP.show() 或者 PP.hide()楷兽。如果想了解 PPMESSAGE 的聊天窗口的打開狀態(tài)可以用 PP.isOpen() 來檢查，如果正在使用類似 angularjs 這樣的前端框架华临，那么就可以用 ng-if/*ngIf 來綁定不同的界面操作按鈕芯杀。
開發(fā)者也可以通過 onHide 和 onShow 來響應(yīng)聊天窗口打開和關(guān)閉的事件，通過回調(diào)函數(shù)來控制自己的界面顯示：
PP.onHide(function() {
});
PP.onShow(function() {
})
用程序發(fā)送一條消息給座席
在 首頁 的產(chǎn)品價格中雅潭，PPMESSAGE 的來訪者如果點擊 ‘想了解更多’揭厚，網(wǎng)頁程序就會自動冒充客戶給座席發(fā)送一條消息，實現(xiàn)的方法是調(diào)用了 PPMESSAGE 的內(nèi)部 API扶供，這些 API 是不能夠直接使用的筛圆，因為沒有上下文；如果有像發(fā)消息這樣的例外椿浓，一定會明確說明太援。
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;
}
通過調(diào)用這個 send_message 函數(shù)就可以發(fā)送文本消息給客服。免去了客戶手動輸入扳碍。
響應(yīng)來消息的事件
如果聊天按鈕被隱藏提岔，那么它本身所附加的功能和體驗也一樣被隱藏掉了。特別是當訪客在你的網(wǎng)頁瀏覽的時候笋敞，座席人員發(fā)送給訪客的信息提示會看不見碱蒙。
這時候前端開發(fā)者需要考慮處理 PPMESSAGE 的來消息事件，PPMESSAGE 通過創(chuàng)建一個 CustomEvent 來通知有新消息到來夯巷，這是 PPMESSAGE 的構(gòu)建事件的過程：
var event = new CustomEvent("event:ppmessage:incoming-message", {
user: { // 哪個座席發(fā)送的消息
user_fullname:,
user_icon:,
uuid:,
},
messageType:, //TEXT/IMAGE
message: {
text: {body:,},
image: {url:,}
}
});
document.dispatchEvent(event);
開發(fā)者可以這樣收到這個消息：
document.addEventListener("event:ppmessage:incoming-message", function(e) {
console.log(e);
});
設(shè)置訪客自定義字段值
在網(wǎng)頁客戶端可以為訪客的自定義字段賦值赛惩，這樣可以便于給訪客分類巧还，或者為流程將訪客導(dǎo)向不同的座席做一些提前的數(shù)據(jù)準備。
這個接口必須在聊天組件已經(jīng)成功加載的情況下執(zhí)行
window.PP.setVar({"extra_field_TEXT_1": "Hello World"}, function() {
//成功設(shè)置
}, function() {
//設(shè)置失敗
});
上邊的代碼演示了給一個訪客的自定義字段進行賦值坊秸，自定義字段的內(nèi)部名稱為 extra_field_TEXT_1麸祷，賦值為 Hello World，這個值可以在流程中讀出褒搔，也可以顯示在訪客的詳細信息之中阶牍。
如果在網(wǎng)站上同時顯示幾個座席信息，比如‘售前’星瘾、‘售后’走孽、‘技術(shù)’等等，讓訪客根據(jù)自己的需要點擊不同的座席進行溝通琳状；就可以響應(yīng)訪客的不同的點擊事件進行自定義字段賦值磕瓷，然后再打開聊天窗口，這樣座席人員就知道訪客是想找誰溝通：
window.PP.setVar({"extra_field_TEXT_1": "STH_BASED_ON_DIFF_BUTTON"}, function() {
//成功設(shè)置
window.PP.show();
}, function() {
//設(shè)置失敗
});
