Customize the placement, size, color of the intercom launcher

intercom.js

  // Intercom
  //
  // Inject styles into Intercom iframe
  var stylesheet = document.createElement('link');
  stylesheet.rel = 'stylesheet';
  stylesheet.href = 'path_to_file.css';

  // Wait for the iframe to become ready (max 30 seconds)
  var timeout = setTimeout(function() {
    clearInterval(interval);
  }, 30000);

  // Check if the iframe is ready every 100ms
  var interval = setInterval(function() {
    var iframe = document.querySelector('.intercom-launcher-frame');
    if (iframe) {
      // Append the app stylesheet to the iframe head
      iframe.contentDocument.head.appendChild(stylesheet);
      clearInterval(interval);
      clearTimeout(timeout);
    }
  }, 100);

intercom.scss

// 1. Variables
$icon-size: 4rem;
$position-from-bottom: 4rem;
$positon-from-left: 1rem;

// 2. iframe Element
#intercom-container iframe.intercom-launcher-frame {
  bottom: $position-from-bottom !important;
  right:  $positon-from-left !important;
  height: $icon-size !important;
  width:  $icon-size !important;
}

// 3. iframe Content
#intercom-container-body {
  background-color: transparent !important;
}

#intercom-container .intercom-launcher {
  width:  $icon-size;
  height: $icon-size;
}

#intercom-container .intercom-launcher-open-icon {
  background-size:      54% 60%;
  background-position:  50% 60%;
}