The Grocery Budget Calculator can be embedded on third party websites, giving you the ability to provide monthly food cost estimates to visitors. To get the calculator on your site, follow the instructions below.
The calculator is responsive, and has a maximum width of 500px and a minimum width of 280px (the height is variable based on the user’s data). This allows you to use the calculator on a responsive website or in a sidebar setting. Please be aware that the calculator will stay at least 280px wide (which might affect your website’s layout), and will align to the middle of the column.
To continue using the calculator embed, do not change the styling or branding of the calculator. If you notice any rendering issues with your website, please email us at email@example.com, and include a link to a page with the embed.
Copy the code below and paste it in the body content of your website (do not paste it in the head tag). You can place the code wherever it best fits with your content. Please note that certain restrictions may apply based on your website’s security or Content Management System. Contact your webmaster with questions.
<script async src="https://spendsmart.extension.iastate.edu/calculator/init.js"></script>
<div id="sses-calculator" class="sses-calculator" data-calculatordata></div>