开发指南:https://qiyukf.com/docs/guide/web/
注册
https://qiyukf.com/register/signup?tag=register
机器人设置
【应用】-----> 【机器人】
对话设置
【应用】-----> 【在线系统】
demo
demo相关页面一定要放到测试服务器(http://xxxx.com/),本地打不开会话,我也不知道为什么
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站接入客服</title>
<style>
body {
height: 3000px;
}
/*隐藏原有的图标*/
#YSF-BTN-HOLDER {
display: none;
}
.m-confirm {
width: 67px;
position: fixed;
top: 50%;
right: 0px;
background-color: #fff;
font-size: 12px;
color: #fff;
margin-top: -122px;
z-index: 9999;
}
.m-confirm p {
margin: 0;
}
.m-confirm .online:hover, .tel:hover {
background: #45a4ec;
}
.online {
height: 99px;
border-bottom: 1px solid #8dc7ff;
cursor: pointer;
background: #2594e9;
display: flex;
flex-direction: column;
align-items: center;
}
.i-sprite-1 {
background: url("./img/online.png") no-repeat center top;
width: 25px;
height: 25px;
margin: 28px 0 8px 0;
}
.tel {
height: 99px;
border-bottom: 1px solid #8dc7ff;
position: relative;
cursor: pointer;
background-color: #2594e9;
display: flex;
flex-direction: column;
align-items: center;
}
.i-sprite-2 {
background: url("./img/telephone2.png") no-repeat center top;
width: 25px;
height: 25px;
margin: 28px 0 8px 0;
}
.tel .content {
width: 138px;
height: 43px;
background: url("./img/telephone.png") no-repeat;
background-size: 138px 43px;
position: absolute;
opacity: 0;
top: 27px;
left: -147px;
z-index: 9999;
}
a:hover .content {
opacity: 1;
}
.tel .content {
color: #333333;
font-size: 16px;
display: flex;
align-items: center;
padding-left: 10px;
}
.top {
height: 35px;
background-color: #dbdbdb;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 8px;
font-weight: 900;
opacity: 0;
transition: opacity 1000ms;
}
.top:hover {
background: #e6e6e6;
}
.i-sprite-3 {
background: url("./img/top.png") no-repeat center top;
width: 67px;
height: 6px;
}
.top p {
color: #666;
font-weight: bolder;
height: 20px;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>客服DEMO</h1>
<div class="m-confirm">
<a class="online" onclick="ysf.open();">
<i class=" i-sprite-1"></i>
<p>在线咨询</p>
</a>
<a class="tel">
<i class="i-sprite-2"></i>
<p>电话咨询</p>
<div class="content">
<p>400-888-1234</p>
</div>
</a>
<a class="top" id="top" onclick="pageScroll()">
<i class="i-sprite i-sprite-3"></i>
<p>TOP</p>
</a>
</div>
<!--客服聊天接入代码-->
<script src="https://qiyukf.com/script/b90a9a4be28bcd71889a13bb709d4ea0.js" defer async></script>
<script src="js/index.js" defer async></script>
<script type="text/javascript">
//返回顶部
var oTop = document.getElementById("top");
var scrolldelay;
function pageScroll() {
window.scrollBy(0, -100);
scrolldelay = setTimeout('pageScroll()', 15);
}
window.onscroll = function () {
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrolltop > 300) {
oTop.style.opacity = 1;
} else {
oTop.style.opacity = 0;
}
if (scrolltop == 0) clearTimeout(scrolldelay);
}
</script>
</body>
</html>
demo相关截图
与机器人对话
与人工对话
需要注意的是要把客服状态改成在线,否则,进入人工客服时会进入留言页面
---------------------------------------------------我是华丽分割线----------------------------------------------------------------
如果没有什么特殊需求的话对接很简单,直接复制代码就可以了,我这里直接进入会话页面,所以需要执行window.onload = openSdk
(function (w, d, n, a, j) {
w[n] = w[n] || function () {
(w[n].a = w[n].a || []).push(arguments)
};
j = d.createElement('script');
j.async = true;
j.src = 'https://qiyukf.com/script/12c9e72ff3378d0cfe47ef7a2b71bda3.js';
d.body.appendChild(j);
})(window, document, 'ysf');
var isSdkReady = false;
ysf('onLayerload', function () {
isSdkReady = true;
})
//传输客户资料
ysf('config', {
uid: userInfoMsg.custId,
name: userInfoMsg.custName,
level: userInfoMsg.gradeId,
mobile: userInfoMsg.mobile,
data: JSON.stringify([
// {"key":"gradeName", "value":userInfoMsg.gradeName},
{ "index": 0, "key": "gradeName", "label": "xx", "value": userInfoMsg.gradeName },
{ "index": 0, "key": "custId", "label": "xxId", "value": userInfoMsg.custId },
]),
success: function () {
ysf('open');
}
});
window.openSdk = function () {
if (isSdkReady) {
// ysf('open');
location.href = ysf('url');
} else {
showMessage("sdk尚未加载成功,请稍后再试", 'error', 2000);
}
}
window.onload = openSdk