---
title: "Integrating Brainfish Widgets with Solid.js"
description: "1. Install the Brainfish Dependency"
canonical_url: "https://help.brainfi.sh/articles/integrating-brainfish-widgets-with-solidjs-SsRkvR8HLn"
md_url: "https://help.brainfi.sh/articles/integrating-brainfish-widgets-with-solidjs-SsRkvR8HLn.md"
---
# Integrating Brainfish Widgets with Solid.js

### 1. **Install the Brainfish Dependency**

Install the Brainfish library in your Solid.js project using npm:

```bash
npm install @brainfish-ai/web-widget
```

### 2. **Create the Search Widget Component**

Create a new file named `BrainfishSearch.jsx` and add the following code:

```javascript

import { onCleanup, createEffect } from 'solid-js';
import Brainfish from '@brainfish-ai/web-widget';

function BrainfishSearch(props) {
  const { widgetKey } = props;

  // Initialize the Brainfish search widget when the component mounts
  createEffect(() => {
    Brainfish.Widgets.init({
      widgetKey: widgetKey, // Replace with your unique widget key
    });

    // Cleanup the widget on component unmount
    onCleanup(() => {
      // Add cleanup logic if needed
    });
  });

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

export default BrainfishSearch;
```

### 3. **Create the SlideOver Widget Component**

Create another file named `BrainfishSlideOver.jsx` and add the following code:

```javascript

import { onCleanup, createEffect } from 'solid-js';
import Brainfish from '@brainfish-ai/web-widget';

function BrainfishSlideOver(props) {
  const { widgetKey } = props;

  // Initialize the Brainfish widget when the component mounts
  createEffect(() => {
    Brainfish.Widgets.init({
      widgetKey: widgetKey, // Replace with your unique widget key
    });

    // Cleanup the widget on component unmount
    onCleanup(() => {
      // Add cleanup logic if needed
    });
  });

  // Function to open the Brainfish help widget
  const openHelpWidget = () => {
    Brainfish.HelpWidget.open('brainfish-trigger-button');
  };

  return (
    <>
      {/* Button to trigger the Brainfish help widget */}
      <button class="brainfish-trigger-button" onClick={openHelpWidget}>
        Help
      </button>
    </>
  );
}

export default BrainfishSlideOver;
```

### Notes

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

\