# HTML 인앱 메시지 템플릿
{% hint style="info" %}
HTML 인앱 메시지 템플릿을 사용해서 빠르게 시작해보세요.
복사 붙여넣기만으로 바로 이용할 수 있는 HTML 인앱 메시지 템플릿을 제공합니다.
{% endhint %}
### How to use
1. 핵클 대시보드에서 [인앱 메시지 캠페인을 생성](/crm-marketing/user-journey-guide.md)합니다.
2. 레이아웃 > **HTML**을 선택합니다.
3. 아래에서 제공하는 템플릿 중 하나를 선택합니다.
4. 템플릿과 함께 제공되는 HTML 코드를 복사하여 핵클 HTML 에디터에 붙여넣습니다.
5. 템플릿 내용을 자사 서비스에 맞는 내용으로 업데이트합니다.
6. [실제 디바이스에서 메시지를 테스트](/crm-marketing/user-journey-guide.md)한 뒤 캠페인을 운영합니다.
### 템플릿 목록
#### Confetti
**구성 요소**
1. 외부 script를 활용하여 confetti를 렌더링합니다.
2. "지금 선물 받기" 버튼을 클릭하는 경우 `https://example.com/gift` URL로 이동하며 **`mega_gift_receive`** 를 이벤트 속성으로 포함하는 인앱 메시지 전환 이벤트를 발생시킵니다.
3. "다음에 받을게요" 버튼을 클릭하는 경우 인앱 메시지가 닫힙니다.
**HTML Code**
```html
🎁
축하합니다! 특별 선물이 도착했어요
지금 바로 선물을 확인하고 준비된 혜택을 누려보세요!
```
***
#### Scratch
**구성 요소**
1. canvas를 활용하여 scratch할 수 있는 보드를 렌더링합니다.
2. "다시 보지 않기"와 "닫기 버튼"을 클릭하는 경우 인앱 메시지를 닫습니다.
3. scatch 하면 "이용권 받기" CTA가 노출되고, 클릭 시에 `https://naver.com` URL로 이동하며 **`scratch_event`** 를 이벤트 속성으로 포함하는 인앱 메시지 전환 이벤트를 발생시킵니다.
**HTML Code**
```html
스크래치 해보세요!
🎉 당첨!
핵클 7일 무료 이용권
문질러서 보상을 확인하세요!
```
***
#### Feedback
**구성 요소**
1. 이모지를 클릭하면 제출 버튼이 활성화됩니다.
2. 제출 시 선택한 이모지를 이벤트 속성으로 포함하여 커스텀 이벤트를 전송합니다.
1. 이벤트명: `daily_mood_survey_submit`
2. 이벤트 속성(선택한 이모지): `mood_value`
3. 제출 시 `survey_submit_confirm` 를 이벤트 속성으로 갖는 인앱 메시지 전환 이벤트가 발생합니다.
**HTML Code**
```html
💬 Service Feedback
Feedback
핵클 서비스 이용 경험을 알려주세요.
소중한 의견은 서비스 개선에 활용됩니다.
😔
🙁
😐
🙂
😁
```
---
# 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://docs.hackle.io/crm-marketing/in-app-message-guide/html-message/in-app-message-html-template.md?ask=
```
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.