Web/H5开发指南

微客服致力于为开发者提供极致用户体验的多渠道在线客服系统,包括 App、微信、web/h5等. 官网SDK下载.

注解

个别地区会因为移动运营商的原因造成域名解析错误, 从而无法连接普通服务器, 所以需要使用ip服务器. Web端需要使用ip服务器链接, 同时客服也需要登录ip服务器

一. 准备工作

  1. 登录 管理后台,到 我的应用 页面,点击 创建应用 并保存
  2. 创建工作组, 并将相应的 ‘工作组ID’ 填写到 js代码 中相应的位置
  3. 分配客服,使用分配的客服账号登录 PC客服端下载

小技巧

说明:在新的应用创建过程中,请尽量填写准确的信息,便于我们为您提供更加周到的服务

_images/web1.jpg _images/web2.jpg _images/web3.jpg

二. Web在线客服

  1. 漂浮框形式

    获取js代码, 注:请务必将“工作组ID”替换为上一步中分配的: 工作组ID

    1
    2
    3
    <!-- 微客服漂浮框  begin-->
    <script type="text/javascript" src='http://free.weikefu.net/AppKeFu/weikefu/web/float.php?wg=工作组ID&robot=false' charset="UTF-8"></script>
    <!-- 微客服漂浮框  end-->
    

    或者使用ip服务器

    1
    2
    3
    <!-- 微客服漂浮框  begin-->
    <script type="text/javascript" src='http://free.weikefu.net/AppKeFu/floatip/web/float.php?wg=工作组ID&robot=false' charset="UTF-8"></script>
    <!-- 微客服漂浮框  end-->
    

    举例:假如你的客服工作组ID为: wgdemo, 则你的js代码应该为:

    1
    2
    3
    <!-- 微客服漂浮框  begin-->
    <script type="text/javascript" src='http://free.weikefu.net/AppKeFu/weikefu/web/float.php?wg=wgdemo&robot=false' charset="UTF-8"></script>
    <!-- 微客服漂浮框  end-->
    

    或者使用ip服务器

    1
    2
    3
    <!-- 微客服漂浮框  begin-->
    <script type="text/javascript" src='http://free.weikefu.net/AppKeFu/floatip/web/float.php?wg=wgdemo&robot=false' charset="UTF-8"></script>
    <!-- 微客服漂浮框  end-->
    
  2. 页面底部对话框形式

    并将js代码放置于自己的网页 </body>的前面 (注意:需要替换掉其中的“工作组ID”)

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    <!-- 微客服底部对话框开始 -->
    <link rel="stylesheet" type="text/css" href="http://free.weikefu.net/AppKeFu/weikefu/web/css/minichat.css"></link>
    <script type="text/javascript" src="http://free.weikefu.net/AppKeFu/weikefu/web/js/jquery.min.js"></script>
    <script type="text/javascript">
           $.ajaxSetup({cache: true});
           $.getScript("http://free.weikefu.net/AppKeFu/weikefu/web/mini.php", function() {
                   //将“工作组ID”替换掉
                   Mini.launch('工作组ID', false);
           });
    </script>
    <!-- 微客服底部对话框结束 -->
    
  3. 固定链接形式

    以固定链接的方式添加在线客服代码到网页中:(注意:需要替换掉其中的“工作组ID”)

    1
    <a href="http://free.weikefu.net/AppKeFu/weikefu/web/chat.php?wg=工作组ID&robot=false" target="_blank">咨询客服</a>
    

    或者使用ip服务器

    1
    <a href="http://free.weikefu.net/AppKeFu/floatip/web/chat.php?wg=工作组ID&robot=false" target="_blank">咨询客服</a>
    
  4. 电商模式

    涉及参数:goods, goodspic, goodsname, goodsprice, goodsurl

    1
    2
    3
    4
    5
    6
    7
    8
    参数解释: 1. goods, 是否显示电商模块,取值:true:显示, false:不显示
    2.goodspic, 商品图片, 内容请填写可以访问的图片url网址
    3.goodsname, 商品简介
    4.goodsprice,商品价格
    5.goodsurl, 商品链接
    参数具体位置请参考下图
    参考实例:goods=true&goodspic=http://weikefu.net/AppKeFu/images/dingyue.jpg&goodsname=电冰箱家用电器&goodsprice=2000&goodsurl=http://weikefu.net
    例如: http://free.weikefu.net/AppKeFu/weikefu/web/chat.php?wg=wgdemo&robot=false&goods=true&goodspic=http://weikefu.net/AppKeFu/images/dingyue.jpg&goodsname=电冰箱家用电器&goodsprice=2000&goodsurl=http://weikefu.net
    

    注解

    注意:如果传入参数中含有?或&等特殊符号时,请首先将参数编码之后传入,比如 urlencode(参数)

  5. 机器人应答

    涉及参数:robot

    1
    2
    3
    参数解释:
    robot, 如果设置robot=false,则默认接入人工客服,
    如果设置robot=true,则默认接入机器人应答
    

    注解

    注意:需要首先在管理后台设置机器人应答内容

  6. 附言

    涉及参数:postscript

    1
    2
    参数解释:postscript, 当成功对接客服之后,自动发送此参数内容给客服
    参考实例:postscript=这里是附言消息
    
  7. 自定义聊天窗口标题和logo

    涉及参数:hidenav, title, logopic

    1
    2
    3
    4
    5
    6
    参数解释:
    1.hidenav, 是否隐藏顶部导航, 如果要隐藏设置为true,否则设置为false
    1.title, 对话窗口标题
    2.logopic, 对话窗口logo图片,参数内容请填写 可访问的图片url网址
    参数具体位置请参考下图
    参考实例:hidenav=false&title=测试标题&logopic=http://free.weikefu.net/AppKeFu/weikefu/web/img/kefu-avatar.png
    

    注解

    注意:部分安卓浏览器点击聊天窗口左上角按钮无法正常返回上一级页面, 建议设置hidenav=true参数隐藏导航, 引导用户使用浏览器自带返回按钮

  8. 自定义客服头像

    涉及参数:hideavatar, kefuavatar

    1
    2
    3
    4
    5
    参数解释:
    1.hideavatar, 是否显示头像,取值: true,隐藏头像不显示; false,显示客服头像
    2.kefuavatar, 客服头像图片网址,参数你内容为可访问的图片url网址
    隐藏客服头像参考实例: hideavatar=true&kefuavatar=任意值不起作用
    自定义客服头像参考实例:hideavatar=false&kefuavatar=http://weikefu.net/AppKeFu/images/dingyue.jpg
    

三. Wap在线客服

  1. 漂浮框形式

    获取js代码, 注:请务必将“工作组ID”替换为上一步中分配的: 工作组ID

    1
    2
    3
    <!-- 微客服漂浮框  begin-->
    <script type="text/javascript" src='http://free.weikefu.net/AppKeFu/weikefu/wap/float.php?wg=工作组ID&robot=false' charset="UTF-8"></script>
    <!-- 微客服漂浮框  end-->
    

    或者使用ip服务器

    1
    2
    3
    <!-- 微客服漂浮框  begin-->
    <script type="text/javascript" src='http://free.weikefu.net/AppKeFu/floatip/wap/float.php?wg=工作组ID&robot=false' charset="UTF-8"></script>
    <!-- 微客服漂浮框  end-->
    

    举例:假如你的客服工作组ID为: wgdemo, 则你的js代码应该为:

    1
    2
    3
    <!-- 微客服漂浮框  begin-->
    <script type="text/javascript" src='http://free.weikefu.net/AppKeFu/weikefu/wap/float.php?wg=wgdemo&robot=false' charset="UTF-8"></script>
    <!-- 微客服漂浮框  end-->
    

    或者使用ip服务器

    1
    2
    3
    <!-- 微客服漂浮框  begin-->
    <script type="text/javascript" src='http://free.weikefu.net/AppKeFu/floatip/wap/float.php?wg=工作组ID&robot=false' charset="UTF-8"></script>
    <!-- 微客服漂浮框  end-->
    

    将js代码放置于自己的网页 </body>的前面 (注意:需要替换掉其中的“工作组ID”)

  2. 固定链接形式

    以固定链接的方式添加在线客服代码到网页中:(注意:需要替换掉其中的“工作组ID”)

    1
    <a href="http://free.weikefu.net/AppKeFu/weikefu/wap/chat.php?wg=工作组ID&robot=false" target="_blank">咨询客服</a>
    

    或者使用ip服务器

    1
    <a href="http://free.weikefu.net/AppKeFu/floatip/wap/chat.php?wg=工作组ID&robot=false" target="_blank">咨询客服</a>
    
  3. 聊天记录

    参数history, 可选值: true(显示聊天记录) 或者 false(隐藏聊天记录)

    显示聊天记录:

    1
    http://free.weikefu.net/AppKeFu/weikefu/wap/chat.php?wg=工作组ID&robot=false&history=true
    

    隐藏聊天记录:

    1
    http://free.weikefu.net/AppKeFu/weikefu/wap/chat.php?wg=工作组ID&robot=false&history=false
    

重要

注意:设置电商参数和客服头像、机器人问答、隐藏导航栏等均参考web相关参数进行配置

四. 微信自定义菜单

替换以下链接的“工作组ID”为第一步中分配的:工作组ID

1
http://free.weikefu.net/AppKeFu/weikefu/weixin/chat.php?wg=工作组ID&robot=false

或者使用ip服务器

1
http://free.weikefu.net/AppKeFu/floatip/weixin/chat.php?wg=工作组ID&robot=false

举例:假如你的客服工作组ID为: wgdemo, 则你的自定义菜单链接应该为:

1
http://free.weikefu.net/AppKeFu/weikefu/weixin/chat.php?wg=wgdemo&robot=false

或者使用ip服务器

1
http://free.weikefu.net/AppKeFu/floatip/weixin/chat.php?wg=wgdemo&robot=false

重要

注意:设置电商参数和客服头像、机器人问答、隐藏导航栏等均参考web相关参数进行配置

五. 其他

提示

更新日期:2017/11/22, 技术交流QQ群:474794719