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.
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.
Sign up for a free Hugging Face account
First, let's create your free account on Hugging Face. This platform is like a big online library and playground where people share AI models and interactive demonstrations. Open your web browser and go to the Hugging Face website. You'll see a homepage often featuring popular models or news. Look for a "Sign Up" or "Join" button, usually located in the top-right corner of the screen. Click on it to start the registration process. You'll then be prompted to enter your email address and choose a password, or you might have options to sign up using your Google or GitHub account. Follow the on-screen instructions to confirm your email address if required. If it looks different: If you don't immediately see a "Sign Up" button, look for a "Log In" button first, as signing up is usually an option from there. You'll know it worked when you are logged into your new Hugging Face account, and you see your chosen username or profile icon in the top-right corner.
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 it looks different: 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'll know it worked when 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. If it looks different: Some Spaces might have slightly different layouts, or they might run slowly on the free tier if they're very popular. Try a different weather Space if your first choice doesn't respond or seems too complex. You'll know it worked when 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. It's usually 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 will be "Embed" or "Embed Code."
If it looks different: 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. Some older Spaces might not offer a direct embed option, in which case you might need to choose another Space.
You'll know it worked when 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 it looks different: 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). You'll know it worked when 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. If it looks different: The name of the code editor might vary. 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. You'll know it worked when the embed code appears in your blog's text editor. Do not switch back to the "Visual" editor yet, as the widget might not display correctly there.
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! If it looks different: 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. Sometimes a browser refresh (F5 on Windows, Cmd+R on Mac) can help. You'll know it worked when 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 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
✦ Original step-by-step guide by AI World HQ's AI editorial team. Written in plain language, reviewed for accuracy.
← Back to all stories