If you already have a website, you can add Hospitable’s booking functionality using widgets. This allows guests to view availability, see pricing, and submit booking requests directly from your site.
This article explains how to generate and add a booking widget to your website.
Before You Start
Make sure:
You have an existing website (e.g., WordPress, Squarespace, Wix, or custom-built)
Your properties are eligible for Direct bookings
Your Direct setup is complete
Direct add-on is activated in Hospitable
A payout method is added to enable Direct bookings- Your website uses HTTPS (SSL/TLS) for secure embedding
Also see: Managing Property Eligibility for Direct Bookings
How to Get Your Widget Code
Each property has its own booking widget.
To access the widget code:
Go to Direct Bookings > Website
Select your site or create a new one
Open the Properties section
Find the property you want to embed
Open the options menu (three dots)
Click Copy widget code
This code is unique to that property.
Property list in Direct Websites with a three-dot menu and Copy widget code option
Add the Widget to Your Website
Once you have the code:
Open your website editor
Navigate to the page where you want the booking widget to appear
Add an HTML embed block (or equivalent)
Paste the widget code
Save and publish your page
The widget will load on your page and allow guests to start the booking process.
Website page with a booking widget showing calendar, pricing, and booking button
Set Up One Widget Per Property
Each property requires its own widget.
For best results:
Create a dedicated page for each property
Add the corresponding widget to each page
This ensures:
Accurate availability and pricing
Compatibility with features like property search and distribution
Each property must have its own widget and page to function correctly.
Optional: Add a Search Widget
If you have multiple properties, you can also add a search widget. This widget enables guests to search across multiple properties, select dates, and specify guest count. Available properties are displayed at the top, while unavailable ones are shown below. Clicking on a property redirects guests to its booking widget with pre-filled dates.
This allows guests to:
Search across all properties
View availability based on dates and guest count
Navigate to individual property pages
Also see: Direct Multi-Property Search
Platform-Specific Considerations
Some website builders may require additional setup.
For example:
Wix may require developer mode or additional configuration
Some platforms restrict how embedded scripts behave
Also see: Using Hospitable with Wix
Widget behavior may vary depending on your website platform.
Test Your Widget
After adding the widget:
Open your page in a browser
Select dates and check availability
Start a booking request to confirm it works
Use an incognito window to avoid cached results.
Common Issues
If your widget is not working, consider the following troubleshooting steps:
Ensure the widget code is pasted correctly into the HTML.
Verify that your website uses HTTPS.
Check for overlapping elements on the webpage and adjust the layout if necessary.- Ensure your website uses HTTPS (SSL/TLS) for secure embedding
The code may not be fully pasted
The property may not be eligible
The page may not support embedded scripts
Also see: Troubleshooting Widget Issues
Important Things to Know
Widgets sync automatically with pricing and availability
Each property requires its own widget
You must manage your own website separately
Widgets do not control your site’s design
Some platforms may require additional configuration
FAQs
Will my Direct site's calendar stay in sync with my OTA calendars (Airbnb/Vrbo/Booking.com)? Yes, automatically. Hospitable runs a unified calendar — any reservation made on a connected channel (including Direct) instantly blocks the date everywhere else, and the Hospitable calendar is the single source of truth. No setup needed beyond connecting the channels.
Can Hospitable Staff Help with Embedding Widgets? Hospitable provides guides and resources for embedding widgets, but the process is self-service. Contact your web developer for assistance if needed.