点击下面图片查看实例Demo↓
在下方购买获取下载码，输入解锁下载：
出售的是使用 Elementor Pro (点击免费下载) 制作的 Popups 在线客户侧边栏模板，通过Elementor导入到网站使用。在线客服侧边栏非常重要，高频展示催促客户快速联系我们从而提高转化率。带点击返回顶部功能，提高用户体验，居家旅行，建站必备！
市面上的客服插件已经很不错，例如我们出售的Chaty Pro客服插件已经能满足绝大部分人需求。可是插件也有不足：1- 影响速度，普遍增加 180~300 kb代码，含js影响渲染；2- 可自定义程度不高，完美主义者心结。
Elementor Pro现在自带 Floating Button功能，可在线导入客服侧边栏板块。目前只有Key激活官方版本才能使用，自定义程度不高，很多限制。支持的内容也很少，例如不支持微信二维码图片。迪亚莫觉得是个鸡肋的存在，对小白来说有点帮助，对完美主义者来说食之无味。
小迪我有强迫症，加上是完美主义者，所以我自己动手只用 Elementor Pro 制作了几个客服侧边栏Popups，响应式、速度快、自定义程度高、支持微信二维码，完胜Floating Button。
Tips: 只用Elementor Pro + 自定义代码制作，不需要其它插件。网站必须安装使用Elementor Pro，否则侧边栏无法使用。购买前请先了解清楚是否适用。每个样式需要单独购买下载码！
点击查看客服侧边栏实例，暂时只有几个样式，后期会不断增加。可以使用浏览器F12开发者工具查看手提端、平板端、手机端显示效果。图标以及按钮的形状、颜色、大小、间距、文字内容、背景色等可自定义。
样式1因为设计原因所以微信客服没放二维码图片，只放超链接。超链接栏你可以插入二维码图片网址或者设置点击弹出Popup，里面放二维码图片。请释放想象力。
关于手机端响应式：
所有样式手机端都是下图效果，横着固定浮动在页面最底部，这种显示效果转化率最高，最实用，需要给手机端footer设置 padding-bottom:70px; ， 底部留出大约70px空间给客服栏。
手机端也可以改成跟电脑端一样右侧悬显示，把自定义代码里面单独控制手机端样式的CSS代码删掉，再设置一下容器里面元素上下排列右侧对齐就行。
关于价格：
制作这些侧边栏花费迪亚莫具大时间精力，还要提供售后解决客户遇到的问题，按我们接单每小时价格算的话至少价值几千元！
别家也有卖这个东西，可是美观性、实用性、可自定义程度各方面不如我们，对方卖38元。我们价格很良心，VIP购买还有折扣。
在线客服侧边栏下载购买条款
虚拟产品具有可复制性，一经售出概不退款，详情请移步服务条款。请先登录后再购买，喜欢哪个样式购买哪个，购买获取下载码，输入相应样式密码区域点“解锁”即可下载。
迪亚莫为购买用户提供售后服务，插件使用过程有任何疑问请在下方评论留言，有问必答。
安装/ 使用方法
先按下方操作导入，激活侧边栏，让它在前端显示出来，然后再去调整位置和内容等。如果你一开始就调，到时候前端显示异常不好排查哪里出错。
需要先设置下Elementor，在 Elementor > “设置” > “特性”设置 里面启用下图2个功能。启用后能提升网站速度以及功能，我们建站都启用这2个设置。
导入模板方法：
1- 进入后台Elmentor“模板” 里面的 “Popups”板块。
2- 点击顶部的“导入模板”按钮，选择下载的模板，上传购买下载的文件，按步骤导入。
3- 使用 Elementor 编辑刚才导入的Popup模板，使用 Elementor 编辑。
4- 点击 “发布” 按钮隔壁的箭头，点击“Display Conditions”。
点击“Add Condition”设置客服侧边栏显示/生效范围，这是设置在哪些页面显示这个客服侧边栏。
按需设置生效范围 (侧边栏在哪些页面显示) ↓，一般是选择“Entir Site”会在前端所有页面显示。点击“Next”按钮进入下一步设置。
按下图点击启用“On Page Load”，时间建议保持默认别改，再点右下角“Save & Close”按钮保存即可。
最后清理所有缓存，去前台刷新页面查看，正常情况应该已经显示侧边栏。要调整位置和内容等请看下方教程，可自定义程度非常高！修改前请务必查看下方使用/修改教程。
在线客服侧边栏使用/修改教程
纯使用Elementor Pro制作，懂Elementor就知道怎么改，如果不懂Elementor先去百度找教程几分钟可以学会。迪亚莫加了一些自定义CSS，每段CSS都有标注，一看就知道啥意思，要改啥自己调就行。
Tips: 有些设置和代码如果看不懂或者不知道啥意思，就不要改，改了可能出错！！！不懂的话只按教程微调就好，不要放飞自我！遇到麻烦联系微信客服就对了。
为了减少大家大理解时间，大概说下修改要点。尽量不要改默认设置，每一个设置都有它的意义！改完及时点保存，去前端查看效果，出问题就在编辑界面按 Ctrl+ Z (可按多次)撤销操作(前提是没刷新过编辑页面)，再保存就能恢复。
调整客服栏位置
按下图进入设置界面。一般都是显示在右下角，默认设置好，不需要调整。
要调整边距的话，按下图方法调整，一般是调整距离右边和底部的间距，按需调。
更改每个图标框内容
点击右侧“结构”板块里面相应图标栏小部件，左侧会弹出相应内容板块。按需修改图标、文字、链接等内容就行。
图标和文字的颜色，大小在“样式”板块里面调整，这些都是Elementor基本简单操作，这里不过多解释。纯新手的话建议先百度下Elementor教程学习，得会才能用Elementor制作网站。
调整图标和文字颜色/大小
按下图顺序点击，找到修改图标和字体颜色、大小位置。
修改图标板块/按钮背景色、文本框颜色、三角形状颜色
样式1：电脑、手提、平板端、手机都是在同一个位置修改：1- 点击选中要修改的图标库小部件，2- 切换到 “高级设置” 板块，修改 “背景” 栏的 “颜色”。
样式2+样式3+样式4：电脑、手提、平板端颜色通过CSS代码修改：按下图顺序点击，展开“Custom Css”栏。
样式2在“Custom Css”里大概26和35行找到颜色代码，把 #b51717 替换成你所需颜色的 代码 就行。只替换颜色代码，其它不要改！颜色代码都是 # 号开头的，后面一般是6个数字。
新手不知道怎么查看某个颜色的代码？百度一下10秒内找到答案。
样式3的颜色代码在大概在“Custom Css”里第35和62行，样式4的大概在第26和53行。
样式2+样式3+样式4：手机端的图标框颜色代码在下图位置设置，跟样式1修改颜色的方法一样，替换颜色就行。因为手机端是给整个图标板块添加背景色，而电脑端等是只给图标和文本框设置背景色，所以设置方法不一样。
除了样式1和5，其它样式文字框前面有个指向右边的三角形箭头，也需要修改它的颜色，也是在“Custom Css”里面修改。
样式2：大概在第53行找到下图代码，把 #b51717 替换成你所需颜色的 代码 就行。
样式3：大概在第81行找到下图代码，把 #b51717 替换成你所需颜色的 代码 就行。
样式4：大概在第71行找到下图代码，把 #b51717 替换成你所需颜色的 代码 就行。
修改图标间线条
有些样式图标框之间有线条间隔（下图绿色框），要修改颜色按照下面方法。
按下图顺序点击，展开“Custom Css”栏。
样式3： 在“Custom Css”栏里大概53行，找到颜色代码，把 #ffffff69 替换成你所需颜色的 代码 就行。只替换颜色代码，其它不要改！颜色代码都是 # 号开头的，后面一般是6个数字。
新手不知道怎么查看某个颜色的代码？百度一下10秒内找到答案。
样式4： 在“Custom Css”栏里大概44行找到颜色代码。
修改图标按钮大小
大小通过自定义CSS修改，按下图顺序点击，展开“Custom Css”栏。
样式1：大概在第14和15行找到下图代码，修改2个数字6就行，改成大一点数字图标框就大点，只改数字其它别改！修改后的2个数字必须要一样才行，这样图标会上下对称。
样式2：大概在第28行找到下图代码，把12改成其它数字就行，改成大一点数字图标框就大点。只改数字其它别改！
样式3：大概在第37和38行找到下图代码，48是图标宽度，45是高度。只修改数字就行，改成大一点数字图标框就大点。只改数字其它别改！
样式4：跟上面样式3修改方法一样，大概在第28和29行找到下图代码。
替换微信二维码图片
图片尺寸建议做 100*100px，4周设置白边，这样好看些。下图是示例图片，仅供参考。微信二维码图片先上传到媒体库，然后复制图片网址。
按下图数字顺序点击，左边会弹出下图设置面板，直接替换文字和网址就行。注意：请谨慎操作，避免误删任何东西！只替换文字和网址，注意格式。包围网址的 ""符号不能删！
如果左侧面板太窄，把鼠标放到边板边缘，鼠标左键单击不放往右边拖动可以拉宽面板。搞完记得缩回去，面板太宽不方便后续操作。
替换邮箱、WhatsApp号码
替换邮箱：点击下图数字1图标框，在下图红色框位置，只替换邮箱地址就行。
替换WhatsApp号码：点击下图数字1图标框，在下图红色框位置，把138开头的11位数字替换成您的11位数手机号码就行。86是国际区号代表中国号码，不能删除。如果您用国外手机号码，把86改成相应国家区号。
新增/删减图标按钮（客服）
按下图方法，鼠标放在要修改的图标框上，点鼠标右键弹出选项卡，可以实现新增、删除等功能。
例如你要新增一个Skype客服按钮，复制WhatsAPP图标框，替换掉图标和显示名字，链接栏那里输入skype:XXX?chat 即可。XXX替换成您的Skype账号（下图）。设置完后请务必进行测试！
更多功能简码：
skype:XXX?chat：开始 Skype 文字聊天
skype:XXX?userinfo：查看 Skype 资料
skype:XXX?add：添加到 Skype 联系人列表
skype:XXX?call：开始 Skype 语音呼叫
skype:XXX?voicemail：使用 Skype 发送语音邮件
skype:XXX?sendfile：使用 Skype 发送文件
调整图标框间距
要调整图标框之间的距离，按下图找到调整位置。建议只调整样式1和样式2间距，样式3和4的图标框间距应该保持默认为0，否则会有空隙。
调整手机端图标栏边框
在手机端，第二个图标框开始，添加了1px的左边框，颜色为白色，其它电脑端之类边框为0。
按下图数字顺序点击，找到修改位置，按需调整。
