There are heaps of pre-built HTML and iFrame widgets you can add to your webpage or personal apps to enhance the design and functionality. Many of these widgets even have style customizations. Consider the interactivity you could add to your app with customizable widgets like weather, world clocks, countdown timers, calendars, 3D models, maps, calculators, social feeds, product catalogs, customer reviews, or video and song playlists. Follow along as we outline ten free web widgets to embed in your Hatch page.
How to embed free web widgets
Every site featured in this article will give you an HTML embed code for their widget so you can embed it directly into your page. Many of these widget sites offer options to customize the style of your widget, including colors, fonts, and design. Once you’ve made your customizations, simply copy the HTML code that is output. Then jump over to your Hatch project.
Here we’ll add an easy embed element through the left sidebar.
Paste your code in the text box that shows up and you’re done! You can now place the widget anywhere you want on the page.
If easy embed doesn’t work, you can try adding a HTML element instead. Once you select it, you’ll find a text box on the right sidebar containing placeholder code. Just paste your widget’s code inside and hit enter. Keep in mind you might need to adjust the width and height values within the box to get rid of unwanted scrolling bars.
Types of free web widgets to embed
Timeanddate.com
Timeanddate.com offers free, fully customizable clocks for your website. Nearly every single part of your clock can be customized and there are several pages of settings at your disposal. If you want a super simple clock, just use the default clock and navigate to the end for your HTML code. This site also offers countdown timers which you can find them here.
Weatherwidget.org
This weather widget is an easy to use widget that comes in several formats. We chose the ticker format for our page, but there are several others to review that may meet your needs. Explore the settings to edit things like the background and the font. You can even have a transparent background.
Custom Google Search Bar
It can be handy have a search engine at the ready. The link above will allow you to configure your own Google search widget to be the whole web or just a section of pages. This way visitors won’t have to leave your page to google anything that comes to mind! One important thing to note is that this widget should be at the top of the object tree. Otherwise, the rest of the objects will display over the search results once the search bar is used.
Google Calendar
Google Calendar is still widely considered the best free option for calendar widgets. To get the embed code for your calendar, you’ll have to log in through a computer and browse the settings. Select the calendar you want to embed and click on Integrate calendar, as shown below.
Use the embed code circled in red and the website’s calendar will be synced with your Google account’s, so there’s no need to edit anything else. This is particularly handy if you want to show events to your site visitors.
RSS.app
RSS.app offers a number of free options for news feeds. On mobile formats we found that Carousel works the best, since it cycles through news in a slideshow and doesn’t take up too much space.
Click on the New Feed button on the left sidebar to browse for more news and social media feeds. You’ll need to sign up for a free account in to save your feed for future use.
Curator
Curator is another option for free social media feeds. After registering a free account, you can quickly create feeds for many sites. Keep in mind you’ll need to connect your own social media accounts to access some of them.
On the left sidebar you have a lot of layouts to choose from! Some of them are exclusive to paying users, but free users get a nice basic selection.
Spotify
Spotify has a very handy widget that lets you embed any album or playlist onto your site. Just navigate to your favorite songs and you’ll find the share button under the triple dots.
You’ll get a few color and size options to choose from. We found compact works best for personal sites.
Soundcloud
Similarly to Spotify, the Soundcloud widget lets you create compact audio elements for your site. You’ll find the share button under every track and album.
You can choose the dimensions and color of the player, and enable automatic play if you want.
Hubspot Forms
If you’re managing your subscriber list in a CRM like Hubspot, you’ll be happy to know you can easily embed any of their forms on your site. Once you update and publish your form, you’ll be given the embed code for it. Even if you’re not a regular user, you can set up a free account and start creating forms right away!
Google Maps
A map is great to share the location of your office, store or blog topic. To embed a map, open the menu and click the option shown below.
In the window that comes up, you can move the map around to select the specific section you want to share.
With so many free web widgets to embed in your pages, you have lots of options for design and functionality. Thanks to the Hatch editor, we were able to set a quick site up in a matter of minutes. Below is an example of the above widgets in action. You can also see a live Hatch project filled with free widgets in this personal travel app page we created.
