文档

挂件样式与自定义

通过 init 选项或仪表盘界面控制挂件外观。

尺寸预设#

通过 chatSize 和 launcherSize 从三种内置尺寸预设中选择：

chatSize聊天窗口
compact340 x 460 px
default380 x 520 px
large420 x 600 px

launcherSize 独立于 chatSize 控制浮动按钮：

launcherSize启动按钮图标
small48 px22 px
default60 px28 px
large68 px32 px
Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  chatSize: 'large',        // 更宽更高的聊天窗口
  launcherSize: 'small'     // 更小的浮动按钮
});

定位#

用 offsetBottom 和 offsetSide （单位为像素）微调挂件位置。与 position（bottom-right 或 bottom-left）结合使用，可完全控制放置位置。

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  position: 'bottom-left',
  offsetBottom: 40,          // 距底部 40px（默认：20）
  offsetSide: 30             // 距左边缘 30px（默认：20）
});

圆角与 Z-Index#

borderRadius 控制聊天窗口的圆角（默认：20px）。zIndex 设置层叠顺序（默认：999999）。

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  borderRadius: 12,    // 更锐利的边角
  zIndex: 100000       // 更低的 z-index 以避免冲突
});

自定义 CSS#

若需超出内置选项的高级样式，可传入一个 customCSS 字符串。它会被注入到挂件的 Shadow DOM 中 —— 可以覆盖任何挂件样式，但不会影响您的页面。

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  customCSS: `
    .respondoai-chat {
      border-radius: 24px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    }
    .respondoai-launcher {
      box-shadow: none;
      border: 2px solid #e5e7eb;
    }
    .respondoai-header {
      backdrop-filter: blur(10px);
    }
    .respondoai-message.assistant {
      background: #f0f9ff;
    }
    /* 设置公告卡片内 CTA 按钮的样式 */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* 让公告 CTA 按钮横向排列，而非默认的纵向堆叠 */
    .respondoai-announcement-ctas {
      flex-direction: row;
    }
  `
});
自定义 CSS 运行于 Shadow DOM 内部 —— 与您的页面样式完全隔离。您可以放心地覆盖任何挂件类，而不会产生副作用。

可用的 CSS 类：

类元素
.respondoai-widget根容器（位置、z-index）
.respondoai-launcher浮动按钮
.respondoai-chat聊天窗口
.respondoai-header聊天顶部标题栏
.respondoai-messages消息列表容器
.respondoai-message.user用户消息气泡
.respondoai-message.assistant机器人消息气泡
.respondoai-input-area输入栏容器
.respondoai-input文本输入框
.respondoai-send发送按钮
.respondoai-suggestion-btn快捷问题按钮
.respondoai-announcement-cta-button公告卡片内的 CTA 按钮
.respondoai-announcement-ctas公告卡片中 CTA 按钮的包裹容器（用于目标布局）
您也可以在仪表盘中配置所有样式选项 —— 前往 Channels → Widget → Appearance。在仪表盘中所做的更改会通过 config API 自动下发给挂件。