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>
Javascript | Use |
---|---|
https://nudges3.hansel.io/px-diy.js?v=1.0.0 | To add and track interaction to your HTML creative via the PX SDK |
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>
Javascript | Use |
---|---|
https://nudges3.hansel.io/px-diy-web.js?v=1.0.0 | To add and track interaction to your HTML creative via the PX SDK |
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.
Updated 7 months ago