Theme Customizer

overview the theme customizer is a visual tool that lets you configure the appearance of momentperks offer units, no code required you can manage themes, adjust layout and styles, and preview changes instantly across desktop and mobile use the theme customizer to align momentscience offers with your brand’s visual identity and ui standards key capabilities the theme customizer allows you to manage multiple themes create, edit, and switch between saved themes configure offer units customize layout, colors, typography, and button styles for single and multi offer units preview across platforms view changes instantly on desktop and mobile apply changes in real time updates are reflected immediately as you edit the theme customizer is available directly in the momentscience dashboard it provides full control over offer unit styling without requiring code changes offer unit types the theme customizer supports all offer unit types you can manage appearance, layout, and style settings for each type within a single interface offer unit type description behavior single offer unit (sou) displays one offer at a time in a modal popup with carousel navigation ideal for presenting individual offers that require focused attention • appears as a modal popup overlay when triggered • displays one offer at a time in a carousel format • includes positive and negative call to action (cta) buttons • selecting the positive cta opens the offer in a new tab and advances to the next offer • selecting the negative cta advances to the next offer without claiming • carousel controls allow navigation between offers • closes when the user selects the close button or dismisses the final offer learn more about sou multi offer unit (mou) displays all available offers in a responsive grid layout, allowing users to view and compare multiple offers simultaneously • appears as a grid layout when triggered • displays each offer as a tile with its own creative and cta • selecting a cta opens the chosen offer in a new tab learn more about mou user selected perks (usp) enables users to select relevant offers at key engagement points such as checkout, registration, or event participation captures selections during the session and delivers offers after the user completes the primary action • appears inline or embedded within existing ui flows • allows users to select one or more offers before completing a transaction or action • deliveries are deferred until the action is completed learn more about usp accessing theme customizer to open the theme customizer log in to the momentscience dashboard in the sidebar, click integration select moments you'll be taken to the t heme customizer page once there, you can begin editing themes or creating new ones for your moments configuration customization options the theme customizer gives you full control over the appearance of your momentperks offer units you can adjust the layout, spacing, colors, typography, and behaviorwithout editing code offer unit borders, backgrounds, tile layout, hover styles header & footer text, disclaimers, branding text & buttons font, size, color, cta styles theme settings position, animation, embedded mode, perkswallet all changes preview in real time and are saved per theme offer unit customization these settings allow you to visually configure offer units within a theme, helping you match your brand's ui while maintaining layout flexibility across devices settings are applied per theme and support both single and multi offer unit types property description applies to background color sets the background color of the entire offer unit container mou, sou, usp corner radius controls the roundness of each corner of the offer unit you can set values per corner (clockwise) mou, sou, usp shadow adds a soft shadow around the offer unit to help it stand out you can define shadow color mou, sou tile radius sets the border radius for tiles in multi offer units mou,usp border thickness defines the width of the border (in pixels) around the offer unit mou, usp tile gap sets the spacing between individual offer tiles inside a multi offer unit min value is 6px mou ,usp border color specifies the color of the offer unit’s outer border mou, usp tile background color sets the fill color for each offer tile in a multi offer unit mou, usp tile background hover color sets the background color that appears when a user hovers over a tile mou, usp header and footer customization use these settings to configure the header and footer content of your offer units each field in the theme customizer corresponds to a configurable property you can personalize messaging, adjust visual styles, and manage branding visibility directly in the dashboard property description applies to header text enter the main heading text displayed at the top of the offer unit macros are supported for dynamic content implementing macros docid\ u1m7w0zxfxch7tzk6 gfj mou, sou, usp lead in text enter text displayed above the offer description commonly used for personalized greetings or contextual messages implementing macros docid\ u1m7w0zxfxch7tzk6 gfj mou, sou, usp background color select the background color for the header section mou, sou, usp text color select the color for the main header text mou, sou, usp lead in text color select the color for the lead in message text mou, sou, usp lead in text alignment choose horizontal alignment for the lead in text (left, center, or right) mou, sou, usp lead in text font size set the font size for the lead in text mou, sou, usp header text size set the font size for the main header text mou, sou, usp disclaimer text enter a disclaimer message displayed at the bottom of the offer unit mou, sou, usp show branding toggle footer branding when enabled, the footer displays “powered by momentscience ” mou, sou, usp macros let you dynamically insert contextual information, like customer details or transaction data, into offer units this enhances personalization and improves the relevance and performance of momentscience offers to use a macro, the corresponding parameter must be included in the payload for example, if you use the {{first name}} macro in a header or lead in text, your payload must include a first name value learn more about implementing macros docid\ u1m7w0zxfxch7tzk6 gfj offer text customization use these settings to customize the text styling, image display, and button appearance within your offer units adjust these fields to align each component with your brand’s visual design standards property description applies to color sets the color of the offer description text mou, sou, usp font family select a font from the available list the list includes supported google fonts mou, sou, usp offer headline font size adjust the font size of the offer headline text sou,mou, usp offer text font size set the font size of the offer description text (in pixels) mou, sou , usp button radius define the border radius for call to action (cta) buttons mou, sou hide advertiser name toggle to hide or show the advertiser name within the offer unit mou, usp show offer image toggle to display or hide the offer image mou, sou , usp image placement choose whether the offer image appears on the left or right this field is visible only when show offer image is enabled sou cta text size set the font size of the text inside the call to action button mou, sou cta text style choose between regular or bold text for the call to action label mou, sou button (yes please) customize the primary cta button configure background color, text color, border, and hover state mou, sou button (no thanks) customize the secondary cta button for declining an offer configure color, border, and hover styling sou button (perkswall cta) configure the cta for perkswall units (for example, “show more offers”) adjust background color, border, hover state, and text color mou, sou theme settings these settings control global behaviors, layout positioning, and advanced interactions for offer units across desktop and mobile use them to define how and where offer units appear, how users interact with them, and whether features like embedded mode or disclaimers are shown property description applies to number of ads select the number of offers (1–5) to be returned by the moments sdk or api for the selected theme example setting this to 5 displays up to 5 offers if fewer are available, only the available offers will be shown restrictions usp allows 3 only; mou allows 2 or 3 sou, mou, usp embedded mode allows the offer unit to render inline within a specified container on the page, instead of appearing as an overlay when embedded mode is enabled, you can customize the following target element selector (default adpx ) specifies the html element where the offer unit should be embedded enter the element’s id (e g , #offer container) show header toggles the visibility of the header section in embedded mode show footer toggles the visibility of the footer section, including disclaimers and branding fill container when enabled, the offer unit will expand to fill the height of the target container show border toggles the border around the embedded offer unit inherits styling from popup border settings mou, sou offer unit delay duration set a delay before the offer unit appears choose “none” for instant loading or specify the delay in seconds mou, sou darken background (center) darken the background when the offer unit appears as an overlay centered on the screen mou, sou darken background (non center) darken the background when the offer unit appears as an overlay in corner positions( top left, top right, bottom left, or bottom right) mou, sou fixed progress bar display a fixed progress bar for navigation between next and previous offers sou progress bar type choose the visual style for the progress indicator specifies the visual style of the progress indicator in a single offer unit (sou) you can choose between numbered displays the step number for each offer (e g , ① ② ③) dots displays a simple dot for each offer (e g , ● ● ●) use this to match your desired ux or brand style sou show close offer unit display or hide the close offer (x) icon at the top right of the offer unit mou, sou open perkswall (on closing offer unit) open the perkswall url when the offer unit is closed mou, sou delay close offer unit delay the appearance of the close icon (x) when “show close offer unit” is enabled mou, sou close offer unit delay time set a delay for the close offer unit(x) icon to appear after the first offer is shown only available if "delay close offer unit " is enabled mou, sou offer unit position desktop set the position of desktop offer unis, defaulting to the center with customizable offset options mou, sou offer unit animation set animation direction for the theme (top to bottom, bottom to top, left to right, or right to left) mou, sou vertical offset desktop set a pixel margin from the top for a centered desktop offer position leaving blank or 0 centers the offer unit mou, sou vertical offset mobile set a pixel margin from the top for a centered mobile offer position leaving blank or 0 centers the offer unit mou, sou button order determine the order of cta buttons (positive or negative cta first) sou show disclaimer display disclaimer text in the offer unit's footer current disclaimer text "external link clicking an offer will take you to the advertiser's website and is subject to the terms linked above " mou, sou button shimmer effect enable a shimmer animation on the positive cta button sou, mou close unit when clicked outside allow users to close the offer unit by clicking outside of it available only for desktop web environments sou show perkswall cta display the perkswall call to action button if perkswall is enabled for the publisher sou perkswall cta define the text label for the perkswall call to action button sou open perkswall in overlay open the perkswall within the same screen instead of launching a new tab or page sou show offer unit on exit/close trigger the offer unit when a user attempts to close or exit the page available for desktop environments using the moments js sdk the offer unit appears when the user moves their mouse toward the browser’s top area mou, sou show perkswallet cta display the perkswallet call to action button, allowing users to save selected offers to their perkswallet account mou, sou perkswallet cta define the text label for the perkswallet button default “save for later ” mou, sou saved offer text define the confirmation text shown after the user clicks the perkswallet cta button (for example, “offer saved successfully”) mou, sou check all offers for usp enable or disable user selected perks for all offers within this theme usp if the delay close offer unit feature is enabled, users will not be able to close the offer by clicking outside the offer unit until the (x) button appears this ensures that the offer remains visible for a set period before it can be dismissed 📢 if you're running into any issues while going through the integration process, feel free to contact us at help\@m omentscience com