Lasso Powered Javascript Widgets

This article describes how to create a Javascript widget using Lasso. It allows people to place a single line of Javascript on their website and the html contents of your widget will appear on their web page.

Introduction

If you've created a cool web application and you want people to be able embed part of it on their web pages... then a Javascript widget might be for you.

This approach allows you to have your Lasso driven content displayed on websites that are not running Lasso, don't have access to your database, or otherwise are outside your server & control.

This example simply takes two parameters and outputs a string of text in paragraph tags. I've kept this example simple so you can get the gist of how it works. However you can put any Lasso code you want into the widget (inlines or etc.), and output any html you'd like.

Using the Widget

The following code is what other people will place on their websites to use your widget. The widget will display in the location this code is placed in the html.

<script type="text/javascript" src="http://www.example.com/Widgets/MyWidget.lasso?Name=G&Rank=Master"></script>

Notice the parameters Name=G and Rank=Master. The output of the widget will change based on these values. In more complex widgets the parameters might be a User ID, Zip Code or other relevant data.

Please note: the parameters in the URL listed after question mark should be on the same line as the rest of the URL... for some reason this website wraps everything after the question mark to a second line.

Widget Source Code

The following is example code used to create a simple widget. It is the contents of the MyWidget.lasso file listed in the Using the Widget section above.

[
output_none;
	
	content_type('application/x-javascript');
	
	var(
		'Name' = action_param('Name'),
		'Rank' = action_param('Rank'),
		);
	
	var( 'Insert' = '<p>Agent ' $Name ' is a ' $Rank ' Spy.</p>');
	
/output_none;
]
document.write('[$Insert]');

What makes it work

1. The [content_type] tag causes the web browser to process the contents of your widget as Javascript.
2. The last line contains the Javascript (document.write) that will insert your html into the web page.

Results of This Example

The web page which contains the 'script' tag will display the following line of text in a paragraph tag.

  Agent G is a Master Spy.

Conclusion

This is a very simple example designed to give you a basic overview of how to create a widget. Using the above approach you can create more complex widgets... perhaps the next Google Maps like application!

Author: Greg Hemphill
Created: 12 Apr 2008
Last Modified: 3 Mar 2011