如何在您的 Web 应用程序中使用 Chatwoot 作为实时聊天功能

目录

一、简介

  1. 什么是实时聊天

  2. 实时聊天对您的业务的好处

  3. 将 Chatwoot 引入实时聊天

  4. 开始使用您的 Chatwoot

  5. 开始使用你的 webapp

  6. 结论

简介

电话和电子邮件是企业与客户沟通的两种方式,但它们都有其局限性。电话和电子邮件不适用于来自不同时区的人。电子邮件需要一段时间进行双重通信 - 发送电子邮件并收到回复。

在当今快节奏的世界中,我们已经看到了许多与企业和客户之间的低效和不良沟通有关的缺点](https://fsd.servicemax.com/2017/11/08/6-business-impacts-poor-communication)。这些缺点包括但不限于现有客户的流失、潜在客户的流失、利润的流失等。但是,有一个解决方案 - 实时聊天。

什么是实时聊天

实时聊天是一款在线交流应用程序,可让您和您的网站访问者实时聊天。

在线聊天是电话或电子邮件的绝佳替代品。您或您的访问者需要做的就是在聊天框中输入消息并发送。

实时聊天对您的业务的好处

以下是实时聊天功能的一些选定优势。要了解有关这些好处的更多信息,请单击此处。

  1. 更快的响应时间

  2. 灵活性

  3. 实时聊天有助于客户获取和入职

  4. 实时聊天支持 24/7 全天候支持

  5. 实时聊天可以让您在竞争中占据优势

  6. 为未来的营销活动创建联系人数据库。

将 Chatwoot 引入实时聊天

Chatwoot 徽标

Chatwoot是一个开源客户参与平台。它是 Tidio、Olark、JivoChat、Intercom、Zendesk 等其他实时聊天服务的替代品。 Chatwoot 是一个更好的选择,因为它允许您连接到您的客户对话渠道并从一个地方与您的客户交谈。 Chatwoot 支持多种语言,包括阿拉伯语、加泰罗尼亚语、捷克语、丹麦语、英语、芬兰语、法语、马拉雅拉姆语、荷兰语、葡萄牙语、西班牙语、瑞典语、越南语、中文(简体)、中文(繁体)

Chatwoot 是一种更好的方式来与您的客户交谈、管理对话、建立关系和取悦您的用户,所有这些都可以在一个地方完成。使用 Chatwoot,您还可以将 Facebook、Twitter、Whatsapp 频道、网站实时聊天、API 频道、移动应用程序与开源软件集成。

Chatwoot 入门

首先,您需要在 Chatwoot 平台上注册。为此,请前往https://chatwoot.com/然后点击创建新帐户进行注册。

Chatwoot-创建帐户

  • 然后填写你的详细信息

  • 注册后,您将收到一封确认您的帐户创建的电子邮件。

  • 点击“确认我的账户”链接确认账户,然后继续登录。

Chatwoot 注册

  • Chatwoot 仪表板将可供您完全访问,您可以开始将其集成到您想要的任何平台(网站、Facebook、Twitter 等)。

请参阅下图了解您的仪表板的外观。

chatwoot-dashboard

  1. 下一步是创建一个收件箱。收件箱频道就像一个交流中心,可以管理实时聊天、Facebook 页面、Twitter 个人资料、电子邮件和 WhatsApp 等所有内容。

  2. 接下来是选择您要添加的服务。这是我们将选择网站的地方。单击下图所示突出显示的区域以创建收件箱。 收件箱

  3. 下一步是配置网站和域名,以及所有标题和标语信息,如下所示

4.添加“代理”管理收件箱。请记住,只有指定的“代理”才能完全访问收件箱。

  1. 恭喜。网站频道创建成功仪表板

在本教程中,我将引导您在您的网站/网络应用程序中设置 Chatwoot。

开始使用你的 webapp

先决条件

1.代码编辑器(最好是VSCode)

  1. Chatwoot账号

  2. HTML、CSS和JavaScript的知识

设置你的开发环境

在命令行上,创建一个新文件夹

mkdir <project name> && cd <project name>

在您的项目中,可能是 HTML 网站,在您的footer中,在<script> </script>标记内,粘贴以下代码


      (function(d,t) {
        var BASE_URL="https://app.chatwoot.com";
        var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=BASE_URL+"/packs/js/sdk.js";
        g.defer = true;
        g.async = true;
        s.parentNode.insertBefore(g,s);
        g.onload=function(){
          window.chatwootSDK.run({
            websiteToken: 'nJ7K9Zoj8aNeATkGnRpPonjn',
            baseUrl: BASE_URL
          })
        }
      })(document,"script");

完成实施后,您应该看到以下内容。

聊天

此集成的实时版本可以在https://blogposts-eunit99.vercel.app/看到

结论

在本教程中,我向您介绍了如何在您的 Web 应用程序中使用 Chatwoot 作为实时聊天功能。我们使用 Chatwoot 了解了实时聊天及其与我们网站的集成。u200c

要了解有关 Aviyel 的更多信息,请在此处关注我们的讨论。在AviyelHQ加入 Aviyel 的 Twitter 空间。

u200c 更多教程和精彩内容,请关注我的推特@eunit99

Logo

ModelScope旨在打造下一代开源的模型即服务共享平台,为泛AI开发者提供灵活、易用、低成本的一站式模型服务产品,让模型应用更简单!

更多推荐