search

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.

hashtag
Implementation

hashtag
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 <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>
triangle-exclamation

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.

  1. Save your HTML file and open it in a web browser to confirm that the iframe loads correctly.

hashtag
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:

If using a meta tag in HTML:

hashtag
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.

triangle-exclamation

BUMPER will provide these fields fully configured; the information above is for reference only.

PreviousBest PracticeNextFAQ

Last updated