Layouts

There are two layouts. Set one with data-layout.

bar

A single horizontal row. Use it across the full width of a page — a homepage hero, under a header, above a list of rooms.

data-layout="bar" — the default. Live widget, loaded from rentx.al — an empty box here means rentx.al is unreachable, not a broken page. Searching opens RentX in a new tab.

<script src="https://rentx.al/embed.js"
  data-rentx-partner="your-partner-id"
  data-layout="bar"
></script>

panel

A stacked card. Use it in a sidebar or any narrow column.

data-layout="panel". Live widget, loaded from rentx.al — an empty box here means rentx.al is unreachable, not a broken page. Searching opens RentX in a new tab.

<script src="https://rentx.al/embed.js"
  data-rentx-partner="your-partner-id"
  data-layout="panel"
></script>

Give panel at least 300px

Below 300px wide, the location list is wider than the space it has and gets cut off. If your sidebar is narrower than that, use bar instead.

Width and height

The widget fills the width of whatever you put it in, so you control the width with your own page. Height is automatic: the widget tells your page how tall it needs to be, and grows when the calendar opens and shrinks when it closes.

Before the first measurement arrives, a bar is 190px tall and a panel is 340px. That only matters for the split second before the widget loads.

The one case where height is not automatic is the iframe fallback, which uses a fixed height.