Overview

An HTML nudge refers to a targeted, interactive message displayed on a user’s screen to guide them through an experience or encourage specific actions. Custom HTML nudges provide greater control over your messaging, enabling you to create highly personalized, branded content. These nudges can take the form of pop-ups, banners, tooltips, or custom layouts, and support rich media like images, videos, and interactive elements.

Why is it Important?
HTML nudges are essential because they engage users at the right moment, offering timely prompts or guidance that improve their experience. By integrating interactive, visually appealing content, HTML nudges can increase conversions, improve onboarding, and ensure users don’t miss key steps in a workflow.

📘

SDK Requirements

• Android: Nudges SDK version 9.0.0 or above.
• iOS: Nudges SDK version 8.6.1 or above.
• Web: Supported on all versions of the Web SDK.

The following features are supported with Custom HTML nudges:

• Use HTML nudges to display messages within your app.
• Upload custom HTML templates as a code file or directly paste your HTML code when creating a nudge.

⭐

Best Practices for Custom HTML Nudges

• Ensure your nudges are concise and relevant to the user’s journey.
• Use dynamic elements like buttons with close, link, or invoke actions for seamless interaction.
• Test your custom HTML for responsiveness and compatibility across devices.
• Personalize your nudges with additional events/ goals to create targeted experiences.

Guidelines to Create Custom HTML Nudges

Action Button For Nudge Action

Action buttons trigger specific user interactions, enabling seamless navigation and dynamic engagement within your content. You can trigger subsequent nudges based on user interactions with action buttons like Close, Link, Invoke and more in the DIY nudges.

Create DIY Nudge

1. Create a DIY Nudge with an action button. Refer here to know how to Create a Nudge
2. Select the action button as the trigger in the Nudge Action dropdown.

1. Set conditions for when the next nudge should appear, this will be triggered when the user clicks the action button in the previous DIY nudge.
2. Preview the walkthrough, where each nudge is triggered as users interact with the action buttons.

This functionality is supported across Android, iOS, and Web platforms.

Adding Custom HTML in Nudges

Your HTML file must include JavaScript to enable custom functionality. Add the following script to your HTML body and not the head:

<script src="https://nudges3.hansel.io/px-diy.js?v=1.3.0" id="px-diy-html"></script>

JavaScript Integration

Interactions in HTML Nudges

Adding a DIY Action Button (Android)

When a user creates a DIY nudge which includes action buttons, users can choose which action the nudge will trigger. This ensures that the nudge is aligned with the user's intended interaction and provides a seamless experience.

1. HTML Class Method

 <button class="smt-nudge-trigger" data-index="1">Submit</button>

Use Case for Creating and Triggering DIY Action Button

Adding a Close Action

To enable a close action for a button, use one of the following options:

1. HTML Class Method:

<button class="smt-nudge-close-action">Close</button>

2. JavaScript Method:

smtCloseAction();

Adding a Link Action

To link a button to a URL, use the following options:

1. HTML Class Method:

<button class="smt-nudge-action" data-smt-nudge-link="https://www.google.com">Click Me</button>

2. JavaScript Method:

smtLinkAction("https://www.google.com");

Adding an Invoke Action

Define custom invoke actions for your nudge. Refer to platform-specific documents:

• Android SDK
• iOS SDK
• Web SDK

You can use the following method to do so.

1. HTML Attribute Method:

<button class="smt-nudge-close-action" data-sig-handler="action">Click Me</button>

• action: A non-empty string defining the action.
• payload: A valid JSON payload (optional).

2. JavaScript Method:

smtInvokeAction(action);
// OR
smtInvokeAction(action, payload);

Web-Specific Integration

Include the required script for web nudges:

<script src="https://nudges3.hansel.io/px-diy-web.js?v=1.0.0" id="px-diy-html"></script>