Integration of Chatbot(Amazon Lex) in a static website (Hosted on S3 and cloud front)

Vijayaraghavan Vashudevan - Apr 21 - - Dev Community

📚Table of Content
🎤-Chatbot
🎤-Amazon Lex
🎤-Flow Diagram
🎤-Creation of Chatbot using Amazon Lex for ordering Pizza
🎤-Hosting a static website on S3 bucket
🎤-Integration of Chatbot with website hosted on a S3 bucket
🎤-Hands-on Demo
🎤-Instructions to clean up AWS resources to avoid Billing

🤖 Chatbot

💬 A chatbot is a computer program designed to simulate conversation with human users, especially over the internet. Chatbots can range from simple rule-based systems that follow pre-programmed responses to sophisticated artificial intelligence (AI) models capable of understanding natural language and engaging in more complex interactions. They are used in various applications, including customer service, virtual assistants, information retrieval, and entertainment.

👨‍💻 Amazon Lex

📌Amazon Lex is a service provided by Amazon Web Services (AWS) that enables developers to build conversational interfaces, or chatbots, into their applications using voice and text. It utilizes the same technology that powers Amazon Alexa, the virtual assistant found in Amazon Echo devices.

📌With Amazon Lex, developers can create natural language understanding (NLU) models that interpret user input and respond accordingly. Lex handles the heavy lifting of speech recognition and natural language understanding, allowing developers to focus on designing conversational flows and integrating the chatbot into their applications. It can be integrated with other AWS services, such as AWS Lambda for executing backend logic, Amazon DynamoDB for data storage, and Amazon Polly for text-to-speech synthesis

Image description

⏳Flow Diagram

Image description

💭Creation of Chatbot using Amazon Lex for ordering Pizza

📌Go to AWS Management Console, Navigate to Amazon Lex, and select the Create bot button. Give the bot name and description below

Image description

📌Select the language as default English. Click Done

Image description

📌Give the intent name and intent details below

Image description

📌We can add utterances below

Image description

📌 We can toggle to active for the confirmation prompt and closing prompt. Save the Intent

Image description

📌Now add the slot type values below

Image description
📌Slot used to capture the information from the user to fulfill the intent

Image description

📌 Add the confirmation slot and closing slot message

Image description

Image description

📌 You can add delivery time by adding a card group to make it more convenient for the users

Image description

📌 Save the intent and build it as below

Image description

🕵️ It's time to test a chatbot we built

Image description

🤩 Yes !! We build the chatbot using Amazon Lex 🙌

🌏Hosting a static website on S3 bucket

📌Navigate to the S3 console, Create a bucket with the name staticwebsite2004 as below

Image description

📌 Go to the properties tab, Enable a static website hosting with an index document as index.html

Image description

📌 Go to the permissions tab, Enable the block all public access with the checkbox unselected

Image description

📌Add the bucket policy under the permissions tab as below



{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::staticwebsite2004/*"
        }
    ]
}


Enter fullscreen mode Exit fullscreen mode

Image description

📌Upload the index.html and images in S3 bucket

Image description

🤩 That's it !! You can view the beautiful website below

Image description

🔗Integration of Chatbot with website hosted on a S3 bucket

📌Launch the cloud formation stack mentioned here

📌Copy the bot id and paste it into the Lex V2 bot. Similarly, Copy the alias ID and paste it in the alias version.

Image description

📌Enter the web application parameters including web app origin details as below

Image description

📌Go to cloud formation stack. Navigate to outputs, Click on the snippet URL, copy the snippet below, and add it to your index.html

Image description

📌 Refresh the static website and in the console, you can view
"Successfully initiated Lex Web UI version"

Image description
🤩 Love it !! Here's goes my chatbot integrating with the website

Image description

Image description

Image description

🎥 Hands-on Demo

Amazon Lex Chatbox

🗑️ Instructions to clean up AWS resources to avoid Billing

♻️ Delete the cloud formation stack created
♻️ Delete the S3 Bucket created by deleting all the files internally

Image description

Image description
♻️ Delete the chatbot Pizza Order created

Image description

🕵🏻I also want to express that your feedback is always welcome. As I strive to provide accurate information and insights, I acknowledge that there’s always room for improvement. If you notice any mistakes or have suggestions for enhancement, I sincerely invite you to share them with me.

🤩 Thanks for being patient and following me. Keep supporting 🙏

Clap👏 if you liked the blog.

For more exercises — please follow me below ✅!

https://www.linkedin.com/in/vjraghavanv/

#aws #website #amazonlex #cognito #frontend #cloudfront #s3bucket #awscommunitybuilder #machinelearning #serverless #cloudformation #opensource #chatbot #cncf #awsugmdu #awsugncr #awscommunitybuilder #automatewithraghavan

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .