コンタクトウィジェット
このスキルが生成するもの
以下の機能を備えた、単一の自己完結型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を解決します。文書化されたデフォルト値を使用し、空のオプションリンクは省略します。不足している値が要求されたウィジェットを実質的に変更し、安全にデフォルト化できない場合にのみ、1つの統合フォームで質問します。
- すべての提供された値をリテラルとしてインライン化した1つの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>を自動注入しないでください。バックエンド統合はユーザーが明示的にオプトインした場合のみ追加してください。