Managing Multiple Themes
Who is this for: Partners who manage multiple visual configurations for different surfaces, audiences, or placements within their MomentPerks integration.
Outcome: Create, retrieve, and dynamically apply multiple named themes to offer units via the SDK or API using each theme's unique theme_id.
Overview
The Theme Customizer allows you to create, update, and manage multiple visual themes for your offer units. Each theme defines layout, fonts, colors, and spacing to help align offers with your product's design system.
Every theme is assigned a unique theme_id(also called a slug), which you can pass through the SDK or API to apply it dynamically at runtime.
Retrieving Your Theme ID
Each custom theme has a unique theme_id, which youβll need to apply the theme in SDK or API integrations.
Follow the steps below to locate and copy the theme_idfor any created theme:
- Navigate to your Integration page in the MomentScience dashboard.
- In the Theme Customizer section, open the Theme dropdown to view all available themes.
- Click the name of the theme you want to use. This will load the selected theme's settings.
- Click the copy icon next to the theme name. This copies the `theme_id to your clipboard.
Default theme
When your account is created, you start with a built-in Standard Theme.
- This theme is applied by default when no other theme is specified.
- The Standard Theme cannot be edited directly.
- To customize it, click "Save As" button to create a new editable version.
Creating a new theme
You can create any number of themes based on your design needs. New themes are saved independently and can be reused or updated at any time.
- Open the Theme Customizer from the dashboard.
- Adjust the settings, colors, fonts, layout, spacing, and other styles.
- Scroll to the bottom of the page and click Save As.
- Enter a unique, descriptive name for the theme.
- Click Save, then confirm the creation in the dialog.
Use short and descriptive names (e.g. dark-checkout, summer-sale, mobile-compact) to help organize themes across use cases.
Editing an existing theme
To update an existing theme:
- Select the theme from the Theme dropdown.
- Make changes using the visual editor.
- Click Save.
- Confirm the update in the confirmation dialog.
Changes apply immediately on the next render.
You cannot edit the Standard Theme. The Save button will be disabled. To customize it, use Save As to create a new theme first.
Switching between themes
To switch or preview a different theme:
- Click the Theme dropdown in the Theme Customizer.
- Select a theme from the list.
- The interface will update to reflect the selected themeβs configuration.
Deleting a theme
You can delete any custom theme. The Standard Theme cannot be deleted.
- Open the Theme dropdown.
- Click the ποΈ Delete icon next to the theme you want to remove.
- Confirm deletion in the popup dialog.
If a deleted theme is referenced in an active integration, the SDK will fall back to the Standard Theme automatically.
Using a Theme in Your Integration
To render offer units using a specific theme, pass its theme_id in your SDK or API integration payload.
Using JS SDK
If you're using the JS SDK (MomentPerks), set the theme_id in the window.AdpxUser object before initializing the SDK:
window.AdpxUser = {
// Customer-specific properties
theme_id: "your_theme_id"
};The theme_idwill instruct the SDK to render the offer unit using the corresponding theme.
Using MomentPerks API
If you're using the Moments API, pass the theme_id in the request payload. This ensures the styles and configuration associated with the selected theme are returned in the response.
{
"user_id": "12345",
"theme_id": "dark-checkout",
...
}
π’ Contact us at [email protected] if you encounter any issues during integration or theme setup.