Storefront SDK (Beta)
You can build your own highly customized booking experience using Sesami SDK.
info
The Sesami SDK for JavaScript supports the latest two versions of the most popular browsers. Internet explorer and older browsers are not supported.
#
Enable the SDKThe Sesami SDK is currently in closed beta release. If you're interested in trying it out, you can reach out to our customer success team via our help desk.
After this feature is activated on your store, you can enable it from:
Sesami app > Settings > Storefront settings > Use storefront SDK
Enabling the Sesami SDK means that you need to implement storefront integration yourself and the Sesami button will not appear on product pages automatically.
#
Quick startSesami will not block your other resources from being loaded and will not cause any delays or decrease in your store's performance, So you will need to initialize it when it is ready and loaded:
The code above will create a Sesami instance, You use it to render a fully customized calendar and get availabilities for each day.
#
DataEach instance of the Sesami SDK will contain a data
object with the following structure:
#
SesamiDayObjectA Sesami day object contains the following properties:
#
dateDate
object representing this day
#
getAvailabilities()async function
Returns a promise that resolves to an array of available slots: Promise<Array<SesamiSlotObject>>
#
isCurrentMonthBoolean
Determines if this day is within the same month as the currently set date.
#
isCurrentWeekBoolean
Determines if this day is within the same week as the currently set date.
#
isPastBoolean
Determines if this day is in the past.
#
isTodayBoolean
Determines if this day is today.
#
SesamiSlotObject#
durationNumber
Slot duration in minutes
#
remainingSlotsNumber
Number of remaining slots in the currently selected time. Always 1 except for sevices that accept group appointments.
#
startTimeString
String representing starting date and time for the current slot in the selected timezone.
#
statusString
Currently the only possible value is "available" for storefront integrations.
#
OptionsYou can pass several options to SesamiSDK, here are all possible options:
#
shopIdString
Required
Valid Shopify shop ID.
#
productIdString
Required
Valid Shopify product ID.
#
variantIdString
Required
Valid Shopify variant ID.
#
timezoneString
Timezone in which you'd like availabilities to be displayed.
IANA timezone values. example: America/New_York
Defaults to store timezone.
#
teamMemberString
Team member name, exactly as entered in Sesami.
example: John Smith
Defaults to null, which will result in displaying availabilities for all team members that are connected to the current service.
#
quantityNumber
Quantity - Only use for a service with group appointments.
defaults to 1.
#
weekStartDayNumber
The weekday that should be considered as the first day of the week. Accepted values are 0 - 6:
0 = Sunday
1 = Monday
2 = Tuesday
3 = Wednesday
4 = Thursday
5 = Friday
6 = Saturday
defaults to 0.
#
autoLoadBoolean
If this option is enabled, SDK will automatically fetch availabilities for the current month as soon as it is initialized, or the current date is updated.
defaults to false
#
nowDate
Currently selected date.
defaults to Current time: new Date()
#
MethodsThe Sesami SDK provides several methods to render a calendar and fetch availabilities:
#
init()Initializes the instance and starts fetching availabilities for the current month if autoLoad is enabled.
Arguments: none
#
setDate(date)Updates the current value for now and fetches new availabilities if not already fetched and autoLoad is enabled.
Arguments:
- date:
Date
#
setVariantId(variantId)Updates the current value for variantId and fetches new availabilities if not already fetched and autoLoad is enabled.
Arguments:
- variantId:
String
#
setTeamMember(teamMember)Updates the current value for teamMember and fetches new availabilities if not already fetched and autoLoad is enabled.
Arguments:
- teamMember:
String
#
next(duration)Navigates to the next (year | month | week | day) and updates the current value for now and fetches new availabilities if not already fetched and autoLoad is enabled.
Arguments:
- duration:
String
one of:year | month | week | day
#
previous(duration)Navigates to the previous (year | month | week | day) and updates the current value for now and fetches new availabilities if not already fetched and autoLoad is enabled.
Arguments:
- duration:
String
one of:year | month | week | day
#
load()Loads availabilities for the currently selected range. Only needed if autoLoad is disabled. This method will only trigger a network request if the data is not already available.
Arguments: None
#
Helpers#
formatDate(date, options)Returnes formatted date in user's preferred locale.
This is a wrapper around Intl.DateTimeFormat
Example:
Arguments:
- date:
Date
- options:
Object
- Please check Intl.DateTimeFormat for available options
#
getSesamiFields(slot)Returns a set of hidden input fields that are normally used in a Shopify storefront to add a product with the selected time slot as Line item properties to the cart.
Check out rendered result section in storefront integration for more information about these fields.
Arguments:
- slot: SesamiSlotObject returned from getAvailabilities method.