---
title: "多通路聊天整合實戰：開源聊天軟體 Rocket.Chat Omnichannel 平台部署與應用"
description: "透過 Rocket.Chat 的 Omnichannel 功能，整合網站聊天、WhatsApp、Facebook Messenger、Telegram 等多種通訊管道，打造統一的客戶服務平台。"
canonical_url: "https://blog.markkulab.net/post/rocket-chat-omnichannel-integration"
author: "Mark Ku"
author_url: "https://blog.markkulab.net/author/mark-ku"
site: "Mark Ku's Blog"
date_published: "2025-07-29 06:01:00 +0800"
category: "DevOps"
tags: ["rocket.chat", "omnichannel", "livechat", "docker", "mongodb", "customer service"]
language: "zh-TW"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
attribution: "轉載或引用請註明作者並附上原文連結"
---

# 多通路聊天整合實戰：開源聊天軟體 Rocket.Chat Omnichannel 平台部署與應用

## 多通路聊天整合的挑戰

現在客戶都希望透過各種管道跟企業即時溝通，特別是網站聊天功能，幾乎每個企業都需要。但是管理這麼多通訊系統真的很麻煩：

客戶體驗不一致、客服效率低、資料分散、成本又高，而且傳統聊天工具很難跟網站完美整合。

## 為什麼選擇 Rocket.Chat Omnichannel？

Rocket.Chat 的 Omnichannel 功能就是為了解決這些問題。它提供統一平台，讓企業可以統一管理所有通訊管道，智能路由分配對話，完整記錄客戶互動，還能即時分析客服績效。最重要的是它是開源的，完全免費使用。

### 支援的通訊管道

支援在網站中嵌入即時聊天功能(Live chat)，並提供手機 App 讓用戶隨時接收訊息，同時整合多種社群通訊工具，包括 WhatsApp、Facebook Messenger、Telegram、電子郵件、簡訊等管道，還能透過 API 與其他系統進行深度整合。

### 免費版功能說明

Rocket.Chat 提供 Starter 方案免費版，包含智能路由等進階功能，免費版有智能路由、多隊列處理、讀取回執、無限推播通知，但限制最多 50 個使用者和每月 100 個活躍聯絡人。適合小型團隊或個人使用。

## 📱 Rocket.Chat App：隨時隨地接收訊息

Rocket.Chat 提供完整的行動應用程式，讓客服人員可以隨時隨地接收和回覆訊息：
![Rocket.Chat 行動版多通路聊天介面](https://blog.markkulab.net/content/markku/posts/rocket-chat-omnichannel-integration/images/5.jpg)

### 🎯 App 功能

Rocket.Chat App 提供完整的即時聊天功能，支援文字、圖片和檔案分享，具備團隊協作工具和客服系統整合，讓團隊成員可以隨時隨地進行溝通。

### 📲 下載方式

Android 用戶可以從 Google Play Store 下載，iOS 用戶從 App Store 下載。桌面版本支援 Windows、macOS 和 Linux 系統，滿足不同平台的使用需求。

### 🔧 基本設定

安裝後需要連線到伺服器，可以調整通知設定來符合個人需求，App 支援多種主題和語言選擇，讓使用者可以個人化使用體驗。

### 💼 適用場景

特別適合客服團隊使用，也支援遠端工作環境，在緊急情況下可以快速發送通知，確保重要訊息能及時傳達。

### 🔒 安全功能

提供端到端加密保護訊息安全，支援多重身份驗證和權限管理，確保企業級的安全標準。

## Docker 部署

採用微服務架構設計，包含 App Server、MongoDB 資料庫、聊天元件和分析工具等核心組件，確保系統穩定運行。


## Docker Compose 設定

以下是完整的 `docker-compose.yaml` 設定檔：

```yaml
version: '3.8'

services:
  rocketchat:
    image: registry.rocket.chat/rocketchat/rocket.chat:latest
    restart: always
    volumes:
      - ./uploads:/app/uploads
      - ./custom:/app/custom
    environment:
      - PORT=3000
      - ROOT_URL=https://chat.226network.com
      - MONGO_URL=mongodb://mongodb:27017/rocketchat
      - DEPLOY_METHOD=docker
      - DEPLOY_PLATFORM=linux/amd64
      - ENABLE_OMNICHANNEL=true
      - ENABLE_LIVECHAT=true
      - ENABLE_LIVECHAT_ANALYTICS=true
      - CACHE_SIZE=100
      - CACHE_TTL=600
    ports:
      - 30047:3000

  mongodb:
    image: mongo:6.0
    restart: always
    volumes:
      - mongodb_data:/data/db
    environment:
      - MONGO_INITDB_ROOT_USERNAME=admin
      - MONGO_INITDB_ROOT_PASSWORD=password123
      - MONGO_INITDB_DATABASE=rocketchat
    ports:
      - "27017:27017"
    command: mongod --auth

  redis:
    image: redis:6-alpine
    restart: always
    volumes:
      - redis_data:/data
    command: redis-server --appendonly yes

volumes:
  mongodb_data:
  redis_data:
```

## 部署步驟

### 1. 準備環境
```bash
mkdir rocket-chat
cd rocket-chat
mkdir uploads
mkdir custom
mkdir mongodb-data
```

### 2. 啟動服務
```bash
docker-compose up -d
docker-compose ps
docker-compose logs -f rocketchat
```

### 3. 初始設定
訪問 `http://localhost:30047`，建立管理員帳號，設定組織資訊。



## Omnichannel 功能配置

### 1. 啟用 Omnichannel 功能

進入管理後台設定 Omnichannel，建立 agent 和部門，啟用 Livechat 功能。
![Rocket.Chat後台選取Omnichannel功能](https://blog.markkulab.net/content/markku/posts/rocket-chat-omnichannel-integration/images/1.png)
![Rocket.Chat 歡迎頁面與 Omnichannel 側邊欄](https://blog.markkulab.net/content/markku/posts/rocket-chat-omnichannel-integration/images/2.png)

## 🚀 網站聊天功能：打造完美的客戶互動體驗

網站聊天功能是 Rocket.Chat Omnichannel 的核心功能，讓網站訪客即時與客服團隊溝通，提升客戶滿意度和轉換率。

### 🎯 網站聊天的重要性

網站聊天很重要，因為可以即時回應、提升轉換率、降低跳出率、收集潛在客戶、24/7 服務。優勢包括無縫整合、響應式設計、多語言支援、智能路由、完整記錄。

### 2. 網站 Livechat 整合

#### React 組件嵌入程式碼

```tsx
'use client';

import React, { useEffect } from 'react';

declare global {
  interface Window {
    RocketChat: any;
  }
}

const RocketChatLivechat: React.FC = () => {
  useEffect(() => {
    // 檢查是否已經載入過，避免重複載入
    if (window.RocketChat) {
      return;
    }

    // 初始化 RocketChat
    window.RocketChat = function(c: any) { 
      window.RocketChat._.push(c); 
    };
    window.RocketChat._ = [];
    window.RocketChat.url = 'https://chat.226network.com/livechat';

    // 動態載入 RocketChat livechat script
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = 'https://chat.226network.com/livechat/rocketchat-livechat.min.js?_=201903270000';

    // 腳本載入完成後的回調
    script.onload = () => {
      setTimeout(() => {
        addMobileStyles();
      }, 1200);
    };
    
    // 找到第一個 script 標籤並在其之前插入
    const firstScript = document.getElementsByTagName('script')[0];
    if (firstScript?.parentNode) {
      firstScript.parentNode.insertBefore(script, firstScript);
    } else {
      document.head.appendChild(script);
    }

    // 添加手機版樣式的函數
    const addMobileStyles = () => {
      const existingStyle = document.querySelector('#rocket-chat-mobile-styles');
      if (existingStyle) {
        existingStyle.remove();
      }

      const style = document.createElement('style');
      style.id = 'rocket-chat-mobile-styles';
      style.textContent = `
        @media (max-width: 768px) {
          #app > div[class*="screen__"]:not([class*="minimized"]) {
            bottom: 0px !important;
          }
          .rocketchat-widget[data-state="closed"] {
            bottom: 60px !important;
          }
        }
      `;
      document.head.appendChild(style);

      // 設定按鈕位置
      const setChatButtonBottom = () => {
        if (window.innerWidth > 768) return;
        const btn = document.querySelector('#app > button[aria-label="Rocket.Chat"]');
        if (btn && btn instanceof HTMLElement) {
          btn.style.setProperty('bottom', '60px', 'important');
        }
      };

      setChatButtonBottom();
      window.addEventListener('resize', setChatButtonBottom);
    };

    // 清理函數
    return () => {
      const existingScript = document.querySelector('script[src*="rocketchat-livechat.min.js"]');
      if (existingScript) {
        existingScript.remove();
      }
      const customStyle = document.querySelector('#rocket-chat-mobile-styles');
      if (customStyle) {
        customStyle.remove();
      }
    };
  }, []);

  return null;
};

export default RocketChatLivechat;
```

#### 使用方式

```tsx
// 在您的 React 應用中使用
import RocketChatLivechat from './components/RocketChatLivechat';

function App() {
  return (
    <div>
      <h1>我的網站</h1>
      <RocketChatLivechat />
    </div>
  );
}
```

#### 客製化說明

這個 React 組件可以輕鬆客製化：

- **修改伺服器 URL**：更改 `window.RocketChat.url` 為您的 Rocket.Chat 伺服器
- **調整手機版樣式**：修改 `style.textContent` 中的 CSS 來改變聊天視窗外觀
- **自訂載入時機**：調整 `setTimeout` 的時間來控制樣式套用時機
- **添加事件處理**：在 `script.onload` 中加入自訂的初始化邏輯

#### 結果畫面
![手機部落格頁面右下角顯示聊天圖示](https://blog.markkulab.net/content/markku/posts/rocket-chat-omnichannel-integration/images/3.jpg)
![Rocket.Chat手機版聊天介面輸入姓名與電子郵件](https://blog.markkulab.net/content/markku/posts/rocket-chat-omnichannel-integration/images/4.jpg)

### 🎨 網站聊天進階功能

包含智能觸發機制、個人化聊天體驗、聊天分析與優化、多語言聊天支援等功能。可以根據頁面停留時間、滾動行為、退出意圖觸發聊天，還能個人化歡迎訊息、客服專長、聊天樣式。


## Webhook 整合：輕鬆連接各種社群聊天工具

Rocket.Chat 提供完整的 Webhook API，可以輕鬆整合各種社群聊天工具到統一的 Omnichannel 平台。支援 Incoming Webhooks、Outgoing Webhooks、REST API、Real-time API。常見整合場景包括社群媒體（WhatsApp、Facebook Messenger、Telegram）、企業工具（Slack、Microsoft Teams、Discord）、客服系統（Zendesk、Freshdesk、Intercom）等。

## 智能路由與工作流程

### 1. 自動路由設定

可以根據關鍵字、客戶等級、語言等條件自動路由對話到適當的部門或客服人員。

### 2. 自動回覆設定

設定歡迎訊息、忙碌時自動回覆、下班時間回覆等自動回覆規則。

## 資料分析與報表

### 1. 客服績效分析

提供客服績效分析、管道使用分析、客戶滿意度分析等功能。

### 2. 即時監控儀表板

提供即時監控功能，可以即時查看客服狀態、新對話、對話結束等資訊。

## 進階功能與整合

### 1. CRM 系統整合

可以同步客戶資料、記錄對話到 CRM、獲取客戶歷史記錄等。

### 2. AI 智能助手整合

提供智能回覆建議、情感分析、自動分類等功能。

### 自訂開發與擴展

支援建立自訂主題、開發自訂 App、API 擴展等功能。

## 總結

Rocket.Chat 的 Omnichannel 功能為企業提供強大的多通路客服解決方案，網站聊天功能和行動 App 是核心亮點。透過統一平台管理各種通訊管道，企業可以提升客戶體驗、提高客服效率、降低營運成本、獲得深度洞察。

### 🎯 核心功能價值

網站聊天功能提供即時客戶互動、提升轉換率、智能客戶服務、完整數據分析、多語言支援。行動 App 功能提供隨時隨地服務、即時推播通知、完整聊天體驗、團隊協作整合、企業級安全。

### 免費版 vs 付費版選擇

Starter 免費版適合小型團隊，付費版適合大型企業，Community 開源版適合有技術能力的團隊。


## 相關資源
- [Rocket.Chat 官方文件](https://docs.rocket.chat/)
- [Omnichannel 功能指南](https://docs.rocket.chat/guides/omnichannel/)
- [API 參考文件](https://developer.rocket.chat/)
- [社群論壇](https://forums.rocket.chat/)
- [GitHub 專案](https://github.com/RocketChat/Rocket.Chat)

---

## 關於本文與作者

本文出自 [Mark Ku's Blog](https://blog.markkulab.net/post/rocket-chat-omnichannel-integration)

授權條款： [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — 轉載或引用請註明作者並附上原文連結

### 關於作者

**[Mark Ku](https://blog.markkulab.net/author/mark-ku)** — Software Solution Provider

- 10+ 年資深軟體工程師，現為 AI 應用 Builder
- 專注大型平台架構設計，從北美電商到AI SaaS訂閱收費系統
- 結合 AI Agent 與自動化，打造高效可演進的產品技術基礎

### 作者開發的免費工具

以下工具皆可免費使用：

- [免費 PDF 簽名工具](https://blog.markkulab.net/tools/pdf-sign): 線上 PDF 簽名工具，瀏覽器內完成手繪、打字、上傳簽名，可拖曳放置、縮放、下載。所有處理都在你的裝置完成，檔案不會上傳。
- [VS Code Refactory](https://blog.markkulab.net/tools/refactory): Refactory 是一款 VS Code 重構擴充套件：34 個重構動作、37 條 code smell 檢查、Code Health 儀表板、18 種語言、534 支測試。懂你的專案慣例：介面放哪、DI 註冊寫在哪、'use client' 該不該加；還會用 git 修改頻率 × 複雜度排出「該先修哪個檔案」，並一鍵把壞味道交給你自己電腦上的 Claude Code 修。免費使用，原始碼不離開你的機器。
- [DB-Kit 資料庫管理工具](https://blog.markkulab.net/tools/db-kit): DB-Kit 是一個用 Tauri + Rust + React 打造的輕量跨平台資料庫管理工具，用單一一致的介面同時管理 MySQL、MariaDB、PostgreSQL、SQL Server、Oracle、SQLite、MongoDB、Redis、Kafka、Elasticsearch 與 RabbitMQ 十一種資料來源：連線密碼以 OS keychain 加密、SSH Tunnel、完整 CRUD、視覺化查詢建構器、多結果集同時顯示、跨連線資料傳輸與比對同步、Excel / CSV 匯入匯出、執行計畫視覺化、ER 圖、排程備份、SQL 壓力測試（p50～p99 延遲百分位）、15 條規則的 SQL 審查、Kafka 訊息瀏覽與監控告警；繁中 / 英文雙語介面，內建 AI 助手（自然語言生成 SQL、AI 審查與調校建議）與命令列工具 dbk。免費開源（MIT），提供 Windows / macOS / Linux 安裝檔。
- [VS Code Super Mermaid](https://blog.markkulab.net/tools/super-mermaid): Super Mermaid 是一款 VS Code 擴充套件：開箱即用的漂亮 Mermaid 圖表，自動上色、即時預覽、滑鼠平移縮放、PNG / SVG 高解析匯出，內建 21 種範本與多種主題。免費開源（MIT）。
- [React Super Mermaid](https://blog.markkulab.net/tools/react-super-mermaid): react-super-mermaid 是一個開源 React 元件庫：一行 <MermaidViewer> 即可渲染漂亮的 Mermaid 圖表，內建 colorful / sketch 主題、平移縮放、圖內搜尋、SVG / PNG 高解析匯出。輕量、SSR 安全、完整 TypeScript 型別。免費開源（MIT）。
- [Jira / Confluence Super Mermaid](https://blog.markkulab.net/tools/jira-super-mermaid): Atlassian Forge app：在 Jira issue 與 Confluence 內文直接寫 Mermaid 語法，畫流程圖、時序圖、狀態機與甘特圖。11 種圖表、SVG / PNG 匯出、明暗主題、完整中日韓文字支援。取得 Runs on Atlassian 資格：圖表存在你自己的站台，app 不呼叫任何第三方服務。免費，即將上架 Atlassian Marketplace。
- [Mermaid 線上預覽](https://blog.markkulab.net/tools/mermaid-preview): 在瀏覽器裡寫 Mermaid、即時看圖，整張圖表壓進網址就能分享。免註冊、不上傳伺服器，相容 mermaid.live 的分享連結。
- [React Intl Phone Number](https://blog.markkulab.net/tools/react-intl-phone-number): react-intl-phone-number 是一個開源 React 元件：framework-agnostic、不依賴 antd，提供 E.164 進出、可搜尋國旗 / 國碼下拉、可配置驗證等級（strict / mobile-strict / loose）、可主題化 CSS 與 i18n，電話邏輯由 google-libphonenumber 驅動。輕量、完整 TypeScript 型別。免費開源（MIT）。
- [Uptime Kuma Cluster](https://blog.markkulab.net/tools/uptime-kuma-cluster): 把單機版 Uptime Kuma 改造成高可用叢集：OpenResty + Lua 智慧負載平衡、MariaDB 共享狀態、健康檢查與自動 Failover，附叢集管理 REST API，一行 Docker Compose 啟動。免費開源（MIT）。
- [特教專案](https://blog.markkulab.net/education): 為特殊教育學生製作的學習教材

### 每日 Podcast

- [科技新鮮事](https://blog.markkulab.net/category/tech-news): 每日精選 AI 與科技趨勢，透過語音摘要快速掌握最新技術動態，涵蓋 AI 應用、軟體架構、DevOps 與工程實戰。 — RSS: https://blog.markkulab.net/feed.xml
- [AI股市蝦聊](https://blog.markkulab.net/category/ai-stock-chat): 每個交易日用 AI 分析台股盤勢，以雙人對話聊當天的盤中觀察與隔日預測。 — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml

### 電子報

[訂閱電子報](https://blog.markkulab.net/subscribe) — 第一時間收到新文章通知，無垃圾信、隨時可取消訂閱。