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.

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.

Passing Data From In-App Message To The App

Using Data Attributes

The table below provides 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 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.

Personalization works in two steps. First, you mark the parts of your HTML that contain dynamic content using the data-smt-pz attribute. Second, inside those marked elements, you write personalization signatures that describe which value to insert. The SDK reads the signatures, requests the matching data from the native SDK, substitutes the values, and only then displays the In-App Message.

Prerequisites

Default personalization is controlled by the enableDefaultPersonalization configuration option, which is true by default. No additional configuration is required.

<script>
    SmartechAppSDK.init({
        enableDefaultPersonalization: true
    });
</script>

Note
When enableDefaultPersonalization is true, the SDK automatically sets deferShowInAppInSDK to true and displays the In-App Message itself once personalization is complete. Do not call SmartechAppSDK.showInAppMessageInSDK() yourself in this mode.

Marking Content For Personalization

Required Attribute

data-smt-pz

The SDK processes personalization signatures only inside elements that carry this attribute. A signature placed anywhere else is left in the message as plain text.

The SDK does not scan your entire HTML document for signatures. Once the DOM is ready, it selects only the elements that declare data-smt-pz, collects the event names from the signatures found within them, requests those payloads from the native SDK, and then substitutes the values.

This means that if no element in your HTML declares data-smt-pz, the SDK finds no event names, never requests any data from the native SDK, and displays the In-App Message with the raw signature text still visible to the user.

data-smt-pz is a marker attribute and does not need a value. Both data-smt-pz and data-smt-pz="" are valid.

Scope Of Replacement

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

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

Examples

Basic Example

Add data-smt-pz to the element that wraps your signature.

<p data-smt-pz>
    Hi 👋 you have
    <span>[%__coin_balance$user_scroll$0__%] coins</span>
    to unlock a new title.
</p>

The marker is on the <p>, so the signature inside the nested <span> is replaced as well. The SDK requests the user_scroll event payload from the native SDK, reads its coin_balance property, and falls back to 0 if the event or the property is unavailable.

Personalizing Multiple Values

A single marked container can hold any number of signatures, drawn from one or more events.

<div data-smt-pz>
    <h3>Welcome back, [%__first_name$netcore_user_attribute$there__%]!</h3>
    <p>Your order of [%__name$order_completed$your item__%] is on its way.</p>
    <p>Amount paid: [%__purchase_amount$order_completed$0.00__%]</p>
</div>

Personalizing Attribute Values

Because attribute values are also processed, you can build dynamic image URLs, deep links, and click payloads.

<img data-smt-pz
    src="https://cdn.example.com/rewards/tier-[%__tier$profile_view$bronze__%].png" />

<button data-smt-pz
    data-smt-action="SMTInAppClick"
    data-smt-deeplink="product_screen"
    data-smt-payload='{"prid": "[%__product.prid$product_view$0__%]"}'>
    Buy [%__product.name$product_view$this item__%]
</button>

Nested And Array Properties

When an event payload contains nested objects or arrays, use dot notation to reach the value.

<div data-smt-pz>
    <p>First item in your cart: [%__product[].name$remove_from_cart$your item__%]</p>
    <p>Second item in your cart: [%__product[1].name$remove_from_cart$your item__%]</p>
</div>

Note
Dot notation supports a single level of nesting. A property such as order.product.name is not resolved and returns the default value.

How Values Are Resolved

Understanding the resolution rules helps you choose useful default values.

Choosing A Default Value

Because an empty or zero value falls back to the default, a signature such as [%__coin_balance$user_scroll$0__%] renders 0 both when the balance is genuinely zero and when the event was never tracked. If the distinction matters to your campaign, target it at users who are known to have a non-zero value.

Complete Example

The following In-App Message personalizes its heading from a user attribute, its body from an event payload, and its click payload from the same event.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://cdnt.netcoresmartech.com/smartech-app-sdk/scripts/prod/smartech-app-sdk.js?v=1.0.0"></script>
    <script>
        SmartechAppSDK.init({
            enableDefaultPersonalization: true
        });
    </script>
</head>

<body>
    <div class="message">
        <button data-smt-action="SMTInAppClose">&times;</button>

        <div data-smt-pz>
            <h1>Hi [%__first_name$netcore_user_attribute$there__%], you have coins to spend!</h1>
            <p>You have <strong>[%__coin_balance$user_scroll$some__%] coins</strong> available to unlock a new title.</p>
        </div>

        <button data-smt-pz
            data-smt-action="SMTInAppClick"
            data-smt-deeplink="rewards_screen"
            data-smt-payload='{"campaign": "coin_reward", "balance": "[%__coin_balance$user_scroll$0__%]"}'>
            USE COINS
        </button>
    </div>
</body>
</html>

Troubleshooting

Signature Not Getting Replaced?

If your In-App Message displays the literal text [%__property$event_name$default__%], work through the following checks.

1. Confirm that the element containing the signature, or one of its parents, declares data-smt-pz.
2. Confirm that enableDefaultPersonalization has not been set to false.
3. Confirm that the property name and event name do not themselves contain the $ symbol.

Content Disappeared Instead?

A signature that is found but cannot be parsed, such as one missing a $ separator or a component, resolves to an empty value and is removed from the message. If your text vanished rather than showing the raw signature, check that all three components are present and separated by the $ symbol.

To inspect what the SDK is doing, add smt-debug=1 to your URL to enable SDK logs. The logs report the event names that were extracted, the payload received from the native SDK, and each replacement that was performed.