In this article, we are going to use Clearbit to retrieve the visitor's company info, and the Wisepops' custom properties feature to condition the display of a popup to an Alexa Rank limit.
Step 1:
Create a Clearbit account. You'll need the Enterprise plan to use their Reveal API.
Step 2:
Copy your Clearbit publishable key. It should start with pk_ . Do not use your secret API key.
Step 3:
Copy and paste the following snippet on your website, right after the Wisepops setup code, and before the closing </script> tag. (This is the same snippet as Inject company name with Clearbit, so no need to write it twice if you are using both company name injection and Alexa rank condition).
(function() {
// Set your Clearbit publishable key on the following line
var clearbitPublishableKey = 'INSERT_CLEARBIT_KEY_HERE';
// Clearbit cache valid for 1 week
var cacheDate = localStorage.getItem('wisepopsClearbitDate');
var expireDate = Date.now() - (7 * 24 * 60 * 60 * 1000);
if (cacheDate !== null && cacheDate < expireDate) {
localStorage.removeItem('wisepopsClearbitResponse');
localStorage.removeItem('wisepopsClearbitDate');
}
// Query Clearbit if cache not found
if (!localStorage.getItem('wisepopsClearbitResponse')) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://reveal.clearbit.com/v1/companies/reveal?authorization=' + clearbitPublishableKey);
xhr.responseType = 'json';
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE) {
var response = typeof xhr.response === 'object' ? xhr.response : {};
response.httpStatus = xhr.status;
// Cache response
localStorage.setItem('wisepopsClearbitDate', Date.now());
localStorage.setItem('wisepopsClearbitResponse', JSON.stringify(response));
setCustomPropsFromClearbit();
}
};
xhr.send();
}
function setCustomPropsFromClearbit() {
var response = localStorage.getItem('wisepopsClearbitResponse');
if (response) {
response = JSON.parse(response);
var customProperties = {};
if (response.company) {
customProperties.companyName = response.company.name;
}
if (response.metrics) {
customProperties.alexaGlobalRank = response.metrics.alexaGlobalRank;
customProperties.employees = response.metrics.employees;
}
wisepops('properties', customProperties);
}
}
setCustomPropsFromClearbit();
})();
Replace INSERT_CLEARBIT_KEY_HERE with your Clearbit publishable API key.
Step 4:
Edit your popup to add the following condition under Display > Custom properties. Here, replace 5,000 with whatever value you want.
And voilà!
A few things to note about this method:
The Alexa Rank might not be available on the first page viewed by the visitor. If the Clearbit query takes more time than the Wisepops initialization, the scenario resolution of this first page will occur while the custom properties haven't been set yet. If you need these properties on the first landing page, you can move the Wisepops setup code to the beginning of the
setCustomPropsFromClearbit()function. This will make Wisepops slower to load.The Clearbit response is cached for one week. We want to avoid making too many queries to Clearbit for the same visitor.
If you need some help setting this up or have questions, get in touch via chat.