Brainfish Widgets

The Brainfish Widgets is a JavaScript library that provides a Help Widget and Search Bar Widget for your website. It allows your users to search for help articles and get answers to their questions without leaving your website. The widget is fully customizable and can be configured to match the look and feel of your website.

It is built using SolidJS and Socket.io.

Installation

npm install @branfish-ai/search-widget

Help widget

The Brainfish.HelpWidget.initPopup() function initializes the Help Widget and takes an options object with various configuration options. Once the widget is initialized, it can be opened by clicking on a button or link on your website. The widget displays a search bar where users can enter their queries, and displays a list of relevant articles based on the query.

To use Brainfish.HelpWidget.initPopup(), you need to import the Brainfish module from the @brainfish-ai/search-widget package. Here's an example:

<script type="module">
  import Brainfish from "https://cdn.jsdelivr.net/npm/@brainfish-ai/[email protected]/dist/web.js";

  Brainfish.HelpWidget.initPopup({
    widgetMode: "slide-over",
    apiKey: "YOUR_WIDGET_ID",
    language: 'en', // the language the search supports
    class: '', // custom css class for your own use
    defaultOpen: false,
    // the rest are optional
    autoFocus: false,
    theme: {
      textBaseColor: '#333333' // text color for the widget
      // fontFamiliy and fontSrc must be present for font customization to work
      fontFamily: 'Martian+Mono',
      fontSrc: 'https://fonts.googleapis.com/css2?family=Martian+Mono&family=Open+Sans:wght@300&display=swap',
    },
    settings: {
      suggestionsTitle: 'Suggested questions:',
      logo: {
        monotone: false,
        smaller: false,
      },
      suggestions: ["What is Brainfish?", "Shall we dance?"],
      hideFeedback: false,
      showDisclaimer: false,
      disclaimer: 'Disclaimer text',
      placeholder: 'Ask a question or type a search term here...',
      limit: 5,
      linkExternalUrl: false,
      regions: ['US', 'AU'], // optional list of regions to search
      searchByCategory: false, // optional boolean to search by category
      categorySelectionTitle: 'Select a category', // optional title for category selection
      answerNotFoundMessage: 'No answer found', // optional message to display when no answer is found
      nextBestActions: [
        {
          label: 'Contact Support',
          type: 'email',
          value: '[email protected]',
          icon: 'EnvelopSimple',
        }
      ],
      bodyActionButtons: [],
      footerActionButtons: [],
      panelTitle: 'Help Center'
    }
  });
</script>

<brainfish-popup-help-widget></brainfish-popup-help-widget>

| Option | Type | Required | Default Value | Description | |------------------------------|----------|----------|------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | apiKey | string | Yes | "" | Your Brainfish API key. | | language | string | Yes | "en" | The language the search supports. | | widgetMode | string | Yes | "slide-over" | The mode of the widget. Can be "slide-over" or "popup". | | autoFocus | boolean | No | false | Whether the search input should be focused automatically. | | class | string | No | "" | A custom CSS class for your own use. | | defaultOpen | boolean | No | false | Whether the widget should be open by default. | | settings.bodyActionButtons | object[] | No | [] | A list of action buttons displayed in the middle of the help widget. Same format as nextBestActions. | | settings.disclaimer | string | No | "" | The text for the disclaimer section. | | settings.footerActionButtons | object[] | No | [] | A list of action buttons displayed at the bottom of the help widget. Same format as nextBestActions. | | settings.hideFeedback | boolean | No | false | Whether to hide the feedback section. | | settings.limit | number | No | 5 | The number of articles to fetch. | | settings.linkExternalUrl | boolean | No | false | Whether to open results in a new window. | | settings.logo.monotone | boolean | No | false | Whether to make the bottom Brainfish logo grayscale. | | settings.logo.smaller | boolean | No | false | Whether to make the Brainfish logo smaller. | | settings.nextBestActions | object[] | No | [] | A list of buttons displayed after the answer is displayed. Each button is an object with label, type, value, and icon properties. The icon property can be a valid Phosphor icon name or a URL to an icon. | | settings.panelTitle | string | No | "Help Center" | The title for the Help Widget panel. | | settings.placeholder | string | No | "Ask a question or type a search term here..." | The placeholder text for the search input. | | settings.showDisclaimer | boolean | No | false | Whether to show the disclaimer section. | | settings.suggestions | string[] | No | [] | A list of suggested queries. | | settings.suggestionsTitle | string | No | "Suggested questions:" | The title for the suggested questions section. | | settings.answerNotFoundMessage | string | No | "No answer found" | The message to display when no answer is found. | | settings.regions | string[] | No | [] | A list of regions to search. | | settings.searchByCategory | boolean | No | false | Whether to search by category. | | settings.categorySelectionTitle | string | No | "Select a category" | The title for the category selection section. | | theme.fontFamily | string | No | "" | The font family for the widget. | | theme.fontSrc | string | No | "" | The font source for the widget. | | theme.textBaseColor | string | No | '#333333' | The text color for the widget. |

Search widget

Brainfish.SearchWidget is a JavaScript library that provides a Search Bar widget for your website. It allows your users to search for articles and get answers to their questions without leaving your website. The widget is fully customizable and can be configured to match the look and feel of your website.

The Brainfish.SearchWidget.initStandard() function initializes the search widget and takes an options object with various configuration options. Once the widget is initialized, it can be opened by clicking on a button or link on your website. The widget displays a search bar where users can enter their queries, and displays a list of relevant articles based on the query.

Directly in your HTML

<script type="module">
  import Brainfish from 'https://cdn.jsdelivr.net/npm/@brainfish-ai/search-widget/dist/web.js'

  Brainfish.SearchWidget.initStandard({
    widgetType: 'Search|Help' // Search for search widget, Help for Help widget
    apiKey: 'YOUR_WIDGET_ID',
    // the rest are optional
    theme: {
      input: '<button>Custom input button</button>' // optional custom input button
      textBaseColor: '#333333' // text color for the widget
      // fontFamiliy and fontSrc must be present for font customization to work
      fontFamily: 'Martian+Mono',
      fontSrc: 'https://fonts.googleapis.com/css2?family=Martian+Mono&family=Open+Sans:wght@300&display=swap',
    },
    settings: {
      suggestionsTitle: 'Suggested questions:',
      logo: {
        monotone: false, // makes the bottom brainfish logo grayscale
        smaller: false, // makes the brainfish logo smaller
      },
      suggestions: ["What is Brainfish?", "Shall we dance?"], // list of suggested queries
      hideFeedback: false,
      showDisclaimer: false,
      disclaimer: 'Disclaimer text',
      placeholder: 'Ask a question or type a search term here...',
      limit: 5, // number of articles to fetch
      linkExternalUrl: false, // opens results in new window when true
      nextBestActions: [ // buttons displayed after answer displayed
        {
          label: 'Contact Support',
          type: 'email',
          value: '[email protected]',
          icon: 'EnvelopSimple', // valid Phosphor icon name - https://github.com/aguilera51284/phosphor-react/blob/master/src/index.jsx or url to icon
        }
      ],
      bodyActionButtons: [ // action buttons displayed in the middle of the help widget
        // same as nextBestActions
      ],
      footerActionButtons: [ // action buttons displayed at the bottom of the help widget
        // same as nextBestActions
      ],
      buttonText: 'Help & Support' // standard version only with custom button
      panelTitle: 'Help Center' // Help Widget panel title
    }
  })
</script>

// put this inside a container that has width and height
<brainfish-search-widget style="width: 100%; height: 600px; "></brainfish-search-widget>