Home owners of
Villa for You
can show their accommodations on their own website with two widgets, which they set up from
MyVilla. Both are built with Vue 3, Tailwind CSS
and Pinia, and compiled with Vite into Web Components that run in a Shadow DOM. One
<script> tag is all a site needs: no framework on the host page, and no styles
leaking in or out. Colors, language and which accommodations to show are set with attributes or
query parameters. Both widgets are available in Dutch, English, German and French.
Visitors pick an accommodation, their travel party and a date range on a calendar that shows the bookable and closed periods. The widget fetches live prices as they go and shows the full breakdown: travel sum, what's included in the stay, additional costs, discounts and a refundable or non-refundable option. The Book button takes them to the booking page on villaforyou.com with everything filled in.
Try it out, it's the real thing.
A list of accommodations with photos, ratings and prices, with pagination and an optional Google map next to it. On a narrow container the visitor switches between the list and the map. Every tile links straight to the accommodation on villaforyou.com.