Widgets

A Basic Understanding

The term Widget refers to just about any sort of code found online that is purposely created to be copied and pasted between websites in order to provide easy access to tools. Sometimes these tools are weather displays, chat boxes, informational forms, interactive advertisements, mortagage calculators and so forth. When you see these on the web and want to use one, your objective simply becomes one of knowing what to copy from the site providing the widget, and figuring out where to paste it into your Rapidlistings hosted website. For the former objective you will likely find very clear instructions on most sites as to what to copy. Sometimes such information is provided in a special box on a web page, sometimes widget data is sent through email, but ultimately any site that wants to promote use of its widgets will have made sure to go out of their way to make it simple for you to get the code.

Placing Widget Code

The second objective of placing code on a Rapidlistings hosted site is a bit more complex. As a user you have to know where it is even possible to add in, where you want it, and how to properly paste it in. As for the where it is possible to put it in part, you should be able to paste widget code into any part of the website that uses the rich text editor. When you are logged into your account with the Internet Explorer browser, the rich text editor is that screen that comes up with all the toolbar icons for pages such as the home page, about page, any custom pages you may create, and special areas such as the website footer. If you have ever logged into your control panel with a browser other than Internet Explorer, such as the popular Firefox, Chrome, Opera or Safari browser, then these areas are represented as text boxes filled with HTML. Chances are if you've used an alternate browser then you're already going to be familiar with how to paste in widget code as you've had to deal with editing in HTML mode already.

Working with HTML Mode

This is about what your view looks like when you enter the RTE (Rich Text Editor) with the Internet Explorer browser. If you look toward the bottom left hand part of that screen you will find some some easy to overlook buttons that read Normal, HTML and Preview.


Go ahead and click the button marked HTML and the screen will change to the one shown below. The toolbar should vanish, and any prior work that was in the editor will turn into a code view, which if you're not familiar with how HTML works will just look like a lot of text based gibberish. Any pictures, special coloring and what not that was done in the normal mode will be represented by this gibberish, but not displayed like you're used to with the RTE. This view is ALSO what you by default if you have logged into your control panel with an alternative browser.


Once you have gotten this far, be it on a custom page like we're playing with here, or the home page, about page or another part of the site, you need to consider placing your widget code by pasting it in. The catch if you're unfamiliar with how code works is that you have to paste it into the correct part of the page while in HTML mode. If you have a decent understanding of HTML, go ahead and place it, and you're probably done with this tutorial. If not, then test this out by placing your code AFTER the other content on your page. If there is no content on your page, then simply paste into the vast blank space. For the rest of you, click into the edit box, make sure you've scrolled down to after the very last bit of text on the page, and then paste your widget in. If you are worried about losing work you have already done on this page, then please consider doing this on a page you are not affraid to break first! Free website packages will have to experiment on one of default pages. Upgraded users are highly encouraged to use the Add Custom Page feature to create a page simply for experimentation first. It can save a lot of hassle later!

The reason it can be a hassle is because widget code does not always work. Sometimes you simply get bad code from a third party providing the widget. Sometimes the elements of the widget conflict with the RTE. Sometimes the process of cutting and pasting results in the code getting warped and becoming unpredictable. To go ahead and test what you have done, save your changes and switch to viewing your live website on the page where you are adding a widget. Did it work? Great. Jump ahead a little bit in this tutorial. Otherwise, keep reading.

Since your code didn't work, you probably need to modify it or remove it altogether. You may not be able to figure out why it isn't working, but perhaps you do not want to let some freakish code display sit on your home page long enough for you to figure it out and startle visitors. Fair enough, just repeat the steps up until this point and remove the exact bits that you pasted in. Save. If that worked, jump ahead.

If you were unable to remove the code, then chances are it has conflicted with the RTE for those of you using Internet Explorer. This is normally easy to diagnose by a few symptoms:

• You find yourself unable to save new changes.
• The entire screen doesn't render correctly when reentering the editor.
• You think you have saved (double check) and reloaded the live page to view on your site (be sure to try that of course) and nothing seems to have changed. Your code is still active.

If this happens you have two options. You can contact our support staff about it and they can probably delete your code from the page, or you can log out and then log back in with an alternative browser. Put another way, the RTE locks up in its Normal display mode and because it starts in that mode for Internet Explorer users, you probably won't be able to get to HTML mode to edit your problem away. By logging in with Firefox or another browser you'll be presented with HTML mode instead and should be able to make changes and save them. This is actually what our support staff does to fix the issue as well. Should it be outside our normal office hours, it is a handy trick to know for yourself. If you have a very complex page that that you have managed to lock up then you might want to consider handling it yourself as sometimes our staff will find no alternative but to delete the entire page contents, which would cost you some of your previous work.

Related Refinements

Now that we've covered the basics, you may want to improve on what you've managed so far.

• One of the main concerns people seem to have is about placement. Maybe you're not familiar with code and you've just pasted to the end of your page as was suggested above. That's okay. If you go back in with the Internet Explorer browser loaded up you can in most cases highlight and drag your widget about the RTE like most other elements. For widgets though, you might want to stick with simply highlighting them and then using the left, center and right alignment buttons unless you're more familiar with HTML. Trying to do too much with the editor on top of a widget will start generating all sorts of new code to encase the widget code, and next time you go into HTML mode things won't look too familar, which could be a problem for future editing.
• Sometimes a widget goes in just fine, loads up on your live site, and you forget about it. You might not edit that particular page for awhile. When you do go back next though, the RTE locks up, even though the widget works just fine. This probably means that the widget, even though it works, conflicts with the RTE. See the section above about getting on with an alternate browser directly into HTML mode as that is one option to handle editing while keeping the widget you want. Another option is to contact our support staff, who may be able to keep the widget in there but place it a slightly different way that will allow you to use the RTE without future problems.
• Some widgets, especially hit counters, stat trackers and the like may be desired across the whole scope of the site. While in most cases you find yourself editing single pages at a time, or working with the other non-RTE based parts of your Rapidlistings hosted site, there remains an option you might want to look into. The option is the footer area of the site. Anything in the footer is distributed across every page of the site. That means if you had the code for something like Google Analytics and needed it on every page, you would want to enter the Edit Website Content section, click into the special link for editing the Copyright/Footer area, and in that section you would paste your analytic code. Suddenly it is across the whole website. Again, this is very handy for anyone who is using analytics type widgets.

Some Widgets To Consider

While you can probably find any number of widgets on your own, here are a few to consider that might enhance your website:

1. AddThis.com - A widget that makes things like the Facebook Like button and many similar buttons easily available on your page.
2. StatCounter.com - Widgets that provide analytics, hit counters and similar. A wonderful free service.
3. Response-o-matic.com - Form widgets that can be handy in many instances involving getting visitor feedback. These are prone to conflict with the RTE however, so you probably should avoid them unless you're on with an alternate browser and comfortable with HTML.

Please Note...

Hopefully this tutorial section has been helpful to a few people. If you tried working through it and got totally lost, we'd actually enjoy your feedback on at what point you had an issue so that this page can be expanded in the future. The Rapidlistings email address for such things is support@rapidlistings.com should you feel like dropping us a line. Thank you!