Widgets for your site

What a widget shows, and what it never does

• The words in a widget are the site’s. You choose the record or the chart and, on a member’s card, the votes; nothing in the code puts your words inside it. When the votes were yours to choose, the card says so.
• Every widget is sourced and dated. No option removes the source line, the caveats a chart carries on its page, or the link to the full record.
• The same for everyone. Every member of both parties, every district, every law and every chart on the site can be embedded, on the same terms (see the neutrality charter).
• Cards leave some records out; charts do not. The four cards follow the API’s line: no financial disclosures or stock trades, campaign-finance figures, roll calls before 1989, biographies or the Democratic–Republican scale. Every chart can be embedded, including the campaign-money rings, the charts of members’ own finances and the Democratic–Republican scales. Two laws bind whoever republishes some of those figures: financial disclosure reports may not be used to solicit money for a political purpose (5 U.S.C. 13107(c)), and information copied from FEC reports may not be used to solicit contributions (52 U.S.C. 30111(a)(4)). The charts name no individual donor.
• Nothing follows your readers. A widget sets no cookies and runs no analytics or ads. A card runs no script but the one that sizes it, and loads nothing from anywhere else except a member’s official portrait, from the congress-legislators project’s image host. A chart runs this site’s own scripts to draw itself, and loads nothing from anywhere but yourstate.us.

Without the builder

Put /embed in front of a page’s path. /vote/49009 becomes https://yourstate.us/embed/vote/49009, and /district/TX-23 becomes https://yourstate.us/embed/district/TX-23. Put that address in an <iframe>, and add the script once per page:

<iframe src="https://yourstate.us/embed/vote/49009" title="yourstate.us: roll-call vote"
  width="100%" height="330"
  style="border:0;max-width:640px;display:block;color-scheme:normal"
  loading="lazy"></iframe>
<script async src="https://yourstate.us/embed.js"></script>

For a chart, put /embed/chart in front of the page’s path and name the chart. The ring of what federal money pays for, on /spending, is https://yourstate.us/embed/chart/spending?chart=functions. A statistics chart keeps the page’s own query, so it is the chart you were looking at: /districts/TX?i=poverty_rate becomes https://yourstate.us/embed/chart/districts/TX?chart=trend&i=poverty_rate. Every chart’s name is in the address its “Embed this chart” link opens, and the builder above lists every chart on a page you paste.

<iframe src="https://yourstate.us/embed/chart/spending?chart=functions"
  title="yourstate.us: what federal spending paid for"
  width="100%" height="560"
  style="border:0;max-width:960px;display:block;color-scheme:normal"
  loading="lazy"></iframe>
<script async src="https://yourstate.us/embed.js"></script>

/embed.js sizes every yourstate.us frame on the page to its card or chart. It is optional; without it the frame keeps the height in the code. It sets nothing and sends nothing. Keep color-scheme:normal in the frame’s style: on a dark page, a browser otherwise paints the widget’s rounded corners white.

Join options with &, as in /embed/member/<id>?recent=3&theme=dark. A value that is not valid is ignored rather than refused, so a card always shows; a chart name the page does not have shows a notice in the frame instead. Check the result in the builder above.