一行代码，快速集成，让您的网站即刻拥有智能对话能力
从界面到交互，全方位定制，打造专属品牌体验
基于大语言模型，提供流畅、精准、人性化的对话服务
选择以下任一方式，快速将 AI Bot 集成到您的网站
方式一：脚本标签集成（推荐）
在 HTML 文件 </body> 标签前添加：
<!-- 先设置配置（可选） -->
<script>
window.aiBotConfig = {
botName: '智能助理',
apiUrl: 'https://your-api-url'
};
</script>
<!-- 引入聊天机器人 -->
<script src="https://clougence-aichatbot.pages.dev/ai-bot.js" defer></script>方式二：动态加载
// 设置配置（可选）
window.aiBotConfig = {
botName: '智能助理',
apiUrl: 'https://your-api-url'
};
// 加载聊天机器人
const s = document.createElement('script');
s.src = 'https://clougence-aichatbot.pages.dev/ai-bot.js';
s.defer = true;
document.body.appendChild(s);通过 window.aiBotConfig 对象，自定义 AI Bot 的外观与行为
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
botAvatar |
String | (内置SVG) | 机器人头像，可以是 SVG 字符串、emoji 或图片 URL |
botName |
String | '智能助理 Pro' | 机器人显示名称 |
widgetIcon |
String | (内置SVG) | 悬浮按钮图标，SVG 字符串 |
apiUrl |
String | 'https://aibot.example.com' | API 服务器地址 |
scrollThreshold |
Number | 300 |
自动滚动阈值（单位：像素） |
sessionExpireTime |
Number | 86400000 |
会话过期时间（单位：毫秒，默认24小时） |
initialWelcomeMessage |
String | '您好！有什么可以帮助您的吗？' | 初始欢迎语 |
inputPlaceHolder |
String | '请输入您的问题...' | 输入框占位文本 |
maxInputLength |
Number | 2000 |
输入框最大字符数限制 |
isMobile |
Boolean | true |
是否启用移动端适配 |
footer |
String | '聊天即表示您已阅读并同意...' | 底部声明文本 |
presetButtons |
Array | [{type, html}] | 预设按钮配置数组，每个按钮包含 type 和 html 属性 |
presetButtonHandlers |
Object | {} | 自定义预设按钮处理函数，键为按钮类型，值为处理函数 |
styles |
Object | {...} | 样式配置对象，包含颜色、尺寸、动画等 |
styles.colors |
Object | {...} | 颜色配置，包含主色、背景色、文字色等 |
styles.sizes |
Object | {...} | 尺寸配置，包含按钮、窗口等尺寸 |
styles.animations |
Object | {...} | 动画配置，包含持续时间、缓动函数等 |
styles.borderRadius |
Object | {...} | 圆角配置，包含按钮、窗口等圆角 |
styles.shadows |
Object | {...} | 阴影配置，包含按钮、窗口等阴影 |
通过 presetButtons 和 presetButtonHandlers 可以完全自定义快速回复按钮的外观和行为。默认情况下，ai-bot.js 不包含任何预设按钮，需要外部配置：
window.aiBotConfig = {
botName: '智能助理',
apiUrl: 'https://your-api-url',
presetButtons: [
{
type: 'contact',
html: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
联系方式`
}
],
presetButtonHandlers: {
contact: function(type) {
const message = `📞 **联系我们**
- 商业洽谈: 0571-88603096
- 邮箱: \`hr@clougence.com\`
- 商务合作: \`sales@clougence.com\`
- 技术支持: \`cloudcanal_support@clougence.com\`
- 人才招聘: \`hr@clougence.com\`
如有任何问题，欢迎随时联系我们！`;
// 使用ai-bot的内部函数发送机器人消息
if (window.aiBotAddMessage) {
window.aiBotAddMessage('bot', message, { skipHistory: true });
}
}
}
};注意：
presetButtons 和 presetButtonHandlers，聊天机器人将不会显示任何预设按钮。window.aiBotAddMessage('bot', message, { skipHistory: true }) 来发送机器人消息。skipHistory: true 选项可以避免预设回复被保存到聊天历史中。\`email@example.com\`