App Instructions:

  1. Open this link in a new tab.
  2. Click on the text box at the bottom of the Dialogflow window (Where it says, "Ask Something").
  3. Type a phrase or question and press enter/return.
  4. The bot will respond, either by answering the question, or if it is unable to do so, will say something along the lines of, "I didn't get that. Could you say that again?"
  5. Repeat steps 2-4 as desired.


This project was inspired by an idea that we had originally thought we were going to develop, which was a Chat Moderator Bot for Google Meets, that would filter out spam messages and obscene language, as well as pin messages for later reference in the chat. We chose to go in a different direction for this HACC by picking the OHA ChatBot challenge so we could gain experience with ChatBots that we could then take back to our original idea.

Function of the App

The function of this ChatBot we developed is to alleviate some of the stress that is put on the OHA when people contact them for information. This ChatBot is designed to take questions from the user and provide them answers in a timely manner, which saves time and resources for the OHA since more people would use the ChatBot for basic questions instead of calling the OHA directly. The image below shows how the ChatBot would integrate with the OHA website itself. OHA Chatbot

How the App Was Built

This ChatBot was built using HTML, CSS, and Dialogflow. For the front-end of the app, HTML and CSS were used to customize the appearance and layout of the page. For the back-end of the app, Dialogflow API was used to create the ChatBot itself, which allowed us to input questions and answers, as well as keywords to help the bot learn. The Dialogflow API handles all of ChatBot's functionality. Here is a written summary of how Dialogflow was used within our project.

Challenges Encountered

One challenge we faced is settling on a platform to actually use for the back-end of the app. Before we found Dialogflow, we could not really decide on a platform for developing the ChatBot. Before we found Dialogflow, we were originally going to use JavaScript, but had no idea where to go. After finding Dialogflow, our direction became much clearer. Another challenge our group faced was positioning and sizing the ChatBot on the page.

Stretch Goals/What's Next for MGK

  1. Implement Security Features into the app
  2. Completely develop the back-end of the project with Dialogflow with more questions and answers
  3. Implement the ChatBot into the OHA Website
  4. Use the data of what users ask after implementing the ChatBot to better improve the ChatBot's functionality


We are proud of our overall project, as this project gave us experience with competition in coding and how ChatBots work.

Our Takeaways

Throughout this project, we learned that there are many resources available for us to use in development besides just raw coding languages, like the Dialogflow API, as well as SalesForce and Microsoft Azure. Another thing we took away from this project was how ChatBot functions at a deeper level than just a regular user. All in all, this project gave us more experience in programming in general, with an emphasis on ChatBots.

Built With

Share this project: