{"id":8031,"date":"2019-06-03T09:58:42","date_gmt":"2019-06-03T09:58:42","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=8031"},"modified":"2026-03-03T20:16:49","modified_gmt":"2026-03-03T20:16:49","slug":"jetelements-weather-widget-how-to-display-current-weather-and-forecast","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-weather-widget-how-to-display-current-weather-and-forecast\/","title":{"rendered":"How to Use Weather Widget"},"content":{"rendered":"
<\/svg><\/div>
Things to know<\/div>

OpenWeatherMap and Weatherbit are popular services providing current and previous days weather data, as well as weather forecasts. Both of them propose a free plan with limited functionality, but Weatherbit\u2019s plan has more options.<\/p><\/div><\/div>\n\n\n\n

Obtain an API Key<\/strong><\/h2>\n\n\n\n
\n

In this section, we explain how to obtain the WeatherBit.io<\/a> and OpenWeatherMap<\/a> API Keys.<\/p>\n\n\n\n

Receive a WeatherBit.io API Key<\/strong><\/h3>\n\n\n\n

Go to WeatherBit.io<\/a> and complete the registration \u2014 type in your email, username, and password. Click the “Create Account<\/strong>” button.<\/p>\n\n\n\n

\"\"<\/a><\/div>\n\n\n\n

Next, you will be asked to provide more information. You don\u2019t need to fill in every field; focus on the required ones (marked with *) and then tap the \u201cProceed to Dashboard<\/strong>\u201d button.<\/p>\n\n\n\n

Then, you will be redirected to the dashboard. <\/p>\n\n\n\n

Here, your Weather API<\/strong> is generated. Go to the API Key<\/strong> section and copy it.<\/p>\n\n\n\n

\"the<\/div>\n\n\n\n

<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

If you plan to use the Weather<\/strong> widget on commercial sites, please choose the appropriate pricing plan according to the Terms and Conditions<\/strong> of Weatherbit<\/strong>. Select the WeatherBit.io plan you need from the Weatherbit Pricing<\/a> page.<\/p><\/div><\/div>\n\n\n\n

Receive an OpenWeatherMap API Key<\/strong><\/h3>\n\n\n\n

Navigate to the OpenWeatherMap<\/a> site.<\/p>\n\n\n\n

\"the<\/a><\/div>\n\n\n\n

Log in to your account or create a new one: enter your username, email, and password. Then verify your account by pressing a link you\u2019ll receive in your mailbox. After that, you can use your account.<\/p>\n\n\n\n

\"the<\/a><\/div>\n\n\n\n

In the next step, move to the API<\/strong> tab, unroll it, and copy the generated default Key<\/strong> or press the \u201cGenerate<\/strong>\u201d button to create a new one.<\/p>\n\n\n\n

\"getting<\/a><\/div>\n\n\n\n

Add the API Key<\/strong><\/h2>\n<\/div><\/div>\n\n\n\n
\n

Proceed to WordPress Dashboard<\/em><\/strong> > Crocoblock > JetPlugins Settings > JetElements Settings > Integrations<\/em><\/strong>.<\/p>\n\n\n\n

Here, paste the copied API<\/strong> Key <\/strong>into the corresponding field: the Weatherbit.io API Key<\/strong> into the Weatherbit.io API (APIXU API deprecated) <\/strong>field and the OpenWeatherMap API Key<\/strong> into the OpenWeatherMap API (free & commercial plans) <\/strong>field.\u00a0<\/p>\n\n\n\n

\"inserting<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Activate the Weather Widget<\/strong><\/h2>\n\n\n\n
\n

Navigate to the Crocoblock > JetPlugins Settings > JetElements Settings > Widgets & Extensions<\/em><\/strong> and move the Weather<\/strong><\/a> toggle to activate it.<\/p>\n\n\n\n

\"\"<\/a><\/div>\n\n\n\n

Changes will be saved automatically.<\/p>\n<\/div><\/div>\n\n\n\n

Add the Widget to a Page<\/strong><\/h3>\n\n\n\n
\n

Open the page where you want to place the weather forecast block in the Elementor page builder. Find the Weather<\/strong> widget and drag and drop it to an appropriate section on the page.<\/p>\n\n\n\n

\"inserting<\/a><\/div>\n\n\n\n

Once added, the widget will automatically display data.<\/p>\n<\/div><\/div>\n\n\n\n

Configure the Settings<\/strong><\/h3>\n\n\n\n
\n

The Weather<\/strong> widget has two Content<\/strong> settings tabs: Weather<\/strong> and Settings<\/strong>. The Weather <\/strong>settings include:<\/p>\n\n\n\n