Vouchers Element
Overview
The Vouchers Element shows a list of vouchers that can be redeemed by the user. The user can activate or deactivate vouchers.
Using the Vouchers Element
To include a Vouchers Element on a webpage do the following:
- Add the following script tags at the top of the page
<script type="module" src="https://elements.spaaza.com/elem/spaaza-environment.js"></script>
<script type="module" src="https://elements.spaaza.com/elem/spaaza-vouchers.js"></script>
- Add the Environment tag to the contents of the page (below the script tags). Include the Vouchers Element within the Environment tag.
<spaaza-environment config="your_config_goes_here">
<spaaza-vouchers type="raised"></spaaza-vouchers>
<!-- other Spaaza Elements and HTML goes here -->
</spaaza-environment>
Element Properties
The following properties can be passed to the Vouchers Element.
| Property | Description |
|---|---|
| loading (optional) | By default a single voucher is shown as loading while waiting for a response from the Spaaza API. More can be shown by specifying the required number. To show no loading vouchers set the value to 0. |
| type | The appearance of the voucher. Supported values are: “block”: the voucher is displayed with square corners “flat”: the voucher is displayed with rounded corners “raised”: the voucher is displayed with rounded corners and with a box shadow. |
| width | The width of the voucher. Supported values are: “full”: the voucher will take up the full value of it’s container “constrained”: the voucher will have a maximum width of 350px |