Perkswall Integration Page

19 min

Who is this for: Partners configuring and customizing their Perkswall experience from the MomentScience dashboard.

Outcome: Adjust theme settings, style settings, and featured offers through a no-code interface, previewing changes in real time before publishing.

Overview

The Perkswall Integration Page is your central dashboard for configuring and customizing your Perkswall. From a single interface, you can control how offers are displayed, style the experience to match your brand, and preview changes in real time across mobile and desktop. No code required for most settings.

This page covers the three main configuration areas:

Theme Settings: control offer display behavior, page identity, and CTA options.

Style Settings: customize fonts, colors, tile appearance, and the header design.

Featured Offers: curate and prioritize offers in the carousel.

To open the Perkswall Integration Page, click here or follow these steps in the dashboard:

Click Integration in the left sidebar.

Click Perkswall.

Click Tour this page at the top of the Perkswall page to walk through all 8 setup steps, theme management, style settings, featured offers, and embedded implementation.

Settings Customization

Theme Settings

Theme Settings control how the Perkswall behaves and what it displays. Use this section to configure offer loading, header visibility, click behavior, page identity, and PerksWallet options.

Setting	Default	Description
Offer Count	12	Defines the number of offer tiles loaded initially when the Perkswall renders. Must be a positive integer.
Auto Show	Enabled	Controls how additional offers load as users browse: Enabled: Infinite scroll. Additional offers load automatically when the user reaches the end of the list. Disabled: Pagination mode. Offers display in fixed-size pages based on the Offer Count setting. Users navigate with Previous and Next controls.
Show Offers Creative	Enabled	Displays the creative image for each offer tile. When disabled, offer tiles show text only, with no images.
Show Offer Tiles	Enabled	Controls whether offer tiles are visible in the Perkswall. When disabled, no offer tiles are rendered.
Show Header	Enabled	Toggles visibility of the Perkswall header bar. Header appearance can be further customized in Style Settings.
Show Offer Categories	Disabled	Displays a category filter bar at the top of the Perkswall. Categories are generated automatically from available offer metadata. Users can select one or more categories at a time to filter visible offers in real time.
3D Tiles	Disabled	Applies a CSS-based 3D visual effect to offer tiles, adding depth and shadow.
Show Intermediate	Disabled	Defines the behavior when a user clicks an offer tile: Modal: A small popup appears with offer details. Mobile: half the screen height Desktop: fixed at 400px View Modal Live Example Interstitial: A larger intermediate screen. If a Hero Creative is available, it appears at the top; otherwise, padding fills the space. Mobile: ~80% of screen height Desktop with Hero Creative: 600px; without: 500px View Interstitial Live Example Standalone: Opens the offer in a dedicated page with no additional content. View Standalone Live Example Disabled: No intermediate screen is shown. The user sees the offer title and description; clicking the CTA immediately redirects them to claim the offer. View Disabled Live Example
Show Featured Offers	Disabled	Enables a horizontally scrolling carousel beneath the Perkswall header to showcase featured offers. Ideal for highlighting high-priority offers.
Page Title	Perkswall	Sets the browser tab title for your Perkswall page.
Favicon	MomentScience favicon	Upload a 16 × 16 px favicon to personalize the browser tab. If no favicon is uploaded, the default MomentScience favicon is used. Use a .png file with a transparent background for best results.
Logo	None	Upload your company logo for display in the Perkswall header. A transparent PNG or SVG is recommended. The logo scales automatically. Use a high-resolution source for sharp rendering.
Show Logo	Enabled	Displays the configured logo in the Perkswall header. The logo must be set in the dashboard configuration.
Logo Destination URL	None	Sets the URL the logo links to in the Perkswall header. Must be an absolute URL (e.g., https://yourdomain.com). Clicking the logo navigates users to the specified destination.
Title Text	"You unlocked more exclusive offers."	Defines the header text shown at the top of the Perkswall. Supports macros (e.g., {{firstname}}) for personalized messaging via SDK or URL query parameters. Appears only when Show Header is enabled. Learn more about Implementing Macros.
PerksWallet CTA	Enabled	Allows users to save a selected offer to their PerksWallet account for later use.Learn more about PerksWallet.
PerksWallet CTA Text	Save for later	Sets the label text on the PerksWallet save button.
Saved Offer Text	Saved	Sets the label text on the PerksWallet button after an offer is saved.
Custom Code before </Head> Tag	None	Injects custom JavaScript into the Perkswall <head> section. Code here executes during page load, before content renders. Useful for fonts, analytics scripts, or meta tags. Can be added with or without <script> tags.
Custom Code before </Body> Tag	None	Injects custom JavaScript into the Perkswall <body> section. Code here executes after all HTML content has loaded. Commonly used for tracking scripts, event listeners, or third-party widgets. Can be added with or without <script> tags.

Style Settings

Style Settings control the visual presentation of your Perkswall. This includes the header design, typography, and offer tile appearance. All options are configurable without writing custom code unless you need advanced customization.

Header Style

Choose one of the following options for your Perkswall header background:

Option	Description	Example
Light	Applies the default light theme to the header background. Best for a clean, minimal look without requiring brand assets or custom colors.	Light Perkswall Header
Image	Uploads a custom image that spans the full width of the header. Recommended dimensions: 1440 × 130 px, PNG or JPG, maximum 1 MB. Images outside the recommended size are scaled, which may cause cropping or distortion.	Image Header
Color	Fills the header background with a solid color. Enter a HEX code (e.g., #155EEF) or use the built-in color picker. Ideal for aligning the header with your brand's primary color palette.
Custom	Gives you complete control over the header using HTML, CSS, and JavaScript. You can replace or rearrange the logo, update text, adjust layout, and apply any background style. Use this option for advanced branding or interactive header elements.

Custom Header Integration

Use the Custom header option when the Light, Image, or Color presets are not sufficient. It enables direct DOM manipulation using standard HTML, CSS, and JavaScript, giving you full control over the header's layout, content, and visual style.

DOM Selectors

Selector	Element Role
#adpx_pub-image-container	a<div> containing the partner logo image.
#adpx_perkswall-headerContainer	<div> wrapping the entire header section, including logo and description.
#adpx_mini-desc	<div> containing the header text or mini-description.

These IDs are injected by the Perkswall Web SDK at runtime and are available once the header has been rendered in the DOM.

Example: Programmatic Customization

The following JavaScript example demonstrates:

DOM element targeting using getElementById().

Content injection (createElement + appendChild).

Layout modification using flex-direction and alignment properties.

Style overrides applied via the element style property.

New element creation (link injection) inside the header description.

// 1. Access the logo container
const logoContainer = document.getElementById('adpx_pub-image-container');

// 2. Inject "Sponsored By:" label
const sponsorMessage = document.createElement('div');
sponsorMessage.innerText = 'Sponsored By:';
logoContainer.appendChild(sponsorMessage);

// 3. Reverse logo container order (Flexbox)
logoContainer.style.flexDirection = 'row-reverse';

// 4. Access header container (full header)
const headerContainer = document.getElementById('adpx_perkswall-headerContainer');

// 5. Override header container styles
headerContainer.style.flexDirection = 'column-reverse'; // Swap vertical order
headerContainer.style.alignItems = 'flex-start';        // Left-align content
headerContainer.style.backgroundColor = 'white';        // Solid background
headerContainer.style.padding = '0';                    // Remove default padding

// 6. Access header text container
const headerTextContainer = document.getElementById('adpx_mini-desc');

// 7. Apply custom header text styling
headerTextContainer.style.width = '100%';
headerTextContainer.style.textAlign = 'left';
headerTextContainer.style.backgroundColor = '#6e9eda';
headerTextContainer.style.padding = '12px';

// 8. Create a new link element and inject it
const newSpan = document.createElement('span');
const newLink = document.createElement('a');
newLink.href = 'https://your-link.com';  // Destination URL
newLink.innerText = 'Learn More';        // Link text
newSpan.appendChild(newLink);
headerTextContainer.appendChild(newSpan);

Text Style Settings

Configure the typography used across all Perkswall text elements, including headers, offer descriptions, and CTA button labels.

Setting Name	Default Value	Description
Font Family	Inter	Sets the typeface for all text on the Perkswall page, including headers, offer descriptions, and CTA labels. Available options: Inter, Roboto, Open Sans, Monospace, Sans-serif, Serif. Use the settings panel search bar to locate your preferred font.
Description Text Size	12px	Sets the font size (in pixels) for offer description text inside tiles.
Title Text Size	16px	Sets the font size (in pixels) for offer titles inside tiles.
CTA Text Size	16px	Sets the font size (in pixels) for CTA button labels inside offer tiles.
PerksWallet CTA Text Size	12px	Sets the font size (in pixels) for the PerksWallet save button label.

Tile Style Settings

Control the appearance of individual offer tiles, including colors, borders, corner radius, and button styling.

Setting Name	Default Value	Description
Content Alignment	Left	Defines the horizontal alignment of all content inside an offer tile. Options: Left, or Center
Button Background Color	#155EEF12	Sets the default background color for CTA buttons inside offer tiles. Accepts HEX values.
Button Text Color	#155EEF	Sets the text color for CTA buttons inside offer tiles. Accepts HEX values.
Button Hover Color	#155EEF2B	Sets the background color for CTA buttons when hovered. Accepts HEX values.
Button Stroke Color	#1C64F2	Sets the border (stroke) color for CTA buttons inside offer tiles. Accepts HEX values.
Tile Radius	16px	Sets the corner radius for each offer tile. Accepts pixel (px) values only.
Border Thickness Size	1px	Sets the thickness of the tile border in pixels (px).
Tile Background Color	#FFFFFF	Sets the background color of individual offer tiles. Accepts HEX values.
Tile Border Color	#EAECF0	Sets the border color of individual offer tiles. Accepts HEX values.
Tile Background Hover Color	#FFFFFF	Sets the background color of offer tiles on hover. Accepts HEX values.
Button Radius	8px	Sets the corner radius for CTA buttons inside offer tiles. Accepts pixel (px) values only.
Perkswall Background Color	#FFFFFF	Sets the background color for the entire Perkswall page. Accepts HEX values.
PerksWallet CTA Color	#101828	Sets the background color for the PerksWallet button. Accepts HEX values. The PerksWallet feature allows users to save offers for later redemption.
PerksWallet CTA Hover Color	#F44336	Sets the background color for the PerksWallet button on hover. Accepts HEX values.

Featured Offers

The Featured Offers section lets you curate a carousel of priority offers displayed beneath the Perkswall header. Configure navigation style, auto-play behavior, and the exact order in which offers appear.

The Featured Offers tab appears only when Show Featured Offers is enabled in Theme Settings. This section controls the behavior and appearance of the Featured Offer carousel.

Setting	Default	Description
Show Dots	Enabled	Displays circular navigation dots below the carousel, one for each featured offer. Users can click dots to navigate. Mutually exclusive with Show Icons, enabling this will automatically disable Show Icons.
Show Icons	Disabled	Displays branded offer icons as navigation controls, providing a more visual, brand-focused navigation. Mutually exclusive with Show Dots, enabling this will automatically disable Show Dots.
Auto Slide	Disabled	Enables automatic cycling of featured offers every 3 seconds.
Overlay Color	#000000	Sets the overlay color for featured offers. Accepts hex codes or color picker input.
Featured Offers in Order of Delivery	None	Defines which offers are featured and their display order. Three offers are shown at a time, in your defined priority order. Only valid offers are displayed.

Managing Featured Offers

The Manage Featured Offers tool lets you control which offers appear in the Featured Offers carousel and in what order.

Click "Manage Featured Offer"s in the Theme Settings tab to open a popup listing all offers provisioned to your account.

Selecting Offers

Tick the checkboxes next to the offers you want to feature.

You can select up to 15 offers at a time.

Selected offers will be added to the Featured Offers in Order of Delivery list, which determines the display order in the carousel.

Prioritizing Featured Offers

Drag and drop any offer row to set its priority.

Offers higher in the list have greater priority and are displayed first.

The carousel can display up to 3 offers at a time, in the exact order you define.

Invalid or unavailable offers are automatically skipped at runtime, ensuring only valid offers appear to the user.

Use the handle icon (≡) on the left of each row for smooth reordering.

Content Display Rules

Perkswall renders different content versions depending on the surface and the device. This controls which version of an offer's headline, description, and CTA text appears to users.

Surface	Mobile	Desktop
Offer Tiles	Short version	Short version
Featured Offers	Short version	Short version
Modal	Short version	Normal version
Interstitial	Short version	Normal version
Standalone	Normal version	Normal version

Text display limits at the default font size (14px):

Short description: up to 3 lines, ~40 characters per line

Description: up to 5 lines, ~40 characters per line

These limits scale when you change the font size in your theme settings.

When a Modal or Interstitial has a Hero Creative, its layout differs from a configuration without one. Content and spacing adapt to accommodate the hero image at the top.

Macro Support

Perkswall supports macros across all offer content fields. Macros are dynamic placeholders, for example, {{firstname}}, that are replaced with real values passed as URL query parameters when the Perkswall page loads.

The following fields support macros:

Page Title: header text at the top of the Perkswall

Offer Headline and Short Headline

Description and Short Description

Positive CTA and Negative CTA

To pass macro values, append them as query parameters in your Perkswall URL:

https://get.perkswall.com/?accountId=YOUR_ACCOUNT_ID&firstname=Jon&confirmationref=ORD-78910

For full macro syntax, patterns, and examples, see Implementing Macros.

📢 If you're running into any issues while going through the integration process, feel free to contact us at [email protected]

Perkswall Integration Page

Overview

Navigation

Settings Customization

Theme Settings

Style Settings

Header Style

Header Style

Custom Header Integration

Text Style Settings

Tile Style Settings

Featured Offers

Managing Featured Offers

Content Display Rules

Macro Support