연락처 위젯
이 스킬이 생성하는 것
다음을 포함하는 단일 자체 포함 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>를 주입하지 마십시오. 사용자가 명시적으로 동의한 경우에만 백엔드 통합을 추가하세요.