# Instapage Snippet

snippet.js

// ** THIS VARIATION DOES NOT USE A FORM **
// The two possible endpoints for production and staging
var production_endpoint = 'https://prosper.com';
var staging_endpoint = 'https://www.stage.circleone.com';
// The current endpoint.
// For staging set this to: current_endpoint = staging_endpoint + '/borrower/api/v1' 
// For production set this to: current_endpoint = production_endpoint + '/borrower/api/v1'
var current_endpoint = staging_endpoint + '/borrower/api/v1';
// The APIs that we need to call at the base current_endpoint
var alt_key_api = current_endpoint + '/user/alt_key/';
var slug_api = current_endpoint + '/content?wordpress_slug=legalfootnote';

// Grab query params - we need to extract all of the query parameters
// In particular, we will want to extract the EALT parameter that personalizes the experience
location.queryString = {};
location.search.substr(1).split("&").forEach(function (pair) {
    if (pair === "") return;
    var parts = pair.split("=");
    location.queryString[parts[0]] = parts[1] && decodeURIComponent(parts[1].replace(/\+/g, " "));
});

//console.log(location.queryString);

// A helper function to ensure that the first name returned from the /user/alt_key API
// is properly capitalized.
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.toLowerCase().slice(1);
}

// This is the default welcome message - i.e. the title on the Instapage page where
// you intend to insert the %%name%% template.
// Should the API call fail, then we need a default message to display - i.e. without
// the applicant's first name. Set that here...
var default_welcome_message = 'Welcome back. Ready to soar?';

// Populate user first name and obfuscated email using the alt_key (EALT parameter)
// Note -- you need to set the ID of the welcome message element. You can find this
// by attempting to change the CSS code for the element in instapage. The CSS customization
// modal shows the element ID. Set that here...
var welcome_message_element_id = 'element-7';
var queryable_id = '#' + welcome_message_element_id; 
// Edit the string below to be the template format you want to use
var name_template = '_name'
if (location.queryString.hasOwnProperty('EALT')) {
	var alt_key = location.queryString.EALT;
  //console.log("Alt:" + alt_key);
  var url = alt_key_api + alt_key;
	$.get(url, function(data, status){
    if (data.first_name) {
     	name = capitalizeFirstLetter(data.first_name);
    }
    text = $(queryable_id).text();
    res = text.replace(name_template, name);
    $(queryable_id).text(res);
  })
  .fail(function() {
    $(queryable_id).text(default_welcome_message);
  });
} else {
    $(queryable_id).text(default_welcome_message);
}

// Set any default legal footer message here that will get displayed in case the
// example legal slugger fails to load. Note, you should enter a HTML formatted string.
var fallback_footer = '<p>Legal verbiage goes here</p>';

// Now call the API to get the legal slug and render it to the bottom of the current footer.
// You should check the CSS modal for the current footer to get its element ID and enter it...
var footer_element_id = 'element-43';
var queryable_footer_id = '#' + footer_element_id;
$.get( slug_api, function(data) {
    //console.log("slug done");
        footer = data.rendered ? data.rendered : fallback_footer;
        //console.log(footer);
        existing_footer = $(queryable_footer_id).html();
        styled_insert = '<div style="text-align: left;" class="contents" id="prosper-legal">' + footer + '</div>';
        revised_footer = existing_footer + '<p><br></p>' + styled_insert;
        $(queryable_footer_id).html(revised_footer);
})
    .fail(function() {
        existing_footer = $(queryable_footer_id).html()
        styled_insert = '<div style="text-align: left;" class="contents" id="prosper-legal">' + fallback_footer + '</div>';
        revised_footer = existing_footer + '<p><br></p>' + styled_insert;
        $(queryable_footer_id).html(revised_footer);
    })

This latest version is for the button-only (CTA) page. I have removed the form stuff.