针对“自动回复消息网页客服源码”的需求，以下提供一套基于原生HTML+CSS+JavaScript的轻量级实现方案，适用于网页端客服聊天窗口的快速部署。该源码无需依赖第三方库，核心功能包括用户消息发送、自动回复匹配、聊天记录动态渲染以及消息时间显示，可满足基础客服场景的演示与二次开发需求。
整套源码由三个部分组成：HTML结构用于定义客服窗口的界面布局，CSS样式用于控制聊天气泡、输入框及整体视觉风格，JavaScript逻辑用于实现消息交互与自动回复算法。自动回复机制采用关键词匹配+默认回复的策略，开发者可根据实际业务扩展回复规则库。
HTML结构方面，页面主体包含一个聊天头部区域、消息展示区域以及底部输入区域。消息展示区域会动态生成用户消息和客服回复，每个消息节点均包含发送者标识、时间戳和文本内容。输入区域包含文本框与发送按钮，支持回车发送与按钮点击发送两种交互方式。
CSS布局采用弹性盒模型（flex），确保聊天窗口在不同屏幕尺寸下保持固定高度和自适应性。用户消息与客服消息分别使用不同的背景色和气泡朝向，用户消息靠右显示并采用蓝色系，客服消息靠左显示并采用白色系。时间戳以轻量级小字号展示在气泡内部，避免视觉干扰。
JavaScript部分的自动回复逻辑需要预先定义一个回复规则数组，其中每个规则对象包含触发关键词和回复内容。当用户发送消息后，程序会遍历规则数组，检查消息文本中是否包含某个关键词。如果匹配成功，则将该规则对应的回复内容作为客服消息输出；如果没有任何关键词匹配，则返回一条默认兜底回复，例如“您好，您的咨询已记录，人工客服将尽快回复您。”
为了提升专业性，本源码还加入了消息滚动到最新位置的处理，避免用户查看历史消息时被新消息干扰。同时使用innerHTML拼接方式生成消息节点，开发者可自行升级为DOM创建方式或前端框架（如Vue、React）版本。下面提供完整的可直接运行的源码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动回复网页客服</title>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<span class="chat-title">智能客服</span>
<span class="chat-status">在线</span>
</div>
<div class="chat-body" id="chatBody">
<!-- 消息列表由JavaScript动态生成 -->
</div>
<div class="chat-footer">
<input type="text" id="userInput" placeholder="请输入您的问题..." autocomplete="off">
<button id="sendBtn" type="button">发送</button>
</div>
</div>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #f0f2f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.chat-container { width: 400px; max-width: 95vw; height: 600px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; }
.chat-header { background: #1677ff; color: #fff; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; }
.chat-title { font-size: 18px; font-weight: bold; }
.chat-status { font-size: 12px; background: rgba(255,255,255,0.2); padding: 2px 10px; border-radius: 12px; }
.chat-body { flex: 1; padding: 15px; overflow-y: auto; background: #f9f9f9; }
.chat-footer { display: flex; border-top: 1px solid #e8e8e8; padding: 10px; background: #fff; }
.chat-footer input { flex: 1; height: 40px; border: 1px solid #d9d9d9; border-radius: 6px; padding: 0 12px; font-size: 14px; outline: none; transition: border-color 0.2s; }
.chat-footer input:focus { border-color: #1677ff; }
.chat-footer button { margin-left: 10px; height: 40px; padding: 0 18px; background: #1677ff; color: #fff; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; }
.chat-footer button:hover { background: #4096ff; }
.message { margin-bottom: 15px; display: flex; flex-direction: column; }
.user-message { align-items: flex-end; }
.bot-message { align-items: flex-start; }
.message-bubble { max-width: 75%; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; word-break: break-word; }
.user-message .message-bubble { background: #1677ff; color: #fff; border-top-right-radius: 2px; }
.bot-message .message-bubble { background: #fff; border: 1px solid #e8e8e8; border-top-left-radius: 2px; }
.message-time { font-size: 10px; color: #999; margin-top: 4px; padding: 0 4px; }
</style>
<script>
(function() {
// 自动回复规则库
var replyRules = [
{ keywords: ['你好', '您好', 'hello'], reply: '您好！很高兴为您服务，请问有什么可以帮您？' },
{ keywords: ['价格', '多少钱', '报价'], reply: '我们的产品根据不同版本和配置报价不同，建议您留下联系方式，专属顾问会与您联系。' },
{ keywords: ['退换货', '退货', '换货'], reply: '自签收之日起7天内支持无理由退货，15天内支持换货，请确保商品不影响二次销售。' },
{ keywords: ['发货', '物流', '快递'], reply: '订单通常在下单后48小时内发货，您可以在个人中心查看物流信息。' },
{ keywords: ['客服', '人工'], reply: '人工客服工作时间：9:00-21:00，您可以直接描述问题，我们会尽快接入。' },
{ keywords: ['谢谢', '感谢'], reply: '不客气，若还有其他问题欢迎随时咨询！' }
];
var defaultReply = '您好，您咨询的问题正在处理中，请稍等，或拨打客服热线12345获取更快捷的服务。';
var chatBody = document.getElementById('chatBody');
var userInput = document.getElementById('userInput');
var sendBtn = document.getElementById('sendBtn');
// 初始化欢迎消息
function addMessage(type, text, timeStr) {
var msgDiv = document.createElement('div');
msgDiv.className = 'message ' + (type === 'user' ? 'user-message' : 'bot-message');
var bubble = document.createElement('div');
bubble.className = 'message-bubble';
bubble.textContent = text;
var timeTools = document.createElement('div');
timeTools.className = 'message-time';
timeTools.textContent = timeStr || getNowTime();
msgDiv.appendChild(bubble);
msgDiv.appendChild(timeTools);
chatBody.appendChild(msgDiv);
// 滚动到底部
chatBody.scrollTop = chatBody.scrollHeight;
}
function getNowTime() {
var now = new Date();
var h = now.getHours().toString().padStart(2, '0');
var m = now.getMinutes().toString().padStart(2, '0');
return h + ':' + m;
}
function getAutoReply(inputText) {
var text = inputText.toLowerCase();
for (var i = 0; i < replyRules.length; i++) {
var rule = replyRules[i];
for (var j = 0; j < rule.keywords.length; j++) {
// 正则匹配关键词
if (text.indexOf(rule.keywords[j].toLowerCase()) !== -1) {
return rule.reply;
}
}
}
return defaultReply;
}
function sendMessage() {
var val = userInput.value.trim();
if (val === '') return;
addMessage('user', val);
userInput.value = '';
// 模拟网络延迟后自动回复
setTimeout(function() {
var reply = getAutoReply(val);
addMessage('bot', reply);
}, 500);
}
// 事件绑定
sendBtn.addEventListener('click', sendMessage);
userInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
sendMessage();
}
});
// 开场欢迎语
addMessage('bot', '欢迎访问智能客服系统，请描述您的问题，例如“价格”、“退货”、“发货”等。');
})();
</script>
</body>
</html>
以上源码可以直接保存为.html文件并双击运行，也可部署到任何静态Web服务器中。在正式业务环境中，建议将自动回复规则库迁移到后端服务（例如Node.js、Python、Java），通过REST API或WebSocket对接前端，实现更复杂的语义理解和数据库持久化。若需要更高级的智能化能力，可接入企业微信客服API、自然语言处理平台（如百度UNIT、阿里云小蜜）或大语言模型接口，形成完整的智能客服系统。
查看详情
查看详情
