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="300px">
    </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.
backimage	The URL of a background image to show on the digital card. The image must be avaible on a publicly available address and should be smaller than 100 kilobytes.
backcolor	The background color of the card.
textcolor	The color of the text on the card.
width	The width of the card. Valid CSS “width” values are supported - for example 100%, 300px etc.
appearance (optional)	Determines the card display style. There are two options: “flat” or “raised”. The default is “raised”.