Rewiring America API

If your main use-case for the API is to include IRA incentive information in your own website, consider using our embeddable calculator widget directly.

Include the following markup on your page:

<script src="https://embed.rewiringamerica.org/calculator.js"></script>
<link
  rel="stylesheet"
  type="text/css"
  href="https://embed.rewiringamerica.org/rewiring-fonts.css"
/>
<rewiring-america-calculator
  api-key="YOUR_KEY_HERE"
></rewiring-america-calculator>

Usage

Be sure to swap out YOUR_KEY_HERE with an API key generated on our developer portal homepage. Sign up on our API website to accept the API Terms and Acceptable Use Policy. Contact us to discuss increased rate limits, SLAs, or additional feature requests.

Customization

You may wish to apply some customization to the look and feel of the calculator. The following options are supported. Please note that deeper customization could potentially break with future releases, so if you use undocumented options be sure to keep up with the changelog.

CSS Themes

The following CSS variables can be set anywhere in the page containing the embed:

rewiring-america-calculator {
  /* Most of the text */
  --ra-embed-text-color: black;
  --ra-embed-emphasis-text-color: rgb(74, 0, 195);
  /* the Calculate! button */
  --ra-embed-primary-button-background-color: rgb(249, 214, 91);
  --ra-embed-primary-button-background-hover-color: rgb(242, 199, 46);
  --ra-embed-primary-button-text-color: black;
  /* card styles: */
  --ra-embed-card-background: white;
  --ra-embed-card-shadow: rgba(0,0,0,0.1) 0px 4px 50px;
  --ra-embed-card-border: 1px solid rgb(217, 217, 217);
  --ra-embed-card-border-radius: 24px;
  /* the lavender card heading: */
  --ra-embed-card-heading-background: rgb(241, 237, 249);
  --ra-embed-card-heading-text-color: black;
  /* the rich purple card heading: */
  --ra-embed-card-heading-intense-background: rgb(74, 0, 195);
  --ra-embed-card-heading-intense-text-color: white;
}

Prefilled Values

If you've already collected some of the inputs from your customer, you can prefill them in the form with the following HTML attributes:

zip - any 5 digit US zipcode
homeowner-status - homeowner or renter
household-income - any whole number of dollars
household-size - a number between 1 and 8 (used as input into median income calculations)
tax-filing - single, joint, or hoh (for Head of Household) status

<rewiring-america-calculator
  api-key="YOUR_KEY_HERE"
  zip="90210"
  household-income="120000"
  household-size="3"
  tax-filing="joint"
  homeowner-status="renter"
>
</rewiring-america-calculator>

Results only

If you're prefilling the form completely and you want to jump straight to the results, use the hide-form attribute. This will display an error if any of the prefilled attributes are invalid, or it will load the summary and incentive details otherwise.

<rewiring-america-calculator
  api-key="YOUR_KEY_HERE"
  hide-form
  zip="90210"
  household-income="120000"
  household-size="3"
  tax-filing="joint"
  homeowner-status="renter"
>
</rewiring-america-calculator>

Summary only (no incentive details)

If you only want the summary of tax credits and rebates, add the hide-form and hide-details attributes.

<rewiring-america-calculator
  api-key="YOUR_KEY_HERE"
  hide-form
  hide-details
  zip="90210"
  household-income="120000"
  household-size="3"
  tax-filing="joint"
  homeowner-status="renter"
>
</rewiring-america-calculator>

Details only (no summaries)

If you only want lists of incentives, add the hide-form and hide-summary attributes.

<rewiring-america-calculator
  api-key="YOUR_KEY_HERE"
  hide-form
  hide-summary
  zip="90210"
  household-income="120000"
  household-size="3"
  tax-filing="joint"
  homeowner-status="renter"
>
</rewiring-america-calculator>

Note: if you hide-form, hide-summary, and hide-details then nothing will show!

Examples

Sample code demonstrating each of the above options is available in our demo app hosted on Glitch: ~rewiring-america-calculator-widget

Calculator Widget Embed