网易七鱼 web快速接入

最新推荐文章于 2023-03-29 15:44:24 发布

星星上的程序媛

最新推荐文章于 2023-03-29 15:44:24 发布

阅读量2.5k

点赞数 3

分类专栏：其他

本文链接：https://blog.csdn.net/liuy_1314/article/details/102948487

版权

其他专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

星星上的程序媛

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
网易七鱼 web快速接入

开发指南：https://qiyukf.com/docs/guide/web/注册https://qiyukf.com/register/signup?tag=register机器人设置【应用】-----> 【机器人】对话设置【应用】-----> 【在线系统】demodemo相关页面一定要放到测试服务器（http://xxxx.com/），本地打不开会话，我也不...
复制链接

扫一扫

专栏目录