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

![Phoenix](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/covers/8c395990-d5fc-4dc6-a8c1-cfb646603fa3.png?quality=75&resize=contain&width=640)

# Phoenix

Add Bookingmood booking calendars to your Phoenix website

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

Voeg Bookingmood toe aan je [Phoenix](https://phoenixsite.nl/)-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 _Ingesloten_ insluitcode. Die heb je in de volgende stap nodig.

## [Voeg de widget toe aan Phoenix](#voeg-de-widget-toe-aan-phoenix)

Phoenix voert geen scripts uit in HTML-blokken. Daarom voeg je de widget en het script dat de hoogte regelt apart toe.

- Klik op het _+_-pictogram om inhoud toe te voegen.

![Inhoud toevoegen](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/images-84b8a728-9f8f-4032-8642-2e62950eb1e9.png?quality=75&resize=contain&width=3840)

- Klik op _HTML_ en plak de insluitcode die je hebt gekopieerd.
- Verwijder de delen _script_ en _style_, zodat alleen het _iframe_ overblijft.
- Klik op _+ Toevoegen_.

![HTML](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/images-8ae4bd69-86bf-4c11-b7df-16b80a2063f0.png?quality=75&resize=contain&width=3840)

- Ga naar _Instellingen_ > _Custom scripts_.

![Custom scripts](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/images-092abcb1-3290-4e0a-bb08-77cba3d583cc.png?quality=75&resize=contain&width=3840)

- Voeg een script toe met deze instellingen:
  - Naam: een naam naar keuze, bijvoorbeeld _Bookingmood resize_
  - Scriptplaatsing: _body-tag_
  - GDPR compliance: _Functional (user consent not required)_
  - Optimaliseer script voor Pagespeed: uit

![Custom scripts](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/images-ee6dfeae-add6-4187-a37a-d3723bfde38d.png?quality=75&resize=contain&width=3840)

- Plak de volgende code en sla op. Krijg je een waarschuwing, dan kun je die gerust negeren.

```
<script>
  window.addEventListener("message", function (event) {
    try {
      const height = JSON.parse(event.data).height;
      if (!(height > 0)) return;
      const frames = document.getElementsByTagName("iframe");
      for (const frame of frames) {
        const frameWindow =
          frame.contentWindow || frame.contentDocument.defaultView;
        if (frameWindow === event.source) {
          frame.height = height;
          frame.style.borderRadius = "12px";
          frame.style.width = "100%";
          frame.style.border = "none";
        }
      }
    } catch {}
  });
</script>
```

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