# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bleepy.gitbook.io/bleepy-developers/game-promotion/web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
