Theme Customizer

11min

Introduction
To give you full control over customizing your theme visually, without manual code editing, we provide a theme customizer. This tool allows you to build and tailor your theme according to your preferences, helping you organize and customize your themes to represent your brand effectively.
Available Features
Theme Management: Seamlessly handle and switch between multiple themes.
Precise Control: Fine-tune single and multi-offer units with exacting detail. View themes across desktop and mobile platforms.
Instant Previews: View real-time updates as you make changes. 
Navigation Options
To learn how to navigate to the Theme Customizer and explore its capabilities, follow the demo provided. Alternatively, you can access the Theme Customizer directly by clicking here.
<div style="position: relative; box-sizing: content-box; max-height: 80vh; max-height: 80svh; width: 100%; aspect-ratio: 2.2094361334867663; padding: 40px 0 40px 0;"><iframe src="https://play.momentscience.com/embed/cm0lki7y10bxf145ddtx9c8lu?embed_v=2" loading="lazy" title="MomentScience Theme Customizor" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
<div style="position: relative; box-sizing: content-box; max-height: 80vh; max-height: 80svh; width: 100%; aspect-ratio: 2.2094361334867663; padding: 40px 0 40px 0;"><iframe src="https://play.momentscience.com/embed/cm0lki7y10bxf145ddtx9c8lu?embed_v=2" loading="lazy" title="MomentScience Theme Customizor" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
﻿
﻿
Customization Options
﻿Offer Unit﻿
Property
Description
Availability
Background Color
Defines the background color of the entire Offer unit.
MOU, SOU, Perkswall
Corner Radius
Specifies the radius of each corner of the Offer Unit, starting from the top left and moving clockwise.
MOU, SOU, Perkswall
Shadow
Adds a shadow effect to the Offer Unit with a customizable color.
MOU, SOU, Perkswall
Tile Radius
Sets the border radius of the Offer unit.
MOU, Perkswall
Border Color
Determines the border color for Offer containers in MOU.
MOU, Perkswall
Background Hover Color
Changes the background color of MOU Offer containers on hover.
MOU, Perkswall
Header and Footer
Property
Description
Availability
Header Text
Set a header text for the Offer Unit, with the option to include macros for personalization.
Learn more about "Implementing Macros﻿".
MOU, SOU
Lead-in Text
Add introductory text above the Offer description, with support for macros for personalization.
Learn more about "Implementing Macros﻿".
MOU, SOU
Background Color
Set the background color for the header in the Offer Unit.
MOU, SOU
Text Color
Change the color of the header text.
MOU, SOU
Lead-in Text Color
Set the color of the lead-in text.
MOU, SOU
Lead-in Text & Offer Headline Font Size
Adjust the font size for the lead-in text and offer headline.
MOU, SOU
Header Text Size
Set the font size for the header text.
MOU, SOU
Disclaimer Text
Add customizable disclaimer text at the bottom of the Offer Unit.
MOU, SOU
Show Branding
Toggle to display customizable branding text in the footer.
MOU, SOU
Privacy Policy Link
Shown only if "Show Branding" is enabled. Includes a link to MomentScience's Privacy Policy, which cannot be changed.
MOU, SOU
Footer Text
Shown only if "Show Branding" is enabled. Displays "Powered by MomentScience" text, which cannot be changed.
MOU, SOU
Macros allow you to dynamically insert information about the order into critical components of the Offer unit. This capability enhances the customer experience by providing transaction details and helps optimize MomentScience Offers for better performance.
To ensure macros work correctly, the corresponding parameters must be included in the payload. For example, when using the {{first_name}} macro, make sure to pass a value for the first_nameparameter in the payload.
﻿Learn more about implementing macros﻿.
Offer Text
Property
Description
Availability
Color
Set the color of the Offer description text.
MOU, SOU
Font
Choose the font for the Offer theme text. 
Available fonts: 
Roboto.
Open Sans.
Monospace.
Sans-serif.
Serif.
MOU, SOU
Offer Text Font Size
Adjust the font size of the Offer description text in pixels.
MOU, SOU
Button Radius
Change the border radius of the CTA buttons.
MOU, SOU, Perkswall
Show Offer Image
Toggle to show or hide the offer image.
MOU, SOU
Image Placement
Control the placement of the Offer image. (Only Available when "Show Offer Image" is enabled).
Possible values: 
Image on left.
Image on right.
SOU
Button (Yes Please)
Configure the positive CTA button for accepting an offer. Customize background color, hover color, stroke color, and text color.
MOU, SOU, Perkswall
Button (No Thanks)
Configure the negative CTA button for declining an offer. Customize background color, hover color, stroke color, and text color.
SOU
Button (Perkswall CTA)
Configure the positive CTA button for the Perkswall page, displaying "Show more offers." Customize background color, hover color, stroke color, and text color.
MOU, SOU
Theme Settings
Property
Description
Availability
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
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
﻿Managing Different Themes
MomentScience allows you to manage multiple themes, each of which can be customized independently. Every theme is assigned a unique Slug ID, which serves as its identifier.
You can pass the Slug ID in the theme_idfield within the payload or in the SDK using window.AdpxUser.
Passing theme_id in the SDK
  window.AdpxUser = {
     // customer information properties here
     theme_id: "Replace_This_With_Your_SlugId",
};
  window.AdpxUser = {
     // customer information properties here
     theme_id: "Replace_This_With_Your_SlugId",
};
﻿
<div style="position: relative; box-sizing: content-box; max-height: 80vh; max-height: 80svh; width: 100%; aspect-ratio: 1.9699042407660738; padding: 40px 0 40px 0;"><iframe src="https://play.momentscience.com/embed/cm0wilyyf002i12mf74fgikt7?embed_v=2" loading="lazy" title="Change Moments Defaults Them" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
<div style="position: relative; box-sizing: content-box; max-height: 80vh; max-height: 80svh; width: 100%; aspect-ratio: 1.9699042407660738; padding: 40px 0 40px 0;"><iframe src="https://play.momentscience.com/embed/cm0wilyyf002i12mf74fgikt7?embed_v=2" loading="lazy" title="Change Moments Defaults Them" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
﻿
For more details on how to pass payload values, refer to the documentation here.
﻿
📢 If you're running into any issues while going through the integration process, feel free to contact us at help@momentscience.com﻿

Property	Description	Availability
Background Color	Defines the background color of the entire Offer unit.	MOU, SOU, Perkswall
Corner Radius	Specifies the radius of each corner of the Offer Unit, starting from the top left and moving clockwise.	MOU, SOU, Perkswall
Shadow	Adds a shadow effect to the Offer Unit with a customizable color.	MOU, SOU, Perkswall
Tile Radius	Sets the border radius of the Offer unit.	MOU, Perkswall
Border Color	Determines the border color for Offer containers in MOU.	MOU, Perkswall
Background Hover Color	Changes the background color of MOU Offer containers on hover.	MOU, Perkswall

Property	Description	Availability
Header Text	Set a header text for the Offer Unit, with the option to include macros for personalization. Learn more about "Implementing Macros".	MOU, SOU
Lead-in Text	Add introductory text above the Offer description, with support for macros for personalization. Learn more about "Implementing Macros".	MOU, SOU
Background Color	Set the background color for the header in the Offer Unit.	MOU, SOU
Text Color	Change the color of the header text.	MOU, SOU
Lead-in Text Color	Set the color of the lead-in text.	MOU, SOU
Lead-in Text & Offer Headline Font Size	Adjust the font size for the lead-in text and offer headline.	MOU, SOU
Header Text Size	Set the font size for the header text.	MOU, SOU
Disclaimer Text	Add customizable disclaimer text at the bottom of the Offer Unit.	MOU, SOU
Show Branding	Toggle to display customizable branding text in the footer.	MOU, SOU
Privacy Policy Link	Shown only if "Show Branding" is enabled. Includes a link to MomentScience's Privacy Policy, which cannot be changed.	MOU, SOU
Footer Text	Shown only if "Show Branding" is enabled. Displays "Powered by MomentScience" text, which cannot be changed.	MOU, SOU

Property	Description	Availability
Color	Set the color of the Offer description text.	MOU, SOU
Font	Choose the font for the Offer theme text. Available fonts: Roboto. Open Sans. Monospace. Sans-serif. Serif.	MOU, SOU
Offer Text Font Size	Adjust the font size of the Offer description text in pixels.	MOU, SOU
Button Radius	Change the border radius of the CTA buttons.	MOU, SOU, Perkswall
Show Offer Image	Toggle to show or hide the offer image.	MOU, SOU
Image Placement	Control the placement of the Offer image. (Only Available when "Show Offer Image" is enabled). Possible values: Image on left. Image on right.	SOU
Button (Yes Please)	Configure the positive CTA button for accepting an offer. Customize background color, hover color, stroke color, and text color.	MOU, SOU, Perkswall
Button (No Thanks)	Configure the negative CTA button for declining an offer. Customize background color, hover color, stroke color, and text color.	SOU
Button (Perkswall CTA)	Configure the positive CTA button for the Perkswall page, displaying "Show more offers." Customize background color, hover color, stroke color, and text color.	MOU, SOU

Property	Description	Availability
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
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

Updated 20 Nov 2024

Did this page help you?

Customization Options

Presentation Options

Theme Customizer

Introduction

Available Features

Navigation Options

Customization Options

﻿Offer Unit﻿

Header and Footer

Offer Text

Theme Settings

﻿Managing Different Themes

Offer Unit

Managing Different Themes