In this article, we are going to use Clearbit to detect the visitor's company inject it into a popup content.
Step 1:
Create a Clearbit account. You will 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/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 Display a popup based on Alexa Rank with Clearbit, 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:
In Display rules > Advanced, add the following rule: companyName exists
Step 5:
Add the following dynamic variable anywhere you want into the popup: {{companyName}}
For example, into a text block:
That's it! The popup is ready to go live. You can learn more about usage of dynamic variables in your popup in this article.
Here are a few points to note about this method:
The company name 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 1 week. We want to avoid making too many queries to Clearbit for the same visitor.