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. 升级babel7后，直接引用element-ui中没有暴露出来的组件image-viewer.vue导致的打包错误

    问题 & 解决方案 升级babel7后,原先代码中像这样直接引用element-ui组件的地方,出现了报错 Module parse failed: Unexpected token (1:0 ...

  2. el-upload拍照上传多个文件报错 ERR_UPLOAD_FILE_CHANGED问题

    最近同事使用el-upload上传图片时出现一个问题,连续拍照多个图片的时候,循环调用接口上传会报错: ERR_UPLOAD_FILE_CHANGED,网上找了很多方案没有解决,下面是我自己的解决过程 ...

  3. 微信支付普通商户与AppID账号关联管理-授权

    微信支付普通商户与AppID账号关联管理 二.名词解释 名词 释义 微信支付普通商户 公司企业.政府机关.事业单位.社会组织.个体工商户.个人卖家.小微商户.(微信支付商户接入指引) AppID 已通 ...

  4. C#.Net筑基-集合知识全解

    01.集合基础知识 .Net 中提供了一系列的管理对象集合的类型,数组.可变列表.字典等.从类型安全上集合分为两类,泛型集合 和 非泛型集合,传统的非泛型集合存储为Object,需要类型转.而泛型集合 ...

  5. Python 安装 matlabengin 时遇到报错：setup.py install is deprecated. !! 以及 Cannot update time stamp of directory 'dist\matlabengine.egg-info' 的解决方案

    目录 Python 安装 matlabengin 时遇到报错:setup.py install is deprecated. !! 以及 Cannot update time stamp of dir ...

  6. 【ZeroMQ】zguide 第一章 部分翻译

    为了更好的阅读体验,请点击这里 本文大部分内容翻译自 Chapter 1 - Basics,原因是之前翻译的版本太老了,不得不亲自披挂上阵拿机器翻译一下.只截取了部分自己可能用得到的,所以如果有看不太 ...

  7. VSCode因网络问题导致下载更新/扩展出错

    VSCode因网络问题导致下载更新/扩展出错 可尝试方法:   问题0: VSCode出现网络问题排查方法?       法1: 启动时加上选项 --log-net-log=netlog.json   ...

  8. 背包dp——01背包

    01背包是背包dp的基础的重点,重点的基础!!! 题意概要:有 n 个物品和一个容量为 W 的背包,每个物品有重量 w_{i} 和价值 v_{i} 两种属性,要求选若干物品放入背包使背包中物品的总价值 ...

  9. 一个难忘的json反序列化问题

    前言 最近我在做知识星球中的商品秒杀系统,昨天遇到了一个诡异的json反序列化问题,感觉挺有意思的,现在拿出来跟大家一起分享一下,希望对你会有所帮助. 案发现场 我最近在做知识星球中的商品秒杀系统,写 ...

  10. Vue 是如何实现数据双向绑定的？

    Vue 数据双向绑定主要是指: 数据变化更新视图 视图变化更新数据. 即: 输入框内容变化时,Data 中的数据同步变化.即 View => Data 的变化. Data 中的数据变化时,文本节 ...