Implementing Freshworks Chatbot in a React Application

Frontend ReactJS
1

Chatbots are becoming an essential tool for businesses, providing real-time customer support and improving user experience. Freshworks Chatbot is a powerful solution that allows seamless integration into web applications. In this post, we’ll explore how to implement Freshworks Chatbot in a React application.

What is Freshworks Chatbot?

Freshworks Chatbot, also known as Freshchat, is a customer messaging software that enables businesses to engage with their users through automated and live chat support. It provides features such as AI-powered bots, real-time chat, and integration with other Freshworks products.

Steps to Integrate Freshworks Chatbot in a React App

Step 1: Create a Freshchat Account

To begin, sign up on Freshchat and create a new chatbot. Once you’ve set it up, navigate to Admin Settings > Web Chat to get your widget installation script.

Step 2: Add the Freshchat Script to Your React App

To integrate Freshchat into your React app, dynamically load the script using useEffect . Create a new component FreshchatWidget.jsx :

import { useEffect } from 'react';

const FreshchatWidget = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = '//in.fw-cdn.com/32291142/1234678.js'; // Replace with your Freshchat script URL
        script.setAttribute('chat', 'true');
        script.async = true;
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, []);

    return null;
};

export default FreshchatWidget;

Step 3: Include Freshchat Component in Your App

Now, import and use the FreshchatWidget component inside your main App.js or layout file:

import React from 'react';
import FreshchatWidget from './FreshchatWidget';

function App() {
    return (
        <div>
            <h1>Welcome to My React App</h1>
            <FreshchatWidget />
        </div>
    );
}

export default App;

Step 4: Customizing Freshchat Appearance and Behavior

You can further customize Freshchat by updating its configuration. Add the following inside useEffect :

window.fcWidget.on("widget:loaded", function() {
    window.fcWidget.user.setFirstName("John");
    window.fcWidget.user.setLastName("Doe");
    window.fcWidget.user.setEmail("john.doe@example.com");
});

This allows you to personalize the chat experience based on logged-in users.

Conclusion

Integrating Freshworks Chatbot into a React application is straightforward. With just a few steps, you can enhance your customer support by enabling real-time chat. Try experimenting with different Freshchat APIs to customize it further according to your needs.

Do you have questions or insights on Freshchat? Feel free to drop them in the comments!

7 Likes