# Loyalty Tiles

Loyalty Tiles are ready-made, loyalty-themed UI components that can be embedded into any page with minimal effort. They allow you to highlight key aspects of your loyalty program while keeping full control over styling and layout.

You can embed Loyalty Tiles in:

* **Your own interface** (via our Tiles SDK — [view SDK documentation](https://react-sdk.whitelabel-loyalty.com/))
* **Our Loyalty Microsite**

***

## Tile types

Loyalty Tiles come in multiple types to suit different needs:

<table><thead><tr><th width="255.66015625" valign="top">Tile Type</th><th valign="top">Purpose</th></tr></thead><tbody><tr><td valign="top"><strong>Content</strong></td><td valign="top">Display custom images and/or text to share program information with users. Add URLs to Content tiles to allow users to click to visit other areas of your program or site.</td></tr><tr><td valign="top"><strong>Points</strong></td><td valign="top">Show a user’s current points balance.</td></tr><tr><td valign="top"><strong>Reward</strong></td><td valign="top">Show rewards the user is eligible to redeem.</td></tr><tr><td valign="top"><strong>Reward Category</strong></td><td valign="top">Display categories of rewards available.</td></tr><tr><td valign="top"><strong>Badge</strong></td><td valign="top">Show badges available in the program, and whether the user has earned them.</td></tr><tr><td valign="top"><strong>Banners</strong></td><td valign="top">Page-wide banners with image, text, or both for high-impact marketing.</td></tr></tbody></table>

***

## Customization

Tiles can be fully configured in the **Loyalty Console** using a WYSIWYG editor.

* Organize tiles into **sections** with optional titles and subtitles (e.g., *Welcome*, *Badges*, *Rewards*, *Current Offers*).
* Customize **colors** and **fonts** at implementation level so tiles match your brand and blend into the surrounding page.

Tiles are fully **mobile responsive** and designed with a neutral, adaptable aesthetic to fit seamlessly into your existing design language.

<figure><img src="/files/xXcXbq0NMiOeGqQB2W1y" alt=""><figcaption></figcaption></figure>

### Visibility criteria

You can control who sees each tile based on:

* **Login status** (logged out or logged in)
* **Audience membership** (e.g., only show a tile to users in a specific audience)

<figure><img src="/files/y3o8TSRQhxcgRyKa400X" alt=""><figcaption></figcaption></figure>

### Localization support

Create multiple translations for each tile to support international programs, and set a default locale to be shown to user's for whom a translation matching their region does not exist.

<figure><img src="/files/HD0vaywaeR1mAgN77UtR" alt=""><figcaption></figcaption></figure>

***

## Why use Loyalty Tiles?

**For Loyalty Microsite customers:**\
Gain maximum flexibility over the homepage layout without needing custom development.

**For API customers building their own interface:**\
Easily integrate key loyalty UI elements into your existing UX without starting from scratch.

*Tip:* See the examples below for real-world homepage designs showcasing the flexibility of Loyalty Tiles.

For technical implementation details, see the [Tiles SDK documentation](https://react-sdk.whitelabel-loyalty.com/).

***

## Examples

### WLL Activate Microsite

In the below screenshot, taken from the [WLL Activate demo microsite](https://activate.web.wlloyalty.net/), Tiles have been used to:

* Create sections to bring structure and hierarchy to the page
* **Welcome section**
  * Show user's their points balance (Points tile)
  * Provide mechanisms for user's to engage with the program (Content tiles with links)
* **Earning points section**
  * Content tiles with links take users to pages which explain more about how to interact with the program.
* **Flexible reward options section**
  * A mixture of reward and reward category tiles allow users to browse the rewards on offer as part of the program.
* **Member exclusive offers section**
  * A mixture of content and reward tiles show users offers available within the program. Audience criteria are used to show users tiles which are relevant to their participation state.&#x20;

{% columns %}
{% column width="66.66666666666666%" %}

<figure><img src="/files/Uz4vZrFlAuA3S6JkPjsn" alt=""><figcaption><p>Desktop</p></figcaption></figure>

{% endcolumn %}

{% column width="33.33333333333334%" %}

<figure><img src="/files/PeQTHrN4pJf2Kpf9K3my" alt=""><figcaption><p>Mobile</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

### Ravensburger microsite

In the below screenshot, taken from the Ravensburger Club loyalty program, Tiles have been used to highlight ways users can earn extra points and show rewards avaiable for redemption (as Banner tiles).&#x20;

Ravensburger Club, being an international program, also made extensive use of the localization support to show Tiles in a variety of languages.

<figure><img src="/files/wGKcbRHfTnVGA8eKEWaO" alt=""><figcaption></figcaption></figure>

### Evry microsite

In the below screenshot, taken from the Evry rewards program, Tiles have been used to highlight gamified ways users can interact with the program as well as rewards available.

<figure><img src="/files/QPfibaYtQj2tzr1mhlD2" alt=""><figcaption></figcaption></figure>


---

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