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/ 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

❌   Not compliant

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

❌   Not compliant

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

❌   Not compliant

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

❌   Not compliant

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

✅   Recommended

productimage-do.png

HIW icons

Optional, .PNG or .SVG file

✅   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

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
  • S - 600px
  • M - 900px
  • L - 1200px
  • 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/

 

Example of a portal hosted on a subdomain:
https://rewards.bonline.com/

 

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

 

✅   Recommended

logo-do.png

❌   Not compliant

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

✅   Image only

socialmediacover-do2.png

✅   Logo + image

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

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”

Search Engines / Robots directive

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