Installation
CDN 스크립트를 추가하여 설치할 수 있습니다.
HTML의 <head> 또는 <body> 태그에 스크립트를 추가하세요.
index.html
<script src="https://widget-dev.dapda.io/v1.js" type="module"></script>
<script type="module">
Dapda.init({
apiKey: 'your-api-key'
});
</script>Configuration
init() 함수에 전달하는 설정입니다. 위젯 스타일링은 대시보드에서 설정할 수 있습니다.
| Option | Type | Default | Description |
|---|---|---|---|
apiKey | string | required | Dapda API 키 |
customer | { id, name?, email? } | — | 로그인된 사용자 정보. 전달하면 고객 정보 폼을 건너뜁니다. |
customerForm | { enabled? } | { enabled: true } | 고객 정보 입력 폼 설정. { enabled: false }로 폼을 비활성화합니다. |
welcomeBubble | { enabled?, delay?, duration?, message?, backgroundColor?, textColor? } | 대시보드 설정 사용 | 환영 메시지 버블 설정. enabled: on/off, delay: 표시 지연(ms), duration: 지속 시간(ms, 0=무제한), message: 메시지 텍스트, backgroundColor: 버블 배경 색상(hex), textColor: 버블 텍스트 색상(hex). 대시보드 위젯 설정에서 on/off 및 세부 값을 구성할 수 있으며, SDK에서 설정하면 대시보드 설정을 덮어씁니다. |
locale | "ko" | "en" | "ja" | "zh" | "ko" | 위젯 UI 언어를 설정합니다. |
API
위젯을 프로그래밍 방식으로 제어할 수 있습니다.
Dapda.init(config)위젯을 초기화합니다. apiKey, customer, customerForm, locale 등 설정 객체를 인자로 받습니다.
Dapda.open()채팅 창을 프로그래밍 방식으로 엽니다.
Dapda.close()채팅 창을 프로그래밍 방식으로 닫습니다.
Dapda.destroy()페이지에서 위젯을 완전히 제거합니다.
Examples
다양한 활용 예시입니다.
기본 설정
API 키만 전달하면 고객 정보 입력 폼이 자동으로 표시됩니다.
기본 설정
// 최소 설정 (고객 정보 폼 자동 표시)
Dapda.init({
apiKey: "dp_xxx",
});로그인된 사용자
고객 정보를 직접 전달하면 폼 없이 바로 채팅이 시작됩니다.
로그인된 사용자
// 로그인된 사용자 (폼 없이 바로 채팅)
Dapda.init({
apiKey: "dp_xxx",
customer: {
id: "user_123", // 필수
name: "홍길동", // 선택
email: "hong@test.com", // 선택
},
});익명 채팅
고객 정보 폼을 비활성화하면 익명으로 바로 채팅할 수 있습니다.
익명 채팅
// 익명 채팅 (폼도 안 보여줌)
Dapda.init({
apiKey: "dp_xxx",
customerForm: { enabled: false },
});환영 메시지 버블
페이지 로드 후 일정 시간이 지나면 환영 메시지 버블이 표시됩니다. 대시보드 위젯 설정에서 on/off, 메시지, 지연 시간, 지속 시간을 설정할 수 있으며, SDK에서 직접 설정하면 대시보드 설정보다 우선 적용됩니다.
환영 메시지
// 환영 메시지 버블 (대시보드에서도 설정 가능)
Dapda.init({
apiKey: "dp_xxx",
welcomeBubble: {
enabled: true, // on/off
delay: 3000, // 3초 후 표시 (ms, 0이면 즉시)
duration: 10000, // 10초 후 자동 숨김 (ms, 0이면 숨기지 않음)
message: "안녕하세요!", // 커스텀 메시지 (선택)
backgroundColor: "#1f2937", // 버블 배경 색상 (선택)
textColor: "#ffffff" // 버블 텍스트 색상 (선택)
}
});버튼 클릭으로 열기
커스텀 버튼으로 채팅 창을 열 수 있습니다.
index.html
<button onclick="Dapda.open()">
상담하기
</button>