JavaScript SDK Guide

overview momentperks makes it easy to integrate personalized offers into your website, online store, mobile app, or other digital experiences using our javascript sdk, you can quickly start showing offers to users at the right time, such as after a purchase or during checkout this guide will walk you through how to get your sdk snippet from the momentscience dashboard add the sdk to your website configure runtime options pass user specific data to personalize offers validate that your integration is working correctly requirements before you begin, ensure you have sdk id this is your unique identifier for momentscience, you can find it in the https //app momentscience com under https //app momentscience com/account/profile settings for detailed instructions on how to retrive your sdk id, see docid\ cjrqr7fqdkybwzudxxza9 integration steps to help you get started, the following interactive demo walks through the process of getting the javascript sdk code snippt from the dashboard the "sdk id" is also referred to as the "account id" in the javascript snippet shown in the https //app momentscience com these terms are interchangeable, they refer to the same value step 1 access your integration code to retrieve your javascript sdk integration code go to the https //app momentscience com/home from the left sidebar, click integrations and select moments you'll be redirected to the https //app momentscience com/account/integration/customize#customize page click the install theme tab, or https //app momentscience com/account/integration/customize#install your javascript sdk code will appear you can copy it directly or download it for later use step 2 add the sdk to your website paste the integration code before the closing \</head> tag of your site ensure your accountid value in your script matches your docid\ cjrqr7fqdkybwzudxxza9 from the momentscience dashboard example javascript snippet \<script type="module"> (function (window) { window\ adpxconfig = { accountid 'your sdk id', // replace with your account's sdk id autoshow true }; window\ adpxuser = { // optional define user specific values }; })(window\ self !== window\ top ? window\ top window); (async function (window) { const target = window\ document head || window\ document body; const script = document createelement('script'); script type = 'text/javascript'; script src = 'https //cdn pubtailer com/launcher min js'; script crossorigin = 'anonymous'; script async = true; script id = 'adpx launcher'; target appendchild(script); await new promise((resolve) => { window\ adpx ? resolve() script addeventlistener('load', resolve); }); window\ adpx init(window\ adpxconfig); })(window\ self !== window\ top ? window\ top window); \</script> step 3 configure sdk initialization the sdk uses window\ adpxconfig to configure offer behavior at runtime you must set this configuration before the sdk script is loaded on the page the table below explains all supported attributes for adpx init() true 105,76,88,293,100 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type example configuration window\ adpxconfig = { accountid 'your sdk id', autoload true, autoshow true, dev true, settings {}, styles {} }; step 4 pass in user data ( recommended ) you can optionally provide user specific payload values using the window\ adpxuser object this allows momentscience to personalize offer content, improve targeting, and enhance reporting user data must be defined before the sdk initialization ( window\ adpx init() ), and can be set from either the client side or injected server side at page render for detailed information about passing payload values using the js sdk, refer to docid\ yz38zu4 miummwtnnsg98 why pass user data? true 189,100 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type example payload data you can include any custom key value pairs, but the following are commonly used true 122,100,100left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type example payload data window\ adpxuser = { placement 'post transaction', pub user id `uniquepubuserid`, firstname 'john', zipcode '74839', country 'us', adpx fp 'df983hgjdl9023klasjd', loyalty program id '23445665393', }; step 5 verify your integration once you've added the sdk open a page where the sdk is installed complete an action where an offer should display (e g , after checkout) open your browser’s developer tools → console and confirm window\ adpx exists window\ adpxuser shows the correct payload values if offers do not appear, make sure your accountid is correct and check for errors in the console next steps now that you’ve set up the javascript sdk, the next step is to choose how offers are displayed to your users momentscience provides multiple presentation options, including modal popups, multi offer layouts, and embedded units so you can match the experience to your website’s design for implementation details and customization guidance, see the docid 9ukjgfqbk0fvd1qahw51l documentation if you have any issues or questions, contact us at mailto\ help\@momentscience com