thoughts on making a widget?

Question

I'm only going to be able to get each site that wants my widget, to copy and paste the code block in once..

So it needs to be really future proof.

I've thought about this for a while and this is the widget code i've come up with :

<script type="text/javascript" src="http://www.mydomain.com/my-future-proof-widget.js"&gt;&lt;/script&gt;
<div id="mywidget"></div>

would this be the best plan?

could this create any limitations?

any other thoughts on widgetry?!

Answer 1

since your widget is referencing a file on your server, you're always able to update it. How much more future proof can you get?

this looks fine to me.

Answer 2

I wouldn't add the <div id="mywidget"></div> to the code, since future experimentation may suggest alternate containers / layouts, etc. Instead, I'd provide a setup function in my script that accepted an id or a node.

So the setup script might look something more like this:

<script type="text/javascript" src="http://www.mydomain.com/my-future-proof-widget.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    mywidget.init("my_id_or_node");
</script>

The use of an init() function also lets people add your widget to dynamically generated code, or create it in response to a user's activity more easily. If it runs the minute it loads then it greatly limits people's options.

Answer 3

How about something like this:

<script  type="text/javascript">
var MyWidgetSettings = {
idList: ["myWidget1", "myWidget2"],
color: "#f00",
behavior: "erratic",
someOtherSetting: "whatev"
};
</script>

<div id="myWidget1"></div>
<div id="myWidget2"></div>

<script type="text/javascript" 
src="http://www.mydomain.com/my-future-proof-widget.js"&gt;&lt;/script&gt;

Although I guess you don't need to add a settings object to do default behaviour (i.e. look for div with id "myWidget" and insert single widget), for more complex stuff it can be handy. I also suggest putting the script tag after the div(s), so when the file loads it can immediately replace the element, rather than having to come back later and do it.

Your current approach is probably fine for now, and you can make it more sophisticated in the future as needs arise, keeping it working for the simple case.