{"id":3495,"date":"2020-01-28T10:18:38","date_gmt":"2020-01-28T10:18:38","guid":{"rendered":"https:\/\/www.kommunicate.io\/blog\/?p=3495"},"modified":"2024-08-23T10:05:04","modified_gmt":"2024-08-23T10:05:04","slug":"integrate-dialogflow-bot-react-js","status":"publish","type":"post","link":"https:\/\/www.kommunicate.io\/blog\/integrate-dialogflow-bot-react-js\/","title":{"rendered":"How to Integrate Dialogflow Chatbots with ReactJS Websites for Enterprise-level Conversations"},"content":{"rendered":"\n

The digital landscape continues to evolve at breakneck speed, and with the adoption of Conversational AI and chatbots, enterprises can accelerate this evolution. Conversational AI\u2019s demand seems to surge everyday, as more and more enterprises recognize its true value to enhance customer engagement and streamline operations.<\/p>\n\n\n\n

Enterprises are also increasingly adopting conversational AI powered chatbots<\/a> on their websites to enhance website navigation and enhance customer service. When enterprises enable a chatbot on their website<\/a>, they are opening the doors to seamless communication, giving organizations the ability to deliver exceptional user experiences.<\/p>\n\n\n\n

One of the earliest ways to build these chatbots<\/a> was Google\u2019s Dialogflow platform, and, to this day, it remains popular among developers due to its ease of use and scalability.<\/p>\n\n\n\n

We are going to see how you can integrate a dialogflow chatbot into a React JS website<\/a>. But before we dive in, here are a few benefits of integrating a Dialogflow Chatbots with your ReactJS website.<\/p>\n\n\n\n

\"CTA<\/a><\/figure>\n\n\n\n

Benefits of Integrating Dialogflow Chatbot into Reactjs Website<\/h2>\n\n\n\n

1. Natural Language Understanding (NLU)<\/h3>\n\n\n\n

Powered by Google\u2019s NLU technology, Dialogflow enables Google to understand and interpret user queries in natural language. User experience is thus enhanced by providing more accurate and contextually relevant responses.<\/p>\n\n\n\n

2. Modular Development<\/h3>\n\n\n\n

ReactJS\u2019s component based architecture means developers can break down complex UI elements into reusable and modular components. Developers can easily maintain chatbot functionality side by side with other website components.<\/p>\n\n\n\n

3. Google Cloud Integration<\/h3>\n\n\n\n

Dialogflow seamlessly integrates with Google Cloud Platform (GCP) offering additional features such as cloud storage, logging and analytics. Within ReactJS websites, Dialogflow chatbots can take advantage of GCP\u2019s robust infrastructure and services to enhance security<\/a> and reliability.<\/p>\n\n\n\n

Enterprises can thus deliver exceptional conversational experiences to their customers by integrating Dialogflow chatbots <\/a>with their ReactJS websites. How do you build one? We are going to explore that facet in detail in this next section.<\/p>\n\n\n\n

Get ready to boost user engagement, improve customer satisfaction<\/a>, and unlock the full potential of your website! Let’s dive in!<\/p>\n\n\n\n

Prerequisites<\/h2>\n\n\n\n

To get started, <\/p>\n\n\n\n

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

    Choose Your Integration Method: <\/h2>\n\n\n\n

    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: <\/p>\n\n\n\n

    1. Kommunicate Platform<\/h3>\n\n\n\n

    Pros<\/h4>\n\n\n\n

    User-friendly interface, no coding required, pre-built chat UI, additional chatbot features (multilingual support, analytics). <\/p>\n\n\n\n

    Cons<\/h4>\n\n\n\n

    Paid subscriptions for advanced features, and limited customization options. <\/p>\n\n\n\n

    2. Direct API Integration<\/h3>\n\n\n\n

    Pros<\/h4>\n\n\n\n

    Complete control and customization, flexible for complex applications, cost-effective. <\/p>\n\n\n\n

    Cons<\/h4>\n\n\n\n

    Requires coding knowledge, steeper learning curve, needs backend server setup. <\/p>\n\n\n\n

    3. Third-Party Libraries<\/strong><\/h3>\n\n\n\n

    Pros<\/h4>\n\n\n\n

    Faster development with pre-built components, community support, and various features depending on the library. <\/p>\n\n\n\n

    Cons<\/h4>\n\n\n\n

    Potential bugs or limitations of libraries, dependence on third-party updates, might not cover all your needs.<\/p>\n\n\n\n

    \"CTA<\/a><\/figure>\n\n\n\n

    Steps to Integrate Dialogflow Bot with React JS Websites<\/h2>\n\n\n\n

    I am going to explain how I connected Dialogflow and React JS with the help of Kommunicate. <\/p>\n\n\n\n

    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 <\/em>Github<\/em><\/a>. <\/em><\/p>\n\n\n\n

    \ud83d\ude80  Suggested Read: <\/strong> How to add Chatbot to Express Js<\/a><\/p>\n\n\n\n

    Step 1: Create Your Dialogflow Bot<\/h3>\n\n\n\n

    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<\/a> available to help you get started with your Dialogflow bot. To go further, you can create your own Intents & Entities<\/a>.<\/p>\n\n\n\n

    Step 2: Integrate Dialogflow Chatbot with Kommunicate<\/h3>\n\n\n\n

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

    \"Integrate
    Integrate Dialogflow chatbot with Kommunicate<\/figcaption><\/figure>\n\n\n\n

    Now, navigate to your Dialogflow console and download the service account key file. Here are the steps to locate the file:<\/p>\n\n\n\n

      \n
    1. Open Dialogflow agent<\/strong> settings (gear icon on the left panel)<\/li>\n\n\n\n
    2. Click on the Google Cloud link which is mentioned in the Google Project bar<\/li>\n\n\n\n
    3. In the Google, cloud page navigate to the Credentials section <\/strong>by clicking on API\u2019s & services<\/strong><\/li>\n\n\n\n
    4. Under the Credentials section<\/strong> find the service account and click on edit for Dialogflow integrations<\/strong><\/li>\n\n\n\n
    5. At the bottom of the screen click on ADD key button and create a key option, JSON key<\/strong> will be downloaded<\/li>\n\n\n\n
    6. Now upload the Key file<\/strong>.<\/li>\n<\/ol>\n\n\n\n
      \"Steps
      Steps showing how to integrate Dialogflow chatbot with Kommunicate<\/figcaption><\/figure>\n\n\n\n

      Step 3: Integrate Dialogflow CX into Kommunicate<\/h3>\n\n\n\n

      To integrate Dialogflow CX<\/strong> into Kommunicate follow the same instructions to download the JSON key and mention the Agent ID<\/strong> in the kommunicate dashboard<\/p>\n\n\n\n

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

      \"Integrate
      Dashboard of Dialogflow CX Console<\/figcaption><\/figure>\n\n\n\n

      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.<\/p>\n\n\n\n

      \"Kommunicate's
      Integrating a Bot from Dialigflow<\/figcaption><\/figure>\n\n\n\n

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

      \"Integrating
      Automatic bot to Human Handoff<\/figcaption><\/figure>\n\n\n\n

      Complete the setup and then you can check and test your newly created bot in two places:<\/p>\n\n\n\n

        \n
      1. Dashboard \u2192Bot Integration \u2192 Manage Bots<\/strong>: You can check all your integrated bots here<\/li>\n\n\n\n
      2. Dashboard \u2192 Bot Integration:<\/strong> 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)<\/li>\n<\/ol>\n\n\n\n
        \"Successfully
        Successfully Integrating the Dialogflow bot with Kommunicate<\/figcaption><\/figure>\n\n\n\n

        Step 4: Create a React app<\/h3>\n\n\n\n

        Create a new React app (my-app) by using the command:<\/p>\n\n\n\n

        npx create-react-app my-app<\/pre>\n\n\n\n
        Step 5: Now, Navigate to the My-App Folder<\/h3>\n\n\n\n
        cd my-app<\/pre>\n\n\n\n
        Step 6: Create New File chat.js inside src Folder<\/h3>\n\n\n\n
        Once you create the chat.js, add the below code in componentDidMount. <\/strong>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<\/a>.<\/p>\n\n\n\n
        You can get this code in the install section of Kommunicate<\/a> as well. <\/p>\n\n\n\n
        \n    (function(d, m){\n        var kommunicateSettings = \n            {\"appId\":\"kommunicate-support\",\"popupWidget\":true,\"automaticChatOpenOnNavigation\":true};\n        var s = document.createElement(\"script\"); s.type = \"text\/javascript\"; s.async = true;\n        s.src = \"https:\/\/widget.kommunicate.io\/v2\/kommunicate.app\";\n        var h = document.getElementsByTagName(\"head\")[0]; h.appendChild(s);\n        window.kommunicate = m; m._globals = kommunicateSettings;\n    })(document, window.kommunicate || {});\n<\/code><\/pre>\n\n\n\n
        Here’s a screenshot of my code editor for the same:<\/p>\n\n\n\n
        \"Code<\/figure>\n\n\n\n
        Step 7: Import Kommunicate Chat Component in App.js<\/h3>\n\n\n\n
        Import the Kommunicate Chat component in your App.js file. Here’s the screenshot of my code editor:<\/p>\n\n\n\n
        \"Screenshot<\/figure>\n\n\n\n
        Step 8: Start Your App Locally<\/h3>\n\n\n\n
        Use the following command to start your newly created website with the installed Dialogflow bot. <\/p>\n\n\n\n
            npm start<\/pre>\n\n\n\n
        Voila! How simple was that? In these few simple steps, you could integrate Dialogflow bot with your React JS websites. This is how the chat widget looks on a website:<\/p>\n\n\n
        \n
        \"Screenshot
        This is how the chat widget looks on a website<\/figcaption><\/figure>\n<\/div>\n\n\n
        Here Is the Quick Video<\/strong><\/h2>\n\n\n\n
        \n