How to Embed the Weather Forecast on Your Website

By placing weather data on your web resource, you can make it a decision-making factor in choosing seasonal goods or travel destinations. Also, people can choose the date for outdoor event, depending on the forecast. It’s important to make your website full of dynamic and useful information, and thus increase the time users spend on your website.

Weather widget for website

Being a web developer or website owner, you might need such an interesting instrument on your website as swift as possible. The problem is that you’ll need to fetch data from another website, providing info about the weather. It’s usually impossible to do it for free, only by using their SDK or API, which requires A LOT OF programming knowledge. It’s a complicated task even for an experienced developer. 

The way out is quite simple and surfacing: you can use a ready-made solution called Weather widget.

By using a customizable Weather, you’ll get an awesome possibility to create a web page block with a forecast which looks professional and complete. You’ll add any information: from temperature to humidity and atmospheric pressure - in mere seconds in a visual configurator.

Namely Elfsight Weather widget offers gorgeous benefits and amazing design:

• Option to present the up-to-date weather in any place
• 3 approaches to enter location: the coordinates, the ZIP code, and the name
• More than thirty languages supported
• Possibility to present a key weather photo which reflects the current state
• Option to show additional data: humidity, elements, wind velocity, and pressure
• Fahrenheit or Celsius temperature units

And of course, your no coding experience shouldn’t bother you, as our customizable weather widget can be created and altered without writing a single line of code.

This widget is responsive, which means it will look amazing on all devices: from smartphones to computer and tab screens. It also works on all the most popular platforms allowing to create and maintain websites: WordPress, Wix, Shopify, Drupal, and Joomla. The widget can be added anywhere where there’s an opportunity to add custom HTML.

Below, there are popular instructions on adding weather to the most wide-spread platforms, enjoy yourself!

Add weather widget with GTM

As you use any of the most prominent CMS or site builders, you might notice that you have a great opportunity to add custom HTML. It means that you can add widgets by placing only two lines of code in your website, and your widget will appear live right away.

However, this opportunity is not provided by all the web platforms. When you come across any difficulties with adding widgets through custom HTML, you can always embed it with the help of a general-purpose instrument called Google Tag Manager (or GTM). In a few words, it allows you to add any widget to any website by creating a tag and a trigger for it to appear, and after doing it you’ll make the widget show up on a web page. 

Here’s how you can embed weather with GTM:

1. Log in or sign up in Google Tag Manager
2. Create a new tag, choose ‘Custom HTML’
3. Embed the first line of your Weather installation code to the tag
4. Create a trigger for adding the tag to the web page
5. Save the tag and publish the changes

Great job! Weather forecast will appear after you finish.

Add Weather in HTML

Embedding widgets in HTML is as easy as abc. You simply copy the installation code in the popup after creating the weather forecast, and paste it to the required place in an HTML code. Your widget will appear where you place it.

No matter if you have never coded before, because you won’t need to. You’ll simply pick up any customizable template out of 8, adjust it in a visual editor with the help of buttons and sliders, and copy two lines of code! These lines will contain all the info about your widget and its content, so, the weather forecast will appear after placing it in the website HTML code. Here’s what you need to do:

Choose a customizable template in the list of 8 -> Adjust its content the way you wish -> Copy widget installation code -> Embed it in the needed place in HTML code of a website.

Find out more details about the process and watch a video on this page.

How to embed WordPress Weather widget

WordPress is among the very best platforms for anyone creating a portfolio website. It’s fairly obvious that you are willing to save your money and time, and your best idea here is to use an already created no-code tool called plugin. 

Benefits you get by using a plugin

1. You don’t need to write JS code in the WordPress weather forecast
2. There are a lot of templates putting forward professional concepts for your plugin
3. You make the weather forecast yourself, without a web designer or developer, and you would never bother about the widget's functionality and design
4. You may test the customizable widget in a free visual configurator

With the Elfsight Weather widget you may instantly place any weather forecast on the website, improve the UX in just minutes and personalize the weather widget the way you need. 

Features of the Elfsight Weather plugin for WordPress

• Option to display a key weather photo reflecting the recent state
• Option to show the current weather in any area
• Celsius or Fahrenheit temperature units
• Three ways to enter location: the name, the coordinates, and the ZIP code
• 30+ languages supported
• Option to present additional info: elements, pressure, humidity, and wind velocity

You are free to explore the widget in more detail here. 

Moreover, bear in mind that there are eight professional customizable templates that you can easily find in the free online demo. You are free to discover how to show various types of weather forecasts, whether it’s current temperature, a detailed forecast, or an hourly forecast. Below, you can find some of the templates, enjoy:

• Detailed Forecast
• Daily Forecast
• Current Weather

How to add a Weather plugin to a WordPress website

There’s a chance to add the Weather plugin to WordPress in a few various ways. You can easily do it yourself after checking our guideline and watching a video on this page. 

Here are a few more ways to embed the Weather on WordPress. For example, you may attach the tool with the help of Google Tag Manager. 

Embed the plugin through WordPress admin panel

1. After you’ve logged in, go to “Pages” and select any page you need.
2. Add a custom HTML block to the required part of the page. 
3. Paste your widget’s code in this block. 
4. Click “Update”.

This is like this, your widget will come out on the website right after you finish! 

Ask the proficient Elfsight support specialists to help:)

Yes, if your widget is on any paid plan, you can always drop them a note and they’ll be happy to embed the Weather forecast plugin for you. Just reach them out through the Elfsight Help Center and obtain the Weather plugin added by professional developers!

How to add Weather to Wix

Wix is among the very best platforms for anyone creating a portfolio website. Very likely you need to save your time and truly need your weather forecast to look professional on the site. In such circumstances, the best decision is to apply an exclusive widget. 

Benefits you will have by using a widget

1. You don’t need to code anything in the Wix weather forecast
2. There are various templates presenting professional ideas for your tool
3. You create the weather forecast yourself, without a web designer or developer, and you never have to bother about the widget's design and functionality
4. You may test the plugin in a free visual configurator

With the Elfsight Weather plugin you may promptly place any weather forecast on the website, improve the UX in just seconds and adjust the customizable widget anyhow you want. 

Features of the Elfsight Weather widget for Wix

• Option to display the present weather in any location
• Possibility to show additional info: humidity, pressure, elements, and wind velocity
• Celsius or Fahrenheit temperature units
• Thirty languages supported
• Three ways to enter location: the ZIP code, the name, and the coordinates
• Option to show a key weather image reflecting the current conditions

You are welcome to explore the widget in greater detail here. 

In addition, take into account that there are 8 professional customizable templates which you can conveniently discover in the free online demo. You can consider how to display various types of weather forecasts, whether it’s a detailed forecast, an hourly forecast, or current temperature. Below, are some of the templates, have a look: 

• Detailed Forecast
• Daily Forecast
• Current Weather

How to embed a Weather plugin in Wix

You can add the Weather plugin to Wix in a few various ways. You may easily do it yourself after reading our guideline and minding a video on this page. 

Below you’ll find some more methods to embed the Weather on Wix. For instance, you can attach the widget with the help of Google Tag Manager. 

Install the widget via Wix admin panel

1. Start editing site. 
2. Open the website editor, click the ‘Plus’ icon
3. Click the ‘Embed section’ and select ‘HTML iFrame’
4. Click “Enter code” and paste the installation code to this block
5. Click “Apply”
6. Move the widget block to the needed place on a page, adjust its size
7. Publish the changes

This is like this, your widget will appear on the website right after you finish! 

Ask the professional Elfsight support specialists to help:)

And, of course, if you use a widget on any paid plan, you can always ask them for installation and they’ll be happy to embed the customizable forecast widget for you. Simply contact them through the Elfsight Help Center and acquire your Weather widget added by professionals!

How to add Shopify Weather widget

Shopify is among the main platforms for content creators. Most likely, as a website owner you want to gain time and genuinely want your weather forecast to look professional on the website. In this case, the wisest decision is to use an exclusive widget. 

Benefits you get by using a widget

1. You don’t need to code anything in the weather widget
2. There are numerous templates presenting professional concepts for your widget
3. You make the weather forecast on your own, with no web designer or developer, and you will never bother about the widget's design and functionality
4. You can test the weather in a free online editor

With the Elfsight widget you can instantly position any weather forecast on the site, enhance the UX in mere minutes and customize the weather widget the way you want. 

Features of the Elfsight Weather widget for Shopify

• Fahrenheit or Celsius temperature units
• More than 30 languages supported
• Possibility to show a theme weather photo reflecting the present conditions
• Option to present additional info: pressure, elements, wind velocity, and humidity
• Opportunity to display the current weather in any place
• 3 ways to input location: the coordinates, the name, and the ZIP code

You can explore the widget in greater detail in free online demo. 

In addition, take into consideration that there are 8 professional customizable templates that you can conveniently find in the free online demo. You are free to discover how to show different types of weather forecasts, whether it’s an hourly forecast, a detailed forecast, or current temperature. Below, you can find some of the templates, enjoy: 

• Detailed Forecast
• Daily Forecast
• Current Weather

How to embed a Weather widget in a Shopify website

You can add the weather forecast to Shopify in various ways. You may easily do it on your own after reading our guideline and watching a video on this page. 

Below you’ll find a few more methods to add the Weather to Shopify. For example, you may attach the customizable widget with the help of Google Tag Manager. 

Embed the plugin through Shopify admin panel

1. Go to the ‘Online Store’ section and press ‘Customize’. 
2. Click ‘Add Section’ in the left-hand menu and then click ‘Add’ in ‘Custom Content’. 
3. Remove the pre-installed sections. 
4. Click ‘Add Content’ and select ‘Custom HTML’. 
5. Paste the widget’s installation code to the ‘HTML’ field. 
6. Save the changes.

That’s it, your widget will come out on the website as soon as this! 

Ask the skilled Elfsight support specialists to help:)

Yes, in case you use a widget on any paid plan, you are always most welcome to drop them a line and they’ll be happy to add the Weather forecast plugin for you. Barely contact them through the Elfsight Help Center and acquire the Weather widget embedded by professionals!

How to add Weather to Drupal

Drupal is one of the best platforms for those who create sites for their businesses. Most likely you need to gain time and genuinely need your weather forecast to appear professional on the website. In this case, the wisest choice is to apply a special widget. 

Benefits you get by using a widget

1. You don’t have to write JavaScript code in your Drupal weather forecast
2. There are numerous templates offering professional ideas for your weather
3. You make the weather forecast on your own, with no web developer or designer, and you never have to bother about the widget functionality and design
4. You have an option to check the plugin in a online demo

With the Elfsight Weather widget you can instantly position any weather forecast on the website, strengthen the UX in mere minutes and personalize the weather widget the way you need. 

Features of the Elfsight Weather widget for Drupal

• Thirty languages included
• 3 approaches to enter location: the name, the ZIP code, and the coordinates
• Opportunity to present additional info: humidity, elements, pressure, and wind velocity
• Possibility to present the present weather in any place
• Celsius or Fahrenheit temperature units
• Opportunity to display a theme weather picture which reflects the present state

You are welcome to explore the widget in greater detail in the online demo without even registration. 

What is more, take into consideration that there are 8 ready-made adaptive templates which you are free to quickly discover in the free online demo. You can discover how to present various types of weather forecasts, whether it’s current temperature, an hourly forecast, or a detailed forecast. Here you can find some of the examples, enjoy: 

• Detailed Forecast
• Daily Forecast
• Current Weather

How to embed a Weather plugin in a Drupal website

You can add the plugin to Drupal in diverse ways. You can smoothly do it yourself after minding a video and checking our guideline on this page. 

Here are some more ways to embed the Weather in Drupal. For example, you may attach the tool with the help of Google Tag Manager. 

Install the plugin via Drupal admin panel

1. Choose the page you would like to manage and click ‘Edit’.
2. Convert the page into Full HTML format and submit content in the initial HTML view. 
3. Paste your installation code to the required page area. 
4. Save the changes.

This is like this, your widget will appear on the website as soon as this! 

Ask the professional Elfsight support specialists to help:)

Yes, if your widget is on any paid plan, you can always drop them a line and they’ll be happy to embed the Weather forecast widget for you. Simply contact them through the Elfsight Help Center and get your Weather widget embedded by professional developers!

How to add Weather to Joomla

Joomla is among the very best platforms for those who create ecommerce websites and sell something. It’s fairly apparent you are willing to save your money and time, and your best choice here is to use a ready-made instrument called a plugin. 

Benefits you get by using a plugin

1. You don’t need to code anything in the Joomla weather forecast
2. There are numerous templates presenting professional concepts for your tool
3. You create the weather forecast on your own, with no web developer or designer, and you never have to bother about the widget's functionality and design
4. You have an option to try out the plugin in a free visual configurator

With the Elfsight Weather widget you can immediately position any weather forecast on the website, improve the UX in just minutes and personalize the weather widget anyhow you wish. 

Features of the Elfsight Weather widget for Joomla

• Thirty languages supported
• Possibility to present a key weather image which reflects the current state
• Opportunity to display the up-to-date weather in any area
• Opportunity to show additional information: pressure, humidity, wind velocity, and elements
• Celsius or Fahrenheit temperature units
• Three approaches to input location: the coordinates, the ZIP code, and the name

You are free to get a closer look at the widget in online demo. 

Moreover, bear in mind that there are 8 ready-made adaptive templates that you are free to conveniently find in the free online demo. You can discover how to display diverse types of weather forecasts, whether it’s an hourly forecast, a detailed forecast, or current temperature. Here you can find some of the templates, have a look: 

• Detailed Forecast
• Daily Forecast
• Current Weather

How to embed a Weather plugin in a Joomla website

There’s an opportunity to add the plugin to Joomla in a few diverse ways. You may smoothly do it yourself after watching a video and checking our guideline on this page. 

Below you’ll find some more methods to embed the Weather on Joomla. For instance, you can add the tool with the help of Google Tag Manager. 

Install the plugin through Joomla admin panel

1. Log into your Joomla Control Panel.
2. Navigate to the “Articles” tab in the left-hand menu.
3. Choose the required page in the list.
4. Press “Toggle Editor” and paste the installation code where you need.
5. Save the changes.

That’s it, your widget will come out on the web page as soon as this!

Ask the proficient Elfsight support team to help:)

And, of course, if you use a widget on any paid plan, you are always most welcome to ask the support team for installation and they’ll be happy to add the Weather forecast plugin for you. Simply contact them through the Elfsight Help Center and acquire the Weather plugin embedded by professional developers!

How to add Weather to Weebly

Weebly is among the main platforms for those who create websites for their businesses. Being a website owner, very likely you wish to save your time and genuinely need your weather forecast to appear professional on the site. In this case, the best choice is to use an exclusive widget. 

Benefits you get by using a widget

1. You don’t have to code anything in the Weebly weather forecast
2. There are a lot of templates offering professional ideas for your tool
3. You build the weather forecast yourself, without a web designer or developer, and you never have to bother about the widget design and functionality
4. You have an option to test the plugin in a online demo

With the Elfsight Weather widget you may instantly spot any weather forecast on the website, enhance the UX in mere seconds and adjust the weather widget the way you wish. 

Properties of the Elfsight Weather widget for Weebly website

• Fahrenheit or Celsius temperature units
• Option to show the current weather in any location
• Option to display a theme weather picture reflecting the recent conditions
• Opportunity to display additional information: humidity, wind velocity, elements, and pressure
• More than 30 languages included
• Three ways to type in location: the coordinates, the ZIP code, and the name

You can take a closer look at the widget in online demo without even logging in. 

What is more, bear in mind that there are 8 professional adaptive templates that you can quickly find in the free online demo. You can consider how to show diverse types of weather forecasts, whether it’s a detailed forecast, current temperature, or an hourly forecast. Below, are some of the examples, enjoy: 

• Detailed Forecast
• Daily Forecast
• Current Weather

How to embed a Weather widget in a Weebly website

You can add the customizable widget to Weebly in a few different ways. You can smoothly do it yourself after checking our guideline and minding a video on this page. 

Here are a few more methods to embed the Weather on Weebly. For example, you can attach the widget with the help of Google Tag Manager. 

Install the plugin through Weebly admin panel

1. Start editing your site. 
2. Drag and drop the ‘Embed Code’ element to the right page area. 
3. Click on the block on the page and then press ‘Edit Custom HTML’. 
4. Paste the widget’s installation code into the block and publish the changes.

This is like this, your widget will come out on the web page as soon as this! 

Ask the skilled Elfsight support team to help:)

And, of course, in case your widget is on any paid plan, you are always most welcome to drop them a note and they’ll be happy to add the Weather forecast plugin for you. Simply reach them out through the Elfsight Help Center and obtain your Weather plugin added by professionals!

Weather widget examples

There are quite many templates that you can consider in case you’d like to use a Weather widget. You can present a forecast for a user location, or for a location of your store. Also, you can insert a detailed forecast into a website, as well as a small and neat one, with essential information only.

Check some of the examples below and choose the one you like on this page.

Detailed Forecast

A very thorough and beautiful weather forecast can be helpful in many cases: for ticket sellers, for event makers, and simply for informational agencies. It shows all the details about the weather outside, including humidity, wind velocity, and pressure.

Hourly forecast

This template looks bright, yet neat. It isn’t overloaded with numerous details, showing only the most essential information.

Current temperature

Finally, let’s observe the minimalist and tiny template, showing only temperature. If it’s everything you need, this weather widget is right for you. It contains nothing more than figures and a picture of cloudiness.

FAQ

To master the widget on your website, you probably need to find answers to some other questions. Here’s what we have for you, if you wish to take total control of your widget.