Link Search Menu Expand Document

Overview

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="https://elements.spaaza.com/elem/spaaza-environment.js"></script>
	<script type="module" src="https://elements.spaaza.com/elem/spaaza-campaign-list.js"></script>
	<script type="module" src="https://elements.spaaza.com/elem/spaaza-member-card.js"></script>
	<script type="module" src="https://elements.spaaza.com/elem/spaaza-vouchers.js"></script>
	<!-- HTML goes here -->
</body>

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-promotions loading="2"  excludetags="webshop"></spaaza-campaign-promotions>

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

Using the Staging (test01) version of Embed Elements

Like Spaaza’s API there is also a staging version of each Embed ELement. To use the staging version of an Embed Element use elements-test01.spaaza.com in instead of elements.spaaza.com in any script tags.

For example:

<body>
	<script type="module" src="https://elements-test01.spaaza.com/elem/spaaza-environment.js"></script>
	<script type="module" src="https://elements-test01.spaaza.com/elem/spaaza-campaign-list.js"></script>
	<script type="module" src="https://elements-test01.spaaza.com/elem/spaaza-member-card.js"></script>
	<script type="module" src="https://elements-test01.spaaza.com/elem/spaaza-vouchers.js"></script>
	<!-- HTML goes here -->
</body>

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">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Elements example</title>
</head>
<body>
	<style>
		body { 
			background: #FFF;
		}
	</style>
	<script type="module" src="https://elements.spaaza.com/elem/spaaza-environment.js"></script>
	<script type="module" src="https://elements.spaaza.com/elem/spaaza-campaign-list.js"></script>
	<script type="module" src="https://elements.spaaza.com/elem/spaaza-member-card.js"></script>
	<script type="module" src="https://elements.spaaza.com/elem/spaaza-vouchers.js"></script>
	<div id="app" style="max-width:1200px;margin:auto">
		<spaaza-environment config="[user_session_details_go_here]">
			<spaaza-member-card 
				cardimage="https://example.com/image" 
				backcolor="rgb(144,28,53)"
				textcolor="white"
				type="block" 
				width="full">
			</spaaza-member-card>
			<h3>Your vouchers</h3>
			<spaaza-vouchers type="raised" ></spaaza-vouchers>
			<h3>Member benefits</h3>
			<spaaza-campaign-promotions loading="2"  excludetags="webshop"></spaaza-campaign-promotions>
			<h3>Webshop-only benefits for members</h3>
			<spaaza-campaign-promotions loading="2" includetags="webshop" ></spaaza-campaign-promotions>
		</spaaza-environment>
	</div>	
</body>
</html>