API 레퍼런스

Sayren Widget SDK의 모든 메서드와 속성을 설명합니다.

SayrenWidget

싱글톤 패턴으로 구현된 위젯 객체입니다. 전역에서 접근 가능합니다.

import { SayrenWidget } from '@sayren/widget';

메서드

init(config)

위젯을 초기화하고 FAB 버튼을 렌더링합니다.

await SayrenWidget.init({
  workspaceId: 'YOUR_WORKSPACE_ID'
});

매개변수:

이름	타입	필수	설명
config	`SayrenConfig`	✅	위젯 설정 객체

반환값: Promise<boolean> - 초기화 성공 여부

설정을 가져오지 못하면 FAB 버튼이 렌더링되지 않고 false를 반환합니다.

open()

프로그래밍 방식으로 채팅창을 엽니다.

SayrenWidget.open();

반환값: void

close()

프로그래밍 방식으로 채팅창을 닫습니다.

SayrenWidget.close();

반환값: void

trigger()

채팅창 상태를 토글합니다. 열려있으면 닫고, 닫혀있으면 엽니다.

SayrenWidget.trigger();

반환값: void

refresh()

위젯 설정을 다시 가져와 재렌더링합니다.

await SayrenWidget.refresh();

반환값: Promise<boolean> - 새로고침 성공 여부

서버에서 위젯 설정이 변경된 경우 이 메서드를 호출하여 새 설정을 적용할 수 있습니다.

destroy()

위젯을 완전히 제거합니다. 다시 사용하려면 init()을 호출해야 합니다.

SayrenWidget.destroy();

반환값: void

속성

status

현재 위젯 상태를 반환합니다.

console.log(SayrenWidget.status); // 'initialized'

타입: SayrenStatus

값	설명
`'uninitialized'`	초기화 전 상태
`'pending'`	초기화 중
`'initialized'`	초기화 완료, 사용 가능
`'destroyed'`	제거됨, 재초기화 필요

isOpen

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

if (SayrenWidget.isOpen) {
  console.log('채팅창이 열려있습니다');
}

타입: boolean

설정 옵션 (SayrenConfig)

init() 메서드에 전달하는 설정 객체입니다.

interface SayrenConfig {
  workspaceId: string;
  chatHost?: string;
  position?: 'bottom-right' | 'bottom-left';
  offset?: number;
  zIndex?: number;
}

workspaceId (필수)

Sayren 워크스페이스 ID입니다.

{
  workspaceId: 'ws_xxxxxxxx'
}

타입: string

워크스페이스 ID는 Sayren 대시보드의 워크스페이스 설정에서 확인할 수 있습니다.

chatHost

채팅 서버 URL입니다.

{
  chatHost: 'https://chat.sayren.co'
}

타입: string 기본값: 'https://chat.sayren.co'

position

FAB 버튼의 화면 위치입니다.

{
  position: 'bottom-right' // 또는 'bottom-left'
}

타입: 'bottom-right' | 'bottom-left' 기본값: 'bottom-right'

offset

FAB 버튼과 화면 가장자리 간의 간격 (픽셀)입니다.

{
  offset: 20
}

타입: number 기본값: 20

zIndex

위젯의 z-index 값입니다.

{
  zIndex: 2147483000
}

타입: number 기본값: 2147483000

기본값은 대부분의 웹사이트에서 위젯이 다른 요소 위에 표시되도록 매우 높게 설정되어 있습니다.

타입 내보내기

SDK에서 사용 가능한 TypeScript 타입들입니다.

import {
  SayrenWidget,
  type SayrenConfig,
  type SayrenStatus
} from '@sayren/widget';

SayrenConfig

위젯 설정 인터페이스입니다.

interface SayrenConfig {
  workspaceId: string;
  chatHost?: string;
  position?: 'bottom-right' | 'bottom-left';
  offset?: number;
  zIndex?: number;
}

SayrenStatus

위젯 상태 타입입니다.

type SayrenStatus =
  | 'uninitialized'
  | 'pending'
  | 'initialized'
  | 'destroyed';

전체 예시

import { SayrenWidget, type SayrenConfig } from '@sayren/widget';

// 설정 정의
const config: SayrenConfig = {
  workspaceId: 'ws_xxxxxxxx',
  chatHost: 'https://chat.sayren.co',
  position: 'bottom-right',
  offset: 20
};

// 초기화
async function initWidget() {
  const success = await SayrenWidget.init(config);

  if (success) {
    console.log('위젯 초기화 완료');
    console.log('상태:', SayrenWidget.status); // 'initialized'
  } else {
    console.error('위젯 초기화 실패');
  }
}

// 커스텀 버튼으로 제어
document.getElementById('open-btn')?.addEventListener('click', () => {
  if (SayrenWidget.status === 'initialized') {
    SayrenWidget.open();
  }
});

document.getElementById('close-btn')?.addEventListener('click', () => {
  SayrenWidget.close();
});

// 새로고침
document.getElementById('refresh-btn')?.addEventListener('click', async () => {
  await SayrenWidget.refresh();
});

// 정리
window.addEventListener('beforeunload', () => {
  SayrenWidget.destroy();
});

API 레퍼런스

On this page