...

Next, install and configure the widget as explained here.

3.

...

Configure the widget

1. Login to the widget

...

1. configuration page

2. In the menu, go to Resource Settings, where you can select the Resource Type that you would like to reserve

...

1. Image Added

   Disable the ‘Use reservation contacts’ checkbox
   

   Image Modified

2. In the menu, go to Styling Settings, where you can set up Colours (with using the hex code of the chosen colour) and Logos (with using the image URL)
   

   Image Modified

3. In the menu, go to Translation Settings - here you have to select one translation. Otherwise an error occurs in the widget (for default, select English)
   

   Image Modified

4. Under the translation settings section, you can find further options for text setup (texts that you can see within the widget (eg.: support email address). In this section you can easily search with CMD+f or CTRL+f after looking at the widget and finding a text that you want to change

Create website using Glitch

1. Go to https://glitch.com/

2. Create an account and create a new project
   

3. Image Modified

   Select the glitch-hello-website option

4. You can use this HTMLandCSS for the website
   

   Image Added

5. You will need a long website screenshot

...

1. to serve as the example website

...

You can use the following code for the website

...

HTML: https://pastebin.com/ZQZFyCrr

CSS: https://pastebin.com/t664cP1D

...

1. . We typically use the GoFullPage extension to create this screenshot

2. Upload the screenshot in the Assets folder of Glitch

3. Use the image’s URL in the HTML code we provided in step 4:
   

   Image Added

4. On the widget configuration page, go to Widget Code Settings and copy the ‘code snippet’ from the widget setup UI into the HTML script as also seen in the HTML script above.

...

1. Or have a look at this article for more information on how to place the widget on your website.
   

   Image Modified

Go go to the ready widget page and see how all the settings come to life 

See the Resources with their corresponding descriptions and pictures

Test how the ‘date picker’ generates available time slots from the calendar (it looks at the lightning calendar in salesforce and checks availability of the resources based on the settings in the previous step)

Check styling - Logo, colours and texts within the widget

Make a reservation to test if there are any setup errors

Check the results in Salesforce (in the Lightning Calendar)

Switch tabs back to your Salesforce environment

Go to your Lightning Calendar and check the new reservation that appeared in the system as the result of the widget