Customize Offer Unit Timing

who is this for developers using the momentperks javascript sdk who need to control exactly when offers are fetched and displayed in single page applications or multi step flows outcome configure autoload and autoshow options and use refresh() and reload() to precisely control offer timing based on user context or application state overview by default, the momentscience javascript sdk automatically fetches and displays the moments offer unit when initialized this behavior is controlled using two configuration options autoload and autoshow you can modify these options to delay when offers are fetched or shown, for example, in single page applications or multi step checkout flows where user data isn’t immediately available this guide explains how to configure autoload to delay fetching offers configure autoshow to delay displaying the offer unit use refresh() to fetch a new set of offers use reload() to redisplay a previously fetched offer unit understand how different configuration combinations affect sdk behavior default behavior if no configuration changes are made offers are fetched automatically when the sdk loads ( autoload true ) offers are displayed immediately after being fetched ( autoshow true ) this behavior is suitable for most use cases, especially when no conditional logic is required to determine when offers appear flowchart td a\[sdk initialization] > b{autoload?} b yes > c\[fetch offers automatically] b no > d\[wait for adpx refresh] c > e{autoshow?} d > f{autoshow?} e yes > g\[display offers automatically] e no > h\[wait for adpx reload] f yes > g f no > h g > i\[user closes offer unit] i > j\[user reopens via adpx reload] d > k\[optional setpayload before refresh] %% node styles style a fill #233d71,stroke #233d71,stroke width 2px,color #ffffff style b fill #f3f3f3,stroke #6e6d7a,color #1a2b49 style c fill #3b82f6,stroke #233d71,color #ffffff style d fill #fe4215,stroke #fe4215,color #ffffff style e fill #f3f3f3,stroke #6e6d7a,color #1a2b49 style f fill #f3f3f3,stroke #6e6d7a,color #1a2b49 style g fill #3b82f6,stroke #233d71,color #ffffff style h fill #fe4215,stroke #fe4215,color #ffffff style i fill #f9f9f9,stroke #6e6d7a,color #6e6d7a style j fill #3b82f6,stroke #233d71,color #ffffff style k fill #f3f3f3,stroke #6e6d7a,color #1a2b49 controlling display behavior to take control over when offers are retrieved or shown, use the autoload and autoshow configuration options delay fetching offers ( autoload ) to delay the initial api call for fetching offers, set autoload to false in your configuration object disable auto loading window\ adpxconfig = { accountid 'your sdk id', autoload false }; with autoload false , the sdk will not request offers when initialized instead, you must manually trigger the fetch using window\ adpx refresh() manually fetching offers ( refresh() ) to retrieve offers at a specific time, call the refresh() method, this allows you to fetch new offers based on updated session or user state control when offers are retrieved within your app flow manually fetch offers window\ adpx refresh(); if you’ve updated the payload, make sure to call setpayload() before refresh() so the new data is included in the request updating the payload ( setpayload() ) use setpayload() to define or update the values passed to the offer api this is especially useful in scenarios where user context or transaction data changes before fetching offers setpayload() window\ adpx setpayload({ user id '1234', category 'electronics' }); window\ adpx refresh(); preventing automatic display ( autoshow ) by default, offers are displayed immediately after they’re fetched to delay this behavior, set autoshow to false auto show = false window\ adpxconfig = { accountid 'your sdk id', autoload true, autoshow false }; with autoshow false , offers will be fetched but not shown automatically you must explicitly call reload() to display the offer unit manually display offers( reload() ) use the reload() function to show the offers unit after offers have been fetched window\ adpx reload(); this displays the current set of fetched offers it’s useful when a user previously closed the offers unit you want to re display existing offers without re fetching them reload() does not fetch new offers use refresh() for that purpose combined configuration scenarios this table summarizes how the sdk behaves under different autoload and autoshow settings autoload autoshow sdk behavior true true offers are fetched and displayed automatically (default) false true offers must be fetched manually using refresh() once fetched, the offer unit appears automatically false false offers must be fetched manually using refresh(), and displayed manually using reload() true false offers are fetched automatically, but you must call reload() to display them re displaying and re fetching offers redisplaying previously fetched offers ( reload() ) use the reload() method to redisplay the current set of offers without making a new request to the backend redisplaying previously fetched offers (reload()) window\ adpx reload(); this is helpful in cases where a user previously dismissed the moments offer unit and wants to see the offers again you want to show the same offers on a new screen or state change in your app reload() does not fetch new offers it redisplays the last fetched set, starting from the first offer fetching a new set of offers ( refresh() ) to fetch a new set of offers, especially after user data or app context has changed, use the refresh() method fetching a new set of offers (refresh()) window\ adpx refresh(); if the payload has changed (e g , new user id, category, or location), call setpayload() before calling refresh() window\ adpx setpayload({ user id '5678', category 'home goods' }); window\ adpx refresh(); use this method when new user attributes should influence the offers shown offers should reflect updated application context or session state you want to dynamically rotate the content of the offer unit if you're running into any issues while going through the integration process, feel free to contact us at help\@momentscience com mailto\ help\@momentscience com