At its simplest form, you'll need an empty
div element with
id attribute set to
sesami__buttonWrapper for Sesami to render the button and the hidden fields:
This is a final rendered markup that Sesami creates to capture booking information:
The above markup will only be generated if the current product is a Sesami service, otherwise, it will do nothing and your other products won't be affected in any way.
Sesami button can be customized in many ways, this is mostly done by passing options to the wrapper element:
Sometimes you might need Sesami calendar to be displayed in a different language than what is set as your primary language. This is mostly useful if you have a multi-lingual store:
You can display any label on the button, this is useful if you'd like to conditionally render different labels based on product or context. If this option is not provided, it will display what is set on the settings page in Sesami app.
If you want to render a button on a page different from product page, you'll need to tell Sesami for which product you are rendering a button. Depending on your implementation, if you are rendering the button outside a product form or if a variant input is not present on the form, you might need to add a variant-id as well
If you want to render a button on a page different from product page, you'll need to tell Sesami for which variant you are rendering a button. You always need to specify the product-id when using this option
If you want to integrate Sesami in an external page or website, you'll need to tell Sesami for which store you want to display the button, this is done by providing the
Where can I find my shop ID?
Each store has it's own shop id which can be fetched by visiting this address after replacing
STORE with your store address: http://STORE.myshopify.com/admin/shop.json
If you need to load Sesami on an external page (like a Wordpress website), you'll need to add this line of code to your page:
If you don't want to display a quantity selector within your product form, and you need a pre-selected quantity value you can set this option. defaults to 1 in other cases
Sesami fires events to help you handle different scenarios in your booking flow, You can listen for these events to trigger different actions when a cusomer selects a time slot or when Sesami is loaded and initialized on your page.
Sesami resources are loaded in async mode so they do not block your other resources, depending on network conditions and the size of other resources, it can take some time until Sesami is fully loaded on a page. This event will let you know when Sesami is ready to accept bookings.
This is an example that show how you can listen for this event and trigger an action based on it:
change event will be fired on respective hidden inputs displayed on Rendered result section whenever a user selects a new time slot or changes the selected team member or timezone.
Example: Listen for sesami:loaded event and once inputs are rendered, listen for change event on the
Date input and programmatically create an order without customers having to click on add to cart button: