Adding the custom HTML/WYSIWYG widget is easy and can be done in both live design and the store's admin console.
1. Live Design
Just open live design on your site. Click the widget icon in the top left. Now click "Add New Widget" link in the area you want to add the widget.
Select the Html widget(same process for any other widgets also) save it, and your widget is ready to be edited.
Go to the page where the widget will go in the theme editor. Themes > Active Theme (or any theme) > Any Page or page area (ie columns, header, footer)
Click on the widgets link under the page name. Click on Add Widget to load the Available Widgets page. Click Add on the widget that you would like to load on the page.