AI Forge

다크 모드

Custom Example ​

MSAP Chat SDK를 커스터마이징하고 프로그래밍 방식으로 제어하는 예제입니다.

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 - Custom Example</title>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
        line-height: 1.6;
      }
      h1 {
        color: #e60012;
      }
      .controls {
        margin: 30px 0;
        padding: 20px;
        background: #f9f9f9;
        border-radius: 8px;
      }
      button {
        background: #e60012;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        margin: 5px;
        font-size: 14px;
      }
      button:hover {
        background: #cc0010;
      }
      .status {
        margin-top: 20px;
        padding: 15px;
        background: #e7f5ff;
        border-left: 4px solid #0969da;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <h1>MSAP Chat Widget - Custom Example</h1>

    <p>이 페이지는 MSAP Chat Widget의 커스터마이징 예제입니다.</p>

    <h2>프로그래밍 방식 제어</h2>
    <div class="controls">
      <button onclick="widget.open()">채팅 열기</button>
      <button onclick="widget.close()">채팅 닫기</button>
      <button onclick="widget.toggle()">채팅 토글</button>
      <button onclick="checkStatus()">상태 확인</button>
    </div>

    <div id="status" class="status" style="display: none;"></div>

    <!-- MSAP Chat Widget SDK -->
    <script src="https://sdk.turacocloud.com/msap-ai-chat.min.js"></script>
    <script>
      // 커스텀 설정으로 초기화
      const widget = MSAPChat.init({
        applicationKey: 'test1',
      });

      function checkStatus() {
        const status = widget.isOpen() ? '열림' : '닫힘';
        const statusEl = document.getElementById('status');
        statusEl.style.display = 'block';
        statusEl.innerHTML = `<strong>현재 상태:</strong> ${status}`;
      }

      console.log('MSAP Chat Widget initialized with custom configuration');
    </script>
  </body>
</html>

코드 설명 ​

1. 커스텀 버튼으로 제어 ​

html
<button onclick="widget.open()">채팅 열기</button>
<button onclick="widget.close()">채팅 닫기</button>
<button onclick="widget.toggle()">채팅 토글</button>

자체 UI로 위젯을 제어할 수 있습니다.

2. 상태 확인 ​

javascript
function checkStatus() {
  const status = widget.isOpen() ? '열림' : '닫힘';
  // 상태를 화면에 표시
}

isOpen() 메서드로 현재 상태를 확인합니다.

고급 예제 ​

자동 열기 ​

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

조건부 열기 ​

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

키보드 단축키 ​

javascript
document.addEventListener('keydown', (e) => {
  // Ctrl + K로 채팅 토글
  if (e.ctrlKey && e.key === 'k') {
    e.preventDefault();
    widget.toggle();
  }
});

스크롤 이벤트 ​

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

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

실행 결과 ​

  • 커스텀 버튼으로 위젯 제어 가능
  • 상태 확인 버튼으로 현재 상태 표시
  • 다양한 조건으로 자동 제어 가능

다음 단계 ​

라이브 데모

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