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/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, 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, feel free to replace 5,000 by 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 page, you can move the WisePops setup code to the beginning of the  setCustomPropsFromClearbit()  function but it 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.
Did this answer your question?