Editor: How to customise & brand your member portal

Tabata Vossen -

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:

Overview 👀

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:

Schermafbeelding_2022-07-05_om_10.46.15.png

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.

You don’t need to worry about responsive design – the widgets will automatically adjust to every device and browser 🤏🏼

Adding widgets to your member porta

To get started building your member portal, follow the instructions below:

  1. Click on the tab Editor.
  2. Drag and drop a widget into the editor.

3us4r3tOrU.gif

It’s that easy! With drag-and-drop capabilities, our editor module empowers every marketer regardless of their development skills 🎉🎊🥳

Customising widgets

When you select a widget, on the left, you’ll see all content and design options available to you.

Schermafbeelding_2022-05-23_om_15.55.34.png

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:

ZbOXVWCTLI.gif

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.

Available widgets

Let’s take a little look at each of the available widgets.

Widget Profile

This is the widget that displays the user profile of the member.

Schermafbeelding_2022-07-04_om_17.18.55.png

Customisation options include: the member’s picture, name and current level; the name format and the main currency.

Widget Leaderboard

A widget that shows off your top members with the most loyalty points (lifetime total).

Schermafbeelding_2022-07-05_om_10.02.58.png

💡 Pro tip: Letting each member know how they rank compared to others helps encourage more interactions for loyalty points.

Widget Level

A level/tier indicator that displays the current level and possibly the next level of the member in the program.

Schermafbeelding_2022-07-04_om_17.23.44.png

Widget Reward catalogue

A widget that allows members to view and redeem program rewards.

Schermafbeelding_2022-07-04_om_17.25.04.png

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.

Schermafbeelding_2022-07-04_om_17.28.16.png

Widget Transaction history

A widget that allows members to view all the point-earning and -burning activities they have completed throughout the program.

Schermafbeelding_2022-07-04_om_17.28.25.png

📋 Note: There is no limit to the number of rewards or transactions that can be shown on the widget.

Widget Currency

The widget Currency is basically a points indicator. Here, members can find their current balance, their lifetime total, and possibly an expiry date.

Schermafbeelding_2022-07-04_om_17.20.58.png

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.

Schermafbeelding_2022-07-04_om_17.30.02.png

Widget Referral

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.

Schermafbeelding_2022-07-05_om_10.14.23.png

📝 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:

Schermafbeelding_2022-07-05_om_10.18.16.png

Use the Referral section to define the referral link URL and implement it on the portal.

Widget HTML

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.

YmeahBrdjK.gif

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.

  1. Go to General design >> Text.
  2. Select a font picker and click Add custom font.
    Schermafbeelding_2022-05-23_om_16.06.23.png
  3. Name your font.
  4. 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.
  5. Otherwise, click Custom font. We support TTF, OTF and WOFF formats.
  6. Click Add font.
  7. 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.

add-image.gif

To upload an image in an existing image widget, double click on the image thumbnail.

Schermafbeelding_2022-05-23_om_16.08.24.png

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

Multi-language support

Learn more about how to add or modify translations for the widgets here.

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.

Was this article helpful?

Can’t find the answer you need?

Send us a question and connect with an expert to get personal assistance.

Contact support

Vous ne trouvez pas les réponses que vous cherchez ?

Nous sommes là pour vous aider. Envoyez-nous une demande en direct !

Contacter le support
helpcenter experts