Javascript and Squarespace API Integration

You are here:
< All Topics

The following will show you the API integration steps with Javascript and Squarepace.

Standalone applications

The following example is in PHP, but can be repurposed to your language of choice (Python, Ruby, Java, etc..)

Sample PHP API push

/**
* Basic snippet for posting with command line curl
*/
$apikey = '123456';

function doCurl($apikey = null, $data = []) {
$data = http_build_query($data);

$api_base = 'https://aninja.com/api/v1';

$api_endpoint= '/contactform/?apikey='.$apikey.'';

$cmd = 'curl -sL --data \''.$data.'\' "'.$api_base.'/'.$api_endpoint.'"';

Javascript applications

The following example is of an API request in Javascript. You can customize off of the following examples to suit your actual code / use case.

Example use cases: Squarespace, Shopify

ajax({
type: 'POST',
url: "https://aninja.com/api/v1/contactform/?apikey=YOUR_API_KEY_HERE",
data:$.param({contact_name : contact_name}) + "&"+ $.param({contact_email1 : contact_email1}) + "&"+ $.param({contact_phone1 : contact_phone1})+ "&"+ $.param({company_name : company_name}),
success: function (data) {
alert('success');
}
});

Squarespace: 

The following is more specific to Squarespace (add in the “Page section Settings > Advanced tab > Page header code injection text area¬†section for the page where you have the form you want to forward into aNinja)

// SQUARESPACE - example 1
// Add in javascript advanced:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('form').submit(function(e) {
var contact_name = $("input[name='fname']").val();
var contact_email1 = $( "input[name='email']").val();
var phone_areacode = $('*[data-title="Areacode"]').val();
var phone_prefix= $('*[data-title="Prefix"]').val();
var phone_line = $('*[data-title="Line"]').val();
var contact_phone1 = phone_areacode+phone_prefix+phone_line;
var subject = $($('select')[0]).val();
var pref_contact_method = $($('select')[1]).val();
var message = $('textarea#textarea-yui_3_17_2_1_1442700176413_134868-field').val();

$.ajax({
type: 'post',
url: "https://aninja.com/api/v1/contactform/?apikey=YOUR_API_KEY_HERE",
data: {
'contact_name': contact_name,
'contact_email1': contact_email1,
'contact_phone1': contact_phone1,
'your-comments': 'message: '+message+' subject:'+subject+' pref_contact_method: '+pref_contact_method
},
success: function (data) {
// alert('success');
}
});
});
});
</script>

Fields mapping Table

The following are standard fields you can map to, in addition to any custom fields created in your application that you can see under Settings > Custom fields.

Table of Contents