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-action along with data-smt-nudge-link="linkvalue" as shown below:

OR use Javascript function -> smtLinkAction(link);

<button class="smt-nudge-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

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.