Using the Widget Library
Widgets are implemented in a very similar way to How to Add Images to a Text Editor, but are a way to embed HTML code into the text areas (Using the Rich Text Editor) of our web site.
To set up a widget:
- Go to: My Websites -> Main -> Pages -> Widgets shown in Text Editor
- Enter your widget HTML in the first big text area and give your widget a name (only you see the name of the widget). Save All
- Now you can add the widget to any text editor (ie. My Websites -> Main -> Customise Design -> Site Footer) as if it is an image.
- Within the text editor, place your cursor where you want the widget to display, then click the [ Image ] icon.
- Click "Upload Image or Choose from Library"
- Scroll to the bottom of the library window and click the widget you wish to insert. This will appear as a coloured block at this stage.
- Save your changes and view the site to see the widget working.
What are widgets
Well they are not essential to use in your web site but using in moderation one or two widgets in your web site can help add a bit of current interactivity to your site, as well as enabling you to add functionality to your site. Some examples of a widget would include:
- Adding "eye candy" to your site; countdown timers for example "It's just 12 days to mothering sunday" or "It's 46 days, 21 hours, and 16 minutes until the big event".
- Social networking updates - examples would include updating displays from your twitter account displaying your last few tweets, or rolling blog posts displaying new posts to your blog.
- Buy now buttons from PayPal by adding the buy now button code to a widget
- Display quotations and sayings, calendars, mailing list subscribe boxes, stat counters, social networking links, and anything else that requires a small snippet of code added to a web page.
Setting up a widget - step by step
In this example we set up a PayPal "Pay now" button.
First set up the button in your PayPal account. We have included four screenshots for illustration however you will obviously need to input your own details to create the button you want.
Please note that you do not need to have pages to direct the customer to after completing or cancelling checkout.
When you get to the final step with your button code, follow the steps on the page to copy the code.
Now you have the code for your button it's time to make the widget. Log into theimagefile and follow: My Websites -> Main -> Pages -> Widgets shown in Text Editor. Scroll to the first available large text area labelled HTML and paste in your code copied from PayPal. Then give your widget a name, an optional reference description and the dimensions in pixels you wish to allocate on your page to the widget. Many widgets will state the widget size, however if you are not sure of the widget size just make a rough guess, then update later if required. You may upload a Placeholder Image which is shown when in edit mode. If you do not have a Placeholder Image, one will be auto-created based on the Name and Placeholder Size dimensions. The placeholder is used to illustrate the size and positioning of the widget when viewing your web page under theimagefile domain name.
Now save to create your widget.
Now it's time to add the widget to your web page - note that you can display the same widget on multiple pages. Start off by going to the web page you want the widget to display from. From the rich text editor place the cursor in the text area where you wan the widget to be positioned - then click the image icon, the "browse server" and find and select the placeholder for the widget.
This will display the placeholder in the editor. When happy with the positioning save the page.
What have I done wrong?
If you see your web page with the placeholder rather than the widget displayed then you are viewing theimagefile under theimagefile domain name.
When viewing under your own direct hosted domain name the widget will be displayed as expected.
How to find the widget embed code for a You Tube Video
How to find the widget embed code for Google Maps