Price Calculator Banner

Step 1: Add the Katapult Script (If Not Already Implemented)

If you haven't already added the Katapult script to your page, you can skip this step. If you have already done so, move on to Step 2.

To integrate the Katapult Price Calculator widget, you need to include the following script tag at the bottom of your page, just before the closing </body> tag. This script loads the Katapult plugin asynchronously and appends the required stylesheet to your page.

Script to Add:

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

Key Information:

• api_key: Replace "INSERT YOUR PUBLIC TOKEN HERE" with your actual public token that you get from Katapult.
• environment: Use the sandbox URL (https://sandbox.katapult.com) for testing, or use the production URL when you're ready to go live.

This script will load the Katapult JavaScript SDK asynchronously, ensuring your page performance is not affected.

Step 2: Add the Price Calculator Banners

Now that the Katapult SDK is in place, you need to add the banners that will trigger the Price Calculator Widget.

There are several designs to choose from:

Dark Banner (180x286):

<a class="banner-katapult-price-calculator-dark-180x286" href="#"></a>

Light Banner (180x286):

<a class="banner-katapult-price-calculator-light-180x286" href="#"></a>

How to Use the Banners:

• Copy and paste the desired banner code (dark or light) into your page where you'd like the banner to appear.
• These banners will serve as clickable elements that users will click to open the Katapult Price Calculator.

Step 3: Add the JavaScript to Trigger the Price Calculator

To ensure the Price Calculator widget opens when a user clicks on a banner, you need to add the following JavaScript code.

This script will handle the click event for the banners and trigger the loadPriceCalculator function when clicked.

JavaScript Code:

// Add click handlers for price estimator elements
<script>
document.querySelectorAll('[class*="-price-calculator-"]').forEach(element => {
    element.addEventListener('click', function(e) {
        e.preventDefault(); // Prevent default anchor behavior
        if (window.katapult && typeof window.katapult.loadPriceCalculator === 'function') {
            window.katapult.loadPriceCalculator(); // Load the Katapult Price Calculator
        } else {
            console.error('Katapult SDK not loaded or loadPriceCalculator function not available');
        }
    });
});
<script>

Explanation:

• The script selects all elements with a class name that includes -price-calculator-, ensuring that both the dark and light banners are included.
• e.preventDefault() prevents the default anchor action (like navigation).
• If the Katapult SDK is loaded properly, it triggers the loadPriceCalculator function to open the price calculator widget.
• If the SDK isn't loaded or the function is unavailable, it logs an error in the browser console for troubleshooting.

Step 4: Test the Integration

Once you've added the script and banners to your page, it's time to test the integration:

1. Preview your page in a browser.
2. Click on either the dark or light banner.
3. The Katapult Price Calculator widget should appear, allowing users to interact with the pricing tool.