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.
What you can do
- Manage multiple themes: Create, edit, and switch between saved themes
- Configure offer units: Customize layout, color, typography, and button styles for Single and Multi Offer Units
- Preview across platforms: See how changes appear on both desktop and mobile
- Apply changes live: All updates are reflected in real time as you customize
This tool is available directly in the dashboard and is designed for flexibility, giving you full control over Offer Unit styling without code changes.
Accessing Theme Customizer
To open the Theme Customizer:
- In the sidebar, click Integration
- Select Moments
Alternatively, you can go directly to the Theme Customizer from here.
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 |
Corner radius | Controls the roundness of each corner of the Offer Unit. You can set values per corner (clockwise). | MOU, SOU |
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, |
Border thickness | Defines the width of the border (in pixels) around the Offer Unit. | MOU |
Tile gap | Sets the spacing between individual offer tiles inside a Multi Offer Unit. Default is 6px. | MOU |
Border color | Specifies the color of the Offer Unitβs outer border. | MOU |
Tile background color | Sets the fill color for each offer tile in a Multi Offer Unit. | MOU |
Tile Background Hover Color | Sets the background color that appears when a user hovers over a tile. | MOU |
Header and Footer Customization
These settings allow you to configure the header and footer content of your Offer Units. You can personalize messaging, control visual styles, and manage branding visibility, all without editing code. Macros are supported for dynamic text.
Property | Description | Applies to |
|---|---|---|
Header text | Displays a main heading text at the top of the Offer Unit. Macros are supported for dynamic content. | MOU, SOU |
Lead-in text | Adds text above the offer description. Commonly used for personalized greetings or context. | MOU, SOU |
Header Background Color | Sets the background color of the header section. | MOU, SOU |
Text color | Defines the color of the main header text. | MOU, SOU |
Lead-in Text Color | Defines the text color for the lead-in message. | MOU, SOU |
Lead-in Text Alignment | Controls horizontal alignment of the lead-in text (left, center, or right). | MOU, SOU |
Lead-in Text Font Size | Adjusts the font size of the lead-in text. | ο»Ώ |
Header text size | Controls the font size of the main header text. | MOU, SOU |
Disclaimer text | Adds a customizable disclaimer message at the bottom of the Offer Unit. | MOU, SOU |
Show branding | Toggles the footer branding. When enabled, the footer shows βPowered by MomentScienceβ. | MOU, SOU |
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.
Offer Text Customization
Use the following properties to adjust the text styling, image display, and button appearance within your Offer Units. These settings allow you to align each component with your brand's visual language.
Property | Description | Applies to |
|---|---|---|
Color | Sets the color of the offer description text. | MOU, SOU |
Font family | Selects a font from the available list, which includes options from Google Fonts. | MOU, SOU |
Offer Text Font Size | Sets the font size of the offer description text (in pixels). | MOU, SOU |
Button Radius | Defines the border radius of call-to-action (CTA) buttons. | MOU, SOU |
Hide Advertiser Name | When enabled, hides the advertiser name from the Offer Unit. | MOU |
Show Offer Image | Toggle to display or hide the image associated with the offer. | MOU, SOU |
Image Placement | Controls whether the offer image appears on the left or right. Only visible when "Show offer image" is enabled. | SOU |
CTA Text Size | Sets the font size of the call-to-action button text. | MOU, SOU |
CTA Text Style | Choose between regular or bold styling for the CTA text. | MOU, SOU |
Button (Yes Please) | Customize the primary CTA button. Adjust background color, text color, border (stroke), and hover state. | MOU, SOU, Perkswall |
Button (No Thanks) | Customize the secondary CTA button for declining an offer. Supports full color and border configuration. | SOU |
Button (Perkswall CTA) | Configure the CTA for Perkswall units (e.g., βShow more offersβ). Customize background, hover, border, 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 |
|---|---|---|
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:
| MOU, SOU |
Offer Unit Delay Duration | Set a delay for the Offer unit to appear. Choose 'None' for instant loading, or select 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:
| ο»Ώ |
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 display of the Close Offer unit(X) icon 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 |
Show PerksWallet CTA | Enable this option to display a PerksWallet CTA button, allowing users to save selected offers to their PerksWallet account for later claiming. | MOU, SOU |
PerksWallet CTA | Set the text to appear on the PerksWallet CTA button. By default, this is set to "Save for Later." | MOU, SOU |
Saved Offer Text | Set the text that will be shown when the user clicks on the PerksWallet CTA button. (e.g., βOffer saved successfullyβ). | MOU, SOU |
π’ If you're running into any issues while going through the integration process, feel free to contact us at help@momentscience.comο»Ώ