This article provides a simple example of how a Landing Page utilizes Impact CRM’s public customer register API.
To use the public customer register API you need an API-KEY and the correct API URL.
The code below is from a simple HTML page that contains a form which collects all the required fields from the customer register API call and makes an AJAX POST request.
What you see below is a baseline that demonstrates how the public customer register API can be used and does not imply that it has to be used as is.
It is highly recommended for such calls are carried out server side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h2>Customer Registration Form</h2>
<!-- Sample Customer Form -->
<form id="customerForm">
<label for="firstName">First name*</label><br>
<input type="text" id="firstName" name="firstName" required><br><br>
<label for="lastName">Last name*</label><br>
<input type="text" id="lastName" name="lastName" required><br><br>
<label for="email">Email*</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="nationalityCountryCode">Country Code*</label><br>
<input type="text" id="nationalityCountryCode" name="nationalityCountryCode" required><br><br>
<label for="phoneCountryCode">Phone Country Code*</label><br>
<input type="tel" id="phoneCountryCode" name="phoneCountryCode" required><br><br>
<label for="phone">Phone Number*</label><br>
<input type="tel" id="phone" name="phone" required><br><br>
<label for="password">Password*</label><br>
<input type="password" id="password" name="password" required><br><br>
<label for="confirmp">Confirm Password*</label><br>
<input type="password" id="confirmp" name="confirmp" required><br><br>
<input type="checkbox" id="tandc" name="tandc" required>
<label for="tandc"> Agree to Terms and Conditions</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
<footer>
<script>
// API utm parameters list
var crm_utms = [
"utm_medium",
"utm_source",
"affiliate_id",
"campaign_id",
"utm_campaign",
"utm_term",
"utm_ad_group",
"utm_placement",
"utm_device",
"source_page",
"data_referrer",
"gclid",
"cxd",
"utm_content"
];
// exptract utm & metadata parameters from the URL parameters
function getUtmParams() {
var utmDetails = {};
var metaData = {};
var urlParams = new URLSearchParams(window.location.search);
urlParams.forEach(function (value, key) {
if ($.inArray(key, crm_utms) != -1) {
utmDetails[key] = value;
} else {
metaData[key] = value;
}
});
return {
utmDetails: utmDetails,
metaData: metaData,
}
}
getUtmParams();
// extract form values from form inputs
(function ($) {
$.fn.serializeFormJSON = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
// remove any unnecessary values
delete o["confirmp"];
delete o["tandc"];
return o;
};
})(jQuery);
// Form submission - AJAX API Call
$("#customerForm").submit(function (e) {
e.preventDefault();
var utmParams = getUtmParams();
var formData = $(this).serializeFormJSON();
formData.utmDetails = utmParams.utmDetails;
formData.metadata = utmParams.metaData;
// url: url of the crm member area api
// headers: "x-api-key": api key (can be created from crm admin area)
$.ajax({
type: 'POST',
traditional: true,
url: '',
dataType: 'JSON',
contentType: "application/json",
headers: {"x-api-key":""},
data: JSON.stringify(formData),
success: function (data) {
},
error: function (e) {
}
});
});
</script>
</footer>
</html>
Any successful call on the API will register a customer and pass all the utm & metadata parameters to Impact CRM.
The above can be tested by using: website?<add a sample with url parameters here separated by &>