Our sharing tools provide a simple and visually pleasing way to share bills with the wider world. Here is how to quickly and easily add a widget or stakeholder page to a Squarespace website. Other website providers will be similar.
BillTrack50 sharing tools work perfectly with Squarespace, but it's worth noting that you will need at least a Business subscription with Squarespace to add stakeholder pages, as they use iframes. See here for more information. Widgets should work with a Personal plan.
The instructions below are for Squarespace version 7.1, but it should be similar for earlier versions.
Widgets
For this example, I'm going to embed a map widget in a webpage. The process is exactly the same for a bill list widget. If you need help creating a widget, then check out this video. Customise the widget so that it matches the style of your website. The final step, once you are happy with how the widget looks, is to copy the HTML code.
Click Generate Script on the Widgets tab of your bill sheet, then Copy Script on the pop up:
Once you have your HTML script copied to your clipboard, it's time to go over to your Squarespace website editor.
Go to the page where you want your widget to appear, and create a new blank section. Then click Add Block:
Choose the </> Code option:
You'll be given a square to put your code into. Select the pencil item to edit it and then paste your copied HTML over the code that is already there:
You can now preview the widget by clicking PREVIEW IN SAFE MODE. You'll probably see a widget that is far too small and constricted. Do not despair, however, as the widget will change size to fit within the block. Simply grab the blue handle on the right and drag it across until the blue box is the size you want.
The widget will remain the wrong size for now, as you won't see it in its full glory until you save the page and exit.
Go to the top of the page and click SAVE then EXIT:
You should now see the widget on the page and the correct size.
The data will update automatically, to always reflect the contents of your bill sheet. If you want to change the color or other formatting elements of the widget, then you will need to copy the HTML again from the widget tab of the bill sheet and paste it back into the Squarespace page.
Caution: Make sure you don't delete the bill sheet in your account, as that will cause the web page to stop working!
Stakeholder Pages
The process here is very similar, but as you are using an iframe, there are some differences.
For the basics of creating and using stakeholder pages, see this post.
The first step, once you have created your stakeholder page, is to check the 'Make this stakeholder page public' box at the bottom of the Manage tab. Then click Save.
Return to the Manage tab, and there are two options. You can copy the public URL link and add that to your website as a link. Visitors can then click on the link and they will be taken to a seperate web page which will display the stakeholder page.
If you want to embed the stakeholder page into an existing webpage, however, then you need to use the iframe link.
First, copy the link (which is the same as the standard link but with '/embed' on the end).
You can't paste the link directly into the Squarespace HTML block as we did with the widget code as you first need to add the surrounding iframe code. The simplest way to do this, is to click on the HTML iframe documentation link that is directly below. This will take you to a Mozilla developer page which explains how iframes work. It also has some sample iframe code which we can use:
Simply select and replace the src in line 6 with the link you've copied. You can also change the titles and sizes:
You can now copy all seven lines of code and paste it into your Squarespace website in the same way you would for a widget (above).
The stakeholder page will update automatically on your website to reflect changes made to the bill sheet (such as new bills being added or bills progressing through the legislature) or the stakeholder page (such as changing the template).
Caution: Make sure you don't delete the bill sheet or the stakeholder page in your account, as that will cause the web page to stop working!