Perkswall Integration Page

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 navigation to open the perkswall integration page, click here https //app momentscience com/account/integration/perkswall 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 https //get perkswall com/offerwall?accountid=96c6df58ad0e017b\&themeid=modal\&country=us 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 https //get perkswall com/offerwall?accountid=96c6df58ad0e017b\&themeid=interstitial\&country=us standalone opens the offer in a dedicated page with no additional content view standalone live example https //get perkswall com/?accountid=96c6df58ad0e017b\&themeid=standalone\&country=us 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 https //get perkswall com/offerwall?accountid=96c6df58ad0e017b\&themeid=disabled\&country=us 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 docid\ u1m7w0zxfxch7tzk6 gfj perkswallet cta enabled allows users to save a selected offer to their perkswallet account for later use learn more about perkswallet docid\ exwiocstqw3y6t1xqehfw 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 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 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 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 example programmatic customization // 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 https //docs momentscience com/implementing macros 📢 if you're running into any issues while going through the integration process, feel free to contact us at help\@momentscience com mailto\ help\@momentscience com