---
title: "Required assets to build your rewards portal"
url: "https://docs.aklamio.com/en/article/required-assets-to-build-your-incentives-platform"
language: "en"
last_updated: "2026-09-24T16:45:02.686Z"
---

# Required assets to build your rewards portal

## **The rewards portal**

  
Aklamio builds a portal that serves end-users as an interface to collect their rewards and depending on the user-journey also an entry into the journey - e.g. starting a referral or initiating the cashback claim process.  
Since this follows your CI Aklamio needs some assets and guidelines to build this for you.

[https://demo-fibre.aklamio.com/](https://demo-fibre.aklamio.com/) Her you can see an example of such a portal.

## **Portal Hero image**

***1900x700px. As PNG. No Text, max of 300kB.***

The hero image is the main visual point of the portal. From a design perspective we request that any graphics are located on the right side of the image. This will allow a better visibility of the login area.

| **The hero images should never include text or small stickers** |
| --- |

  
✅   Recommended

![](https://cdn-assets.productfruits.com/c000a6cf-b381-44e9-886c-3529ca5c00d3)

❌   Not compliant

![](https://cdn-assets.productfruits.com/cce39dac-0acb-492b-b6cc-b9c67fb560c2)

## **Portal Hero image - Mobile**

***900x300px. As PNG. No Text, max of 300kB.***

The Mobile Hero Image makes sure that the hero image is centralized for screen sizes below 600px. If no mobile image is provided, the main hero image will be used as default.

| **The hero images should never include text or small stickers** |
| --- |

✅   Recommended

![mobile-hero-compliant.png](https://static.wixstatic.com/media/ad02cf_2a07d3358399484980e132c525bf7161~mv2.png/v1/fill/w_858,h_360,al_c,lg_1,q_85,enc_avif,quality_auto/mobile-hero-compliant.png)

❌   Not compliant

![mobile-hero-dont.png](https://static.wixstatic.com/media/ad02cf_4b29af53429d4b35bd2afd0ea94ca637~mv2.png/v1/fill/w_832,h_360,al_c,lg_1,q_85,enc_avif,quality_auto/mobile-hero-dont.png)

## **CRM Hero image**

***580x150px. As PNG.***

The hero image is the main visual of each transactional email. Please do not provide any image that is smaller as this will look pixelated. Please add the brand logo on the CRM banner or send us a ready-to-use image.

✅   Recommended

![](https://cdn-assets.productfruits.com/f446054e-da2f-416c-a32d-f793fb248995)

❌   Not compliant

![](https://cdn-assets.productfruits.com/d266c3fc-b8b5-467a-b723-16560641722f)

## **Logo**

***Transparent high resolution .SVG or .PNG***

The company logo is always required throughout the entire integration. The file should be as good resolution as possible. SVG or PNG would be the best files.

***300X300px square Logo***

A square logo is needed for some specific pages on our Admin and Backoffice.

✅   Recommended

![](https://cdn-assets.productfruits.com/f1e90e13-e4b1-47b1-a044-83147687ebb8)

❌   Not compliant

![](https://cdn-assets.productfruits.com/ac6bbcc5-bb4b-43a9-916e-789e610379fa)

## **Fonts**

***Typeface Source or Google Fonts. (Files : EOT, OTF or WOFF formats are accepted)***

Fonts are the basis of a brand. For the integration we will need your font files. We require at least one of the following formats: TTF, OTF, EOT, WOFF.

## **Product Images**

***300x300px High Resolution. Max. 300kB, best as PNG.***

They are a visual representation of what you are offering. The minimum size should be 300x300px. In case you don’t offer any products, we can always design a banner or something similar to promote the brand. The image should be always be provided by the partner.

| **The product image should not contain any text or CTA** |
| --- |

✅   Recommended

![](https://cdn-assets.productfruits.com/1925464b-8649-4231-823c-06bac478cfe5)

✅   Recommended

![productimage-do.png](https://static.wixstatic.com/media/ad02cf_ab8ebde4256c4e1a9df1620e3c8ee092~mv2.png/v1/fill/w_1034,h_618,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/productimage-do.png)

## **HIW icons**

***Optional, .PNG or .SVG file***

![](https://cdn-assets.productfruits.com/bd1b0931-f38a-4277-a3ef-7d5f16617f45)

## ✅   Recommended

***Optional, 1600 x 1200px***

Standalone widgets are used for product recommendations or in-app referral programs. They consist of only the sharing UX being triggered from a partners touchpoint. If you require a standalone widget for your partner, please let us know.

Keep in mind that the styling will be the same as in the portal. To develop a standalone widget we would need the background image as well as the products (and product ID’s). We also need the content for a reward table and a HIW section for the widget.

## **Style guide**

***PDF or web portal from your design or brand teams***

Your branding or marketing team probably developed a style guide to show how to use your brand. If you have an online platform or a design system, please invite us using the following email address:  
  
[**integration@aklamio.com**](mailto:integration@aklamio.com)

## **Viewports**

The viewport is the user's visible area of a web page. The viewport varies with the user's device, and will be smaller on a mobile phone than on a computer screen.  
To ensure web content is properly scaled and responsive across different devices and screen sizes, we use the following standard viewports:

| -   XS - 0px<br>-   S - 600px<br>-   M - 900px<br>-   L - 1200px<br>-   XL - 1536px |
| --- |

The 5 standard breakpoints above are customizable if needed.  
 

## **Additional Requirements for the landing page wrapper** 

### **ONLY relevant for hosted portals** (hosted on a subdomain / hosted on an aklamio domain)

Examples of aklamio hosted portal: 

[https://virginmedia.aklamio.com/](https://virginmedia.aklamio.com/)

Example of a portal hosted on a subdomain:  
[https://rewards.bonline.com/](https://rewards.bonline.com/)

### **Logo** (as in the partner’s website, rectangular proportions) with transparent background in .png or .svg

**✅**   **Recommended**

![logo-do.png](https://static.wixstatic.com/media/ad02cf_6e44cd52feed4e7194011203e0c996ce~mv2.png/v1/crop/x_11,y_0,w_287,h_103/fill/w_401,h_144,fp_0.50_0.50,lg_1,q_85,enc_avif,quality_auto/logo-do.png)

**❌**   **Not compliant**

![logo-dont.png](https://static.wixstatic.com/media/ad02cf_156c2d4484f64137b3319f52bdcf8eb2~mv2.png/v1/fill/w_420,h_412,al_c,lg_1,q_85,enc_avif,quality_auto/logo-dont.png)

### **Favicon** (as in the partner’s website) preferably in .png, .svg or .ico

### **Social Media preview image** minimum size 600 x 315 pixels, Ideal size 1200 x 630pixels

####   
This is the image used for the Open Graph and Twitter Card tags below, and is what shows when the portal URL is shared on social media or messaging apps. Can be a logo only, an image only, or a logo + image composition.

### **✅   Logo only**

![socialmediacover-do1.png](https://static.wixstatic.com/media/ad02cf_cb7cd0c575c444fc81044a06c3f39090~mv2.png/v1/fill/w_707,h_384,al_c,lg_1,q_85,enc_avif,quality_auto/socialmediacover-do1.png)

### **✅   Image only**

![socialmediacover-do2.png](https://static.wixstatic.com/media/ad02cf_b9b0f5e712844706be65af40a23587de~mv2.png/v1/fill/w_669,h_364,al_c,lg_1,q_85,enc_avif,quality_auto/socialmediacover-do2.png)

### ✅   Logo + image

![socialmediacover-do.png](https://static.wixstatic.com/media/ad02cf_24153be8c36441ddb598c9e718580545~mv2.png/v1/crop/x_1,y_0,w_595,h_323/fill/w_713,h_388,fp_0.56_0.54,lg_1,q_85,enc_avif,quality_auto/socialmediacover-do.png)

### **Meta Information**

**Meta Title** and **Meta Description**: shown in search engine results and used to populate social sharing tags

**Canonical URL**: the preferred/authoritative URL for the page, to avoid duplicate-content issues

### **Optional - if not provided, will be duplicated from the above**

**Open Graph tags**: og:title, og:description, og:image, og:url, generated from the info above and used by Facebook, LinkedIn, WhatsApp, etc.

**Twitter (X) Card tags:** twitter:card, twitter:title, twitter:description, twitter:image, used when the link is shared on X/Twitter

![social-preview-1.png](https://static.wixstatic.com/media/ad02cf_f609bc15fc964d4497be056b5b2f0026~mv2.png/v1/fill/w_756,h_505,al_c,lg_1,q_90,enc_avif,quality_auto/social-preview-1.png)

![social-preview-2.png](https://static.wixstatic.com/media/ad02cf_4900eaca27a64375b51261aabb953ce0~mv2.png/v1/crop/x_0,y_0,w_589,h_342/fill/w_706,h_410,fp_0.50_0.50,lg_1,q_85,enc_avif,quality_auto/social-preview-2.png)

### **Website**

The URL desired to be linked when clicking the logo. Recommended: partner website

### **Vanity URL:**  

  
the desired final URL. E.g. “[http://PARTNER.aklamio.com](http://partner.aklamio.com/)”

### **Search Engines / Robots directive**

Should the page be indexed by search engines or not, and should links be followed (index/noindex, follow/nofollow)?
