Summaries

The summaries in the settings.json file allow a summary view of the user's selections to be inserted before the user submits their final appointment booking contact information to create a new appointment with a service provider.

Appointment Summary

tip

Currently, summaries can only be used for the Setster step type appointment model.

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

Interpolate Values

Some values can be interpolated using a special syntax with double curly braces like: {{}}.

tip

The locations, services, and staff properties that can be interpolated are listed in the API docs.

{
  "summaries": {
    "appointment-details": {
      "title": "Appointment details",
      "items": [
        {
          "step": "locations_step",
          "label": "Address",
          "icon": "map-pin",
          "value": "Full address: {{street1}}, {{street2}} {{city}}, {{country}}"
        }
      ]
    }
  }
}

Location Details

• Name: {{name}} (The Location name)
• Description: {{description}}
• Street address: {{street1}} or {{street2}}
• City: {{city}}
• State: {{state}}
• Zip: {{zip}}
• Country: {{country}}
• Phone: {{phone}}

See the /getLocation endpoint's response for available options.

Services Details

• Name: {{name}} (The services' name)
• Description: {{description}}
• Duration: {{duration}}
• Price: {{price}}

See the /getService endpoint's response for available options.

Staff Details

• First Name: {{first_name}}
• Last Name: {{last_name}}
• Job: {{job}}
• Bio: {{bio}}
• Phone: {{public_phone}}

See the /getEmployeeDetails endpoint's response for available options.

note

The icon can be any of the icons from Feather Icons. Use the name of the icon to show it on the summary item.

Example

{
  "settings_version": "1.0.3",
  "embed_height": {
    "desktop": "550px",
    "tablet": "520px",
    "mobile": "520px"
  },
  "account_id": 12821,
  "enable_link_check": true,
  "stripe_public_key": "",
  "steps": {},
  "summaries": {
    "appointment-details": {
      "title": "Appointment details",
      "items": [
        {
          "step": "looking_for",
          "label": "Looking for"
        },
        {
          "step": "age",
          "label": "Age Group"
        },
        {
          "step": "skin_feel",
          "label": "Skin Feel"
        },
        {
          "step": "environment",
          "label": "Environment"
        },
        {
          "step": "concern",
          "label": "Concern"
        },
        {
          "step": "locations_step",
          "label": "Location",
          "icon": "map-pin",
          "value": "{{name}}"
        },
        {
          "step": "locations_step",
          "label": "Address",
          "icon": "map-pin",
          "value": "Full address: {{street1}}, {{street2}} {{city}}, {{country}}"
        },
        {
          "step": "services_step",
          "label": "What",
          "icon": "package",
          "value": "{{name}}"
        },
        {
          "step": "staff_step",
          "label": "Who",
          "icon": "user",
          "value": "{{name}}"
        },
        {
          "step": "calendar_step",
          "label": "When",
          "icon": "calendar"
        }
      ]
    }
  }
}

Full Schema

Loading ....