Overview

Customize your nudges with HTML for better control and unique branding. Use custom HTML nudge to create nudges that perfectly match your brand and engage your app users.

📘

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

Adding Custom HTML in Nudges

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

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

JavaScript Integration

Interactions in HTML Nudges

Adding a Close Action

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

HTML Class Method:

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

JavaScript Method:

smtCloseAction();

Adding a Link Action

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

HTML Class Method:

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

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

JavaScript Method:

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

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

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>