Perkswall

12min
Overview
Perkswall by MomentScience enables businesses to showcase multiple Offers and Perks in a branded, engaging experience. This feature can also include LoyaltyBoost Offers, which reward users with points or virtual currency for interacting with the Offers. MomentScience dynamically loads all available offers to the Perkswall, progressively displaying new offers as the user scrolls.
﻿
To enable Perkswall, please reach out to your account manager.
Key Features
Modern and Intuitive Design: The launch of Perkswall 2.0 introduces a sleek, user-friendly interface designed to enhance user engagement. The improved design ensures that navigating and exploring offers is both enjoyable and straightforward.
Customizable Branding: Perkswall lets you create a fully branded experience, from customizing the favicon and header to tailoring the look of offer cards. All settings are easily accessible and adjustable through your dashboard, making setup quick and hassle-free.
To learn more about fully customizing your Perkswall through our dashboard, visit the Perkswall Integration Documentation. This guide will walk you through the steps to optimize and tailor your Perkswall experience.
Easy Integration: Integrating Perkswall is straightforward. You can link to a standalone URL or embed it in your app or website using a webview or iFrame. For advanced use cases, the API allows you to fetch and display offers directly within your systems.
Save Offers with PerksWallet: Give users the option to save offers for later with the PerksWallet feature. This functionality encourages repeat engagement and makes it easier for users to claim perks when it’s convenient.
Explore Perkswall in action with our live demo and see how it delivers a branded, engaging way to showcase offers. The demo shows a basic setup, but with customization, you can optimize user experience and maximize revenue. Read on to learn how! 
Implementation Methods
You can implement a Perkswall experience using one of the following methods:
Direct Integration (Webview/Embedded Implementation Code)
Perkswall is mobile-responsive and can be easily activated by linking to a standalone URL or embedding it directly within an existing webpage or mobile app webview. To obtain your Perkswall URL and Embedded Implementation Code, visit the Perkswall Integration Page on your dashboard or click ﻿here.
Here’s a clear and concise step-by-step guide on how to obtain your Embedded Implementation Code and Webview URL from the Dashboard:
<div style="position: relative; box-sizing: content-box; max-height: 80vh; max-height: 80svh; width: 100%; aspect-ratio: 2.1075740944017562; padding: 40px 0 40px 0;"><iframe src="https://play.momentscience.com/embed/cm3rvyvlj0z1o3vuk6aqp76r5?embed_v=2" loading="lazy" title="Fetching MomentScience's Perkswall iFrame & URL" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
<div style="position: relative; box-sizing: content-box; max-height: 80vh; max-height: 80svh; width: 100%; aspect-ratio: 2.1075740944017562; padding: 40px 0 40px 0;"><iframe src="https://play.momentscience.com/embed/cm3rvyvlj0z1o3vuk6aqp76r5?embed_v=2" loading="lazy" title="Fetching MomentScience's Perkswall iFrame & URL" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
﻿
Integrating Embedded Perkswall
Follow these steps to integrate the embedded Perkswall code into your webpage:
1
Embed the Perkswall Script 
Place the Perkswall script inside the <body> section of your HTML file, just before the closing </body>tag.
You can obtain the embed code from your Perkswall Integration page within the dashboard.
2
Add the Perkswall Container
Add the following container element to your HTML body where you want the Perkswall to appear:
JS
<div id="adpx_container"></div>
<div id="adpx_container"></div>
﻿
Ensure the id attribute adpx_containeris unique and not used by other elements on the page.
3
Full HTML Sample Code
Here is a complete example of an HTML page with the embedded Perkswall code:
JS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MomentScience Perkswall Integration</title>
</head>
<body>
    <header>
        <h1>Welcome to MomentScience Perkswall Integration</h1>
    </header>

    <!-- Perkswall Container -->
    <div id="adpx_container">
        <!-- Perkswall will be dynamically injected and rendered here -->
    </div>

    <footer>
        <p>&copy; 2024 MomentScience. All rights reserved.</p>
    </footer>

    <!-- Embed the Perkswall script at the end of the body -->
    <script>
        // Configuration for MomentScience Perkswall Integration
        window.AdpxConfig = {
            accountId: "fbe15ty56f65hef4",  // Replace with your actual account ID
            themeId: "MomentScience_Docs",  // Customize the theme ID as needed
            containerId: "adpx_container"   // ID of the container to render Perkswall
        };

        // Object to send user-specific data (payload)
        window.AdpxUser = {
            // Example payload data goes here (e.g., age, userId)
            age: 25
        };

        // Dynamically create and append the Perkswall script
        var adpx = document.createElement('script');
        adpx.type = 'text/javascript';
        adpx.async = true;
        adpx.src = 'https://cdn.adspostx.com/launcher.perkswall.js';
        document.body.appendChild(adpx);
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MomentScience Perkswall Integration</title>
</head>
<body>
    <header>
        <h1>Welcome to MomentScience Perkswall Integration</h1>
    </header>

    <!-- Perkswall Container -->
    <div id="adpx_container">
        <!-- Perkswall will be dynamically injected and rendered here -->
    </div>

    <footer>
        <p>&copy; 2024 MomentScience. All rights reserved.</p>
    </footer>

    <!-- Embed the Perkswall script at the end of the body -->
    <script>
        // Configuration for MomentScience Perkswall Integration
        window.AdpxConfig = {
            accountId: "fbe15ty56f65hef4",  // Replace with your actual account ID
            themeId: "MomentScience_Docs",  // Customize the theme ID as needed
            containerId: "adpx_container"   // ID of the container to render Perkswall
        };

        // Object to send user-specific data (payload)
        window.AdpxUser = {
            // Example payload data goes here (e.g., age, userId)
            age: 25
        };

        // Dynamically create and append the Perkswall script
        var adpx = document.createElement('script');
        adpx.type = 'text/javascript';
        adpx.async = true;
        adpx.src = 'https://cdn.adspostx.com/launcher.perkswall.js';
        document.body.appendChild(adpx);
    </script>
</body>
</html>
﻿
API Integration
The Perkswall API allows you to ingest MomentScience Offers into your platform, either to enhance your existing offerings or to fully customize how offers are displayed. You can retrieve Perkswall offer fragments via the API and use them to construct and populate your own Perkswall experience. Learn more about the Perkswall API. 
Passing Payload Parameters for Reporting and Targeting
MomentScience supports the use of payload parameters in the Perkswall URL to enhance both reporting and targeting capabilities. These parameters help track performance and personalize offer displays based on specific criteria.
Reporting 
By adding custom parameters to the Perkswall URL, you can track how the Perkswall performs under different conditions. For example, you could track the source of a user’s visit, such as whether they were referred through an email campaign or a mobile push notification. To do this, simply pass a parameter like refsourcewith values such as email or push.
JS
https://get.perkswall.com/offerwall/v2/?accountId=99e58babc94df55a&refsource=push
https://get.perkswall.com/offerwall/v2/?accountId=99e58babc94df55a&refsource=push
﻿
In this example, the refsource=push parameter indicates that the user came from a push notification. This data can later be referenced in reporting to assess performance across different referral channels.
Targeting 
MomentScience allows advanced targeting through ad-hoc payload parameters passed into the Perkswall URL. This enables you to tailor the offers displayed based on user-specific information. For example, you can pass a zip code to target offers to users in that region.
JS
https://get.perkswall.com/offerwall/v2/?accountId=99e58babc94df55a&zipcode=78099
https://get.perkswall.com/offerwall/v2/?accountId=99e58babc94df55a&zipcode=78099
﻿
In this case, the zipcode=78099 parameter ensures that only offers relevant to users in that zip code are shown. You can pass multiple parameters for more refined targeting, such as demographics, location, or behavior.
Are you still using Perkswall V1? If so, you can access its documentation here.
﻿
📢 If you're running into any issues while going through the integration process, feel free to contact us at [email protected] 
Updated 05 Dec 2024
Did this page help you?
React Native
Perkswall Direct Offers