研发人员能够运用插件或某些API调用来查看可用于为您的应用程序供给聊天功能的平台。
仍然供给tel支持？你有无想过你网站的实时聊天效果？虽然大都数人避免tel交流并且无时间阅读电子邮件，但实时聊天能够是供给有效支持和与拜访者创立关系的完美选取。您能够忘记所有“你能用语音拼写你的电子邮件吗？”并快速回复刻录请求。实时聊天能够节省你的时间，供给更广泛的拜访者照片，加强客户的忠诚度，乃至减少压力导致的压力经过tel。
什么是Chatra？
Chatra是一个用户友好的网站信使工具，能够帮忙您即时帮助网站拜访者并与她们创立可连续的关系。Chatra为您供给了一个有效对抗购物车放弃的机会，避免了电子邮件支持平常的代价昂贵的延迟，并且在竞争激烈的商场环境中非常重要。即使您不在办公室，她们的移动应用程序亦能够帮忙您拜访。
怎样将其添加到您的网站
要将Chatra添加到您的网站，您应该在她们的右上角网站上注册，经过发送到您的电子邮件位置的链接验证您的Chatra帐户，并在Chatra仪表板中设置您的秘码。
手动添加代码
您能够从仪表板中的“ 设置和自定义”选项卡复制窗口小部件代码 ，并将其粘贴到网站的代码中，最好在结束</head>标记之前。
Chatra与大都数CMS平台集成，如Shopify，Wordpress，Joomla，Drupal，Wix等。您能够在这儿查看最流行系统的所有指南。
WordPress的插件
Chatra持有自己的WordPress插件，因此呢您能够容易地将其添加到您的网站。倘若您的网站是基于WordPress的，请根据以下过程操作：
首要，登录您的WordPress管理面板，
而后转到插件→添加新的。在“搜索插件”字段中输入“chatra”。安装并激活插件。转到设置→Chatra聊天。在另一个浏览器选项卡中登录app.chatra.io，
而后从Chatra仪表板中的setup and customize部分复制窗口小部件代码。返回WordPress
掌控台，粘贴代码，
而后按
保留更改。完成！Chatra应该出
此刻您的网站上。
在完成以上所有过程后，您可能没法看到窗口小部件。倘若是这般，请检测您是不是安装了任何缓存插件。清除网站缓存后，应表示小组件。
Shopify App
您可能晓得，Shopify是全世界在线商店非常受欢迎的CMS。Chatra供给了与该平台的即用型集成，因此呢您只需单击一下就可将Chatra添加到您的在线商店。您能够拜访Shopify上的Chatra应用页面，而后按绿色的“获取”按钮。瞧！Chatra在您的网站上。您能够运用相同的Chatra帐户连接其他Shopify商店。要执行此操作，只需登录商店的管理仪表板并重复第1步。
其他平台
Chatra与大都数流行的CMS平台集成在一块，如Bigcommerce，CS-Cart，Drupal，Ecwid，Joomla，Magento，Opencart，Tilda和Wix。倘若您在Chatra网站上找不到适用于您平台的指南，请检测您是不是能够选取将自定义HTML代码添加到您的网站，或联系Chatra支持以获取正确的指南。
运用API
安装完成后，能够从app.chatra.io上的仪表板更改大部分设置（如窗口小部件文本，按钮颜色和位置等），更改将应用于您网站上的窗口小部件即时的。但Chatra还为研发人员供给了一个API，即使在免费计划中亦能够运用基本功能。让咱们仔细瞧瞧它们的有些功能。
改变颜色
Chatra仪表板准许您仅更改聊天按钮的颜色，并且您只能从其调色板中选取一种颜色。
运用下面的API代码，您不仅能够为聊天按钮设置自己的颜色，还能够为信息气泡设置自己的颜色。
window.ChatraSetup = {
colors: {
buttonText: #f5f5f5, // chat button text/icon color
buttonBg: #5ece1a, // chat button bac公斤round color
clientBubbleBg: #e7ffd1, // visitor’s message bubble color
agentBubbleBg: #deffff // agent’s message bubble color
}
}
在主窗口小部件代码之前添加此代码（倘若您运用Shopify，则添加到theme.liquid文件中），它将覆盖Chatra仪表板中的设置。倘若您有多个拥有区别调色板的网站，这亦很方便。
改变体积
倘若您认为聊天按钮或窗口针对您的网站来讲太大或太小，请运用以下代码更改其体积：
window.ChatraSetup = {
chatWidth: 400,
chatHeight: 550,
buttonSize: 75
}
此代码亦位置于主窗口小部件代码之前。
设置语言
Chatra日前有7种语言版本：英语，德语，法语，西班牙语，俄语，葡萄牙语和荷兰语。倘若在设置中选取了多种语言，Chatra会检测拜访者的浏览器语言并向其表示相应的版本。
然则，运用API能够让您设置语言，因此呢将忽略浏览器语言。它准许您在网站的英文版本上运用英文版本的英文聊天窗口，德语版本等等。要设置语言，请运用以下代码：
window.ChatraSetup = {
language: fr
};
fr 在上面的代码中表率法语。其他可能的语言变量：en，de，es，nl，pt和ru。Chatra还准许您将窗口小部件文本转换为当前不支持的其他语言（例如，从英语转换为日语）。查看她们的文档以这里处翻译小部件。
请重视，window.ChatraSetup只能在页面上运用一次，因此呢倘若运用区别的API选项，请保证将所有选项组合到单个对象中。
将Chatra连接到您的自定义按钮
倘若要经过单击自定义按钮打开聊天窗口，请运用以下代码：
<!-- Custom button anywhere on the page -->
<button onclick="Chatra(openChat, true)">Open chat window</button>
基本上，它是能够安置在页面上任何位置的随时可用的代码。倘若您已有设计按钮，请将"Chatra(openChat, true)" 设置添加到该按钮。这般，您能够在页面上添加一个聊天按钮，该按钮能够放在页眉，页脚，购物车页面或任何可能有用的位置。
倘若你只是想用自己的按钮，隐匿默认的一个，运用此CSS代码：
#chatra:not(.chatra--expanded) {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none;
}
将其添加到CSS文件中或将其包装到
标记中并在重点窗口小部件代码之前添加它。
高级选项
上面列出的所有示例以及其文档中JavaScript API部分中列出的其他选项均可在免费计划中找到。高级API选项仅适用于付费套餐和试用期，并且需要您自动编码。您能够：
将自定义信息传递到Chatra仪表板。
将对话历史记录绑定到用户的帐户。默认
状况下，Chatra会将对话历史记录连接到浏览器Cookie，
然则，
运用此选项，您的
拜访者将在用于
拜访您网站的所有设备上
持有相同的对话历史记录。
运用webhooks从Chatra获取数据。这可用于与第三方工具（例如，CRM）集成，并
准许您从Chatra获取对话历史记录和访客信息。
运用REST API将数据发送到Chatra。例如，您
能够向注册客户发送自动订单状态更新。将REST API与webhooks相结合，您
能够在第三方应用程序中获取
信息并回复它们，
同期在Chatra中实时更新对话历史记录。
结论
Chatra是一种功能强大且高度可配置的方式，能够与客户创立联系，并为客户供给反馈并寻求帮忙。设置起来很简单，倘若你对某些东西不满意，正如你所看到的，你能够用几行代码改变它。
发表于 2024-8-22 15:08:59
