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.
npm install @branfish-ai/search-widgetThe 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>| 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. |
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.
<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>