在线客服气泡（Chat Widget）是什么：效果预览与 AI 设计提示词

效果预览

你好 👋 我是 Nova 小助手，有什么可以帮你？免费版能用多久？

💬

适合用在哪

SaaS 官网、电商详情页、高客单价服务的咨询入口。

容易踩的坑

第三方客服脚本同步加载，常常 200KB 以上，直接拖慢首屏 LCP。
气泡固定在右下角，与吸底购买栏或移动端标签栏重叠，挡住主按钮。
展开面板后焦点没进入输入框，关闭后也不回到气泡，键盘用户迷失位置。

设计提示词 · Prompt

在线客服气泡（Chat Widget）：右下角固定一枚 48-56px 渐变圆形气泡（对话图标 + 绿色在线圆点）；停留 8-15 秒后主动弹一次问候卡片（"你好，我是小助手，有什么能帮你？"+ 快捷问题按钮），用户可关闭且不再弹。点击气泡展开 320-380px 宽聊天面板：消息流 + 底部输入框。卡片弹出用带回弹的 spring 动画。快捷回复按钮（"多少钱？""能试用吗？"）能大幅提高互动率——多数人懒得打字。

Chat Widget: a 48-56px gradient circular bubble fixed in the bottom-right corner (chat icon + green online dot); after 8-15 seconds on the page, proactively pop up a greeting card once ("Hi, I'm your assistant — how can I help?" + quick-question buttons), which the user can close and won't see again. Clicking the bubble opens a 320-380px-wide chat panel: message stream + input box at the bottom. Animate the card's appearance with a bouncy spring. Quick-reply buttons ("How much is it?" "Can I try it?") greatly boost engagement — most people are too lazy to type.

常见搭配

同一页面里经常和「在线客服气泡」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

常见问题手风琴FAQ Accordion 正在输入Typing Indicator Cookie 同意条Cookie Consent Banner

演示 HTML 结构

<div class="s s--abs" style="background:linear-gradient(180deg,#f4f4f7,#e9eaef)">
  <div class="d-chatwrap">
    <div class="d-chatcard">
      <span class="d-chatcard__msg">你好 👋 我是 Nova 小助手，有什么可以帮你？</span>
      <span class="d-chatcard__msg d-chatcard__msg--me">免费版能用多久？</span>
    </div>
    <span class="d-chatbubble">💬</span>
  </div>
</div>