In-app custom HTML

When you select Custom HTML for your in-app message campaign, the content section will show a text area in which you can write or paste your own HTML.

🚧

HTML experts only

Using your own code may affect how the message is shown in different devices, preventing it from adjusting to the screen size (i.e., the "responsiveness" of the message). Make sure to use HTML that is responsive and review our in-app creative guidelines for best results.

A preview will show how the message will appear on the device in portrait or landscape orientation. You can select different device models, to show the preview of your In-app message in different screen sizes.

Example of in App message created using custom HTML.Example of in App message created using custom HTML.

Example of in App message created using custom HTML.

You can use CSS and Javascript as needed. There are a number of Javascript methods available to manipulate the In App message, details below.

In-app message configuration and SDK methods

Initialise the InAppMessage SDK

In order to be able to manipulate the In App Message you must add the following Javascript line to import the InAPPMessage SDK in your custom HTML:

<script type = "text/javascript"
src = "https://api.xtremepush.com/sdk/inapp/v1/lib.js?v=1.0"> </script>

Configure settings

There are a number of settings you can configure within the script tag shown above for in-App messages.

//Set whether or not to hide the status bar. Takes true or false, default is true
InAppMessage.hideStatusBar = false;
// Turn default fade animation style on or off. Options are true or false, default is true 
InAppMessage.animationFade = false;
//Set animation style when In App first appears over rights, default fade. Style options are “from-left” | from-right” | from-top” | from-bottom” 
InAppMessage.animationSlide = "from-left";
//Lock display Orientation takes "portrait" or "landscape", by default it will not lock
InAppMessage.lockOrientation = "portrait";
//If your In App Message has a form that requires input you must set this as true, default false  
InAppMessage.requiresTextInput = true;

🚧

The following method must be executed when all configurations above are set:
InAppMessage.init();

Add these settings to your custom HTML as shown below.

<script type="text/javascript">
InAppMessage.hideStatusBar = false;
InAppMessage.animationSlide = "from-left";
InAppMessage.lockOrientation = "portrait";
InAppMessage.init();
</script>

SDK Methods

Closing the in-app message:

// To close your custom In App Message call the following method
InAppMessage.close('close_button');

Opening a URL from the in-app message:

// To open a URL from your custom In App Message call the following method
InAppMessage.action('url_button', 'https://xtremepush.com','outside');

Example

Below is an example of a very simple Custom HTML in-app message with some settings configured, a button that links to a URL and a button to close the in-app message:

<body style="background: grey; border: 10px solid blue; padding: 5; margin: 0">
<script type="text/javascript" src="https://api.xtremepush.com/sdk/inapp/v1/lib.js?v=1.0"></script>
<button onclick="InAppMessage.close('close_button');">Close</button>
<button onclick="InAppMessage.action('url_button', 'https://xtremepush.com','outside');">URL</button>
<script type="text/javascript">
InAppMessage.hideStatusBar = false;
InAppMessage.animationSlide = "from-left";
InAppMessage.lockOrientation = "portrait";
InAppMessage.init();
</script>
</body>

Updated 2 months ago


In-app custom HTML


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.