This article will explore the Widgets 2.0 creation and management for a single account.
Each Appointedd account provides a dedicated booking page and unlimited widget creation.
If your business is taking bookings via a business booking page rather than widgets, click here to learn more about the booking page instead.
If your company has multiple Appointedd accounts or users have access to multiple accounts, then check out this article instead.
🧐 What is a widget?
A booking widget is a tool that's used to allow your customers to make bookings with your business.
There are various ways you can share your widgets with your customers, and at Appointedd they come in three formats - embed, popover or URL.
Embed - add a snippet of code to your website that will embed your booking widget directly on your web page.
Popover - add a snippet of code to your website that will ad a book now button to your web page, triggering a small popup winder when clicked.
URL - a unique URL for your booking widget, hosted by Appointedd. Simply share it with your customers - no development effort needed.
Once a widget is created, you can get the appropriate format of your widget by selecting one of the below.
🌍 Interactive examples to draw inspiration from
Feel free to make test bookings with the below widgets in URL format to explore various functionalities:
Single location with service and resource selection - click here.
Single location - event list view for a specific event bookings - click here;
⚙️ How to create a single account booking widget
If you are currently using the original booking tools, we strongly encourage you to switch to the new Widgets 2.0 booking tools. The original widgets have been built on a legacy code and will soon be phased out.
Follow the below steps to create your widget:
Navigate to the Booking tools tab and select Manage booking widgets;
Make sure you are on Widgets 2.0 section and select + Create new button;
Give a name to your widget (only visible internally for labelling purposes);
Select whether you would like to include specific services or all services under a specific category that will widget will allow customers to book and click on Edit to assign these:
In this step you can also determine the view that your service availability will be displayed:
Calendar;
Event view;
Custom (a mix between calendar and event view on a per service level)
More information on the Availability view can be found below.
If only one service is selected, you can tick the 'Hide service selection' box which would pre-select this service and take customers directly to the availability step minimising the number of clicks needed.
The next step is to select what resources this widget is limited to and how the customers can select them.
You can limit this widget to specific resources or resource groups, meaning that only those selected will be bookable via this widget.
You can then select how this resource/group selection appears on the widget - whether you want the system to automatically allocate an available resource or whether you wish to let the customer choose their resource or resource group.
Add your brand colours and custom fonts if you wish and save the widget.
📆 Calendar vs Event availability view
There are two views which your service availability can be displayed in - calendar and event.
We recommend you use:
calendar view for those services where the availability is repeating on a regular basis or if there are a lot of various slots to choose from.
event view when the availability is limited or if you wish to display the exact slots rather than the whole calendar.
custom selection when there are multiple services on the widget, and some services need to be in calendar view and some in event view - you will be able to further customise it in the following step:
See below the difference between the two views:
Calendar availability view:
Event list availability view:
🎨 Branding
Colours
To change the colours of your booking widget, click on the colour box to choose from the colour picker or, if you have specific hex codes, paste or type them into the box below the colour picker.
Fonts
You can also apply custom fonts to your booking tool - simply switch ON the Custom Fonts toggle and apply your font URLs, which should point to a font file of format woff2 and be hosted on a server using HTTPS rather than HTTP.
Banner image
The banner image of the account will also apply to all widgets in URL format. This banner image can be added to the account via the Setup tab → Edit business profile → Banner image.
Service images
You can also apply service images which get displayed in the service selection step. To do this, go to the Setup tab → Manage service → Edit → Image upload.
Resource image
If you offer resource selection to your customers, you can also upload images to the resource profile via the Setup tab → Manage resources → View info → Edit resource → Upload photo.
Please note: to show resource selection step and images, first make sure the account settings allow it by going to the Booking tools tab -> Customize your booking flow -> Service and resource selection and adjusting it accordingly.
⚙️ Managing the widget list
All your saved widgets will show in a list which you can access via the Booking tools tab → Manage booking widgets → Widgets 2.0
To create a new widget, click on +Create new.
To edit an existing widget, click on the account name with the pencil icon.
To view how many different accounts this widget is across check the Accounts column. Learn more about multi-account structure.
To preview how this widget looks, select Preview.
To delete a widget, click on the Delete button next to it. You will be asked to confirm deletion and once it's been deleted, the action cannot be undone.