How to Add a Widget to Your Website

Definitions

Adobe Flash - The Flash Player, developed and distributed by Adobe Systems, is a client application available in most common web browsers.  It features support for vector and raster graphics, a scripting language called ActionScript and bi-directional streaming of audio and video.  Flash is commonly used to create animation, various web-page components, and to integrate video into web pages. (definition from Wikipedia).

JavaScript- a scripting language developed by Netscape to enable Web authors to design interactive sites. JavaScript can interact with HTML source code, enabling Web authors to spice up their sites with dynamic content. JavaScript is endorsed by a number of software companies and is an open language that anyone can use without purchasing a license. It is supported by recent browsers from Netscape and Microsoft, though Internet Explorer supports only a subset, which Microsoft calls Jscript (definition from Webopedia).

Widget - Pronounced wih-jit. (1) A generic term for the part of a GUI that allows the user to interface with the application and operating system. Widgets display information and invite the user to act in a number of ways. Typical widgets include buttons, dialog boxes, pop-up windows, pull-down menus, icons, scroll bars, resizable window edges, progress indicators, selection boxes, windows, tear-off menus, menu bars, toggle switches and forms.  (2) The term also refers to the program that is written in order to make the graphic widget in the GUI look and perform in a specified way, depending on what action the user takes while interfacing with the GUI.  The term widget is used to refer to either the graphic component or its controlling program or to refer to the combination of both. (definition from Webopedia).

Caution!

• Carefully evaluate the Web site that offers the widget. Evaluate the purpose of the HTML code that loads the widget and the policies for adding it to your site. Evaluate the cost and, if it is free, check to see if any advertising will be pulled into your site when you add the widget. Evaluate the trustworthiness of the site as a whole, just as you evaluate sites for reliable information.
• Do not add widgets to the homepage. The HTML code that loads the widget makes calls to a remote site and if that site is down for whatever reason, the library's homepage will take a long time to load. It may appear to users that the library's Web site is down.
• Technical support for widgets will be limited to verifying the integrity of the HTML. The SILO Help Desk will verify that the HTML added to the page is rendered without modification by the Plone content management system. All other technical support questions should be directed to the site that provided the widget.

Instructions

Before you being the following steps you will need to have the admin login and password as well as the code for the widget that you want to add to your site.

Step 1. Use TinyMCE

Verify that you are using the TinyMCE text editor. If you are still using the KUPU text editor you will want to switch to TinyMCE.

Step 2. Add Your Code

1. Navigate to the page where you would like to add your code
2. Click the Add, edit or remove a portlet below the content link if you want to add your widget to the center content slot. If you would like to add your widget to either the left or right portlet slots click the Manage portlets link in the slot where you want the content to show up. For more information on portlets and slots on your website please refer to our Portlets Guide.
3. Select Static text portlet from the Add portlet drop down menu
• If adding the portlet to the center column you will need to pick between using columns A, B, and C. Columns A and B are 50 percent of the center column width(column A takes up the left-most 50 percent and column B takes up the left-most 50 percent) while column C spans the entire center portion of the page.
4. Add a Title in the Portlet Header field
5. Click the Edit without visual editor link located below the body text box
6. Paste your code into the Text box
7. Check the Omit portlet border box if you do not want a border around your content. Checking this box will make your widget appear to a part of the page rather than in its own section. There are applications for both options here and you will have to decide which is best suited for your needs. You can always come back and edit this later.
8. Click Save