如何在网页底部添加Google Chat Bot聊天链接或嵌入窗口

一、嵌入Google Chat聊天窗口（推荐方案） #

Google Chat支持通过iframe将聊天窗口直接嵌入网页，你可以按以下步骤操作：

1. 获取嵌入链接
   登录Google Chat，找到Bot所在的聊天空间，点击空间名称旁的下拉菜单 → 设置 → 嵌入空间，复制生成的嵌入URL（格式类似https://chat.google.com/embed/space/[SPACE_ID]?authuser=0&hl=en）。

2. 添加固定角落的嵌入窗口
   将以下代码插入到网页</body>标签前，替换[嵌入URL]为你获取到的链接：

   <style>
     .google-chat-embed {
       position: fixed;
       bottom: 20px;
       right: 20px;
       width: 350px;
       height: 450px;
       border: none;
       border-radius: 8px;
       box-shadow: 0 4px 12px rgba(0,0,0,0.15);
       z-index: 9999;
       display: none;
     }
     .chat-toggle-btn {
       position: fixed;
       bottom: 20px;
       right: 20px;
       width: 56px;
       height: 56px;
       border: none;
       border-radius: 50%;
       background-color: #1a73e8;
       color: #fff;
       font-size: 20px;
       cursor: pointer;
       box-shadow: 0 2px 8px rgba(0,0,0,0.2);
       z-index: 10000;
     }
     .chat-toggle-btn:hover {
       background-color: #1557b0;
     }
   </style>
   
   <button class="chat-toggle-btn" onclick="toggleChat()">💬</button>
   <iframe class="google-chat-embed" src="[嵌入URL]" allow="chat"></iframe>
   
   <script>
     function toggleChat() {
       const embed = document.querySelector('.google-chat-embed');
       embed.style.display = embed.style.display === 'none' ? 'block' : 'none';
     }
   </script>
   

   • 若不需要最小化功能，可直接保留iframe标签，删除按钮和JS代码，将display: none改为display: block
   • 可根据需求调整窗口的宽高、位置、样式等参数

二、添加跳转至Google Chat Bot的链接（备选方案） #

如果嵌入功能因权限等问题无法实现，可添加固定角落的跳转链接：

将以下代码插入到网页</body>标签前，替换[BOT_SPACE_ID]为Bot所在空间的ID（可从空间URL中提取，如https://chat.google.com/space/ABC123XYZ中的ABC123XYZ）：

<style>
  .chat-jump-link {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    background-color: #1a73e8;
    color: #fff;
    text-decoration: none;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 9999;
    font-family: Arial, sans-serif;
  }
  .chat-jump-link:hover {
    background-color: #1557b0;
  }
</style>

<a href="https://chat.google.com/u/0/chat/space/[BOT_SPACE_ID]" target="_blank" class="chat-jump-link">联系Bot</a>

• target="_blank"会在新标签页打开聊天页面，避免用户离开当前网站

注意事项 #

• 需确保Bot所在空间的访问权限符合需求：如果是内部Bot，仅域内用户可访问；若需公开访问，需在空间设置中开启外部用户访问权限
• 可根据网站整体风格自定义按钮/链接的颜色、字体、阴影等样式

内容的提问来源于stack exchange，提问作者Shwetha Sai