Skip to main content

Steps Overview

Every view or screen in a Setster Studio form flow is considered a step. Steps are used in the settings.json file to determine the types of content that will show at a given point in the flow. You can have unlimited steps in the steps object. The majority of the step types are for gathering data from the user, but a few are presentational for displaying information to the user. There are several step types available, discussed below.

Note

It's important to note that Setster Studio has no option for an input step type to display a form text-based input field where the user enters any kind of information unless that information is explicitly tied to a custom field for booking an appointment.

Step Types​

There are twelve available step types at the release of the Setster Studio alpha. Each step type provides a distinct user experience suitable for various desired user inputs or informational views.

Some step types are general, and others are directly tied to the Setster appointment booking process. The step types have three primary purposes: Collect General Info, Display General Info, and Collect Appointment Info.

The appointment-related steps are all required to successfully create an appointment booking experience, while the general step types are optional enhancements. Unlike the general steps, all appointment steps are of "type": "booking" and differ based on the model property.

Appointment Steps
Collect Appointment Info
​

The appointment-related steps are all required to create an appointment booking experience successfully.

📄️ Services Model

Detailed instructions on setting up and managing booking services in Setster Studio for a streamlined appointment system.

📄️ Locations Model

Master the setup of location-specific settings in Setster Studio for a tailored and localized booking experience.

📄️ Staff Model

Guidance on configuring staff-related settings in Setster Studio's booking system for optimal resource allocation and scheduling.

📄️ Availability Model

Learn to manage and display availability efficiently in Setster Studio's booking module for optimal scheduling.

📄️ Appointment Model

Guide to configuring appointment booking steps in Setster Studio. Ensure a smooth booking experience for your users.

📄️ Cancel Model

Learn how to configure cancellation processes in Setster Studio, ensuring a user-friendly and efficient booking cancellation experience.

General Enrichment Steps
Collect General Info
​

These steps are optional enhancements that create a more engaging booking experience. You might use these steps to gather additional data about the user, such as their favorite color or preferred style.

Saving Custom Data

These step types do not automatically save the user's selections. To persist this data it, must be explicitly added to meta data in the settings file. The meta data will be appended to the user's appointment information upon appointment creation.

Use these steps to hone in on what your customer is interested in. Gathering additional information about your customer allows you to curate the logic flow of steps in a way that reduces the number of irrelevant steps the user sees. Ideally, we strive for fewer steps with higher relevancy content, which equates to more successful appointment bookings for your team.

📄️ Select

An all-encompassing guide to configuring various booking steps in Setster Studio, enhancing the booking process for users.

📄️ Questions

An all-encompassing guide to configuring various booking steps in Setster Studio, enhancing the booking process for users.

📄️ Image Map

An all-encompassing guide to configuring various booking steps in Setster Studio, enhancing the booking process for users.

Informational Steps
Display General Info
​

Informational steps are used to display simple information. These steps do not require any input from the user. Informational steps are great for encouraging your customers to continue along the booking process with warm, personality-filled branded content.

📄️ Info

An all-encompassing guide to configuring various booking steps in Setster Studio, enhancing the booking process for users.

📄️ Thank You Page

An all-encompassing guide to configuring various booking steps in Setster Studio, enhancing the booking process for users.

Name Your Step​

Every step is an object. Each of the step objects under the steps property in the settings file must have a unique name that acts as the step's id. The name you give the step is not displayed anywhere or associated with the user's selection values saved in the database with metadata. Think of the name as a unique ID for the particular step. The name you choose for your step will be used in the form logic flow and summaries object and other settings objects to reference the step or the step's selected values.

settings.json
{
  "steps": {
    "FIRST_STEP_NAME": {
      "type": "single-select",
      "layout": "cards",
      "style": "classic",
      "title": "",
      "dialogue_title": "",
      "dialogue_title": "",
      "items": []
    },
    "SECOND_STEP_NAME": {
      "title": "",
      "type": "info",
      "description": "",
      "img": "mockup1.jpeg"
    }
  }
}
Naming Conventions

While it's possible to name your step using any string format, we recommend using a snake case format, which will help make it more immediately apparent that it's a step name and not some other step property such as a step value. For Example: "favorite_ice_cream_flavor_step" is a snake case string step name, which makes it more apparent that it's a step than something like "Favorite ice cream flavor step" which could be confused as a step's title or other property.

Names Must Be Unique

The name you choose for your step must be unique and distinct from the other steps you have given names. Line 4 in the following example would lead to breaking errors.

{
  "steps": {
    "first_step_name": {},
-   "first_step_name": {},
+   "second_step_name": {},
    "booking_appointment_step": {}
  }
}

Usage in Settings​

Naming your steps something that is descriptive is very important since the names you define are used widely throughout the flow, meta, and summaries sections of the settings configuration file which are discussed below.

Step names are used extensively in the Logic Flow, which controls the navigation logic portion of the Studio embed. The highlighted lines below are an example of how the steps' names are used within the flow.

  {
    "steps": {
      "first_step_name": {},
      "second_step_name": {},
      "booking_appointment_step": {}
    },
    "flow": {
      "normal": {
        "first_step_name": {
          "actions": [
            {
              "next": "second_step_name"
            }
          ]
        },
        "second_step_name": {
          "actions": [
            {
              "next": "book_appointment_step"
            }
          ]
        }
      }
    }
  }

Step Definition​

Base Properties​

All steps have the following properties available.

dialogue_title
The dialogue title is the instructions or question text content for a given step.
title
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
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
Adds a custom CSS class name to the step to allow for easy CSS selection and modifications at the step level.
Skip Steps

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

Full Specification​

Explore the available step types and their schema definitions.

Loading ....

Advanced Features​

Markdown Text

Titles and any text descriptions can use markdown. This allows you to add hyperlinks and any other options available in markdown to the text content of the app steps.