---
authors:
- lisa
redirect_from: /2013/03/How-to-Embed-Open-Spending-Databases-to-Your-Own-Website/
title: How to Embed Open Spending Databases to Your Own Website
---

This post is by [Lisa Evans](https://twitter.com/objectgroup) of the Spending Stories project at OpenSpending and cross-posted from the [PBS Idea Lab](http://www.pbs.org/idealab/2013/03/how-to-embed-open-spending-databases-to-your-own-website078.html).

The Open Spending platform is a hive of activity and packed full of colorful displays of spending and budgets from all over the world. Its aim is to help track government and corporate financial transactions across the world and present them in useful and engaging forms.

For some time now, users have been able to [upload](http://openspending.org/help/data-loading.html) any of their own spending to the platform and make a range of visualizations, but now you can embed any of the visualizations on your own website. This means you can have the full interactive display on your site.

### How to embed
Let's say you have chosen a visualization on the Open Spending platform; notice there's an "embed" button at the bottom right of the webpage. The red arrow points to the button below.

<img alt="" src="http://www.pbs.org/idealab/budget-eg-line.png" title="A visualised budget can easily be embedded" class="pull-right" style="margin-left: 1em;" />
<br>
Just click "embed" and you'll be presented with the code to embed on your website and some options for the size (in pixels) of the interactive.
<br>
<img alt="" src="http://www.pbs.org/idealab/embed.png" class="pull-right" style="margin-left: 1em;" />
<br>
The rest is just cut and pasting this code extract into your site.

So, if you're a journalist looking to add an interactive to your online news story, an NGO looking to show spending on your cause, or you work in a government department and want to show how you allocate funds, then you can add this code to your site. If you are unsure how to paste the code then contact your site administrator.

The reason it's possible to embed code comes down to the Open Spending widgets.

In very simplified terms a widget is a piece of code you can add into your webpage, and it pulls data -- in this case from the Open Spending database -- so you don't need to store datasets yourself. If you have any difficulties or questions about using the Open Spending widgets, then please don't hesitate to [contact us](http://lists.okfn.org/mailman/listinfo/openspending). If you're curious about how the widget code works, then here are three examples shown in jsfiddle where you can see the full web environment for the:<br>
<br>
<il>[Bubble Tree](http://jsfiddle.net/vitorbaptista/jhaKT/)</il><br>
<il>[Tree Map](http://jsfiddle.net/vitorbaptista/RVdNt/)</il><br>
<il>[Aggregate Table](http://jsfiddle.net/vitorbaptista/mFVMv/)</il>
<br>
The three main visualizations we offer at the moment are listed below along with links to the open-source code on Github.
<br>
### The bubble tree
<img alt="" src="http://www.pbs.org/idealab/bubble.png" >
<br>
Widget code for the bubble tree on Github is [here](https://github.com/openspending/openspendingjs/tree/master/widgets/bubbletree).
<br>
### The tree map
<img alt="" src="http://www.pbs.org/idealab/squares.png" class="pull-right" style="margin-left: 1em;" />
<br>
Widget code for the tree map on Github is [here](https://github.com/openspending/openspendingjs/tree/master/widgets/treemap).
<br>
### The table view
<img alt="" src="http://www.pbs.org/idealab/table.png" class="pull-right" style="margin-left: 1em;" />
<br>
Widget code for the table view on Github is [here](https://github.com/openspending/openspendingjs/tree/master/widgets/aggregate_table).
<br>
And it's likely more interactive displays will be available over time. Have fun with the widgets. Let us know how easy you find them to use and when you use them by posting a link to your site on the Open Spending mailing list.
<br>
