Typebot.io 聊天泡泡窗口尺寸调整指南

Typebot.io 是一个开源的聊天机器人构建平台，它提供了灵活的嵌入方式，其中泡泡窗口(bubble)是最常用的嵌入形式之一。本文将详细介绍如何调整泡泡窗口的宽度和高度，解决开发者在集成过程中可能遇到的尺寸限制问题。

泡泡窗口尺寸调整方法

在Typebot.js 0.3及以上版本中，可以通过初始化配置中的theme.chatWindow参数来设置泡泡窗口的最大尺寸：

Typebot.initBubble({
  typebot: 'my-typebot',
  theme: {
    chatWindow: { 
      maxWidth: '500px', 
      maxHeight: '600px' 
    },
  }
});

关键注意事项

1. CSS样式覆盖限制：直接通过CSS修改typebot-bubble::part(bot)的宽度可能不会生效，因为泡泡窗口有内置的最大尺寸限制机制。

2. 响应式设计考虑：虽然可以设置较大的尺寸，但建议考虑移动端适配，设置合理的最大值以确保良好的用户体验。

3. 单位使用：尺寸值可以使用px、%或vw等CSS单位，根据实际需求选择合适的单位。

4. 版本兼容性：此配置方式适用于Typebot.js 0.3及以上版本，旧版本可能需要不同的配置方法。

最佳实践建议

1. 对于桌面端应用，建议maxWidth设置在400-600px之间，既保证内容显示又不会占据过多屏幕空间。

2. 高度设置应考虑聊天内容长度，一般500-700px是比较合适的范围。

3. 可以通过媒体查询在不同设备上设置不同的尺寸值，实现更好的响应式效果。

通过正确配置这些参数，开发者可以灵活控制Typebot泡泡窗口的显示尺寸，满足不同场景下的集成需求。