What Widgets Are
Widgets let you add SympleHost booking tools to a website you already own. Instead of sending guests away from your brand site, you can embed availability search or calendar blocks and route guests into checkout.
Use widgets when:
- You already have a WordPress, Webflow, Squarespace, Wix, Framer, or custom website.
- You want guests to search availability from your existing site.
- You want to show an availability calendar for a specific property.
- You want SympleHost to power checkout while your existing website stays live.
Widgets are available from the Websites module after you have a published SympleHost website.
Available Widget Types
| Widget | Best For |
|---|---|
| Search widget | Let guests search across available listings on your website. |
| Calendar widget | Show availability for one specific listing. |
The search widget only works when the website has at least one selected listing that is active, not archived, and direct booking enabled.
The calendar widget is available for listings selected on that website. If a listing is inactive or direct booking is disabled, it may show as unavailable.
Get Widget Code
- Go to Websites.
- Open the Widgets tab.
- Choose the published website you want to use.
- Select Search or choose a listing calendar.
- Click Get Code.
- Adjust the widget style if needed.
- Copy the code.
- Paste it into your external website.
If you are using a website builder, paste the code into an embed, custom HTML, or code block component.
Choose JavaScript or iframe
The embed modal can provide two formats.
| Format | When to Use |
|---|---|
| JavaScript | Best default for most websites because it can load the widget with the recommended script. |
| iframe | Useful when your website builder does not allow external scripts but does allow iframe embeds. |
If one method does not work in your website builder, try the other.
Style the Widget
You can adjust:
- Background colour.
- Text colour.
- Border colour.
- Border width.
- Corner radius.
- Alignment.
- Calendar direction.
- Heading and body fonts.
Save defaults if you want the same widget style to apply again later.
Test the Embed
After adding the widget to your external website:
- Open the public page in a private browser window.
- Check that the widget loads.
- Try selecting dates or searching availability.
- Confirm the checkout link opens correctly.
- Test on mobile.
If the widget does not appear, check whether your website builder blocks scripts or if the listing is not direct-bookable.