Building a FAQ Bot: A React ChatBotify Guide (Part 3)

Introduction

Welcome to the third installment of our comprehensive guide, "Building a FAQ Bot: A React ChatBotify Guide." If you've ever found yourself grappling with repetitive user queries, you've likely pondered the benefits of an FAQ chatbot. In this segment, we will explore how we can build a customized FAQ chatbot to relay commonly requested information to your users!

A Quick Recap

In the previous parts of this series, we equipped you with a setup guide in Part 1 and guided you through establishing the basic appearance and conversation structure of your chatbot in Part 2. If you're just joining us, or if you need a refresher on these fundamental steps, be sure to check out the earlier installments. Note that this segment assumes you already have a React ChatBotify chatbot setup. If you have not, then do visit this guide first.

As we venture into Part 3, we'll dive into one of the most common use cases of a chatbot - creating an FAQ bot that not only streamlines responses but also enhances user satisfaction and operational efficiency. By the end of this guide, you'll have the knowledge and tools to implement an intelligent FAQ bot using React ChatBotify.

Crafting Options

Building a chatbot to answer FAQs is very easily done with React ChatBotify. In fact, if you already have the chatbot setup from the previous guide, then you can easily build off it! However, for the purpose of making this tutorial complete, let's assume we have a clean setup with a bot that greets the user! This can be achieved with the following code snippet:

// MyChatBot.js
import React from "react";
import ChatBot from "react-chatbotify";

const MyChatBot = () => {
  const flow = {
    start: {
      message: "Hello, I am a FAQ Bot!"
    }
  }

  return (
    <ChatBot/>
  );
};

export default MyChatBot;

At this point, we have a very dull chatbot that does nothing more than greeting. We can easily have it show options to users by just adding an option attribute along with an array of options. Let's quickly include three options (Examples, Github & Discord) to the chatbot below:

// MyChatBot.js
import React from "react";
import ChatBot from "react-chatbotify";

const MyChatBot = () => {
  const flow = {
    start: {
      message: "Hello, I am a FAQ Bot!",
      options: ["Examples", "Github", "Discord"]
    }
  }

  return (
    <ChatBot/>
  );
};

export default MyChatBot;

With one simple change, we have now instructed the chatbot to provide options for the users to click. That said, if you click on the options, you will notice that you are not getting any responses from the chatbot. Let us now take a look at how we can craft our chatbot response!

Crafting Responses

In order to provide responses, we first need to process the user selected option. Create a second process_options block in which we will do our processing and ensure that the path is specified from the first block. The code snippet below shows the complete second block but not to worry, we will break it down in detail:

// MyChatBot.js
import React from "react";
import ChatBot from "react-chatbotify";

const MyChatBot = () => {
  const flow = {
    start: {
      message: "Hello, I am a FAQ Bot!",
      options: ["Examples", "Github", "Discord"],
      path: "process_options"
    },
    process_options: {
      message: (params) => {
          let link = "";
          switch (params.userInput) {
          case "Examples":
              link = "https://react-chatbotify.tjtanjin.com/docs/examples/basic_form";
              break;
          case "Github":
              link = "https://github.com/tjtanjin/react-chatbotify/";
              break;
          case "Discord":
              link = "https://discord.gg/6R4DK4G5Zh";
              break;
          default:
              return "unknown_input";
          }
          setTimeout(() => {
              window.open(link);
          }, 1000)
          return `Sit tight! I'll send you to ${params.userInput}!`;
      },
    }
  }

  return (
    <ChatBot/>
  );
};

export default MyChatBot;

In the process_options block above, we define a message attribute. However, the message is determined dynamically by the user's choice of input in the start block. Notice first that the message attribute takes in params which contains values that may be used in application logic.

A full list of what values are accessible is found in the API documentation and for the purpose of this example, we are using the userInput value which contains the option selected by the user from the start block. The userInput is used in the example above to determine which link to visit before informing the user to sit tight and sending the user to said link after a 1 second delay.

You can furthermore have the chatbot loop itself by making a quick addition of a loop block:

// MyChatBot.js
import React from "react";
import ChatBot from "react-chatbotify";

const MyChatBot = () => {
  const flow = {
    start: {
      message: "Hello, I am a FAQ Bot!",
      options: ["Examples", "Github", "Discord"],
      path: "process_options"
    },
    process_options: {
      message: (params) => {
          let link = "";
          switch (params.userInput) {
          case "Examples":
              link = "https://react-chatbotify.tjtanjin.com/docs/examples/basic_form";
              break;
          case "Github":
              link = "https://github.com/tjtanjin/react-chatbotify/";
              break;
          case "Discord":
              link = "https://discord.gg/6R4DK4G5Zh";
              break;
          default:
              return "unknown_input";
          }
          setTimeout(() => {
              window.open(link);
          }, 1000)
          return `Sit tight! I'll send you to ${params.userInput}!`;
      },
      transition: {duration: 1},
      path: "loop"
    },
    loop: {
      message: "Do you need any more help?",
      options: ["Examples", "Github", "Discord"],
      path: "process_options"
    },
  }

  return (
    <ChatBot/>
  );
};

export default MyChatBot;

Just to give a quick reminder, apart from the start block, you can name the other blocks however you want. That said, you are still strongly encouraged to give descriptive names such as in the process_options and loop blocks shown above.

All that said, if you have followed the guide closely up till now, you would have ended up with a FAQ bot similar to the one shown in the live example:

You will notice differences from the live example but that's because the example is more extensive and there are multiple ways to go about achieving the same outcome. So, go ahead and use the playground for your exploration and experimentation to see what suits you best!

Conclusion

In this guide, we took a quick look at how we can build an FAQ chatbot with React ChatBotify. In the next guide, we will take a look at another exciting use case - that is building dynamic conversations with your chatbot via integration with Gemini!