How to Customize Your Offerwall Design

How do I customize my offerwall design?

Go to Apps, click Manage next to your app and open the Design tab. Pick a theme or set your own colors, add a currency icon, choose the corner radius, card padding and font size, and watch the Live preview. Click Save changes, then Open your offerwall to see the real wall.

The Design tab is there for every app with the status Live. Once your publisher application is approved, a new app is live as soon as you create it, so you can design your wall right away. If you have not created an app yet, start with How to create your first app.

Why the wall should look like your site

Users trust an offerwall that feels like part of the product they already use. Your currency name, currency icon and colors tell them the rewards land in their own balance, not in some unknown account. The wall still shows that the offers come from third-party advertisers, as our terms require, so the design is about recognition, not about hiding where offers come from. Good contrast matters as much as brand colors: if users cannot read the reward or find the button, they do not start the offer.

Step by step

1. In the sidebar under Publish, click Apps.
2. Click Manage next to the app you want to change.
3. In the row of tabs under the app figures, click Design. The panel says “Make the offerwall look like part of your site”.
4. Under Images, add the pictures you want. Both are optional. Click Upload (or Replace if there is already an image) to choose a file. To remove one, click the small x on the thumbnail, and click Image removed. Undo if you change your mind.
5. Under Colors, pick a theme under Start from a theme, or set each color with the color picker or by typing a hex code such as #2D69FA.
6. Under Layout, choose the Corner radius, Card padding and Font size.
7. Check the Live preview. It updates as you edit. Switch it between Phone and Desktop, or click Preview next to the Colors title for a larger view that shows your changes before you save.
8. Click Save changes at the bottom. A “Saved.” message confirms it.
9. Under the live preview, click Open your offerwall. Your real offerwall opens in a new tab with the test user ID owner-test and the offers available in your country.

Images: currency icon and app logo

• Currency icon: shown next to every reward on your offerwall. Use a square image. It is resized to 128 px.
• App logo: only you see it, next to the app name in your dashboard. The offerwall always shows the Moonetix logo. PNG, JPG or WebP up to 3MB, or an animated GIF up to 2MB, resized to 256 px.

A simple, high-contrast icon reads best at small sizes. Test it on both a dark and a light page background if you might change themes later.

Themes and the six colors

Start from a theme offers six ready-made sets: Moonetix, Light, Midnight, Forest, Sunset and Mono. Each one already passes every contrast check, so it is the safest starting point. Then fine-tune any of the six colors:

The contrast rules your colors must pass

Your users must be able to read every offer, so we check your colors when you save. If a check fails, the field is marked and the colors are not saved until you fix them. The thresholds come from the Web Content Accessibility Guidelines. The W3C’s Understanding Contrast (Minimum) page sets at least 4.5 to 1 for normal text, and Understanding Non-text Contrast sets at least 3 to 1 for user interface components such as buttons.

• Text needs at least 4.5 to 1 contrast with the page background and the offer cards.
• Modal background needs at least 4.5 to 1 contrast with your text color.
• Main color and Button color need at least 3 to 1 contrast with the page background and the offer cards, so rewards and buttons stay visible.
• Offer background must not be too close to the page background. Pick a slightly lighter or darker shade so the cards stand out.

Want to check a brand color before you type it in? The WebAIM Contrast Checker measures the ratio between two hex colors and shows whether they meet WCAG AA.

Layout options

Match the corner radius to the buttons and cards on your own site. If many of your users are on phones, Medium or Large font size keeps reward amounts easy to read.

Test it on the real wall

Open your offerwall uses the test user owner-test. It can look around the wall like your users do, but it cannot start offers, so nothing it does reaches your statistics or earnings. To try a full offer flow with a real reward, use a real user ID from your site and follow Test your app before launch.

Check the wall where it will really live: inside your iframe, in your mobile WebView, or behind the floating button. Offerwall placement covers where to put it, and the embed code and its height options are in the Offerwall link docs.

If your app uses the Offers API

With the Offers API you draw the offer list in your own design, so these settings do not change your cards. The Design tab still applies to the Moonetix pages your users reach from the offerwall link, such as the offer details and My offers. Build your own offerwall with an Offers API covers the cards you design yourself.

On a phone

Tap Apps in the tab bar at the bottom, then Manage. The app tabs sit in one row that scrolls sideways, so swipe it to reach Design. The options are the same as on a computer.

If something goes wrong

• I do not see the Design tab. The app is not live, for example because our team paused it. Design and Integration are shown only while the status is Live.
• A box at the top says “Your saved colors are hard to read on the offerwall.” Your saved colors fail a contrast rule. You can still save other changes, but fix the colors named in the box.
• The offerwall still looks the same. Make sure you clicked Save changes before Open your offerwall, then reload the offerwall tab.
• The floating button has the old color. The button code in the Integration tab is filled in with your Button color when you copy it. Copy the code again, or edit data-button-color on your site.

Frequently asked questions