在线客服聊天系统 PHP Live Chat 二次开发

针对PHPLiveChat在线客服系统的不足,如依赖谷歌地图、定位精度差等问题,本文介绍了如何进行二次开发以适应国内环境,包括替换地图API、改进定位服务、修复邮件功能及动态更新主题色。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    在线客服聊天系统 PHP Live Chat,原官方地址https://livechat.mirrormx.net/,我下载于某源码分享网站。

        本系统在使用中有以下几个不足: 

                1 采用了GOOGLE MAP ,国内无法使用

                2 定位接口https://lcapi.mirrormx.net/v1/geolocation/query   ,在国内定位 精度太差,跟换接口会出现IP不能定位问题

                3 邮箱接口异常,无法发送邮件

                4 调用JS方法不能动态更新客户端聊天窗口主题色

        为此,我分析了相关代码,做了适应国内的相关二次开发。

 A 地图采用国内的百度地图

            views/admin/index.html

                .....

JavaScript

		
			<!--
            <script src="<?php echo $app->asset('js/app/view/admin/MapView.js') ?>"></script>
			-->

 

              ...

JavaScript

        <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=YbMXiMrWb86X9FSSZ71xExIMXeRHVAw6"></script>		
	<script>
		var mp = new BMap.Map("allmap");
		var point = new BMap.Point(116.404, 39.915);
		mp.centerAndZoom(point, 14);
		mp.enableScrollWheelZoom();
		mp.enableInertialDragging();
		mp.enableContinuousZoom();		
		function bdmap(){	
			var size = new BMap.Size(10, 20);
			mp.addControl(new BMap.CityListControl({
				anchor: BMAP_ANCHOR_TOP_LEFT,
				offset: size,
				// 切换城市之前事件
				// onChangeBefore: function(){
				//    alert('before');
				// },
				// 切换城市之后事件
				// onChangeAfter:function(){
				//   alert('after');
				// }
			}));			
		}
		function newloc(x,y){
			var s_x=Number(x).toFixed(4);
			var s_y=Number(y).toFixed(4);
			var point = new BMap.Point(s_x, s_y);	
			mp.centerAndZoom(point, 14);
			mp.panTo(new BMap.Point(s_x,s_y));
			var marker = new BMap.Marker(point);  // 创建标注
			mp.addOverlay(marker); 
			marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画   			
		}
	</script>	

B  国内IP定位 用baidu

        ../js/customer-chat-widget.min.js

        

JavaScript

    t.Geolocation = function() {
        this.info = n(), this.empty = !0;
        var t = this;
        this.requestInfo = function(n, o) { 
			o = o || "", i.get(e.geolocConfig.url + o, function(e) {
					if(e.country_code.length>0){
						$.get("/php/api/loctionapi.php",function(data){
							e.city=data.city;	
							e.latitude=data.latitude;
							e.longitude=data.longitude;
							e.region_name=data.regionName;
							t.info = e, t.empty = !1 							
						});
					}else{
						t.info = s(e), t.empty = !1 
					}						
					
				}).always(function() {
					n && n(t.info) 
				}) 
		}
    }

            其中/php/api/loctionapi.php 是自己做的一个接口,以此系统当前 的JSON 方式导出接口
C   邮箱问题

                将/php/lib/PHPMailer 目录下相关类更新,调用发送邮件相关参数

D  JS调用动态更新客户端窗口主题,初始化打开状态

                主要用到的方式为HTML 向frame posetmessage消息

                frame响应消息设定相关初始化状态
             

JavaScript

            <script>
                function resetstyle(){             
                    window.addEventListener('message',function(e){    
                        var value = e.data;
                        //子页面如果接收到的data的值是'return',则调用返回方法向父页面发送数据
                        if (value != null && value.match("background")){
                            var nv=value.replace("background","");             
                            for(let i=0;i<document.getElementsByClassName('customer-chat-header').length;i++){
                                document.getElementsByClassName('customer-chat-header').valueOf()[i].setAttribute("style","background:"+nv);
                            }
                            //
                            if(document.getElementById('chat-send-button')){
                                document.getElementById('chat-send-button').setAttribute("style","background:"+nv);
                            }
                            //document.getElementById("customer-chat-content-chat-box").setAttribute("style","border:2px solid "+nv);
                            //var tc="customer-chat customer-chat-widget chat-box customer-chat-visible";
                            //document.getElementById("customer-chat-widget").setAttribute("class",tc);
                           
                        }  
                        else if(value != null && value.match("click")){
                            document.getElementById('customer-chat-button-toggle').click();
                        }         
                    }, false);      
                    
                }
              
            </script>

    最后 此二次开发的在线客服系统JS前端调用方法:

JavaScript

<script>
    (function(d,t,u,s,e){
       e=d.getElementsByTagName(t)[0];
       s=d.createElement(t);
       s.src=u;
       s.async=1; 
       f=d.createElement("a")
       f.id='iframe_style'
       f.hidden=true;
       f.text="1,#0d86ff"; //  1/0 初始化时就打开/关闭     #0d86ff 主题色
       e.parentNode.insertBefore(f,e);  
       e.parentNode.insertBefore(s,e);
    })(document,'script','//kfxt.91hu.top/php/app.php?widget-init.js');   
</script>

 

案例:https://zb.haoniu7.com
转载链接 http://91hu.top/post/6.html

PHP_Live_Chat_Pro 是全球十佳PHP在线客服排名第一的在线即时聊天系统,官方售价50美金, 此源码内附中英文双版、使用文档、视频教程。 亲测安装绝对没问题,请大家放心下载、愉悦使用 (注:php 版本要求5.4以上)。 ============================================= PHP_Live_Chat_Pro 更新日志: 2018年4月29日: 添加了新语言: DE - 感谢kevmaster, IT - 感谢whitehub, RU - 感谢websystemspro, 新用户开始讲话时添加声音通知 修复了widget初始化代码中的HTTP / HTTPS协议切换, 某些服务器上存在固定图像上传问题, 添加了对某些HTTP请求中发生的多个以逗号分隔的IP地址的正确解析, 修复PHP兼容性细节导致“弃用的构造函数”警告, 修复了某些网站上发生的小部件到页面通信问题, 修复了消息体中无协议链接的解析。 2017年11月7日: 修复了文件上传代码中的PHP兼容性错误, 在消息中修复URL解析以正确处理URL中的括号字符, 将小部件初始化代码更改为异步,非阻塞的代码, 某些服务器上发生固定会话超时错误, 为运营商添加状态开关(在线/离线), 修复了在某些服务器上安装时导致错误的SQL代码, 修复了有时初始欢迎信息的错误时间计算, 更新的SMTP处理代码,允许禁用SSL证书验证, 修复了在某些服务器上登录后导致问题的SQL兼容性错误。 2017年7月26日: 修复了缺失的翻译, 增加了对移动应用和QR码部分的支持, 添加了对widget初始化代码的改进。 2017年5月24日: 修复了与旧版本PHP不兼容的问题,导致窗口小部件无法在某些服务器上显示, 修复在线用户,编辑部门和编辑操作员部分的滚动问题, 固定移动小部件的按钮定位。 2017年5月16日: 添加了“谈话成绩单到电子邮件”功能, 配置中的固定URL在通过HTTPS安装期间导致问题, 在管理面板中修复了有时错误的消息输入填充, “历史记录”选项卡中的固定名称和电子邮件查询。 ----------------------------------------------------------------
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值