Integrating Brainfish Widgets with Solid.js

1. Install the Brainfish Dependency

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

npm install @brainfish-ai/web-widget

2. Create the Search Widget Component

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

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:

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.

\