How to Test Custom Widgets Without Downloading Software!

In this instructable i'm going to show you how to "test drive" widgets for your websites or where ever you put them WITHOUT downloading any software. (below is the image that the sample widget will open up for editing.)

Step 1: Getting the Code

Most widgets that are meant to be embedded will supply you with code to embed them, but if you don't have access to a widget with code, or you're just too lazy to find one here's some code you can use.


<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>


<script type="text/javascript">
        var featherEditor = new Aviary.Feather({
            apiKey: '',
            apiVersion: 2,
            tools: 'all',
            appendTo: '',
            onSave: function(imageID, newURL) {
                var img = document.getElementById(imageID);

<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>


<script type="text/javascript">
        var featherEditor = new Aviary.Feather({
            apiKey: '',
            apiVersion: 2,
            tools: 'all',
            appendTo: '',
            onSave: function(imageID, newURL) {
                var img = document.getElementById(imageID);
                img.src = newURL;
            }
        });

        function launchEditor(id, src) {
            featherEditor.launch({
                image: id,
                url: src
            });
            return false;
        }
</script>

<div id="injection_site"></div>

<img id="image1" src="http://images.aviary.com/imagesv5/feather_default.jpg"/>


<p><input type="image" src="http://advanced.aviary.com/images/feather/edit-photo.png" value="Edit photo" onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" /></p>

Now all you need to do is copy and paste your code to a note pad. (Above)

Step 2: Saving As...

Now you need to save the file to your desk top!

on the top right corner of the note pad you will see the word "File" click it. a drop down menu will appear. Click "Save As". DO NOT click on "Save" or you'll have to go through a lot to open the file. Next you'll need to find desktop in a popup, change the file name to

sample.html

Step 3: Opening the File

Now we have to open the file. to fing the file look for an icon of your default internet access program with the file name "sample"

That's it your all done!

Enjoy your download free widget tester!