chat21/chat21-web-widget

chat21-web-widget

chat21-web-widget 是一款基于Firebase和Angular5构建的免费实时聊天插件，用于网站访客与客服团队的交流支持。通过该插件，您可以与网站访客实时互动，收集反馈并解答问题。更多信息请访问：[***]

!聊天插件示例

使用 chat21-web-widget，您可以：

• 邀请网站访客分享反馈和建议，更好地了解他们的需求
• 即时回答访客问题，增强信任度
• 轻松添加代码片段到您的网站
• 使用基于Google Firebase、Angular5和Bootstrap构建的HTML5插件

核心功能和特性

• 向预设用户发送直接消息
• 接收团队的实时支持
• 聊天情绪反馈表单
• 支持自定义公司logo和颜色配置
• 免费且开源

使用场景和适用范围

适用于各类需要客户支持的网站，如企业官网、电商平台等。可帮助企业收集访客反馈、即时解答问题、提升用户信任度，实现高效的客户支持。

前提条件

• 安装 Git
• 安装 Angular CLI：执行 npm install -g @angular/cli（更多信息：https://github.com/angular/angular-cli#installation%EF%BC%89
• 创建 Firebase 项目：可在 [***] 免费创建
• 安装 "Chat21 Firebase 云函数"：参考说明 https://github.com/chat21/chat21-cloud-functions

使用 Docker Compose 运行 Tiledesk

如需一键在服务器上安装所有 Tiledesk 组件，请参考 https://github.com/Tiledesk/tiledesk-deployment/blob/master/docker-compose/README.md

安装步骤

1. 克隆仓库（或使用带标签的版本）：
   git clone https://github.com/chat21/chat21-web-widget <您的路径>

2. 进入项目路径：
   cd <您的路径>

3. 构建项目：
   npm install

配置说明

开发环境配置

修改 src/environments/ 目录下的 environment.ts 文件，使用 Firebase 项目的配置信息填写 'firebase' 部分。

environment.ts 示例

typescript
export const environment = {
  production: true,
  version: require('../../package.json').version,
  remoteConfig: false, // 为提升性能，不加载远程设置
  chatEngine: 'mqtt', // 或自定义引擎
  firebaseConfig: {
    apiKey: '修改为您的API密钥',
    authDomain: '修改为您的认证域名',
    databaseURL: '修改为您的数据库URL',
    projectId: '修改为您的项目ID',
    storageBucket: '修改为您的存储桶',
    messagingSenderId: '修改为您的消息发送者ID'
  },
  apiUrl: 'https://<您的TILEDESK服务器>/',
  baseImageUrl: 'https://<您的TILEDESK服务器>/',
  tenant: 'tilechat',
  defaultLang: 'en',
  shemaVersion: '1'
};

生产环境配置

对于生产环境，修改 src/environments/ 目录下的 environment.prod.ts 文件。

environment.prod.ts 示例

typescript
export const environment = {
  production: true,
  ... // 其他配置与开发环境类似，根据生产需求调整
};

构建生产版本

执行以下命令构建项目，构建产物将保存在 dist/ 目录中。使用 -prod 标志进行生产构建：
ng build --prod --base-href --output-hashing none

部署方式

部署到Web服务器

将 dist 文件夹的内容复制到Web服务器（如Apache或Nginx）。

开发服务器

执行 ng serve 启动开发服务器，访问 http://localhost:4200/。修改源代码后，应用会自动重载。

部署到AWS S3（可选）

执行以下命令同步到AWS S3：
aws s3 sync . s3://tiledesk-widget

如需使用不同的AWS配置文件：
aws --profile f21 s3 sync . s3://tiledesk-widget

若使用AWS CloudFront，请启用gzip压缩。

使用Docker运行

要在8080端口运行Chat21-web-widget，请执行：

bash
# 下载环境变量示例文件
curl https://raw.githubusercontent.com/chat21/chat21-web-widget/master/env.sample --output .env

# 编辑.env文件配置参数
nano .env

# 运行Docker容器
docker run -p 4200:80 --env-file .env chat21/chat21-web-widget

插件实际效果

可在 [***] 查看该插件的配置效果。