> For the complete documentation index, see [llms.txt](https://docs.hackle.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hackle.io/en/crm-marketing/in-app-message-guide/html-message.md).
# HTML In-App Message
{% hint style="danger" %}
**Custom HTML In-App Messages can execute JavaScript.**
Use them only after a clear review process to ensure no unintended behavior is performed.
Hackle is not responsible for issues caused by incorrectly written scripts within custom HTML in-app messages.
{% endhint %}
## HTML In-App Message
Hackle lets you create in-app message campaigns in two ways:
* Template-based in-app messages (Modal, Banner, Bottom Sheet)
* Custom HTML in-app messages
### Enhanced Message Customization
Provides more powerful customization capabilities compared to template-based Hackle in-app messages.
#### You can create in-app messages with a variety of layouts.
HTML in-app messages can be used for various on-site marketing scenarios that are difficult to express with templates.
* **Full-screen event banner**\
Boost conversion rates with a striking visual that fills the entire screen for seasonal promotions, limited-time discounts, and more.
* **Roulette / Scratch event**\
Create interactive events where users participate directly, including win animations, instant coupon issuance, and more.
* **Video popup**\
Increase message impact with video content such as new feature introductions and brand videos.
* **Onboarding tutorial**\
Create a multi-step guide that walks new users through your service's core features step by step.
* **Coupon / Benefit guide**\
Build UI that lets users take immediate action, such as copying coupon codes and checking benefits.
* **Notice / Update alert**\
Ensure that important information — app updates, service maintenance, terms changes, etc. — doesn't go unnoticed.
#### Diverse Personalization
HTML in-app messages can be personalized using user properties and the properties of the event that triggered them.
You can provide each user with a tailored experience made just for "**me**" to increase conversion rates.
* Display the user's name in the message
* Display the clicked product information in the message
#### You can create in-app messages that match your service's look and feel.
Apply design elements that suit your service's mood.
* You can use custom web fonts.
* All CSS can be applied freely, including button radius and modal position.
{% hint style="info" %}
For information on composing custom HTML messages, refer to the [JavaScript Bridge documentation](/en/crm-marketing/in-app-message-guide/html-message/in-app-message-html-javascript-bridge.md).
{% endhint %}
### FAQ
The in-app message appears too late.
Check the media and asset files in use by the in-app message. High-resolution images, large GIFs, and similar files used inside the in-app message may affect performance. The more assets that need to be loaded, the longer it takes for the in-app message to appear to users.
1. Use system fonts or improve the loading method for web fonts.
2. Keep file sizes such as images small.
3. Be careful not to run heavy scripts.
Can I use HTML that I was using with another solution?
Yes.
Replace the bridge or JavaScriptInterface used by the previous vendor with the Bridge provided by Hackle.
Korean characters inside the in-app message appear broken.
This is likely an encoding issue. Specify the encoding in the head tag as described at . You can also see an example in the Hackle template. [HTML Template](/en/crm-marketing/in-app-message-guide/html-message/in-app-message-html-template.md)
Is a banner/floating button UI possible?
While an HTML in-app message is displayed, interaction with the underlying content is difficult.
Therefore, a banner or floating button requires interaction with both the in-app message and the underlying content simultaneously, which makes it unsuitable for an HTML in-app message.
We recommend configuring it like a modal with an overlay so that users handle the in-app message as a priority.
(Browser) Can I block scrolling while the in-app message is visible?
If you want to block scrolling of the underlying content while an in-app message is displayed, you need to implement this in code.
Access to `window.parent.document` is possible, so control the overflow CSS.
### Troubleshooting
#### The in-app message does not appear.
The in-app message does not appear in an iOS WebView.
**Check whether any custom logic such as `WKNavigationDelegate` or `WKUIDelegate` has been added.**
The Hackle SDK renders HTML in-app messages using the iframe + srcdoc method. In this case, navigation inside the iframe occurs with the `about:srcdoc` scheme.
If the host iOS WebView's `WKNavigationDelegate` contains logic that blocks or ignores `about:srcdoc` requests, the iframe's `load` event does not fire properly, resulting in a timeout.
As a result, the HTML in-app message may not be displayed.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.hackle.io/en/crm-marketing/in-app-message-guide/html-message.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.