The Self Service Cafe UI has been designed to be a quick and simple experience when ordering.

The first steps to enable the new Self Service Cafe are heading to the setup page of the target org, search for All Sites then click ‘Builder’ on the Kiosk page.

Once the Experience Builder page is open, click the ‘Home’ button in the top left and then select ‘+ New Page’.

Next, select ‘Standard Page’

and then ‘+ New Blank Page’

Next, select 1 full-width column

Then set the name to ‘Cafe’ and the URL to either ‘cafe’ or if the client has specified a url endpoint they wish to name it, use that instead. API name is optional.

Next, click the ‘Components’ button found under the lightning icon in the top left of the page.

Scroll down to ‘Custom Components’ then click & drag the SelfServiceCheckoutComponent from the Components side bar into the ‘Content’ segment of the page.

Finally, click ‘Publish’ in the top right hand corner of the page

Then select ‘Publish’ from the pop up window.

Now when you visit the Kisok site url and append ‘/cafe’ or the previously specified endpoint when creating the page, on desktop you should see something like this:

And on mobile you should see something like this

This is an example of a Recipe with three ingredients, all of which are optional so either 1 or 0.

You can however increase the Product quantity if you wish to purchase two Pepsi Max for example.

This is an example of a recipe with only Fixed ingredients, all of which you can see specified under the Ingredients panel.

This is an example of a recipe that contains both fixed and additional ingredients

We also have the option to specify any allergen information required at a product level by updating the ‘Allergen Information’ field on the Product record. It is a multi-select picklist that contains the 14 allergens, but can also be expanded to include more if desired.

The information is accessed by clicking the ‘Eye’ icon on the product and a list of all specified allergens is then displayed in a popup.

Additionally, we have an account icon in the top right that displays either a Login form in not logged in, or when logged in a modal with two sections.

The ‘Orders’ panel shows any currently placed orders and the ‘Account’ panel simply displays a Logout button.

Once you have clicked ‘Checkout’ from the product selection stage and proceeded to the next stage you should see the cart items listed, with any additional/optional ingredient selections specified underneath the product name, along with the quantities and the price.

Then we are presented with one of two options, if the customer has not logged in on this browser before they will be presented with the Login/ Account creation / Guest Checkout page

otherwise if we have a stored cookie on their browser they will be presented with the ‘Use this Account’ page (below). The Text in these and the subsequent pages can be configured using the Booking Settings custom setting to be in the preffered language of the customer.

The Create Account page (below)

and the Guest Checkout page (below)

The Reset Password modal is a simple form to send a password reset email

On the checkout screen we are again presented with the cart, and the option to remove any items from the cart by selecting the ‘Bin’ icon.

We can also add any gift vouchers / promotional codes at this stage before submitting card details.

Once payment has been accepted the user is presented with a confirmation screen containing their order and the option to return to the home screen.