[Integrasjonar](https://www.bookingmood.com/nn-NO/integrations) [Website builder](https://www.bookingmood.com/nn-NO/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

[Dokumentasjon](https://www.bookingmood.com/nn-NO/docs/channels/widgets) [phoenixsite.nl](https://phoenixsite.nl/) ✓ Ledig

Add Bookingmood to your [Phoenix](https://phoenixsite.nl/) website so guests can check availability and book your rental without leaving your site. You set it up once, and every change you make in Bookingmood shows on your website automatically.

## [Create a widget](#create-a-widget)

- Create a widget in Bookingmood. [Widgets](https://www.bookingmood.com/en-US/docs/channels/widgets) explains how.
- Click _Embed_ and copy the _Inline_ embed code. You need it in the next step.

## [Add the widget to Phoenix](#add-the-widget-to-phoenix)

Phoenix doesn't run scripts inside HTML blocks, so you add the widget and the script that sizes it separately.

- Click the _+_ icon to insert content.

![Content insertion in Phoenix](https://storage.crisp.chat/users/helpdesk/website/ea3d0ac3ea881800/image_121d3p0.png)

- Click _HTML_ and paste the embed code you copied.
- Remove the _script_ and _style_ parts, so only the _iframe_ remains.
- Click _+ Add_.

![Embed code input in Phoenix](https://storage.crisp.chat/users/helpdesk/website/ea3d0ac3ea881800/schermafbeelding-2023-10-31-om_1lxpp2s.png)

- Go to _Settings_ > _Custom scripts_.

![Custom script selection in Phoenix](https://storage.crisp.chat/users/helpdesk/website/ea3d0ac3ea881800/image_1r7h9r4.png)

- Add a custom script with these settings:
  - Name: a name of your choice, for example _Bookingmood resize_
  - Script placement: _body-tag_
  - GDPR compliance: _Functional (user consent not required)_
  - Optimize script for pagespeed: off

![Custom script input in Phoenix](https://storage.crisp.chat/users/helpdesk/website/ea3d0ac3ea881800/schermafbeelding-2023-10-31-om_tn95ua.png)

- Paste the following code and save. If Phoenix shows a warning, you can safely ignore it.

```
<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>
```

That's it. Changes you make in Bookingmood now show on your website automatically.