DEV Community

Cover image for Deploy an Amazon Lex Chatbot to your own website.
Monica Escobar
Monica Escobar

Posted on

Deploy an Amazon Lex Chatbot to your own website.

Why a chatbot?

For professionals, integrating a chatbot into your website is more than just a cool tech feature; it’s a way to showcase your commitment to innovation and user experience. It reflects a forward-thinking approach and shows that you value your visitors’ time and needs. By offering instant, personalised interactions, a chatbot makes your website more engaging and user-friendly.

Incorporating a chatbot into your website is a smart move that demonstrates a proactive approach to communication and technology. It’s about making connections easier, information more accessible, and experiences more enjoyable for your visitors. In essence, it’s a reflection of who you are as a professional – someone who values innovation, accessibility, and excellence in every interaction.

These are just some of the reasons I chose to build and deploy my own chatbot, and I ended up liking it so much that I wanted to share the steps with everyone else in case you found it useful or beneficial for any of your projects.

Stack/resources used:

-Amazon Lex
-CloudFront
-My own website

Below are the steps I followed to create the chatbot using AWS Lex:

When creating a chatbot in AWS Lex, you have several options:
- Descriptive Bot Builder: Automatically generates intents, utterances, and slots based on your use case but you need to use BedRock for this, make sure you check the fees before you do this. Also, you will need to apply to have access granted if you have never used it before.
- Create a Blank Bot: Start from scratch and define your own intents, utterances, and slots. This is the one I chose.
- Start with a Transcript: Upload a JSON file with the conversation flow. Bear in mind, that if you decide to upload the json file you will need to provide 1000 lines as a minimum.

*
Using the Visual Editor: *
- Create a blank bot and proceed to the Visual Editor.
- Define intents, slots, and conversation flows using a visual interface.
- Add intents, slots, prompts, and responses to script the conversation flow.


Testing and Building the Chatbot:

- After defining the conversation flow, save the bot.
- Build the bot and test it within the AWS Lex console to ensure it functions correctly.
Enter fullscreen mode Exit fullscreen mode


Integrating the Chatbot:

- Once the chatbot is built successfully, create an alias for the bot.
- Integrate the chatbot with your website by deploying a stack (you can get it here: https://aws.amazon.com/blogs/machine-learning/deploy-a-web-ui-for-your-chatbot/)that includes CloudFront, web UI artifacts, and authentication using Amazon Cognito (if required, I personally did not include authentication).
Enter fullscreen mode Exit fullscreen mode


Deployment and Configuration:
- Launch the stack with the necessary parameters like Bot ID, Alias ID, and other configurations.
- Copy the snippet URL provided after the stack creation to integrate the chatbot into your website.

_
Finalising Integration: _

- Update your website's HTML code with the provided snippet URL to embed the chatbot.
- Upload the updated HTML file to your hosting platform (e.g., S3 bucket).
- Invalidate the CloudFront cache to reflect the changes on your website.
Enter fullscreen mode Exit fullscreen mode


Testing the Integrated Chatbot:
- Access your website and interact with the chatbot using text or voice commands.
- Validate that the chatbot functions correctly and responds to user inputs as expected.

*Future enhancements: *

Looking ahead, my journey with AI and automation is far from over. I have exciting plans to further enhance the capabilities of the chatbot and, in turn, the overall user experience of my portfolio.
One of the key areas I’m focusing on is harnessing user behaviour insights. The chatbot has the potential to track common questions and interactions, revealing what visitors find most interesting or important, this constant feedback can help me enhance the user experience.

If you got this far, thank you so much and happy building!

Top comments (1)

Collapse
 
paco_gomez profile image
paco gomez muñoz

Amazing! 👏👏