AI Forge

다크 모드

Basic 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 - Basic 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;
      }
      .code-block {
        background: #f5f5f5;
        padding: 15px;
        border-radius: 5px;
        overflow-x: auto;
        margin: 20px 0;
      }
      code {
        font-family: 'Monaco', 'Courier New', monospace;
      }
    </style>
  </head>
  <body>
    <h1>MSAP Chat Widget - Basic Example</h1>

    <p>이 페이지는 MSAP Chat Widget의 기본 사용 예제입니다.</p>

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

    <p>오른쪽 하단의 버튼을 클릭하면 채팅 위젯이 열립니다.</p>

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

코드 설명 ​

1. SDK 스크립트 로드 ​

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

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

2. 위젯 초기화 ​

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

applicationKey를 사용하여 위젯을 초기화합니다.

3. 자동 렌더링 ​

초기화 후 위젯이 자동으로 우측 하단에 렌더링됩니다.

실행 결과 ​

  • 우측 하단에 채팅 버튼이 나타납니다
  • 버튼 클릭 시 채팅 위젯이 열립니다
  • 다시 클릭하면 위젯이 닫힙니다

다음 단계 ​

라이브 데모

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