一、前言：
前段时间跟教程搭建一个喀秋莎电玩发卡网，在搭建好独角数卡以后，一直为如何让买家在购买时如何沟通
而困惑，小白太多，就想搞一个在线客服来提高转化率。对比了市面上有很多IM工具的搭建、使用的难易程度，
最终选择利VoceChat搭建一个专属IM在线客服。看我的左下角（因为主题右下角有一个一键到达顶部的按钮，所以放左下角）
二、VoceChat 简介
VoceChat 是一款轻量级、自托管的即时通讯工具，支持私有化部署，适合团队内部沟通或小型社区使用。
以下是基于Docker的安装教程、自定义 CSS 配置方法 、嵌入网页的方法及改进部分。
VoceChat 官方网址：https://voce.chat/
VoceChat 官方 GitHub：https://github.com/privoce
VoceChat 官方文档：https://doc.voce.chat/
三、安装环境准备
服务器：推荐 Linux 系统（如 Ubuntu 20.04+、CentOS 7+），需联网并开放 3009 端口（默认端口3000，可自定义）。
依赖：已安装 Docker 和 Docker Compose（推荐 Docker 20.10+，Compose v2+）。
域名：在你的域名下解析一条A记录，我的是chat.kqsdw.me(根据情况自行选择)
反代：我是用宝塔面板直接反代 ip+端口3009，之后你的服务器就可以是直接用解析的域名访问，不用再加端口。
四、安装步骤:
1. 安装 Docker 和 Docker Compose（若未安装）
更新系统包（Ubuntu/Debian）
sudo apt update && sudo apt upgrade -y
安装 Docker
sudo apt install -y docker.io
sudo systemctl enable docker && sudo systemctl start docker
sudo usermod -aG docker $USER # 允许当前用户无需 sudo 运行 Docker（需重新登录生效）
安装 Docker Compose
sudo apt install -y docker-compose-plugin
2. 创建安装目录并配置
1. 创建工作目录
mkdir -p /opt/vocechat && cd /opt/vocechat
2. 创建 docker-compose.yml 文件
cat > docker-compose.yml << 'EOF'
version: '3'
services:
vocechat:
image: privoce/vocechat-server:latest
container_name: vocechat
restart: always
ports:
- "3009:3000" # 映射端口（宿主端口:容器端口）
volumes:
- ./data:/app/data # 持久化数据目录
- ./custom:/app/custom # 自定义文件目录（用于存放 CSS 等）
environment:
- TZ=Asia/Shanghai # 设置时区
- VOCECHAT_ADMIN_EMAIL=admin@example.com # 初始管理员邮箱
- VOCECHAT_ADMIN_PASSWORD=your_admin_password # 初始管理员密码（请修改）
EOF3. 启动服务
启动容器
docker compose up -d
查看运行状态
docker compose ps
若输出 vocechat 状态为 Up，则安装成功。
4. 访问与初始化
浏览器访问 http://服务器IP:3009，使用配置的管理员邮箱和密码登录。
首次登录后，建议修改管理员密码（路径：Settings → Account → Password）。
五、自定义 CSS 配置（美化界面）
1.VoceChat 支持通过自定义 CSS 修改界面样式，步骤如下：
###1. 创建自定义 CSS 文件
# 在 custom 目录下创建 CSS 文件
mkdir -p /opt/vocechat/custom
cat > /opt/vocechat/custom/custom.css << 'EOF'
/* VoceChat 自定义样式 */
/* 全局样式 */
:root {
--primary-color: #4285f4; /* 主题色（谷歌蓝） */
--secondary-color: #34a853; /* 辅助色（谷歌绿） */
--text-primary: #333333; /* 主要文字色 */
--text-secondary: #666666; /* 次要文字色 */
--bg-primary: #f5f7fa; /* 主要背景色 */
--card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* 卡片阴影 */
}
/* 顶部导航栏 */
.app-header {
background-color: white !important;
box-shadow: var(--card-shadow) !important;
}
.app-header .logo-text {
color: var(--primary-color) !important;
font-weight: 600 !important;
}
/* 侧边栏 */
.sidebar {
background-color: white !important;
border-right: 1px solid #eee !important;
}
.sidebar .channel-item.active {
background-color: rgba(66, 133, 244, 0.1) !important;
border-left-color: var(--primary-color) !important;
}
/* 聊天消息气泡 */
.message-bubble.mine {
background-color: var(--primary-color) !important;
color: white !important;
}
.message-bubble.others {
background-color: white !important;
border: 1px solid #eee !important;
color: var(--text-primary) !important;
}
/* 按钮样式 */
.btn-primary {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
.btn-primary:hover {
background-color: #3367d6 !important;
}
/* 输入框 */
.message-input-container {
border-top: 1px solid #eee !important;
}
.message-input {
border: 1px solid #ddd !important;
border-radius: 8px !important;
padding: 8px 12px !important;
}
EOF2. 配置 VoceChat 加载自定义 CSS
1.登录管理员账号，进入 Settings → Customization
2.在 Custom CSS 区域，输入自定义 CSS 的路径：/app/custom/custom.css
3.点击 Save 保存，页面会自动刷新生效。
六、常用操作
停止服务：docker-compose down
重启服务：docker-compose restart
查看日志：docker-compose logs -f
更新版本：
docker-compose pull
docker-compose up -d七、使用方法
1.浏览器访问 http://服务器IP:3009，使用配置的管理员邮箱和密码登录。
2.在设置里找到网页挂件，默认是在左下侧位置，（可根据自己情况调整）
3.放在你的footer或者head页面最下面就行。我的放在页脚
4.下面是我的配置，修改在右侧，修改加载方式async-defer感觉加载更快，可能我是国外服务器延迟高吧，
<script
data-host-id="1"
data-auto-reg="true"
data-login-token=""
data-title=""
data-logo=""
data-theme-color="#1fe1f9"
data-close-width="48"
data-close-height="48"
data-open-width="380"
data-open-height="680"
data-welcome="有事随时滴滴我"
data-position="left"
src="https://chat.kqsdw.me/widget.js"
defer
></script>PS:defer 仅对外部脚本（带 src 属性的 ）无效。
八、注意事项
生产环境建议修改默认端口（如 80 或 443），并配置 HTTPS（可通过 Nginx 反向代理实现）。
定期备份 /opt/vocechat/data 目录，防止数据丢失。
自定义 CSS 可根据需求调整，上述样式仅为示例。
通过以上步骤，即可完成 VoceChat 的安装和界面美化，开始使用私有化即时通讯服务。