AI WORLD HQCreate a tiny AI weather-helper widget for your blog with Hugging Face widgets
Embed a live, no-code weather widget on your blog in under 10 minutes using Hugging Face's ready-made widgets.
Hook: Imagine your blog visitors seeing the current weather right where you mention travel or outdoor plans. With Hugging Face widgets you can drop a tiny, live weather helper onto any page — no coding required. By the end of this guide you’ll have a working widget that updates automatically and looks great on desktop and mobile.
💡 Tip: tap a step’s number when you finish it — a green tick appears and your browser remembers how far you got.
- A blog or website you can edit (WordPress, Wix, Squarespace, GitHub Pages, etc.)
- A free Hugging Face account (2-minute signup)
- 10 minutes of time and a text editor or blog dashboard
- No paid plan needed for this task
Sign in to Hugging Face
Open any web browser and go to https://huggingface.co. In the top-right corner click Log in / Sign up. Choose Sign up and fill in your email, username and password. Check your inbox for a verification email and click the link inside. You’ll land on your new profile page.
You'll know it worked when you see your username in the top-right corner and the page shows “Welcome to Hugging Face, [your name].”
Open the widgets gallery
Once logged in, look at the left sidebar and click Widgets (it’s near the bottom, under “Resources”). A new page loads showing a grid of ready-made widgets. Each one is a small, interactive block you can paste into your blog.
You'll know it worked when you see a heading that reads “Browse all widgets” and a list of colorful cards.
Pick the weather widget
On the widgets page, use the search box at the top and type weather. You’ll see a card titled “Weather widget” with a small sun-and-cloud icon. Click the card once to open its detail page. This page shows a live preview, settings and the embed code you need.
You'll know it worked when you see a live weather display and options like “Location” and “Units”.
Choose your settings
On the widget page you can set the city, temperature unit (Celsius or Fahrenheit) and color theme. Pick the city your blog readers care about most. Leave the other options on their defaults for now. As you change settings, the preview updates instantly so you can see how it will look.
If the preview doesn’t update, refresh the page or check your internet connection.
You'll know it worked when the preview shows the correct city and temperature unit.
Copy the embed code
Below the preview you’ll find a box labeled Embed this widget. Click inside the box to highlight all the code, then press Cmd+C (Mac) or Ctrl+C (Windows) to copy it. The code starts with <iframe and ends with </iframe>.
If you don’t see the embed box, look for a button labeled Copy to clipboard or Embed.
You'll know it worked when you have the code on your clipboard and the box shows a green checkmark.
Paste the code into your blog
Open your blog editor (WordPress, Wix, Squarespace, etc.) and go to the page or post where you want the widget. Switch the editor to HTML mode (sometimes called “Code view”). Paste the code you copied right where you want the weather helper to appear. Switch back to Visual mode and save the page.
If your editor doesn’t have an HTML mode, look for an “Embed” or “Custom HTML” block and paste the code there.
You'll know it worked when you see the live weather box appear on the page and it shows the current temperature.