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

CustomZoneConfig

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, 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

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);