---
# System prepended metadata

title: Cards

---

---
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.

```js
{
     "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   |

```json
{
     "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": "streamline-icon-computer-database-server-3@48x48.png",
                    "value": "hotspot"
               },
               {
                    "title": "Node",
                    "description": "I want to run one or multiple nodes",
                    "img": "streamline-icon-computer-database-server-1@48x48.png",
                    "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 |

```json
[
     {
          "title": "Hotspot",
          "description": "I want to run one or multiple hotspots",
          "img": "streamline-icon-computer-database-server-3@48x48.png",
          "value": "hotspot"
     },
     {
          "title": "Node",
          "description": "I want to run one or multiple nodes",
          "img": "streamline-icon-computer-database-server-1@48x48.png",
          "value": "node"
     }
]
```

### questions

`"type": "questions"`

User can select from buttons as their answers.

```json
{
     "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.

```json
{
     "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.

```json
"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.

```json
{
     "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.

```json
{
     "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).

```json
{
     "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.

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