Website widget
The website widget is a search box for your website. Guests pick dates and the number of guests, and the widget opens your booking engine with that search.
Add it to your website
- Open Settings > Booking Engine and click Website widget.
- Choose the style, layout (horizontal bar or vertical panel), language and whether the booking engine opens in the same tab or a new one. The preview shows the result.
- Click Copy code and paste it into your website where the search should appear.
The code looks like this, with your property ID:
<script src="https://widget.arecabooking.com/v1/widget.js" async></script>
<div data-areca-search data-property="YOUR_PROPERTY_ID"></div>
Most website builders (WordPress, Wix, Squarespace and others) have an "HTML" or "Embed code" block for this.
Options
The generator writes these for you. You can also change them in the code:
| Attribute | Values |
|---|---|
data-locale | en, de, es, fr, it, pl, pt |
data-layout | horizontal, vertical |
data-color | button colour, for example #0f766e |
data-background | a colour or transparent |
data-text | text colour |
data-radius | none, small, medium, large |
data-shadow | none, small, large |
data-font | Inter, Lato, Montserrat, Poppins, Raleway, Lora, Merriweather, Playfair Display |
data-promo | true shows a coupon code field |
data-heading | true shows a heading (vertical layout) |
data-target | _self same tab, _blank new tab |