In this article, we are going to use Clearbit to detect the visitor's company, and the WisePops' JS callbacks feature to inject the company name into a popup.

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:

From our editor, for the popup you want the company name to appear in, create a new JS callback listening for the event, Before popup display:

Step 4: Copy/paste the following snippet as the callback script:

// Inject visitor's company name with Clearbit
var clearbitPublishableKey = 'INSERT_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, false);
  var companyName = null;
  try {
    xhr.send();
    if (xhr.status === 200) {
      var response = JSON.parse(xhr.response);
      if (response.company && response.company.name) {
        companyName = response.company.name;
      }
    }
  } catch (error) {}
  localStorage.setItem('wisepopsClearbitDate', Date.now());
  localStorage.setItem('wisepopsClearbitResponse', JSON.stringify({
    success: !!companyName,
    companyName: companyName
  }));
  if (!companyName) {
    event.detail.wisepops('properties', {
      clearbitNotFound: new Date()
    });
  }
}

// Inject company name or prevent popup display
var clearbitResponse = JSON.parse(localStorage.getItem('wisepopsClearbitResponse'));
if (clearbitResponse.success) {
  event.detail.popup.replaceString('{{companyName}}', clearbitResponse.companyName);
} else {
  event.preventDefault();
}

Replace INSERT_KEY_HERE with your Clearbit publishable API key.

Step 5:

In Display > Custom properties, add the following rules:

  • clearbitNotFound does not exist, OR
  • clearbitNotFound is before 7 days ago.

Step 6:
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.

Here are a few points to note about this method:

  • The request to Clearbit is synchronous. This is to ensure that the popup does not get displayed if we haven't replaced the {{companyName}}  variable yet. It does have a drawback, however: your website's interface will become unresponsive during this call. This will be noticeable for visitors with poor network conditions. To mitigate this issue, you can perform the request to Clearbit from your website and store the response in a global variable. You will then be able to use that variable inside the WisePops callback.
  • The Clearbit response is cached for 1 week. We want to avoid making too many queries to Clearbit for the same visitor.
  • When Clearbit does not find the company name, we prevent the popup display with event.preventDefault(); 
  • When Clearbit does not find the company name, we set the WisePops custom property clearbitNotFound  to the current date. Combined with the custom condition, this allows us to exclude the popup from matched scenarios for 1 week so other popups can be displayed instead.
Did this answer your question?