Configuration & API

Custom Zones

Vouchers and member cards are displayed using custom zones. Configure which pages show them and where they appear in the zone order.

Configure via the customZones option. Zones are only injected if explicitly configured. Each zone type accepts an array of per-page entries: every entry is one zone bound to a single page, so different pages can have different arrangements and a single page can host several voucher zones.

const controller = await initializeSpaazaElements({
  target: '#spaaza-elements',
  config: { ... },
  customZones: {
    memberCard: [
      { page: 'home', index: 0 }
    ],
    vouchers: [
      { page: 'home',    index: 1, title: 'Vouchers' },
      { page: 'rewards', index: 0, title: 'Rewards' }
    ]
  }
});

CustomZonesOptions

Property	Type	Description
memberCard	MembercardZoneEntry[]	Membercard zone(s). Omit to not show.
vouchers	VoucherZoneEntry[]	Voucher zone(s). Omit to not show.

VoucherZoneEntry

Property	Type	Description
page	string	Page name this zone renders on.
index	number	Position in that page's zones array (0 = top, -1 = end).
title	string (optional)	Heading shown above the zone. Empty or omitted → no heading.
filter	VoucherFilter (optional)	Stackable frontend filter — see below.

MembercardZoneEntry

Property	Type	Description
page	string	Page name this zone renders on.
index	number	Position in that page's zones array (0 = top, -1 = end).

VoucherFilter

A filter selects which vouchers appear in a zone. Each key is a voucher field and each value is what it must match; all conditions must pass. Use dot notation for nested fields, e.g. regenerated_voucher.voucher_key.

vouchers: [
  // active vouchers (everything that is NOT redeemed)
  { page: 'home', index: 0, title: 'Vouchers',          filter: { voucher_status: { not: 'redeemed' } } },
  // redeemed vouchers (cards render button-less with the redeemed date automatically)
  { page: 'home', index: 1, title: 'Redeemed vouchers', filter: { voucher_status: 'redeemed' } }
]

Matcher form	Matches when
'redeemed' (bare string)	field equals 'redeemed'
{ equals: 'redeemed' }	field equals 'redeemed'
{ not: 'redeemed' }	field is not 'redeemed' (a missing field counts as a match)

• Values are strings only (no arrays or numbers). Use not to express an "active = not redeemed" zone.
• Fields can be flat (voucher_status) or nested (regenerated_voucher.voucher_key).

Content Management

Content is managed in Spaaza Console:

• Pages: Named content screens (home, offers, rewards)
• Zones: Sections within pages (horizontal slider, vertical list, grid)
• Items: Content within zones (campaign cards, voucher tiles, banners)

You can:

• Add/remove pages and zones
• Configure item display (card, card small, tile, banner)
• Set zone layouts (list, slider, grid)
• Test campaigns

See Managing Content for details on pages, zones, and items. See Configuring Items for how Item Actions and the image_link field are configured in Console.

parseImageLink()

The controller provides parseImageLink() to interpret campaign image_link values according to the contract used by Spaaza's controller:

const intent = controller.parseImageLink(campaign.image_link);

image_link	Returns
?campaign_id=123	{ type: 'detail', campaignId: 123 }
?name=offers	{ type: 'page', pageName: 'offers' }
?name=offers&campaign_id=123	{ type: 'detail', campaignId: 123, pageName: 'offers' }
https://example.com	{ type: 'external', url: 'https://example.com' }
Empty/missing	{ type: 'none' }