Membership registration and opening

# STEP1. 무료 회원가입 하기

VChatCloud (opens new window) 첫 페이지로 이동해서 상단의 무료 이용하기 (opens new window) 버튼을 클릭합니다.

무료 이용 신청 양식에 이메일, 이름, 비밀번호, 비밀번호 확인을 입력하시고 약관에 동의 하신 후 회원가입을 완료해주세요.

가입하신 이메일 주소로 인증 확인 메일이 발송됩니다.

인증 확인 메일 본문에 이메일 인증 버튼을 클릭하시면 회원가입 절차가 완료됩니다.

# STEP2. 채팅방 개설하기

VChatCloud 첫 페이지 상단의 로그인 (opens new window) 버튼을 클릭합니다. 회원 가입 시 등록한 이메일, 비밀번호로 로그인을 해주세요.

좌측 메뉴 채팅방 관리 > 채팅방 목록을 클릭합니다. 채팅방 개설 버튼을 통해 개설 시 필요한 정보들을 입력 후 생성 버튼을 클릭합니다.

채팅방 목록 화면에 노출이 되었다면, 정상적으로 채팅방이 만들어졌습니다.

# STEP3. Writing & Running Source Code

# Preparations

To run the Vue UI Kit, you need the following materials.

Node.js
npm (or whatever package manager you use)

Please copy the ‘Channel Key’ of the chat room you created and write it down separately.

If customization is not necessary, you can simply use the chat room using the iframe method.

Click the demo screen button on the main homepage, click the menu you want to copy among the various screens, and click the ‘Copy source code’ button to copy it separately.
Open notepad and paste the copied content. Change channelKey in the url part of <iframe src='url' ...></iframe> in Notepad.
- To change channelKey, change VBrhzLZgGG-nAFo5CS7jp-20210802120142 in channelKey=VBrhzLZgGG-nAFo5CS7jp-20210802120142 to the Channel Key copied in Step 1.
Save the file as <file name>.html (html format). After that, you can access it by running the saved file.

Enter and run the command below in the folder where you want to create the project.

To use TypeScript, you can change the --template parameter to vue-ts.

npm create vite@latest vchatcloud-vue-project -- --template

After executing the command, select Vue from the framework selection to create a new project. After that, move to the project folder and run the command below to install @vchatcloud/vue-ui-kit.

cd vchatcloud-vue-project

npm install @vchatcloud/vue-ui-kit

1
2
3

Add the following content to index.html. Write two script tags between head.

<head>
  <!-- ...existing code -->
  <script src="https://www.vchatcloud.com/lib/e7lib-latest.min.js"></script>
  <script src="https://www.vchatcloud.com/lib/vchatcloud-last.min.js"></script>
</head>

1
2
3
4
5

After that, enter the following into App.vue. However, the necessary values are replaced with new ones.

roomId: Enter the Channel Key copied in step 1.
clientKey: Unique key value that does not overlap between users
nickName: user nickname

<script setup lang="ts">
import { VChatCloudApp, VChatCloudAppProps } from "@vchatcloud/vue-ui-kit";

const vChatCloudAppProps: VChatCloudAppProps = {
  nickName: "NICK_NAME",
  roomId: "ROOM_ID",
  clientKey: "CLIENT_KEY",
  email: "EMAIL",
  grade: "user",
  privateContainer: "#privateWrap",
  sessionType: "parameter",
  userInfo: { profile: 8 },
};
</script>

<template>
  <div class="wrap">
    <VChatCloudApp
      :nick-name="vChatCloudAppProps.nickName"
      :room-id="vChatCloudAppProps.roomId"
      :client-key="vChatCloudAppProps.clientKey"
      :grade="vChatCloudAppProps.grade"
      :url="vChatCloudAppProps.url"
      :email="vChatCloudAppProps.email"
      :private-container="vChatCloudAppProps.privateContainer"
      :session-type="vChatCloudAppProps.sessionType"
      :user-info="vChatCloudAppProps.userInfo"
      :logo="vChatCloudAppProps.logo"
      :description="vChatCloudAppProps.description"
      :footer-description="vChatCloudAppProps.footerDescription"
    >
    </VChatCloudApp>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Run the development server by executing the command below in the terminal.

npm run dev

After that, click the address shown below to connect to the development server.

Overview →