A few weeks ago we launched the allourideas widget which lets you embed an idea marketplace in your website or blog (much like you can embed a youtube video). Now we have improved the widget by allowing you to fully control the size and colors. This customization enable you to fit the widget into your website more elegantly and provides a better experience for your voters. Further, we allow you to pass information into the widget which will allow for richer data collection and analysis.
For example, here’s a widget that was created by the Princeton School of Engineering (feel free to participate). The widget could look like this
or like this
Keeping reading for the full instructions and to see some more examples
To make your own widget like this, just create an idea marketplace. Then, modify the iframe code example below and insert the code snippet into your webpage.
For example this code,
results in this widget that is 450 by 410 in the default colors.
If you want the widget to be bigger say 550 by 650, just change the iframe code to
and this is the widget you will get
You can pick any size that you want, but if your widget is smaller than 350 for the width and 460 for the height some of your content might not fit correctly.
Now that you are happy with the size let’s say that you want to customize the colors. You can just pass in the hex triplet you want for each of the 8 colors in the widget:
For example, if you want some crazy colors in a widget that is 350 by 460 this code snippet
give you this very ugly widget:
Note that you start to specify the colors with “?” and separate the colors with “&”. Also, any colors that you don’t specify are set to the default values. So, if you just want to change the color of the “add you own idea” button and have a big widget, you could use this code snippet:
to get this widget:
Finally, in addition to changing the color and size, you can also pass information into the widget. This information will be “attached” to each vote and then available when you download your data for offline analysis. For example, the code below will associate the string “matt_blog” with all votes that came through this widget. By using tracking strings, you can record where votes come from if you have multiple widgets and you can even associate each vote with information about the voter by using some of the approaches described here.
Feel free to experiment and if you want others to see how you used the widget, add a link below. Also, if you run into browser compatibility problems, please let us know.
Frequently asked questions:
- The widget is not working on my page, what’s going on? A first debugging step is to manually type the iframe code into your html. For some reason, copying-and-pasting the code from this site can introduce problems because of character-set issues.
- What if I used the old widget instructions, will that cause a problem? No. Those will still work just fine too.
- Can people vote from the widget and the regular idea marketplace? Yes, that’s fine. It won’t cause any problems.
- Is it possible to change the font size of the widget? No. Sorry that is not possible right now.
P.S. Congratulation to Brian Tubergen. As I said before, the widget functionality was Brian’s Google Summer of Code project.