Website - Buttons + Banners

Katapult provides a set of predefined buttons and banners you can implement on your website. They come in a variety of colors and sizes and adding them requires just a few lines of code.

Buttons & Banners

By encouraging the customer to get preapproved before they shop, you can increase the average ticket by up to 25%.

Include pre-approval buttons at various stages of the customer journey so that they are aware they have the option to split their payments into installments over time, regardless of their credit status.


Step 1. Add a reference to the Katapult stylesheet

In order to display one of the predefined Katapult buttons, you'll first need to add the Katapult button stylesheet to your website. This can be done by copying and pasting the following code into the section of the HTML that powers your website

<link rel="stylesheet" href="">

Step 2. Add the 'Get pre-approved' HTML

You can add the Katapult button or banner anywhere on your website that you choose. To do this, you'll need to add an HTML anchor tag where you'd like the button or banner to appear. The buttons and banners come in a variety of different styles. Find the style you'd like to use and copy and paste the corresponding HTML from below it into your website HTML.

Animated Buttons

Static Buttons

HTML Instructions

After adding your pre-approval button resources, follow the steps below to initialize the application process.

Step 1. Place the following script tag on the bottom of your page. This snippet uses an asynchronous loading method that allows you to immediately use the katapult.js plugin without a significant impact on the load time of your page.

If you have not received your public tokens reach out [email protected]


Environment Reminder

Remember, your public token varies depending on whether you’re testing with the Katapult sandbox or your project is live in production. The token you use here must match the environment you define.



var _katapult_config = {


environment: "" };

!function(e,t){e.katapult=e.katapult||{};var n,i,r;i=!1,n=document. createElement("script"),n.type="text/javascript",n.async=!0,n.src=t. environment+"/"+"plugin/js/katapult.js",n.onload=n. onreadystatechange=function(){i||this.readyState&&"complete"!=this.readyState|| (i=!0,e.katapult.setConfig(t.api_key))},r=document.getElementsByTagName ("script")[0],r.parentNode.insertBefore(n,r);var s=document.createElement ("link");s.setAttribute("rel","stylesheet"),s.setAttribute("type","text/css"), s.setAttribute("href",t.environment+"/"+"plugin/css/katapult.css");var a=document.querySelector("head");a.insertBefore(s,a.firstChild)}(window, _katapult_config);


Step 2. Place a button with class btn-katapult-preapprove on the pages where you want the Katapult pre-approval functionality to be available. Clicking this button will load the Katapult pre-approval form.

<a class="btn-katapult-preapprove" id="btn-katapult" href="javascript:void(0)"></a>

Step 3. Start the pre-approval process when the button is clicked.

document.getElementById("btn-katapult").addEventListener("click", function() {


Below are a range of banners that can be integrated on your website to help market Katapult’s lease-to-own solution to customers.