首页   /   帮助中心   /   操作手册   /   一洽个性化样式介绍

一洽个性化样式介绍

作者：一洽·在线客服系统      更新： 2021-03-23 14:16:33

个性化样式

样式库

样式库的配置就是访客端的界面展示，就是咱们常说的前端，echat的前端由于支持不同的路由启用不同的界面，所以可以设置不同的界面风格，然后在对应的路由下启用不同的样式就可以，界面如下图


样式分为2种：
web：包括pc端的访客web页面和手机端的访客web页面
微信：微信公众号咨询的访客样式

创建样式的两种方式：
1、点击加号直接创建



2、点击样式进行复制，直接将已创建的样式的所有内容复制成一个新的样式，如果我们需要创建的样式差别不大或是只是在该样式下进行修改部分内容的时候就建议直接复制一个，然后进行部分修改编辑



点击编辑开始正式编辑样式的前端效果，编辑的页面分为4个区域
A、路径展示区：展示目前编辑的位置是那个目录位置


点击对应的目录文字可以直接跳到对应的位置，比如当前我截图的位置是样式库——售前咨询这个样式——pc的图标设置位置，如果我现在点击售前会自动回到样式库的位置


B、访客端界面分类区：访客端展示的界面也分为很多种类，比如对话界面，留言界面，机器人界面等（稍后来详细介绍不同的界面），所以这个位置是针对不同界面的分类，选择不同的界面进行不同的界面自定义，如下图：

C、设置区：访客端的对应界面下的具体详细配置都在这个位置了，展示如下图：

D、预览区：
具体访客端的前端效果的预览位置，设置区没调整一步都可以在这个位置实时显示效果，帮助我们更真实的感受访客端的真实界面展示


下面我们依照B区访客端界面的顺序来详细介绍如何配置吧：
图标：
系统代码添加后默认会生成一套图标在网站上展示，这个图标的样式，位置，展示内容等都是在这个位置来设置的,点击 直接上传自定义的在线和离线的图标就可以了
Ps:需要注意的是这个位置添加的图标样式是所有样式的公共样式池，在任何一个样式中添加的新的图标，在其他样式修改的时候也是一样都显示在设置区域的，可以直接勾选该样式下要显示哪一个样式



点击选中的图标就出出现编辑按钮，点击进入编辑图标：


启用页内图标就是在网站的右下角或左下角展示一个咨询的文文字按钮,文字限制10个字以内,页边距下边据都支持修改调整的,包括图标的颜色,其中在线图标和离线图标实际上是文字前面的对话框那个白色的位置的图标,



图标手机端:

也是和pc端一样的创建的都会在这个公共图标池里面勾选该样式需要启用的图标就可以的


邀请窗口
邀请框可以选中是不是出现这个关闭的按钮，并且自己上传喜欢的按钮，如图是我们系统自带的关闭按钮样式


如果上传了背景图邀请语言和提示等都还在我们系统设置的话就不勾选：仅使用背景图、、、
接收和拒绝还可以上传按钮的背景图，另外也可以不显示拒绝按钮，只能点击接受或关闭


设置邀请的出现时间，邀请次数，重复间隔时间等等
手机端的邀请设置和pc的是一样的


对话窗口：
访客对话的主窗口，设置界面展示如下图，同样的分pc和手机端


pc对话界面的前端有2种展现方式：

1、新页面：访客点击图标咨询以后是浏览器弹出一个新的对话页面，访客端展示如图：
2、小浮窗：访客点击图标以后是在当前页面内打开加载起一个对话框，访客端展示如下图：
下面


这两种可以同时启用在网站上，也可以分别开启其中一种，跟据客户的喜好，下面分别介绍两种样式的设置操作，
1、新页面pc对话窗口设置：
对话窗口标题：访客咨询的时候是可以看到对话框的标题的，这个位置可以改成你们自己公司的公司名称



logo：访客端对话框上可以自定义自己公司的logo，logo是自适应的，尺寸建议100*40，支持格式："jpg", "gif", "png", "ico", "bmp", "jpeg"  



主题背景颜色：控制访客端的对话框颜色在这个位置，
主题背景文字：就是主题背景上显示的：结束对话，关闭，发送



访客气泡和字体控制：



客服气泡和文字控制：



系统气泡和文字，图标



忙碌是是否允许访客预先输入：默认是不勾选，允许访客排队或等待的时候先发送问题的，方便访客先整理好问题，节省时间



结束对话按钮设置：



二维码图标：可以勾选也不可以不选，访客手机扫这个二维码可以直接在手机的浏览器打开咨询窗口在手机上可以继续聊，支持自定义，但是注意的是自定义的只是对话框上结束对话旁边的小标志，访客鼠标放在这个标志上下拉显示的二维码是不能自定义的，由系统自动生成



对话框内部广告：

左侧广告和右侧广告：
大小是自适应的，当需要不显示一侧的时候直接把像素设置为0就可以的
支持图片自动上传和url地址粘贴，
高度默认是540



广告栏传参设置：对于办理了广告栏传参api的客户，可以设置更加高级的广告，比如根据咨询访客的地区，关键词，入口参数等等识别来展示不同的广告，比如来自关键词：一洽电商版这个关键词的就默认显示广告是电商版的介绍，国家是美国的就默认展示英文的介绍等等



默认头像设置：默认头像设置：
这里的是默认的客服和客户的头像
如果客服没有设置自己的对外头像形象就会展示这个头像，有自己的头像就会自动调用客服的自己的头像
如果访客是会员，并有自己的会员头像，或者是微信咨询的就显示客户自己的会员头像或微信头像，其他没有的都是使用这默认的头像



pc小浮窗的设置：
和新页面不同的是logo和二维码在小浮窗上不可以同时出现，只能2选1


顶部栏：由于内页打开的所以我们可以控制这个页面打开的缩小和最大化以及关闭



最小化以后的访客端就只剩下内页图标了效果如下图：



最大化以后就自动弹出了刚才上面设置的新页面对话框了


访客关闭小浮框会提示是不是要结束对话，是的话就关闭对话结束了当前对话


设置浮窗在网站上浮出的大小


自动弹屏分为在线和离线两种，下面分别介绍：



在线自动弹屏设置：
首先如果不需要自动弹屏的话不需要勾选任何一个，那么网站上的页内图标不会自动展开，只有访客点击的时候才会展开



勾选这个以后访客打开网
站设置的时间15秒后会自动加载起来小浮窗，提示访客可以在此咨询客服，此时对话是没有正式开始的，客服那边也是这个对话的。访客端界面如下：



其中的提示语设置位置在：



勾选打开窗口自动对话，表示弹出的时候对接已经自动开始，客服那边是可以看到这个对话的，可以直接发消息给访客，



访客端如下






勾选这个以后主动对话访客或者是访客缩小窗口时只要客服发送消息就会自动展开访客的页内小浮窗，下面看一下不开和开了的效果对比



当访客点击最小化隐藏后多少秒时间再次自动加载小浮窗出来，这个一般是针对做销售的公司使用



离线自动弹屏设置：



离线的规则比在线要少一些，只有进到网站多长时间后自动加载小浮窗和访客隐藏后多少秒再次加载，因为离线没有客服接待所以不涉及发消息和接通的情况

url设置：
这个功能非常方便访客，把自助办理的内容或介绍通过增加按钮的形式加到访客端的工具栏，访客可以点击自助查看和办理

操作步骤是点击添加创建图标和绑定链接，具体的配置和访客端的效果是这样的：




2、手机对话窗口：




半屏:当需要设置半屏效果的时候就设置这个顶边距



3个界面的展示如下：



留言窗口：
当客服不在线的时候还是可以继续打开对话发送消息，类似QQ的留言一样的，系统会在第二天客服上班的时候根据留言分配的规则自动把留言信息分到客服那边，客服就可以直接在软件上回复客户消息
留言的窗口设置包括：
1、pc留言窗口（新页面、小浮窗）
2、手机流程窗口（新页面、小浮窗）
下面我们来详细分介绍具体操作：

1、pc留言窗口——新页面



表示开启留言，开启后访客的留言消息会从系统自动分发给客服，采用的是我们系统自带的留言系统，开启后访客端的界面是这样的：



第三方url：如果客服不在的时候不想采用我们的留言界面和功能可以自己做你们的留言板来收集留言或提示信息，访客咨询的时候会自动打开你设置的这个地址去留言



关闭:如果不需要服务下班以后的客户也不接待留言信息就可以直接关闭留言，关闭留言以后的访客端只展示留言的提示,但访客不支持文字输入



效果如下：



1、pc留言窗口——小浮窗

小浮窗和新页面的留言窗口的设置是一样的，只是访客端的展示效果不同，小浮窗开启留言后是这样的如下图


关闭以后的效果是这样：


2、手机留言窗口:手机端的留言窗口设置和pc的是完全一样的，操作同上


界面的展示如下：




机器人窗口：
开启机器人系统以后，机器人的界面展示是在这里进行配置的，基本上和pc对话窗口的是一样的，详细的操作可以看对话窗口的介绍，界面展示如下图：



提示语:
访客端的人工系统提示语言都在这里设置，分为
pc提示语（新页面，小浮窗）
手机提示语

pc提示语——新页面
等待提示：一般是当客服是忙碌或者是已经达到上限了以后开始等待或排队的时候提示的
排队提示语：当达到上限或是设置忙碌状态后就开始进入排队，提示访客的排队数，基本上这2句话是一起出现的


欢迎语：对话接通后的提示语
结束语：对话结束后的提示语


离线语：客服不在线的留言提示语


警告提示：
注意这个提示是当客服说完话了以后“访客”隔了多久一直没说话才会提示访客



首次提醒的时间，这个起提示的作用


这个提示出现以后就会自动结束对话了


客服发送消息后开始计时，如果已经隔了30秒客服又发送了一句，那么再重新开始计时，一定是以最后一句客服说话的时间开始计时的，默认是开启的


pc提示语——小浮窗
基本和新页面的一样，只是多了这个自动弹屏时候的提示语：


手机提示语
手机版和pc的基本都是一样的，操作可以参考pc的设置





入口
就是访客信息收集表是否需要开启，开启以后对话之前需要先填写资料才可以进到对话里去，设置包括：
1、pc界面（新页面和小浮窗）
2、手机界面
下面分别来介绍：

pc入口信息——新页面
入口信息收集开启

可以设置客服在线对话的时候先填写，也可以设置留言的时候也先填写，也可以同时都勾选








添加新的字段直接在这里添加，

需要必填才可以对话的才勾选必填，

需要单独一行的请勾选单独一行

同时区分游客和会员不同的身份咨询的时候是不是都要填写，
这个一定要勾选的，不然是不出现访客信息表的哦~

对话验证码：
为了防止访客误操作或者遇到对话框被刷屏的情况，可以开启对话前验证码，访客输入验证信息后才可以进入对话操作界面如下：


pc入口信息小浮窗和手机入口信息的设置和pc新页面的基本是一样的，就不最赘述
下面展示访客端的不同咨询方式的效果：


入口收集表和验证码既可以同时开启，又可以只开启其中一个，根据客户情况自己设置，
只开信息收集的效果：



只开验证码的效果：



同时开启的效果：



满意度调查：
访客对话后对对话进行服务评价，评价的界面支持丰富的展示风格和多级菜单评价，方便更清楚的知道访客评价的满意和不满意的原因，设置的分类如下：
1、pc满意度—新页面/小浮窗
2、手机端满意度

pc满意度—新页面





需要访客进行评价的话就勾选这个


设置访客在多久时间内可以评价，超过设置的时间后就不可以评价了


是否允许访客可以重复评价，还可以同时设置重复评价的时间的限制

默认的满意度评价：

默认的是一级评价，实际上我们可能还需要知道访客评价满意或不满意的时候具体是对产品不满意还是对服务不满意，不满意的原因等等，这些都是可以在二级菜单里面让访客再次评价的，而且为了访客操作方便直接点击就可以提交，二次菜单的添加直接点击展开下拉选项，勾选二级内容，操作如下：



如果想改变评价的项目名称（满意，不满意等），也可以修改评价的文字项目，操作和效果如下：



如何希望做更多的满意度自定义，比如改变评价时候的星星展示，改变一级评价的标题，改变评价的5个等级那就勾选满意度的项目自定义如下图位置：



Pc小浮窗和手机端的配置和pc新页面都是一样的，只是访客端的界面不一样，如下是3种打开方式的展示图：



微信样式的编辑：
添加样式的时候选择微信样式即可创建一个微信端的样式


微信样式的编辑步骤：
1、对话界面
2、留言界面
3、机器人界面
下面我们分别来介绍这3种界面的设置

对话界面

访客在微信端的对话界面是微信本身的界面，由于是第三方的系统我们只是把对话接管，所以无法设置界面的样式封配置，可以修改的对话内的提示语等信息，具体可以设置的信息如下：
常规提示语：


和web端的提示语一样的，只是访客端的界面展示不同，如下图


排队提示语：当开始进入排队或客服是忙碌状态的时候就会弹出这个排队的提示语，如下图


根据等待提示语里面的：可以回复（0）取消本次排队，如果访客等不急结束了，那提前输入的信息都会以留言的形式发送到系统的留言中，客服可以直接回复留言到访客的微信上

长时间未回复提醒设置：和web端一样的当访客长时间不回复消息就可以开启警告和关闭的提醒，关闭提醒后自动结束对话


满意度调查：微信端同样的客户设置对话结束后对服务做成评价，设置步骤和访客端效果如下图：

设置评价的时间限制，包括是否可以重复评价，多久内可以重复评价

主题图片：支持上传自定义的图，
主题文字：显示在图片下方的提醒评价
主题链接：如果要做自定义满意度的可以这里加你们的满意度评价的页面地址，点击后跳转到该页面去评价客服会或收集建议反馈等，收集到的信息由你们自己收到和整理不在一洽系统中

评分项目设置：评价的按钮，默认开启2个，也可以开启多个，支持按钮自定义上传，点击对接的行可以编辑评价按钮的文字


留言界面：
提示语，警告提示都和对话页面一样要设置一下，唯一的区别是关闭提示是默认一定要开的，否则对话没法结束就没法计算对话量了


留言关闭设置：
设置一个关键词，当可回复这个关键词就可以自动结束本次留言


机器人界面
机器人界面的其他提示都是在机器人设置里面去单独设置每个机器人的，这里只需要设置警告和关闭的提醒就可以了，和留言关闭提示一样的默认一定要开的，否则对话没法结束就没法计算对话量了

满意度子菜单配置

个性化样式_满意度子菜单配置-满意度里面我们在配置满意度的二级菜单选项的时候显示的待选指标是在这个位置来添加的，参考填写内容:产品、服务、物流、环境等评价指标

咨询入口

如果需要咨询的时候访客点击图标弹出不同的技能或业务分组，就可以在这个位置建立入口分组的展示内容，访客端的效果如图：

下面来看看这个功能的具体操作设置吧：
咨询入口-pc
和样式中心一样，可以新建不同的入口，建立好的入口调用哪一个在添加代码的时候代码中调用就可以的：
创建入口的位置操作如下图：


重命名：新建好的入口可以修改重命名，id是系统自动生成的，修改不了，作为代码调用的参数
编辑：进入开始设置这个入口的界面展示

标题文字：这个是提示的标题告诉访客选对应的项目咨询进去以后再进入专属渠道咨询

对话窗口标题:进到入口的时候是还没接通客服的所以还不显示对话框的标题，所以这个时候要单独写一个标题通客服的所以还不显示对话框的标题，所以这个时候要单独写一个标题

单排显示入口数：选择的入口项目一排显示几个，比如选中2个和3个的效果是这样的：


选中颜色：鼠标放到对应的入口按钮上可以上拉出来这个入口的内容说明，说明的颜色展示，如下图效果：

选中颜色：鼠标放到对应的入口按钮上可以上拉出来这个入口的内容说明，说明的颜色展示，如下图效果：

新建入口上的分类：

主题图标：这个是可以自定义上次的也可以不上传，建议上传：
入口内容：鼠标移到入口上会自动加载出一个出这个入口的内容说明，可以写入口的业务内容也可以是服务时间等

入口参数：
这个参数命名是为了访客咨询以后知道访客是点的哪一个按钮进来的，另外根据这个参数来对应路由，当入口参数等于：购买咨询的时候启用哪个路由

关联路由：就是点击这个入口打开的对话启用哪一个路由，展示哪一个样式，选中此处的路由会自动加载出现在启用的路由提供选择

同步为手机的主题列表：由于手机端和pc的设置是一样的所以可以直接同步设置过去，就不需要再设置一遍了哦

（非特殊说明，本文版权归原作者所有，转载请注明出处 :https://www.echatsoft.com/doc-detail-654.shtml ）
「Echat」一洽专业在线客服系统，访客通过PC网站、手机网站、商城系统、微信、APP、小程序等多渠道咨询，系统智能支持：多样式选择、多路由接入、多业务整合、多角色监控、多维度分析，多平台统一管理。
一洽客服系统，给沟通多一种可能~~
                

想在手机上、随时获取互联网前沿资讯以及各种意想不到的"福利"吗？通过扫描二维码快速添加