# 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

![Create Hackle in-app messages based on HTML](/files/kCYD4fs1zLVRUVrh2m6W)

### Enhanced Message Customization

Provides more powerful customization capabilities compared to template-based Hackle in-app messages.

![Survey / PNG images / Video attachments, and more](/files/8TAjsIEZ7hl4c0E1VX3X)

#### 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.

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

<details>

<summary>The in-app message appears too late.</summary>

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.

</details>

<details>

<summary>Can I use HTML that I was using with another solution?</summary>

Yes.

Replace the bridge or JavaScriptInterface used by the previous vendor with the Bridge provided by Hackle.

</details>

<details>

<summary>Korean characters inside the in-app message appear broken.</summary>

This is likely an encoding issue. Specify the encoding in the head tag as described at <https://www.w3schools.com/tags/att_meta_charset.asp>. 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)

</details>

<details>

<summary>Is a banner/floating button UI possible?</summary>

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.

</details>

<details>

<summary>(Browser) Can I block scrolling while the in-app message is visible?</summary>

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.

</details>


---

# 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/en/crm-marketing/in-app-message-guide/html-message.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.