2 min lues

# Phoenix

**You can easily add a Bookingmood widget in your website built with** **[Phoenix](https://phoenixsite.nl/)****.**

## Create a Bookingmood widget

- As a first step, you need to create a widget in Bookingmood. Here you can read how to do that: [Creating a widget](https://www.bookingmood.com/en-US/docs/widgets/create-a-widget). You can also watch the video on the bottom of the page.

## Add the widget in Phoenix

- Select the + icon to insert content

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

- Click on _HTML_.
- Copy and paste the embed code of your widget that you created in step 1.
- Remove the _script_ and _style_ parts.
- 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)

- Configure the custom script
- Using a name of your choice (e.g. Bookingmood resize)
- Script placement should be "body-tag"
- GDPR compliance should be "Functional (user consent not required)"
- Optimize script for pagespeed should be off

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

- Finally, paste the following code. When you get 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>
````
```

Dernière modification 31 août 2026