Website - Buttons + Banners
Katapult provides a set of predefined buttons and banners you can implement on your website. They come in various colors and sizes, and adding them requires just a few lines of code.
Buttons & Banners
You can increase the average ticket by up to 25% by encouraging the customer to get preapproved before they shop.
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.
Buttons
Step 1. Add a reference to the Katapult stylesheet
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 HTML's section 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 the website. 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 various 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 at the bottom of your page. This snippet uses an asynchronous loading method that allows you to immediately use the katapult.js plugin without significantly impacting the page's load time.
If you have not received your public tokens, reach out to [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>
Banners
Below is a range of banners that can be integrated into your website to help market Katapult’s lease-to-own solution to customers.
Updated 10 days ago