Link Search Menu Expand Document

Member Card Element

Overview


An example Member Card Element
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