[Інтэграцыі](https://www.bookingmood.com/be-BY/integrations) [Website builder](https://www.bookingmood.com/be-BY/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

Add Bookingmood booking calendars to your Wix website

[Дакументацыя](https://www.bookingmood.com/be-BY/docs/channels/widgets) [wix.com](https://wix.com/) ✓ Даступна

Add Bookingmood to your [Wix](https://www.wix.com/) 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 _oEmbed_ link. You need it in the next step.

## [Add the widget to Wix](#add-the-widget-to-wix)

- Open the page where you want to show the widget.
- Click the _+_ icon to add an element.

![Add element in Wix](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/images-55de77a0-ea24-4bf3-9bd0-32155c25c2e3.png?quality=75&resize=contain&width=3840)

- Click _Embed Code_ > _Popular Embeds_ > _Embed HTML_.

![Select Embed code > Popular embeds > Embed HTML](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/images-c50dcfe8-5580-4f31-b304-16fa5135ad7b.png?quality=75&resize=contain&width=3840)

- Paste the oEmbed link into the website address field and click _Apply_.

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

- Resize the element so it fits your page.

![Resizable Bookingmood widget in Wix editor](https://storage.crisp.chat/users/helpdesk/website/ea3d0ac3ea881800/wix-4_1nydo9j.png)

- Turn on _Dev Mode_ and paste the following code into the code editor. It passes the page's search parameters, such as dates and guests, on to the 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 with code snippet](https://ksxynoprjyugtwuaqdho.supabase.co/storage/v1/render/image/public/website/images/1f490fd3-0aff-415a-8542-efe571b2f0bb.png?quality=75&resize=contain&width=3840)

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

Prefer to watch? This video walks through the same steps.

## [FAQ](#faq)

### [Why doesn't the widget resize automatically?](#why-doesn-t-the-widget-resize-automatically)

Wix doesn't support resizing embedded frames dynamically, so you set the size by hand in the editor. If you'd like Wix to support this, you can [submit a feature request in the Wix forum](https://forum.wixstudio.com/search?q=resize+HtmlComponent).

### [Where can I get more help with Wix?](#where-can-i-get-more-help-with-wix)

For in-depth help with your Wix site, you can reach out to [Wix Rocket](https://www.wixrocket.com/bookings-page).