사용법

다양한 환경에서 Sayren Widget을 사용하는 방법을 알아봅니다.

기본 사용법 (Vanilla JavaScript)

HTML 페이지에 추가

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to my website</h1>

  <!-- Sayren Widget -->
  <script src="https://unpkg.com/@sayren/widget"></script>
  <script>
    SayrenWidget.init({
      workspaceId: 'YOUR_WORKSPACE_ID'
    });
  </script>
</body>
</html>

프로그래밍 방식으로 제어

// 초기화
await SayrenWidget.init({
  workspaceId: 'YOUR_WORKSPACE_ID'
});

// 채팅창 열기
SayrenWidget.open();

// 채팅창 닫기
SayrenWidget.close();

// 토글 (열려있으면 닫고, 닫혀있으면 열기)
SayrenWidget.trigger();

// 상태 확인
console.log(SayrenWidget.status); // 'initialized'
console.log(SayrenWidget.isOpen); // true/false

커스텀 버튼으로 열기

FAB 버튼 대신 자체 버튼을 사용할 수도 있습니다:

<button id="chat-button">💬 문의하기</button>

<script>
  document.getElementById('chat-button').addEventListener('click', () => {
    if (SayrenWidget.status === 'initialized') {
      SayrenWidget.trigger();
    }
  });
</script>

React / Next.js

React 또는 Next.js에서는 useEffect를 사용하여 위젯을 초기화합니다.

기본 사용법

"use client";

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

export function ChatWidget() {
  useEffect(() => {
    SayrenWidget.init({
      workspaceId: 'YOUR_WORKSPACE_ID',
    });

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

  return null; // FAB은 SDK가 직접 DOM에 렌더링
}

Next.js App Router에서 사용

// app/layout.tsx
import { ChatWidget } from '@/components/chat-widget';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ChatWidget />
      </body>
    </html>
  );
}

외부에서 위젯 제어하기

"use client";

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

export function ContactButton() {
  const handleClick = () => {
    if (SayrenWidget.status === 'initialized') {
      SayrenWidget.open();
    }
  };

  return (
    <button onClick={handleClick}>
      문의하기
    </button>
  );
}

Vue.js

<template>
  <div>
    <button @click="openChat">문의하기</button>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { SayrenWidget } from '@sayren/widget';

onMounted(async () => {
  await SayrenWidget.init({
    workspaceId: 'YOUR_WORKSPACE_ID'
  });
});

onUnmounted(() => {
  SayrenWidget.destroy();
});

const openChat = () => {
  if (SayrenWidget.status === 'initialized') {
    SayrenWidget.trigger();
  }
};
</script>

설정 옵션

모든 설정 옵션을 사용한 예시:

await SayrenWidget.init({
  // 필수: 워크스페이스 ID
  workspaceId: 'YOUR_WORKSPACE_ID',

  // 선택: 채팅 서버 URL (기본값: 'https://chat.sayren.co')
  chatHost: 'https://chat.sayren.co',

  // 선택: FAB 버튼 위치 (기본값: 'bottom-right')
  position: 'bottom-right', // 또는 'bottom-left'

  // 선택: 화면 가장자리로부터 간격 (기본값: 20)
  offset: 20,

  // 선택: z-index (기본값: 2147483000)
  zIndex: 2147483000
});

키보드 단축키

Escape: 열려있는 채팅창 닫기

반응형 동작

화면 크기	채팅창 크기
Desktop (≥768px)	400×600px
Mobile (<768px)	전체 화면

모바일에서는 자동으로 전체 화면으로 표시되어 더 나은 사용자 경험을 제공합니다.

사용법

On this page