> For the complete documentation index, see [llms.txt](https://bleepy.gitbook.io/bleepy-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bleepy.gitbook.io/bleepy-developers/game-promotion/web.md).

# Web

<figure><img src="/files/2yqoWDQ4s6evq3fpbHx0" alt=""><figcaption></figcaption></figure>

Web 도메인의 서비스를 사용하고 있는 경우 블리피에서 제공하는 HTML 임베디드 코드 추가만으로 인앱 게임을 쉽게 도입 할 수 있습니다. 임베디드 코드는 기본 HTML 구조로 구성되며 <mark style="color:blue;">`iframe`</mark>을 통해 런처를 렌더링하게 됩니다.\
서비스 내에서 런처를 호출할 수 있는 UI 트리거를 생성하세요. 생성된 UI 트리거로 유저는 서비스를 이탈하지 않고 게임을 진행할 수 있습니다.

***

## 임베디드 기본 정보 확인하기

* [<mark style="color:orange;">\[Client Admin\]</mark>](https://client-admin.bleepy.io/)에서 자사의 프로모션을 생성합니다.
* <mark style="color:blue;">`[프로모션 관리]`</mark> > <mark style="color:blue;">`[프로모션 목록]`</mark> > <mark style="color:blue;">`[프로모션 상세]`</mark> > <mark style="color:blue;">`[개발 정보 확인하기 팝업]`</mark>에서 임베디드 기본 정보를 확인 할 수 있습니다.

<figure><img src="/files/hgAFABz1d8UtYw9VGZw0" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/RhZjhTaH0pnztscXxCEg" alt=""><figcaption></figcaption></figure>

Ⓐ 개발 정보 확인하기 : 프로모션을 등록하시면 프로모션 상세 페이지에 해당 버튼이 노출되며, 버튼 클릭 시 임베디드 코드가 표시된 팝업창이 호출됩니다.

Ⓑ 임베디드 스크립트 : 최상단 <mark style="color:blue;">`<head>`</mark> 태그 내 삽입되는 스크립트 태그입니다. 매일 미션 등의 스크립트를 처리하는 역할을 합니다.

ⓒ 임베디드 코드 : 자사 서비스에서 원하는 위치에 블리피 인앱 게임을 실행할 수 있도록 HTML 코드 형태로 제공되며, <mark style="color:blue;">`iframe`</mark>에 런처 호출 URL이 로드됩니다.

ⓓ userKey 설정 : 인앱 게임 내에서 유저를 구분할 수 있는 유니크한 key 값으로 직접 설정이 필요한 부분입니다. 자사 서비스의 회원 DB 정보 중 유니크한 값을 해당 값과 매핑 시키는 것을 추천드립니다.

{% hint style="warning" %}
주의!

임베디드 코드에는 프로모션 정보를 호출하는데 핵심적인 역할을 수행하는 secretKey 정보가 포함됩니다. \
프로모션마다 제공되는 private key 값으로, 외부 유출이나 분실 시 재발급이 불가능합니다. \
또한, 보안 관리에 대한 책임은 전적으로 클라이언트에게 있음을 알려드립니다.
{% endhint %}

{% hint style="info" %}
개발에 대한 추가 설명이 더 필요하신가요?

"[<mark style="color:orange;">\[Client Admin\]</mark>](https://client-admin.bleepy.io/login) 로그인 → 오른쪽 하단 채널톡 위젯" 클릭 후 개발 카테고리에 문의 남겨주시면 기술 개발팀에서 확인 후 연락드리겠습니다.
{% endhint %}
