OpenIM在线客服咨询聊天Html5_阿里百川云旺客服聊天实例下载
2018-12-25 14:45:04  By: dwtedx

最近在研究阿里百川的云旺客服聊天系统,需要集成到App里面,如果用原生写的话得分别集成Android和IOS,还是很麻烦的,所以我的方案是写一个H5页面让App里面调用URL就好了,恰好云旺的客服也提供的H5的SDK,下面分享一下集成方法,和遇到的问题。问题主要有两个。

1、聊天气泡显示问题,显示会错位,然后行高也不对。

2、H5发送一条消息的时候会显示两条一模一样的消息。


1、引入JS SDK文件

<!-- IE8及以下支持JSON -->
<!--[if lt IE 9]>
	<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
<![endif]-->
<!-- 自动适配移动端与pc端 -->
<script src="https://g.alicdn.com/aliww/??h5.imsdk/2.1.5/scripts/yw/wsdk.js,h5.openim.kit/0.5.0/scripts/kit.js" charset="utf-8"></script>


2、初始化聊天系统

window.onload = function(){
    WKIT.init({
        uid: ´dwtedx´,//xinsuiyundong
        appkey: 23445443,
        credential: ´123456´,
        touid: ´雪灵菱´, // 在百川控制台设置的E客服账号
        sendMsgToCustomService: true,
        hideLoginSuccess: true,
        welcomeMsg: "你好,工都名车客服MM竭诚为您提供服务!",
        theme: ´orange´ //ruby, yellow, orange, green, lightgreen, blue, lightblue, purple, pink, red
    });
}


3、解决当前版本聊天气泡显示问题

<style>
    .wkit-msg-item{
        padding: .25rem .4rem;
        line-height: .8rem;
        margin-top: .4rem;
    }
    .wkit-arr {
        margin-top: .4rem;
    }
</style>


4、H5发送一条消息的时候会显示两条一模一样的消息

WKIT.init({
    uid: ´dwtedx´,//xinsuiyundong
    appkey: 23445443,
    credential: ´123456´,
    touid: ´雪灵菱´, // 在百川控制台设置的E客服账号
    sendMsgToCustomService: true,
    hideLoginSuccess: true,
    welcomeMsg: "你好,工都名车客服MM竭诚为您提供服务!",
    theme: ´orange´, //ruby, yellow, orange, green, lightgreen, blue, lightblue, purple, pink, red
    onMsgSent: function(data){
        console.dir(data);
        //修复消息重复,移除最后一条消息,非官方解决办法
        var wkits = document.getElementsByClassName("wkit-clear");
        var wkit = wkits[wkits.length - 1];
        var parent = document.getElementById("J_wkitMsgContent");
        parent.removeChild(wkit);//通过父节点移除wkit
    }
});


以上就是我在使用阿里百川的云旺客服聊天系统方法和遇到的问题以及问题是解决方案,我想,随着版本的更新,H5发送一条消息的时候会显示两条一模一样的消息的这个BUG肯定会被解决的,以后大家注释或删除相关代码就可以了。

阿里百川的云旺客服聊天系统实例源代码下载链接: 阿里百川的云旺客服聊天系统 密码: 7gah

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+