# Calculator iFrame An **iframe** (inline frame) is an HTML element that allows you to embed another website or application within your webpage. This document provides guidance on integrating an iframe provided by Bumper, ensuring proper security and compliance. ### Implementation #### 1. Adding the iFrame To add an iframe to your webpage, follow these steps: 1. Open your HTML file in a text editor or an integrated development environment (IDE). 2. Locate the section of your webpage where you want the iframe to appear. 3. Copy and paste the following iframe code inside the `` tag: **Example Code:** ```html ``` {% hint style="danger" %} The above is example code and should not be used in a live environment. Please contact Bumper for the correct iFrame HTML specific to your integration. {% endhint %} 4. Save your HTML file and open it in a web browser to confirm that the iframe loads correctly. #### 2. Content Security Policy (CSP) To allow embedding of the Bumper iframe, update your site's CSP settings to permit the Bumper domain. **Example CSP Header:** ``` Content-Security-Policy: frame-src 'self' https://www.bumper.co; ``` If using a `meta` tag in HTML: ``` ``` ### **BUMPER Parameters**

Parameter	Description
`defaultAmount`	Sets the default transaction amount for the calculator.
`firstRepaymentAvailable`	Indicates if the first repayment option is available.
`products`	Specifies the products included in the calculation. `deposit`: Whether a deposit is required (`true/false`). `deposit_percentage`: Percentage of deposit required (if any). `id`: Unique identifier for the product. `instalments`: Number of instalments for repayment. `max`: Maximum amount for the product. `min`: Minimum amount for the product.
`amountPlacement`	Defines the placement of the amount, options are right or left
`supplier`	Identifies the supplier, typically set to `Bumper`. This parameters also control the theme shown.

{% hint style="danger" %} BUMPER will provide these fields fully configured; the information above is for reference only. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://api-docs.bumper.co/bumper-api-documentation/calculator-iframe.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.