AWS Machine Learning Blog

Deploy a Web UI for Your Chatbot 

Update November 2020: See New features

You’ve built a very cool chatbot using Amazon Lex. You’ve tested it using the Amazon Lex console. Now you’re ready to deploy it on your website.

Although you could build your own bot user interface (UI), that seems like a lot to take on. You’d need to handle support for different devices and browsers, authentication, voice recording, and much more. You figure that someone must have done this before, and that with luck you’ll find a solution that you can re-use.

The chatbot UI

Our sample Amazon Lex Web UI, referred to as the chatbot UI, already does most of the heavy lifting associated with providing a full-featured web client for Amazon Lex chatbots. You can quickly exploit its features, and minimize time to value for your chatbot-powered applications.

You can run it as a full-page chatbot UI:

Or embed it into a site as a chatbot widget:

The chatbot UI supports the following features:

  • Mobile-ready responsive UI with full screen or embeddable widget modes
  • Full support for voice and text, with the ability to seamlessly toggle between them
  • Voice features including automatic silence detection, transcriptions, audio record and replay, and the ability to interrupt Amazon Lex response playback
  • Response cards support for both text and voice
  • Ability to programmatically interact with the chatbot UI from the hosting site
  • Multiple deployment options
  • Web accessible via Amazon Cloudfront
  • Fully integrated user login via Amazon Cognito User Pool – user token accessible by Lex bot as a session attribute
  • Markdown support for rich text / images / video, etc.
  • Support for clickable buttons in Lex response cards
  • Optional ‘Thumbs Up’ and ‘Thumbs Down’ buttons – sends response feedback message to Lex bot
  • Optional ‘Help’ button on title bar – sends help message to Lex bot
  • Back button on title bar – resends previous message to Lex bot

Deployment and integration options

You have four options for deploying and integrating the chatbot UI:

  1. Use AWS CloudFormation.
  2. Use AWS Mobile Hub.
  3. Use a prebuilt distribution library.
  4. Use a prepackaged Vue component.

Deploying with AWS CloudFormation is the easiest method, so we’ll show you how. For more information on all options, see the GitHub README.

Getting started with the AWS CloudFormation deployment option

Deploy the chatbot UI to kick the tires.

  1. Press the Launch Stack button for the Region in which you will use your chatbot:
    Northern Virginia
    Oregon
    Ireland
    Sydney
    Singapore
    London
    Tokyo
    Frankfurt
  2. Accept all default parameters.
    This deploys a demonstration environment in your account (in the us-east-1 AWS Region) and installs the OrderFlowersBot.
  3. After AWS CloudFormation launches the stack (the status is CREATE_COMPLETE), open the Outputs tab. Choose WebAppUrl or ParentPageUrl to experiment with the chatbot UI:

The stack deploys the following architecture. It is completely serverless ˗ charges are based on your service usage.

For more information, see CloudFormation Stack README.

After you’ve got a sense for how the chatbot UI works, try it with your own Amazon Lex chatbot and integrate it into your website. Here’s how:

  1. Press the Launch Stack button for the Region in which you will use your chatbot:
    Northern Virginia
    Oregon
    Ireland
    Sydney
  2. In the Lex Bot Configuration Parameters section:
    • For BotName, type your bot’s name.
    • Set EnableCognitoLogin to true to enable integrated user login.
  3. In the Web Application Parameters section, complete each of the parameters.
    Note: It’s essential that you use your site’s origin for WebAppParentOrigin.
  4. After AWS CloudFormation launches the stack (the status is CREATE_COMPLETE), you will see a link on the Outputs tab in the SnippetUrl output value:
  5. Browse to the SnippetUrl page, where you will see a code snippet similar to the following that you can paste into your application:

For code examples and additional options for integrating the chatbot UI into your website and configuring it, see our Amazon Lex UI repository on GitHub.

Let us know what you think

We hope you try the sample chatbot UI. Let us know about your experience in the comments section at the end of this post.

We’d also love to hear your suggestions for improvements and features. Report bugs and submit feature requests in the project GitHub repository. Even better, contribute your enhancements as pull requests!


 

New features log

  • Update November 6, 2020 – Now available in Singapore, Tokyo, London, and Frankfurt regions, default encryption for all S3 buckets using AES-256 encryption, new config option (minButtonContent) which allows text to be added to the button which appears on the parent page when the iframe is minimized, new template parameter (forceLogin) which configures UI to require the user to authenticate through Cognito prior to using the bot.
  • Update July 10, 2020 – New features: implements screen reader support and accessibility enhancements, minimized iframe now displays a compact button rather than a title bar, responsecard in session attribute ‘appContext.responsecard’ may be used to display more than 5 buttons (avoiding Lex button limit), new ‘resend utterance’ tool replaces the title bar back button – see GitHub repo for details
  • Update June 10, 2020 – New features: now ships with Amazon CloudFront as the default distribution method, providing faster load times, and removing the requirement for public read access to the S3 bucket – see GitHub repo for details
  • Update April 01, 2020 – New features: multiple region support, improved CSS style customization, configuration option to hide input area when using buttons, and fixes related to CORS and more – see GitHub repo for details.
  • Update November 01, 2019 – New features: optional thumbs up/down buttons for sending feedback messages, optional help button for sending help message, and a back button to resend previous message – see GitHub repo for details.
  • Update December 31, 2018 – New features: integrated user login, markdown support, response card buttons, and more – see GitHub repo for details.

Additional Reading


About the Authors

Oliver Atoa and Bob Strahan are Senior Consultants for AWS Professional Services. They work with our customers to provide leadership on a variety of projects, helping them shorten their time to value when using AWS.

OliverAtoa_pic_resized

BobStrahan_pic_resized