NEIL PARKHURST

Within Omnichannel for Customer Service, on the chat channel we can configure a pre-conversation survey. This functionality works well but I’ve recently been experimenting with using an adaptive card instead. In this post I will explain why and how!

Newer style copilot studio BOTs support adaptive cards. These give us the ability to prompt the customer with questions, validate the responses and output the results. They could be used for many purposes; in this post I will explore how I have used an adaptive card to replace my pre-chat survey.

The reason I’m doing this is that with an adaptive card I have a greater variety of question types available to me. I could, for example, add radio buttons, check boxes and more. Plus, within a card I can add validation logic. Consider the “Email” field …. With a pre-conversation survey (as shown below) the email field is simply a text box. It includes nothing to check a valid email address has been entered.

Below I will explain how I can replicate my pre-conversation survey as an adaptive card. (And improve it.) My process included the following steps;

1. Add an adaptive card into my BOT
2. Check / add contact variables in my workstream
   

Step One – Add an adaptive card

I have assumed that you already have (or know how to create) a copilot studio chat BOT (aka PVA BOT) that is connected to Omnichannel. I should also point out that I am using a new style BOT (not a classic BOT).

My first task is to add an adaptive card at the start of my conversation. I’ve decided to do this in the “Conversation Start” topic which is triggered as the BOT loads. I guess instead you could add the card into your greeting topic. (You are basically looking for whatever topic gets triggered when your BOT starts.)

Tip / Thought: Another approach maybe for the BOT to only trigger the card just before it hands off to a human. Meaning the customer only needs to supply the required data when their query will be escalated. I really like this concept! As why bother prompting for name and email … when the customer just needs the BOT to confirm something basic like store opening times. It maybe a much better customer experience to only ask qualification questions at the point of escalation.

An adaptive card is “simply” some JSON which is used to render the questions. It then returns any responses when a submit action is generated. You could just write the JSON directly into your action! Or you can click the link to open the adaptive card design. This is a tool which will help you create the required JSON payload. (And importantly preview the card before publishing.)

Below you can see that I have created a card in the adaptive card designer. Usefully I can test out my card using the preview mode option in the designer. Then once I am happy, I used the copy card payload option, and pasted the code into the action in my BOT.

Tip: The JSON is easy to follow. All I did was use the “New card” button and select a few templates! I quickly managed to review the JSON and work out the basic syntax.

Tip: I changed my version to 1.3. As I believe that might be the highest version currently supported by the Chat BOT.

On my card I have added, a text block (my heading), three text input fields and an action set. The action set has been set to a submit action. Basically, meaning it will return the results to my BOT when submit is clicked.

As an example, I’ve shown the JSON for my email text box below. (As this was the most complicated of my fields!) If there is anything clever here, it is the “regex” statement. As this is a regular expression used to validate the email address. (It checks my email includes an “@” symbol and a “.”, plus only includes valid characters.)

        {
            "type": "Input.Text",
            "label": "Email",
            "style": "Email",
            "id": "Email",
            "placeholder": "Enter your email",
            "isRequired": true,
            "regex": "^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$",
            "errorMessage": "Valid email is required"
        }

Below you can see that I pasted my JSON into my adaptive card action in my BOT.

I did make one final change! As my variables defaulted to a scope of “Topic”. I wanted them to be available in my Omnichannel workstream for routing, so I changed their type to Global and made them available externally.

Tip: Make sure your email variable is called “Email” and your name variable is called “Name”! As Omnichannel will then search for possible customers using that information. If you use a different variable name the search won’t happen.

After my adaptive card action, I decided to simply add one more action to transfer the conversation to a human. You could (of course) trigger the transfer at a different point! As maybe you BOT could ask / answer more questions before transferring.

Step Two – Workstream Changes
When you normally add a pre-chat survey any questions you create automatically add context variables into your workstream.

As you created the variables outside of your workstream you may need to scroll down to the advanced settings in your workstream and make sure you add them manually.

And (of course) if you are replacing an existing pre-conversation survey don’t forget to disable that in your workstream!

After I’d published my BOT and waited 15 minutes (you always have to wait!) …. My new Survey looked like this.

Notice now that my email address field is validated. And the space to enter a query is now a multi-line field. Meaning, in my opinion, this adaptive card will be providing a better user interface than I previously had with a pre-conversation survey. And I admit my UX design skills are low, I am sure with a little effort you could really enhance the look of this card!

When you first look at adaptive cards you may need to take time to learn how to construct the JSON, but I hope this post has shown the benefits are definitely significant. Enjoy!