Guidelines for using custom HTML in In-app messages

đŸ“˜

Pro Tip: Add gamification experience to your app

Use custom html feature for in-app messaging use cases around gamification like timer, wheel of fortune, scratch code, self-hosted/3rd party feedback surveys, customized multi-page in-app message.

The HTML file must contain JavaScript to use your custom HTML creative.

JavascriptUse
https://cdnt.netcoresmartech.com/smartech-app.jsTo add interaction to your HTML creative and the Smartech SDK (in-app click and in-app close).
https://cdnt.netcoresmartech.com/smartech-iam-personalization.jsThis script is required for any personalisation of the HTML creative.
https://code.jquery.com/jquery-3.4.1.min.jsjQuery is needed to support the smartech-app.js
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnt.netcoresmartech.com/smartech-app.js"></script>
<script src="https://cdnt.netcoresmartech.com/smartech-iam-personalization.js"></script>

Adding Interaction To HTML

  • Using Predefined Classes
    You can assign click events to your button by assigning predefined classes, which are as follows.
Class nameFunctionality
.smt-clickAssigning this class will enable the click event for the button, and the Smartech SDK will share the click to the App and capture the In-App Message Click Event.
.smt-closeAssigning this class will enable the click event for the button, which will close the In-App Message; adding the Smartech SDK will capture the In-App Message Close Event.

Assign a click event to a button.

<button class="smt-click">Click Me</button>

Assign a close event to a button which will close the in-app message.

<button class="smt-close">Close</button>
  • Using JavaScript Methods
    There will be specific scenarios where you might want to interact with HTML programmatically.
Class nameFunctionality
smartechTrackInAppMessage()This method triggers a click interaction, and the Smartech SDK will share the click to the app level and capture the In-App Message Click Event.
smartechCloseInAppMessage()Calling this method to trigger a close interaction which will close the In-App Message, the Smartech SDK will capture the In-App Message Close Event.

Passing Data From In-App Message To The App

  • Using Attribute Data
    To pass any value back to the App, one can use the custom attribute to give the data back to the App.
Class nameFunctionality
smt-clickTo pass the deep link value back to your App.
smt-dataTo pass additional key-values pair back to your App.
<button smt-click="https://www.google.co.in" smt-data='{"name": "Netcore"}' class="button smt-click">Open Url</button>

Here when you tap the button, the deep link value will be https://www.google.co.in, and the additional key-value pair passed will be {"name" : "Netcore"}

Some reference smt-clicks

Send an SMS to a number.<button smt-click="sms:9860130363&body=Hello" class="button smt-click">Send SMS</button>
Call a number.<button smt-click="tel:9860130363" class="button smt-click">Call a number </button>
Send a Message via Whatsapp.<button smt-click="whatsapp://send?text=hello everyone"class="button smt-click">Whatsapp message</button>
Send an email.<button smt-click="mailto:[email protected]?subject=Hello&body=This is Email" class="button smt-click">Email</button>
  • Using JavaScript Method
    You can call the smartechTrackInAppMessage() method will have two parameters: deep link value and custom key-value pair.
function openDeeplinkWithCustomDataLocalFunction(){
		var deeplinkValue = "smartech://image";
		var person = {
		  firstName : "John",
		  lastName  : "Doe",
		  age     : 50,
		  eyeColor  : "blue"
		};
		var payloadValue = JSON.stringify(person);
		smartechTrackInApp(deeplinkValue, payloadValue);
	}
  1. Sample Values for smt-click attribute or smt-c2a attributes are given below:

Event based payload personalisation in custom HTML

Personalisation is enabled in Android SDK version v3.2.30 onwards
To support personalisation, one needs to add classes NC_RECO_SHOW & NC_RECO_HIDE
The personalisation syntax is [%__payload-property-name$event_name$default-value__%]

Example:

[%__company$product_view$apple__%]

NC_RECO_SHOW this class should be used for the element which contains the personalisation syntax.

NC_RECO_HIDE this class should be used in older SDK where personalisation is not supported.

This means this personalisation’s event name is product_view and the key to be used for personalisation is company; if the company key does not contain any value, then the default value will be displayed.

<span class="NC_RECO_SHOW" hidden=true>[%__company$product_view$apple__%]</span>
<span class="NC_RECO_HIDE">The message the older SDK/app users will see.</span>