Setting up Clicklease buttons

Requirements

To begin using Clicklease buttons you will need to have your Clicklease token
You will need to reference our Javascript Library
You will need to choose a button style

Reference the Javascript library

The first step for setting up the Clicklease buttons is to reference our Javascript library. This can be done by adding the following code to your website. This script needs to be called prior to the button tag so generally, this is added to the head of the webpage.

<script>
        async function getScript() {
            (function (w, d, s, l, i) {
              w[l] = w[l] || [];
              w[l].push({});
              var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != "dataLayer" ? "&l=" + l : "";
              j.async = true;
              j.src = "https://app.clicklease.com/jsdk/getScript";
              f.parentNode.insertBefore(j, f);
            })(window, document, "script", "dataLayer");
          }
          getScript();
</script>

Add a Clicklease button tag

After adding the javascript library you can now add the Clicklease button tags to your page.

<clk-button price="20000" desc="apple" button="white-dark-1" token="55dd82b3-a9ae-431c-a58d-6fc67dd4a33d"></clk-button>
<clk-button price="20000" desc="apple" button="white-dark-1" token="55dd82b3-a9ae-431c-a58d-6fc67dd4a33d" withInfoPage=""></clk-button>
<clk-button price="20000" desc="apple" button="white-dark-1" token="55dd82b3-a9ae-431c-a58d-6fc67dd4a33d" withInfoPage></clk-button>
<clk-button price="20000" desc="apple" button="white-dark-1" token="55dd82b3-a9ae-431c-a58d-6fc67dd4a33d" withInfoPage="true"></clk-button>

The Clicklease button tag has the following attributes

Price = a dollar amount that is used to calculate a monthly payment, only needed on "pricing button" types.
desc = the name or description of the item for which the amount is listed
button = the name of the style of the button you want to use
token = a serial token that links to your business lease application and associates the applications with your store.
withInfoPage = This attribute allows the Iframe to open with the URL for the benefits page. This attribute has three different ways to be included to allow the benefits page to be included in the iframe.
1- withInfoPage=""
2- withInfoPage
3- withInfoPage="true"
This will send a true value that will allow the benefits page to be shown in the iframe flow.
If the attribute contains other information, will send a false value and it won't show the benefits page information in the iframe.
If the withInfoPage attribute is not included in the tag, or if the attribute is included with the value of "false", the benefits page won't be included in the iframe's flow.
Example (withInfoPage="false").

All buttons link to a lease application.

Clicklease offers two types of buttons

Pricing Buttons - These buttons calculate and display an affordable monthly payment based on an item cost or total cost. Pricing buttons require a "price" attribute in the tag that is passed to our Javascript SDK to determine a monthly payment.
No pricing buttons - buttons that simply promote financing with Clicklease that do not calculate a monthly payment. Useful for displaying on pages without an item amount or total cost.

For different script integrations:

CMS	Example
Joomla	1. Please login with your credentials 2. On your left you will see a sidebar, please look for an option called "Templates" and click it. 3. Look for your domain or the default option an please click it 4. You will see a Navigation tab, there look for "</> Custom code" and click it 5. You will see some text areas, look for the one that says "Before " 6. And between "" tags, please paste our script and save
Shopify	1. Once you access your Shopify account, on your sidebar, look for the option "Online store" and click it and then click on the option "Themes". 2. After, on the right side of the page, click the button that says "Customize". 3. Here you have to go to the lower left side corner, where you will see an option that is named “Theme actions” you have to click on it, this will display a list of options where you’ll find the “Edit code” option. 4. Now you have to go to the “Layout” folder and click on it to display a .liquid files list, now click on “{/} theme.liquid”, which will automatically generate a code file on the right side of the screen. 5. Here you can add your Javascript code, just after “” section, paste the script I am sending to you as shown in the following example 6. Please save and that would be it
Xcart	1. Once you access to your account, you will see a navbar where there is an option called “Content” put your mouse over there with out clicking and click on the option “Edit Templates”. 2. There look for a file called “common files” 3. Look for a file called “js” 4. There look for a file called common.js, that is the file where you are going to add our script. 5. Look for a clean space and paste our script and save
BigCommerce	1. Once you access to your account, you will see a sidebar where there is an option called “Storefront”, Click on it 2. There look for an option called “Script Manager”. 3. Now please select the option that says, “Create script”. 4. Write the name “clicklease” for example. 5. Location on page: select the option “Footer” 6. Pages where script will be added: All Pages 7. Script category: Essential 8. Script type: Script 9. Now between Script tags please paste the code on the textbox and save, as shown in the next line:
OpenCart	If you are a developer and using the default theme, then you can add the code directly into the code from theme editor. 1. Go to admin 2. Look for an option called "Design" 3. Then look for "Theme Editor" 4. Choose your store mostly “Default” 5. Choose the template “Common” 6. Then click “success.twig” and add JavaScript code above {{footer}}. It should look like this `<script> {script code here} </script>` {{footer}} 7. and then save.
CS cart	If you are a developer and using the default theme, then you can add the code directly into the code from theme editor. 1. Go to Design 2. Look for an option called Layouts/Layouts 3. Then look for 4. Go into the custom HTML code and paste: It should look like this `<script> {script code here} </script>` {{footer}} 5. and then save.
WIX	1. for adding the custom script into wix, when we open the dashboard at the left, we will see at the bottom a button that says “settings” 2. Over there is going to be a option that says add “custom code” 3. And there will be 3 options include it into the header, footer, or body of the website, From there we will have to add this script tag to any of them(recommended the footer).