Widgets are extremely simple ways of displaying bill information on your website in an attractive and engaging way. Once you have a widget embedded in your website, the bills will update automatically in the same way as the bill sheet. Visitors to your website can interact with them and click through to see the bill pages. They don't need to have a BillTrack50 account.
Widgets come in two flavors - a simple list or a US map with clickable states. To create a widget, first you need to make a bill sheet and check it to make sure it contains the right bills. Learn how to do that here.
Once you have your bill sheet, go to the Widgets tab and select either Bill Widget or Map Widget from the drop down menu:
Which Widget?
Which widget you should use depends on the bills you want to share. If you have relatively few bills from one or two states, and you just want to display very basic information about the bills, then the bill list widget is for you. As it's a list, visitors to your website are unlikely to want to spend a lot of time scrolling through dozens of bills so it's best to keep the list short - five or ten bills.
If you have many bills from a good number of states, then the map widget is a better choice. Visitors can click each state to see the bills from there, and who can resist clicking their own state on a map?
If you want to show a list of bills but need to show more information, then you might prefer to use a stakeholder page instead.
See this video for a walkthrough of how to create a bill list widget.
See this video for a walkthrough of how to create a bill map widget.
To Create and Embed a Bill List
Customize your list
The Customize page allows you to change a number of elements to determine how your bill list will look on the webpage, so it will match the look and feel of your website.
- Title - change the title to something logical.
- State Filter lets you choose states from the drop down menu. This lets you use a multi state bill sheet to produce a widget for a single state or subset of states.
- Return Bill Count lets you decide how many bills will be shown in the widget.
- Title Font Color, Title Background and Border Color let you choose the color scheme. You can click the colored square to select the color or type or paste the hexadecimal color directly.
- Position Indicator lets you choose whether to display whether you approve or disapprove of the bills, according to the position column. Read this post to learn how to add a position column to your bill sheet.
- Height and Width let you set the size of your widget on the page, in pixels (px) or as a percentage of the height, for the width.
- Sort By lets you choose whether the list sorts by the last action date, the bill number, the bill title, the state code or a position if you have set one. And Sort Direction lets you set it to sort either descending or ascending.
When you have finished editing, click Test Settings to see your bill list.
Embed your List
When you are happy with how your bill list looks, click Generate Script to get the code you need to embed it into your website.
Click Copy Script to capture the javascript code and then just embed that code directly into your website.
Read this post to see how to embed the code into a SquareSpace website. The process is very similar for other website creators.
If you want to subsequently change the color or other formatting, you can come back to the bill sheet, make the changes and re-generate the script to paste into your website. Or you can edit the code directly in your website.
Note: if you change the bill sheet, those changes will automatically be reflected on your website. If you delete the bill sheet or your account is deactivated for any reason, the widget on your webpage will break and display an error message.
See this post for good examples of how people are using widgets.
To Create and Embed a Bill Map
The process is very similar to creating and embedding a bill list but with some important differences.
The map shows how it will display on the web page. You can click a state to see the bills from that state. The columns that display are based on the template that you choose. Clicking Detail will take you to the relevant bill page. Click <Back to go back to the map.
- Width sets the width of the map on the page, in either pixels (px) or as a percentage of the available space.
- Color By allows you to choose whether to change the color gradient between states according to the number of bills in each state, your bill rating or simply to show whether there is or isn't a bill from that state.
- The Map Color Range lets you choose the two ends of the gradient. It's usually best to choose two shades of the same color (e.g. light blue to dark blue) to avoid some odd shadings.
- Grid Template lets you choose the template which will apply to the state level view of the bills. It's a good idea to create a specific template for this, thinking carefully about what information you want visitors to your website to see. You may want to include custom columns with information such as your analysis of the bills. You will also want to think carefully about the number of columns and their width, to avoid it looking cramped on the web page and so visitors don't have to scroll sideways. This will usually take some trial and error. Read this post to learn how to create templates.
- Position Indicator lets you choose whether to display whether you approve or disapprove of the bills, according to the position column. Read this post to learn how to add a position column to your bill sheet.
When you have finished editing, click Test Settings to see your bill map and click some states to make sure you're happy with the information displayed.
Embed your Map
When you are happy with how your bill map looks, click Generate Script to get the code you need to embed it into your website.
Click Copy Script to capture the javascript code and then just embed that code directly into your website.
Read this post to see how to embed the code into a SquareSpace website. The process is very similar for other website creators.
If you want to subsequently change the color or other formatting, you can come back to the bill sheet, make the changes and re-generate the script to paste into your website. Or you can edit the code directly in your website. To change the template, you will need to change it on the Widgets tab and re-generate the code.
Note: if you change the bill sheet, those changes will automatically be reflected on your website. If you delete the bill sheet or your account is deactivated for any reason, the widget on your webpage will break and display an error message.
Read this post to see how to further edit the font family and font size.
See this post for good examples of how people are using widgets.