Custom HTML

Customize your in-app messages with HTML, CSS, and JavaScript for enhanced control and unique branding. Use custom HTML to create messages that perfectly match your brand and engage your app users seamlessly.

The following features are supported with HTML in-app messages:

• Use HTML templates to display messages within your app.
• Support for both Landscape and Portrait modes in in-app message campaigns.
• Upload custom HTML templates as a code file or directly paste your HTML code when creating in-app message campaigns.

⭐

Pro Tip

Use the custom HTML feature for in-app messaging to enhance gamification experiences. Create engaging elements like timers, wheels of fortune, scratch cards, self-hosted or third-party feedback surveys, and customized multi-page in-app messages.

📘

Note

• Ensure your HTML file contains JavaScript to use your custom HTML creative.
• Direct URL option under Custom HTML works on the following SDK versions and onward: iOS SDK version 2.4.3, Android SDK versions 2.0.11 and 2.2.12 (Android X compatible).

Create Campaign with Custom HTML

To create an In-app message campaign using HTML, follow these steps:

1. Choose any position under the Content section when you create your campaign.
2. Select the Custom HTML option to create the content for your campaign using our Code Editor.

Refer to the table below to learn more about all the Positions.

As you proceed, you see a Customise HTML screen. When creating your in-app message in the code editor, you'll find these options:

a. HTML file: Provide the code or upload HTML to create an in-app message.

b. URL: Provide the valid URL where your custom HTML is hosted.

3. Go to the Code Editor section on the left pane and add your HTML code to the box.

4. Press the CLEAR button to delete any existing code if needed. Our Code Editor also gives a Validate option, which verifies the correctness of the code you've entered.
5. Add a custom key value if required. Toggle the Custom key value button to add

Custom key-value: A custom key-value pair is a simple data structure that sends extra information with your in-app message. This lets you personalize the user experience and trigger specific actions within the app when the message is received. This data becomes available whenever an in-app message is clicked or dismissed.

• Set custom key-value data for specific Android or iOS apps, or both.
• Add up to 50 custom key-value pairs.
• Once enabled, you must add at least one key-value pair. Duplicate key names are not allowed.
• Only these characters are allowed: a-z, A-Z, 0-9, -, _, ., @, :, ', /, {, }.
• Only these characters are allowed: a-z, A-Z, 0-9, -, _, ., @, :, =, &, +, %, ?, #, ', /, {, }, [, ].

6. On the right pane, view your in-app message based on the code you entered.

Refer here to Schedule and Save your web message campaign.

Guidelines to Create Custom HTML (when UCE is Enabled)

📘

Important Note

If your pannel has disabled UCE, only the this is applicable.

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:

In-App Messaging is a dynamic feature that facilitates direct, real-time communication with users inside your application. By delivering customized messages based on user interactions or behaviors, it creates immersive, context-driven experiences that not only enhance engagement but also motivate users to take key actions.

Quick Start Guide:

If you're a developer looking to quickly dive into In-App Messaging, here's the streamlined approach to get it up and running in no time:

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

Detailed Integration Steps:

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 Explained

These configurations can be passed when initializing the SDK:

Implementing User Interactions

Adding Message Interactions

The SDK leverages data attributes to handle message interactions, which means you can track and manage user actions with minimal JavaScript. This lightweight approach gives you the power to track key interactions effectively without cluttering your code.

The SDK supports four primary action types, each designed to enable easy tracking and enhanced user engagement:

Passing Data From In-App Message To The App

Using Data Attributes

Here's a comprehensive list of available data attributes:

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

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

To personalize content using event payload data, use the following format. 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

By following this structure, developers 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)

This structured approach ensures seamless personalization, enhancing user engagement through dynamic and context-aware in-app messages.

Advance Personalization

If you want to carry out your own personalization without using the above default signature then the following steps has to be followed.

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

The developer needs to call SmartechAppSDK.showInAppMessageInSDK() once the personalization is done else 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 Smartech Panel.

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

This method retrieves custom application data stored within the SDK, which the developer passes.

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

// Method Data
JAVA:
-----------------------------------
HashMap<String, Object> data = new HashMap<>();
data.put("secret_token", "algaldkgtjasdlnalsk4364634sgdfg4ewt");
data.put("wallet_balance", 5000);

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

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

• Useful if the developer wants to pass some specific data to the In-App Message other than event data or user attribute data.

Guidelines to Create Custom HTML (when UCE is Disabled)

📘

Important Note

If your pannel has disabled UCE, only the this is applicable.

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 its 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 reference smt-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>