---
title: "Cards"
description: Cards
---

## Overview

Every step of the form flow is considered a card.

Cards are referenced in the `settings.json` file logic flow using the card's name to set the card name add a new card object to the cards property.

{
     "cards": {
          "GIVE_YOUR_CARD_A_NAME": { // The name of the card
               "title": "",
               "subtitle": "",
               "label": "",
               "type": "info",
               "show_in_summary": true
          }
     }
}

### Card Types

There will are eleven available card types at the release of the **Setster Forms** beta. Some of the card types are associated to the Setster appointment booking flow and some are general types.

| General Types | Appointment Types |
| ----------------------- | --------------------------- |
| [Tiles](#tiles) | [Services](#services) |
| [Questions](#questions) | [Staff](#staff) |
| [Info](#info) | [Locations](#location) |
| [Image Map](#image-map) | [Calendar](#calendar) |
| [Finish](#finish) | [Cancel](#cancel) |
| | [Submit Form](#submit-form) |

### Common Properties

All cards have the following properties available:

| Property | Description | Required | Type |
| --------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| title | The main card step title. | N | string |
| subtitle | The card step subtitle. | N | string |
| label | The label for the step when showing the selected answer in the appointment summary page. | N | string |
| show_in_summary | Determines if the selected value for the step shows in the appointment summary page. | N | boolean |
| value | Value that will be stored with the appointment from the user's selection. | Y | string |
| icon | Appointment summary icon that replaces the label. [Feather Icon](https://feathericons.com/) names as the value. | N | string |
| can_skip | Sets the card as optional. | N | boolean |
| class | Adds a custom class for the card. | N | string |

## General Cards

### Tiles

`"type": "tiles"`

Selectable tiles that are displayed in a grid format with the option to include images.

| Property | Description | Required | Type |
| --------------- | --------------------------------------------------------------------------------------------------- | -------- | ------- |
| is_multi_select | Specify if the multiple tiles can be selected. If undefined, the default value is false. | N | boolean |
| layout | Must equal `"tiles"` for the tiles card. Currently there's only one layout, but more will be added. | Y | string |
| tiles | An array of the tiles which make up the tile content. | Y | array |

{
     "equipment_type": {
          "title": "What type of equipment are you interested in",
          "subtitle": "Please select what type of equipment are you planning to run",
          "label": "Equipment",
          "type": "tiles",
          "show_in_summary": true,
          "is_multi_select": false,
          "layout": "tiles",
          "tiles": [
               {
                    "title": "Hotspot",
                    "description": "I want to run one or multiple hotspots",
                    "img": "[e-mail]",
                    "value": "hotspot"
               },
               {
                    "title": "Node",
                    "description": "I want to run one or multiple nodes",
                    "img": "[e-mail]",
                    "value": "node"
               }
          ]
     }
}

##### **TILE DETAILS**

The `tiles` property has an array of tiles with with four optional parameters.

| Property | Description | Required | Type |
| ----------- | --------------------------------------------------------------------------------------- | -------- | ------ |
| title | The tile title/header. | N | string |
| description | The tile body description. | N | string |
| value | If selected this will be the value that will be stored in the database. | Y | string |
| img | Adds an image to the tile. For now it takes an image that you add in the assets folder. | N | string |

[
     {
          "title": "Hotspot",
          "description": "I want to run one or multiple hotspots",
          "img": "[e-mail]",
          "value": "hotspot"
     },
     {
          "title": "Node",
          "description": "I want to run one or multiple nodes",
          "img": "[e-mail]",
          "value": "node"
     }
]

### questions

`"type": "questions"`

User can select from buttons as their answers.

{
     "multi_equipment": {
          "type": "questions",
          "title": "Are you planning to run multiple equipments?",
          "subtitle": "Select Yes if you plan to run more than one Hotspot/Node",
          "inquiries": [],
          "responses": [
               {
                    "title": "Yes",
                    "value": "yes"
               },
               {
                    "title": "No",
                    "value": "no"
               }
          ],
          "label": "Multiple equipments",
          "show_in_summary": true
     }
}

### info

`"type": "info"`

Info cards are used to display information with no available further actions or buttons required from the user.

{
     "intro": {
          "title": "Congratulations.. Let’s get you a ring she’ll love",
          "subtitle": "",
          "label": "",
          "type": "info",
          "show_in_summary": false,
          "content": "",
          "img": "holdhands.jpeg"
     }
}

### Image Map

`"type": "image-map"`

This step can be used to create an image map. It is used to create different click-able areas on an image. This will allow to create a more visual experience for different approaches (selecting a parking lot, a seat at a table, etc.). Note that this is a presentational step and it is not tied down to the appointment booking data. For the example of parking lots, if a lot is selected on a previous appointment, we can’t show it as taken. For more information on how HTML Image Maps work see the [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map).

Obtaining the clickable areas coords is as simple as uploading the image to a [mapping tool](https://www.image-map.net/) and drawing out the clickable regions.

"intro": {
      "title": "Congratulations.. Let’s get you a ring she’ll love",
      "subtitle": "Go ahead and put a ring on it.",
      "type": "image-map",
      "label": "",
      "mappings": {
        "img": "assets/img/PutRingOnIt.png",
        "width": 899,
        "img_width": 899,
        "areas": [
          {
            "_id": 1,
            "region": "Ring",
            "shape": "rect",
            "coords": [
              442,
              244,
              750,
              297
            ],
            "value": "ring",
            "fillColor": "rgba(0, 255, 200, 0.1)"
          }
        ]
      },
      "show_in_summary": false
    }

### Finish

`"type": "finish"`

This displays a message along with the finish form submission button and can be used for flows that do not use appointment booking.

{
     "finish_no_appointment": {
          "title": "Thank you for your submission",
          "subtitle": "We will get in touch with you soon over the email",
          "button": {
               "text": "Finish",
               "show": true
          },
          "type": "finish"
     }
}

## Appointment Cards

### services

`"type": "services"`

This card type fetches the services that you've added to your business profile in your Setster account.

{
     "services_step": {
          "title": "Support type",
          "subtitle": "Please select the type of support you need",
          "type": "services",
          "icon": "package",
          "label": "What"
     }
}

### locations

`"type": "locations"`

These are the meeting places you've added to your business profile in your Setster account which may be physical locations or virtual (like Zoom).

{
     "locations_map_step": {
          "title": "Support location",
          "subtitle": "Please select a location near you",
          "type": "locations",
          "layout": "map",
          "icon": "map-pin",
          "label": "Where"
     }
}

### staff

`"type": "staff"`

These are your employees that you've added to your Setster account's business profile. Staff can be assigned to locations and services.

{
     "staff_step": {
          "title": "Staff",
          "subtitle": "Select the person you would like to help you",
          "type": "staff",
          "icon": "user"
     }
}