커스터마이징

ZeroTalk.init() 에 옵션을 전달해 위젯 외관과 동작을 조정합니다.

ZeroTalk.init({
  pluginKey: "YOUR_PLUGIN_KEY",
  apiBaseUrl: "https://api.talk.zeroworks.ai/api/v1",
  wsUrl: "wss://api.talk.zeroworks.ai/ws/sdk",
  title: "고객센터",
  hideLauncher: false,
  hideGreeting: false,
  launcherSize: "medium",
  position: { bottom: 20, right: 20 },
  greeting: {
    text: "안녕하세요! 무엇을 도와드릴까요?",
    delay: 3000,
  },
});

옵션

옵션	타입	기본값	설명
pluginKey	string	(필수)	Plugin Key
title	string	—	위젯 헤더 타이틀
hideLauncher	boolean	false	런처 버튼 숨기기
hideGreeting	boolean	false	인사 메시지 숨기기
launcherSize	"small" | "medium" | "large" | number	"medium"	런처 크기
position	{ bottom, right }	{ bottom: 20, right: 20 }	위젯 위치 (px)
launcherIcon	string	—	커스텀 런처 아이콘 (SVG)
autoStart	boolean	true	자동 연결
keepChannel	boolean	false	채널 이탈 후에도 채널 유지
greeting.text	string	—	인사 메시지 텍스트
greeting.delay	number	—	인사 메시지 지연 시간 (ms)
greeting.onlineText	string	—	온라인 상태 텍스트
greeting.offlineText	string	—	오프라인 상태 텍스트

사용자 정보 연동

로그인된 사용자 정보를 함께 전달할 수 있습니다. memberHash 발급은 회원 인증 페이지를 참고하세요.

ZeroTalk.init({
  pluginKey: "YOUR_PLUGIN_KEY",
  apiBaseUrl: "https://api.talk.zeroworks.ai/api/v1",
  wsUrl: "wss://api.talk.zeroworks.ai/ws/sdk",
  memberId: "user-123",
  memberHash: "HMAC_HASH",
  profile: {
    name: "홍길동",
    email: "hong@example.com",
  },
});

JavaScript API

위젯 초기화 후 전역 ZeroTalk 객체로 제어합니다.

HTML / Vanilla

ZeroTalk.open();
ZeroTalk.close();
ZeroTalk.setHideLauncher(true);
ZeroTalk.setHideGreeting(true);

React

import { useZeroTalk } from "@zerotalk/react-sdk";

function ChatButton() {
  const { open, close, toggle, isReady } = useZeroTalk();
  return (
    <button onClick={toggle} disabled={!isReady}>
      채팅
    </button>
  );
}