Data Soap integration with Unbounce
Introduction
Data Soap
Validate UK and International mobile numbers, UK landline numbers and email addresses. Unbounce allows you to build custom landing pages often utilised in the lead generation industry. The Data Soap’s validation services allows you to verify phone numbers and email addresses in real time as they are entered into the form.
Invalid Number
Valid Number
First, you will need to set up a an Authorisation Token from within your Data Soap Account, this can be done under Profile>API Authentication. Please make sure you use a Public token with the domain you are using on the landing page set as the origin.
1. Add Javascript
- Click Add JavaScript
- Copy and paste the below JavaScript snippet into unbounce.
<script type="text/javascript"> // Global Config var dsConfig = { token: "Insert Token Here", connectionErrorsPassValidations: false, highlightSuccess: true, // If true valid emails/number inputs will appear with a green border allowTemporaryErrors: false, // Can be risky. In a small minority of cases, this could allow invalid numbers/emails to be returned as valid email: { enabled: true, msg: "Email address is invalid", allowDisposable: false, }, mobile: { enabled: true, msg: "Phone number is invalid" }, landline: // UK ONLY { enabled: true, msg: "Phone number is invalid" } }; // DO NOT EDIT BELOW THIS LINE var errorToValidationResult = { '-99': false, // Bad password or username '-98': false, // Insufficient credit '-97': dsConfig.allowTemporaryErrors ? true : false, // Please report to Liquid11 '-96': false, // Badly formatted or invalid number '-92': false, // Your account has exceeded that maximum number of lookups allowed for a non verified account, please contact support on 0207 856 0422 '-90': dsConfig.allowTemporaryErrors ? true : false, // You have hit your defined rate limit, please try again later. '-29': dsConfig.allowTemporaryErrors ? true : false, // The SMTP server was unavailable to process the request '-28': dsConfig.allowTemporaryErrors ? true : false, // The SMTP server returned an unexpected/invalid response '-27': dsConfig.allowTemporaryErrors ? true : false, // The SMTP session timed out '-26': dsConfig.allowTemporaryErrors ? true : false, // Could not connect to the SMTP server '-22': false, // The email address was rejected by the SMTP server and does not exist '-21': false, // The domain name either does not exist or has not been configured to receive email '-12': dsConfig.allowTemporaryErrors ? true : false, // Network unreachable at this time, please report to Liquid11 '-11': dsConfig.allowTemporaryErrors ? true : false, // Unable to verify, handset unavailable at the time of request '-10': dsConfig.allowTemporaryErrors ? true : false, // Unable to verify, handset unavailable at the time of request '-8': false, // Rejected by network '-7': dsConfig.allowTemporaryErrors ? true : false, // Number is not voice or text enabled(eg possible data dongle) '-6': false, // Requests to this number are limited(eg emergency services) '-5': dsConfig.allowTemporaryErrors ? true : false, // Requests to this number are barred '-4': false, // Number is not voice or text enabled(eg possible data dongle) '-3': false, // Dead Number '-2': dsConfig.allowTemporaryErrors ? true : false, // Please report to Liquid11 '0': true // OK }; function validation(json) { var result = false; json = json.DataSoapAPIResponse; if (json.HLRResult) { if(json.HLRResult.ErrorCode) { var res = errorToValidationResult[String(json.HLRResult.ErrorCode)]; result = res; } else if (typeof json.HLRResult.On !== "undefined"){ result = true; } } if (json.LandlineLookupResult) { if(json.LandlineLookupResult.ErrorCode) { var res = errorToValidationResult[String(json.LandlineLookupResult.ErrorCode)]; result = res; } else if(typeof json.LandlineLookupResult.IsActive !== "undefined"){ result = true; } } if (json.EmailValidationResult) { if(json.EmailValidationResult.ErrorCode) { var res = errorToValidationResult[String(json.EmailValidationResult.ErrorCode)]; result = res; } else if (!json.EmailValidationResult.IsDisposable || json.EmailValidationResult.IsDisposable === dsConfig.email.allowDisposable){ result = true; } } if (json.ErrorCode) { var res = errorToValidationResult[String(json.ErrorCode)]; result = res; } return result; } function performApiLookup(type, lookup, field) { try { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { var res = this; if (res.readyState === 4) { xhr.onreadystatechange = null; if (res.status === 200) { var json = JSON.parse(res.response); var isValid = validation(json); if(type === "Email") setRes({ field: field, valid: isValid, msg: isValid ? "" : dsConfig.email.msg, type: "email"}); else if (type === "Hlr") setRes({ field: field, valid: isValid, msg: isValid ? "" : dsConfig.mobile.msg, type: "mobile" }); else if (type === "Landline") setRes({ field: field, valid: isValid, msg: isValid ? "" : dsConfig.landline.msg, type: "landline" }); } else { if(type === "Email") setRes({ field: field, valid: false, msg: dsConfig.email.msg, type: "email"}); else if (type === "Hlr") setRes({ field: field, valid: false, msg: dsConfig.mobile.msg, type: "mobile" }); else if (type === "Landline") setRes({ field: field, valid: false, msg: dsConfig.landline.msg, type: "landline" }); } } }; xhr.open("GET", "https://api.datasoap.co.uk/?lookup=" + lookup + "&type=" + type + "&output=JSON", true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Authorization", "Token " + dsConfig.token); xhr.send(); } catch (e) { if(type === "Email") setRes({ field: field, valid: false, msg: dsConfig.email.msg, type: "email" }); else if (type === "Hlr") setRes({ field: field, valid: false, msg: dsConfig.mobile.msg, type: "mobile" }); else if (type === "Landline") setRes({ field: field, valid: false, msg: dsConfig.landline.msg, type: "landline" }); } } function dataSoap(field) { lookup = field.value.trim(); if (/^((?!\.)[\w-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/gm.exec(lookup) !== null) { // Email if(dsConfig.email.enabled) performApiLookup("Email", lookup, field); } else if (/^(([\+]447)|(07))[0-9]{9,11}$/mi.exec(lookup) !== null) { // Mobile if(dsConfig.mobile.enabled) performApiLookup("Hlr", lookup, field); } else if (/^(([\+]44)|(0))[0-9]{9,11}$/mi.exec(lookup) !== null) { // Landline if(dsConfig.landline.enabled) performApiLookup("Landline", lookup, field); } }; function setRes(res) { if (res.valid) { res.field.setCustomValidity(""); res.field.classList.remove("dsError"); var errDiv = res.field.parentNode.getElementsByClassName("dsErrorText"); if(errDiv.length) errDiv[0].remove(); if(dsConfig.highlightSuccess) res.field.classList.add("dsSuccess"); } else { res.field.setCustomValidity(res.msg); res.field.classList.add("dsError"); if(dsConfig.highlightSuccess) res.field.classList.remove("dsSuccess"); } res.field.reportValidity(); return res; } function check(form){ var inputs = jQuery('input', form); var valid = true; for(var i = 0; i < inputs.length; i++){ if(inputs[i].classList.contains("dsError")){ valid = false; var lookup = inputs[i].value; if (/^((?!\.)[\w-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/gm.exec(lookup) !== null) { // Email setRes({ field: inputs[i], valid: false, msg: dsConfig.email.msg, type: "email" }); } else if (/^(([\+]447)|(07))[0-9]{9,11}$/mi.exec(lookup) !== null) { // Mobile setRes({ field: inputs[i], valid: false, msg: dsConfig.mobile.msg, type: "mobile" }); } else if (/^(([\+]44)|(0))[0-9]{9,11}$/mi.exec(lookup) !== null) { // Landline setRes({ field: inputs[i], valid: false, msg: dsConfig.landline.msg, type: "landline" }); } } } return valid; } jQuery(document).ready(function(){ jQuery(function($) { var fm = jQuery("form"); $(fm).each(function(i, form){ var f = form.getElementsByTagName('input'); for(var i=0; i < f.length; i++){ var field = f[i]; field.addEventListener('change', function(e){ dataSoap(this); }); } $(this).unbind('click tap touchstart').bind('click.formSubmit tap.formSubmit touchstart.formSubmit', function(e) { var valid = check(form); if(!valid){ e.preventDefault(); e.stopImmediatePropagation(); } }); $(this).unbind('keypress').bind('keypress.formSubmit', function(e) { if(e.which === 13 && e.target.nodeName.toLowerCase() !== 'textarea'){ var valid = check(form); if(!valid){ e.preventDefault(); e.stopImmediatePropagation(); } } }); }); }); }); </script>
- 3. Make sure you add your Data Soap token in to the top of the code where it asks for the Token.
- 4. Name it Data Soap
- 5. Set the Placement to “Before Body End Tag”
- 6. Click Done
2. Add CSS – This will allow you to style verification box to match your site
- Click Add stylesheet
-
Copy and paste the below CSS snippet into Unbounce
<style> .dsError { border-color: rgba(232, 65, 24, 1) !important; background: rgba(232, 65, 24, 0.15) !important; color: rgb(232, 65, 24) !important; } .dsSuccess { border-color: rgba(68, 189, 50, 1) !important; } </style>
- Click Done
3. Your integration is now complete.