聯絡小工具
此技能產出的內容
一個自包含的單一 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 | color | #4F7CFF | 驅動氣泡、標題、傳送按鈕、強調色 |
agent_name | string | Assistant | 在標題問候中顯示 |
greeting | string | Hello! How can I help you today? | 標題中的副標題 |
is_available | boolean | true | 線上狀態；false 時顯示離線表單 |
social_telegram | string | (空白) | Telegram 連結 — 空白時省略 |
social_whatsapp | string | (空白) | WhatsApp 連結 — 空白時省略 |
social_instagram | string | (空白) | Instagram 連結 — 空白時省略 |
meeting_url | string | (空白) | 預約 URL（Calendly、Cal.com 等）— 空白時省略 |
offline_message | string | 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 成品，預設不包含任何第三方程式碼。氣泡、面板、社交連結與會議按鈕無需後端即可直接運作。只有訊息輸入框需要串接，若用戶希望實現雙向對話。
如果用戶明確要求將訊息輸入框串接至真實後端，依投入程度提供以下選項：
第 1 層 — 無後端（預設）
小工具已可透過社交連結 + 會議 URL 作為聯絡管道。維持原樣即可。
第 2 層 — 一次性訊息，無聊天記錄
mailto:替代方案 — 將send處理函式取代為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 網路鉤子等）。
第 3 層 — 即時聊天（訪客 ↔ 代理、歷史記錄、打字狀態、在線狀態）
這需要 IM/聊天 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> — 僅在用戶明確選擇加入時才添加後端整合。