--- title: Perkswall Anatomy slug: perkswall-anatomy icon: 🧬 docTags: createdAt: 2025-07-26T11:24:37.475Z --- :::hint{type="info"} **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. ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ### 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. ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/f8fV8ncPh46zjFttVusSQ_perkswall-anatomy-page-5drawio.png "Perkswall Sections") ::: :::: ### API Response Format The API response includes three key components: 1. **Offers**: A list of available offers, each containing metadata like id, title, description, image, CTAs, and tracking pixels. 2. **Settings**: Configuration options for Perkswall behavior, layout, and branding. 3. **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. :::hint{type="success"} 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. :::hint{type="info"} 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 ::::VerticalSplit{layout="middle"} :::VerticalSplitItem **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. ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/PpZfJU2aCCche8qS9Kdmc_perkswall-anatomy-page-7drawio.png) ![](https://api.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/voI_iXeZ5KflXe5hMFo1b_perkswall-anatomy-page-8drawio.png) ::: :::: **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 `