VChatCloud 개발자센터

한국어

한국어

Appearance

채팅 데모 시작하기 ​

VChatCloud는 SDK의 다양한 기능을 쉽게 이해하고 활용할 수 있도록 여러 스타일의 완성된 채팅 데모를 제공합니다. 이 가이드는 데모를 시작하는 두 가지 방법을 안내합니다.

  • <iframe> 임베드: 기존 웹사이트에 가장 빠르게 채팅을 추가하는 방법입니다.
  • 소스코드 다운로드: 데모의 UI와 동작을 직접 수정하고 싶을 때 사용하는 방법입니다.

시작하기 전, VChatCloud CMS에서 채팅방을 생성하고 채널키(Channel Key) 를 미리 준비해주세요. 채널키 확인 방법은 Quick Start 문서를 참고하세요.

방법 1: <iframe>으로 간편하게 임베드하기 ​

이 방법은 코드 수정 없이, 제공되는 <iframe> 태그를 복사하여 자신의 웹 페이지에 붙여넣기만 하면 됩니다.

  1. VChatCloud 데모 페이지에서 원하는 채팅 데모를 선택합니다.
  2. 소스코드 복사 버튼을 클릭하여 <iframe> 코드를 복사합니다.
  3. 복사한 코드를 자신의 HTML 파일 원하는 위치에 붙여넣습니다.
  4. 붙여넣은 코드의 src 속성에서 channelKey=YOUR_CHANNEL_KEY 부분을 찾아, 미리 준비한 실제 채널키로 변경합니다.
html
<!-- 내 웹 페이지의 HTML 파일 -->
<body>
  <!-- ... 다른 콘텐츠 ... -->

  <!-- VChatCloud 채팅 데모 iframe -->
  <iframe
    src="https://www.vchatcloud.com/chat-demo/iframe/iframe_pc/index.html?channelKey=YOUR_CHANNEL_KEY"
    frameborder="no"
    scrolling="no"
    width="396"
    height="736"
  ></iframe>

  <!-- ... 다른 콘텐츠 ... -->
</body>

이제 웹 페이지를 열면 지정한 채널키의 채팅방이 <iframe> 내에 나타납니다.

방법 2: 소스코드 다운로드하여 직접 실행하기 ​

데모의 디자인을 변경하거나 기능을 커스터마이징하고 싶다면 소스코드를 직접 다운로드하여 사용할 수 있습니다.

  1. 아래 링크에서 원하는 데모의 소스코드를 다운로드하고 압축을 해제합니다.

  2. 압축 해제한 폴더에서 js/login.js 파일을 엽니다.

  3. 파일 내에서 channelKey 변수를 찾아, 미리 준비한 실제 채널키 값으로 변경합니다.

    javascript
    // 파일: js/login.js

// ... (기타 코드)

// TODO: VChatCloud CMS에서 발급받은 본인의 채널키로 이 값을 변경해주세요.
channelKey = 'YOUR_CHANNEL_KEY';

// ... (기타 코드)

  4. 수정 후, 프로젝트의 index.html 파일을 브라우저에서 열면 데모가 실행됩니다.

TIP

유튜브 스타일 데모(web-pc, web-mobile)의 경우, js/login.js 파일의 youtubeId 변수 값을 원하는 유튜브 영상 ID로 변경하면 채팅 화면 상단에 해당 영상이 표시됩니다.

다음 단계 ​

이제 데모가 성공적으로 실행되는 것을 확인했습니다. 다음 단계로 무엇을 할지 선택해보세요.