Installing the widget on a React app

Installing the Fernand widget in your React application is straightforward. We'll guide you through creating a dedicated component that handles the widget initialization and configuration.

Creating the widget component

First, create a new file called FernandWidget.js in your components directory and add the following code:

import { useEffect } from 'react';

const FernandWidget = ({ appId, config = {} }) => {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.Fernand = function() {
        window.Fernand.q = window.Fernand.q || [];
        window.Fernand.q[arguments[0] === 'set' ? 'unshift' : 'push'](arguments);
      };

      window.Fernand('init', { 
        appId,
        ...config
      });

      const script = document.createElement('script');
      script.src = 'https://messenger.getfernand.com/client.js';
      script.async = true;
      document.body.appendChild(script);

      if (Object.keys(config).length > 0) {
        window.Fernand('set', config);
      }

      return () => {
        document.body.removeChild(script);
        delete window.Fernand;
      };
    }
  }, [appId, config]);

  return null;
};

Using the widget in your app

Once you've created the component, you can import and use it in your application. Here's how to implement it:

  1. Import the FernandWidget component where you want to use it:

    import FernandWidget from './components/FernandWidget';

  2. Add the widget component to your app, typically in your root component or layout

    function App() {
  return (
    {
      <FernandWidget 
      appId="your-app-id"
      config={{
        iconColor: '#ffffff',
        accentColor: '#00a0ff'
      }}
    />
    }
  );
}

Configuration options

You can customize the widget's appearance and behavior through the config prop. Here are some common options. Check our support widget list of settings for a full reference.

  • iconColor
    The color of the widget icon (hex code)

  • accentColor
    The primary color used throughout the widget (hex code)

  • position
    Where the widget appears on the screen ('left' or 'right')

The widget will automatically handle script loading and cleanup when your component unmounts, ensuring optimal performance and resource management in your React application.

Next.js and SSR

If you're using Next.js or another server-side rendering framework, ensure the widget only loads on the client side. The provided code already includes a check for typeof window !== 'undefined' to handle this, but you might need to import the component dynamically:

import dynamic from 'next/dynamic';

const FernandWidget = dynamic(
  () => import('../components/FernandWidget'),
  { ssr: false }
);
Was this helpful?