1.背景

很多应用都有在线客服,最简单是实现就是利用人们常用的QQ

2.实现

步骤一:授权QQ通讯组件(普通QQ都是可以的)

授权链接:https://shang.qq.com/v3/widget.html

登录后,按照页面引导授权即可,很简单

只要把图中的链接放入到应用中即可,不过PC端与H5页面不一样

具体代码如下:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

</head>     

<h2>PC端客服</h2>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=851298348&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:851298348:41" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

<h2>移动端客服</h2>

<a href="mqqwpa://im/chat?chat_type=wpa&uin=851298348&version=1&src_type=web&web_src=baidu.com"><img border="0" src="http://wpa.qq.com/pa?p=2:851298348:41" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

</html>

3.测试

将页面在PC浏览器中打开如下,点击即可唤起QQ

注意:如果要测试移动端打开,需要在非微信浏览器中打开.

完美!

H5页面\PC端实现QQ客服功能的更多相关文章

  1. 【情人节来一发】网站添加QQ客服功能

    今年的元宵节遇到情人节,挺不自量力的,呵呵,开篇给各位讲个段子,早上一美女同学在空间发说说道:“开工大吉 起床啦,卖元宵,卖玫瑰,卖避孕套啦-有木有一起去发财的小伙伴?Let’s go…”,对于此种长 ...

  2. pc、移动端H5网站 QQ在线客服、群链接代码【我和qq客服的那些事儿】

    转载:http://blog.csdn.net/fungleo/article/details/51835368#comments 移动端H5 QQ在线客服链接代码 <a href=" ...

  3. 普通免费QQ客服在PC、手机端解决方案

    注意:以下测试 浏览器在Chrome,手机在iphone6 营销QQ.企业QQ(http://b.qq.com/)跟普通免费QQ(http://shang.qq.com/v3/widget.html) ...

  4. web页面接入QQ客服的方法

    在做微信二次开发的时候或者手机版网页的时候有人想在接qq客服,下面我就分享一下具体操作: 1,准备一个QQ号,可以是企业QQ,也可以是个人QQ.登录网址:http://shang.qq.com/wid ...

  5. jQuery网页右侧固定层显示隐藏在线qq客服代码

    CSS代码: @charset "utf-8"; ;;} html,body{font-size:12px;font-family:"微软雅黑";outline ...

  6. 企业QQ客服的添加

    商城项目需要用腾讯的企业QQ客服,但默认提供的是一个链接,点击后弹出一个新页面, 请确认 确认打开QQ与营销QQ4009928310对话? 点确认才弹出聊天窗口,并不是需求想要的效果,经过一番折腾联系 ...

  7. 网站QQ客服链接代码

    个人QQ客服代码 <a href="tencent://message/?uin=QQ号码">在线咨询</a> 企业QQ客服代码 <a href=&q ...

  8. spring boot+vue实现H5聊天室客服功能

    spring boot+vue实现H5聊天室客服功能 h5效果图 vue效果图 功能实现 spring boot + webSocket 实现 官方地址 https://docs.spring.io/ ...

  9. QQ客服出现“企业QQ在线咨询无权限在当前场景使用！” 问题

    加入了QQ“多客服”功能 会出现这个问题 解决办法: 在平台http://wp.qq.com/ 上设置,只需两步骤 步骤一:在http://wp.qq.com/set.html 里,安全级别选项,选择 ...

  10. js生成qq客服在线代码

    说到QQ客服在线代码,随便那么百度谷歌一下就会出来,一般都是 <a target="blank" href="http://wpa.qq.com/msgrd?V=1 ...

随机推荐

  1. java线程的park unpark方法

    标签(空格分隔): 多线程 park 和 unpark的使用 park和unpark并不是线程的方法,而是LockSupport的静态方法 暂停当前线程 LockSupport.park();//所在 ...

  2. xxlJob需要拆分开来，不用公用同一个jobHandler

    xxlJob需要拆分开来,不用公用同一个jobHandler 不能使用同一个jobHandler,通过使用不同的任务参数来定义两个不同的job,实际在xxlJob中使用jobHandler来注册的.解 ...

  3. 嵌入式 Arduino 期末复习

    1 基础知识 1.1 概述 对嵌入式的定义 国内定义:以应用为中心,以计算机技术为基础,软件硬件可裁剪,且适应系统对功能,可靠性,成本,体积,功耗严格要求的专用计算机系统. IEEE定义:用于控制,监 ...

  4. 16-Docker核心概念

    Docker镜像 Docker 镜像类似于操作系统镜像,可以将它理解为一个只读的模板. 例如,一个镜像可以包含一个基本的操作系统环境,里面仅安装了Apache应用程序,可以把它称为一个Apache镜像 ...

  5. Android7关机充电流程

    2021-09-03:Android7关机充电流程 背景 为了修改关机充电中的显示效果,因此学习一下Android 7关机充电的流程是怎么样的. 以msm8909为例. [ 94.741021] ch ...

  6. Ubuntu 22.04扩容LVM空间

    今天为了编译ThingsBoard的源代码,发现原来给虚拟机分配的40个G不够用了.于是乎在VMWare Workstation中扩容了40G的磁盘空间.但是此时lvm是不会自动扩容的,因此我们需要手 ...

  7. 配置上新 | 单双四核任选，TI Cortex-A53工业核心板仅198元起！

    创龙科技作为TI官方合作伙伴,在2022年9月即推出搭载TI AM62x最新明星处理器的工业核心板-SOM-TL62x. SOM-TL62x工业核心板基于TI Sitara系列AM62x单/双/四核A ...

  8. NXP i.MX 8M Plus工业开发板规格书(四核ARM Cortex-A53 + 单核ARM Cortex-M7，主频1.6GHz)

      1 评估板简介 创龙科技TLIMX8MP-EVM是一款基于NXP i.MX 8M Plus的四核ARM Cortex-A53 + 单核ARM Cortex-M7异构多核处理器设计的高性能工业评估板 ...

  9. UWP WinUI 制作一个路径矢量图标按钮样式入门

    本文将告诉大家如何在 UWP 或 WinUI3 或 UNO 里,如何制作一个路径按钮.路径按钮就是使用几何路径轮廓表示内容的按钮,常见于各种图标按钮,或 svg 系贴图矢量图按钮 在网上有非常多矢量图 ...

  10. ASP.NET Core修改CentOS的IP地址

    最近做的一个产品中有个需求,就是客户使用的时候可以通过Web网页修改服务器的IP地址(客户是普通使用者,没有Linux使用经验,我们的产品作为一台服务器部署到客户机房,客户通过HTTP方式访问使用). ...