Built by owners, for owners.

Wix and Widgets -transparent background

Autumn J
May 13, 2020 12:31 PM
Joined Apr, 2020 5 posts

Hi all and especially to the magic person who might be able to help me.

I'm using WIX for my web page and adding widgets. Wix does not have the functionality to open or expand the page for a widget so the space has to be provided on the page for the full widget. When using the Availability search this leave a large blank space on the page until the guests chooses to search for availability.

Right now I can over lay the widget bringing it to the front so it opens on top of other features. The widgets all seem to have a transparent back ground.

Does anyone know if there is a way to select for the widgets to have a white background rather than transparent. Is this a feature I would need to request? It seems to be my best option for a seamless integration on WIX. IF anyone is a coder and would like to charge me to customize the code I'd be happy to pay!!

Any suggestions welcome.

Park City Adventure Lodging

Chris Hynes
May 13, 2020 3:40 PM
OR Team Member Joined Oct, 2012 1338 posts

Yes, the widgets are transparent by default when you embed them because usually you want them to blend into the site. If you've got a busy background, though, it can bleed through.

To set a background behind the widget, you can put a style attribute on the <div> in the embed code. So if you've got:

<div class="ownerrez-widget" data-propertyId="somethingsomething" data-widget-type="Rates" data-widgetId="othersomething"></div>
<script src="https://secure.ownerreservations.com/widget.js"></script>

Add a style attribute with background-color:#fff (which is white) in that <div> after the last attribute, but before the >. Like:

<div class="ownerrez-widget" data-propertyId="123512351235" data-widget-type="Rates" data-widgetId="123451235" style="background-color:#fff"></div>
<script src="https://secure.ownerreservations.com/widget.js"></script>

Autumn J
May 13, 2020 5:44 PM
Joined Apr, 2020 5 posts

Thanks so much for you help, I tried that and got mixed results.

Here is my code

<!-- Test Availability -->
<!-- OwnerRez Availability/Property Search widget -->
<div class="ownerrez-widget" data-widget-type="Test Availability - Availability/Property Search" data-widgetId="2f27ff2d04604f47aa49975bafdf5574 "style="background-color:#fff"></div>
<script src="https://secure.ownerreservations.com/widget.js"></script>

Now on my page preview the widget shows the narrow box with the dates to select Availability but the calendar drop down is cut in half and the result fill into that same small box rather than filling the space designated for the widget? Not sure you understand my explanation and not sure if there is a way to attach a screen shot.

Chris Hynes
May 13, 2020 6:29 PM
OR Team Member Joined Oct, 2012 1338 posts

You can't post screenshots on the forums yet (we're working on it).

It looks like the HTML is close but not quite..

Next to the style attribute it should be:

5574" style=

i.e. the " needs to be next to the 4 with a space between it and the s, not next to the s.

If that doesn't fix it, shoot us an email with a screenshot to help@ownerreservations.com