Link Search Menu Expand Document


Spaaza Elements are Web Components that allow developers to easily to construct a dynamic and personalised overview of program benefits and rewards - for example a program rewards page - or to just include a single piece of personalised incentive content where needed - for example a users current points or savings balance in a menu.

Each Spaaza Element is a self contained application that communicates with the Spaaza API and provides interactivity, depending on the context and type of elements.

About the Web Component standard

Web Components are a set of web platform APIs that allow developers to create reusable, encapsulated, and customizable HTML elements for building modern web applications. These components can be used in conjunction with standard HTML and JavaScript, enabling developers to create modular and maintainable code.

How to use Spaaza Elements on a web page

The Elements you want to use on a web page page need to be imported with a script tag (type module) within the body of your page. For example.

<body> <script type="module" src=""></script> <script type="module" src=""></script> <script type="module" src=""></script> <script type="module" src=""></script> ...

In the example above there are four Elements imported. An environment Element, a Campaign List Element, a Digital Member Card Element and a Vouchers Element.

Every Spaaza Element needs to be enclosed within an Environment Element . The page needs pass in a session and authentication details for a user to this Environment Element as well as details about the context. One or more Elements can then be included within the Environment Element tag.

Each Spaaza Element has properties which determines it’s behaviour and appearance. An Element is included like any other HTML tag, for example:

<spaaza-campaign-list loading="2"  excludetags="webshop"></spaaza-campaign-list>

Regular HTML can also be included within the Environment Element and in between other Spaaza Elements.

An example rewards page built using Spaaza Elements

The example below will render the following for a user visiting this page:

  • A digital loyalty card
  • Any available vouchers
  • a list of Spaaza incentive campaigns for members (excluding webshop only campaigns)
  • a list of webshop only Spaaza incentive campaigns
<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Elements example</title>
		body { 
			background: #FFF;
	<script type="module" src=""></script>
	<script type="module" src=""></script>
	<script type="module" src=""></script>
    <script type="module" src=""></script>
	<div id="app" style="max-width:1200px;margin:auto">
		<spaaza-environment config="[user_session_details_go_here]">
            <h3>Your vouchers</h3>
            <spaaza-vouchers type="raised" ></spaaza-vouchers>
            <h3>Member benefits</h3>
            <spaaza-campaign-list loading="2"  excludetags="webshop"></spaaza-campaign-list>
            <h3>Webshop-only benefits for members</h3>
            <spaaza-campaign-list loading="2" includetags="webshop" ></spaaza-campaign-list>