Appointment Step Model

Collect Appointment Info

As the final step in the appointment booking flow, the Setster step appointment model is where the user enters their details for their appointment booking. As of the Setster Studio alpha launch, this step is the only step with form text input fields. The client input fields can only collect client data to be tied to the booked appointment, such as the client's name, email address, and payment information.

Input Fields

• Full Name (Required)
• Email (Required)
• Phone
• Address

note

The client's address will be stored in separate fields for easier retrieval in the summaries object. See Summaries

info

The "callback" property allows a custom callback function to be run after the appointment has been submitted. This callback function must be appended to the window with the same name provided in the settings file. This callback function will pass the appointment information to your custom function. See Example

settings.json

{
  "submit_form_step": {
    "title": "Submit your appointment",
    "type": "booking",
    "model": "appointment",
    "reschedule_title": "Reschedule Appointment",
    "reschedule_success_message": "You've successfully rescheduled your appointment",
    "callback": "processAppointment",
    "summary": "appointment-details"
  }
}

Payment Fields

If the service is paid and requires payment when booking the appointment, a payment field will appear as the last input field. To accept payments during the booking process, you must have Stripe or Paypal set up on your Setster account. See Payments Setup Guide

tip

In the settings from your Setster dashboard, you can opt to have payments made in person. In-person payments will disable the payment details form field from appearing.

Schema Overview

model required	string Value: "appointment"
type required	string Value: "booking"
callback	string Allows a custom callback function to be run after the appointment has been submitted. This callback function must be appended to the window with the same name provided in the settings file. The app will pass the appointment information to your custom function.
reschedule_title	string The main title that appears on the appointment selection step when the user starts the reschedule flow.
reschedule_success_message	string The success message that appears after an appointment has been successfuly rescheduled.
summary	string Set to a key value of a summary previously configured in in the summaries object. Determines if the selected value for the step shows in the appointment summary view before booking an appointment.
dialogue_title	string The dialogue title is the instructions or question text content for a given step.
dialogue_instructions	string
disable_images	boolean Hides images from appointment related lists of options that are pulled from the Setster API automatically.
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.

{

• "submit_form_step": {

  • "title": "Submit your appointment",
  • "type": "booking",
  • "model": "appointment",
  • "callback": "processAppointment"

  }

}

Schema Specification

Loading ....

Example

model required	string Value: "appointment"
type required	string Value: "booking"
callback	string Allows a custom callback function to be run after the appointment has been submitted. This callback function must be appended to the window with the same name provided in the settings file. The app will pass the appointment information to your custom function.
reschedule_title	string The main title that appears on the appointment selection step when the user starts the reschedule flow.
reschedule_success_message	string The success message that appears after an appointment has been successfuly rescheduled.
summary	string Set to a key value of a summary previously configured in in the summaries object. Determines if the selected value for the step shows in the appointment summary view before booking an appointment.
dialogue_title	string The dialogue title is the instructions or question text content for a given step.
dialogue_instructions	string
disable_images	boolean Hides images from appointment related lists of options that are pulled from the Setster API automatically.
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.

{

• "submit_form_step": {

  • "title": "Submit your appointment",
  • "type": "booking",
  • "model": "appointment",
  • "callback": "processAppointment"

  }

}

Related API Endpoint

Setster Studio handles all of the Setster API configurations in the background. For more advanced, functionality see the API.

• Appointment Endpoint
• Appointment Model