All /

Testing Chat Widgets (Intercom, HubSpot, Drift, Tawk.to)

Introduction

Chat widgets like Intercom, Drift, HubSpot, and Tawk.to are typically loaded site-wide via a JavaScript snippet. Testing whether showing or hiding a chat widget improves conversions is a common use case, but it requires a different approach than testing page elements, because the widget loads dynamically via JS on every page.

This guide shows you how to use AB Split Test’s CSS/Code test mode to conditionally load or hide a chat widget based on the visitor’s test variation. The variation persists across all pages via AB Split Test’s cookie (365 days by default), so a visitor assigned to the “show chat” variation will see it on every page they visit, and a visitor in the control group will never see it.

How It Works

When AB Split Test assigns a visitor to a variation, it adds a CSS class to the <body> tag in the format test-css-{testId}-{variationNumber}. It also fires an ab-test-setup-complete event on the body element once all test setup is done. You can listen for this event and check the body class to decide whether to load your chat widget.

No jQuery required. Pure vanilla JavaScript.

Basic Example: Show or Hide a Chat Widget

Create a CSS/Code test with two variations. Replace 1595 with your actual test ID.

// Set your test ID
var testId = 1595;

// Listen for AB Split Test's setup event
document.body.addEventListener('ab-test-setup-complete', function() {

  // Check if the visitor is in Variation 2 (show chat)
  if (document.body.classList.contains('test-css-' + testId + '-2')) {
    // Load and show the chat widget
    showChatWidget();
  }

  // Variation 1 (control): do nothing, chat widget never loads
});

function showChatWidget() {
  // Put your chat widget loading code here
  console.log('Chat widget loaded for variation ' + testId + '-2');
}

How to Set Up the Test

  1. Create a CSS/Code test in AB Split Test with two variations:
    • Variation A (control): No code. The chat widget does not load.
    • Variation B: Add the JavaScript code above to load the chat widget.
  2. Set your traffic allocation. With two variations, the allocated traffic splits evenly. To have roughly 10% of visitors see the chat widget, set traffic allocation to 20%: 10% get Variation B (chat), 10% get Variation A (control, measured), and 80% see the original page untouched.
  3. Set up a conversion goal. Track conversions on whatever action matters to you: a form submission, a purchase, a link click, etc.

Platform-Specific Examples

Intercom

Intercom loads via a JavaScript snippet that boots the Messenger. To conditionally load Intercom only for the test variation, place your Intercom boot code inside the event listener:

var testId = 1595;

document.body.addEventListener('ab-test-setup-complete', function() {

  if (document.body.classList.contains('test-css-' + testId + '-2')) {
    // Load Intercom only for this variation
    var APP_ID = 'your-workspace-id';

    window.intercomSettings = {
      api_base: 'https://api-iam.intercom.io',
      app_id: APP_ID
    };

    (function(){
      var w = window;
      var ic = w.Intercom;
      if (typeof ic === 'function') {
        ic('update', w.intercomSettings);
      } else {
        var d = document;
        var i = function(){ i.c(arguments); };
        i.q = [];
        i.c = function(args){ i.q.push(args); };
        w.Intercom = i;
        var l = function(){
          var s = d.createElement('script');
          s.type = 'text/javascript';
          s.async = true;
          s.src = 'https://widget.intercom.io/widget/' + APP_ID;
          var x = d.getElementsByTagName('script')[0];
          x.parentNode.insertBefore(s, x);
        };
        if (document.readyState === 'complete') {
          l();
        } else if (w.attachEvent) {
          w.attachEvent('onload', l);
        } else {
          w.addEventListener('load', l, false);
        }
      }
    })();
  }
});

Replace your-workspace-id with your Intercom workspace ID. You can find it in the URL when logged into Intercom: https://app.intercom.com/a/apps/ecahpwf5/home where ecahpwf5 is the workspace ID.

Already have Intercom loaded site-wide? If Intercom is already loading on every page via your theme or a plugin, you can hide it for the control variation instead of loading it conditionally:

var testId = 1595;

document.body.addEventListener('ab-test-setup-complete', function() {

  // If visitor is in Variation 1 (control), shut down Intercom
  if (document.body.classList.contains('test-css-' + testId + '-1')) {
    if (window.Intercom) {
      window.Intercom('shutdown');
    }
  }
});

HubSpot

HubSpot’s chat widget loads via a tracking script. To conditionally load it:

var testId = 1595;

document.body.addEventListener('ab-test-setup-complete', function() {

  if (document.body.classList.contains('test-css-' + testId + '-2')) {
    // Load HubSpot tracking script only for this variation
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.id = 'hs-script-loader';
    script.async = true;
    script.src = '//js.hs-scripts.com/YOUR_PORTAL_ID.js';
    document.head.appendChild(script);
  }
});

Replace YOUR_PORTAL_ID with your HubSpot portal ID.

Drift

var testId = 1595;

document.body.addEventListener('ab-test-setup-complete', function() {

  if (document.body.classList.contains('test-css-' + testId + '-2')) {
    // Load Drift only for this variation
    !function() {
      var t = window.driftt = window.drift = window.driftt || [];
      if (!t.init) {
        t.init = function(e) {
          t.library = e;
          t._events = [];
          t.factory = function(e) {
            return function() {
              var n = Array.prototype.slice.call(arguments);
              return t.unshift([e].concat(n)), t;
            };
          };
        };
        t.SNIPPET_VERSION = '0.3.1';
        t.load = function(e) {
          var n = document.createElement('script');
          n.type = 'text/javascript';
          n.async = !0;
          n.crossOrigin = 'anonymous';
          n.src = 'https://js.driftt.com/include/' + e + '/' + 'YOUR_EMBED_ID' + '.js';
          var i = document.getElementsByTagName('script')[0];
          i.parentNode.insertBefore(n, i);
        };
      }
    }();
    drift.load('YOUR_EMBED_ID');
  }
});

Replace YOUR_EMBED_ID with your Drift embed ID.

Tawk.to

var testId = 1595;

document.body.addEventListener('ab-test-setup-complete', function() {

  if (document.body.classList.contains('test-css-' + testId + '-2')) {
    // Load Tawk.to only for this variation
    var Tawk_API = Tawk_API || {};
    var Tawk_LoadStart = new Date();
    var s1 = document.createElement('script');
    s1.async = true;
    s1.src = 'https://embed.tawk.to/YOUR_PROPERTY_ID/YOUR_WIDGET_ID';
    s1.charset = 'UTF-8';
    s1.setAttribute('crossorigin', '*');
    document.head.appendChild(s1);
  }
});

Replace YOUR_PROPERTY_ID and YOUR_WIDGET_ID with your Tawk.to credentials.

Multi-Page Persistence

One of the most common questions is whether the chat widget will show consistently as a visitor navigates across multiple pages. The answer is yes.

AB Split Test uses cookies (365 days by default) to remember which variation each visitor is assigned to. So:

  • Visitor 1 is assigned to Variation B (show chat). As they navigate to any page on your site, the body class is applied on every page load, and the chat widget loads every time.
  • Visitor 2 is assigned to Variation A (control, no chat). They never see the chat widget, no matter which page they visit.

The assignment happens once on the first visit and persists for all subsequent page loads and visits.

Handling More Than Two Variations

If you want to test multiple chat widget configurations (e.g. different positions, different welcome messages), you can check for additional body classes:

var testId = 1595;

document.body.addEventListener('ab-test-setup-complete', function() {

  if (document.body.classList.contains('test-css-' + testId + '-2')) {
    // Variation B: show chat in bottom right
    showChatWidget('bottom-right');
  } else if (document.body.classList.contains('test-css-' + testId + '-3')) {
    // Variation C: show chat in bottom left
    showChatWidget('bottom-left');
  }
  // Variation 1 (control): no chat widget
});

function showChatWidget(position) {
  console.log('Chat widget loaded at ' + position);
  // Your chat widget init code here
}

Key Points

  • Use a CSS/Code test, not a Full Page test. The chat widget loads via JS on the same page, so you don’t need separate URLs.
  • The ab-test-setup-complete event fires on document.body after AB Split Test has assigned the visitor to a variation and applied the body class.
  • Body class format: test-css-{testId}-{variationNumber}. Variation 1 is the control, Variation 2+ are your test variations.
  • Cookie persistence: The variation assignment persists for 365 days across all pages on the same domain.
  • No jQuery needed. All examples use vanilla JavaScript.
  • Traffic allocation: Set it to 20% to start with roughly 10% of visitors seeing the chat widget. Scale up as you gather data.
August 24, 2026 / Tom /

Leave a Comment

You must be logged in to post a comment.