小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能。

1. 普通客服按钮添加

 <button open-type='contact' session-from=''>客服-联系我们</button>

2. 悬浮客服按钮添加,图片自定义

大家看地图的有个客服图片图片资源。大家去iconfont 网站去找一个就可以了

index.wxml

<button class="kf_button" open-type="contact" session-from="weapp">
<image class="kf_image" src="../../resources/img/kf.PNG"></image>
</button>

index.wxss

.kf_button{
background-color: rgba(, , , );
border: 0px;
height: 100rpx;
right: ;
bottom: 20rpx;
position: fixed;
}
.kf_button::after{
border: 0px;
}
.kf_image{
z-index: ;
width: 100rpx;
height: 100rpx;
}

芝麻小客服 小程序关注公众号的电商多客服系统 http://xiaokefu.hotapp.cn

小程序中添加客服按钮contact-button的更多相关文章

  1. 微信小程序自定义微信客服按钮

    微信小程序官方api中提到的微信客服,是一个固定的组件,图标样式固定,大小最多27px 很明显这个是不能满足我们各种奇葩需求的.下面提供一个野蛮的自定义方法. 比如做一个这样的按钮: 图标用自定义的, ...

  2. 微信小程序 功能函数 客服

    <view> <view class='btn-img'> <image class='image-full' src='../../imgs/index/tab6.pn ...

  3. 小程序mpvue怎么点击按钮获取button里面的值

    在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法 方式一:数据绑定 这种情况的话,对 ...

  4. 【微信小程序】:客服消息教程

    1.本教程完全链接W3Cschool的教程,已经讲的非常清晰和透彻. 2.链接:https://www.w3cschool.cn/weixinapp/weixinapp-api-custommsg-c ...

  5. 微信小程序中在swiper-item中遍历循环添加多个数据内容(微信小程序交流群:604788754)

    在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签,那就需要使用wx:for循环.如果按小程序的简易教程,循环加在block中,而swiper-item放在里面.所有 ...

  6. Senparc.Weixin.MP SDK 微信公众平台开发教程(二十一):在小程序中使用 WebSocket (.NET Core)

    本文将介绍如何在 .NET Core 环境下,借助 SignalR 在小程序内使用 WebSocket.关于 WebSocket 和 SignalR 的基础理论知识不在这里展开,已经有足够的参考资料, ...

  7. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  8. 九、小程序 Redux详解与在小程序中怎么使用(action和reducers)

    什么是Redux ​ Redux我们可以把它理解成一个状态管理器,可以把状态(数据)存在Redux中,以便增.删.改.例如: 从服务器上取一个收藏列表,就可以把取回来的列表数据用Redux管理,多个页 ...

  9. 直播平台源码搭建教程:微信小程序中的直播如何去掉水印

    直播平台源码搭建教程:微信小程序中的直播如何去掉水印 本文与大家分享一下直播平台源码搭建教程,如何去掉直播视频的水印 var services = require('../../lib/service ...

随机推荐

  1. Windows 2008 asp.net 配置

    目录 1.     前言.. 32.     部署环境.. 32.1         服务器环境信息.. 33.     磁盘阵列配置.. 44.     安装操作系统.. 45.     安装软件. ...

  2. Minimum Spanning Trees

    Kruskal’s algorithm always union the lightest link if two sets haven't been linked typedef struct { ...

  3. oracle的PDB启动

    /*以管理员身份登录*/sqlplus / as sysdba /*查看CDB的状态*/select status from v$instance; /*开启startup,默认是open*/star ...

  4. php 微信调用扫一扫

    类库代码: <?phpclass JSSDK { private $appId; private $appSecret; public function __construct($appId, ...

  5. linux 常用命令及实例

    转载:https://www.cnblogs.com/xiaoyafei/p/9163976.html 在linux中,绝大多数命令都参照 命令 选项 参数 选项:适用于调整命令的功能的 参数:指的是 ...

  6. 我的第一篇博客:vue-cli配置项目

    注意:在安装vue-cli之前一定要确保安装了node和vue 安装配置node:下载node(https://nodejs.org/en/)然后一路无脑安装 查看安装是否成功:node –versi ...

  7. 删除log文件末尾中指定的行数

    /// <summary>        /// 删除log文件末尾中指定的行数        /// </summary>        /// <param name ...

  8. SQL设置时间格式

    SELECT STR_TO_DATE('Jul 20 2013 7:49:14:610AM','%b %d %Y %h:%i:%s:%f%p') from DUAL; -- 执行后得到结果:'2013 ...

  9. tomcat配置去掉项目名称

    在web项目中,把代码部署到服务器上访问时都不带项目名,可以配置tomcat 在tomcat安装目录下,找到conf/server.xml打开 <Host name="localhos ...

  10. 【转载】 “强化学习之父”萨顿:预测学习马上要火,AI将帮我们理解人类意识

    原文地址: https://yq.aliyun.com/articles/400366 本文来自AI新媒体量子位(QbitAI)     ------------------------------- ...