网易七鱼 web快速接入

开发指南：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

网易七鱼 web快速接入相关推荐

网易七鱼的使用(web代码接入）
最近用的网易七鱼客服系统,总结一下网易七鱼用代码接入网站的方法. 官网开发指南 web-sdk使用的demo都可以在上图里的接入demo里找到.接入demo直接下载是不能打开的. 代码里 ...
uniapp微信公众号h5接入网易七鱼客服系统
最近用的网易七鱼客服系统,总结一下网易七鱼用代码接入网站的方法. 官网: 网易七鱼 - 服务营销一体化解决方案专家开发指南: 概述 | 开发指南 web-sdk使用的demo都可以在上图里的接入d ...
网易七鱼在线客服系统web端对接
网易七鱼在线客服系统web端对接文档:http://docs.qiyukf.com/?page_id=28 具体接入代码 function get_WYQY_info(){/*--------七鱼配 ...
网易七鱼“大闹”客服行业，真能一举定乾坤？
自2015年以来,网易在云计算领域就不断发力,网易云信.网易视频云.网易蜂巢等产品相继推出,作为网易云推出的首款运营云,也是网易云的重要布局的网易七鱼在今年4月正式对外发布后,又于11月29日在北京举 ...
android网易七鱼客服系统
一.优点满足Web.App.微信公众号等全渠道的在线客户服务,支持客户信息展示,丰富沟通方式,超过100 项数据报表等功能 .一句话就是功能强大,聚合多个平台. 二.接入步骤: 1.在网易七鱼(ht ...
网易服务器修改权限等级,网易七鱼客服管理_七鱼客服管理人员权限设置_企业服务汇...
编者按:网易七鱼的客服权限设置功能能够方便企业针对不同角色的客服人员分配不同的系统操作权限,客服权限的分配主要包括了对系统设置权限.数据查看范围及导出权限.功能使用权限这三大类权限的分配,其中系统设置 ...
网易七鱼携手全球时刻，用AI打造社交新零售服务闭环
成立于2016年4月的全球时刻由杭州介百文化创意有限公司推出,定位于精品社群电商APP,以"分享改变生活"为品牌理念,为用户苛选全球好物,传递美好的生活方式.全球时刻以社交分享为主 ...
前端dashboard框架_微前端在网易七鱼的实践
一.前言网易七鱼是提供围绕客户服务与智能营销的 SaaS 平台.在七鱼业务中,有在线系统.呼叫系统.机器人.工单系统.数据大屏等业务线,它们分布在两个业务端,管理端和客服端.这两个端的功能框架类似, ...
微前端在网易七鱼的实践
一.前言网易七鱼是提供围绕客户服务与智能营销的 SaaS 平台.在七鱼业务中,有在线系统.呼叫系统.机器人.工单系统.数据大屏等业务线,它们分布在两个业务端,管理端和客服端.这两个端的功能框架类似, ...