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

首頁關於我

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

DevOps

Mark Ku

July 28, 2025

1 min

多通路聊天整合的挑戰

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

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

為什麼選擇 Rocket.Chat Omnichannel？

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

支援的通訊管道

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

免費版功能說明

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

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

Rocket.Chat 提供完整的行動應用程式，讓客服人員可以隨時隨地接收和回覆訊息：

🎯 App 功能

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

📲 下載方式

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

🔧 基本設定

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

💼 適用場景

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

🔒 安全功能

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

Docker 部署

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

Docker Compose 設定

以下是完整的 docker-compose.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. 準備環境

mkdir rocket-chat
cd rocket-chat
mkdir uploads
mkdir custom
mkdir mongodb-data

2. 啟動服務

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 的核心功能，讓網站訪客即時與客服團隊溝通，提升客戶滿意度和轉換率。

🎯 網站聊天的重要性

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

2. 網站 Livechat 整合

React 組件嵌入程式碼

'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;

使用方式

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

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