Member Card Element
Overview
An example Member Card Element
The Member Card Element provides a digital loyalty card, with content personalised to the authenticated user. It is primarily intended to be used on a mobile device and for use in physical store and locations to link a customers profile to a transaction.
To include the Member Card 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-member-card.js"></script>
- Add the Environment tag to the contents of the page (below the script tags). Include the Member Card within the Environment tag
<spaaza-environment config="your_config_goes_here">
<spaaza-member-card
cardimage="https://example.com/image"
backcolor="rgb(144,28,53)"
textcolor="white"
type="block"
width="full">
</spaaza-member-card>
<!-- other Spaaza Elements and HTML goes here -->
</spaaza-environment>
Element Properties
The following properties can be passed to the Member Card.
Property | Description |
---|---|
cardimage | The URL of an image to show as an icon on the digital card. The image must be avaible on a publicly available address and should be smaller than 100 kilobytes. |
cardbackcolor | The background color of the card. |
textcolor | The color of the text on the card. |
type | The appearance of the card. Supported values are: “block”: the card is displayed with square corners “flat”: the card is displayed with rounded corners “raised”: the card is displayed with rounded corners and with a box shadow. |
width | The width of the card. Supported values are: “full”: the card will take up the full value of it’s container “constrained”: the card will have a maximum width of 350px |