How We Implemented Live Help in BuildMaster

One of the new features we introduced in BuildMaster 2.3 was Live Help: if you’d like a quick answer to a question, just click to chat with a support engineer.

Though I’m sure we’re not the only software company to embed “instant support” in their product, I couldn’t find anyone else who was doing it. Of course, I didn’t look very far, since BuildMaster is a web-based application and there are plenty of places to go for web-based chat.

Choosing a Chat Provider

Being that we’d need to embed chat in our (download & install) application, our requirements were a little different than most. Namely, we needed:

• Look & Feel Customization – having the standard “click here to chat” image on the sidebar doesn’t exactly fit in to our UI
• Instant Message Integration – our support staff consists of developers, and the last thing we want is a clunky messaging app
• Permission to Distribute – it’s pretty important that we’d be explicitly permitted to use chat in such a manner
• Flexible Installation – we didn’t want to embed the actual chat code (in case we need to switch vendors, for example), but instead embed code that lived on inedo.com, which would then reference the chat vendor’s code
• API – we don’t need much, just
  • ability to detect when operators are available
  • send metadata to operator (license key)
  • hide/show chat box

We evaluated a number of different vendors: SnapEngage, LivePerson, BoldChat, Olark, WhosOn, and a few others. Ultimately, we settled on Olark. While their software wasn’t as feature-rich as others, their support was topnotch (likely because we were chatting with the developers/founders) and it seemed to be the easiest to integrate with and customize.

Implementing Live Help with Olark

Because Live Help needs to “call home” to determine if an operator is available, we felt that users should be able to turn-off the feature. And that meant a simple configuration page:

When the checkbox is enabled, a single line of JavaScript is added to the page’s HEAD section:

$(function () {
  $('body').append('<sc' + 'ript type="text/javascript" ' +
     + 'src="http://links.inedo.com/integrated-support/?' +
     + 'lickey=00000000-0000-0000-0000-000000000000"></s' +
     + 'cript>');
});

It’s a JQuery call that essentially instructs the browser to append a <SCRIPT> tag to the body after the page has finished loaded. The script that loaded resides on our server, and looks something like this (with explanatory comments added):

// copy/paste of Olark's code; this will asynchronously
// contact their server to load the latest chat client
window.olark||(function (k) { var g = window, j = document, a =
g.location.protocol == "https:" ? "https:" : "http:", i = k.name,
... snip...
name: "olark", methods: ["configure", "extend", "declare", "identify"] }); 

//this is our Olark account number / api-key
olark.identify('0000-000-00-0000');

//set the IM "buddy" to be the user signed-in to BuildMaster
olark('api.chat.updateVisitorNickname', {
  snippet: 'BM~'+$('#BuildMaster_DisplayName').text(),
  hidesDefault: true});

//when an operator is available, display the appropriate link
olark('api.chat.onOperatorsAvailable', function () {

    $('#HeaderHelpBox').empty().append(
        $('<a href="#">Live Help is Available</a>')
            .click(function () {
                olark('api.box.show');
                olark('api.box.expand');
            })
        );
});

//when an operator is away, display the appropriate link 
olark('api.chat.onOperatorsAway', function () {
    $('#HeaderHelpBox').empty().append(
        $('<a href="#">Send Message To Support</a>')
            .click(function () {
                olark('api.box.show');
                olark('api.box.expand');
            })
        );
});

The Result

Success! Although we’ve always been around to answer support questions, having Live Support embedded right in the system has given users the confidence that we actually are there.

Though there were some concerns that it might overburden support, it’s actually made our lives easier. While simple questions have always been simple to ask, complex questions require a lot of back-and-forth to understand the underlying situation. And as it turns out, chat is ideal for that.

Default Passwords

Any software with any kind of security or auditing will have some kind of identity system. BuildMaster is capable of using an LDAP directory for authentication, but also has a simple built-in user name and password system – primarily for testing and initial configuration of the software.

Because BuildMaster integrates with so many third-party toolsets (most of which have their own user/password based system), it was a real pain point for us when some of these systems would set up a default user account to use but only mention what it is somewhere deep in the documentation. This is somewhat similar to the process you have gone through if you’ve ever tried logging into a consumer router’s web interface without remembering what combination of administrator/admin/vendor/model/{blank}/… is required for the user and password.

Of course, during development the exact same could have been said about BuildMaster. Fortunately, one of our developers came up with a very simple solution in the form of an item in our issue tracker: “Why don’t we just tell them what the default user account is?”

This is effectively the same as having the entire user/identity system disabled until the default settings are changed, but it won’t give new users the impression that BuildMaster has no concept of users at all. Also, it was a low-risk, 5-minute change that will hopefully make life a little easier for someone trying out BuildMaster for the first time.

Rendering a Newline at the Beginning of a Multi-Line TextBox Control using ASP.NET 2.0 Web Forms

Recently I have just completed a custom action for BuildMaster; more specifically, an action that allows a collection of files to be “concatenated” into one output file during a build. Using such an action can be useful during a software build if you are, for example:

• Combining CSS or JavaScript files into one file for release
• Getting the latest Stored Procedure code files from source control and combining them into one script

In the first attempt in creating the action, I used a constant newline as a separator between file contents… quickly realizing that this may not be useful for all file types. Sometimes you may want to add a GO batch separator for SQL Server scripts, other times you may just want to separate your file contents with an obnoxious:

/********************SEPARATOR!!!!!!***********************/

Whatever the case, there needs to be a section in our UI to accomplish this! In BuildMaster, it looks like this (specifically the Content Separation Text section):

The Problem

Creating this action was all well and good and worked perfectly, until I had to edit the one that I had saved previously. I noticed that any text saved to a multi-line textbox would NOT load the first newline when it was being edited.

I’m going to repeat that last statement in more formal, highly-searchable, highly-indexable terms: an ASP.NET 2.0 multi-line textbox does not render the first newline string, if its text property starts with a newline!

The only way I noticed this was by testing 1 newline as a separator, then going back to edit the action to add an extra space… but lo-and-behold, the pre-loaded textbox was not populated with the previously saved 1 newline, but instead appeared empty! A quick check of the database indicated that the value should have been \r\n, and stepping through with the debugger validated this further.

Since BuildMaster runs on .NET 2.0, I had to fire up some quick test projects in both ASP.NET 2.0 and 4.0, and the issue could not be reproduced in ASP.NET 4.0. Comparing the Render() methods between the two framework versions using Reflector, I noticed an enlightening difference:

ASP.NET 2.0 System.Web.UI.WebControls.TextBox Render Method

protected internal override void Render(HtmlTextWriter writer)
{
    this.RenderBeginTag(writer);
    if (this.TextMode == TextBoxMode.MultiLine)
    {
        HttpUtility.HtmlEncode(this.Text, writer);
    }
    this.RenderEndTag(writer);
}

ASP.NET 4.0 System.Web.UI.WebControls.TextBox Render Method

protected internal override void Render(HtmlTextWriter writer)
{
    this.RenderBeginTag(writer);
    if (this.TextMode == TextBoxMode.MultiLine)
    {
        HttpUtility.HtmlEncode(Environment.NewLine + this.Text, writer);
    }
    this.RenderEndTag(writer);
} 

It looks as though Microsoft resolved the issue by adding a newline directly to the text before it’s encoded!

The Solution

If Microsoft did it, why can’t I! Unfortunately, I cannot edit the TextBox class directly, and I would prefer not to use some sentinel value to represent a newline. Luckily for me, BuildMaster uses a custom “ValidatingTextBox” control for all textboxes (basically a composite control of a textbox with some validators that can be enabled via properties), so it was easy for me to override the Render() method:

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
    string newline = null;
    if (this.TextMode == TextBoxMode.MultiLine && this.Text.StartsWith("\n"))
    {
        newline = "\n";
        this.Text = newline + this.Text;
    }
    else if (this.TextMode == TextBoxMode.MultiLine && this.Text.StartsWith("\r\n")) 
    {
        newline = "\r\n";
        this.Text = newline + this.Text;
    }

    /* snip other rendering code, call to base.Render()... */

    if (newline != null)
    {
        this.Text = this.Text.Substring(newline.Length);
    }
}

Now when I load up an existing action that starts with a newline, it actually appears in the textbox!