Updated on February 14, 2024

Want to enhance your ReactJS website with a powerful yet engaging AI chatbot? Look no further than Dialogflow! By integrating this Google-backed chatbot platform, you can supercharge your user experience by offering 24/7 support, answering FAQs, and even guiding users through your website. 

This step-by-step guide will equip you with everything you need to seamlessly incorporate a Dialogflow bot into your ReactJS project. Whether you’re a budding developer or a seasoned pro, we’ll walk you through different integration methods, provide clear instructions, and offer valuable tips for optimizing your chatbot. 

Get ready to boost user engagement, improve customer satisfaction, and unlock the full potential of your website! Let’s dive in!

CTA_chatbot

Prerequisites

To get started,

  1. You would need a Dialogflow bot or working knowledge of Dialogflow and React JS.
  2. To integrate the chatbots with React JS, you will need a Kommunicate account.
  3. All the aforementioned tools are free to try out. Additionally, Node should be installed in your system.

Choose Your Integration Method: 

Now that you’re eager to bring your Dialogflow bot to life within your ReactJS website, it’s time to select the integration method that best suits your needs. Here’s a breakdown of the popular options, each with its advantages and considerations: 

1. Kommunicate Platform: 

Pros: User-friendly interface, no coding required, pre-built chat UI, additional chatbot features (multilingual support, analytics). 

Cons: Paid subscriptions for advanced features, and limited customization options. 

2. Direct API Integration:

Pros: Complete control and customization, flexible for complex applications, cost-effective. 

Cons: Requires coding knowledge, steeper learning curve, needs backend server setup. 

3. Third-Party Libraries:

Pros: Faster development with pre-built components, community support, and various features depending on the library. 

Cons: Potential bugs or limitations of libraries, dependence on third-party updates, might not cover all your needs.

Steps to integrate Dialogflow bot in React JS websites

I am going to explain how I connected Dialogflow and React JS with the help of Kommunicate.

Note: To keep it very simple and straight this tutorial explains with really basic and plain code development. Also to mention, this project can be found on my Github.

🚀  Suggested Read:  How to add Chatbot to Express Js

Step 1: Create your Dialogflow bot

To get started, you can easily create a chatbot in Dialogflow. It is a very intuitive yet powerful chatbot building tool. Here’s a sample available to help you get started with your Dialogflow bot. To go further, you can create your own Intents & Entities.

Step 2: Integrate Dialogflow chatbot with Kommunicate

To integrate your Dialogflow bot in Kommunicate, log in to your Kommunicate dashboard and navigate to the Bot section. If you do not have an account, you can create one here. Locate the Dialogflow section and click on Integrate Bot.

Integrate Dialogflow chatbot with Kommunicate

Now, navigate to your Dialogflow console and download the service account key file. Here are the steps to locate the file:

  1. Open Dialogflow agent settings (gear icon on the left panel)
  2. Click on the Google Cloud link which is mentioned in the Google Project bar
  3. In the Google, cloud page navigate to the Credentials section by clicking on API’s & services
  4. Under the Credentials section find the service account and click on edit for Dialogflow integrations
  5. At the bottom of the screen click on ADD key button and create a key option, JSON key will be downloaded
  6. Now upload the Key file.
bot integrations

Step 3: Intgrate Dialogflow CX into Kommunicate

To integrate Dialogflow CX into Kommunicate follow the same instructions to download the JSON key and mention the Agent ID in the kommunicate dashboard

To get the Agent ID: Go to Dialogflow CX console >> Select the Project >> In the Agent you have created ‘Copy the agent name to the clipboard will be in the format mentioned below,  where the Agent ID is 54b0c663-2c01-4a09-a482-277ff39c0b05

dialogflow cx console

In the bot profile section, you will be able to give your bot a name. This name will be visible to the users whenever they interact with the bot. Process further and fill the details.

integrating a bot from dialogflow

In the last step, you will be asked to enable or disable the chatbot to human handoff. If enabled, the conversation will be passed on to a human in case the chatbot is not able to answer the question.

integrating a bot from dialogflow

Complete the setup and then you can check and test your newly created bot in two places:

  1. Dashboard →Bot Integration → Manage Bots: You can check all your integrated bots here
  2. Dashboard → Bot Integration: Your Dialogflow icon should be green with the number of bots are you have successfully integrated. You will also have the option of testing your newly created bot here. (See image below)
bot integrations- kommunicate

Step 4: Create a React app

Create a new React app (my-app) by using the command:

npx create-react-app my-app

Step 5: Now, navigate to the my-app folder

cd my-app

Step 6: Create new file chat.js inside src folder

Once you create the chat.js, add the below code in componentDidMount. The below code will launch a chat widget on your website with the integrated Dialogflow bot. Make sure to replace <YOUR_APP_ID> with your Kommunicate application ID.

You can get this code in the install section of Kommunicate as well.


    (function(d, m){
        var kommunicateSettings = 
            {"appId":"kommunicate-support","popupWidget":true,"automaticChatOpenOnNavigation":true};
        var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
        s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
        var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
        window.kommunicate = m; m._globals = kommunicateSettings;
    })(document, window.kommunicate || {});

Here’s a screenshot of my code editor for the same:

code editor

Step 7: Import KommunicateChat component in App.js

Import the KommunicateChat component in your App.js file. Here’s the screenshot of my code editor:

KommunicateChat element in App.js

Step 8: Start your app locally

Use the following command to start your newly created website with the installed Dialogflow bot.

    npm start

Voila! How simple was that? In these few simple steps, you could integrate Dialogflow bot in React JS websites. This is how the chat widget looks on a website:

Wed demo: integrate dialogflow bot in reactjs

Here is the quick video

Wrapping Up

Congratulations! You’ve successfully unlocked the potential of Dialogflow by seamlessly integrating it into your ReactJS website. Now, your users can enjoy 24/7 support, effortless navigation, and personalized interactions, leading to increased engagement, improved satisfaction, and valuable insights.

It is fairly simple to have a rich text-enabled chat widget with Dialogflow bot in your React JS websites. You can further customize the chat widget to match your website colors and theme.

Suggested Read: How to Add Chatbot in Vue.js Apps

Suggested Read: Integrate Dialogflow Chatbot with Angular JS

Frequently Asked Questions

1. What are the benefits of using Kommunicate instead of direct API integration? 

Kommunicate offers a user-friendly interface, no coding required, a pre-built chat UI, and additional chatbot features like multilingual support and analytics. However, it has paid subscriptions for advanced features and limited customization options.

2. Does my Dialogflow agent need any specific setup for integration? 

Ensure your agent has well-defined intents and responses relevant to your website’s context. Consider using features like context handling and entity recognition for a more sophisticated bot.

3. Can I use Dialogflow with other website frameworks besides ReactJS? 

Yes, Dialogflow can be integrated with various website frameworks and platforms.

4. What are some best practices for optimizing my Dialogflow chatbot? 

a) Keep intents and responses clear, concise, and natural-sounding.
b) Use context handling and entity recognition for more sophisticated interactions.
c) Gather user feedback and continuously refine your chatbot based on their needs.

5. What customization options are available for my bot within Kommunicate? 

You can customize language, name, welcome message, bot appearance, and more.


At Kommunicate, we are envisioning a world-beating customer support solution to empower the new era of customer support. We would love to have you on board to have a first-hand experience of Kommunicate. You can signup here and start delighting your customers right away.

Write A Comment

Close

Devashish Mamgain

I hope you enjoyed reading this blog post.

If you want the Kommunicate team to help you automate your customer support, just book a demo.

Book a Demo

You’ve unlocked 30 days for $0
Kommunicate Offer

Upcoming Webinar: Conversational AI in Fintech with Srinivas Reddy, Co-founder & CTO of TaxBuddy.

X