Custom HTML: UCE Enabled

📘
Important Note
Custom HTML is applicable only when UCE is enabled in your Netcore CE dashboard.

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.

Quick Start Guide

If you are looking to create In-App Messages, refer to the steps given below.

<!-- Add the Smartech App SDK JS to your HTML -->
<script src="https://cdnt.netcoresmartech.com/smartech-app-sdk/scripts/prod/smartech-app-sdk.js?v=1.0.0"></script>

<!-- Initialize with basic configuration -->
<script>
    SmartechAppSDK.init();
</script>

Integration and Configuration

Adding Smartech App SDK JS

<script src="https://cdnt.netcoresmartech.com/smartech-app-sdk/scripts/prod/smartech-app-sdk.js?v=1.0.0"></script>

Initialization and Configuration

<script>
    SmartechAppSDK.init();
</script>

The SDK must be initialized with the appropriate configuration settings to ensure smooth functionality. Below is a complete breakdown of the available options.

SmartechAppSDK.init({
    forceEnableLogs: false,             // Enable detailed logging for debugging
    deferShowInAppInSDK: false,         // Control when messages appear
    showInAppOnLoad: false,             // Show after all resources load
    showInAppOnDomLoad: true,           // Show after DOM loads (recommended)
    enableDefaultPersonalization: true  // Enable dynamic content personalization
});

Configuration Options

The following table outlines the configurations that can be passed when initializing the SDK.

Sl No.	Parameter	Datatype	Default Value	Description
1	`forceEnableLogs`	`boolean`	`false`	When enabled, provides detailed SDK operation logging Useful during development and debugging Can also be enabled by adding `smt-debug=1` to your URL
2	`deferShowInAppInSDK`	`boolean`	`false`	Controls whether in-app messages should be shown automatically or manually. When false: In-app messages are shown automatically based on `showInAppOnLoad` or `showInAppOnDomLoad` settings When true: In-app messages won't show automatically; you must call `SmartechAppSDK.showInAppMessageInSDK()` manually when ready to show the In-App Message.
3	`showInAppOnLoad`	`boolean`	`false`	Shows messages after the window's load event Waits for all resources (images, stylesheets) to load Provides complete visual stability but may delay message display This option is ignored if `deferShowInAppInSDK` is true.
4	`showInAppOnDomLoad`	`boolean`	`true`	Shows messages after the `DOMContentLoaded` event Recommended setting for optimal user experience Balances quick display with visual stability
5	`enableDefaultPersonalization`	`boolean`	`true`	Enables automatic content personalization Automatically sets `deferShowInAppInSDK` to true Required for using Smartech's default personalization features

Implementing User Interactions

Adding Message Interactions

The SDK uses data attributes to handle message interactions. It means you can track and manage user actions with minimal JavaScript. This approach enables you to track key interactions effectively without cluttering your code.

The table below outlines the four primary action types supported by the SDK.

Action Names	Description
`SMTInAppClick`	Tracks message click events.
`SMTInAppClose`	Tracks message close events.
`SMTInAppTrackEventViaSDK`	Tracks custom events.
`SMTInAppProfilePushViaSDK`	Updates user profile data.

Passing Data From In-App Message To The App

Using Data Attributes

The table below provides a comprehensive list of available data attributes.

HTML Attribute Name	Description
`data-smt-action`	This attribute is required for any interactive element you want to track. Allowed Values `SMTInAppClick` \| `SMTInAppClose` \| `SMTInAppTrackEventViaSDK` \| `SMTInAppProfilePushViaSDK`
`data-smt-deeplink`	This attribute is used to specify a deep link URL that should be opened when the element is clicked. Useful for directing users to specific screens or sections in your mobile app.
`data-smt-payload`	This attribute allows you to pass additional JSON data with the click event. This data will be included in the event tracking and can be used for analytics or other purposes.
`data-smt-eventName`	The event name that you want to track via the Smartech SDK.

Tracking Click Event & Passing Data

<button 
    data-smt-action="SMTInAppClick" 
    data-smt-deeplink="sales_offer_screen" 
    data-smt-payload='{"campaignId": "summer_sale_2024"}'>
    Track In-App Click Event
</button>

Tracking Close Event & Passing Data

<button 
    data-smt-action="SMTInAppClose"
    data-smt-payload='{"campaignId": "summer_sale_2024"}'>
    Close Message
</button>

Tracking Events

<button 
    data-smt-action="SMTInAppTrackEventViaSDK"
    data-smt-eventName="add_to_cart"
    data-smt-payload='{"name": "iPhone X", "price": "135000.00"}'>
    Add To Cart
</button>

Update User Profile

<button 
    data-smt-action="SMTInAppProfilePushViaSDK"
    data-smt-payload='{"company_name": "Netcore Cloud", "location": "Thane"}'>
    Update Profile
</button>

Data Attribute Summary

Action	Valid Data Attribute(s)	Valid `data-smt-action` Values	Sample Button Code
Track In-App Message Click	`data-smt-action`, `data-smt-deeplink`, `data-smt-payload`	`SMTInAppClick`	<button data-smt-action="SMTInAppClick" data-smt-deeplink="sales_offer_screen" data-smt-payload='{"campaignId": "summer_sale_2024"}'> Track In-App Click Event `
Track In-App Message Close	`data-smt-action`, `data-smt-payload`	`SMTInAppClose`	`<button data-smt-action="SMTInAppClose" data-smt-payload='{"campaignId": "summer_sale_2024"}'> Close Message
Track Custom Event	`data-smt-action`, `data-smt-eventName`, `data-smt-payload`	`SMTInAppTrackEventViaSDK`	`<button data-smt-action="SMTInAppTrackEventViaSDK" data-smt-eventName="add_to_cart" data-smt-payload='{"name": "iPhone X", "price": "135000.00"}'> Add To Cart
Update Profile Push	`data-smt-action`, `data-smt-payload`	`SMTInAppProfilePushViaSDK`	`<button data-smt-action="SMTInAppProfilePushViaSDK" data-smt-payload='{"company_name": "Netcore Cloud", "location": "Thane"}'> Update Profile

Using JavaScript Methods

Tracking Click Event & Passing Data

let deeplink = "https://www.google.com";
let payload = {
    "campaignId": "summer_sale_2024"
};
SmartechAppSDK.trackInAppClick(deeplink, payload);

Tracking Close Event & Passing Data

let payload = {
    "campaignId": "summer_sale_2024"
};
SmartechAppSDK.trackInAppClose(payload);

Tracking Events

let eventname = "add_to_cart";
let payload = {
    "name": "iPhone X", 
    "price": "135000.00"
};
SmartechAppSDK.trackEventViaSDK(eventname, payload);

Update User Profile

let payload = {
    "company_name": "Netcore Cloud",
    "location": "Thane"
};
SmartechAppSDK.trackProfilePushViaSDK(payload);

Personalization Guide

Personalization in Netcore CE enables the creation of dynamic content that adjusts based on user data and behavior.

The personalization syntax follows a structured format, helping the SDK understand what data to retrieve and how to handle cases where certain data might be missing.

Basic Personalization

Event Payload Personalization

Use the following format to personalize content using event payload data. If the specified event property is unavailable, a fallback value will automatically be used.

🚧
Syntax
[%__payload-property$event_name$default_value__%]

User Attribute Personalization

Use the following format to personalize content with stored user attributes. If the specified attribute is unavailable, a fallback value will be used.

🚧
Syntax
[%__user_attribute$netcore_user_attribute$default_value__%]

Syntax Breakdown

Every personalization expression is enclosed within special markers and contains three essential components. Let's break down the structure.

Enclosing Markers

Each signature must start with [%__ and end with __%].
These markers indicate that the content needs to be processed dynamically.

Component Separation

The signature contains three components, separated by the $ symbol.
All three components are required for a valid signature.

Component Details

Component	Description
User Attribute Property	Specifies which event property or user attribute should be retrieved.
Attribute Type Identifier	For event payloads: payload-property For user attributes: netcore_user_attribute (fixed value, cannot be modified)
Default Value	Used when the specified attribute/property is unavailable Can be customized for each campaign

By following this structure, you can easily integrate and personalize In-App Messages while ensuring a seamless experience.

Examples

Event Payload Example
[%__purchase_amount$order_completed$0.00__%] (Inserts purchase_amount from order_completed event, defaults to 0.00 if missing)

User Attribute Example
[%__first_name$netcore_user_attribute$User__%] (Displays user's first_name, defaults to User if missing)

Advance Personalization

If you want to carry out your own personalization without using the above default signature, you must follow the following steps.

Initialize SDK With Custom Configuration

SmartechAppSDKHandler.init({
    deferShowInAppInSDK: true,
    enableDefaultPersonalization: false
});

Here, we are instructing the SDK to defer displaying the In-App Message to the user, as we are disabling the default personalization performed by the SDK.

🚧
Must Remember
You need to call SmartechAppSDK.showInAppMessageInSDK() after completing personalization; otherwise, the In-App Message will not be visible.

Get Event Payload

This method retrieves data for specific events previously tracked by the SDK. The SDK stores the last 200 events performed by the user. You can fetch event payloads by specifying the event names.

let eventNames = ["add_to_cart", "remove_from_cart"];
let payload = SmartechAppSDK.getEventPayloadFromSDK(eventNames);
console.log(payload);

// Sample Data
{
  "events": [
    {
      "eventName": "add_to_cart",
      "payload": {
        "product": {
          "prid": 100,
          "name": "Apple iPhone X - 256 GB",
          "price": 76900,
          "currency": "₹",
          "url": "https://cdnt.netcoresmartech.com/smartechapp-sdk/inapp-message/img/iphone-x.webp",
          "company": "Apple",
          "color": "Space Gray",
          "category": "Electronics",
          "quantity": 2,
          "description": "Meet the iPhone X - the device that's so smart that it responds to a tap, your voice, and even a glance. Elegantly designed with a large 14.73 cm 5.8 Super Retina screen and a durable front-and-back glass, this smartphone is designed to impress. "
        }
      }
    },
    {
      "eventName": "remove_from_cart",
      "payload": {
        "product": [
          {
            "prid": 100,
            "name": "Apple iPhone X - 256 GB",
            "price": 76900,
            "currency": "₹",
            "url": "https://cdnt.netcoresmartech.com/smartechapp-sdk/inapp-message/img/iphone-x.webp",
            "company": "Apple",
            "color": "Space Gray",
            "category": "Electronics",
            "quantity": 1,
            "description": "Meet the iPhone X - the device that's so smart that it responds to a tap, your voice, and even a glance. Elegantly designed with a large 14.73 cm 5.8 Super Retina screen and a durable front-and-back glass, this smartphone is designed to impress. "
          },
          {
            "prid": 101,
            "name": "Apple AirPods",
            "price": 18900,
            "currency": "₹",
            "url": "https://cdnt.netcoresmartech.com/smartechapp-sdk/inapp-message/img/airpod.webp",
            "company": "Apple",
            "color": "Space Gray",
            "category": "Electronics",
            "quantity": 1,
            "description": "AirPods with Wireless Charging Case.More magical than ever. The new AirPods-complete with Wireless Charging Case-combine intelligent design with breakthrough technology and crystal clear sound. Powered by the new Apple H1 headphone chip, AirPods now feature hands-free access to Siri using just your voice. And up to 3 hours of talk time on a single charge."
          }
        ]
      }
    }
  ]
}

Accepts an array of event names as input.
Returns an object containing payloads of the last occurrences of these events.
Useful for personalizing in-app messages based on a user’s past actions.

Get User Attribute Payload

This method fetches user profile attributes stored in the SDK. The attributes are synced with the Netcore CE dashboard.

let userAttribute = SmartechAppSDK.getUserProfileFromSDK();
console.log(userAttribute);

// Sample Data
{
  "events": [
    {
      "eventName": "netcore_user_attribute",
      "payload": {
        "FIRST_NAME": "First Name",
        "LAST_NAME": "Last Name",
        "AGE": 45
      }
    }
  ]
}

Retrieves all available user attributes.
Attributes may include name, email, location, preferences, or any other custom fields set in the Smartech Panel.
Ideal for customizing in-app messages based on user demographics or behavior.

Get SDK Level Data

This method provides insights into SDK-specific details.

let userAttribute = SmartechAppSDK.getSDKData();
console.log(userAttribute);

// Sample Data
{
  "appVersion": "1.0.9.32",
  "deviceWidth": "1080",
  "platform": "app",
  "appBuild": "10932",
  "deviceHeight": "2340",
  "osVersion": "10",
  "screenOrientation": "portrait",
  "identity": "",
  "countryCode": "in",
  "appId": "bebb79a53a2bf5190bad9420f1a449c8",
  "appBundleId": "com.netcore.smartech.java.podtwo",
  "smtSrc": "smartech",
  "lat": "13.9166253",
  "lng": "79.8522568",
  "appJsSdkBuildCode": 1,
  "deviceMake": "huawei",
  "timeZone": "GMT+05:30",
  "osName": "android",
  "pushToken": "fHE9YwGcQAmzVnq2LOwRg9:APA91bFa0p5UVls0Kg80cyxblifIS2neixssOFKwQbXyMi0dMGX-j01cG8dzvFWixnuIKsKZYE7--aQKvLGoGYbCnngceDXkl5z8YPpE_3_nstw-dvZLjtw",
  "advertiserId": null,
  "bod": 2602,
  "guid": "b42b604a-631a-4bb6-b316-d98ad95403e4",
  "deviceModel": "stk-l22",
  "sdkVersion": "3.6.0",
  "enableJavaScriptLogsInSDK": true,
  "deviceLocale": "en"
}

Fetches metadata about the SDK’s tracked events.
Useful for using any SDK specific data in the In-App Message.

Get App Level Data

Retrive the data on javascript which the app sets to SDK:

This method retrieves custom application data stored within the SDK which is passed by the developer.

let userAttribute = SmartechAppSDK.getAppData();
console.log(userAttribute);

Integration step to set the App Data from the App:

The below integration can be used to set any data from the app to SDK, which can be utilized in the inapp message for personalization.

HashMap<String, Object> data = new HashMap<>();
data.put("secret_token", "algaldkgtjasdlnalsk4364634sgdfg4ewt");
data.put("wallet_balance", 5000);

Smartech.getInstance(new WeakReference<>(context)).setInAppAppData(data);

val data : HashMap<String, Any> = HashMap()
        data["secret_token"] = "algaldkgtjasdlnalsk4364634sgdfg4ewt"
        data["wallet_balance"] = 5000
  
Smartech.getInstance(WeakReference(context)).setInAppAppData(data)

NSDictionary *data = @{
        @"secret_token": @"algaldkgtjasdlnalsk4364634sgdfg4ewt",
        @"wallet_balance": @5000
};
[[Smartech sharedInstance] setInAppAppData: data];

let data: [String: Any] = [
    "secret_token": "algaldkgtjasdlnalsk4364634sgdfg4ewt",
    "wallet_balance": 5000
]
Smartech.sharedInstance().setInAppAppData(data)

Use this to pass specific data to the In-App Message beyond event data or user attribute data.

Updated about 1 hour ago

Did this page help you?