Skip to main content

Image Map Step
Collect General Info

This step can be used to create an image map. An image map is used to create clickable regions on an image thus enabling the user to make selections based on said image. The image map allows for a more visual selection experience.

For more information on how HTML Image Maps work see the Mozilla Docs. You might choose to use an image map for selecting a parking spot in a parking lot, selecting a specific seat at a table, etc.).

tip

Obtaining the clickable areas coords is as simple as uploading the image to a mapping tool and drawing out the clickable regions.

caution

Too many selectable regions make it difficult to select the proper clickable region - especially within the constraints of mobile devices. Ideally, selectable areas should not exceed eight separate clickable areas.

{
  "steps": {
    "image_map": {
      "title": "Image map step",
      "dialogue_title": "This is the image map step type",
      "type": "image-map",
      "message": "Book {name} / {customData}",
      "mappings": {
        "img": "https://mir-s3-cdn-cf.behance.net/project_modules/disp/b9596913058655.562705dd8cdb3.jpg",
        "width": 600,
        "imgWidth": 600,
        "strokeColor": "green",
        "areas": [
          {
            "_id": 1,
            "name": "parking space 1",
            "shape": "poly",
            "coords": [36, 251, 36, 293, 74, 282, 72, 241],
            "value": "suit",
            "preFillColor": "rgba(212, 238, 159, 0.2)",
            "fillColor": "rgba(88, 42, 114, 0.8)",
            "customData": "Front"
          },
          {
            "_id": 2,
            "name": "parking space 2",
            "shape": "poly",
            "coords": [111, 230, 147, 220, 154, 261, 116, 271],
            "value": "parking space 2",
            "preFillColor": "rgba(212, 238, 159, 0.2)",
            "fillColor": "rgba(88, 42, 114, 0.8)",
            "customData": "Front"
          }
        ]
      }
    }
  }
}
Skip Steps

Setting can_skip to true allows the user to skip the step which can help reduce drop off.

Schema Overview​

type
required
string
Value: "image-map"
object (AppState.IMappings)
title
string

The title of the step which is the first text content on the top of the step view. The title should describe the current step in a short and concise way.

can_skip
boolean

When set to false the step is required to be answered before moving on to the next step. When set to true the user can skip answering the step.

class
string

Adds a custom CSS class name to the step to allow for easy CSS selection and modifications at the step level.

layout
string (AppState.ILayout)
Enum: "cards" "list"

There are two available layouts for single select steps; cards and list. The cards layout consists of selectable retangular cards that are displayed in a single row grid format. Navigating between card options is handled by a horizontal carousel.
Cards contain text and/or images. The list layout is a list of selectable items with a vertical scroll. List items may also contain text and/or images. The list layout is better suited for smaller images such as icons while the cards layout is better suited to larger images.

{
  • "image_map": {
    }
}

Full Schema​

Loading ....

Example​

type
required
string
Value: "image-map"
object (AppState.IMappings)
title
string

The title of the step which is the first text content on the top of the step view. The title should describe the current step in a short and concise way.

can_skip
boolean

When set to false the step is required to be answered before moving on to the next step. When set to true the user can skip answering the step.

class
string

Adds a custom CSS class name to the step to allow for easy CSS selection and modifications at the step level.

layout
string (AppState.ILayout)
Enum: "cards" "list"

There are two available layouts for single select steps; cards and list. The cards layout consists of selectable retangular cards that are displayed in a single row grid format. Navigating between card options is handled by a horizontal carousel.
Cards contain text and/or images. The list layout is a list of selectable items with a vertical scroll. List items may also contain text and/or images. The list layout is better suited for smaller images such as icons while the cards layout is better suited to larger images.

{
  • "image_map": {
    }
}