Vouchers

Vouchers are incentives that are issued to individual customers by campaigns. Common examples include discount vouchers, free product vouchers, or monetary vouchers. Customers can activate (claim) a voucher, which means it will be applied automatically at checkout. They can also deactivate (unclaim) it to save it for later.

In Embed Elements, vouchers are displayed in a dedicated voucher zone. Voucher content (title, description, image, expiry, and notes) is configured on the issuing campaign in Spaaza Console. See Campaign Fields for all available fields.

Voucher List

Vouchers are displayed in a horizontal slider or vertically. Each voucher is rendered as a card.

Card Elements

Each voucher card displays the following elements:

Layout Constraints

• Vouchers display in a horizontal slider or vertically in a list
• The card has a 2:1 aspect ratio (width is twice the height) at ideal mobile phone screen width. Below and past that width it will scale down proportionally
• On mobile with the horizontal layout, each card takes approximately 90% of the viewport width, with a peek of the next card visible
• On tablet and desktop, cards snap to a fixed 386px width (max 480px)

Voucher States

Interactions

• Clicking the card (outside the button) emits a content:select event with the voucher object. Your application handles the navigation — typically showing the voucher detail page
• Clicking the button triggers voucher-claim or voucher-unclaim, handled automatically by the controller

Empty and Loading States

• When there are no vouchers, the zone displays a “No vouchers yet” message
• While voucher data is loading, skeleton placeholder cards are shown

Voucher Detail Page

When a user navigates to a voucher detail view, the detail page displays the voucher card at the top followed by additional notes below. This is the common format used for campaign detail pages in Spaaza as well.

Structure

1. Hero section — The same voucher card from the list view, rendered at full width. The activate/deactivate button is visible and functional.
2. Notes section — The content of the “Voucher notes” field, which can be edited through the Campaign form in Console CMS. This field supports markdown formatting.

Supported Markdown in Notes

The voucher notes field supports the following markdown formatting. See Voucher notes (Details) in the Content Management documentation for how to edit this field in Console.

• Bold — **text**
• Italic — *text*
• Links — [link text](https://example.com) (inline links to external websites or hosted PDFs)
• Bulleted lists — - item
• Numbered lists — 1. item
• Headings — # Heading, ## Subheading

This is useful for displaying Terms & Conditions, redemption restrictions, or other detailed voucher information that you would want a separate page for.

Initializing the Detail View

Pass a voucherId to show the voucher detail page on initialization:

const controller = await initializeSpaazaElements({
  target: '#spaaza-elements',
  config: { ... },
  voucherId: 456
});

Or pass it through the URL using the voucher_id query parameter:

your-page.html?session_key=KEY&user_id=ID&my_price_app_host=yourapp.spaaza.com&voucher_id=456

Or navigate to it dynamically in a SPA-style navigation by setting the property on the mounted component:

const detailEl = document.getElementById('spaazaContentPageDetail');
detailEl.voucherid = 456;  // controller reactively fetches voucher data

See Navigation Examples for complete patterns.

Configuration

Where Vouchers Appear

Vouchers are not part of the CMS page structure. Configure where they appear using the customZones option:

customZones: {
  voucher: { pages: ['home', 'rewards'], index: 1 }
}

See Custom Zones for the full configuration reference.

Styling

Most of the time, vouchers are issued by Spaaza’s campaigns as rewards. Voucher card styling can be configured at two levels:

1. Per campaign — In the Campaign Edit Form in Console: background color, primary action background color, text color, primary action text color, and voucher image
2. Project-wide defaults — In Console under Settings > Configuration: “Default Campaign Content Settings” and “Default Voucher Settings” (default image fallback)

See Styling Configuration for details.

Font Styling

Just like for any other campaign, the card title and card description font family can be altered through Spaaza Console. Font size can also be adjusted. See Custom Fonts for details.

Voucher-Specific Campaign Fields

Voucher content is configured on the issuing campaign in Spaaza Console. See Campaign Fields for the complete list of fields that affect how a voucher is rendered.

Monetary Voucher Titles

For “Basket Voucher” type vouchers, the value and its currency symbol will be automatically prepended to the Voucher title field. For example, if the voucher title field is set to “off on dish soap from Sparkle” and the voucher value is €0,80, the displayed title becomes “€0,80 off on dish soap from Sparkle”. This is because when customers spend part of a monetary voucher, a new voucher is created for the remaining amount. Since this rest amount is dynamic, it cannot be set as a static voucher title.

For “Percentage” type vouchers nothing is prepended automatically and you would include the full voucher title yourself (e.g. “50% discount” or “Free”).