嵌入式聊天
将聊天组件以内嵌方式显示在页面中,而非浮动气泡
所有计划
概述
默认情况下,Asyntai 聊天组件以浮动气泡的形式出现在您网站的角落。通过嵌入式聊天,您还可以直接在页面上显示聊天——例如,在首页的“与我们聊天”部分。
浮动气泡与嵌入式聊天同时工作。没有滚动到嵌入部分的访客仍然可以使用气泡。两者共享同一对话。
工作原理
1
添加一个 script 标签
将其放置在您希望聊天出现在 HTML 中的任何位置
2
聊天内联渲染
组件出现在该位置,始终可见,与常规聊天大小相同
3
气泡保持活跃
浮动气泡保留在角落,供未看到嵌入式聊天的访客使用
4
共享对话
消息在嵌入式聊天和浮动组件之间实时同步
设置
在您希望聊天出现在页面上的任何位置添加这一行 HTML:
<script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
将 YOUR_WIDGET_ID 替换为您的组件 ID。您可以在嵌入式聊天设置页面上找到已预填 ID 的嵌入代码。
注意: 页面上还必须包含主要的 chat-widget.js 脚本。如果您已经在网站上安装了 Asyntai 组件,则无需额外操作。
示例
以下是您在首页上使用的示例:
<section style="max-width: 500px; margin: 0 auto;">
<h2>Chat with us</h2>
<p>Ask us anything — our AI assistant is here to help.</p>
<!-- The chat will appear right here -->
<script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</section>
详情
尺寸
嵌入式聊天以与浮动组件相同的尺寸渲染:桌面端 400px 宽、650px 高,移动端全宽、550px 高。您可以通过设置父容器的样式来控制其位置。
浮动气泡行为
当嵌入式聊天在屏幕上可见时,访客点击浮动气泡会滚动到嵌入式聊天。如果嵌入式聊天不在视图中,气泡会打开常规的浮动聊天叠加层。
消息同步
嵌入式和浮动聊天共享同一对话。从任一端发送的消息都会在两端显示。使用相同的会话、AI 上下文和聊天记录。
多页面
您可以在某些页面使用嵌入式聊天,在其他页面使用常规浮动组件。只需在需要内联聊天的页面中包含嵌入脚本即可。对话会像往常一样在页面之间延续。
实时预览
这是一个实时嵌入式聊天,您可以查看其效果:
要求
页面上必须安装 Asyntai 聊天组件的主脚本(
chat-widget.js)
适用于所有计划——无需升级
兼容所有支持 Shadow DOM 的浏览器(所有现代浏览器)
提示: 先将嵌入式聊天放在测试页面上进行测试。在推送到生产环境之前,确保它在您的页面布局中显示正确。