Perkswall Integration Page

overview the latest version of the perkswal l integration page simplifies the way you manage and customize your perkswall settings this dashboard gives you full control over various aspects of your perkswall, including styling customize the appearance to match your brand settings fine tune control options, including advanced configurations previews instantly view how your perkswall will look on both mobile and desktop devices with this enhanced version, managing your perkswall is easier and more intuitive, ensuring a seamless experience for both you and your customers 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 perkswall settings general settings favicon upload your brand’s favicon (16x16 pixels) to personalize your perkswall the favicon will appear in the browser tab when users visit your perkswall if you don't upload a favicon, the default momentscience logo will be used instead logo upload your company’s logo to be displayed in the header of your perkswall page style settings customize the appearance of your perkswall header with one of the following options light keeps the header background in the default light theme of perkswall image upload a custom header image for the best display, ensure the image matches the recommended dimensions of 1440x130 px color set a solid background color for the header you can either enter a hex code or select a color from the palette custom you can fully customize the perkswall header, allowing you to adjust the layout and appearance of key elements, such as the logo, header text, and the overall container style this customization utilizes javascript for dynamic behavior and element manipulation, css for styling, and html for the foundational structure selector name description #adpx pub image container div container for the publisher logo image #adpx perkswall headercontainer div container for the entire header #adpx mini desc div containing the header text sample code snippt // access the logo container (publisher logo image) const logocontainer = document getelementbyid('adpx pub image container'); // create and append a "sponsored by " message inside the logo container const sponsormessage = document createelement('div'); sponsormessage innertext = 'sponsored by '; logocontainer appendchild(sponsormessage); // set the layout to display content in reverse order (row reverse) logocontainer style flexdirection = 'row reverse'; // access the header container (entire header section) const headercontainer = document getelementbyid('adpx perkswall headercontainer'); // modify the header container layout and alignment headercontainer style flexdirection = 'column reverse'; // reverse column order headercontainer style alignitems = 'flex start'; // align items to the left headercontainer style backgroundcolor = 'white'; // set background color to white headercontainer style padding = '0'; // remove padding // access the header text container const headertextcontainer = document getelementbyid('adpx mini desc'); // customize the header text container styling headertextcontainer style width = '100%'; // set full width headertextcontainer style textalign = 'left'; // align text to the left headertextcontainer style backgroundcolor = '#6e9eda'; // set background color headertextcontainer style padding = '12px'; // add padding // create and append a new \<span> with a nested \<a> tag inside the header text container const newspan = document createelement('span'); const newlink = document createelement('a'); newspan appendchild(newlink); headertextcontainer appendchild(newspan); text style setting name default value description font family inter this setting allows you to select a preset font for the perkswall page the available options are as follows roboto open sans monospace open sans monospace sans serif serif description text size 12px set a custom size for the perkswall offer description text title text size 16px cta text size 16px set the size of the text within the call to action button perkswallet cta text size 12px adjust the size for the perkswallet call to action text the perkswallet allows users to save offers to their virtual wallet for later use, enabling them to easily access and claim their offers anytime for more information, see the perkswallet faq tile styles setting name default value description tile content alignment left sets the alignment of the content within each tile button background color #155eef12 set the button background color for the offer tile using a hex code or select from the color palette button text color #155eef set the button text color for the offer tile using a hex code or select from the color palette button hover color #155eef2b set the button hover color for the offer tile using a hex code or select from the color palette button stroke color #1c64f2 set the button stroke color for the offer tile using a hex code or select from the color palette tile radius 16px set the corner radius for each offer tile in pixels (px) border thickness size 1px set the border thickness of the offer tile (in px) tile background color #ffffff set the background color of individual offer tiles using a hex code or select from the color palette tile border color #eaecf0 set the border color of individual offer tiles using a hex code or select from the color palette tile background hover color #ffffff set the hover background color of individual offer tiles using a hex code or select from the color palette button radius 8px set the corner radius for the perkswall cta button in pixels (px) perkswall background color #ffffff set the background color of the perkswall page using a hex code or select from the color palette perkwallet cta color #101828 set the background color of the perkswallet button using a hex code this allows users to save offers to their wallet for later use for more information, see the perkswallet faq perkwallet cta hover color #f44336 set the hover background color for the perkswallet button using a hex code or select from the color palette for more information, see the perkswallet faq theme settings setting name default value description show featured offers disabled when enabled, displays a slider section beneath the perkswall header, showcasing a list of featured offers logo url none set the url for the perkswall logo it serves as a hyperlink to your website when clicking on the logo title text "you unlocked more exclusive offers " set customizable text that is displayed in the perkswall header offer count 12 set the initial number of offers to display when the perkswall is loaded auto show enabled when enabled, more offers are automatically loaded as the user scrolls down the page when disabled, a "show more" button appears at the end of the page to manually load more offers show logo enabled when enabled, your logo will be displayed in the header of the perkswall this logo can be set in the "general settings" section or from the configuration settings within the dashboard show image enabled when enabled, it displays each offer's image in the perkswall show header enabled when enabled, it shows the header of perkswall you can specify the header appearance from the "style settings" section 3d tiles disabled when enabled, it displays a 3d look for tiles show intermediate disabled this setting determines how offers appear when clicked you can choose from the following options modal displays an intermediate screen before the offer details mobile covers up to 50% of the screen desktop fixed height of 400px example view modal live example 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 mobile covers up to 80% of the screen desktop without a hero creative 500px height with a hero creative 600px height example view interstitial live example standalone opens the offer on a dedicated page, showing only that single offer 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 you can add custom javascript inside the perkswall \<head> tag code placed here executes during the document's loading phase, before the page content is rendered code can be added with or without a \<script> tag custom code before \</body> tag none you can add custom javascript inside the perkswall \<body> tag placing code here ensures that the page’s html content is fully loaded before execution code can be added with or without a \<script> tag featured offers this tab is visible only when the "show featured offers" option is enabled in the theme settings tab setting name default value description show dots enabled displays small circular navigation dots below the featured offer carousel these indicate the number of featured offers and allow users to navigate between them this option is automatically disabled when show icons is enabled show icons disabled displays branded offer icons as navigation elements instead of dots these icons provide a more visual and brand centric way to switch between offers enabling this setting overrides show dots auto slide disabled when enabled, the carousel automatically cycles through featured offers every 3 seconds overlay color #000000 sets the overlay color for featured offers you can enter a hex code manually or select a color using the color picker featured offers in order of delivery none click manage featured offers to choose which offers are featured three offers are displayed at a time, in the order you define only valid offers are shown to the user managing featured offers to customize the featured offers carousel, click the manage featured offers button this opens a popup displaying all offers provisioned to your account selecting offers use the checkboxes to select offers you wish to feature you can select up to 15 offers at a time selected offers will appear in the featured offers in order of delivery list prioritizing featured offers to reorder the featured offers drag and drop any offer row to adjust its display priority offers at the top of the list are given higher priority and will be displayed first in the carousel the carousel displays up to 3 offers at a time, strictly following your defined priority and filtering out any offers that are not valid for the user use the handle icon (≡) on the left of each row to drag offers smoothly into place 📢 if you're running into any issues while going through the integration process, feel free to contact us at help\@momentscience com