You can use Custom HTML to create messages perfectly for your brand and engage your audience with In-app message campaigns.

The following functions are supported with HTML In-app messages.

• Use HTML templates for showing messages In-app.
• Support for Landscape and Portrait mode with in-app message campaigns.
• You can upload custom HTML templates as a code file or simply paste your HTML code while creating In-app message campaigns.

📘

Important Points to Remember

• The HTML and CSS should be specified as per W3C standards.
• We recommend you to use system default fonts. @subhajit. Why are we saying this? Is there any particular requirement that came Parag?

Create In-app message campaign with Custom HTML @subhajit ensure Headers are in Title case.

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

1. Navigate to Content > In-app message templates to create or use existing templates.
2. Choose any position under the Content section when you create your campaign.

3. Select Customise HTML.

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 to host your custom HTML.

4. Navigate to the Code editor section on the left pane and add your HTML code to the box.

5. Click 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.
6. 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.

@subhajit add this for our glossary, custom key value. and it should be reusable content

• 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, -, _, ., @, :, =, &, +, %, ?, #, ', /, {, }, [, ].

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

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>