구성 시스템을 통해 위젯의 외관, 동작 및 기능을 사용자 지정하세요.
모든 위젯 설정은 대시보드의 위젯 구성에서 관리됩니다. 구성에는 외관 설정, 동작 옵션 및 콘텐츠 사용자 지정이 포함됩니다.
구성을 위젯의 DNA로 생각하세요 — 색상과 글꼴에서 대화 흐름 및 초기 메시지까지 모든 것을 정의합니다. 가장 좋은 점은? 구성에 대한 변경 사항은 웹사이트의 코드 변경 없이 즉시 적용됩니다.
🎨 실시간 사용자 지정
대시보드의 시각적 구성 편집기를 사용하여 변경 사항을 실시간으로 확인하세요. 색상이 어떻게 보일지 또는 버튼이 어떻게 작동할지 추측할 필요가 없습니다 — 게시하기 전에 모든 것을 미리 볼 수 있습니다.
시각적 외관은 위젯이 웹사이트의 자연스러운 일부처럼 느껴지도록 하는 데 중요합니다. 우리의 외관 설정은 모든 시각적 측면에 대한 완전한 제어를 제공합니다.
브랜드 아이덴티티와 일치하는 색상을 선택하세요. 모든 색상 값은 16진수 형식이어야 합니다(예: #FF5733).
전문 팁: 텍스트가 선택한 배경에 대해 가독성을 유지하도록 색상 대비 검사 도구를 사용하세요. 이는 접근성 준수를 위해 특히 중요합니다.
외관 아래에서 별도의 밝은 및 어두운 색상 팔레트를 설정할 수 있습니다 — 각 모드는 고유한 프리셋과 색상을 가지고 있습니다. 방문자가 보는 것은 data-theme="light|dark|system"(system은 방문자의 장치를 따릅니다)로 포함 시 선택되거나, 런타임에서 CompaninWidget.setTheme()로 선택됩니다. 어두운 팔레트를 비워 두면 밝은 색상에서 자동으로 파생됩니다.
사용 사례 및 청중에 맞게 위젯의 크기를 적절하게 조정하세요. 더 큰 치수는 더 많은 대화 맥락을 제공하고, 더 작은 치수는 덜 방해가 됩니다.
모바일 고려 사항: 위젯은 모바일 장치에서 자동으로 크기가 조정되지만, 다양한 화면 크기에서 구성을 테스트하여 모든 사용자에게 좋은 경험을 보장하세요.
동작 설정은 위젯이 사용자와 상호작용하는 방식과 다양한 컨텍스트에 응답하는 방식을 제어합니다.
⚠️ 권장 사항
대부분의 사이트는 위젯을 축소된 상태로 시작하는 것이 좋습니다(<code>start_open: false</code>) — 방해가 되지 않도록. 도움이 필요한 사용자는 자연스럽게 버튼을 클릭할 것입니다. 전용 도움/지원 페이지의 경우 열기 시작하는 것이 유익할 수 있습니다.
인사 메시지는 사용자가 위젯을 열 때 가장 먼저 보는 것입니다. 환영하고, 명확하며, 행동 지향적으로 만드세요. 사용자가 일반 작업으로 안내할 수 있는 대화형 버튼을 포함할 수 있습니다.
좋은 인사 메시지는 다음과 같아야 합니다:
예시: "안녕하세요! 👋 저는 제품, 가격 또는 계정에 대한 질문을 도와드리기 위해 여기 있습니다. 오늘 무엇을 도와드릴까요?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>대화 흐름은 사용자를 일반 시나리오로 안내하는 미리 정의된 경로입니다. FAQ, 문제 해결 또는 반품이나 예약과 같은 다단계 프로세스에 적합합니다.
흐름은 특정 키워드나 버튼 클릭으로 트리거됩니다. 트리거되면 선택적 작업 버튼과 함께 일련의 응답을 표시하여 AI 처리 없이 안내된 대화 경험을 생성합니다.
흐름에 대한 모범 사례:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}여러 언어에 대한 텍스트를 구성하세요:
고급 스타일링을 위한 사용자 정의 CSS 추가:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}향상된 기능을 위한 외부 API 엔드포인트 구성: