Pages 2.0 | Add the Weather Page Widget

🎯 Who this article is for: Page group owners, editors, and admins who want to add and configure the widget on a page, and anyone viewing a published page that includes it.

💼 Package requirements: The Weather page widget is available to Starter, Growth, and Enterprise.

🔒 Permissions: Adding or configuring the widget on a page requires admin, page group owner, or page group editor access.

1. Overview

Weather shapes decisions, what to wear to the office, whether an outdoor event goes ahead, how a regional team plans its week. The Weather page widget puts that information exactly where people already are, right on the page, so nobody has to open a separate tab or app to get it. Set one location so everyone sees the same conditions, or turn on geolocation so every visitor automatically sees their own, wherever they happen to be. Once it's set up, the widget takes care of itself: no one has to check it, refresh it, or remember to keep it current.

2. Use cases

• Give an office or location page its own local conditions: A regional hub, a specific office page, or a page built around an upcoming on-site event can show the actual weather for that location, so anyone checking before they travel or head in gets an accurate, current picture, right where they're already looking.
• Show every visitor their own weather automatically: Turn on geolocation once, and the widget takes it from there, detecting each viewer's location and showing their own conditions automatically. It's a small touch that makes a shared page feel personal to everyone who visits it, wherever they happen to be.
• Add practical, day of context to an event: A page built around an outdoor event, an office move, or a company gathering gets more useful the moment it can also answer "what should I expect when I get there." Pair the details of what's happening with the conditions people should plan around, and the page stays useful right up to the day itself.

3. Before you begin

• An admin must install the Weather Widget from the Apps Marketplace before it appears in the widget menu. See section 4.
• You need admin, page group owner, or page group editor access to add or configure the widget on a page.
• Decide upfront whether the widget will use a fixed location name or geolocation. These two settings are mutually exclusive, so choose one or the other, not both.

4. How to install the Weather Widget

1. Click your avatar in the navigation.
2. Go to Admin Settings → Apps.
3. Search for Weather Widget.
4. Click the Install button at the top right.
5. Accept the terms and conditions to complete installation.

The Weather Widget will now appear in the widget menu whenever you are editing a page in Pages 2.0.

5. How to add the Weather page widget

1. Navigate to the page where you want to add the widget.
2. Click the pencil icon (top right) to enter the page editor.
3. Go to Widgets and select the Weather Widget to place it in a section on the page.
   • 🔎 For general guidance on adding widgets to a page, see the Add and Manage Widgets article.
4. Hover over the widget and click the gear icon to open the configuration settings.
5. Configure the widget (see section 6), then publish the page to make it visible to everyone with access (e.g. viewers of the page).

6. How to configure and style the Weather page widget

Every setting here takes seconds to change, so it's easy to get the widget looking and behaving exactly how you want. To configure the widget, hover over it and click the gear icon to open the settings panel. 

Configure tab

• Widget header: Toggle on to display a header above the widget content.
• Use Geolocation: Toggle on to ask each viewer's browser for permission to detect their location automatically, rather than showing the same fixed location to everyone. When a viewer visits a published page with this turned on, their browser will prompt them to allow, allow once, or never allow location access. Geolocation and Location name are mutually exclusive, so turning this on means the location name field no longer applies and vice versa.
• Location name: Enter a city, town, or locality (a minimum of 3 characters is required). There's no character limit, though in practice a location name will typically be short. The widget recognizes what you mean even with a small typo (for example, entering "Hersinki" still returns Helsinki), so exact naming isn't critical. If it can't recognize or find the location entered, it falls back to showing a generic 20°C.
• Units: Choose Metric (°C, km/h) or Imperial (°F, mph). Metric is the default.
• Show 24-hour forecast: Toggle on to add an hour by hour forecast row covering the next 24 hours, each with its own icon and temperature. 
• Show weather details: Toggle on to add a grid of additional metrics: humidity, feels like temperature, wind (including direction and gusts), UV index, precipitation, pressure, visibility, and cloud cover.
• Hero layout: Choose Centered or Banner to control how the city name, time, current temperature, and condition are arranged. Centered is the default.

Style options

The Style tab controls the visual appearance of this widget instance. Changes you make here apply only to this specific widget and will not update automatically if the default style for the widget type changes. Click Reset to style default at the top of the tab to revert to the selected Brand Style default at any time.

🗒️ Note: Customizing the widget’s styling will only be available if the page group’s Brand Style is unlocked.

• Style option: Select a preset style or choose (Customize) from the Style option drop-down to set individual values.
• Padding: Control the spacing inside the widget using the slider (0px to 32px). Toggle Custom padding on to set each side independently.
• Border: Toggle on to add a border around the widget. You can set the border direction and border color. 
• Round corners: Use the slider to set the corner radius.
• Shadow: Toggle on to add a drop shadow to the widget. Choose between a small, medium, or large sized shadow.
• Background colour: Choose a background colour or keep the system default.
• Background image: Select an image source to display as the widget background. You can choose between a recommended image, browse Unsplash, or upload an image.
• Colour theme: Set the text and contrast theme. Automatic (Light, with dark text) is the default and detects the background automatically; you can also select a specific light or dark option.

8. Best practices

• Match the location to the page's purpose: A widget on a regional hub page should reflect that region, not the head office. Before publishing, double check the location name matches what the page is actually about.
• Use geolocation only where a shared location doesn't make sense: A single office or event page benefits from a fixed location everyone sees the same way. Geolocation is better suited to broader pages, like a general homepage, visited by people in different places.
• Turn on forecast and details intentionally, not by default: The extra rows add value on a page where people are actively planning around the weather, like an outdoor event. On a page where the widget is more of a quick reference, the current conditions alone may be enough, and keeping the widget compact avoids crowding the rest of the page.

9. Frequently asked questions

What happens when a viewer first encounters the widget with geolocation turned on?

The widget shows a message asking the viewer to grant location access, matching the browser's own permission prompt.

What happens if a viewer denies location access?

If a viewer disallows location access through their browser, the widget still gives them a way to try again: clicking "grant location access" within the widget itself. However, because the browser has already recorded that permission was denied once, this click surfaces a message telling the viewer they need to grant location access from their browser settings directly.

What happens if the location name isn't recognized?

The widget is forgiving of small typos. If you enter "Hersinki" when you meant "Helsinki," it still recognizes the intended city and shows the accurate location and weather. If it can't recognize or find the location entered, it falls back to a generic display of 20°C rather than an error.

Does the widget update in real time?

Weather naturally changes throughout the day, and the widget is designed to reflect current conditions rather than a snapshot from when the page was last published, so viewers checking it later in the day or on a different day see up to date information.

Can I use both a fixed location and geolocation?

No. Location name and Use Geolocation are mutually exclusive settings, choose one or the other for a given widget instance, not both at once.