Configuring Content Items

Content Items, wrappers around Incentive Campaigns, Wallets or Content can have have a different appearances. The Zone configuration has an effect on this and also the input on the actual Campaign Form has an effect.

• Layout Types
• Item Detail Page
• Item Actions
• Campaign Fields
• Text content guidelines

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 click/tap on an Item the default action is that you will be shown the Detail Page. The Detail Page can differ depending on the 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”: 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. To create the discount label enter text in the “Label” field of the Campaign Form.
  

• 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/monetary/competitions): 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 has a field that can be used to express a navigation intent. This field (Campaign field image_link) can be found in the Campaign Edit Form in Spaaza Console under “Other promotional settings”. The following intents can be configured:

• Opening an internal detail page
• Opening an external website or hosted PDF
• Opening an internal page

Action: opening the Detail Page

The Detail Page shows the Item’s Card Layout Type on top, with additional information below it. This information comes from the “Details” field in the Campaign Edit Form.

Mobile App

When no image_link is configured, clicking an Item opens its Detail Page automatically.

Embed Elements

There is no automatic detail page navigation. Clicking an Item emits a content:select event. Your host application decides whether to show the detail page. See the Navigation Contract in the Embed Elements documentation for details.

Action: opening External Website / Hosted PDF

You can configure an Item to point to an external website or a hosted PDF (for instance, an advertising brochure).

The Console setup differs depending on the Item type.

For Campaign-Type/Incentive-Type Items:

• In “Other promotional settings”, enter the URL: https://example.com
• Save your Campaign.

For Content-Type Items: In “Other promotional settings” of the Campaign Form:

• Action: “show web page”
• URL: https://example.com
• Target: select “No action”
• Save your Campaign.

How the external link opens depends on the channel:

Mobile App

External links open in an embedded browser view within the app.

Embed Elements

External links are emitted via the content:select event. Your host application decides how to handle them (open in new tab, iframe overlay, etc.). See the Navigation Contract in the Embed Elements documentation for how image_link values are interpreted.

Action: Navigate to internal page (grouping content)

You can configure an Item to point to any page you have configured in the content management system.

Mobile App

For Campaign-Type/Incentive-Type Items:

• In “Other promotional settings”, enter this URL: https://spaaza.com/browser?section=rewards&target=embeded&url=https://page-name.com
• Replace page-name with your actual page ID. You can find the page ID by clicking the three dots (“…”) while your page is selected.
• Save your Campaign.

For Content-Type Items: In “Other promotional settings” of the Campaign Form:

• Action: “show web page”
• URL: https://page-name.com
• Target: select “embed on app section”
• App select: select “rewards” (independent from which screen you want it to show on)
• Replace page-name with your actual page ID.
• Save your Campaign.

Embed Elements

For Campaign-Type/Incentive-Type Items:

• In “Other promotional settings”, enter: ?name=page-name
• Replace page-name with your actual page ID. You can find the page ID by clicking the three dots (“…”) while your page is selected.
• Save your Campaign.

For Content-Type Items: In “Other promotional settings” of the Campaign Form:

• Action: “show web page”
• URL: ?name=page-name
• Target: select “No action”
• Replace page-name with your actual page ID.
• Save your Campaign.

For more details on how the controller interprets these values, see the Navigation Contract.

Action: navigate to internal Page:

Campaign fields

The following Campaign fields are relevant for configuring content Zones & Items and will affect if and how they are displayed:

• 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.
• Enable campaign: Only active campaigns will be visible to end users. In the content management system campaigns that are NOT “active” are visible.
• Description: Fills the description of the Item. The number of max lines supported can vary depending on Campaign and Layout Type.
• Subtitle (Label): Used for campaigns that support the display of 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 add “markdown” to it yourself). You can also add inline text links to external websites or hosted pdf’s.
• Audience: Campaigns can be targeted to a user segment. Only users within the segment will see the Campaign. When a segment is selected, the option “Promote this campaign to customers outside this segment” becomes available. Enabling this will make the Campaign visible to all users, but the effect of the incentive will be de-activated for users outside the target segment.
• 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. Depending on the voucher type, the value may be automatically prepended to this title. See the “Incentive issued” field below.
• 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. You can style this content by using the editor (or you can add “markdown” to it yourself). You can also add inline text links to external websites or hosted pdf’s.
• Incentive issued: For “Basket Voucher” type vouchers, the value and its symbol will be automatically prepended to the Voucher title (e.g. “€5” becomes “€5 fruits discount”). For “Percentage” type vouchers nothing is prepended automatically. You would include the full label yourself (e.g. “50% discount” or “Free”).
• Image: Displayed when Layout Type Tile, Layout Type Tile Detailed are selected. It is also displayed on the Detail Page “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. You can also configure a default voucher image on project level. For this, read the Styling Configuration section on the Managing Content page.
• 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 through a button. Leaving it unclaimed allows the user the flexibility to decide on what purchase they want to use the 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. Any general styling configuration will be overridden by these more selective Campaign Styling Configurations.
  • Background Color: This is the color that will be used as the background for any “Card” Layout Type Item if no image and/or background image has been set in the Campaign/Voucher edit form.
  • Primary Action Background Color: This is the color of the button or the label that some Content Items have (depending on the Campaign Type).
  • Text color: when set, this will change the text color of any content that appears on “Card” and “Banner” Layout Type Items.
  • Primary Action Text Color: when set, this will change the text color of the button or the labels.
  Mobile App

  The text colors are limited to either BLACK or WHITE. Any value entered will evaluate to either black or white dependent on the mix of brightness of the color chosen.

• 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. If no specific stores are assigned, the Campaign will be visible to users regardless of their selected store.
• Other promotional settings: This section contains a field that can be used to express a navigation intent when a user clicks an Item. For more information visit the Item actions section.
  

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 create different limitation based on the amount of space available for text content.
Some texts will scale up until a certain point when you put a lot of text content. 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). For the best validation, try out the campaign you are running in the staging Spaaza Console environment.