JavaScript SDK Guide

overview integrating momentscience into your online store, website, mobile app, or other user experiences is quick and straightforward this guide walks you through how to add the javascript sdk to your website to start delivering personalized offers what you'll learn how to access and configure your sdk snippet how to add the snippet to your website or checkout page how to pass user specific payload values for targeting and personalization requirements before you begin, make sure you have your sdk id docid\ nilh20nfdf9md1fctspu3 the "sdk id" is also referred to as the "account id" in the javascript snippet shown in the dashboard these terms are interchangeable, they refer to the same value 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 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 momentperks integration 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 sdk id from the momentscience dashboard javascript code example \<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 momentscience js 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 outlines all supported attributes for the adpx init() configuration true 105,76,88,293 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 window\ adpxconfig = { accountid 'your sdk id', autoload true, autoshow true, dev true, settings {}, styles {} }; step 4 pass in user data (optional) 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\ ttzzq9hb2joe g3mposj8 why pass user data? true 189 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 122left 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 to confirm your integration is working visit a page where the sdk is embedded you should see offers displayed if you're using adpxuser , open your browser’s devtools and confirm those values are present before adpx init() is called if you encounter any issues during integration, contact us at mailto\ help\@momentscience com