JetElements Weather widget is a fully customizable tool for showcasing weather conditions for any location in real-time. You can provide users with weather details, such as air temperature, precipitation, and wind speed in one place using the Weather widget.

Creating Weather API Key

Go to WeatherBit.io and complete a simple registration. Type in your email, username, and password. Click the “Create Account” button.

You will be asked to fill some more info. You don’t need to fill every field, just focus on the required ones (those with the * mark), then tap on the Proceed to Dashboard button.

That’s it, your Weather API is generated. Go to the API Keys/Admin tab, copy it, and insert it to the WordPress Integration page.

Adding and customizing weather block

1 Step — Add Your API Key

Proceed to JetPlugins > JetElements Settings > Integrations and paste the key to the Weatherbit.io API Key field, so the weather information will be displayed correctly.

2 Step — Add the Weather Widget to the page and customize it

Open the page where you want to place the weather forecast block in the Elementor page builder. Find the Weather widget and drag and drop it to an appropriate section on the page.

Now you can see the settings block of Weather widget on the left. There are Content, Style, and Advanced tabs, where it is possible to customize the widget according to your needs. In the Content tab, there are two settings blocks. Let’s take a closer look on the features.

Weather block

• Location. In this field, you define what country the weather forecast will be shown for. The location has to be inserted in a certain order: the name of the city, state, and then country;
• Units. If in this drop-down menu you will choose the “Metric” option, the temperature will be shown in Celsius degrees and other rates in metric units. And if you choose the “Imperial” option, the temperature will be shown in Fahrenheit degrees;
• Time Format. In this drop-down menu, you can choose the 12-hour or 24-hour time format.

Settings block

• Show title. This toggle enables showing the city title to the users. If you choose to turn it on, you will also be able to define the Title Text and Title HTML Tag;
• Show country name. As it is obvious from the name, this toggle allows you to choose whether to show or not show the name of the country;
• Show current weather. If you want to show current weather to the users – turn this toggle on;
• Show current weather details. Humidity, wind speed, max, and min temperature – all that rates can be added by turning on this toggle;
• Show forecast weather. By turning this toggle on you can add a weather forecast for a few days (from 1 to 7).

When you are done with the settings, go to the Style tab. There you can determine how a title, current weather details, and forecast weather will look. Here are a few examples of styling:

That’s it. Click the “Update” button, and weather data will be shown on your website in an attractive and convenient form. As you can see, it is easy to enrich the content of your website with a weather element using the JetElements Weather widget.