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:
Open your HTML file in a text editor or an integrated development environment (IDE).
Locate the section of your webpage where you want the iframe to appear.
Copy and paste the following iframe code inside the
<body>tag:
Example Code:
<iframe
width="100%"
height="600"
style="border:none;"
title="Bumper Calculator"
src="https://www.bumper.co/gb/thirdparty/calculator?defaultAmount=300&firstRepaymentAvailable=true&preApprovedButtonLink=&products=%7B%22products%22%3A%5B%7B%22deposit%22%3Afalse%2C%22deposit_percentage%22%3A%22%22%2C%22id%22%3A94.13936357912868%2C%22instalments%22%3A3%2C%22max%22%3A%223000%22%2C%22min%22%3A%2260%22%7D%2C%7B%22deposit%22%3Afalse%2C%22deposit_percentage%22%3A%22%22%2C%22id%22%3A83.92947152638605%2C%22instalments%22%3A6%2C%22max%22%3A%223000%22%2C%22min%22%3A%2260%22%7D%2C%7B%22deposit%22%3Afalse%2C%22deposit_percentage%22%3A%22%22%2C%22id%22%3A10.210993699885563%2C%22instalments%22%3A9%2C%22max%22%3A%223000%22%2C%22min%22%3A%2260%22%7D%5D%7D&amountPlacement=right&supplier=Bumper">
</iframe>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.
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:
<meta http-equiv="Content-Security-Policy" content="frame-src 'self' https://www.bumper.co;">BUMPER Parameters
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.
BUMPER will provide these fields fully configured; the information above is for reference only.
Last updated