HTML In-App Message
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.
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.
For information on composing custom HTML messages, refer to the JavaScript Bridge documentation.
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.
Use system fonts or improve the loading method for web fonts.
Keep file sizes such as images small.
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 https://www.w3schools.com/tags/att_meta_charset.asp. You can also see an example in the Hackle template. HTML Template
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.
Last updated