Perkswall Anatomy

who is this for developers building a custom perkswall ui who need to understand how the api response maps to the visual sections of the perkswall outcome understand the structure of the perkswall header, featured offers, and body and the api response format to design a functionally complete, branded offers gallery overview momentscience's perkswall provides a seamless way to integrate curated offers and perks into your platform using the perkswall api, you can fetch offer data and design a perkswall that perfectly aligns with your branding and user experience goals this flexible solution empowers you to customize the look, feel, and behavior of the perkswall, ensuring it blends naturally into your platform while delivering a personalized, engaging experience for your users understanding perkswall anatomy this document provides an in depth look at the perkswall structure and how to maximize its functionality after retrieving data from the api perkswall sections a perkswall header the header section is customizable based on your preferences and typically showcases your brand identity this can include an image, a specific color scheme, or custom code tailored to your design requirements b featured offers this section highlights up to three featured offers users can scroll through these offers, providing an engaging way to display important promotions or deals c perkswall body the body section contains a continuous list of offers as users scroll, more offers will be loaded, displaying additional offers as they progress down the page api response format the api response includes three key components offers a list of available offers, each containing metadata like id, title, description, image, ctas, and tracking pixels settings configuration options for perkswall behavior, layout, and branding styles customization options for the visual appearance, such as text styles, colors, and button designs by understanding and leveraging these sections, you can create a perkswall experience tailored to your platform's requirements explore perkswall in action with our live demo https //get perkswall com/offerwall/v2/?accountid=99e58babc94df55a\&country=us and see how it delivers a branded, engaging way to showcase offers the demo https //get perkswall com/offerwall/v2/?accountid=99e58babc94df55a\&country=us shows a basic setup, but with customization, you can optimize user experience and maximize revenue read on to learn how! perkswall header the perkswall header can be tailored to match your platform’s branding and design by configuring settings in the dashboard, which are reflected in the api responses this approach provides flexibility you can either use the api to dynamically render the header based on dashboard configurations or create a fully customized header independently, ignoring the api provided values if desired style the header style is defined by styles header style and supports the following options light a default clean white background for a minimalist appearance image a header with a background image the image url can be found in styles header image color a header with a static background color the color value is returned in styles header color custom a fully customized header using javascript the custom code is returned in the settings custom head parameter featured offers the featured offers functionality allows you to highlight specific offers within your perkswall to check if featured offers are enabled for your account, refer to the data settings featured offers parameter true featured offers are enabled for your perkswall false featured offers are disabled for your perkswall when enabled, the data settings featured offer list provides the ids of up to three featured offers you can use the ids from data settings featured offer list to identify the corresponding offers in the data offers\[] array by matching them with the data offers\[] id field perkswall body a offer icon image displays the creative offer icon from data offers\[] creatives\[] where creative type is icon image b advertiser name displays the offer’s advertiser name, retrieved from data offers\[] advertiser name c offer short headline displays the offer’s short headline, retrieved from data offers\[] short headline d offer short description provides a brief offer description from data offers\[] short description e positive cta button displays the call to action text, retrieved from data offers\[] cta yes f perkswallet button allows users to save the offer for later use and is displayed only if data offers\[] perkswallet enabled is set to true g offer hero image displays the offer's hero image, retrieved from data offers\[] creatives\[] where creative type is hero image h offer title displays the full offer title, retrieved from data offers\[] title i offer description provides the detailed offer description, retrieved from data offers\[] description j offer terms and conditions offer's terms and conditions, retrieved from data offers\[] terms and conditions , are in html format (typically as an unordered list \<ul> ); render as html to maintain formatting—if empty, assume no specific terms apply handling cta buttons 1\ positive cta button text source retrieve the button text from data offers\[] cta yes action when the user clicks the positive cta button, direct them to the url specified in data offers\[] click url 2\ negative cta button note the negative cta button data offers\[] cta no is optional implementation is not required unless specified if you're considering its usage, contact your account manager for guidance on its purpose 3\ close button note the close beacon data offers\[] beacons close does not indicate the closure of the perkswall and is typically not required for implementation if you're unsure whether to use this, reach out to your account manager for clarification offer creatives each offer includes a set of creative images, each serving a specific purpose below are the supported creative types and their recommended specifications icon creative type icon image description represents the offer's icon or brand logo expected size 250 × 250 px (±10% size variation) hero creative type hero image description represents the offer in the perkswall featured section it can also be used if a larger "offer page" is implemented, providing a more detailed display of the offer expected size 1000 × 280 px (±10% size variation) offer creative type offer image description an additional image relevant to the offer expected size based on design requirements constraint ensure the uploaded and received image matches the expected dimensions for optimal display creatives uploaded via the dashboard appear first in data offers\[] creatives and include a user id attribute matching your id to identify them as your uploads offer impression pixel the offer impression pixel tracks when an offer is displayed to the user, capturing essential data for performance monitoring and analytics it triggers when the associated creative is rendered on the user’s screen parameter location data offers\[] pixel type url usage guidelines fire the pixel as soon as the creative becomes visible to the user ensure the pixel fires only once per impression to avoid duplicate tracking send an http get request to the url in data offers\[] pixel perkswall style the api response includes a styles object, which defines the visual appearance and behavior of various ui components in your perkswall these style settings are managed through the perkswall integration page https //app momentscience com/account/integration/perkswall in the dashboard https //app momentscience com/account/integration/perkswall any changes made to the styles settings in the dashboard are automatically reflected in your api response, ensuring consistency across your integration for more details on editing these settings, refer to the following demo perkswall settings the api response includes a settings object that defines your perkswall's configuration this object contains nested properties such as tile count , fav icon logo , and other related settings you can specify and customize these settings directly from the dashboard https //app momentscience com/account/integration/perkswall changes made in the dashboard https //app momentscience com/account/integration/perkswall are automatically reflected in the api response, allowing for easy modification and management of your perkswall's behavior and appearance to learn more about editing your settings, refer to the following demo 📢 if you're running into any issues while going through the integration process, feel free to contact us at help\@momentscience com