Gist for blog post "Customizing the Intercom Launcher" http://blog.learningspaces.io/customizing-the-intercom-launcher

index.html

<a class="intercom-launcher" href="mailto:[email protected]">
  <div class="intercom-icon-close"></div>
  <div class="intercom-icon-open"></div>
  <span class="intercom-unread-count"></span>
</a>

intercom-launcher.scss

$launcher-color: #1f8ceb;
$launcher-size: 50px;
$launcher-count-size: 20px;
$launcher-count-color: #fc576b;

.intercom-launcher {
  backface-visibility: hidden;
  background: $launcher-color;
  border-radius: 50%;
  bottom: 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06),
              0 2px 32px rgba(0,0,0,0.16);
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  height: 0;
  opacity: 0;
  outline: 0;
  position: fixed;
  right: 20px;
  transform: scale(0.5);
  transform-origin: center;
  transition: opacity 0.25s ease,
              transform 0.25s ease;
  width: 0;
  z-index: 2147483000;

  &:focus {
    outline: 0;
  }

  &.intercom-booted {
    height: $launcher-size;
    opacity: 1;
    transform: scale(1);
    width: $launcher-size;
  }

  * {
    cursor: pointer;
  }
}

.intercom-unread-count {
  backface-visibility: hidden;
  background: $launcher-count-color;
  border-radius: $launcher-count-size / 2;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
  box-sizing: border-box;
  color: #fff;
  font-size: $launcher-count-size * 0.6;
  height: $launcher-count-size;
  line-height: $launcher-count-size;
  min-width: $launcher-count-size;
  opacity: 0;
  padding: 0 4px;
  position: absolute;
  right: -2px;
  text-align: center;
  top: -2px;
  transform: scale(0.5);
  transform-origin: center;
  transition: opacity 0.15s ease,
              transform 0.15s ease;

  &.active {
    opacity: 1;
    transform: scale(1);
  }
}

.intercom-icon-open,
.intercom-icon-close {
  background-position: 50%;
  background-repeat: no-repeat;
  border-radius: 50%;
  bottom: 0;
  position: absolute;
  top: 0;
  transition: transform 0.16s linear,
              opacity 0.08s linear;
  width: 100%;
}

.intercom-icon-open {
  background-image: url('data:image/png;base64,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');
  background-position: 50% 60%;
  background-size: 54% 60%;
  opacity: 1;
  transform: rotate(0deg) scale(1);

  .intercom-open & {
    opacity: 0;
    transform: rotate(30deg) scale(0);
  }
}

.intercom-icon-close {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEUAAAD///////////////////////////////////8AAADPn83rAAAACXRSTlMACq47u/I8r7wWzHxoAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAJJJREFUGNNdzzEKhDAQBdAvwtYWW9hbbSdCDrBnWBDS2Sx7A8HSKwgic1tNxj/jmirDC5P/UTSw01V4ri2nMr7xkg/HIAu+Qi6j9HhEcpB1gHFGGCuSTyQTlQ2Vg3ic4x49TVpzwcQXvI+3x/+r0p9eLAfyYhrIWNOSmfZkVlH2Kpm9Z+bJeh68oSYmnlGMnv1X7RZ2SET5id+LAAAAAElFTkSuQmCC');
  background-size: 25%;
  opacity: 0;
  transform: rotate(-30deg);

  .intercom-open & {
    opacity: 1;
    transform: rotate(0deg);
  }
}

script.js

const launcher = document.querySelector('.intercom-launcher');
const unreadCount = launcher.querySelector('.intercom-unread-count');

// Initialize Intercom
window.Intercom('boot', {
   app_id: 'YOUR_APP_ID',
   custom_launcher_selector: '.intercom-launcher'
});

// Register callbacks
window.Intercom('onShow', () =>
  launcher.classList.add('intercom-open'));

window.Intercom('onHide', () =>
  launcher.classList.remove('intercom-open'));

window.Intercom('onUnreadCountChange', count => {
  unreadCount.textContent = count;
  if (count) {
    unreadCount.classList.add('active');
  } else {
    unreadCount.classList.remove('active');
  }
});

// Wait for Intercom to boot (max 30 seconds)
const timeout = setTimeout(() => clearInterval(interval), 30000);
const interval = setInterval(() => {
  if (window.Intercom.booted) {
    // Add class to show the launcher
    launcher.classList.add('intercom-booted');
    
    clearInterval(interval);
    clearTimeout(timeout);
  }
}, 100);