Content App

0. Introduction

What is a Content Management System?

A content management system (hereafter referred to as CMS) is a tool that enables users to manage content on a website or app without requiring a developer’s assistance. It allows content to be created, edited, and arranged into layouts, making it easier to present effectively.

Spaaza has a CMS built into the Spaaza Console, which powers its white-label loyalty mobile apps. It enables you to organize and display content related to the campaigns you are running, structured into pages, sections, and items in any way that suits your needs. It gives you full control over both what is displayed—such as a stamp card, wallets, recipes, or vouchers—and how it is displayed, for instance like cards, tiles, or banners that can be arranged in a list, grid, or slider. For example, you could create a page with a slider to highlight all available stamp card campaigns or a grid of the latest deals with filtering options.

These layouts can be fully customized, offering flexibility in both the appearance and structure of your app’s content. Additionally, you can target campaigns to specific stores, ensuring personalized and relevant content for users. All of it enables you to tailor the app to meet your campaign goals while maintaining alignment with your brand.

The Spaaza white-label loyalty app is available for iOS and Android. Besides the mentioned CMS integration, it provides core functionality for loyalty programs, including a virtual membership card, and earning and redeeming rewards. It also offers features such as store-specific campaigns, transaction history, store details like opening hours and locations, push notifications, and integration with Apple and Google Wallet.

1. Inside Spaaza Console Content Management System

In this chapter, we dive into the core concepts of the Spaaza Console’s CMS and how it integrates with the app’s functionalities. The focus is on understanding how the CMS works within the Spaaza Console, enabling you to manage and customize content effectively.

Pages

Pages are the primary building blocks of the app, serving as the framework for organizing and displaying content. You can customize pages by adding zones, which are flexible sections that can display items. The main pages are accessible through the main navigation menu: home, rewards, and deals. Currently, the names of these pages are predefined and cannot be changed.[^1]

Zones

Zones are sections added to a page, acting as containers for items. Each zone can be customized to determine how its items are displayed. Pages can include multiple zones, which can be freely added, removed, named, and ordered to fit your needs.

Each zone has four configurable parameters:

• Name: Assign a name to the zone, or leave it blank.
• Layout Type: Defines how items within the zone are displayed. Options include: card, banner, tile, or horizontal tile.
• Orientation: Determines the arrangement of items within the zone. Options are vertical or horizontal. Combined with the layout type, this defines whether items are shown in a list, horizontal list, or grid.

• Assignment Type: Specifies how content is added to the zone. Choose between manually adding content or automatically populating it using selected filters.

  • Manual: Select campaigns manually from the campaign overview list.
  • Filtered: Automatically add campaigns based on a combination of tags and types of available campaigns.[^2]

You can reorder zones on a page by dragging and dropping them in the page layout preview.

Items

Zones are populated with items. Currently, items can be of two types: campaigns or content.¹ You can add items to a zone or remove existing ones, giving you full control over the content displayed in each zone.

• Campaign items: These are the standard campaigns you are already familiar with in the Spaaza Console. You can find the overview of them at the “Campaigns” tab and can edit them in the campaign edit screen.
• Content items: These are configured in a similar way to campaigns through a campaign form edit screen. They have the same visual appearance options but do not perform the same “effect” as campaigns. They can be used to display additional information, such as recipes, blogs, or announcements. They are also ideal for linking to an external website or hosted PDF file.

Additionally, you can reorder items within zones by dragging and dropping them in the zone content preview.

[Attachment 1: Campaign Item Display Overview]

Example of Use:

You can configure the campaigns you are running and manage the content displayed within the app through the “Content” tab in the main navigation.

Steps to Configure Content in the App:

1. Select the page you want to configure from the dropdown menu.
2. Click the “Add zone” button to add a zone to the selected page.
3. Name the zone using the “Name” input field (or leave it blank).
4. Configure the zone to your liking by selecting its layout style, orientation, and assignment type from the dropdown options (e.g., Layout style: card, Orientation: horizontal, Assignment type: manual).
5. Click the “+ Add item to zone” button.
6. In the content campaign overview (link to section), select the campaigns you wish to add using the checkboxes.
7. Click the “Add selected campaigns” button. A list of all the campaigns that are configured will appear.
8. The selected campaign(s) will appear in the zone content preview (link to section) and the full app preview (link to section).
9. If satisfied with the configuration, click “Save changes”. If not, click “Clear changes” to discard edits.

Insert image here

Campaign Edit Form (Spaaza Console Screen)

Although this is not a guide for Console’s functionality to configure campaigns, some screens need to be understood to effectively use the CMS.

You can access the campaign edit form in the Spaaza Console in several ways.*

The following fields are of interest regarding setting up the campaign to display in the app:

• Title: This will be displayed as the title of the item.²
• Description: Fills the description of the item.
• Subtitle: Used for campaigns that require a discount label; can be used for campaigns in the campaign type group of “Personal Pricing” (see Attachment 3: Spaaza Campaign Overview).
• Notes: Provide additional information about the campaign, focusing on more long-form content. This is displayed on an item’s detail page.
• Image: Displayed in layout types tile, tile detailed, and on the details page of “Personal Pricing” campaign group campaigns.
• Background image: Used as the background container for card or banner layout type items.
• Assigned stores: Determines which stores the campaign will run in. Campaign items in zones will only be displayed if the user has selected a store that is assigned to the campaign. If no specific stores are assigned, the campaign will be visible to users regardless of their selected store.
• Other promotional settings: These allow you to link to external content, such as a website or a hosted PDF file instead of opening a detail page. To configure this, select “Show web page” in the Action field, enter the full URL of the content you want to link to, and set the Target field to “No action.” (link to relevant part in the app chapter)

[Attachment 2: Spaaza White-label App Asset Design Guide]

Insert image here

You can open it from the “Campaigns” tab by clicking the three dots (…) and selecting “Edit” from the dropdown. Alternatively, access it from the zone content preview by clicking the three dots (…) and selecting “Edit Campaign”. Lastly, it can also be accessed from the content campaign overview when adding an item to a zone by clicking the three dots (…) and selecting “Edit Campaign”.

Content Campaign Overview (Spaaza Console Screen)

The campaign overview provides a familiar interface, similar to the “Campaigns” tab overview in the Spaaza Console.

It allows you to:

• Filter campaigns by status, name, barcode, tags, incentive, and type (campaign or content).
• Add multiple items (campaigns or content items) to a zone at once (one is also possible).
• Add draft campaigns or campaigns scheduled to go live later.
• Clear your selection with “Clear all.”
• Managing Unsaved Changes: When you add or modify zones and items, “x unsaved change(s)” will appear next to the “Save changes” button. Unsaved changes will persist within the current session, even if you navigate to other tabs such as “Campaigns” or elsewhere on the site. However, do not forget to save them before you close the site.

Insert image here

The Full App Preview (Part of the Content Campaign Overview Spaaza Console Screen)

A preview that approaches a visually accurate representation of zones and zone items, as they would appear with the configuration in the app. When the “Admin view” is toggled off, you can have a view where you only see this.

Insert image here

The Zone Content Preview (Part of the Content Campaign Overview Spaaza Console Screen)

List of zone items and an estimate of how an individual item will look. Also provides some relevant information about the added item (campaign) like Audience, Timing, and Stores assigned. You can also see if a campaign is scheduled, draft, or active.

Insert image here

2. Inside the Spaaza White-label Mobile App

In this chapter, we explore how the content configured in the Spaaza Console is presented within the app. All things configured in the Spaaza Console content section will reflect in the app immediately after refreshing the app.

[Attachment 1: Campaign Item Display Overview]

“On Tap” Action of Items

Each item within a zone can have an action attached to it. By default, clicking on a campaign opens its detail page. However, items can also be configured to perform other actions, such as opening an external website in an embedded view within the app or displaying a hosted PDF file. To configure these alternative actions for a campaign item, refer to the Campaign Edit Form section. Currently, the available actions are: opening a detail page or opening an external URL/hosted PDF.³

• Action: Opening the Detail Page

  Every item in a zone is associated with a detail page. By default, the detail page displays the item’s “card” layout type at the top, with space for additional information below. This detailed information can be added or modified by updating the Notes field in the Campaign Edit Form for the corresponding campaign.

  Besides this default display of certain campaigns, we add campaign-specific information or ways to interact with the campaign on the detail page.

  • Campaign type basket: Campaigns are displayed in large tile format on top (reference campaign type matrix). Insert image

  • Banner layout type: Detail page with banner on top. Insert image

  • Campaign type wallet (points): Wallet ledger will be shown with an overview of transactions.

  • Campaign type wallet (monetary): All UI elements are visible here that make the wallet interactive; wallet ledger will be shown with an overview of transactions.

  • Default: All other campaign types or display type combinations are displayed in card layout type. Insert image

• Action: Opening External Website / Hosted PDF

  The app can open any website inside of a view within the app. It also supports displaying PDFs that are hosted on websites, for instance, for advertising brochures.

  (Link to relevant part in the console chapter)

Other: Display of Vouchers

A lot of campaigns issue vouchers that can be used for discounts on checkout baskets or specific products. Currently, the vouchers of a user are placed on top of the Rewards screen.⁴ Currently, vouchers are always displayed as a horizontal list of cards.⁵

[Attachment 1: Campaign Item Display Overview]

Other: Tag Filters on Deals Page

As previously mentioned, there are certain special elements. One of them is the tags that you see on the Deals page. These can be used as if the Deals page content can be filtered. In reality, these can be seen as separate subpages to the Deals page. Currently, changing these pages requires a new release of the app.⁶

Insert image here

Other: Pages with Set Content

Although you are free to add content to a page, some elements are static and cannot be removed. Currently, examples include the voucher list on the Rewards page and filter tabs on the Deals page.⁷

On the Deals page, there are tabs that can be used to ‘filter’ the main content of the page. There are subpages such as “deals-food” or “deals-drinks”.

Other: Base or Loyalty Campaign Configuration

In the Spaaza Console’s “Settings” tab, there are pages to configure some general information inside of the app. Currently, you are limited to editing the “Default campaign content settings” and then edit the following colors: Text colour, Background colour, and Primary action background colour.⁸

These will map to the following:

• Text colour: Changes color of text for all layout types except for layout types banner and card (these have white text).
• Background colour: This is the color that will be seen if no image and/or background image has been set in the campaign.
• Primary action background colour: This is the color of the button and/or other campaign type-specific element of an item, such as the background of the button of an exchange campaign.

To get you set up using the white-label app, the following other information regarding styling will need to be provided and configured manually:

• Primary app color (Hex)
• Fonts (Hex)⁹

Limitations on Campaign Display and Items in the App

Some campaign types may not yet have all their required visual elements fully implemented in the app. Please note that they are always fully supported in the backend. When the campaign type does not have the required visual elements fully implemented, the app defaults to a standard UI style for those campaigns.

For example, a campaign might require a progress bar to visually represent points collected within a wallet. If this feature is not yet implemented in the app’s UI, the campaign will instead display the default information without the progress bar.

Refer to the matrix below for an overview of layout types and campaign types that require additional development to fully optimize their visual representation in the app.

[Attachment 3: Campaign Support Inside of the White-label App]

3. How to Get the App Set Up

Besides information related to the CMS functionality of the mobile app, there is a lot more other information that needs to be provided.

• Features requirements (please see [Attachment 4: Full App Feature List])
• Whitelisting email domain: Please reference the email domain that we can use to send the password reset email from.
• Hosting identification file for password reset link (deep links) in the app: You will be contacted to provide this.
• Link to Terms and Conditions as hosted page on your website.
• Link to FAQ as hosted page on your website (if you want it).
• Link to Website as hosted page on your website (if you want it).
• …

4. Limitations & Future Work

• Currently, you will be able to create pages that can be accessed from anywhere in the app.¹⁰
• Currently, you will be able to change the names of the pages you can access through the main menu.¹¹
• Currently, you will be able to define where on what main menu page and between what zones the vouchers will be displayed.¹²
• Currently, you will be able to add other items to a zone than campaigns, such as…¹³
• Currently, you will be able to place elements like voucher lists or filter tabs dynamically through the CMS, same as you add zones.¹⁴
• Currently, you will be able to display vouchers any way you like with the zone configuration.¹⁵
• Currently, you will be able to make an item within a zone to link anywhere you like within the app. This can be one of the pages accessible on the main navigation tabs but also another page or external website.¹⁶
• Currently, you will be able to configure all campaign styling information including fonts and also voucher information.¹⁷
• Currently: ¹⁸
• Currently: ¹⁹
• Currently, you will be able to have a title set up for the campaign and a different title field for the title that displays on a campaign item in the app.²⁰

Other features yet to come:

• Custom fonts
• Uploading store icons through console for different stores
• …

Currently, zones are the only elements you can add to a page. Zones allow you to define and organize the content structure for your campaigns. (This information might need to be moved to the App information chapter, or it needs to be linked to it somehow.)

5. Attachments

Attachment 1: Campaign Item Display Overview

… overview of all combinations

(Layout type and campaign type or combination):

Default elements: Any campaign item will always have a title, and most of the time a description. This is regardless of layout type or campaign type combination.

Extra elements: Besides that, certain elements will be added based on the campaign type. For instance, a stamp count for item count campaigns or a button for an exchange campaign. Insert image

Attachment 2: Spaaza White-label App Asset Design Guide v1.0

0. Initial Onboarding Assets Needs

• Client logo: Square and rectangular long (resolution 900x1800) (ratio 1:2) (main navigation).
• Onboarding images: Four onboarding images that will be displayed at the landing screen of non-logged-in app (resolution 900x1800) (ratio 1:2) (landing page).
• Splash screen icons (initial loading screen app):
  • Android: 960 × 960 transparent PNG with 691x691 circular logo centered inside of the full image.
  • iOS: 960 × 960 transparent PNG with 624x624 circular logo centered inside of the full image.
• Store logo icon(s): At least one SVG store icon (detailed specification following).

1. Setting Up Your Figma Project (CMS Content)

Duplicate the shared Figma template to your own Figma project.

Tip Configuring the Project:

• Easily update design assets (e.g., replace images or shift the layout of all assets at once easily).
• Make it possible to export at higher resolutions easily (if resolution requirements might change later on, it should be easy to export all assets again but with higher or lower resolutions).
• Maintain a catalogue of all (used) campaign assets.

2. Steps to Create and Export Campaign Assets

• Copy the required component.
• Replace the image(s) as needed.
• Change the background color if required.
• Export the asset at 3x PNG resolution.
• Compress the exported PNGs (see details below).
• Upload the compressed image to a campaign in the Spaaza Console.

Asset Types

• Background Image
  • Dimensions: 900x450px (2:1 ratio)
  • Export: 3x resolution from shared Figma
  • Rule:
    • For background images with darker tints since the text over it is white.
    • For background images requiring text content, maintain a 70/30:
      • 70% space for text.
      • 30% space for the image.
• Image
  • Dimensions: 900x900px (1:1 ratio)
  • Export: 3x resolution from shared Figma
  • Rule: With white background.
• Stamp Card Image
  • Format: 1:1 ratio SVG
  • Rule: Circular image.

Compressing PNGs

To optimize page loading times, compress PNG assets exported from Figma. This can reduce file size by up to 70%. (We plan to integrate automatic compression into our process to streamline this step).

Suggested Tool:

• TinyPNG: €40/year subscription
  • https://tinypng.com

Additional Guidelines

• No Border Radius: None of the exported assets should have a border radius.
• Transparent Backgrounds: If exporting PNGs with transparent backgrounds, the background color will be determined by the base campaign in the Spaaza Console.
• Playful Designs: While images can be playful, ensure adherence to the 70/30 rule when displaying large amounts of text content.

Image

Background image

Progress image (stamp)

Some more inspiration

Attachment 3: Spaaza Campaign Overview and Supported Campaigns in White-label App

Overview:

Fully Supported Campaigns

• Purchases and Frequency
  • Item Count
  • Matching Item
• Content
  • Content
• Profile and Interactions
  • Login
  • Signup
  • Birthday
• Wallet Contribution
  • Issue Wallet Value
• Personal Pricing
  • Simple Basket Discount
  • Fixed Monetary Discount
  • Free Product Basket Discount
  • Multibuy Bundle Discount (fixed price)
  • Bundle Discount (fixed price)
  • Bundle Discount (monetary discount)
  • Per Unit Discount

Requires Additional UI Elements

• Purchases and Frequency
  • Spend Target
  • Purchase Number
  • Lucky Shopper
  • Lucky Free Item
  • Lucky Grand Prize
  • Lucky Free Basket
• Profile and Interactions
  • Profile Completion
  • Video
  • Subscription
• Wallet Contribution
  • Spend and Earn
  • Exchange
• Referrals
  • Social Sell
  • Referral
• Games
  • Quiz
  • Tiles
  • Memory

[Overview layout types and campaign type combinations]

Attachment 4: Full App Feature List

Store icons type (A/B): The store icons are used throughout the app and can be used as either one of these:

A. Stores that are joining the program and have not joined yet, so two different icons.

B. Stores that are of a different type show a different icon in the app, so a multitude of icons.²¹

Registration with a member card number (yes/no): Do you already have users that have a member card number? It can be arranged that users can claim their account using their member card number only.²²

Addition of member card number: When the user already has made an account, they might want to register a member card they have.²³

Receipts teaser (yes/no): Do you want the app to have a small section on the home page reserved for the latest transactions?²⁴

Required or non-required fields: It needs to be specified if fields need to be present, required, or optional. This holds true for the following fields: date of birth, gender, phone number, receiving deals through SMS, receiving direct mail, or household extension.²⁵

Vouchers auto claim: By default, the user has to activate a voucher; this way, they have control over what redemptions are applied on checkout. It is possible to make all received vouchers active by default.²⁶

Attachment 5: Terminology

• Page: A screen in the app (e.g., home, rewards, deals).
• Zone: A configurable section on a page where campaign items are displayed.
• Item (campaign): Content added to a zone, typically a campaign.
• Layout style: Card, banner, tile, tile detailed.
• Zone configuration for adding items: Involves selecting assignment type, layout style, and orientation for displaying campaign items in a zone.
• Filtered assignment: Automatically assigns items to zones based on filter criteria, such as matching tags or campaign types.
• Manual assignment: Allows users to manually select which items are added to a zone.
• Orientation: Horizontal, vertical.
• Assignment type: Manual, filtered.
• Arrangement style: List, slider, grid.
• Campaign type: Type of campaign, such as basket or item count.
• Detail page: In-app page showing detailed information about a campaign item (through Notes field of console).
• Subtitle (Spaaza Console field): Text used for basket campaigns, typically as a discount label.
• Tag (Spaaza Console field): Metadata used to filter and organize campaigns.
• Image (Spaaza Console field): Visual asset displayed in tile or tile detailed layout, also appears on the detail page for basket campaigns.
• Notes (Spaaza Console field): Additional text associated with a campaign item, shown on the item’s detail page.
• Background image (Spaaza Console field): Used as the background for card or banner layout items.
• …

Attachment 6: Spaaza White-label App Text Content Design Guide

This guide is set up to make sure that configured campaigns look their best inside of the app.

Certain combinations of layout types, campaign types, and orientations of zones have different limitations in the amount of space available for certain text content.

Here is an overview:

Additional Information

Store Icons Type (A/B): The store icons are used throughout the app and can be used as either one of these:

• A: Stores that are joining the program and have not joined yet, so two different icons.
• B: Stores that are of a different type show a different icon in the app, so a multitude of icons.²¹

Registration with a Member Card Number (Yes/No): Do you already have users that have a member card number? It can be arranged that users can claim their account using their member card number only.²²

Addition of Member Card Number: When the user already has made an account, they might want to register a member card they have.²³

Receipts Teaser (Yes/No): Do you want the app to have a small section on the home page reserved for the latest transactions?²⁴

Required or Non-required Fields: It needs to be specified if fields need to be present, required, or optional. This holds true for the following fields: date of birth, gender, phone number, receiving deals through SMS, receiving direct mail, or household extension.²⁵

Vouchers Auto-claim: By default, the user has to activate a voucher; this way, they have control over what redemptions are applied on checkout. It is possible to make all received vouchers active by default.²⁶

App Configuration Flags:

```json { “store_icons_branded”: false, “points_exchange”: false, “points_exchange_no_earning”: false, “card_login”: false, “dynamic_deals”: false, “store_selector”: true, “wallet_support”: true, “receipts_teaser”: false, “deals_as_pdf”: false, “automatic_opt_in”: true, “native_home_view”: true, “validate_user”: false, “phone_country_field”: true, “password_reset_enabled”: true, “referral_code”: false, “google_places_images”: false, “form_registration_extension_field”: false, “form_registration_gender_field_required”: false, “form_registration_phone_field_required”: false, “home_sliders”: false, “member_number_altering”: true, “marketing_checkbox_sms”: true, “only_onboarding_terms_and_condition”: false, “is_imperial_unit”: true, “vouchers_auto_claim”: false }