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.

const controller = await initializeSpaazaElements({
  target: '#spaaza-elements',
  config: { ... },
  customZones: {
    membercard: { pages: ['home'], index: 0 },
    voucher: { pages: ['home', 'rewards'], index: 1 }
  }
});

CustomZonesOptions

Property	Type	Description
membercard	CustomZoneConfig	Membercard zone configuration. Omit to not show.
voucher	CustomZoneConfig	Voucher zone configuration. Omit to not show.

CustomZoneConfig

Property	Type	Description
pages	string[]	Which pages to show zone on (e.g., ['home', 'rewards'])
index	number	Position in zones array (0 = top, -1 = end)

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)
• Manage styling
• 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.

Styling & Fonts

What Can Be Styled

Property	Description
Background colors	Default for cards without images
Primary action colors	Buttons and labels
Text colors	Content text (black or white)
Fonts	Primary (body) and secondary (titles)
Default images	Fallback for vouchers/campaigns

Console Configuration

Configure in Spaaza Console > Settings > Configuration.

See Managing Content for details.

Custom Fonts

1. Host font files at HTTPS URL
2. Contact Spaaza to whitelist your domain
3. Add font URL in Console

CSS Custom Properties

Override styling via CSS custom properties on the web components:

spaaza-content-page {
  --textColor: #333;
  --backgroundColor: #f5f5f5;
  --primaryActionBackgroundColor: #007bff;
  --primaryActionTextColor: #ffffff;
  --primaryFontFace: 'Your Font', sans-serif;
  --secondaryFontFace: 'Your Font', sans-serif;
}

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' }