AI Forge

다크 모드

Popup Mode Example ​

별도의 브라우저 창으로 열리는 MSAP Chat SDK Popup 모드 사용 예제입니다.

HTML 예제 ​

html
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MSAP Chat - Popup Mode Example</title>
  </head>
  <body>
    <h1>MSAP Chat Widget - Popup Mode</h1>

    <p>Popup 모드에서는 채팅 위젯이 별도의 브라우저 창으로 열립니다.</p>

    <h2>사용 방법</h2>
    <pre><code>&lt;script src="https://sdk.turacocloud.com/msap-ai-chat.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
  const widget = MSAPChat.init({
    applicationKey: 'your-key',
    mode: 'popup'
  });
&lt;/script&gt;</code></pre>

    <!-- MSAP Chat Widget SDK -->
    <script src="https://sdk.turacocloud.com/msap-ai-chat.min.js"></script>
    <script>
      const widget = MSAPChat.init({
        applicationKey: 'test1',
        mode: 'popup',
      });
    </script>
  </body>
</html>

코드 설명 ​

1. SDK 스크립트 로드 ​

html
<script src="https://sdk.turacocloud.com/msap-ai-chat.min.js"></script>

CDN을 통해 SDK를 로드합니다.

2. Popup 모드로 위젯 초기화 ​

javascript
const widget = MSAPChat.init({
  applicationKey: 'test1',
  mode: 'popup', 
});

mode: 'popup'을 지정하여 팝업 모드로 초기화합니다.

3. 토글 버튼 ​

초기화 후 우측 하단에 토글 버튼이 자동으로 생성됩니다.

  • 버튼 클릭 시 팝업 창이 열립니다
  • 다시 클릭하면 팝업 창이 닫힙니다

장점 ​

  • 대화 유지: SSR 환경에서 페이지 전환 시에도 대화가 끊기지 않습니다
  • 멀티태스킹: 웹사이트를 탐색하면서 동시에 채팅할 수 있습니다
  • 넓은 공간: 별도 창으로 더 넓은 채팅 공간을 제공합니다

주의사항 ​

  • 브라우저의 팝업 차단 설정을 확인해주세요
  • 모바일 환경에서는 자동으로 inline 모드로 전환됩니다
  • 팝업 창을 닫으면 대화가 종료됩니다

프로그래밍 방식 제어 ​

토글 버튼 없이 프로그래밍 방식으로 제어할 수도 있습니다.

javascript
const widget = MSAPChat.init({
  applicationKey: 'test1',
  mode: 'popup',
  showToggleButton: false, // 토글 버튼 숨기기
});

// 팝업 창 열기
document.getElementById('openBtn').addEventListener('click', () => {
  widget.open();
});

// 팝업 창 닫기
document.getElementById('closeBtn').addEventListener('click', () => {
  widget.close();
});

// 상태 확인
if (widget.isOpen()) {
  console.log('팝업 창이 열려있습니다');
}

커스터마이징 ​

팝업 창의 크기를 지정할 수 있습니다.

javascript
const widget = MSAPChat.init({
  applicationKey: 'test1',
  mode: 'popup',
  width: 500, // 팝업 창 너비
  height: 800, // 팝업 창 높이
});

사용 시나리오 ​

Next.js 프로젝트 ​

javascript
// pages/_app.js 또는 layout에서
useEffect(() => {
  const widget = MSAPChat.init({
    applicationKey: process.env.NEXT_PUBLIC_CHAT_KEY,
    mode: 'popup',
  });

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

페이지 라우팅 시에도 팝업 창이 유지되어 대화가 끊기지 않습니다.

Nuxt.js 프로젝트 ​

vue
<!-- plugins/msap-chat.client.js -->
<script>
export default defineNuxtPlugin(() => {
  if (window.MSAPChat) {
    window.MSAPChat.init({
      applicationKey: useRuntimeConfig().public.chatKey,
      mode: 'popup',
    });
  }
});
</script>

다음 단계 ​

라이브 데모

실제 동작을 보려면 라이브 데모 페이지를 방문하세요.