Custom HTML
Learn to create in-app message using our custom HTML editor.
Customize your in-app messages with HTML, CSS, and JavaScript for enhanced control and unique branding. Use custom HTML to create messages that perfectly match your brand and engage your app users seamlessly.
The following features are supported with HTML in-app messages:
- Use HTML templates to display messages within your app.
- Support for both Landscape and Portrait modes in in-app message campaigns.
- Upload custom HTML templates as a code file or directly paste your HTML code when creating in-app message campaigns.
Pro TipUse the custom HTML feature for in-app messaging to enhance gamification experiences. Create engaging elements like timers, wheels of fortune, scratch cards, self-hosted or third-party feedback surveys, and customized multi-page in-app messages.
Note
- Ensure your HTML file contains JavaScript to use your custom HTML creative.
- Direct URL option under Custom HTML works on the following SDK versions and onward: iOS SDK version 2.4.3, Android SDK versions 2.0.11 and 2.2.12 (Android X compatible).
Create Campaign with Custom HTML
To create an In-app message campaign using HTML, follow these steps:
- Choose any position under the Content section when you create your campaign.
- Select the Custom HTML option to create the content for your campaign using our Code Editor.
Refer to the table below to learn more about all the Positions.
| Position | Description |
|---|---|
| Sticky Header | A banner message that sticks to the top of the screen. |
| Sticky Footer | A banner message that sticks to the bottom of the screen. |
| Half Interstitial | A message that covers half of the screen, typically centered. |
| Interstitial | A full-screen message appears over the entire screen temporarily. |
| Cover | A message that fully covers the entire screen, requiring user interaction. |
As you proceed, you see a Customise HTML screen. When creating your in-app message in the code editor, you'll find these options:
a. HTML file: Provide the code or upload HTML to create an in-app message.
b. URL: Provide the valid URL where your custom HTML is hosted.
- Go to the Code Editor section on the left pane and add your HTML code to the box.
Customise HTML for In-App Campaign
- Press the CLEAR button to delete any existing code if needed. Our Code Editor also gives a Validate option, which verifies the correctness of the code you've entered.
- Add a custom key value if required. Toggle the Custom key value button to add
Custom key-value: A custom key-value pair is a simple data structure that sends extra information with your in-app message. This lets you personalize the user experience and trigger specific actions within the app when the message is received. This data becomes available whenever an in-app message is clicked or dismissed.
Add a custom key value
- Set custom key-value data for specific Android or iOS apps, or both.
- Add up to 50 custom key-value pairs.
- Once enabled, you must add at least one key-value pair. Duplicate key names are not allowed.
- Only these characters are allowed: a-z, A-Z, 0-9, -, _, ., @, :, ', /, {,}.
- Only these characters are allowed: a-z, A-Z, 0-9, -, _, ., @, :, =, &, +, %, ?, #, ', /, {,}, [, ].
- On the right pane, view your in-app message based on the code you entered.
Refer here to Schedule and Save your web message campaign.
Updated 9 days ago