Friday, June 26, 2020

Using Instant Chime, Razor, and Adapted Cards to display estimated wait times to reach a service desk agent

With Instant Chime for #MSTeams, we have the ability to include Microsoft's Adaptive Cards as well as the Razor template engine (Razor code) in our text resources.  Adaptive cards provide a nice looking UI and the Razor engine provides the ability to adjust some values (or possibly the UI) based on various conditions.

Some background information on Chime for Microsoft Teams is available here: https://www.addchime.com/tour-teams.html

Here is an example where the message displayed to the waiting guest (we sometimes call this person a seeker, since they are seeking help) will change based on the estimated wait time to connect with a service desk agent.

A few things on this:

  • Chime includes a collection of variables that can be used within our text resources -for example @Model.ExpectedWaitTime.Minutes 
  • Razor template engine provides syntax, and code, that may be used to inspect these variables and optionally display different chat based replies
  • Microsoft Adaptive Cards provide a great way to provide some cool UI and branding - which will wrap these replies across any #botframework channel (in our case, web chat and Microsoft Teams)


Here is one example of  of a text resource in Chime where we will combine some Chime variables, the Razor template engine, and the MS Adaptive Card in order to render some UI related to the estimated wait time in the service desk queue.

@{   
    var expectedWait = "";
    if(@Model.ExpectedWaitTime.Minutes < 1 && @Model.ExpectedWaitTime.Seconds > 0 ){
        expectedWait = @Model.ExpectedWaitTime.Seconds + " Seconds";
    }   
    else if(@Model.ExpectedWaitTime.Minutes > 0 || @Model.ExpectedWaitTime.Seconds > 0 ){
        expectedWait = @Model.ExpectedWaitTime.Minutes + " Minutes " + @Model.ExpectedWaitTime.Seconds + " Seconds";
    }
    else{
        expectedWait = "An expert will be available momentarily";
    }   
}
{
    "version": "1.0",
    "type": "AdaptiveCard",
    "body": [      
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Sorry to keep you waiting your approximate position is @Model.PositionInQueue.",
                    "wrap": true
                },
                {
                    "type": "TextBlock",
                    "text": "Approximate wait time: @expectedWait",
                    "wrap": true
                }
            ]
        }
    ]  
}

This is how Chime will return the chat messages, using adaptive cards, to the guest waiting for help






Monday, June 22, 2020

Display an updated value for the estimated wait time to the guest waiting for agent

How to show the 'current' estimated wait time (and have it refresh) for a waiting guest.  Estimated wait time is basically the average wait time for the queue, minus the wait time that has elapsed for the guest...and of course, formatted using minutes and seconds

Add this to the Chime adaptive card resource for the automated reply


@{
  var expectedWait = @Model.SeekerAverageWaitTimeMinutes - @Model.SeekerTimeWaitingMinutes;
  var expectedWaitStr = expectedWait.TotalSeconds > 0 ? expectedWait.ToString("mm\\:ss") : "momentarily";
}
{
  "type": "AdaptiveCard",
  "version": "1.0",
  "speak": "IT Service Desk Current Statistics",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "IT Service Desk Current Statistics",
          "size": "Large",
          "isSubtle": true
        },
        {
          "type": "TextBlock",
          "text": "May 16, 2019 12:51 PM",
          "isSubtle": true
        },
        {
          "type": "TextBlock",
          "text": "Please wait, @Model.SeekerFullName, while I locate an expert for you."
        }
      ]
    },

    {
      "type": "Container",
      "spacing": "none",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Approx wait: @expectedWaitStr",
                  "size": "medium"
                }
              ]
            },
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "type": "FactSet",
                  "facts": [
                    {
                      "title": "Waiting",
                      "value": "2"
                    },
                    {
                      "title": "Agents",
                      "value": "5"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Here is an example of how that text reply may appear in a web client