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

📚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

⏳Flow Diagram

💭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

📌Select the language as default English. Click Done

📌Give the intent name and intent details below

📌We can add utterances below

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

📌Now add the slot type values below

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

📌 Add the confirmation slot and closing slot message

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

📌 Save the intent and build it as below

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

🤩 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

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

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

📌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/*"
        }
    ]
}

📌Upload the index.html and images in S3 bucket

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

🔗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.

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

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

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

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

🎥 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

♻️ Delete the chatbot Pizza Order created

🕵🏻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