# 6. Customization

## 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.

***

{% tabs %}
{% tab title="Theming" %}

## Navigation

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

![](/files/m2zzNicQhsQwCOCRy8Q7)

***

## Font <a href="#font" id="font"></a>

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 <a href="#colour-palette" id="colour-palette"></a>

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                                                                                                                                                                                                                                                                                               |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <ul><li>Page Background</li><li>Page Text</li><li>Primary</li><li>Accent</li><li>Surface Background</li><li>Surface Text</li><li>Page Button Background</li><li>Page Button Text</li><li>Error</li></ul> | <p>In the example provided in the images, the following colours are set:</p><ul><li>Page BG: #f5f8fa</li><li>Page Text: #222425</li><li>Primary: #285E80</li><li>Accent: #48a9e5</li><li>Surface BG: #ffffff</li><li>Surface Text: #3c3c3c</li><li>Page Button BG: #285e80</li><li>Page Button Text: #ffffff</li></ul> |
| ![](/files/14Or3uJor8g9istT6c6v)                                                                                                                                                                         | ![](/files/kWo3IRxyrSeFy0lR3SGy)                                                                                                                                                                                                                                                                                       |
| ![](/files/k7ob3GWXXgLIPYGLLt8o)                                                                                                                                                                         |                                                                                                                                                                                                                                                                                                                        |

***

## 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](/product/interfaces/white-label-interfaces/reward-artwork-guidelines.md).

<figure><img src="/files/N3LDHkojFmaUeaoi8NYZ" alt="" width="375"><figcaption><p>Reward thumbnails with item decoration and cost</p></figcaption></figure>

<figure><img src="/files/Bt3YIjKJfb4tbgCwkxqu" alt="" width="375"><figcaption><p>Reward thumbnails without item decoration and cost</p></figcaption></figure>

#### **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.

<figure><img src="/files/vsTEAUT0N3MtLhcglWNE" alt="" width="96"><figcaption><p>Microsite link appearing on device homescreen</p></figcaption></figure>

#### **Favicon**

The favicon appears in the address/tab bar.

<figure><img src="/files/JFhg6LLF6vqyr0iDWTos" alt="" width="216"><figcaption><p>Favicon appearing alongside microsite title in tab bar</p></figcaption></figure>
{% endtab %}

{% tab title="Options" %}
The following options are available for the Loyalty Microsite:

<table data-card-size="large" data-column-title-hidden data-view="cards" data-full-width="false"><thead><tr><th>Option</th><th>Description</th><th data-hidden data-type="files"></th></tr></thead><tbody><tr><td><strong>Welcome heading</strong></td><td><p>Enable a welcome heading on your microsite, which appears to logged out users only at the top of the rewards list.</p><p></p><p>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.</p><p></p><p>This text can be customised. The Learn more link destination cannot be changed, but it can be removed if required.</p><p><br><img src="/files/7BUCm7ESDO79PANb3mrP" alt=""></p></td><td></td></tr><tr><td><strong>Reward search bar</strong></td><td>Enable a reward search bar above your rewards list.</td><td></td></tr><tr><td><strong>Hide uncategorised rewards on homepage</strong></td><td>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.<br><br>These rewards will still be visible in search results if you have reward search enabled.</td><td></td></tr><tr><td><strong>Hide reward cost on homepage</strong></td><td>Hide the cost of a reward from its thumbnail on the microsite homepage.</td><td></td></tr><tr><td><strong>Reward QR code</strong></td><td>Show a QR code with timer for voucher-type rewards on the reward redemption screen.</td><td></td></tr><tr><td><strong>Search engine indexing</strong></td><td>Include or exclude the microsite from search engine indexing.</td><td></td></tr><tr><td><strong>Google tag manager ID</strong></td><td><p>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.</p><p></p><p>When giving a GTM ID the following behaviour will be enabled:</p><ul><li>Standard page-view tracking</li><li><code>login</code> event with a <code>user_id</code> property</li><li><code>new_user_registered</code> event</li><li><code>offer_redeemed</code> event with following properties: <code>user_id</code>, <code>offer_id</code>, <code>offer_name</code></li></ul></td><td></td></tr><tr><td><strong>Microsite lock</strong></td><td>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.</td><td></td></tr><tr><td><strong>Receipt advice image</strong></td><td><p>The receipt advice image shows when a user selects 'Scan a Receipt' at the bottom of the page.</p><p></p><p>A default image is provided, however if required you can optionally specify your own image.</p></td><td></td></tr><tr><td><strong>Multi-page receipt uploads</strong></td><td><p>Enabling multipage uploads allows your end-users to upload multiple images/files per receipt claim, handy for long or double sided receipts.</p><p></p><p>Users must still only submit one actual receipt per claim and not utilise this feature to batch upload multiple receipts.</p></td><td></td></tr><tr><td><strong>Hide receipt upload</strong></td><td>Hide receipt uploading functionality from a specific audience.</td><td></td></tr><tr><td><strong>Show points as currency</strong></td><td>Show a user's points balance, and reward costs, as a currency with a custom multiplier. For example, show 100 points as $1.00.</td><td></td></tr><tr><td><strong>Hide </strong><em><strong>reward available until</strong></em><strong> text</strong></td><td>If a 'reward available until' date is specified in a reward's availability settings, this will be hidden from the reward view page.</td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="Welcome Page" %}
You can optionally utilise a Welcome Page on your microsite.

<figure><img src="/files/DGp2Zte0YbqE44FVP1EV" alt="" width="300"><figcaption></figcaption></figure>

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](#user-flow "mention") 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>

{% hint style="info" %}
To add content to your welcome page, review the guidance below and then send the content you would like to display to [WLL Support](/product/services-and-support/wll-support.md) who will add this for you,
{% endhint %}

***

## **User flow**

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

1. **No welcome page**
   * No welcome page is utilised as part of the microsite user flow
2. **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
3. **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.

<img src="/files/gwWsWhshfLJuAqVs3qJQ" alt="Show the welcome page when a user is not logged in" class="gitbook-drawing">

***

## **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:

1. **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)
2. **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)
3. **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.

![](/files/In3ywT9eLB8QSBnq6MnL)![](/files/MWBj3xcRyWsGiauI8Bfh)
{% endtab %}

{% tab title="Terms & Privacy" %}
You can add content to the `/terms` and `/privacy` pages. Send your terms and/or privacy policy to [WLL Support](/product/services-and-support/wll-support/how-do-i-contact-support.md) who will add this to your microsite on your behalf.
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kbase.whitelabel-loyalty.com/product/interfaces/white-label-interfaces/loyalty-microsite/loyalty-microsite-setup/6.-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.