Widgets are pieces of code that you can easily insert into your website to display custom forms, calendars, or booking buttons. They are compatible with most web platforms and do not require complex technical knowledge to implement.
Key Benefits:
Easily create interactive elements to encourage direct booking.
Customize colors, texts, and formats to fit your site.
Offer a fast and friendly shopping experience without the need to redirect the user.
From AvaiBook you can embed widgets on your website so that travelers book directly from your site.
Access widget creation
In your AvaiBook dashboard, go to Booking Engine → Publish to My Website → Widgets.
If you don't have any widgets created, the system will automatically show you the options available to get started.
Choose the type of widget
You can select between two main options:
Availability calendar
Form (Search Bar)
Click Select after choosing the type.
Calendar Widget
Choose style, color and associated accommodation.
🔹 Calendar Type
You can choose between different calendar formats:
Monthly calendar (option selected by default)
Quarterly calendar
Annual calendar
Matrix calendar
👉 This defines how many months will be displayed in the user-visible widget.
🔹 Color selection
10 colors are available to customize the look of the widget. The selected color will be applied primarily to visual elements such as buttons and calendar borders.
Available Colors:
🔹 Accommodation selection
You must select which of your properties you want to associate this widget with. The drop-down menu allows you to choose from the accommodations you already have set up in your account.
🔹 Widget preview
On the right-hand side, you can see a preview of the calendar as it will be displayed on your website, including:
The selected month (June 2025 in the image).
Available (free) and busy days, with their respective legend (white = free, grey = busy).
"BOOK ONLINE" button, which users can click to start a booking.
Save the current widget settings and move on to the next step.
Before finalizing the creation of the widget, carefully review the information indicated in point 1 of the image. In this section you can:
Rename the widget.
Adjust the width and height of the overall widget.
Modify the size of the internal calendar.
Turn on or off:
The Booking Button
Transparent background
Transparent edge
Customize colors:
Background, border, texts
Header and days of the week
Once you have verified or edited these fields according to your preferences, click Save (item 2) to finish the process and generate the widget code.
Click Copy to get the widget code and paste it into your website.
Form Widget (Search Bar)
With this tool, you can generate a custom search bar that will allow travelers to search and book one or more of your accommodations directly from your website.
Options available in the settings:
Search type
You can choose whether the search engine will work on:
Individual accommodations
Listings (grouped sets of accommodations)
Accommodation
Choose whether you want to show all accommodations or a specific one from the drop-down.
Results
Display options:
Accommodation units
Zones
Filters visible in the bar
Decide which filters to show before you search:
None
Zones
Accommodations
Behavior when opening results
Define how the results page will open:
In a new tab
On the same tab
Preview
On the right side you can see different examples of the visual design of the search engine, adaptable to the style of your website.
HTML code to embed
In the end, you can copy the generated code with the "Copy Code" button. This code must be pasted into the HTML of your website, in the location where you want the search engine to appear.
Note:
This search engine is compatible with all types of websites, including pages made with WordPress. No advanced programming knowledge is required to use.
After configuring, click Save, give the widget an identifying name, and set the size and colors. Finally, click Save again and copy the generated code to embed on your website.
If you want more detailed information you can access the article Search bar
To be taken into consideration:
In case you already have a widget created, when you access the booking engine menu and the 'Publish on my website' section > 'Widgets', you will find the button to create a new one at the top right.
How to edit a widget that is created in AvaiBook
Once you have created a widget in AvaiBook, even if you have already inserted it on your website, you can modify it at any time in a simple way directly from the platform.
To do this, go to the menu: Booking Engine > Publish to my website > Widgets.
In this section, you'll see the full list of widgets you've created. To the right of each one, different available actions are displayed that will allow you to edit, view/get the code or delete the widget as needed.
