플레이어에 로그인하면 채팅, 좋아요, 게임 참여 등 다양한 인터랙션 기능을 사용할 수 있습니다.
자사몰 회원을 플레이어에 로그인 연동하여 많은 참여를 유도해 보세요.
기본적으로 플레이어 로그인은 식별 가능한 id , 닉네임으로 표현될 nick 값을 넘겨주어야 합니다.
다음 2가지 방식을 이용할 수 있습니다.
🛠️사전 작업
🛠️URL 방식
1. 라이브 목록 > 해당 방송 URL/설치 클릭
2. URL로 설치 클릭 > URL 링크 복사
https://home.gripcloud.show/player/live/{channelId}?id=#userId&nick=#nickname
3. URL에서 id, nick 변수에 값을 입력하면 로그인 연동이 완료됩니다.
id=testId&nick=testNick
id: 플레이어에 노출되지 않습니다. 시청자를 식별하는 데 사용됩니다.
nick: 플레이어에 노출됩니다. 채팅과 같은 인터랙션에 노출됩니다.
id , nick 모두 입력해야 로그인 상태가 됩니다.
🛠️스크립트 방식
1. 라이브 목록 > 해당 방송 URL/설치 클릭
2. 스크립트로 설치 클릭 > 스크립트 Head/Body 복사
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0, viewport-fit=cover">
<style>
#embed {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
min-width: 320px;
margin: 0 auto;
width: 100vw;
}
</style>
<div id="embed"></div>
<script src="https://static.gripcloud.show/resource/js/gripcloud.min.js"></script>
<script>
const session = {
"id": "{id}", // Unique User Data 필수
"nick": "{nickname}", // 필수
"gender": "X", // 선택 (F-여성, M-남성, U-중성, X-알수없음)
"age": "00" // 선택 (10-10대, ... , 60-60대, 00-알수없음)
};
const channelId = "ch_xxxxxxxxxxxxxxx";
Gripcloud.load({
channelId: channelId,
type: Gripcloud.TYPE.LIVE_PLAYER,
session: session
})
</script>
3. 스크립트 id, nick 변수에 값을 입력하면 로그인 연동이 완료됩니다.
const session = {
"id": "testId", // 필수
"nick": "testNick", // 필수
"gender": "X", // 선택 (F-여성, M-남성, U-중성, X-알수없음)
"age": "00" // 선택 (10-10대, ... , 60-60대, 00-알수없음)
};
id: 플레이어에 노출되지 않습니다. 시청자를 식별하는 데 사용됩니다.
nick: 플레이어에 노출됩니다. 채팅과 같은 인터랙션에 노출됩니다.
id , nick 모두 입력해야 로그인 상태가 됩니다.
4. 전체 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0, viewport-fit=cover">
</head>
<body>
<style>
#embed {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
min-width: 320px;
margin: 0 auto;
width: 100vw;
}
</style>
<div id="embed"></div>
<script src="https://static.gripcloud.show/resource/js/gripcloud.min.js"></script>
<script>
const session = {
"id": "testId", // Unique User Data 필수
"nick": "testNick", // 필수
"gender": "X", // 선택 (F-여성, M-남성, U-중성, X-알수없음)
"age": "00" // 선택 (10-10대, ... , 60-60대, 00-알수없음)
};
const channelId = "ch_xxxxxxxxxxxxxxx";
Gripcloud.load({
channelId: channelId,
type: Gripcloud.TYPE.LIVE_PLAYER,
session: session
})
</script>
</body>
</html>
