嵌入式聊天

将聊天组件以内嵌方式显示在页面中,而非浮动气泡

获取嵌入代码
所有计划

概述

默认情况下,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 的浏览器(所有现代浏览器)

提示: 先将嵌入式聊天放在测试页面上进行测试。在推送到生产环境之前,确保它在您的页面布局中显示正确。