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.
In 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. Must be an image that represents your program and your brand (tip: you can put the logo of your programs 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.
Settings and Content
Settings = All the generic settings of the configuration (ex : configuration name, brand color, cover image, language, points name, Mobile Wallets option, etc)
In Loyalty Web Kit > Settings, you can add 3 colors of our 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.
Rewards = All the rewards you have created on the Loyalty rewards tab. Here, you have to customize their display (add an image, edit the name or/and description according to the program language). 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 = The ways in which 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.
Use an icon or a simple illustration. Be careful to have an image that uses dark color if you put a light background behind it and vice versa.
Text = There are 7 text categories: Program introduction, Rewards, Earn points and/or rewards, progress in Tiers, Earned rewards, About & legal notices, Offline mode. Those texts are set by default with a title and a description that can be each customized.
How 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 text on the image, don't forget to replace them with the right translation.
When you duplicate a configuration, only the default texts (which have not been modified by you) will be automatically translated. As a result, any texts you may have modified in the current configuration will have to be re-translated.
- 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's 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's the same as with rewards. Anything you change in the configuration is an override and does not affect your program settings.
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).
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.