BetterSTR widgets put live content from your properties on your own website or direct booking site, such as one built with Wix or WordPress. You set the widget up once, copy a short piece of code, and paste it into your site. The content keeps itself up to date after that.
The four widgets
- Weather – current conditions, an hourly outlook and a 5-day forecast for the property. Visitors can switch between °C/°F and km/h/mph.
- Viator activities – local tours and things to do near the property.
- Guidebook – your digital guidebook, shown inside a phone-sized frame the way guests see it. Edits to the guidebook show up straight away.
- Property listing – photos, summary, amenities, description, sleeping layout and reviews, pulled from your PMS.
Create your widget code
- Go to Properties and open the property.
- In the Actions panel on the right, click Create Widget. This opens the widget generator for that property.
- Under Sections (1), pick the widget you want: Weather, Viator activities, Guidebook or Property listing. All widgets lists them with a short description of each.
- Under Settings (2), choose the property and adjust the options (see below).
- Check the Preview (3). It updates as you change the settings.
- In the Embed code box (4), pick JavaScript or iFrame and click Copy code.
Don’t see your property or the Create Widget button?
Only properties with an active guidebook appear in the widget generator. Some integrations don’t show Create Widget in the Actions panel; you can always open the generator directly at gb.betterstr.com/members/tools/widgets/ and choose the property from the Property list.
Widgets are for your own website. To show the weather or activities inside a guidebook, use the shortcodes {{weather_report}} and {{activities}} instead.
Widget settings
- Weather: Property, Units (Metric °C, km/h or Imperial °F, mph), Width (100%, 300, 400 or 500px) and Height (550 to 1200px). The widget scrolls if the forecast is taller than the height you pick.
- Viator activities: Property, Width and Height. Activities are picked from around the property’s location.
- Guidebook: Property, Phone size (Small 330px, Standard 375px or Large 425px wide), Width and Height. Changing the phone size sets a matching height for you.
- Property listing: Property, a Loading delay (none to 4 seconds, default 3) so the rest of your page loads first, and Show tick boxes for each section. Untick anything you already show elsewhere on the page. This widget only has JavaScript code and sizes itself to fit.
JavaScript or iFrame?
The JavaScript code is a placeholder <div> plus a script from api.betterstr.com, which loads the widget when it scrolls into view. The iFrame code is a single <iframe> tag. Both show the same widget; if your website builder strips out scripts, use the iFrame version. For example, the weather widget’s JavaScript code looks like this:
<div class="betterstr-weather-widget" data-width="100%" data-height="550px" data-uuid="YOUR-PROPERTY-ID" data-units="metric"></div>
<script src="https://api.betterstr.com/embed/weather-widget.js"></script>Steps to add to Wix:
- Copy the embed code from BetterSTR (see above).
- Open your Wix site editor and go to the page where you want the widget.
- Click Add Elements (+) on the left, choose Embed Code, then Embed HTML.
- Click Enter Code on the new element, make sure Code is selected, paste the BetterSTR code and click Update.
- Drag and resize the element to fit your layout, then click Publish.
Steps to add to WordPress:
- Copy the embed code from BetterSTR (see above).
- On a page or post: open it in the WordPress editor, add a Custom HTML block where you want the widget, paste the code, then click Update or Publish.
- In a sidebar or footer: go to Appearance > Widgets (or Appearance > Editor on block themes), add a Custom HTML block to the area you want, paste the code and save.
Other website builders work the same way: look for an “HTML”, “Embed” or “Custom code” element and paste the code into it.
