The Storage+Solar Calculator is a lead capture tool that can be integrated with your website.

To use the Storage+Solar Calculator, follow these steps:

1. Request an Api-Key from support.
2. Your can now link to your Calculator using the following URL:
   https://notrueup.solardatapros.com/reports/solar_calculator?cid=API-KEY
Be sure to substitute API-KEY with the one you were provided.

You have a few options on how to integrate the Calculator with your website, including linking directly with it or embedding it as an iframe.  Below are instructions for both.

Linking Directly to the Calculator

If you build a landing page on your website for marketing, you can use that link directly.  If you want to forward the referrer, host, and any Google Analytics UTM codes (including utm_source, utm_medium, utm_campaign, utm_content. and utm_term), follow these steps:

1. Define a button (or a link) that will trigger the call to the Storage+Solar Calculator.  Add an ID of "solar_calculator_btn" and add an "onclick" handler to call the Javascript function "loadSolarCalculator", something like this:
   

   <a id="solar_calculator_btn" onclick="loadSolarCalculator(solar_calculator_btn);" class="button">Get my Solar Quote!</a>

2. Add this Javascript to your page to define the "loadSolarCalculator" function:
   

   <script type="text/javascript">
   function loadSolarCalculator(button_id) {
       let params = [];
       // Pack the parameters
       params.push(`cid=API-KEY`);
       params.push(`url_host=${encodeURIComponent(window.location)}`);
       params.push(`url_referrer=${encodeURIComponent(document.referrer)}`);
       // Redirect
       let btn = document.getElementById(button_id);
       btn.innerHTML = 'Loading...';
       let base_url = 'https://notrueup.solardatapros.com/reports/solar_calculator';
       let url = `${base_url}?${params.join('&')}`;
       window.location = url;
   }
   </script>

   Be sure to substitute API-KEY with the one you were provided.

3. If you want to style the link as a button, you can use CSS like this example:
   

   <style scoped>
       a.button {
           padding: 10px 10px;
           border: 1px outset buttonborder;
           border-radius: 10px;
           color: white;
           background-color: black;
           text-decoration: none;
       }
   </style>

   Which will look like this:
   
   Feel free to style this in any way that matches your website.
4.  If you would like to collect some of the information on your site first (your style, your content), you can do so and pass them to our page as an extra "initial_fields" parameter.  Fields currently supported:
   

   addressOne, city, state, zipCode
   monthlyBill
   crmXId
   firstName, lastName, email, phone

   Note: sections that have all the data (for example address and monthlyBill) will auto advance.
   You can modify the above "loadSolarCalculator" Javascript function to collect and pack the data from inputs into an "initial_fields" parameter, something like this:
   

   <script type="text/javascript">
   function loadSolarCalculator() {
       let params = [];
       // Get the fields
       let addressOne = document.getElementById('addressOne').value;
       let city = document.getElementById('city').value;
       let state = document.getElementById('state').value;
       let zipCode = document.getElementById('zipCode').value;
       let monthlyBill = document.getElementById('monthlyBill').value;
       let crmXId = document.getElementById('crmXId').value;
       // Pack the fields into initial_fields
       params = [];
       params.push(`addressOne=${addressOne}`);
       params.push(`city=${city}`);
       params.push(`state=${state}`);
       params.push(`zipCode=${zipCode}`);
       params.push(`monthlyBill=${monthlyBill}`);
       params.push(`crmXId=${crmXId}`);
       let initial_fields = encodeURIComponent(params.join('&'));
       // Pack the parameters
       params = [];
       params.push(`cid=API-KEY`);
       params.push(`initial_fields=${initial_fields}`);
       params.push(`url_host=${encodeURIComponent(window.location)}`);
       params.push(`url_referrer=${encodeURIComponent(document.referrer)}`);
       // Redirect
       let btn = document.getElementById('solar_calculator_btn');
       btn.innerHTML = 'Loading...';
       let base_url = 'https://notrueup.solardatapros.com/reports/solar_calculator';
       let url = `${base_url}?${params.join('&')}`;
       window.location = url;
   }
   </script>

Embedding the Calculator as an iFrame

You can also make a landing page that embeds the calculator as a fullscreen iframe.  This has a few benefits, including keeping the browser URL on your domain, and lets you add any non-visible content like tracking pixels.

See the example HTML code below to implement this.  Note that there is a JavaScript function required (loadSolarCalculatorFrame) to initialize the iframe and pass through any URL parameters (referrer, host, and any Google Analytics UTM codes - also include initial_fields if you collect that on a previous page).

<html>
<body onload="loadSolarCalculatorFrame()" style="border:0; margin:0; padding:0;">
<iframe id="calculator-iframe" src="" width="100%" height="100%" border="0" allowfullscreen></iframe>
</body>

<script type="text/javascript">
function loadSolarCalculatorFrame() {
    // Pass through the parameters from the host URL to the calculator
    let base_url = 'https://notrueup.solardatapros.com/reports/solar_calculator'
    const urlParams = new URLSearchParams(window.location.search);
    // Pack the parameters
    let params = [];
    params.push(`cid=API_KEY`);
    params.push(`initial_fields=${encodeURIComponent(urlParams.get('initial_fields'))}`);
    params.push(`url_host=${encodeURIComponent(window.location)}`);
    params.push(`url_referrer=${encodeURIComponent(document.referrer)}`);
    if (urlParams.has('utm_source')) params.push(`utm_source=${urlParams.get('utm_source')}`);
    if (urlParams.has('utm_medium')) params.push(`utm_medium=${urlParams.get('utm_medium')}`);
    if (urlParams.has('utm_campaign')) params.push(`utm_campaign=${urlParams.get('utm_campaign')}`);
    if (urlParams.has('utm_term')) params.push(`utm_term=${urlParams.get('utm_term')}`);
    if (urlParams.has('utm_content')) params.push(`utm_content=${urlParams.get('utm_content')}`);
    // Initialize the calculator iframe
    const calculator = document.getElementById('calculator-iframe');
    calculator.src = `${base_url}?${params.join('&')}`;
}
</script>
</html>

Be sure to substitute API-KEY with the one you were provided.

Note that no style or content is needed on this page, its just a host for the fullscreen iframe for the calculator.  It does, however, emulate as a page on your website (no browser URL change).

Adding a Banner to your Web Pages

You can also create a banner at the top of any/every webpage on your site, which could look something like this:

Here is the example code for this banner, change the text, colors etc to match your needs.

<style>
.calculator-container {
    width: 100%;
    margin: 0 auto;
    background-color: #0671b9;
}
.calculator-banner {
    max-width: 1024px;
    margin: 0 auto;
    background-color: #0671b9;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.calculator-banner-p {
    color: #ffffff;
    font-size: 27px;
    line-height: 27px;
    text-align: center;
    margin: 8px 0;
}
.calculator-banner-button {
    padding: 10px 10px;
    margin: 8px 0;
    border: 1px outset buttonborder;
    border-radius: 10px;
    color: white;
    background-color: #fdd300;
    text-decoration: none;
    cursor: pointer;
    font-size: 20px;
    min-width: 140px;
    text-align: center;
}
</style>
<div class="calculator-container">
    <div class="calculator-banner">
        <p class="calculator-banner-p">Interested in residential solar for your home?</p>
        <a class="calculator-banner-button" id="calculator-banner-button" onclick="loadSolarCalculator('calculator-banner-button');" target="_self"><span>Get a Quote!</span></a>
    </div>
</div>

Custom Fields

If you need to track any custom fields, this can be done by using our LCF tracking (Lead Custom Fields), which work similar to UTM codes.  A good example is to track a referral code per lead.  You can name them whatever you want, the name just needs to start with "lcf_", ie "lcf_referral".  These fields will be tracked by the Calculator and passed back with your webhook data (for CRM integration), and included in the CSV export from the Lead Funnel report.

To use them, You just need to add the LCF parameters to the landing page URL (again similar to UTM codes) and enhance your landing page/iframe page JavaScript to pass through the codes.  Example URL:
https://quote.website.com?utm_campaign=web&lcf_referral=12345