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. |
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. |
Custom Offer Unit (COU) | Renders a partner's own HTML and CSS through the existing SDK integration, for layouts that standard theme settings can't produce. Available to approved partners only; contact your MomentScience account manager to enable it. |
|
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. |
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 Theme 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. | 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. | All Unit Types |
Lead-in text | Enter text displayed above the offer description. Commonly used for personalized greetings or contextual messages. | 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
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. | 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.
| 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.
| 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:
| 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:
| SOU |
Auto-Close Offer Unit | When enabled, the Offer Unit automatically closes after a set number of minutes. Off by default. | MOU, SOU |
Auto-Close Timer | Sets the number of minutes (1-60) after which the Offer Unit closes automatically.
| MOU, 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:
| All Unit Types |
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." | 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, COU |
PerksWallet CTA | Define the text label for the PerksWallet button. Default: “Save for Later.” | MOU, SOU, COU |
Saved Offer Text | Define the confirmation text shown after the user clicks the PerksWallet CTA button (for example, “Offer saved successfully”). | MOU, SOU, COU |
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