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.

Javascript	Use
https://cdnt.netcoresmartech.com/smartech-app.js	To add interaction to your HTML creative and the Smartech SDK (in-app click and in-app close).
https://cdnt.netcoresmartech.com/smartech-iam-personalization.js	This script is required for any personalisation of the HTML creative.
https://code.jquery.com/jquery-3.4.1.min.js	jQuery 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 name	Functionality
`.smt-click`	Assigning 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-close`	Assigning 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 name	Functionality
`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 name	Functionality
`smt-click`	To pass the deep link value back to your App.
`smt-data`	To 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);
	}

Sample Values for smt-click attribute or smt-c2a attributes are given below:

Open URL: https://www.google.co.in
Send SMS: sms:9899999999&body=Hello
Call this number: tel:9899999999
Deep link: www.google.co.in
Whatsapp: whatsapp://send?text=hello everyone
Email: [email protected]?subject=Hello&body=This is Test Email

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>

📘Pro Tip: Add gamification experience to your app

📘
Pro Tip: Add gamification experience to your app