AI 对话嵌入使用说明

功能简介

1⃣️怎么创建AI 知识库站点？

2⃣️被嵌入站点（AIChat站点）配置

frame-ancestors: www.baklib.cn self

• www.baklib.cn：表示允许该域名嵌入本站内容, 替换成需要嵌入的网站域名
• self：允许本站自身嵌入
• 可添加多个域名，用空格分割

⚠️ 这是为了保证 iframe 跨域安全，未配置的域名将无法嵌入。

3⃣️ 需要嵌入站点的配置

3.1 脚本插入

Baklib站点

外部网页

3.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>

脚本说明

修改参数说明

响应式说明

• PC/大屏：iframe 固定在右下角，450px × 560px，可限制最大宽度 90vw。
• 移动端：iframe 宽度 100% 屏幕宽度，高度 80% 屏幕高度，顶部圆角 12px，底部贴近屏幕边缘。
• 按钮：自动调整底部距离和尺寸，保证易点击。

使用示例

https://example.com/-/search?embed=true

var chatUrl = 'https://example.com/-/search?embed=true';

注意事项

1. 跨域限制
   iframe 的 URL 必须允许被嵌入（通过 frame-ancestors 配置）。
2. 嵌入模式
   必须在 AI 对话页面 URL 中带上 embed=true 参数，才能隐藏多余元素。
3. 自定义样式
   按钮和 iframe 样式均可通过 JS 内联样式修改。
4. 滚动控制
   弹出 iframe 时会禁止页面滚动，关闭后恢复。