@brainfish-ai/search-widget v0.7.1

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/search-widget@0.2.0/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: 'support@brainfi.sh',
          icon: 'EnvelopSimple',
        }
      ],
      bodyActionButtons: [],
      footerActionButtons: [],
      panelTitle: 'Help Center'
    }
  });
</script>

<brainfish-popup-help-widget></brainfish-popup-help-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: 'support@brainfi.sh',
          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>