6. Customization

Learn about ways the Loyalty Microsite can be customized including colours, logos, layout options, and ancillary content like welcome and terms pages.

About Loyalty Microsite customization

The Loyalty Microsite has been designed in such a way that it can be themed and configured to match your existing brand guidelines to ensure your customers have a consistent and recognisable experience.

This article outlines the customization options available in the Loyalty Microsite.

The navigation bar sits at the top of the microsite, and has the following options:

Site logo: choose whether to show a site logo. If no logo is required, simply upload a 1px transparent PNG
Navigation visibility: choose to show navigation text and icons, text only, or no navigation
Navigation style: choose to invert the default state and show the logo on the left and navi on the right

Font

You can optionally specify a custom font to be used across your microsite.

You can specify one font to cover the whole microsite. For example:

Arial (All text)

Or, you can specify 2 different fonts - differentiated by the weight used on the microsite. For example:

Arial Extra-Bold (All bold-weighted text), Comic Sans Regular (All normal-weighted text)

If you have an especially stylised brand font, we suggest using it for the bold text only and using system default for normal text.

Colours

You can optionally specify a custom colour scheme to be used across your microsite.

In some areas, colours are automatically set based on contrast with, or shades of, the specified colour. This includes but is not limited to:

Text used for reward name on reward thumbnails (background primary)
Text used for reward name and subtitle on reward view page (background accent)
T&C box background colour
Hover states

Required Colour Variables

Colour Variables Example

Page Background
Page Text
Primary
Accent
Surface Background
Surface Text
Page Button Background
Page Button Text
Error

In the example provided in the images, the following colours are set:

Page BG: #f5f8fa
Page Text: #222425
Primary: #285E80
Accent: #48a9e5
Surface BG: #ffffff
Surface Text: #3c3c3c
Page Button BG: #285e80
Page Button Text: #ffffff

Miscellaneous theme options

Reward thumbnail

Reward thumbnails are shown on your microsite homepage in the rewards list, and in reward category views. They feature a 1px stroke and a small banner at the top with the reward name (the 'item decoration'), and (if applicable) the reward cost or incentive. You can choose to:

Hide the stroke and banner (the 'item decoration' - presenting the bare reward artwork only at a 1:1 ratio)
Hide the cost

This allows you to have greater flexibility over the appearance of your microsite, as you can embed the reward name and cost into the imagery itself using custom fonts and styles etc. Just make sure you consider the bleed area required per Reward artwork guidelines.

Homescreen icon

The homescreen icon appears when the microsite is deployed in standalone mode and a user adds the microsite to bookmarks or their smartphone home screen.

Favicon

The favicon appears in the address/tab bar.

The following options are available for the Loyalty Microsite:

Welcome heading

Enable a welcome heading on your microsite, which appears to logged out users only at the top of the rewards list.

In the screenshot below, the welcome heading is the text reading 'Welcome to Restaurant Demo! Earn points when you shop with us and get amazing rewards! Learn more'. The link Learn more leads to your Welcome page.

This text can be customised. The Learn more link destination cannot be changed, but it can be removed if required.

Reward search bar

Enable a reward search bar above your rewards list.

Hide uncategorised rewards on homepage

Uncategorised rewards appear at the top of your rewards list by default. You can choose instead to hide rewards which do not belong to a reward category from the microsite homepage. These rewards will still be visible in search results if you have reward search enabled.

Hide reward cost on homepage

Hide the cost of a reward from its thumbnail on the microsite homepage.

Reward QR code

Show a QR code with timer for voucher-type rewards on the reward redemption screen.

Search engine indexing

Include or exclude the microsite from search engine indexing.

Google tag manager ID

Specify a Google Tag Manager ID for analytics purposes. This will also result in a cookie accept/decline overlay appearing at the bottom of your microsite.

When giving a GTM ID the following behaviour will be enabled:

Standard page-view tracking
login event with a user_id property
new_user_registered event
offer_redeemed event with following properties: user_id, offer_id, offer_name

Microsite lock

Lock the microsite to a specific user audience. Users in the specified audience will see a page telling them they do not have access to the microsite.

Receipt advice image

The receipt advice image shows when a user selects 'Scan a Receipt' at the bottom of the page.

A default image is provided, however if required you can optionally specify your own image.

Multi-page receipt uploads

Enabling multipage uploads allows your end-users to upload multiple images/files per receipt claim, handy for long or double sided receipts.

Users must still only submit one actual receipt per claim and not utilise this feature to batch upload multiple receipts.

Hide receipt upload

Hide receipt uploading functionality from a specific audience.

Show points as currency

Show a user's points balance, and reward costs, as a currency with a custom multiplier. For example, show 100 points as $1.00.

Hide reward available until text

If a 'reward available until' date is specified in a reward's availability settings, this will be hidden from the reward view page.

You can optionally utilise a Welcome Page on your microsite.

The Welcome Page is an opportunity to explain and promote your rewards programme to users. The content of the page is up to you to decide but the structure should conform to the standard building blocks we provide.

The welcome page is shown as part of the User flow you select, but can also be accessed at anytime at micrositeurl.com/welcome. You can see an example welcome page here: https://explorer.web.wlloyalty.net/welcome

To add content to your welcome page, review the guidance below and then send the content you would like to display to WLL Support who will add this for you,

User flow

You can choose one of the following options for your Welcome Page user flow:

No welcome page
- No welcome page is utilised as part of the microsite user flow
Show the welcome page after a user completes registration
- The microsite rewards list (the homepage) is visible to all users whether logged in or out, and users only see the welcome page after login
Show the welcome page when a user is not logged in
- The microsite rewards list (the homepage) is only visible to logged in users. Logged out users are shown the welcome page only and must register or login to access the microsite rewards list.

Welcome page CTA

The welcome page features a call to action button at the bottom.

You can choose one of the following options for where a user lands after pressing this CTA:

Navigate to homepage
- The user will be taken to the homepage in a logged out state (not compatible with the Show the welcome page when a user is not logged in user flow)
Navigate to registration
- The user will be taken to the registration form (not compatible with the Show the welcome page after a user completes registration user flow)
Navigate to login
- The user will be taken to the login form (not compatible with the Show the welcome page after a user completes registration user flow)

The Welcome page also appears when users press ‘Help’ or ‘Learn more’ in the user summary banners.

Welcome page structure

The simplest structure is a title combined with any number of paragraphs and headings. You can also provide a "hero image" which will be shown as a banner along the top of the page as shown in wireframes below.

You can add content to the /terms and /privacy pages. Send your terms and/or privacy policy to WLL Support who will add this to your microsite on your behalf.

Previous5. Profile schema NextLoyalty Microsite tutorials

Last updated 8 months ago

Was this helpful?