Integration of Chatbot(Amazon Lex) in a static website (Hosted on S3 and cloud front)
Tags: amazonlex, cloudfront, s3bucket, cloudformation
Published: 2024-04-21 05:20:10

**📚Table of Content**
🎤-[Chatbot](#Chatbot)
🎤-[Amazon Lex](#Amazon Lex)
🎤-[Flow Diagram](#Flow Diagram)
🎤-[Creation of Chatbot using Amazon Lex for ordering Pizza](#Creation of Chatbot using Amazon Lex for ordering Pizza)
🎤-[Hosting a static website on S3 bucket](#Hosting a static website on S3 bucket)
🎤-[Integration of Chatbot with website hosted on a S3 bucket](#Integration of Chatbot with website hosted on a S3 bucket)
🎤-[Hands-on Demo](#Hands-on Demo)
🎤-[Instructions to clean up AWS resources to avoid Billing](#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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/845c0rwiui876xtn90kl.png)

##⏳Flow Diagram

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6e3vpv10vlivgh49swg.JPG)

##💭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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kq2w1ipd82i1fkzg2wbf.png)

📌Select the language as default English. Click Done

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sakvjvg9y9toob44vy9h.png)

📌Give the intent name and intent details below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgtemw5p5w2j0yoj9h9m.png)

📌We can add utterances below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcih4t865fnjtt0kc2za.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zavscgro6ptvoo5ptmlc.png)

📌Now add the slot type values below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmqzjyjjas35g8rb69kn.png)
📌Slot used to capture the information from the user to fulfill the intent

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/557fich4o20ey9uqfepl.png)

📌 Add the confirmation slot and closing slot message

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl7y7aqyntiq7u1b2ase.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vrty1btny8ie7sech17.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6uj4yl2fvcnv7kv09179.png)

📌 Save the intent and build it as below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6wro0cmd1y8bb754suy.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tpqmj7k02fjvyi6nd8l.png)

🤩 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi4xzvgvpy9n1j7s1qdb.JPG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8u0jmjyu7oxwfzmpctgi.JPG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/122yq0h2qkibkzxjw8ue.JPG)

📌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/*"
        }
    ]
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3f33wqcgukc2kvacnijv.JPG)

📌Upload the index.html and images in S3 bucket

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cdvywd3hfdry8w8eyv6.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ctzgygnsafgca5u02ck.png)

##🔗Integration of Chatbot with website hosted on a S3 bucket
📌Launch the cloud formation stack mentioned [here](https://aws.amazon.com/blogs/machine-learning/deploy-a-web-ui-for-your-chatbot/)

📌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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luje8mnomy0wp6r8hxa6.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzab3v5s7yh5qpzm2fjf.png)

📌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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhslj1ezera7frcduuwd.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qp3vpged3f52cfzt8z4.png)
🤩 Love it !! Here's goes my chatbot integrating with the website

 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bawmxz251jn5cyyrp6i0.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcbtjrszubqz4lt4ta4k.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wprlcvxc1lm38bp3ja2.png)

##🎥 Hands-on Demo
[Amazon Lex Chatbox](https://youtu.be/85RbzFNS82Q)


##🗑️ 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rv9hnk73xzda1huy5q8g.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc4heuyrah93fl7a2esj.png)
♻️ Delete the chatbot Pizza Order created

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehj5s4qov9rwkbw695m3.png)

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