Configuring Content Items
Using the app content management tools as well as Spaaza Campaigns, you can configure how you want individual Items to be displayed in the app.
Layout Types
Content Items support a variety of Layout Types, which are defined by the Zone in which the Item is placed. This means every Item in a Zone will have the same Layout Type. Content Items are connected to Campaigns and every Campaign supports all Layout Types.
The screenshot below shows the different Layout Types for a single example Campaign.
Card: The Card Layout Type will always display all elements for the specific certain Campaign Type. In the first screenshot below, the top Item is in the card layout.
Banner: With the Banner Layout Type, only the title is displayed on the bottom left with a background image (if present). This is visible in the second Item in the first screenshot image below.
Tile Detailed: An image on the left with title and description on the right. This is great for more product-related content. Depending on the Campaign additional elements may also be shown. This Layout Type is visible in the third Item in the first screenshot image below.
Tile: An image above with title and description below and also great for more product-related content. There is not much Vertical space so only limited additional elements will be visible, depending on the Campaign Type. This is visible in the last Items on the second image below.
Layout Types examples:
Orientations
Together with the Layout Type the Orientation will help you create a great user experience when it comes to displaying your content. Usually Horizontal will put all Items in a slider and Vertical will put them in a list. When the Layout Type is Tile and the Orientation is Vertical the Tiles will display in a grid.
Orientation Type examples:
Item Detail Page
When you tap on an Item the default action is that you will be shown the Detail Page. The Detail Page can differ depending on teh Campaign Type:
- Default: By default, the Detail Page of any Campaign Type displays the Campaign’s Card layout at the top, followed by additional text below. This text is sourced from the “Details” field from a Campaign. And for Vouchers by the “Voucher notes” field on the Campaign.
- Campaign Type “Personal Pricing Discounts (member pricing)”: Campaigns of the “Personal Pricing Discounts” type are displayed in a large Tile layout. They include an image, title, and description, followed by additional elements and content from the “Details” field.
- Banner Layout Type: The Detail Page will have the Banner Layout Type and the top and the content from the “Details” field below it.
- Wallet Campaigns (points/competitions/etc): Wallet Campaigns will have the Campaign displayed as a Card Layout Type on top, then below the content of the “Details” field and below that information about the history of the Wallet balance for that customer.
Item actions
Each Item within a Zone can have an action attached to it. By default, clicking on an Item opens it’s Detail Page but 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.
- Action: Opening the Detail Page (default)
- Action: Opening an external website / hosted PDF
- Action: Navigate to internal Page with Zones and Campaign Items
Action: opening the Detail Page (default)
The Item’s Card Layout Type will be displayed on top of the Detail Page, with space for additional information under it. This detailed information can be added or modified by updating the “Details” field in the Campaign Edit Form for the corresponding Campaign.
For a thorough overview of what content will appear on an Item dependent on the Layout Type, Orientation, and Campaign Type you have used visit How Items look
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. Campaign fields
Action: navigate to internal Page with Zones and Campaign Items
You will be able to create any Page and fill it with Campaigns the Home, Rewards and Deals Page. Then you can link to these Pages configured on a Campaign itself. This feature will be available shortly.
Action: navigate to internal Page:
Campaign fields
The following Campaign fields are relevant for configuring content Zones & Items and will affect how they will display in the app:
- Title: This will be displayed as the title of the Item. The number of max lines supported can vary depending on Campaign and Layout Type.
- Description: Fills the description of the Item. The number of max lines supported can vary depending on Campaign and Layout Type.
- Subtitle: Used for Campaigns that require a discount label; can be used for Campaigns in the Campaign Type group of “Personal Pricing Discounts”. Keep this line as short as possible for instance: “£1,- discount”.
- Details: Provide additional information about the Campaign, focusing on more long-form content. This is displayed on an Item’s Detail Page.
You can style this content by using the editor (or you can added “markdown” to it yourself). - Voucher title: This is the title of the Voucher that is issued by the Campaign. The number of max lines supported can vary depending on Campaign and Layout Type
- Voucher description: This is the description of the Voucher that is issued by the Campaign. The number of max lines supported can vary depending on Campaign and Layout Type
- Voucher notes (Details): Provide additional information about the Campaign, focusing on more long-form content. This is displayed on an Item’s Detail Page. Similar field to the “Details” field for the Campaign
- Incentive issued: When choosing a “Percentage Voucher” or “Monetary Voucher” the value and its symbol will be prepended to the title of the Voucher. For instance entering “50%” will for an Voucher that is titled “Dish fruits discount” will be “50% off fruits” inside of the app. For a monetary example: “€5” will become “€5 off fruits discount.
There is one exception ot this rule. When a discount of 100% is given nothing will be prepended to the Voucher title. This way you are able to to decide when inside of the title you will place the word “Free”. For example: “Free fruits” or “Fruits for free”. - Image: Displayed when Layout Type Tile, Layout Type Tile Detailed are selected. Or displayed on the Detail Page on a Detail Page of “Personal Pricing Discounts” Campaign Type
- Background image: Used as the background image for Card or Banner Layout Type Items.
- Voucher image: Used as the background image for the Voucher of the specific Campaign.
- Days to expiry: Days before a Voucher expires, visible as expiration date on a Voucher Card.
- Claimed: Determines if Vouchers are activated automatically upon creation or require manual activation by the user. Leaving it unclaimed allows the user the flexibility for them to decide when they want to use a Voucher.
- No limit on the number of incentives issued per person: A message will be displayed on any type of Campaign indicating the amount of times the issued rewards can be redeemed.
- Colors: In this section you can change styling parameter for the Campaign Items. Currently you are limited in using: Background Color and Primary Action Background Color.
- Background color: Fallback color, this is the color that will be set as background of a Card if no image and/or background image has been set in the Campaign/voucher.
- Primary Action Background Color: 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.
- Assigned stores: Determines which stores the Campaign will run in. Campaign Items in Zones will only be displayed to a user if the user has selected a store that is assigned to the Campaign inside their app. If no specific stores are assigned, the Campaign will be visible to users regardless of their selected store in the app.
- Other promotional settings - URL: These allow you to link tapping an Item to navigate to a certain resource. This resource could be external, such as your company website or a brochure of current deals (PDF). In the near future you will also be able to configure links that route internal Pages that can be create by you through console.
You can edit a specific Campaign through the “Campaigns” tab in Console by clicking the three dots (“…”) and selecting “Edit” from the dropdown. You can also access the Campaign edit form through the Campaign content screen in the “Content” tab. Click the three dots (“…”) and click “Edit Campaign”.
Accessing Campaign from Campaign overview:
Accessing Campaign from content management overview:
Text content guidelines
Specific combinations of Layout Types, Campaign Types, and orientations of Zones have different limitations in the amount of space available for text content inside of the app. When the text content is not within those limits the text will be truncated (the “…” dots yous see).
The general rule is to use as few words as possible for titles, descriptions, and subtitles (labels).