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 thesmartechTrackInAppMessage()
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>
Updated about 2 months ago