AI WORLD HQCreate a tiny AI weather-helper widget for your blog with Hugging Face widgets
Learn how to embed a simple, interactive AI tool on your website to show real-time weather information.
This guide was written by AI. It passed automated fact and quality checks; no human editor reviewed it.
Ever wanted to add a touch of AI magic to your personal blog or website without needing to write any code? This guide will show you how to find a simple AI weather tool on Hugging Face and embed it as a "widget" – a small, interactive gadget – directly onto your site. By the end, you'll have a custom AI weather helper for your readers.
💡 Tip: tap a step’s number when you finish it — a green tick appears and your browser remembers how far you got.
- A free Hugging Face account: You'll create this in the first step.
- A web browser: Like Chrome, Firefox, Safari, or Edge.
- A blog or website: Where you have permission to edit the raw HTML code (for example, a WordPress blog, a personal site built with simple HTML, or a similar platform).
- Time: This will take around 15-20 minutes.
Discover a weather model
Now that you have an account, let's find an AI weather model to turn into a widget. Hugging Face is home to "Spaces," which are interactive, web-based demos of AI models. On the Hugging Face website, look for a navigation menu at the top or side of the page, and click on "Spaces." This will take you to a page listing many different AI demos. Once on the Spaces page, find the search bar. This is where you'll tell Hugging Face what kind of AI tool you're looking for. Type "weather" into the search bar and press Enter or click the search icon. This will filter the vast collection of Spaces to show you only the ones related to weather. Browse through the results and choose one that looks simple and functional, usually with a clear input field for a city or location.
**** If the "Spaces" link isn't immediately visible, try looking for a "Models" link first, as Spaces are often linked from there, or a general "Explore" section.
you see a list of AI Spaces related to "weather" appear on your screen.
Interact with the model
Before embedding the widget, it's a good idea to test the chosen weather model to make sure it works as expected. This step helps confirm that the AI model (the computer program trained to perform a specific task, like predicting weather) is functional and useful for your blog. Click on one of the weather Spaces you found in the previous step. You'll be taken to its dedicated page, where you'll usually see the "User Interface (UI)" – the visual layout with buttons, text fields, and displays – of the demo. Look for an input box, often labeled "City" or "Location." Type a city name into this box and click the "Submit" or "Generate" button, if there is one. The AI model will then process your request and display the weather information. Make sure the output makes sense, like current temperature or conditions. Try a different weather Space if your first choice doesn't respond or seems too complex.
**** Some Spaces might have slightly different layouts, or they might run slowly on the free tier if they're very popular.
the model successfully processes your input and displays weather information for the city you typed in.
Generate the embed code
Now that you've found a working weather model, let's get the special piece of computer code (called "HTML") that allows you to put content from one website onto another. This is known as the embed code.
On the specific Hugging Face Space page for your chosen weather model, look for a button or icon that suggests embedding or sharing. This is often a </> icon, a "Share" button, or sometimes an "Embed" option within a menu — if it's available, it may be located near the top-right of the demo frame or page. Click this option. A small window or panel should appear, providing you with different sharing options, one of which may be "Embed" or "Embed Code."
Some older Spaces might not offer a direct embed option, in which case you might need to choose another Space.
**** If you can't find a </> icon, look for a three-dot menu ... or a "Settings" gear icon, as embed options are sometimes hidden there.
a new window or panel pops up, clearly displaying a block of HTML code, often within a text box.
Copy the embed code
With the embed code generated, your next step is to copy it so you can paste it onto your blog or website. This code is the key to displaying your interactive weather widget. In the pop-up window or panel that appeared in the previous step, you will see the HTML embed code displayed. There is usually a "Copy" button right next to the code, or sometimes below it. Click this "Copy" button. This action will automatically copy the entire block of code to your device's clipboard, ready for you to paste it elsewhere. You don't need to understand what all the code means; just copy it as it is.
**** If there's no dedicated "Copy" button, you can manually highlight all the text in the code box using your mouse (click and drag) and then right-click and choose "Copy" (or use keyboard shortcuts like Ctrl+C on Windows/Linux or Cmd+C on Mac).
a small confirmation message like "Copied!" appears, or you can paste the code into a simple text editor to see it.
Embed the widget on your blog
Now for the exciting part: adding the weather widget to your own blog! You'll need access to your blog's editing interface where you can add or edit content. Log in to your blog's administration area. Navigate to the post or page where you want to add the weather widget. Most blog platforms, like WordPress, offer two views when editing: a "Visual" editor (which shows you what your post will look like) and a "Text" or "Code" editor (which shows the raw HTML). You need to switch to the "Text" or "Code" editor. Find the exact spot in your blog post or page where you want the weather widget to appear, then paste the embed code you copied earlier. Look for tabs or buttons labeled "HTML," "</>" (angle brackets), or "Source." If you're using a website builder with a drag-and-drop interface, look for an "Embed Code" or "Custom HTML" block you can add to your page. Do not switch back to the "Visual" editor yet, as the widget might not display correctly there.
**** The name of the code editor might vary.
the embed code appears in your blog's text editor.
View your new weather widget
The final step is to save your changes and see your new AI weather widget live on your blog or website. Once you've pasted the embed code into your blog's HTML editor, save or publish the changes to your post or page. The exact button will depend on your blog platform, but it's usually "Update," "Publish," or "Save Changes." After saving, visit the live version of your blog post or page in a new browser tab. You should now see the Hugging Face weather widget displayed directly on your site, fully interactive and ready for your readers to use! Sometimes a browser refresh (F5 on Windows, Cmd+R on Mac) can help.
**** If the widget doesn't appear, or you just see the raw code, double-check that you pasted it into the "Text" or "Code" editor, not the "Visual" one.
you see the fully functional weather input box and display on your live blog page, allowing you to type a city and get weather results.
- Pasting into the wrong editor: Many blog platforms have a 'Visual' editor and a 'Text' or 'HTML' editor. Pasting the embed code into the 'Visual' editor will just display the code as text, not the widget. The fix: Always switch to the 'Text' or 'HTML' view before pasting any embed code.
- Not saving/publishing: After pasting the code, it's easy to forget to save or publish the page. If you leave the editor without saving, your changes won't appear. The fix: Always click the "Update," "Publish," or "Save Changes" button in your blog's interface after adding the code.
- Widget not loading: Sometimes, a Space might be temporarily down or very busy, causing your widget to not load. The Hugging Face widget itself can't perform any actions beyond displaying information. The fix: Try refreshing the page, or go back to Hugging Face Spaces and try embedding a different, less busy weather model.
Visit the blog page where you embedded your new weather widget. Try typing in your current city, or a famous landmark city like "London" or "Tokyo," and see what weather information the AI provides!
❓ Quick questions
How long does this take?
About 6 minutes — the guide has 7 steps, and you can tick each one off as you go.
Which tool do I need?
This guide uses Hugging Face — but the approach works very similarly in other AI assistants.
Do I need to prepare anything?
- A free Hugging Face account: You'll create this in the first step.
- A web browser: Like Chrome, Firefox, Safari, or Edge.
- A blog or website: Where you have permission to edit the raw HTML code (for example, a WordPress blog, a personal site built with simple HTML, or a similar platform).
- Time: This will take around 15-20 minutes.
What mistakes should I avoid?
- Pasting into the wrong editor: Many blog platforms have a 'Visual' editor and a 'Text' or 'HTML' editor. Pasting the embed code into the 'Visual' editor will just display the code as text, not the widget. The fix: Always switch to the 'Text' or 'HTML' view before pasting any embed code.
- Not saving/publishing: After pasting the code, it's easy to forget to save or publish the page. If you leave the editor without saving, your changes won't appear. The fix: Always click the "Update," "Publish," or "Save Changes" button in your blog's interface after adding the code.
- Widget not loading: Sometimes, a Space might be temporarily down or very busy, causing your widget to not load. The Hugging Face widget itself can't perform any actions beyond displaying information. The fix: Try refreshing the page, or go back to Hugging Face Spaces and try embedding a different, less busy weather model.
Keep reading
✦ Generated by AI in AI World HQ's automated newsroom, written in plain language. Checked by automated fact and quality gates — no human editor reviewed this guide. Spot a mistake? Use the buttons above.
📘 Prefer it in one file? Set It Up Once: The AI Automation Pack (11 guides, free printable PDF)
← Back to all stories