Services Element

Overview

The Services Element is a list element that will display all Services within a Location. List elements are used for the purposes of a user selection. When a user selects a Service, the clickService event listener will trigger returning all of the Service details.

The clickService event listener can be used to mount the Service Setup Element and display an edit form for internal purposes, or to capture the ID of the Service selected to use when mounting the Availability Element in a booking flow.

Please see below for the optional parameters that are to be provided to this element, custom events included with the element, a code sample for the element, and screenshot before any additional style sheet is provided.

---

Custom Events

• getServices
  The Get Services custom event returns when the API request to GET /services has returned with a response. The response in its entirety is then accessible within the event object in a nested object named detail.
• clickService
  The Click Service custom event returns immediately with the details of the Service selected. The ID of this Service can then be stored and used in other elements in order to reference the user selection.

---

Syntax

Below is a basic syntax for loading the Services Element. This example uses IDs from our public sandbox profile, to integrate this example into your own booking page copy the IDs from your Dashboard profile and replace with the IDs in the example below.

---

Parameters

locationId
String
id of business location, defaults to primary business location

serviceGroupId
Integer($int32)
Filter by groupId

defaultService
Boolean
Filter by default service, default is false

allLocations
Boolean
Search All Locations, default is false

scope
String
Filter by scope, Company, Location or All, default is All

name
String
Filter by Name, supports Partial name search

serviceId
String
Filter by ServiceId, using this parameter would ignore all other parameters

offset
Integer($int32)
Starting row of page, default 0

limit
Integer($int32)
Page limit default 20, max 100

sortOrder
String
Sort results using Natural Sort or Sorted alphabetically by Service Names, default is natural

sortDescending
Boolean
Sort results in Descending Order, default true

Options

search
Boolean
Displays a search bar for the user to search Locations

searchBy
String
Defines the query parameter that will by included in the Rest API GET request Default: name. See below for a list of all possible query parameters for the GET Locations endpoint:

• locationId
  String
  id of business location, defaults to primary business location
• serviceGroupId
  Integer($int32)
  Filter by Service Group ID
• defaultService
  Boolean
  Filter by default service, defaults to false
• allLocations
  Boolean
  Search All Locations, default is false
• scope
  String
  Filter by scope, Company, Location or All, default is All. Available values : company, location, all
• name
  String
  Filter by Name, supports Partial name search
• serviceId
  String
  Filter by ServiceId, using this parameter would ignore all other parameters
• offset
  Integer($int32)
  Starting row of page, default 0
• limit
  Integer($int32)
  Page limit default 20, max 100
• sortOrder
  String
  Sort results using Natural Sort or Sorted alphabetically by Service Names, default is natural. Available values : natural, name
• sortDescending
  Boolean
  Sort results in Descending Order, default true