Integrating Brainfish Widgets with React

1. Install the Brainfish Dependency

Install the Brainfish library in your React project using the following command:

npm install @brainfish-ai/web-widget

2. Create the Search Widget Component

Create a file named BrainfishSearch.js and add the following code:

import Brainfish from '@brainfish-ai/web-widget';
import React from 'react';

// TypeScript declaration for JSX intrinsic elements (allows use of custom HTML elements)
declare global {
  namespace JSX {
    interface IntrinsicElements {
      "brainfish-search-widget": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      > & { class?: string };
    }
  }
}

function BrainfishSearch({ widgetKey }) {
  // Initialize the Brainfish search widget when the component is mounted
  React.useEffect(() => {
    Brainfish.Widgets.init({
      widgetKey: widgetKey, // Your unique widget key
    });
  }, [widgetKey]);

  return (
    <brainfish-search-widget class="custom-class" />
  );
}

export default BrainfishSearch;

Notes

• widgetKey: Replace 'YOUR_WIDGET_KEY' with your actual widget key provided by Brainfish.
• Styling: Use the class attribute to apply custom styles.