Logic Flow
The logic flow in the settings.json
files is the brains behind telling your form which step should come next. It allows you to create a customizable experience to make content more relevant to your users. The logic flow applies rules that control when each of the steps should show upon navigation. It's what holds all of the navigation logic.
There are three different flows, with two exclusively for appointment booking.
- normal
- cancel - appointments only
- reschedule - appointments only
{
"flow": {
"normal": {},
"cancel": {},
"reschedule": {}
}
}
Each action name in a logic flow must match one of the step's names. The logic for a particular step is encapsulated in the flow object with a key that matches the step name.
{
"steps": {
"example_step": {...},
"another_step": {...}
},
"flow": {
"normal": {
"example_step": {
"actions": [
{
"next": "another_step"
}
]
},
"another_step": {...}
}
}
}
Flow Types
- Normal Flow
- Cancel Flow
- Reschedule Flow
The normal flow contains primary logic for each step. The normal flow is the primary default flow that handles step navigation logic.
Example
In this example, we ask two questions before starting the booking flow, as shown in the Flow Chart.The order of the services
, staff
, and locations
steps happen doesn't matter as long as they appear before the availability
step.
There can even be non-booking steps between the booking steps in the flow as shown in the example below.
- Flow
- Steps
{
"flow":{
"normal": {
"employee_count": {
"actions": [
{
"next": "solution"
}
]
},
"solution": {
"actions": [
{
"next": "services"
}
]
},
"services": {
"actions": [
{
"next": "staff"
}
]
},
"staff": {
"actions": [
{
"next": "locations"
}
]
},
"locations": {
"actions": [
{
"next": "availability"
}
]
},
"availability": {
"actions": [
{
"next": "appointment"
}
]
},
"appointment": {
"actions": [
{
"next": "finish"
}
]
}
},
"reschedule": {...},
"cancel": {...}
}
}
{
"steps": {
"employee_count": {
"dialogue_title": "Which booking solution works best for your needs?",
"type": "multi-select",
"items": [...]
},
"solution": {
"dialogue_title": "Which booking solution works best for your needs?",
"type": "multi-select",
"items": [...]
},
"locations": {
"title": "Meeting Location",
"type": "booking",
"model": "locations",
"layout": "list"
},
"services": {
"title": "Service Selection",
"type": "booking",
"model": "services"
},
"staff": {
"title": "Staff Selection",
"type": "booking",
"model": "staff"
},
"availability": {
"title": "Availability",
"type": "booking",
"model": "availability"
},
"appointment": {
"title": "Book Appointment",
"type": "booking",
"model": "appointment",
"summary": "appointment-details"
},
"finish": {
"title": "Thank You Step",
"type": "thank-you"
}
}
}
The cancel flow is used for canceling an appointment.
Both clients and service providers receive separate email links to take them to the cancel flow.
Example
- Flow
- Steps
{
"flow":{
"normal": {...},
"reschedule": {...},
"cancel": {
"cancel_step": {
"actions": [
{
"next": "cancel_finish"
}
]
}
}
}
}
{
"steps": {
"cancel_step": {
"title": "Cancel Step",
"type": "booking",
"model": "cancel-appointment",
"callback": "processAppointment"
},
"cancel_finish_step": {
"title": "Thank You Step",
"type": "thank-you",
"button": {
"text": "Finish Button",
"show": true
}
}
}
}
The reschedule flow is used for rescheduling an appointment.
Both clients and service providers receive separate email links to take them to the reschedule flow. If the reschedule is being made by a provider, their ability to edit client details on the previously booked appointment is limited to the _ fields.
Example
- Flow
- Steps
{
"flow":{
"normal": {...},
"reschedule": {
"services": {
"actions": [
{
"next": "staff"
}
]
},
"staff": {
"actions": [
{
"next": "locations"
}
]
},
"locations": {
"actions": [
{
"next": "reschedule_availability"
}
]
},
"reschedule_availability": {
"actions": [
{
"next": "appointment"
}
]
},
"appointment": {
"actions": [
{
"next": "reschedule_finish"
}
]
}
},
"cancel": {...}
}
}
{
"steps": {
"services": {
"title": "Service Selection",
"type": "booking",
"model": "services"
},
"staff": {
"title": "Staff Selection",
"type": "booking",
"model": "staff"
},
"reschedule_availability": {
"title": "Availability Step",
"type": "booking",
"model": "availability",
"first_day_of_week": "monday",
"months_in_past_enabled": false,
"client_timezone_selection": "on"
},
"appointment": {
"title": "Book Appointment",
"type": "booking",
"model": "appointment",
"summary": "appointment-details"
},
"reschedule_finish": {
"title": "Thank You Step",
"type": "thank-you"
}
}
}
Flow Actions
Each step can have a flow action. These actions can recall information based on what values the user selected.
The list of actions is evaluated in order from first to last.
Next Logic
Actions in their simplest form instruct the app to navigate to the next step in the sequence by using the "next"
action.
Example
{
"flow":{
"normal": {
"solution": {
"actions": [
{
"next": "finish"
}
]
}
},
"reschedule": {...},
"cancel": {...}
}
}