Default Settings
Settings Template
The settings template is a great place to start in customizing your embed. The settings.json file below is an example of a fully configured settings file. To use this file as a starting point be sure to replace the account_id parameter with your own Setster account id.
{
"embed_id": "widget-1",
"settings_version": "1.0.1",
"developer_mode": true,
"embed_url": "https://9vf3k4.csb.app/",
"embed_height": {
"desktop": "550px",
"tablet": "520px",
"mobile": "520px"
},
"account_id": 19198,
"enable_link_check": true,
"stripe_public_key": "",
"base_url": "https://9vf3k4.csb.app",
"steps": {
"single_select": {
"title": "This is a single select step",
"dialogue_title": "It's using a list layout",
"type": "single-select",
"layout": "list",
"style": "classic",
"can_skip": true,
"items": [
{
"title": "List Item",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the classic style",
"value": "List Item"
},
{
"title": "List Item 2",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the classic style",
"value": "List Item 2"
},
{
"title": "List Item 3",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the classic style",
"value": "List Item 3"
},
{
"title": "List Item 4",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the classic style",
"value": "List Item 4"
},
{
"title": "List Item 5",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the classic style",
"value": "List Item 5"
},
{
"title": "List Item 6",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the classic style",
"value": "List Item 6"
},
{
"title": "List Item 7",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the classic style",
"value": "List Item 7"
}
]
},
"multi_select": {
"title": "This is a multi-select step",
"dialogue_title": "It's using a card layout",
"type": "multi-select",
"layout": "cards",
"style": "modern",
"can_skip": true,
"items": [
{
"title": "Card",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the modern style",
"value": "Card"
},
{
"title": "Card 2",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the modern style",
"value": "Card 2"
},
{
"title": "Card 3",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the modern style",
"value": "Card 3"
},
{
"title": "Card 4",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the modern style",
"value": "Card 4"
},
{
"title": "Card 5",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the modern style",
"value": "Card 5"
},
{
"title": "Card 6",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the modern style",
"value": "Card 6"
},
{
"title": "Card 7",
"img": "mockup3.jpeg",
"img_hover": "mockup3.jpeg",
"description": "This is the modern style",
"value": "Card 7"
}
]
},
"info_step": {
"title": "Info step title",
"type": "info",
"description": "This is a description.",
"img": "mockup3.jpeg",
"can_skip": true
},
"choose_all_step_types": {
"title": "Choose a Step Type",
"class": "custom-class",
"dialogue_title": "Select a type of step that you'd like to see",
"type": "single-select",
"layout": "list",
"style": "classic",
"can_skip": false,
"items": [
{
"title": "Appointment Booking Steps",
"description": "A series of steps required to book appointments",
"value": "Appointment Booking Steps"
},
{
"title": "Select Step",
"description": "Select items from a list or carousel of cards",
"value": "Select Step"
},
{
"title": "Image Map Step",
"description": "Select an area or region within an image",
"value": "Image Map"
},
{
"title": "Question Step",
"description": "Long contextual text with answer buttons",
"value": "Question Step"
},
{
"title": "Thank You Step",
"description": "Shown after completing the flow or booking",
"value": "Thank You Step"
}
]
},
"questions_step": {
"title": "This is a Question Step",
"dialogue_title": "It's used to provide more context to users",
"dialogue_instructions": "Please select an option",
"type": "questions",
"inquiries": [
{
"title": "This is a Title",
"description": "This is a description"
},
{
"title": "Question Steps Offer Longer Explanations",
"description": "Question steps allow you to provided textual explainations for better informed user selections."
},
{
"title": "Action Oriented Button Responses",
"description": "Question steps include buttons with text for a more action oriented response."
}
],
"responses": [
{
"title": "Yes",
"value": "Yes"
},
{
"title": "No",
"value": "No"
}
]
},
"image_map": {
"title": "Image Map Step",
"type": "image-map",
"mappings": {
"img": "https://uploads.codesandbox.io/uploads/user/ff6621ec-d97a-4af9-a25a-5cadb8415c1b/nEl3-Likert+Scale.png",
"width": 600,
"img_width": 1630,
"stroke_color": "transparent",
"areas": [
{
"_id": 1,
"name": "Very Unsatisfied",
"shape": "rect",
"coords": [46, 67, 269, 302],
"value": "Very Unsatisfied",
"preFillColor": "rgba(212, 238, 159, 0.0)",
"fillColor": "rgba(212, 238, 159, 0.6)",
"customData": "Front"
},
{
"_id": 2,
"name": "Unsatisfied",
"shape": "rect",
"coords": [381, 68, 604, 303],
"value": "Unsatisfied",
"preFillColor": "rgba(212, 238, 159, 0.0)",
"fillColor": "rgba(212, 238, 159, 0.6)",
"customData": "Front"
},
{
"_id": 3,
"name": "Neutral",
"shape": "rect",
"coords": [711, 64, 934, 299],
"value": "Neutral",
"preFillColor": "rgba(212, 238, 159, 0.0)",
"fillColor": "rgba(212, 238, 159, 0.6)",
"customData": "Back"
},
{
"_id": 4,
"name": "Satisfied",
"shape": "rect",
"coords": [1037, 60, 1260, 295],
"value": "Satisfied",
"preFillColor": "rgba(212, 238, 159, 0.0)",
"fillColor": "rgba(212, 238, 159, 0.6)",
"customData": "Back"
},
{
"_id": 5,
"name": "Very Satisfied",
"shape": "rect",
"coords": [1373, 61, 1596, 296],
"value": "Very Satisfied",
"preFillColor": "rgba(212, 238, 159, 0.0)",
"fillColor": "rgba(212, 238, 159, 0.6)",
"customData": "Side"
}
]
}
},
"locations_list_step": {
"title": "Locations Step",
"dialogue_title": "Step Dialogue Instructions",
"type": "booking",
"model": "locations",
"layout": "list"
},
"services_step": {
"title": "Services Step",
"dialogue_title": "Step Dialogue Instructions",
"type": "booking",
"model": "services"
},
"staff_step": {
"title": "Staff Step",
"dialogue_title": "Step Dialogue Instructions",
"type": "booking",
"model": "staff"
},
"availability_step": {
"title": "Availability Step",
"type": "booking",
"model": "availability",
"first_day_of_week": "sunday",
"months_in_past_enabled": false
},
"appointment_booking_form_step": {
"title": "Appointment Step",
"type": "booking",
"model": "appointment",
"dialogue_title": "Enter Your Details",
"callback": "processAppointment",
"summary": "appointment-details"
},
"finish_step": {
"title": "Thank You Step",
"button": {
"text": "Finish Button",
"show": true
},
"type": "thank-you"
},
"cancel_step": {
"title": "Cancel Step",
"type": "booking",
"model": "cancel-appointment"
},
"cancel_finish_step": {
"title": "Thank You Step",
"type": "thank-you",
"button": {
"text": "Finish Button",
"show": true
}
},
"reschedule_availability_step": {
"title": "Availability Step",
"type": "booking",
"model": "availability",
"first_day_of_week": "monday",
"months_in_past_enabled": false,
"client_timezone_selection": "on"
},
"reschedule_finish_step": {
"title": "Thank You Step",
"type": "thank-you"
}
},
"flow": {
"normal": {
"single_select": {
"actions": [
{
"next": "multi_select"
}
]
},
"multi_select": {
"actions": [
{
"next": "info_step"
}
]
},
"info_step": {
"actions": [
{
"next": "questions_step"
}
]
},
"questions_step": {
"actions": [
{
"next": "image_map"
}
]
},
"image_map": {
"actions": [
{
"next": "locations_list_step"
}
]
},
"locations_list_step": {
"actions": [
{
"next": "services_step"
}
]
},
"services_step": {
"actions": [
{
"next": "staff_step"
}
]
},
"staff_step": {
"actions": [
{
"next": "availability_step"
}
]
},
"availability_step": {
"actions": [
{
"next": "appointment_booking_form_step"
}
]
},
"appointment_booking_form_step": {
"actions": [
{
"next": "finish_step"
}
]
}
},
"cancel": {
"cancel_step": {
"actions": [
{
"next": "cancel_finish_step"
}
]
}
},
"reschedule": {
"services_step": {
"actions": [
{
"next": "staff_step"
}
]
},
"staff_step": {
"actions": [
{
"next": "locations_list_step"
}
]
},
"locations_list_step": {
"actions": [
{
"next": "reschedule_availability_step"
}
]
},
"reschedule_availability_step": {
"actions": [
{
"next": "appointment_booking_form_step"
}
]
},
"appointment_booking_form_step": {
"actions": [
{
"next": "reschedule_finish_step"
}
]
}
}
},
"summaries": {
"appointment-details": {
"title": "Appointment details",
"items": [
{
"step": "single_select",
"label": "List"
},
{
"step": "multi_select",
"label": "Card"
},
{
"step": "questions_step",
"label": "Questions"
},
{
"step": "image_map",
"label": "Image Map"
},
{
"step": "locations_list_step",
"label": "Address",
"icon": "map-pin",
"value": "Full address: {{street1}}, {{street2}} {{city}}, {{country}}"
},
{
"step": "services_step",
"label": "Service",
"icon": "package",
"value": "{{name}}"
},
{
"step": "staff_step",
"label": "Staff",
"icon": "user",
"value": "{{name}}"
},
{
"step": "availability_step",
"label": "Availability",
"icon": "calendar"
}
]
}
},
"meta": {
"normal": {
"meta_card": "{{steps:single_select}}",
"meta_questions": "{{steps:questions_step}}",
"meta_image_map": "{{steps:image_map}}",
"meta_services_step": "{{steps:services_step}}",
"meta_locations_step": "{{steps:locations_list_step}}",
"meta_staff_step": "{{steps:staff_step}}"
},
"cancel": {},
"reschedule": {
"reschedule_service": "{{steps:services_step}}",
"reschedule_location": "{{steps:locations_list_step}}",
"reschedule_staff": "{{steps:staff_step}}"
}
},
"finish_message": "You are all set",
"pay_in_person_message": "If you would like to make payment in person you must first confirm your e-mail address by following the corresponding link in the e-mail confirmation message that has been sent to you."
}