Perkswall Integration Page

overview the perkswall integration page provides a centralized dashboard for configuring and customizing your perkswall you can manage styling, adjust settings, and preview changes in real time for both mobile and desktop views customize the look and feel to match your brand configure display options, advanced behaviors, and offer presentation instantly see how your perkswall appears on different devices navigation accessing the perkswall integration page is simple, just by clicking here or navigate from your dashboard by following these steps click on " integration " in the left sidebar of the dashboard then, click on " perkswall " you'll now find yourself on the perkswall integration page, where you can begin customizing your perkswall to suit your needs settings customization general settings the general settings section allows you to customize the branding of your perkswall to align with your company’s visual identity setting description example favicon upload a 16 × 16 px favicon to personalize the browser tab for your perkswall the favicon appears in the tab title area of supported browsers if no favicon is uploaded, the default momentscience favicon is used for best results, use a png file with a transparent background logo upload your company logo to be displayed in the header of your perkswall page a transparent png or svg is recommended for optimal display on various background colors the logo is scaled automatically, but a high resolution source image ensures sharp rendering style settings the style settings section lets you customize the look and feel of your perkswall header, text, and tiles these settings give you control over branding, layout, and color schemes to match your organization’s identity header style choose one of the following options for your perkswall header background option description example light applies the default light theme to the perkswall header background this is the quickest option for setups that do not require brand customization best for maintaining a clean, minimal look without uploading assets or selecting custom colors image allows you to upload a custom header background image that will span the full width of the perkswall header recommended for strong brand presence, seasonal campaigns image requirements 1440 × 130 px for optimal display, png or jpg format, maximum file size 1 mb images smaller or larger than the recommended size will be scaled, which may cause cropping or distortion color fills the perkswall header background with a single solid color you can enter a hex color code (e g , #155eef) or use the built in color picker ideal for aligning the perkswall header with your brand’s primary color palette without introducing images custom gives you complete control over the perkswall header using html, css, and javascript you can replace or rearrange the logo, update text content, adjust layout, and apply any background style (including gradients, patterns, or dynamically generated content) use this option if you require advanced branding or interactive elements custom header integration the custom header option enables direct dom manipulation of the perkswall header, allowing advanced control over layout, branding elements, and styling customization is achieved using standard html, css, and javascript this option is intended for publishers who require precise control of the header structure beyond the light, image, or color presets dom structure and selectors selector element role #adpx pub image container \<div> containing the publisher 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 the following options control the typography of text elements on the perkswall page setting name default value description font family inter defines the typeface applied to all text elements on the perkswall page, including headers, offer descriptions, and cta text supported font families include roboto, open sans, monospace, sans serif, and serif use the search bar in the settings panel to quickly locate your desired font description text size 12px sets the font size (in pixels) for offer descriptions inside tiles title text size 16px sets the font size (in pixels) for offer titles cta text size 16px sets the font size (in pixels) for call to action (cta) button labels inside offer tiles perkswallet cta text size 12px sets the font size (in pixels) for the perkswallet button label the perkswallet feature allows users to save offers to a virtual wallet for later redemption tile style settings setting name default value description tile 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 theme settings setting name default value technical description show featured offers disabled enables a horizontally scrolling slider beneath the perkswall header to display a curated set of featured offers ideal for highlighting high priority offers logo url none sets the clickable logo in the perkswall header the value must be an absolute url (e g , https //yourdomain com/logo png ) clicking the logo navigates users to the specified url title text "you unlocked more exclusive offers " customizes the header text displayed in the perkswall only appear if 'show header' is enabled offer count 12 defines the number of offer tiles loaded initially when the perkswall renders must be an integer greater than 0 auto show enabled controls how additional offers are loaded enabled implements infinite scroll additional offers load automatically when the user reaches the end of the current list disabled enables pagination mode offers are displayed in fixed size pages, where the number of offers per page is defined by the offer count setting users navigate using previous and next controls show logo enabled displays the configured logo in the perkswall header the logo must be set in general settings or directly in the dashboard configuration show image enabled displays the associated image for each offer tile images are retrieved from the api response and rendered in the tile’s image container 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 dynamic category filter bar at the top of the perkswall categories are automatically generated from the metadata of currently available offers users can select one or more categories simultaneously (multi select) to filter the visible offers in real time 3d tiles disabled applies a css based 3d visual style to offer tiles, adding depth and shadow effects show intermediate disabled defines the behavior when an offer tile is clicked modal a small pop up (intermediate screen) appears with more details on mobile takes up half the screen on desktop fixed at 400px tall example view modal live example displays an intermediate screen (mobile 50% screen height; desktop fixed 400px) interstitial displays a larger intermediate screen before the offer details if a hero creative is available, it is displayed at the top; otherwise, extra padding fills the space on mobile takes up about 80% of the screen on desktop with a main image (hero creative) 600px tall without a main image 500px tall example view interstitial live example standalone opens the offer in a dedicated page with no additional content example 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 redeem the offer example view disabled live example custom code before \</head> tag none allows injection of custom javascript into the perkswall \<head> section executes while the page is loading, before any visible content is rendered useful for loading fonts, analytics scripts, or meta tags code can be added with or without wrapping \<script> tags custom code before \</body> tag none allows injection of custom javascript into the perkswall \<body> section executes after all html content has loaded, ensuring dom elements are available commonly used for tracking scripts, event listeners, or third party widgets code can be added with or without wrapping \<script> tags featured offers 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