Link Search Menu Expand Document

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