Custom Offer Unit (COU)

who is this for partners who need full, pixel level control over how their offer unit looks, using their own html and css instead of momentscience's standard theme layouts outcome by the end of this guide, you'll have a cou theme built, validated, previewed, saved, and live, with your html/css fully isolated from the host page and zero changes needed to your existing client side integration overview momentscience offers three ways to render offer units, and cou is the middle ground between them standard sdk (sou/mou) momentscience's theme settings control the look and feel quick to configure, no code required, but layout is limited to what those settings expose native api full control over the ui you build, host, and maintain the entire rendering layer yourself cou native api level design freedom, your own html and css, rendered through the sdk integration you already have no separate build to maintain, and no client side code changes in practice, you paste in your html and css, drop in a few placeholders for things like the offer title and image, and momentscience takes care of the rest, filling in real offer data and hooking up buttons like "close" and "get offer" automatically your design is kept completely separate from your website's styling, so nothing clashes either way use cou when you need a fully branded or pixel perfect ad layout standard theme component settings (header, lead in, mini text, tnc, etc ) don't give you enough control you're integrating offers into a ui that requires a specific visual structure your brand owns contact your momentscience account manager to request access to cou once enabled, you can see it as an option alongside sou and mou in the offer unit type dropdown on the momentperks integration page setting up a cou theme step 1 select cou as the offer unit type on your momentperks integrations page https //app momentscience com/account/integration/customize#customize , open the offer unit type dropdown and select custom offer unit when cou is selected standard component tabs (header, lead in, mini text, tnc, and others) are hidden ; they don't apply when your html owns the full layout a custom offer unit tab appears as your primary editing surface the theme settings tab remains visible switching back to sou or mou restores all standard component tabs step 2 build your template the custom offer unit tab contains two editors html template editor paste or type your html markup use macros (see below) as placeholders for dynamic offer content the editor supports syntax highlighting and line numbers css stylesheet editor paste or type the css rules that style your html template if you want to learn more about the available macros, expand the macro reference panel to view descriptions for each macro required macros are marked with an asterisk ( ) 2 1 use macros for dynamic offer content macros are placeholders in your html that momentscience fills with real offer data at render time macro description required {{title}} offer headline the one field worth always supplying yes {{description}} offer description rendered as raw html when used alone no {{short headline|title}} short headline with fallback to title, then a quoted literal no {{short description|description}} short description, falling back to full description, then a literal no {{advertiser name}} brand name, fallback chain across campaign and offer no {{cta yes|'select this offer'}} primary cta button copy no {{cta no|'no thanks'}} secondary / decline button copy no {{terms and conditions}} t\&c url used as a plain href (double braces are fine here) no {{{image}}} offer level image, common fallback when hero image is absent use triple braces no {{{hero image}}} hero / background image url (campaign images creative type) use triple braces no {{{icon image}}} brand icon url (campaign images creative type) use triple braces no {{{logo image}}} logo image url (campaign images creative type) use triple braces no {{lead in}} lead in / eyebrow copy from styles header text use a quoted fallback no {{header text}} header / subhead copy from styles header (lead in text / header text) no {{#if key}} … {{/if}} conditional block truthy unless undefined, null, or "" supports {{else}} and nesting no macros used in src , href , or background image attributes must use triple braces {{{ }}} double braces will url encode the value and break the link or image for more information about how macros work, see the implementing macros docid\ u1m7w0zxfxch7tzk6 gfj documentation 2 2 wire up actions actions are data ms action attributes that wire elements in your html to momentscience's built in behavior, click tracking, carousel navigation, and closing add them as plain html attributes action add to what it does required data ms custom root your outermost wrapper element marks the root of your template every other action depends on this being present yes data ms action="cta" your primary offer element (e g the main cta button) fires ad taken and url clicked, then opens click url itself; no click url macro needed advances to the next offer, or closes the unit on the last yes data ms action="close" your close control closes the offer unit yes data ms action="no thanks" your decline / secondary button fires ad not taken and a no thanks beacon advances to the next offer, or closes the unit on the last no data ms action="next" a carousel "next" control advances to the next offer (index clamped at the end) no data ms action="prev" a carousel "previous" control goes back to the previous offer (index clamped at the start) no data ms action="offerwall" an "offerwall" cta element opens the offerwall requires enable offerwall and offerwall show cta; respects usp gating no minimal example template example html code × {{title}} {{description}} get offer example css code offer card { &#x9;position relative; &#x9;background #ffffff; &#x9;border radius 12px; &#x9;padding 16px; &#x9;box shadow 0 2px 8px rgba(0, 0, 0, 0 12); &#x9;font family sans serif; &#x9;max width 400px; } offer card close { &#x9;position absolute; &#x9;top 8px; &#x9;right 8px; &#x9;border none; &#x9;background none; &#x9;font size 18px; &#x9;line height 1; &#x9;cursor pointer; &#x9;color #555555; } offer card img { &#x9;width 100%; &#x9;border radius 8px; &#x9;margin bottom 12px; } offer card h2 { &#x9;margin 0 0 8px; &#x9;font size 18px; &#x9;color #111111; } offer card p { &#x9;margin 0 0 16px; &#x9;font size 14px; &#x9;color #555555; } offer card a { &#x9;display inline block; &#x9;padding 10px 20px; &#x9;background #0057ff; &#x9;color #ffffff; &#x9;border radius 6px; &#x9;text decoration none; &#x9;font weight 600; } step 3 preview and save as you edit, the live preview panel re renders your changes as you go, using the same preview offer and mobile/desktop toggle already on your integrations page if a required action is missing from your html, save is blocked and an inline error names it below the html editor when you're ready to save save saves your changes to the current theme save as creates a new theme from your changes you'll be prompted for a new theme id, enter it and click confirm if you manage multiple themes, we recommend reading the managing multiple themes docid 7 jtaiiskgwau7cc5nbp3 documentation to learn best practices and how to work with them effectively step 4 go live no code changes needed once your cou theme is saved, add the snippet below to your page, between the \<head>\</head> tags, to show the offer unit make sure theme id matches your cou theme's id \<script type="module"> (function (window) { window\ adpxconfig = { accountid 'fbe15a0c6f803ef4', autoshow true, theme id 'cou theme', // must match your cou theme's id }; / fill this object with user specific values from your website these values are picked up by the sdk and are used to personalise ad delivery and increase yield / window\ adpxuser = { // customer information properties here }; })(window\ self !== window\ top ? window\ top window); (async function (window) { const target = window\ document head || window\ document body; const script = window\ document createelement('script'); script type = 'text/javascript'; script src = 'https //cdn pubtailer com/launcher min js'; script importance = 'high'; script crossorigin = 'anonymous'; script async = true; script id = 'adpx launcher'; target appendchild(script); await new promise(function (resolve) { window\ adpx ? resolve() window\ document getelementbyid('adpx launcher') addeventlistener('load', function () { resolve(); }) }); window\ adpx init(adpxconfig); })(window\ self !== window\ top ? window\ top window); \</script> any change you make in the dashboard (your html, css, or theme settings) takes effect immediately and is rendered the next time the offer unit loads, with no further code changes on your end 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