Methods

위젯 인스턴스에서 사용할 수 있는 모든 메서드를 설명합니다.

open()

채팅 위젯을 엽니다.

widget.open();

예제

// 버튼 클릭으로 채팅 열기
document.getElementById('supportBtn').addEventListener('click', () => {
  widget.open();
});

close()

채팅 위젯을 닫습니다.

widget.close();

예제

// 3초 후 자동으로 닫기
setTimeout(() => {
  widget.close();
}, 3000);

toggle()

채팅 위젯의 열림/닫힘 상태를 토글합니다.

widget.toggle();

예제

// 단축키로 토글
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'k') {
    e.preventDefault();
    widget.toggle();
  }
});

isOpen()

채팅 위젯이 열려있는지 확인합니다.

• Returns: boolean - 열려있으면 true, 닫혀있으면 false

const isOpen = widget.isOpen();

예제

// 상태에 따라 다른 동작
if (widget.isOpen()) {
  console.log('채팅이 열려있습니다');
} else {
  console.log('채팅이 닫혀있습니다');
}

// 조건부 열기
if (!widget.isOpen()) {
  widget.open();
}

setTheme(theme)

위젯의 색 테마를 바꿉니다. 위젯을 다시 마운트하지 않고 즉시 적용됩니다.

• Parameters: theme — 'light' | 'dark'

widget.setTheme('dark');

초기 테마는 theme 옵션으로 지정합니다. 기본값은 'light'입니다.

예제

const widget = MSAPChat.init({
  applicationKey: 'your-key',
  theme: 'light',
});

// 호스트 페이지의 테마 토글에 맞춰 위젯도 바꾼다
themeToggleButton.addEventListener('click', () => {
  const isDark = document.documentElement.classList.toggle('dark');
  widget.setTheme(isDark ? 'dark' : 'light');
});

// OS 설정을 따르는 경우
const media = window.matchMedia('(prefers-color-scheme: dark)');

const widget = MSAPChat.init({
  applicationKey: 'your-key',
  theme: media.matches ? 'dark' : 'light',
});

media.addEventListener('change', (event) => {
  widget.setTheme(event.matches ? 'dark' : 'light');
});

destroy()

위젯을 제거하고 모든 리소스를 정리합니다.

widget.destroy();

WARNING

destroy() 호출 후에는 위젯을 다시 사용할 수 없습니다. 새로 초기화해야 합니다.

예제

// SPA에서 페이지 전환 시
router.beforeEach(() => {
  if (widget) {
    widget.destroy();
  }
});

// React에서 클린업
useEffect(() => {
  const widget = MSAPChat.init({ applicationKey: 'key' });

  return () => {
    widget.destroy();
  };
}, []);

사용 예제

자동으로 채팅 열기

// 5초 후 자동으로 열기
setTimeout(() => {
  if (!widget.isOpen()) {
    widget.open();
  }
}, 5000);

페이지 로드 시 조건부 열기

// 처음 방문한 사용자에게만 열기
const hasVisited = localStorage.getItem('hasVisited');
if (!hasVisited) {
  widget.open();
  localStorage.setItem('hasVisited', 'true');
}

스크롤 위치에 따라 제어

window.addEventListener('scroll', () => {
  const scrollPercentage = (window.scrollY / document.body.scrollHeight) * 100;

  // 50% 이상 스크롤하면 열기
  if (scrollPercentage > 50 && !widget.isOpen()) {
    widget.open();
  }
});

비활성 시간 후 열기

let inactiveTimer;

function resetTimer() {
  clearTimeout(inactiveTimer);
  inactiveTimer = setTimeout(() => {
    if (!widget.isOpen()) {
      widget.open();
    }
  }, 30000); // 30초 비활성 시
}

// 사용자 활동 감지
document.addEventListener('mousemove', resetTimer);
document.addEventListener('keypress', resetTimer);
resetTimer();

TypeScript 타입

SDK 타입 파일을 포함하면 MSAPChat.Instance를 전역에서 사용할 수 있습니다. 타입 파일 설치 방법은 TypeScript 타입 안내를 참고하세요. 주요 제어 메서드의 타입은 다음과 같습니다.

declare namespace MSAPChat {
  interface Instance {
    open(): void;
    close(): void;
    toggle(): void;
    isOpen(): boolean;
    setTheme(theme: 'light' | 'dark'): void;
    destroy(): void;
  }
}

다음 단계

• Events - 이벤트 시스템
• Options - 초기화 옵션
• Examples - 라이브 예제