Widget

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.

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="https://www.katapult.com/plugin/css/katapult.css">

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

Banners

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.

Development: https://sandbox.katapult.com

Production: https://www.katapult.com

<script>
var _katapult_config = {

api_key: "INSERT YOUR PUBLIC TOKEN HERE",

environment: "https://sandbox.katapult.com" };

!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);

</script>

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.

<script>	
document.getElementById("btn-katapult").addEventListener("click", function() {
  katapult.preapprove();
});	
</script>