How to Embed a Weather Widget on Your Website

With Jotform’s Weather Widget, you can display real-time weather information for any location directly on your website. Simply choose the location, customize the widget’s appearance, and embed it on your website to keep visitors informed about current weather conditions and forecasts.

Adding a Weather Widget is a great way to provide useful, up-to-date information for your audience. Whether you run a travel website, local business, event page, or community portal, displaying the weather can enhance the visitor experience and help users plan their day.

Creating Your Weather Widget and Getting the Embed Code for it

Before you can add the Weather Widget to your website, you’ll first need to choose the location, customize how the weather information is displayed, and copy its embed code. Here’s a quick walkthrough:

1. On the top-left side of your Workspace page, click on Create.

2. Then, in the menu that opens up, select Website Widget.

3. Next, enter Weather in the Search bar in the upper-left corner of the Choose Website Widget menu.
4. Then, at the bottom of the search results, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, under the General tab, set up these properties:
   • Display Weather For — Choose whether to display weather information for a specific location or a visitor’s location.
   • City, Zip, or Coordinates — Enter the location you want the widget to display weather information for.
   • Custom Location Name — Replace the default location name with your own custom label.
   • Temperature Unit — Choose whether temperatures are displayed in Celsius (°C) or Fahrenheit (°F).
   • Expand Forecast — Show or hide the extended weather forecast below the current weather conditions.
   • Forecast Days — Select how many days of weather forecast to display.
   • Weather Details — Choose which weather information to show, such as humidity, wind speed, feels-like temperature, and other available details.

6. Next, under the Styles tab, customize these properties:
   • Weather Template — Choose a visual style for how the weather information is displayed.
   • Weather Icon Animation — Enable or disable animated weather icons for a more dynamic appearance.
   • Background — Choose a background color for the widget.
   • Text — Set the color of the primary text displayed in the widget.
   • Secondary — Customize the color of secondary text and supporting weather information.
   • Corner Radius — Adjust how rounded the corners of the widget appear.

7. Then, scroll down and adjust these settings:
   • Jotform Branding — Show or hide Powered by Jotform in the widget.
   • Custom CSS — Apply your own CSS code for advanced styling beyond the built-in settings.

8. Now, under the Layout tab, configure these properties:
   • Card Width — Adjust the width of the widget to better fit your website’s layout.
   • Devices to Display On — Choose whether the widget appears on desktop devices, mobile devices, or both.
9. Once you’ve finished, in the pink navigation bar at the top of the page, click on Publish.

10. Then, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.
11. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.

12. Next, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily.

13. Then, follow the steps in the How to Embed Your Widget section to add it to your website.

That’s it! Your Weather Widget will now appear on your website with the location, design, and settings you selected, giving visitors quick access to current weather conditions and forecasts. See the screenshot below for an example of how it looks.