[Integraties](https://www.bookingmood.com/nl-NL/integrations) [Website builder](https://www.bookingmood.com/nl-NL/integrations?category=Website%20builder)Wix

![Wix](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/covers/0bad5070-0977-47a2-be8c-341d744f877a.png?quality=75&resize=contain&width=640)

# Wix

Voeg boekingskalenders van Bookingmood toe aan je Wix-website

[Documentatie](https://www.bookingmood.com/nl-NL/docs/channels/widgets) [wix.com](https://wix.com/) ✓ Beschikbaar

Voeg Bookingmood toe aan je [Wix](https://www.wix.com/)-website, zodat gasten de beschikbaarheid kunnen bekijken en je accommodatie direct kunnen boeken zonder je site te verlaten. Je stelt het één keer in; daarna verschijnt elke wijziging in Bookingmood automatisch op je website.

## [Maak een widget](#maak-een-widget)

- Maak een widget in Bookingmood. In [Widgets](https://www.bookingmood.com/nl-NL/docs/kanalen/widgets) lees je hoe.
- Klik op _Insluiten_ en kopieer de _oEmbed_-link. Die heb je in de volgende stap nodig.

## [Voeg de widget toe aan Wix](#voeg-de-widget-toe-aan-wix)

- Open de pagina waarop je de widget wilt tonen.
- Klik op _+ Elementen toevoegen_.

![Elementen toevoegen](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/images-53a1857d-d666-4e37-b8ce-18ff604b7244.png?quality=75&resize=contain&width=3840)

- Klik op _Code embedden_ > _Embeds_ > _HTML insluiten_.

![HTML insluiten](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/images-3c21cca4-9ee0-4d19-aa43-e66fc7682945.png?quality=75&resize=contain&width=3840)

- Plak de oEmbed-link in het veld voor het websiteadres en klik op _Toepassen_.

![Plak de Bookingmood oEmbed URL in het website address veld](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/public/ec1f0739-aba3-48f9-ba4f-d05f6b4ee20d.png?quality=75&resize=contain&width=3840)

- Pas het formaat van het element aan zodat het goed op je pagina past.

![Formaat wijzigen](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/images-df20f468-326a-4556-bf87-ca326c57512d.png?quality=75&resize=contain&width=3840)

- Zet _Dev Mode_ aan en plak de volgende code in de code-editor. Die geeft de zoekparameters van de pagina, zoals data en aantal gasten, door aan de widget.

```
import wixLocationFrontend from "wix-location-frontend";

$w.onReady(() => {
  const s = new Set();
  const search = wixLocationFrontend.url.split("?")[1] ?? "";
  for (const iframe of $w("HtmlComponent"))
    iframe.onMessage(() => {
      if (!s.has(iframe)) {
        s.add(iframe);
        iframe.postMessage({ search });
      }
    });
});
```

![Wix Velo editor met ingevulde code](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/images/1f490fd3-0aff-415a-8542-efe571b2f0bb.png?quality=75&resize=contain&width=3840)

Klaar. Wijzigingen die je in Bookingmood maakt, verschijnen nu automatisch op je website.

Kijk je liever? In deze video zie je dezelfde stappen.

## [Veelgestelde vragen](#veelgestelde-vragen)

### [Waarom past de widget zijn hoogte niet automatisch aan?](#waarom-past-de-widget-zijn-hoogte-niet-automatisch-aan)

Wix ondersteunt het dynamisch aanpassen van de grootte van ingesloten frames niet, dus je stelt het formaat zelf in de editor in. Wil je dat Wix dit gaat ondersteunen, [dien dan een verzoek in op het Wix-forum](https://forum.wixstudio.com/search?q=resize+HtmlComponent).

### [Waar krijg ik meer hulp met Wix?](#waar-krijg-ik-meer-hulp-met-wix)

Voor uitgebreide hulp met je Wix-site kun je terecht bij [Wix Rocket](https://www.wixrocket.com/bookings-page).