A good member portal is essential to make your loyalty program more appealing and memorable. After all, it is the core representation of your program. So let’s take a look at how you can use the editor to brand your member portal👇🏼
In this article:
- Available widgets
- Adding a text
- Adding an image
- Style your member portal
- Multi-language support
- Consider gamification
In Qualifio Loyalty, the Editor allows you to build a customised member experience for your loyalty program. The member portal, on the other hand, is the landing page that you will embed or publish on your website and where your members will interact with your loyalty program.
Throughout this article, we’ll cover a lot of things, so in order to help you visualise what a member portal looks like, here is an example of a customised page:
The Editor 🎨
The Editor section is where you can customise your portal’s general layout and also make specific changes. This includes the way content blocks (which we call widgets) are organised within your portal, as well as descriptions and titles for each of them.
Adding widgets to your member portal
To get started building your member portal, follow the instructions below:
- Click on the tab Editor.
- Drag and drop a widget into the editor.
It’s that easy! With drag-and-drop capabilities, our editor module empowers every marketer regardless of their development skills 🎉🎊🥳
When you select a widget, on the left, you’ll see all content and design options available to you.
Removing widgets from your member portal
To remove a widget at any time, just click the trash icon that appears when you move the mouse over the block:
When you’re ready, you’ll want to publish the changes on the portal page. Click Save then Publish in the top-right corner of your editor.
Let’s take a little look at each of the available widgets.
This is the widget that displays the user profile of the member.
Customisation options include: the member’s picture, name and current level; the name format and the main currency.
A widget that shows off your top members with the most loyalty points (lifetime total).
A level/tier indicator that displays the current level and possibly the next level of the member in the program.
Widget Reward catalogue
A widget that allows members to view and redeem program rewards.
Widget Reward history
This is where your members can view a chronologically-sorted list of their past rewards – whether the redemption was completed or the code is still unused. Once a member selects a reward from the catalogue and receives their promo code, this code will be displayed on the widget so that they can use the discount later on.
Widget Transaction history
A widget that allows members to view all the point-earning and -burning activities they have completed throughout the program.
📋 Note: There is no limit to the number of rewards or transactions that can be shown on the widget.
The widget Currency is basically a points indicator. Here, members can find their current balance, their lifetime total, and possibly an expiry date.
The currency information is displayed in accordance with the currency chosen within the widget options. Learn more about managing loyalty currencies.
Widget Social media
Allows members to connect their social accounts to the loyalty program.
A widget that displays the unique referral link or code of the member.
It allows the members to invite their friends and family in order to earn points.
📝 Pro tip: Customise the text of your widget to highlight the earnings members would get if they referred friends.
Display of the referral link or code is according to the Portal view setting for the widget in the editor:
The HTML widget allows you to place your own HTML content directly into the portal. Inside the widget, you can embed HTML (text and images) and CSS, but no JS scripts.
📋 Note: By default, the content will match your portal styles as set under "General design". Use CSS to override to define more specific styles.
Widget RSS feed
Embed custom RSS feeds to your portal to create a news hub or provide a curated mix of entertaining content to your members. All you need to do is generate a feed from any website and simply add the feed URL to display it on your loyalty page.
📝 Pro tip: You can adapt the widget display by inserting custom CSS.
Adding a text
First, you’ll go to the sidebar and drag the "Text" widget into your editor.
By using the widget’s toolbar, you can add rich text and links.
Customising font styles 🦄
Note: You can either use a font that is part of the Google set or add a custom font.
- Go to General design >> Text.
- Select a font picker and click Add custom font.
- Name your font.
- If you’re looking to use a font that is part of the Google set, define the HTML <link> tag and the CSS @import rule of the font.
- Otherwise, click Custom font. We support TTF, OTF and WOFF formats.
- Click Add font.
- The list of fonts is automatically updated.
Adding an image
First, you’ll go to the sidebar and drag the “Image” widget into your editor.
To upload an image in an existing image widget, double click on the image thumbnail.
💡 Pro tip: Be mindful of the pixel dimensions, using an image that is too large or too small may not look so great!
Style your member portal 🌈
Customising the General design and Widget styles can be a handy way to add a unique look and feel to your Loyalty portal.
In these sections, you’ll be able to edit several visual elements of your member portal. Available customisation options include brand colours, fonts, shapes and more.
Where to access the design options?
You can make all these design changes in the left sidebar. When you click Save then Publish, the preview mode will update with the new changes.
Final tip: Consider gamification ✨
Gamification is a fantastic addition to any loyalty program – not just at the loyalty stage of the customer journey, but in the early and middle stages of the marketing funnel too. Whether it’s to answer questions relevant to your brand or to complete a quiz to earn points, fun and interactive content will boost member engagement and make your program stand out in the crowd.