Extend Your Blog's Functionality With Hashnode Widgets

With Hashnode Widgets, you can insert third-party embeds or iframes anywhere in your articles! This is a powerful way to extend the functionality of your Hashnode blog.

"Can you give us an example?" Sure. Let's say you have a YouTube channel where you create tech videos. With this feature, you can let your blog readers know about your channel by adding a widget inside your articles!

Pretty awesome, right?

Get the embedded code 🧰

The first step is to get the embed code from the third-party website. To speed up the process and avoid confusion, let's take the following code as an example:

<style type="text/css">
  .wm {
    background-color: #383838;
    color: #ffffff !important;
    padding: 30px 25px;
    border-left: 6px solid #2962ff;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    }

    a {
    text-decoration: none;
    border-bottom: 2px solid #2962ff;
    color: #fffffe;
    }

    a:hover {
    text-decoration: none;
    color: #2962ff;
    border-bottom: 2px solid #ffffff;
    }
</style>
<div class="wm">
    I also have a YouTube channel! Do not forget to subscribe <a href="https://catalins.tech/youtube" target="_blank">here</a>.
</div>

The code above is for a widget that promotes my YouTube channel. I can embed it directly into my articles to drive people to my channel.

Let's see how to use the code!

The second step is to click on the profile picture and then on the Blog Dashboard option, as shown in figure 1.

Screenshot of Hashnode's Feed Figure 1

Once you click on the Blog Dashboard option, your blog dashboard will open. On the left-hand side, you should see a couple of options. See figure 2 for reference.

Click on the Widgets option to access your current widgets or add new ones.

Screenshot of Hashnode's blog dashboard Figure 2

Once you are there, click on the button saying Add new Widget. Clicking on the button opens a new page where you can configure and create your new widget.

To add a new widget, you need to:

add the embed code
name the widget

See figure 3 for reference. (Note that the code was shortened here so everything could be captured in one screenshot.)

Create a new widget on Hashnode Figure 3

After adding the code and naming the widget, click the CREATE button to create the widget.

Now you are done, and you should see the newly-created widget in your blog dashboard. See figure 4 for reference.

Screenshot of widgets in the Hashnode blog dashboard Figure 4

There are two ways to use widgets. You can add them manually in your articles, or you can pin them at the top/bottom of your articles.

If you only want to use the widget in a certain set of articles, you should add it manually.

The format for using widgets manually is as follows:

%%[widget_name] - for the example from this article, you would use %%[youtube].

If you return to figure 3 above, you'll see that it tells you how to use the widget.

Alternatively, you can pin widgets at the top or bottom of all your articles. This is a great option because it saves you the trouble of going through all articles and adding the widget manually.

When you create/edit the widget, you have an option saying Pin Widget. Clicking on that option will toggle it on and off.

You can select where to pin the widget when it's on—at the bottom or the top. Once you select that, you can save the widget and you are done.

See figure 5 for reference.

Screenshot of an example widget on Hashnode Figure 5

In figure 6, below, you can see the widget in action. I pinned the widget at the bottom of each article.

Screenshot showing the widget live on my blog Figure 6

Conclusion

Widgets are powerful, so make the most of them!

Some of the scenarios where you could use them include:

to collect email addresses
to drive traffic to your other online accounts
to embed your projects

Keep in mind that not all embeds require widgets—Hashnode supports embedding YouTube, CodePen, Gists, and many more by default. You can check the list of officially supported embeds here.

Note: Be aware when using widgets—especially those outside of the officially supported embeds—that they can slow your blog considerably, which will affect your SEO and your visitors' reading experience. Use them sensibly.

Extend Your Blog's Functionality With Hashnode Widgets

Comments (18)

New Features and Highlights ✨

Split Complex Ideas into Series and Make Your Readers Happy

More from this blog

Breaking Apps Hackathon Winners

Why DIY QA Doesn’t Work Anymore: A 2025 Guide to E2E Testing for Modern Web Apps

ModusHack x Hashnode Winners

Hashnode docs free license for open source projects

[Changelog]: New additions to Docs by Hashnode, new design components and bug fixes.

Get the embedded code 🧰

Create the widget 🛠

How to use your widget ✍️

Add the widget manually

Pin the widget

Conclusion

Command Palette

Comments (18)

New Features and Highlights ✨

Split Complex Ideas into Series and Make Your Readers Happy

More from this blog

Get the embedded code 🧰

Create the widget 🛠

How to use your widget ✍️

Add the widget manually

Pin the widget

Conclusion