VChatCloud 개발자센터

한국어

한국어

Appearance

Quick Start (JS) ​

VChatCloud가 제공하는 데모 소스를 활용하여 1분 안에 채팅방을 만드는 방법을 안내합니다.

VChatCloud에 가입하고 채팅방을 만들어보세요. 이 가이드에서는 회원가입부터 채팅방을 만들고, 채팅방을 실행하는 데 필요한 Channel Key를 확인하고, 내 채팅방을 실행하는 방법까지 안내합니다.

STEP 1. VChatCloud 회원가입 ​

1. 회원가입 페이지 접속 ​

VChatCloud 홈페이지 상단의 [무료 이용하기] 버튼을 클릭하여 회원가입 페이지로 이동합니다.

메인 홈페이지

2. 가입 정보 입력 ​

양식에 이메일, 이름, 비밀번호를 입력하고 약관 동의 후 회원가입 버튼을 클릭하세요.

가입페이지

3. 이메일 인증 ​

가입한 이메일로 인증 메일이 발송됩니다. 메일 본문의 이메일 인증 버튼을 클릭하면 회원가입이 완료됩니다.

가입 완료 팝업이메일 확인

STEP 2. 채팅방 만들고 Channel Key 확인하기 ​

회원가입을 완료했다면 이제 채팅방을 만들 차례입니다.

1. CMS 로그인 ​

VChatCloud 홈페이지에서 [로그인] 버튼을 클릭하여 가입한 정보로 CMS에 로그인합니다.

CMS 로그인

2. 채팅방 만들기 ​

로그인 후, 왼쪽 메뉴에서 채팅방 관리 > 채팅방 목록으로 이동한 뒤 채팅방 개설 버튼을 클릭하세요. 필요한 정보를 입력하고 생성 버튼을 누르면 채팅방이 만들어집니다.

채팅방 생성

3. Channel Key 복사하기 ​

채팅방 목록에서 방금 만든 채팅방의 Channel Key를 복사하여 따로 메모해두세요. 이 키는 이후 STEP 3에서 채팅방을 실행할 때 필요합니다.

채널 키 복사

TIP

더 많은 기능이 궁금하신가요?

  • 채팅방 운영: CMS에서 참여자를 관리하고 공지사항을 보내는 등 다양한 기능을 활용해 보세요.
  • 내 서비스에 채팅 연동: REST API를 사용하면 당신의 서비스에 직접 채팅 기능을 연동하여 더 강력한 맞춤형 솔루션을 만들 수 있습니다.

STEP 3. 데모 소스로 채팅방 실행하기 ​

이제 복사한 데모 소스를 사용하여 실제 채팅방을 만들어 보겠습니다.

1. HTML 파일 만들기 ​

좋아하는 코드 에디터(예: Visual Studio Code, 메모장 등)를 열고, test.html이라는 파일을 생성 및 저장하세요.

2. 데모 소스 붙여넣기 ​

VChatCloud 홈페이지의 데모 화면에서 복사한 소스 코드를 위에서 만든 HTML 파일에 붙여넣습니다.

소스 코드 복사

데모 소스 코드 예시
html
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>VChatCloud Demo</title>
        <style>
            body,
            html {
                margin: 0;
                padding: 0;
                height: 100%;
                overflow: hidden;
            }
            iframe {
                border: none;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
      <iframe src='https://www.vchatcloud.com/chat-demo/iframe/iframe_pc/v4/index.html?channelKey=ZhmisYmAeU-BaCqe318eC-20220225183959&youtubeId=Zp9dQh0Dd7k' frameborder='no' scrolling='no' marginwidth='0' marginheight='0' width='1216' height='691'></iframe>
    </body>
</html>

3. Channel Key 적용하기 ​

STEP 1에서 복사한 Channel Key를 YOUR_CHANNEL_KEY 부분에 붙여넣습니다.

html
<iframe src='https://www.vchatcloud.com/chat-demo/iframe/iframe_pc/v4/index.html?channelKey=YOUR_CHANNEL_KEY&youtubeId=Zp9dQh0Dd7k' frameborder='no' scrolling='no' marginwidth='0' marginheight='0' width='1216' height='691'></iframe>

YouTube 동영상 추가하기

YouTube 동영상을 사용하고 싶다면 iframe의 src 속성에 youtubeId 파라미터를 추가하세요. 원하는 동영상으로 변경하고 싶은 경우 youtubeId 파라미터의 값을 변경하세요.

채널키 변경

html
<iframe src='https://www.vchatcloud.com/chat-demo/iframe/iframe_pc/v4/index.html?channelKey=YOUR_CHANNEL_KEY&youtubeId=YOUTUBE_VIDEO_ID' frameborder='no' scrolling='no' marginwidth='0' marginheight='0' width='1216' height='691'></iframe>

적용 예시:

html
<iframe src='https://www.vchatcloud.com/chat-demo/iframe/iframe_pc/v4/index.html?channelKey=YOUR_CHANNEL_KEY&youtubeId=Zp9dQh0Dd7k' frameborder='no' scrolling='no' marginwidth='0' marginheight='0' width='1216' height='691'></iframe>

4. HTML 파일 실행하기 ​

저장된 HTML 파일을 웹 브라우저에서 열면, 나만의 채팅방이 실행되는 것을 확인할 수 있습니다.

실행화면

다음 단계 ​

축하합니다! 성공적으로 VChatCloud 채팅방을 만들었습니다. 이제 다음 단계로 무엇을 할지 선택해보세요.

채팅 UI 커스터마이징 ​

현재 사용한 iframe 방식 외에도 다양한 스타일의 데모를 사용하거나 직접 수정할 수 있습니다.

SDK로 직접 개발하기 ​

iframe이 아닌 JavaScript SDK를 사용하여 완전히 커스텀한 채팅 애플리케이션을 만들고 싶다면 아래 내용을 확인해보세요.

고급 기능 알아보기 ​

더 많은 기능을 활용하고 싶다면 아래 내용을 확인해보세요.