SuperAPI AI 工具集

contact-widget

前端与建站

查看项目

更新于 10-16 09:34

技能介绍

用途:生成一个自包含的悬浮聊天联系人组件,输出为单个 HTML 文件,不依赖第三方 SDK。适合作为网站右下角的联系入口。

主要能力:悬浮聊天气泡(右下角圆形按钮,点击开合面板);欢迎首页(头像、名称、在线状态、问候语);消息输入框(含表情与发送图标,仅为 UI);社交链接图标行(Telegram、WhatsApp、Instagram、Messenger、Discord、Slack 中用户提供者);可选“预约会议”卡片,链接到用户提供的 URL;离线兜底表单(姓名、邮箱、消息),在 is_available=false 时显示;移动端自适应,小屏全宽。

使用方式:向用户索要主色、助手名称、问候语、在线/离线状态、要展示的社交链接及可选预约 URL,然后将这些值以内联字面量写入一个 HTML 文件;首次渲染默认展开面板。默认不注入任何第三方脚本,除 Google Fonts 外无网络请求。

后端对接(仅用户主动要求时):默认无需后端,社交链接与预约链接即可充当联系面。一次性消息可用 mailto: 兜底,或 POST 到自有 /api/contact。需要实时聊天、历史、输入中、在线状态时需接入 IM/聊天 SDK,如 Knocket、Crisp、Tawk.to、Chatwoot(自托管)、Intercom。

设计取向:极简 SaaS 风格,Inter 字体,14px 基准,16px 圆角,单一主色驱动气泡、头像、发送按钮与强调色;面板阴影 0 8px 32px rgba(0,0,0,0.12),气泡 0 4px 12px。

限制:默认纯前端,消息输入未接后端;不自动注入任何 script;具体计费与价格暂未提供。