@brainfish-ai/search-widget

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: '[e-mail]',
          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: '[e-mail]',
          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>