Skip to main content

Customizing your Loyalty space on your website

Loyalty Web Kit is a packaged product made to make your life easier and makes it quick and easy to create an interface for your loyalty program while letting you personalize your brand assets and display modes on your e-commerce. Customizing your Loyalty Web Kit page is essential as it plays a crucial role in presenting your brand's image to potential and current customers.

We describe below the different assets you can personalize. Note that some options of the Loyalty Web Kit are part of the technical setup such as the display mode, and language redirection. Moreover, the marketing team needs to prepare the assets as soon as they want during the onboarding of their Loyalty project.

Personalizing images

In Loyalty Web Kit > Settings > Rewards > Missions > Tiers, you have many images that you can upload to make your program more attractive and appealing to your customers.

  • Cover Image: recommended dimensions = 846 x 208 px - png. It must be an image that represents your program and your brand (tip: you can put the logo of your program on it).

  • Mobile Wallet Image (only for Mobile Wallets clients): recommended dimensions = 310 x 320 px - png. (Don't hesitate to use the Mobile Wallet screenshot feature)

  • All images for your rewards - recommended dimensions = 176 x 176 px - png. We recommend adding an image to all rewards that will be displayed to the customer, whether the rewards are automatically distributed or redeemable.

  • All images for your missions recommended dimensions = 48 x 48 px - png.

  • All images for your tiers (only for tier programs): recommended dimensions = 164 x 164 px - png.

Personalizing settings and colors

Settings - All the generic settings of the configuration (for example configuration name, brand color, cover image, language, points name, Mobile Wallets option, etc).

In Loyalty Web Kit > Settings, you can add 3 colors of your choice:

  • Color #1 - Must be the primary color of your brand, the color that represents you the most. It will be used for buttons, links, and icons.

  • Color #2 - Must be the secondary color of your brand. It will be used for tags and status highlighting.

  • Text Color #3 - Will be used for all texts (titles, subtitles, paragraphs). We recommend using a dark color.

If you have Mobile Wallets, you can also add an extra color to put on the background. Don't hesitate to check the preview to understand where each color is used.

Personalizing rewards, missions and tiers

Rewards

All the rewards you have created are on the Rewards tab. Here, you have to customize their display (add an image, edit the name or description according to the program language). See the first image.

Displaying the reward in the catalog means that the reward can be redeemed for points if the user wants to have it. The other rewards will be automatically distributed by the rules and will not be displayed in the catalog, but only in the earned rewards.

Missions

How points or rewards can be earned. Each action represents an opportunity to earn points (ex. 1€ = 1 point, 3 orders = 100 points). Missions must match your program's rules and/or attribution campaigns. See the second image.

Tiers (only for tiered programs)

All the tiers you have created on the Loyalty > Tiers tab. You have to customize their display (add images and benefits for each tier and modify their names according to the program language).

Personalizing texts and languages

Texts

There are 7 text categories: Program introduction, Rewards, Earn points and/or rewards, progress in Tiers, Earned rewards, About & legal notices, and Offline mode. Those texts are set by default with a title and a description that can be customized.

How do multi-language programs work?

If you need to use multiple languages to address your entire database, you have to duplicate and translate your initial configuration. (One configuration = One language).

If you have some text on the image, don't forget to replace it with the right translation.

  • If I change the name of a reward in my configuration, will the name change in the Rewards tab?
    No. By default, when you create a configuration, all the rewards you have created in Loyalty > Rewards tab are automatically imported into your configuration with their names. If you change this name, it will not affect the default name.

  • If I change the name of my tiers in my configuration, will the name in the Tiers tab of the program tab change?
    No. It is the same as with rewards. Anything you change in the configuration is an override and does not affect your program settings.

Checking out the preview

The preview helps you customize the Loyalty Web Kit. Nevertheless, it is recommended to test and validate the final display in a real-life situation.