AWS Machine Learning Blog

Deploy a Web UI for Your Chatbot 

Update September 2021: Introducing Transfer to Amazon Connect live chat – 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:

  • Works with Lex or Lex V2 bots
  • 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. Login can be optional or required.
  • 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
  • Resend any previous message
  • New! Transfer to Amazon Connect live chat – allows users of the Lex Web UI to request and conduct live chat conversations with a human agent using Amazon Connect. Here’s a short demo video. For more information on how to configure and use this feature, see the GitHub README.

Deployment and integration options

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

  1. Use AWS CloudFormation.
  2. Use a prebuilt distribution library.
  3. 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
  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
  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.


You can use CloudFormation to upgrade your existing Lex Web UI stack, or to change the value of any of the stack parameters.

  1. On the CloudFormation console, select the main Lex Web UI stack.
  2. Choose Update.
  3. Choose Replace current template.
  4. Enter Amazon S3 URL for your region:
  5. Choose Next three time to display the Review page.
  6. Select the acknowledgement checkboxes, and choose Update Stack to upgrade Lex Web UI.

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 September 1, 2021 – Introducing transfer to Amazon Connect live chat. This feature allows users of the Lex Web UI to have conversations with an Amazon Connect Live Agent. When the user requests a transfer, all subsequent messages are sent to Connect Live Chat Agent and responses from the Agent are displayed back to the user as a message bubble. The conversation continues between user and agent until either party disconnects. Once disconnected, messages are again sent to the Lex bot. [Demo Video]
  • Update March 4, 2021 – Now supports Amazon Lex V2 bots,  new parameter to specify initial utterance that will be sent to the bot when page is loaded, login failure detection now prevents looping when using ForceLogin, stack upgrade now supports changing WebAppParentOrigin when login is enabled, WebAppPath parameter now supports multiple values to support login-enabled deployment on multiple pages on the same site (origin).
  • Update December 7, 2020 – Now supports use of CloudFormation stack update action to change stack parameters and/or to upgrade to new version, new ‘SaveHistory’ option enables chat history to be preserved when page is refreshed or when navigating back to the hosting page with new menu option to clear the chat history, new ‘ForceLogin’ option automatically loads Cognito login page and prevents unauthenticated users from accessing the bot.
  • 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 Principal 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.