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

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>