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>
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.
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.
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;
}
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 zipcodehomeowner-status
- homeowner
or renter
household-income
- any whole number of dollarshousehold-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>
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>
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>
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!
Sample code demonstrating each of the above options is available in our demo app hosted on Glitch: ~rewiring-america-calculator-widget