嵌入式聊天

天诚智枢提供灵活的嵌入式聊天组件，让您能够将 AI 助手无缝集成到任何网站、应用或系统中，提供一致的用户体验。

集成方式介绍

iframe 嵌入

适用场景：快速集成，适合大部分网站

优点：

• 🚀 集成简单，复制粘贴即可
• 🔒 安全隔离，不影响主网站
• 🎨 样式独立，不会冲突
• 📱 自适应设计，支持各种设备

使用方法：

1. 在天诚智枢后台获取嵌入代码
2. 调整宽度、高度等参数
3. 粘贴到网站相应位置

JavaScript SDK

适用场景：需要深度定制和控制

优点：

• ⚡ 性能更好，加载更快
• 🔧 功能丰富，可深度定制
• 🎯 精确控制，支持事件监听
• 📊 数据交互，支持双向通信

使用方法：

1. 引入 JavaScript SDK 文件
2. 初始化聊天组件
3. 配置各种参数和回调函数

悬浮聊天窗口

适用场景：在线客服，不影响主要内容

优点：

• 👁️ 不占用页面空间
• 🔄 可随时打开关闭
• 🎯 智能触发显示
• 💾 记住用户状态

使用方法：

1. 添加悬浮按钮到页面
2. 配置触发条件
3. 设置窗口样式和行为

设置嵌入聊天

第一步：启用嵌入功能

1. 登录 Foresee Sira AI 管理后台
2. 进入「应用管理」页面（Agent System → Applications）
3. 选择要嵌入的 Web 应用
4. 点击「编辑」→「Web 访问」
5. 开启「允许嵌入」选项

第二步：配置基本参数

界面设置：

1. 宽度和高度：根据网站布局调整
2. 主题选择：选择与网站风格匹配的主题
3. 语言设置：选择目标用户的语言
4. 显示选项：选择显示或隐藏的界面元素

功能配置：

1. 欢迎消息：设置用户打开时的第一条消息
2. 占位符文字：输入框的提示文字
3. 文件上传：是否允许用户上传文件
4. 语音功能：是否启用语音输入输出

第三步：获取嵌入代码

1. 在配置完成后，点击「生成嵌入代码」
2. 选择嵌入方式（iframe、SDK、悬浮窗）
3. 复制生成的代码
4. 根据需要修改参数

第四步：集成到网站

iframe 集成：

1. 将代码粘贴到 HTML 页面中
2. 调整容器的样式（边框、圆角等）
3. 测试在不同设备上的显示效果

SDK 集成：

1. 在页面头部引入 SDK 文件
2. 创建容器元素
3. 初始化聊天组件
4. 配置事件回调函数

悬浮窗集成：

1. 在页面底部添加初始化脚本
2. 配置悬浮按钮的位置和样式
3. 设置自动触发条件
4. 测试打开关闭功能

高级定制功能

自定义主题样式

颜色定制：

1. 在管理后台设置主题色
2. 配置背景颜色和边框颜色
3. 调整文字颜色和按钮颜色
4. 预览不同主题效果

字体设置：

1. 选择字体系列（默认、衬线、无衬线）
2. 设置字体大小
3. 调整行间距
4. 配置粗细样式

布局调整：

1. 设置组件圆角大小
2. 调整内边距和外边距
3. 配置阴影效果
4. 设置动画效果

消息类型定制

支持多种类型的消息展示：

文本消息：

• 支持 Markdown 格式
• 可包含链接和格式化文本
• 支持表情符号

卡片消息：

• 标题和描述
• 图片展示
• 操作按钮
• 链接跳转

列表消息：

• 多项选择
• 快速回复按钮
• 结构化信息展示

媒体消息：

• 图片预览
• 文件下载
• 语音播放

用户数据传递

基本信息传递：

1. 用户姓名和头像
2. 用户 ID 和邮箱
3. 当前页面信息
4. 访问来源数据

自定义数据：

1. 业务相关信息
2. 用户偏好设置
3. 历史交互数据
4. 上下文信息

动态数据更新：

1. 实时更新用户状态
2. 传递页面变化信息
3. 同步业务数据
4. 更新会话上下文

事件监听和处理

生命周期事件：

• 组件加载完成
• 用户开始对话
• 对话结束
• 组件销毁

交互事件：

• 用户发送消息
• 收到 AI 回复
• 文件上传完成
• 按钮点击事件

系统事件：

• 连接状态变化
• 错误发生
• 性能监控
• 状态更新

应用场景示例

在线客服集成

业务需求：为网站添加 24/7 智能客服

实施方案：

1. 选择悬浮聊天窗口方式
2. 设置智能触发条件：
   • 页面停留 30 秒后显示
   • 滚动到产品介绍区域时显示
   • 鼠标移出页面时显示
3. 配置客服助手：
   • 产品介绍和答疑
   • 常见问题自动回复
   • 复杂问题转人工

效果：

• 提升客户咨询转化率
• 减少人工客服压力
• 24小时不间断服务

产品演示集成

业务需求：在产品页面添加交互式演示

实施方案：

1. 使用 iframe 嵌入方式
2. 定制产品专属主题
3. 配置产品演示流程：
   • 引导用户了解功能
   • 提供互动体验
   • 收集用户反馈
4. 与产品页面样式统一

效果：

• 提高产品理解度
• 增加用户参与度
• 收集宝贵的用户反馈

内部系统集成

业务需求：在企业内部系统中集成助手

实施方案：

1. 使用 JavaScript SDK 方式
2. 与现有用户系统集成
3. 传递员工身份信息
4. 提供工作相关服务：
   • 政策查询
   • 流程指导
   • 常见问题解答

效果：

• 提升员工工作效率
• 减少重复性咨询
• 统一信息获取入口

性能优化建议

加载性能优化

1. 懒加载：

   • 仅在需要时加载聊天组件
   • 异步加载非关键资源
   • 延迟加载媒体内容

2. 缓存策略：

   • 缓存常用资源
   • 利用浏览器缓存
   • CDN 加速静态资源

3. 资源压缩：

   • 压缩 JavaScript 和 CSS
   • 优化图片大小
   • 使用现代图片格式

运行时优化

1. 内存管理：

   • 及时清理无用数据
   • 限制历史消息数量
   • 优化组件渲染

2. 网络优化：

   • 合并 API 请求
   • 使用 WebSocket 连接
   • 启用消息压缩

3. 用户体验：

   • 提供加载提示
   • 优雅处理错误
   • 响应式设计

安全注意事项

数据安全

1. 敏感信息保护：

   • 避免传递敏感数据
   • 加密重要信息
   • 定期清理数据

2. 访问控制：

   • 限制嵌入域名
   • 验证来源网站
   • 控制功能权限

3. 通信安全：

   • 使用 HTTPS 协议
   • 验证消息完整性
   • 防止数据篡改

内容安全

1. 输入验证：

   • 过滤恶意输入
   • 限制输入长度
   • 验证文件类型

2. 输出过滤：

   • 转义特殊字符
   • 过滤危险标签
   • 检查链接安全

3. 隐私保护：

   • 遵循隐私政策
   • 匿名化处理
   • 用户数据控制

常见问题解决

集成问题

问题：聊天组件无法显示 解决方法：

1. 检查嵌入代码是否正确
2. 确认容器元素存在
3. 验证网络连接
4. 查看浏览器控制台错误

问题：与网站样式冲突 解决方法：

1. 使用 iframe 隔离样式
2. 调整 CSS 优先级
3. 使用自定义主题
4. 检查样式命名冲突

功能问题

问题：文件上传不工作 解决方法：

1. 检查文件上传权限
2. 确认文件大小限制
3. 验证文件类型支持
4. 测试网络上传速度

问题：移动端体验差 解决方法：

1. 启用响应式设计
2. 调整触控区域大小
3. 优化移动端布局
4. 测试不同设备

性能问题

问题：加载速度慢 解决方法：

1. 启用资源压缩
2. 使用 CDN 加速
3. 优化图片资源
4. 减少不必要的功能

问题：内存使用过高 解决方法：

1. 清理历史消息
2. 优化图片处理
3. 释放无用资源
4. 监控内存使用

最佳实践

设计原则

1. 用户体验优先：

   • 界面简洁直观
   • 操作流程顺畅
   • 响应速度快
   • 错误处理友好

2. 品牌一致性：

   • 与网站风格统一
   • 使用企业品牌色
   • 保持视觉连贯性
   • 体现品牌特色

3. 功能实用性：

   • 提供真正有用的功能
   • 避免功能堆砌
   • 关注核心需求
   • 持续优化改进

技术建议

1. 兼容性考虑：

   • 测试主流浏览器
   • 考虑旧版本支持
   • 提供降级方案
   • 监控兼容性问题

2. 维护便利性：

   • 模块化设计
   • 配置化管理
   • 便于升级更新
   • 详细的文档记录

3. 可扩展性：

   • 预留扩展接口
   • 支持自定义开发
   • 考虑未来需求
   • 保持架构灵活

通过嵌入式聊天功能，您可以在任何场景下为用户提供智能化的对话体验，实现无缝的服务集成。合理选择集成方式和配置参数，能够确保最佳的用户体验和系统性能。