网页聊天

[vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern”][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern”][vc_column][vc_column_text]

个性设置网页聊天页面

 

Grata 后端有数十种方法可以精确控制聊天在您网站上的显示和行为方式。 您可以随时更改聊天的外观,而无需更新您网站上的任何代码。

本文讨论如何调整聊天界面的外观。 我们将介绍如何在您第一次开始设置时在您的网站上添加聊天 ,以及 如何使用开发人员工具进行高级网络聊天控制。[/vc_column_text][/vc_column][/vc_row][vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern”][vc_column][vc_empty_space][vc_column_text]

调整对话框外观

[/vc_column_text][vc_empty_space][/vc_column][/vc_row][vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern”][vc_column width=”1/2″][vc_column_text]

颜色设置

您可以直接输入颜色代码,也可以点击显示计算机的颜色选择器预览颜色方块。

 

标题背景,标题文本

标题背景和文本颜色还将控制对话框最小化时按钮的颜色。

 

聊天布局

可以选择 1)所有信息左边对齐或 2)左右相对, 客服消息左边对齐,客户消息右边对齐。

 

字体设置

当选择字体系列时, 请注意您的字体并不总是可供用户使用,在这种情况下,将显示备用字体。如果您想指定自定义字体,请从下拉列表中选择“自定义”。

您可以使用逗号分隔自己的拉丁文和中文字体以及备用字体列表。
[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_single_image image=”17810″ img_size=”large” alignment=”right” onclick=”img_link_large” qode_css_animation=””][/vc_column][/vc_row][vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern”][vc_column][vc_empty_space][vc_column_text]

Z-index

Z-index控制一个元素出现在站点上的另一个元素的上面还是下面。Z-index高的重叠元素覆盖了Z-index低的重叠元素。Z-index设置在最小化时控制聊天的高度。通常Z-index很高(比如:10,000) 将确保聊天一直显示。但是,您可能希望聊天按钮出现在 cookie 策略弹出窗口下方或者在移动设备上有全屏导航菜单等。

 

URL追踪

如果您在Grata的其他位置使用网址追踪,请在此处设置您的网络聊天频道参数。使用五个UTM参数之一或使用“其他”指定您自己的参数和值的字符串,这些参数和值将附加到网页聊天中发送的任何链接。
[/vc_column_text][vc_empty_space][vc_column_text]

用户名

如果您聊天布局选择“左边对齐”您需要制定一个默认用户名 (如:“我”). 客服名可以使用Grata系统已设置了的用户名, 也可以制定一个客服名为所有客服员, 或者可以设置自定义客服身份
 

设置聊天语言

默认情况下,聊天界面显示简体中文还是英文根据用户的浏览器语言首选。如果您有中英文网站,您可能希望聊天界面语言匹配您网站的语言。为此,请在后段告诉我们您的默认语言和URL中的语言参数(例如“/en_US/”)或用于设置用户语言的cookie。

[/vc_column_text][/vc_column][vc_column][vc_empty_space][vc_separator type=”normal”][vc_empty_space][vc_column_text]

最小化时外观调整

[/vc_column_text][vc_empty_space][vc_column_text]最小化后,网络聊天将在您的网站上显示为浮动按钮或固定在网站底部的标题/标签。设置聊天按钮的外观时,可以选择数千个“Font Awesome”图标,可以上传自己的图标,也可以上传自己的按钮。[/vc_column_text][vc_empty_space][vc_tabs style=”boxed”][vc_tab title=”Font Awesome Icon” tab_id=”0a7a9d33-0f92-3″][vc_column_text]请从 Font Awesome Pro中选择数千个图标中的任意一个。列入:搜索“comment”以查看图标的聊天泡泡线。

Font Awesome搜索结果

[/vc_column_text][vc_empty_space][vc_column_text]找到图标后,在 Grata 后端输入图标名称。 输入名称后,左侧的图标预览会调整。

[/vc_column_text][vc_empty_space][vc_column_text]找到图标后,在Grata后端中输入图标名称。输入名称后,左侧的图标预览将调整。输入任何图标的名称,例如:

 

[/vc_column_text][vc_empty_space][vc_column_text]Font Awesome字体的另一个不错的功能是它们是字体文件,因此很容易将它们更改为任何颜色并将其缩放为任意大小。  

[/vc_column_text][vc_empty_space][vc_column_text]在“Font Awesome”图标选择的下方,您将找到按钮和图标的颜色和大小的控件。单击颜色方块以打开设备的颜色选择器,或将颜色十六进制代码复制并粘贴到该字段中。您需要为台式机和移动设备设置大小。按钮角设置可让您将按钮角从90度角变圆为一个圆形。

 

[/vc_column_text][/vc_tab][vc_tab title=”Custom Icon” tab_id=”463e201c-af5a-3″][vc_column_text]如果您想使用自己的聊天按钮图标,请为您的按钮类型选择“上传自定义图标”选项。点击“选择”按钮,将您的图标文件上传为PNG图像文件。您将能够调整图标和按钮的大小,以找到合适的尺寸。设置台式机和移动设备的大小。

要设置按钮和/或按钮边框的颜色,请单击颜色方块以打开设备的颜色选择器,或将颜色十六进制代码复制并粘贴到该字段中。按钮角设置可让您将按钮角从90度角变圆为一个圆形。

 

[/vc_column_text][/vc_tab][vc_tab title=”上传自定义按钮图片” tab_id=”1579808394787-2-4″][vc_column_text]要完全控制按钮的外观,您可以设计并上传自己的按钮为PNG图像文件。
 

您将需要为每种语言,在台式机与移动设备上使用不同大小的按钮生成几种不同的按钮排列方式,以及一组带有未读消息通知的图像。图片文件的尺寸将等于它在您网站上显示的尺寸;您将无法从Grata后端调整图像大小。

[/vc_column_text][/vc_tab][/vc_tabs][vc_empty_space][/vc_column][/vc_row][vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern”][vc_column][vc_empty_space][vc_column_text]

桌面标题

在桌面浏览器上,您可以选择 1) 使用上述任何按钮配置或 2) 最小化的聊天标题,允许您根据在线、离线或忙碌状态显示简短的文本消息。

 

缓冲 X/Y

这些控件允许您将按钮精确定位在浏览器的右下角之外。 确保您考虑了网站的所有页面,尤其是当您的网站使用返回顶部按钮时,该按钮可能仅在您向下滚动页面后可见。 如果您想根据您网站上的特定页面或事件进行位置调整,您可以 使用事件监听器来调整聊天位置

 

从您网站上的按钮启动聊天

您可以指定站点上的任何按钮 ID 或任何类别的按钮,以在用户单击或点击按钮时打开 Grata。 我们向您推荐Grata 开发人员工具 以实现最佳实现。发起聊天后,Grata聊天按钮将显示在您网站的所有页面上,因此用户在浏览页面时不会失去对话。
[/vc_column_text][vc_empty_space][vc_separator type=”normal”][/vc_column][/vc_row][vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern”][vc_column][vc_empty_space][vc_column_text]

设置在线,离线及忙碌显示

[/vc_column_text][vc_empty_space][vc_column_text]

在线显示

默认情况下,只要您有客服员登录到Grata,就会显示您的聊天图标。您还可以在设置页面 上设置正常的营业时间,这样我们只会在客服员登录并且您在工作时间内时显示聊天图标。用英文和中文设置标题和问候语。如果您希望使用网页上的自定义按钮启动Grata,则可以设置Grata聊天按钮/标题,以便在客服员在线时隐藏。


 

网络聊天问候中的链接

对任何问候消息中的链接使用 href 表示法:


请确保指定链接应该在同一浏览器选项卡中 (target="_parent") 或在新的浏览器选项卡中打开 (target="_blank")。如果您不设置目标,该链接将在聊天窗口中打开,造成毁灭性后果。[/vc_column_text][vc_empty_space][vc_column_text]

离线显示

当您的团队离线时,您可以选择隐藏聊天图标或显示联系名单。即使您选择隐藏聊天图标,您仍应设置离线标题和问候语。我们有默认五分钟的缓冲时间,以防止突然隐藏在您下线时间时可能正在为您的团队输入消息的用户的聊天。我们可以在合适的时间将您的标题状态更新为离线,同时仍允许该用户快速完成其消息并进行聊天。处于活动聊天状态的用户仍可以通过离线时间聊天,直到客服员关闭聊天并退出为止。

如果您选择使用离线联系列表,则必须设置一个电子邮件地址,我们将所有脱机邮件转发至该邮箱。
 

 

一些客户在离线时使用网络聊天窗口来显示常见问题解答内容。 如果您想这样做,请将网络聊天设置为在您的团队离线时继续显示。 您可以使用您的离线消息来显示您的常见问题解答,然后用户可以使用他们选择的号码或关键字进行回复。 您需要在 自动回复页面上添加您想要的回复。

[/vc_column_text][vc_empty_space][vc_column_text]

忙碌显示

如果您在设置页面,上设置了等待用户的容纳水准,则可以使用此设置隐藏您的网络聊天。例如,如果您的容纳水准设置为10,那么每当您在等候名单中达到十个或更多用户时,我们就会隐藏您网站上的聊天内容,以防止用户遇到不良体验。与离线行为一样,对于已经点击聊天的任何人,我们都有一个五分钟的缓冲时间,这样他们在打字时就不会遇到窗口消失的情况。[/vc_column_text][vc_empty_space][vc_column_text]

高级设置

如果您想要更好的控制您网站上的Grata聊天,您可以探索使用Grata 开发者工具 以获得更多自定义选项。[/vc_column_text][vc_empty_space height=”64px”][/vc_column][/vc_row]