AWS Contact Center

Getting started with step-by-step guides for the Amazon Connect agent workspace

Join us for AWS Contact Center Day, a free virtual event where you’ll learn about the future of customer service, how machine learning can optimize customer and agent experiences—and more. Register now »

One of the biggest challenges contact centers face is training new agents to get up to speed with their agent application. Until agents become proficient, more time is needed to address end-customer needs effectively. Contact centers on average have an annual agent attrition rate between 30-45%. So, improving an agent’s immediate productivity is a top priority. Even once agents are up to speed it is important that they always have access to the latest updates and processes for helping customers.

With step-by-step guides for the Amazon Connect agent workspace, companies can provide customizable experiences for their agents, enabling them to deliver exceptional service from the first day on the job. Contact center administrators can now create no-code, UI based workflows to guide agents through common situation such as making reservations, managing payments, and submitting new orders. Administrators can set up step-by-step guides to appear in the Amazon Connect agent workspace or embedded within their own homegrown applications. Step-by-step guides dynamically guide the agent through the life of a customer service request, ensuring the agent never has to guess or rely on past experience to know what comes next.

Image of an example step-by-step guide for the Amazon Connect agent workspace

Figure 1: Step-by-step guides for the Amazon Connect agent workspace

In this blog, you will dive deep into step-by-step guides for the Amazon Connect agent workspace. First, you will take a look at some key concepts to understand how step-by-step guides work. Then you will walk through deploying a sample experience that takes advantage of other Amazon Connect features like Amazon Connect Customer Profiles. Lastly, you will explore how to further customize your guides to meet your specific business need. By the end of this blog you will have all the insights you need to get started designing your own step-by-step guides in Amazon Connect.

Key Concepts

There are a few key concepts to know before creating step-by-step guides in your contact center. These concepts allow you to build out workflows with no coding experience in the same environment where you create other Amazon Connect flows. Specifically, we will discuss Flows, Views, and the Show View flow block.

Flows

Similar to other customer experiences within your contact center, our step-by-step guides are created using Amazon Connect Flows. Flows let us define how a contact center experience is handled. Using the flow visual editor, you can easily integrate different features of Amazon Connect and visualize the entire experience from start to finish. The only difference between a step-by-step guides flow and any other flow is the use of the Show View block.

To use step-by-step guides you create a flow that defines the guide for the agent. This flow is then referenced elsewhere using the DefaultFlowForAgentUI custom attribute. When a call is transferred to a queue, the referenced step-by-step guide then pops up in the agent workspace. Additionally, you set the DisconnectFlowForAgentUI custom attribute to have a step-by-step guide pop up after a call finishes and the agent enters the post-call work state. This can be used to give agents the opportunity to enter disposition codes at the end of a contact.

Image of an example wizard view for step-by-step guides

Figure 2: Example of the Form View

Views

Step-by-step guides allow you to quickly create guides for your agents with the help of pre-configured views. Think of views as the visual containers at our disposal for helping agents through a process. For instance, say an agent needs to book a round trip flight for a customer. This requires scheduling a flight to and from the destination, collecting traveler information, and asking about additional add-ons. Using the form view. agents do not have to recall all these specific steps; they can just follow the wizard in their agent workspace. For each step, the agent is given a form field to fill out or options to choose from in order to quickly book the customer’s flight.

The form view also can be used to collect information in a single step.

Example of the Card View with step-by-step guides

Figure 3: Example of the Card View

Perhaps the most interesting view is the card view. This view acts as a home base for your agent to let them know the different guides at their disposal. The card view presents a set of cards that, when clicked, can expand to provide additional information and actions to take. These cards can be tailored to your specific business case. There could be one card for each purchase a customer has made with actions such as return or refund order. Another card could represent each account in a family plan. Using the Card View lets agents move faster and make more effective decisions with the help of targeted information and action items.

In addition to the Form and Card View there are several other views:

  • The list view allows you to conveniently list out information.
  • The confirmation view provides a visual confirmation that an action has been completed.
  • The details view gives you a canvas to provide detailed information and custom actions.

Show View flow block

To display a view we use the show view block. This block can be found in the flow editor under Integrate. Using the flow editor embeds views within the larger contact experience, allowing you to take advantage of other Amazon Connect and AWS features such as Customer Profiles and Cases.

Example of the Show View block within the Contact Flow editor

Figure 4: Example of the Show View block within the Flow editor

When using the Show View block you select which view you want to display and then configure the different parts of the view to fit your needs. This configuration can be as broad as what input to provide in a form and as specific as what color the submit button should be. Like other flow blocks, these configurations can be set manually or dynamically using contact attributes. You can also use the new Set JSON section to automatically validate your configuration is formatted properly.

Deploying a sample step-by-step guide

To make better sense of these concepts, you can create a sample step-by-step guide within an existing Amazon Connect instance. In this scenario, a customer wants to file a claim for lost luggage. With step-by-step guides, you will provide the agent with a set of potential options using the Card View. When the card for filing a lost luggage claim is chosen you will then use the Form View to collect the information needed to submit the claim. Once all the necessary data is provided a Confirmation View will be used to show that the form has been submitted.

Prerequisites:

Step 1: Configure security profiles

In order to use step-by-step guides, additional security profile permissions will be needed. To add these permissions:

  1. Navigate into your Amazon Connect instance > Users > Security Profiles.
  2. Click the security profile you want to provide permission to create and access step-by-step guides with.
  3. Click Numbers and Flows.
  4. Click the All checkbox next to the Views type.
  5. Click Agent Application.
  6. Click the All checkbox next to the Custom Views type.
  7. At the bottom of the screen click Save.
  8. Repeat steps 2-7 for all the security profiles you want to use step-by-step guides with.
Example security profile permissions for using step-by-step guides

Figure 5: Example security profile permissions for using step-by-step guides

Step 2: Create the luggage claim flow

Step-by-step guides for the Amazon Connect agent workspace takes advantage of the visual flow editor within your Amazon Connect instance. Just like any other flow, you can import and export these. To import the SBSGuides_Example_Cards flow:

  1. Download the flow here.
    1. Note: Depending on your browser you may need to right click the link and choose Save Link As in order to download the flow properly.
  2. Navigate into your Amazon Connect instance > Routing > Flows > Create flow.
  3. Click the drop-down arrow on the right and choose Import (beta) and import the downloaded flow.
  4. Click Publish.

This flow does the following:

  1. Activates logging behavior and sets up Customer Profiles.
  2. Displays a Card View to the agent using a Show View block. Combining this View with Customer Profiles, you can quickly provide the agent information about the current call as well as potential workflows for solving the current issue. Potential workflows are represented by cards with “Summary” and “Details” section where actions can be defined. 
    {
    "Summary": {
      "Id": "lost_luggage",
      "Icon": "plus",
      "Heading": "Lost luggage claim"
    },
    "Detail": {
      "Heading": "Lost luggage claim",
      "Description": "Use this flow for customers that have lost their luggage",
      "Sections": {
        "TemplateString": "<TextContent>Your steps here</TextContent>"
      },
      "Actions": [
        "Start a new claim",
        "Something else"
      ]
    }
}
  3. When an agent clicks an action in a card, the action name gets set as the contact attribute $.Views.ViewResultData.actionName. Checking the value of this contact attribute informs you what to do next.
  4. If the action name is “Start a new claim” you are brought to a second Show View block to fill out a form to file a claim. The form is made up of different form section components that contain smaller components to collect the data you need. For example: text input, date picker, and radio button groups. Again, you can combine this view with Customer Profiles to pre-populate it with relevant information.
  5. When the agent submits the form they are brought to the last Show View block. This one provides a Confirmation View. It lets them know that the claim has been submitted successfully and advises them about next steps. They can also navigate back to the initial Card View if they need to go through another workflow.

Step 3: Create the handler flow

Because step-by-step guides are specific to helping agents with customer support, you do not want to be sending calls to your SBSGuides_Example_Cards flow. To isolate step-by-step guides from the routing logic of the contact experience, you can use a handler flow. To import our SBSGuides_Example_Cards_Handler flow:

  1. Download the flow here.
    1. Note: Depending on your browser you may need to right click the link and choose Save Link As in order to download the flow properly.
  2. Navigate into your Amazon Connect instance > Routing > Flows > Create flow.
  3. Click the drop-down arrow on the right and choose Import (beta) and import the downloaded flow.
  4. Click Publish.

Step 4: Configure the handler Flow

Now you have to configure this flow to work in your specific environment.

  1. Open the SBSGuides_Example_Cards flow created in step 2.
  2. Click Show Additional Flow Information on the bottom of the flow editor.
  3. Copy the flow ID of your SBSGuides_Example_Cards flow. This value is everything after “contact-flow/” in the flow ARN. See here for more detailed instructions.
  4. Return to the SBSGuides_Example_Cards_Handler flow created in step 3.
  5. Open the Set contact attributes block.
  6. Set the value of DefaultFlowForAgentUI to the flow ID that you copied in step 3. This attribute decides what step-by-step guides to show your agent when the call is routed to them.
  7. Save the Set contact attributes block.
  8. Open the Set working queue block.
  9. In this block, set the queue to correspond with the queue in your contact center that you want to use while testing out the guides. It is recommended that you make a new queue for this example in order to avoid impacting your contact center operations. Alternatively, you can leave this block as is and set the value of the WorkingQueue attribute in the Set contact attributes block to the value of the queue ARN. To obtain the queue ARN, navigate to Routing > Queues, click on the queue name and expand the Show additional queue information section.
  10. Save the Set working queue block and click Publish to publish the updated flow.

Note: In addition to the “DefaultFlowForAgentUI” attribute, the flow defines another custom attribute called “CustomerPhoneNumber”. The value for this attribute can be set dynamically with System > Customer Number so no configuration on your end is needed. Setting this contact attribute lets you look up the relevant Customer Profile within your SBSGuides_Example_Cards flow in order to personalize the guide for the agent. You do this because the SBSGuides_Example_Cards flow is not initially aware of the ongoing call between the customer and agent. Rather, it relies on user defined attributes to gain context.

Step 5: Configure routing.

To test your new step-by-step guide you need to associate your handler flow with a phone number

  1. In the Amazon Connect instance, navigate to Channels > Phone Numbers and select the phone number you will be using to test the example.
  2. Set that number’s Contact Flow/IVR to the SBSGuides_Example_Cards_Handler and click save.

Step 6: Test the example

You are now ready to test out the new step-by-step guide. To do this:

  1. Log into the Amazon Connect agent workspace as an agent who can receive calls from the queue you set when configuring the SBSGuides_Example_Cards_Handler flow.
  2. Make sure you are set to “Available”.
  3. Call the contact center using the phone number you configured in step 5.
    When prompted press 1. This will route your call to the agent and pop up the step-by-step guide you created.
  4. Note: If the number you call with already has a Customer Profile associated with it then it will be detected by the step-by-step guide. However, if there is not one the flow creates a fake customer profile to use as an example.
Example of the agent workspace view for the demo

Figure 8: Example of the agent workspace view for the demo

Feel free to play around with the step-by-step guide and see the different options available to you. In this post you have only configured the “Start a new claim” action but additional actions can easily be added by following a similar pattern:

  1. Define the action within the “Details” section of a Card View’s card definition.
  2. Check the value of $.Views.ViewResultData.actionName.
  3. Based on that value send the agent to the next relevant Show View block.

Customizing our step-by-step guides

Now that we have a functional step-by-step guide lets explore how we can customize and expand from here. Specifically, we will see how to integrate our step-by-step guides with AWS Lambda and customize visual styles.

Integrating with AWS Lambda

Like any other Flow you can integrate a step-by-step guides flow with AWS Lambda by using the Invoke AWS Lambda Function block. This is useful if you need to process data after the agent has entered it. For instance, when the agent files a luggage claim you may want to save that claim to a database or send a notification.

The Show View block’s output is saved under the $.Views.ViewResultData contact attribute. This attribute is a JSON object with different definitions depending on what view is used. For instance you saw with the Card View you were able to see what action the agent clicked by looking at $.Views.ViewResultData.actionName. Similarly you could see the data provided in a Form View by looking at $.Views.ViewResultData.FormData. For more details on the format of $.Views.ViewResultData see the Output Data Example for your specific view in the administrator guide.

Adjusting visual style

You can stylize views how you want using standard CSS style sheets. In the Show View block there is a section for passing custom style elements to the view. This changes the appearance of the view when it is triggered. These styles can be set manually or dynamically passed using contact attributes. A list of all the style elements available for customization can be found in the administrator guide.

Cleanup

Once you have finished experimenting with the step-by-step guide you can clean it up by following these steps:

  1. In your contact center navigate to Channels > Phone Numbers and select the phone number you used to test the example.
  2. Set that number’s Contact flow/IVR to something other than the two flows deployed in this example and click save.
  3. Using the AWS CLI run the delete-contact-flow command for both the SBSGuides_Example_Cards flow and the SBSGuides_Example_Cards_Handler flow
  4. Using the AWS CLI run the delete-profile command for any customer profiles that were made while testing.

Conclusion

In this blog post you had the chance to dive deep into the new step-by-step guides for the Amazon Connect agent workspace. Creating step-by-step guides for your contact center enables agents to take relevant steps to help out your customers without relying on months of learned experience. Using the no-code flow editor, contact center administrators can build out powerful guides, taking advantage of all the features available within Amazon Connect and the broader AWS ecosystem. To learn more about using step-by-step guides for the Amazon Connect agent workspace head to the administrator guide or reach out to your AWS Sales Partner to learn more.

Join us for AWS Contact Center Day, a free virtual event where you’ll learn about the future of customer service, how machine learning can optimize customer and agent experiences—and more. Register now »

David Kocen (he/they) is a Builder Solutions Architect at Amazon Web Services (AWS) based in Seattle, Washington. He helps accelerate customer’s cloud journey through the creation of open-source starter projects and sample code.
Danbee Park (she/they) is a Sr. Front End Engineer at Amazon Web Service (AWS) based in New York. She has developed connect services focusing on the agent experience.
Luke Warneminde is a Solutions Architect specializing in Amazon Connect, based in Melbourne, Australia. He has worked with contact centers, software development, sheep farming and industrial sheet fed printing, and is yet to find a way to combine them all. He likes to break things and occasionally fix them.