Embeddable Widgets

Auto-Resizing

Widgets send their height via postMessage. Add this script to your page for automatic iframe resizing:

<script>
  window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'civiq-embed-resize') {
      var iframes = document.querySelectorAll('iframe[src*="civdotiq.org/embed"]');
      iframes.forEach(function(iframe) {
        if (iframe.contentWindow === e.source) {
          iframe.style.height = e.data.height + 'px';
        }
      });
    }
  });
</script>

1. District Representatives

Shows all federal representatives (senators + House member) for a given congressional district.

Parameters

URL

https://civdotiq.org/embed/reps/{districtId}

Embed Code

<iframe
  src="https://civdotiq.org/embed/reps/MI-12"
  width="100%"
  height="300"
  frameborder="0"
  style="border: 2px solid #e5e7eb; max-width: 480px;"
  title="CIV.IQ District Representatives"
></iframe>

2. Bill Status Tracker

Shows the current status of a bill with a visual progress bar from introduction to enactment.

Parameters

URL

https://civdotiq.org/embed/bill/{billId}

Embed Code

<iframe
  src="https://civdotiq.org/embed/bill/119-hr-1"
  width="100%"
  height="300"
  frameborder="0"
  style="border: 2px solid #e5e7eb; max-width: 480px;"
  title="CIV.IQ Bill Status Tracker"
></iframe>

3. District Snapshot

Shows a compact overview of a congressional district: representative, demographics, and geography.

Parameters

URL

https://civdotiq.org/embed/district/{districtId}

Embed Code

<iframe
  src="https://civdotiq.org/embed/district/MI-12"
  width="100%"
  height="300"
  frameborder="0"
  style="border: 2px solid #e5e7eb; max-width: 480px;"
  title="CIV.IQ District Snapshot"
></iframe>