A Simple Guide to Adding Widgets to Your Website

Whether you’re a website owner or simply an internet user, you’ve probably heard of widgets. These handy tools are far from novel now, and they often interject with website design. However, you may not know what they are precisely and what they can offer. Or, as a website owner, you may not know exactly how to add widgets to your website. In this article, we’ll explore both, briefly explaining widgets and presenting a simple guide to adding widgets to your website.

What are widgets?

Widgets are, in essence, standalone website or application components. They offer added functionalities depending on their purpose, from live chat to email enhancements and everything in-between. However, paid widgets do add to your website’s cost, so careful research is highly advised.

UI elements of an app on a silver background

Widget types

There are multiple types of widgets, each focusing on a specific purpose and serving different needs. For example, e-Commerce sites will frequently use live chat and customer support widgets, while restaurant sites may use reservation widgets.

There are too many types to explore thoroughly, and grouping widgets by type can be somewhat subjective. Still, for context into the subject, consider these four prominent types:

Marketing widgets

Marketing widgets focus on marketing, as the name suggests. They may thus focus on encouraging visitors to do the following, among others:

  • Opt in to email lists
  • Sign up for free material
  • Contact sales teams

These are excellent marketing tools, and Convert More is an example of such a widget, which focuses on lead conversion.

Live chat and customer support widgets.

Another type of widget that focuses on conversions and post-sale engagement is live chat and customer support. These widgets provide live chat functionality and thus focus on enhancing the customer experience. As highlighted above, e-Commerce websites will frequently use such widgets.

Smartsupp is a notable example of this type, which focuses on customer engagement.

An illustration of a computer screen showing a website

Reservation and booking widgets

Similarly, reservation and booking widgets add online booking functionalities. Any business that takes appointments may use such widgets to offer their customers a faster, frictionless booking process. Moreover, such widgets allow appointments to be scheduled even outside of office hours.

A notable example of this widget type is Reservio.

Email widgets

A subtype of marketing widgets for many, email widgets focuses on populating one’s email lists for marketing purposes. Fortunately, they frequently offer integration options with marketing tools. In a time when having a website is imperative for business, such widgets provide an excellent opportunity to improve sales.

The most notable example of this type should be MailChimp’s signup widget, which integrates into MailChimp’s other services.

Adding widgets to your website

Having outlined some of the widgets’ typical roles, let us now delve into adding widgets to your website.

Code blocks

The least simple way to do so, code blocks are still a relatively straightforward process. Widget vendors frequently offer code blocks or code sections that website owners can paste into their website’s HTML code. In this case, you will need to copy and paste your vendor’s code block into the appropriate section of your code.

Lines of code on a white background

Finally, to simplify the process further, you may consider code-related plugins. WordPress plugins like Code Widget frequently offer simplified code forms and interfaces to allow less experienced users to utilise code effectively.

WordPress: Widget section

For WordPress users, an arguably more straightforward process is available on their dashboard. It is as simple as this:

  • Log into WordPress
  • In the menu on the left side of the screen, select Appearance, then Widgets
  • There, select the widget you wish to add and drag it to the appropriate section on the right 

Alternatively, you may click on your widget of choice to decide where you’d like it to go. Once you do, simply press “add widget”.

For further customisation, each widget box will come with options depending on your widget type. There, you can make your choices, preview the changes to ensure they’re right for you, and then press “done”. To define where the widget shows up, you may use the “visibility” button.

Kindly note, the widgets available on this list will include WordPress widgets and theme-dependent widgets. To add new widgets to the list, you may use WordPress plugins that do so outside of your themes.

WordPress: Customise section

Finally, if you’re a WordPress user, adding widgets to your website can also be done through the Customise section. The process is similarly simple:

  • Log into WordPress
  • In the menu on the left side of the screen, select Appearance, then Customise
  • There, select Widgets.
  • Click on the area of your website where you’d like to add a widget, then select “Add a Widget.”

As above, you will be able to customise your widget and preview how it will look. Fill in the details as you like, then press “Publish” when you’re done.

For additional visual aid on these processes, you may also want to consult Yoast’s video on WordPress widgets:

Removing widgets from your website

Finally, over time, widgets may become outdated. Vendors may stop providing support, or you may simply find a better widget for your website. Thus, to conclude, let us explore the process of removing unwanted widgets. 

Code blocks

If you have added a widget through HTML code, the process is as simple as deleting the related code block. 

Alternatively, you may try WordPress’s wp_unregister_sidebar_widget() function. To do so you will need your widget’s ID tag, however. You may thus locate it by temporarily adding this to a template file:

// dump all registered widgets

global $wp_registered_widgets;

echo ‘<pre>’;

print_r( $wp_registered_widgets );

echo ‘</pre>’;

 

Using the template will yield your widget ID tags, so you may use the unregister function to remove them.

WordPress: Widget section

Fortunately, removing widgets from the Widget section is far simpler:

  • In WordPress, go to Appearance>Widgets
  • On the right, select the widget you want to remove
  • Click “Delete”

Alternatively, you may remove widgets by dragging them from the right-hand section and dropping them on the left.

WordPress: Customise section

Finally, you may also remove widgets through the Customise section:

  • In WordPress, go to Appearance>Customise>Widgets
  • Select the widget you wish to remove on the left, and click “remove.”
  • Click “Publish” to save your changes

Conclusion

To summarise, adding widgets to your website can be a straightforward process. You may edit code directly if you have such experience. Alternatively, you may use built-in WordPress widget options to do so – or similar options your CMS provides.

Find the best solution for your business.

Do you want a successful website?

If your business is not harnessing the Internet’s full potential, it's time to contact a reliable, trustworthy and affordable web designer.

Get your personalised quote today!

Freelance Web Designer

By Tiago Lavis-Fernandes

Tiago is a Portuguese freelance web designer living and working in Manchester for over ten years. Fascinated by WordPress and the Divi Builder, he helps clients achieve success through UX/UI website design and search engine optimisation. If you're looking for someone to help with your online marketing, look no further.

Do You Need A Website?

You May Also Like…

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

three × five =

Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. This website is run by Tiago Lavis-Fernandes and not associated, or act on behalf of Elegant Themes. Divi is a registered trademark of Elegant Themes, inc.

Pin It on Pinterest

Share This
AWARD-WINNER