In App Custom HTML

HTML

If the type selected is HTML the content section will show a text area in which you can write or paste some custom HTML. A preview will show how the message will appear on the device.

An example of a simple in App message with some HTML text, a background colour and an action button is shown below. You can use CSS and Javascript as needed. And there are a number of Javascript methods available to manipulate the In App message, details below. 

 

InAppMessage Configuration and 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 setting you can configure for the In App Message these are detailed below:

//Set wether 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;

//YOU MUST Execute this method 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. And also 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>

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.