DIY HTML based nudges

📘

Custom HTML DIY nudges feature has below SDK version requirements

• Android Nudges SDK version 9.0.0 or above
• iOS Nudges SDK version 8.6.1 or above
• DIY nudges are available on web SDK as well

Guidelines for using custom HTML in Nudges For Android & iOS SDK

The HTML file must contain JavaScript to use your custom HTML creative.

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

Adding Interaction To HTML nudges

To add CLOSE action to an action button

Add a below-mentioned class on the interactive element (i.e button) inside html template -> smt-nudge-close-action

OR use the Javascript function smtCloseAction();

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

To add LINK to an action button

Add class smt-nudge-close-action along with data-smt-nudge-link="linkvalue" as shown below:

OR use Javascript function -> smtLinkAction(link);

<button class="smt-nudge-close-action" data-smt-nudge-link="https://www.google.com">CLICK ME</button>

To add INVOKE ACTION to an action button

Follow steps mentioned here to define invoke action: for Android SDK & for iOS SDK

Use Javascript function -> smtInvokeAction(action);

OR Use Javascript function to pass custom payload -> smtInvokeAction(action, payload);

Where,
action - can be any non-empty string
payload - must be a valid JSON
smtInvokeAction method can be used with only action without payload

<button class="smt-nudge-close-action" data-sig-handler="action">CLICK ME</button>

Guidelines for using custom HTML in Nudges for Web SDK

The HTML file must contain JavaScript to use your custom HTML creative.

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

Adding Interaction To HTML nudges

To add CLOSE action to an action button

Add a below-mentioned class on the interactive element (i.e button) inside html template -> smt-nudge-close-action

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

To add Link to an action button

Add class smt-nudge-close-action along with data-smt-nudge-link="linkvalue" as shown below:

<button class="smt-nudge-close-action" data-smt-nudge-link="https://www.google.com">CLICK ME</button>

To add Invoke Action to an action button​

Follow the steps mentioned here to define invoke action.

Add following data attribute to the interactive element (say button) in your HTML template:

smt-nudge-close-action along with data-sig-handler = 'action' as shown below:

<button class="smt-nudge-close-action" data-sig-handler="action">CLICK ME</button>

Note: Either Link or Invoke action can be used during nudge dismiss.