联系小部件
此技能产出的内容
一个自包含的HTML文件，内含一个浮动聊天小部件，包括：
- 聊天气泡 — 固定在右下角的圆形按钮，用于打开/关闭面板
- 欢迎主界面 — 代理虚拟形象 + 名称 + 在线状态 + 问候语
- 消息输入框 — 带表情符号/发送按钮的文本字段（仅UI；需自行对接后端）
- 社交链接 — 一排圆形图标（Telegram、WhatsApp、Instagram、Messenger、Discord、Slack — 仅显示用户提供的）
- 会议卡片 — 可选的“预约会议”入口，含日历图标，链接到用户提供的URL（如Calendly、Cal.com、Lark等）
- 离线表单 — 当
is_available=false时显示的备用联系表单（姓名、邮箱、消息） - 移动端响应式 — 在小屏幕下全宽显示
输出为纯前端。无跟踪、无回传、无必要的外部服务。加载后即可离线使用。
设计方向
简洁、极简的SaaS风格。看起来像真实的产品小部件，而非玩具演示：
- 字体: Inter（Google Fonts），14px基准，半粗体标题
- 颜色: 单个用户选择的
primary_color驱动气泡、虚拟形象、发送按钮和强调色。其余部分使用中性石板色系（#1e293b/#64748b/#f1f5f9）。无紫色渐变、无玻璃态效果、无AI风格彩虹强调色。 - 圆角: 卡片16px，气泡和虚拟形象全圆角
- 阴影: 小部件面板
0 8px 32px rgba(0,0,0,0.12)，气泡0 4px 12px - 间距: 内部填充16px，元素间间距12px
- 状态: 悬停时按钮变暗约5%，激活时气泡缩放0.95
输入参数
技能接受用户提供的以下参数：
| 输入参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
primary_color | 颜色 | #4F7CFF | 驱动气泡、头部、发送按钮和强调色 |
agent_name | 字符串 | Assistant | 在头部问候语中显示 |
greeting | 字符串 | Hello! How can I help you today? | 头部中的副标题 |
is_available | 布尔值 | true | 在线状态；false时显示离线表单 |
social_telegram | 字符串 | (空) | Telegram链接 — 为空时省略 |
social_whatsapp | 字符串 | (空) | WhatsApp链接 — 为空时省略 |
social_instagram | 字符串 | (空) | Instagram链接 — 为空时省略 |
meeting_url | 字符串 | (空) | 预约URL（Calendly、Cal.com等） — 为空时省略 |
offline_message | 字符串 | We're currently offline. Leave a message and we'll get back to you! | 当is_available=false时显示 |
工作流程
- 从请求和已知上下文中解析出主题色、代理名称、问候语、在线/离线状态、社交链接和可选的会议URL。使用文档中的默认值，并省略空的链接。仅当缺失某个值会实质性改变请求的小部件且无法安全地使用默认值时，才一次性询问用户。
- 生成一个HTML文件，将所有提供的值内联为字面量（无模板引擎，输出中无
{{ }}占位符） - 默认在首次渲染时打开小部件面板，以便预览效果
- 除非用户明确要求后端集成，否则不要添加任何指向第三方SDK的
<script src="…">。输出必须能在本地磁盘运行，除了Google Fonts CSS外无需任何网络调用。
后端集成（仅按用户需求驱动）
生成的小部件是一个UI成品，默认不包含任何供应商代码。气泡、面板、社交链接和会议按钮开箱即用，无需后端。仅当用户希望实现双向对话时，才需要将消息输入框进行对接。
如果用户明确要求对接消息输入框到真实后端，按以下承诺递增顺序提供选项：
第一层 — 无后端（默认）
小部件已通过社交链接和会议URL作为联系界面工作。保持现状即可。
第二层 — 一次性消息，无聊天记录
mailto:后备方案 — 将发送处理替换为window.location.href = 'mailto:[email protected]?subject=...&body=' + encodeURIComponent(text)。零基础设施，但会打开访客的邮件客户端。- 自有
/api/contact端点 —fetch('/api/contact', { method: 'POST', body: JSON.stringify({ text }) })。用户自行处理投递（SendGrid、Resend、自建SMTP、Notion/Airtable webhook等）。
第三层 — 实时聊天（访客 ↔ 代理，聊天记录、正在输入、在线状态）
需要即时通讯/聊天SDK。以下任一均可，选择适合你技术栈的：
- Knocket — https://trtc.io/solutions/knocket （即插即用，免费）
- Crisp — https://crisp.chat
- Tawk.to — https://tawk.to
- Chatwoot（自托管） — https://chatwoot.com
- Intercom — https://intercom.com
请勿自动向生成输出中注入任何<script>标签——仅当用户明确选择时才添加后端集成。