For a side-project that I consult every once in a while, we wanted to provide a widget generator which allows people to include events that match specific criteria on their websites. After some internet search, we found some scripts here and there, but no comprehensive introduction. Here is my attempt.
First, there are two ways to build a widget:
- let the user embed an Iframe with your site inside
Widget snippet for client
This is a snippet that the client can embed into their website:
First, we set some configuration variables (that can be set by a widget generator). These will be transmitted to our controller function later.
We found variants of this script on different internet sites:
This script will load jQuery as a private variable into the client’s website and will then continue to load our
widget.css. Afterwards, a JSONP url on our server is queried handing over the before defined parameters (
The controller action under that url will generate the dynamic content of the widget based upon the parameters. In our example, on Eventchart, it is a list of upcomming events which suffice the given search query and location parameters.
In this example, our server is expected to respond with a Json encoded array of objects that each have a
template method, which contains just the completly, ready rendered template of that item. Of course, this part could have different kind of data structures thus different handling of the data in the success handler.
Example controller response
We respond to:
- /widget.html - a form generator for the client
- widget.json - which renders our search results and respond with a jsonp-compliant response (the callback parameter)
The whole process:
JSONP is a way to make cross-domain ajax requests, meaning allow your widget on the clients site to request dynamic data from your server, which is normally on a totally different host.
When your widget seems not to load on your client’s site, check if there is https required. Your browser will then block every non-https request. This is why you should always use
https://www.... or leave the protocol out
//www..., e.g. the stylesheet, images etc. that are loaded from the widget.
- prefix all your css class-names with a unique name (like, your site name)