Theme Customizer

who is this for partners who want to customize the visual appearance of momentperks offer units without writing code outcome use the visual theme customizer to configure layout, colors, typography, and button styles for offer units, then preview changes instantly across desktop and mobile 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 https //docs momentscience com/presentation options#ogbk2 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 https //docs momentscience com/presentation options#3 p7g 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 https //docs momentscience com/user selected perks accessing theme customizer to open the theme customizer log in to the momentscience dashboard https //app momentscience com/ in the sidebar, click integration select moments you'll be taken to the t https //app momentscience com/account/integration/customize#customize heme customizer page https //app momentscience com/account/integration/customize#customize 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 all unit types corner radius controls the roundness of each corner of the offer unit you can set values per corner (clockwise) all unit types shadow adds a soft shadow around the offer unit to help it stand out you can define shadow color mou, sou offer unit width (mobile) sets the width of the offer unit in percentage for mobile devices min value is 90 and max is 100 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 learn more about implementing macros docid\ u1m7w0zxfxch7tzk6 gfj all unit types lead in text enter text displayed above the offer description commonly used for personalized greetings or contextual messages learn more about implementing macros docid\ u1m7w0zxfxch7tzk6 gfj all unit types background color select the background color for the header section all unit types text color select the color for the main header text all unit types lead in text color select the color for the lead in message text all unit types lead in text alignment choose horizontal alignment for the lead in text (left, center, or right) all unit types lead in text font size set the font size for the lead in text all unit types header text size set the font size for the main header text all unit types disclaimer text enter a disclaimer message displayed at the bottom of the offer unit all unit types show branding toggle footer branding when enabled, the footer displays “powered by momentscience ” all unit types 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 and the perkswallet cta button all unit types font family select a font from the available list the list includes supported google fonts https //fonts google com/ all unit types offer headline font size adjust the font size of the offer headline text all unit types offer text font size set the font size of the offer description text (in pixels) all unit types 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 all unit types image placement choose whether the offer image appears on the left or right this option 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 align content (mobile) control how offer content aligns on mobile devices choose centered alignment or left to right (ltr) to optimize layout for smaller screens sou align image (mobile) set the horizontal alignment of the offer image on mobile devices choose centered positioning or align to the start (ltr) side of the offer unit sou cta buttons placement (mobile) control placement of cta buttons on mobile devices choose stacked (vertical) or side by side (horizontal) layout to improve tap targets and visual hierarchy when stacked the positive cta appears first the negative cta and save for later button are displayed side by side on the same line below it 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 enable "show perkswall cta" in theme settings to display this button 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 sou allows 1–5; mou allows 2 or 3; usp allows 3 only all unit types show header show or hide the header section in embedded mode toggles the visibility of the header section in embedded mode all unit types show footer show or hide the footer section (including disclaimer and branding) in embedded mode toggles the visibility of the footer section, including disclaimers and branding all unit types 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) 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 all unit types 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 hide progress bar (mobile) when enabled, hides the progress bar on mobile devices the progress bar is visible by default on mobile, enabling this setting explicitly hides it this setting has no effect on desktop or tablet 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 all unit types vertical offset mobile controls the vertical placement of the modal on mobile devices using a pixel based offset system this setting allows precise positioning to prevent overlap with critical on screen elements the value entered determines how the modal is positioned along the vertical axis 0 modal is vertically centered on the screen positive value (+) modal is offset downward from the top of the screen negative value (–) modal is offset upward from the bottom of the screen all unit types button order determine the order of cta buttons (positive or negative cta first) note button order is not honored when cta buttons placement is set to stacked on mobile in stacked layout, the positive cta always appears first, with the negative cta and save for later button side by side on the line below 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 " all unit types 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\@momentscience com mailto\ help\@momentscience com