AI 对话嵌入使用说明
功能简介
该脚本会在网页右下角添加一个「💬 AI 对话」悬浮按钮，点击后会弹出一个嵌入的 AI 对话窗口（iframe），支持再次点击关闭。适用于在任意网页中嵌入 Baklib AI 对话模块。
1️⃣ 被嵌入站点（AIChat站点）配置
在嵌入之前，需要先在 AI Chat 站点后台配置：进入 应用设置 → 域名管理 → 配置→内容安全策略(CSP)
最终会出现的效果：
frame-ancestors: www.baklib.cn self
www.baklib.cn：表示允许该域名嵌入本站内容, 替换成需要嵌入的网站域名self：允许本站自身嵌入可添加多个域名，用空格分割
⚠️ 这是为了保证 iframe 跨域安全，未配置的域名将无法嵌入。
2️⃣ 需要嵌入站点的配置
2.1 脚本插入
Baklib站点
在需要嵌入的站点中：在后台管理——应用设置——界面展示——自定义HTML——Head HTML 添加以下脚本
外部网页
在目标网页 <body> 结束标签前插入以下代码
2.2 脚本代码
<script>
document.addEventListener('turbo:load', function() {
// -------------------------------
// 🔹 配置 AI 对话页面 URL
// -------------------------------
var chatUrl = 'https://site-729o072n.trial.baklib.site/-/search?embed=true';
// embed=true 可以隐藏站点多余元素，仅显示对话模块
// -------------------------------
// 🔹 创建悬浮按钮
// -------------------------------
var btn = document.createElement('div');
btn.innerText = '💬 AI 对话'; // 按钮文字
btn.style.cssText = `
position: fixed; /* 固定在页面右下角 */
bottom: 24px; /* 距离底部 24px */
right: 24px; /* 距离右边 24px */
background-color: #3b82f6; /* 按钮背景色 */
color: #fff; /* 文字颜色 */
padding: 12px 18px; /* 内边距 */
border-radius: 9999px; /* 圆形按钮 */
font-size: 16px; /* 字体大小 */
font-weight: 500; /* 字重 */
cursor: pointer; /* 鼠标样式 */
box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 阴影 */
z-index: 999999; /* 层级最高 */
transition: all 0.2s; /* 鼠标悬停动画 */
`;
document.body.appendChild(btn); // 添加到页面
// -------------------------------
// 🔹 创建 iframe 容器
// -------------------------------
var container = document.createElement('div');
container.style.cssText = `
position: fixed; /* 固定位置 */
bottom: 70px; /* 默认距离底部 70px */
right: 20px; /* 默认距离右边 20px */
z-index: 999999; /* 层级 */
display: none; /* 默认隐藏 */
`;
// -------------------------------
// 🔹 创建 iframe 元素
// -------------------------------
var iframe = document.createElement('iframe');
iframe.src = chatUrl; // 设置 iframe 链接
iframe.style.cssText = `
width: 450px; /* 默认宽度 */
height: 560px; /* 默认高度 */
max-width: 90vw; /* 最大宽度限制 */
border: none; /* 去掉边框 */
border-radius: 12px; /* 圆角 */
box-shadow: 0 8px 24px rgba(0,0,0,0.2); /* 阴影 */
background: #fff; /* 背景色 */
position: relative; /* 相对定位，用于关闭按钮定位 */
`;
container.appendChild(iframe); // 添加 iframe 到容器
// -------------------------------
// 🔹 创建关闭按钮
// -------------------------------
var closeBtn = document.createElement('button');
closeBtn.innerText = 'x'; // 按钮文字
closeBtn.style.cssText = `
position: absolute; /* 绝对定位 */
top: -10px; /* 离 iframe 顶部 10px 空间 */
right: -10px; /* 离 iframe 右边 10px 空间 */
width: 28px; /* 按钮宽度 */
height: 28px; /* 按钮高度 */
border-radius: 50%; /* 圆形 */
border: 1px solid #ccc; /* 边框颜色 */
background: #fff; /* 背景色 */
color: #333; /* 字体颜色 */
font-size: 16px; /* 字体大小 */
cursor: pointer; /* 鼠标样式 */
display: flex; /* flex 居中 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
z-index: 10; /* 层级高于 iframe */
`;
// 点击关闭按钮隐藏容器和按钮，并恢复页面滚动
closeBtn.onclick = function() {
container.style.display = 'none';
closeBtn.style.display = 'none';
document.body.style.overflow = '';
};
container.appendChild(closeBtn); // 添加关闭按钮到容器
document.body.appendChild(container); // 添加容器到页面
// -------------------------------
// 🔹 点击悬浮按钮显示或隐藏 iframe + x
// -------------------------------
btn.onclick = function() {
const isHidden = container.style.display === 'none';
container.style.display = isHidden ? 'block' : 'none'; // 切换显示
closeBtn.style.display = isHidden ? 'block' : 'none'; // 切换关闭按钮显示
document.body.style.overflow = isHidden ? 'hidden' : ''; // 弹出时禁止页面滚动
};
// -------------------------------
// 🔹 响应式布局（手机/平板自适应）
// -------------------------------
function updateLayout() {
if (window.innerWidth <= 768) {
// 手机端调整按钮位置和大小
btn.style.bottom = '20px';
btn.style.right = '20px';
btn.style.fontSize = '14px';
btn.style.padding = '14px 20px';
// 手机端 iframe 全屏宽高
iframe.style.width = '100vw';
iframe.style.height = '80vh';
container.style.bottom = '0';
container.style.right = '0';
iframe.style.borderRadius = '12px 12px 0 0';
iframe.style.maxWidth = '100vw';
} else {
// PC 端布局
btn.style.bottom = '24px';
btn.style.right = '24px';
btn.style.fontSize = '16px';
btn.style.padding = '12px 18px';
iframe.style.width = '450px';
iframe.style.height = '560px';
container.style.bottom = '70px';
container.style.right = '20px';
iframe.style.borderRadius = '12px';
iframe.style.maxWidth = '90vw';
}
}
window.addEventListener('resize', updateLayout); // 窗口尺寸变化时更新布局
updateLayout(); // 页面加载时立即调用
});
</script>
脚本说明
修改参数说明
参数 | 说明 |
|---|---|
| 替换为你的 AI 对话页面 URL，必须带 |
| 按钮显示文字，例如「💬 AI 对话」。 |
| 按钮样式，可调整 |
| iframe 样式，可调整 |
| iframe 容器样式，可控制 shadow、border-radius、位置。 |
响应式说明
PC/大屏：iframe 固定在右下角，450px × 560px，可限制最大宽度 90vw。
移动端：iframe 宽度 100% 屏幕宽度，高度 80% 屏幕高度，顶部圆角 12px，底部贴近屏幕边缘。
按钮：自动调整底部距离和尺寸，保证易点击。
使用示例
假设 AI 对话的地址是：
https://example.com/-/search?embed=true
只需替换：
var chatUrl = 'https://example.com/-/search?embed=true';
即可在网页右下角看到悬浮按钮，点击打开嵌入窗口。
注意事项
跨域限制
iframe 的 URL 必须允许被嵌入（通过frame-ancestors配置）。嵌入模式
必须在 AI 对话页面 URL 中带上embed=true参数，才能隐藏多余元素。自定义样式
按钮和 iframe 样式均可通过 JS 内联样式修改。滚动控制
弹出 iframe 时会禁止页面滚动，关闭后恢复。