Drift widget for Google Spreadsheets add-ons

Since we started to work on our own products, it was clear we have to keep dialog with our users in order to maintain best direction for the products’ evolution.

After a few more or less successful tries, we ran into Drift, nice and clean solution for customer support (and much more, it’s just that we’re currently using it mostly for support and customer development).
After installing it on a few of our RW labs products (like Jira Smart Checklist and our internal ones), everything was great: it provided instant contact with active users, good awareness of users’ possible challenges and feedback from those willing to provide one. So we enjoyed the result.

But when it came to installing Drift for a Google Spreadsheet add-on, we faced an unexpected issue. Google Spreadsheets provide pretty much strict conditions for add-ons, including restriction for the add-on’s UI to work within fixed narrow sidebar. And default Drift widget requires a bit more of a space to breathe :)
Regardless of a lot of customizing options for the widget, width was not one of them. After confirming that sad fact with Drift support team, we faced the dilemma: either stop using Drift as an add-on or roll up your sleeves and get down to writing some code.

Choice seemed obvious so… we uninstalled Drift.

Just kidding xD
Of course, we got to coding and in this post we would like to share the result, hoping it might help someone to use Drift within Google Spreadsheets add-ons (and help Drift to get some new customers :)

First, we outlined the issue.
There are few states for the widget:

1. initial: widget is hidden, only button is visible
2. conversation: when user opens a widget for the first time and gets a prompt to leave a message and an email or when user sends/gets a message
3. list of conversations: appears when user opens a widget and already has some past conversations or opens an existing conversation
4. campaign view: when Drift campaign is being posted to users

Each of those above can be distinguished by getting the width of the iframe#drift-widget: 76, 420, 360 and 400 respectively. Initial idea was straight width change but it didn’t work for the first two states because the original script kept setting original width and we didn’t want to create a possible conflict. Additionally, setting and resetting widths creates undesired “blinking” effect. So we decided to go with CSS scaling for the first two cases with addition of translating in order to adjust placement after scaling.
As for third case, width worked fine since there’s no width re-setting involved.

As a cherry, we added slight transition to decrease possible “jumping” effects when scaling.

Considering all said, this would be resulting function:

function resizeDrift() {
  var $driftWidget = $('iframe#drift-widget');
  $driftWidget.css('transition', '0.1s ease-in-out');
  switch ($driftWidget.width()) {
    // widget closed
    case 76:
      $driftWidget.css('transform', 'scale(0.75, 0.75) translate(50%, 50%)');
      break;
    // new message popover
    case 420:
      $driftWidget.css('transform', 'scale(0.75, 0.75) translate(25%, 25%)');
      break;
    // message history sidebar
    case 360:
      $driftWidget.css('transform', 'scale(1, 1) translate(0, 0)');
      if ($driftWidget.length) {
        $driftWidget[0].style.setProperty('width', '300px', 'important');
      }
      break;
    // campaign view
    case 400:
      $driftWidget.css('transform', 'scale(0.75, 0.75) translate(20%, 30%)');
      break;
  }
}

As a finishing move, we call this function with a certain interval since it’s hard to predict possible widget changes and stick to Drift events firing being inside of Google Apps Script sandbox.

window.setInterval(resizeDrift, 100);

I think it is worth stating that we totally don’t consider this as a good solution or especially good coding approach. At a young product which has limited resources, no stable team and minimal allocation time. Putting that together with Google Apps Script restrictions, being run within Google Apps sandbox — you don’t get much space for perfection.

Since we want to gather feedback from our users on regular basis and make sure we’re able to help with their challenges, a totally broken Drift widget within add-on’s sidebar was a huge issue for us. Therefore the solution above appeared to be “the one” considering the circumstances.