Custom HTML: UCE Disabled

Enhance user experience with engaging in-app messages. Use custom HTML to add dynamic elements like gamification features and personalized messages. This guide shows you how to use HTML and JavaScript to create interactive in-app messages. When creating an in-app message in the HTML editor, follow these guidelines:

Essential Scripts: Include JavaScript in your HTML to enable custom functionalities. Use the following scripts:

<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: Assign click events to buttons with predefined classes. Refer to the table to learn the class names and their functionalities.

To enable interactive functionality with buttons, use the following HTML:

Assigning Click Event to Buttons

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

Assigning Close Event to Buttons

<button class="smt-close">Close</button>

Using JavaScript Methods

In certain scenarios, you may need to interact with HTML programmatically.

Passing Data From In-App Message to the App

Using Attribute Data: Pass values back to the app using the following custom attributes.

<button smt-click="https://www.google.co.in" smt-data='{"name": "Netcore"}' class="button smt-click">Open Url</button>

When clicked, this button will open the URL https://www.google.co.in and pass the additional data {"name": "Netcore"} to your app. Refer to the table to learn about some referencessmt-clicks.

Using JavaScript Method
You can call smartechTrackInAppMessage() with a 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);
	}

Refer to the table below for the sample values for smt-click or smt-c2a attribute.

Event-based Payload Personalization in Custom HTML

Personalization is supported in Android SDK version v3.2.30 onwards. Use the classes NC_RECO_SHOW and NC_RECO_HIDE accordingly.

This setup ensures that personalization based on event product_view and key company displays Apple as the default value if the company doesn't have a value.

Example:

[%__company$product_view$apple__%]

NC_RECO_SHOW: This class should be used for the element that contains the personalization syntax.

NC_RECO_HIDE: This class should be used in older SDK where personalization is not supported.

This means this personalization’s event name is product_view, and the key for personalization is company; if the company key does not contain any value, 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>

<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>