开发人员可以使用插件或某些API调用来查看可用于为您的应用程序提供聊天功能的平台。
仍然提供电话支持？你有没有想过你网站的实时聊天效果？虽然大多数人避免电话交谈并且没有时间阅读电子邮件，但实时聊天可以是提供有效支持和与访问者建立关系的完美选择。您可以忘记所有“你能用语音拼写你的电子邮件吗？”并快速回复刻录请求。实时聊天可以节省你的时间，提供更广泛的访问者图片，提高客户的忠诚度，甚至减少压力造成的压力通过电话。
什么是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商店。要执行此操作，只需登录商店的管理仪表板并重复第一步。
其他平台
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 background 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是一种功能强大且高度可配置的方式，可以与客户建立联系，并为客户提供反馈并寻求帮助。设置起来很简单，如果你对某些东西不满意，正如你所看到的，你可以用几行代码改变它。