Inject the Name of the Visitor's Company into Your Popups (with Clearbit)

Lisa Fockens Updated by Lisa Fockens

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 > Custom properties, 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.

Apply filters to your dynamic variables

Display the visitor's city within your popup

Contact