Wikipedia defines a widget like this:

A web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are akin to plugins or extensions in desktop applications. Other terms used to describe a Web Widget include Gadget, Badge, Module, Capsule, Snippet, Mini and Flake. Web Widgets often but not always use Adobe Flash or JavaScript programming languages.

For example, the "Help Azaria" module in the left column of this site uses a widget from ChipIn.com (to test it, make a donation to Azaria's Dolphin Therapy fund to see the progress bar go up - wink wink). Many "web 2.0" sites offer widgets for blogs and other sites to display their content or tools for performing a specific task (like raising money via the ChipIn widget). It is a great way to add content or functionality to your site with very little effort. The process for embedding a widget to your site is usually just copying and pasting a snippet of code into the appropriate location.

The problem is, Joomla!'s built-in WYSIWYG editors strip out parts of the widget's code causing it to work improperly. With this article, I will explain how to work around that problem and get the widget embedded into a user module without stripping out code.

Step 1: Disable your WYSIWYG editor.

There are two ways to disable your WYSIWYG editor: the global configuration and the user manager.

Global Configuration

To disable the WYSIWYG editor in the global configuration, follow these steps:

1. Log in to your administrator control panel.
2. Click Site -> Global Configuration.
3. In the first tab, set "Default WYSIWYG Editor:" to "No WYSIWYG Editor".
4. Click "Save".

The problem with disabling the WYSIWYG editor in the global configuration is that it affects all users. You may want to keep the editor enabled for other users and disable it for yourself. If that is the case, you should disable the WYSIWYG editor in the user manager.

User Manager

To disable the WYSIWYG editor in the user manager, follow these steps:

1. Log in to your administrator control panel.
2. Click Site -> User Manager.
3. Click the Name of the user you want to modify.
4. In the right column under "parameters", set "User Editor" to "No WYSIWYG Editor".
5. Click "Save".

Step 2: Create the module.

To create the module, follow these steps:

1. Log in to your administrator control panel.
2. Click Modules -> Site Modules.
3. Click "New".
4. Enter the details, parameters, and pages/items to suit your needs.
5. Copy your widget code from your widget provider.
6. Paste the widget code into the content box under "Custom Output".
7. Click "Save".

NOTE: You can add more content to the content box, but you will have to use HTML because your WYSIWYG editor is disabled.

You are now widgetized.

That's all there is to it. You now have a widget. I should caution you, though, that too many widgets make a page look cluttered and unprofessional. So, choose wisely. Only use the widgets you actually need to use.

Other options

There are mambots/plugins and modules available that enable you to paste code into your WYSIWYG editor without it stripping out parts of the code. One example of such a module is the Jumi module and plign. If you can think of any more, please feel free to list it in the comments.

Questions

If you have any questions or comments, as always feel free to add them to the comments below.

---