@brainfish-ai/search-widget

Brainfish Widgets

This is a simple search widget that can be embedded on any website. It is built using SolidJS and Socket.io.

Installation

npm install @branfish-ai/search-widget

Search widget

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',
    theme: {}, // optional
    settings: {}, // optional
  })
</script>

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

Help widget

<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",
    autoFocus: true,
    theme: {}, // optional
    settings: {
      nextBestActions: [ // next best actions
        {
          label: "Contact Support",
          type: "email",
          value: "[e-mail]",
          icon: "https://cdn-icons-png.flaticon.com/128/455/455604.png"
        },
        {
          label: "Submit a Ticket",
          type: "link",
          value: "https://help.brainfi.sh",
          icon: "https://cdn-icons-png.flaticon.com/128/88/88167.png"
        }
      ],
      bodyActionButtons: [ // custom action buttons under the search field
        {
          label: "Brainfish Help Center",
          value: "https://help.brainfi.sh",
          type: "link",
          icon: "Book"
        },
        {
          label: "Book a Demo",
          value: () => {
            alert("Book a Demo");
          },
          type: "function",
          icon: "Calendar"
        }
      ],
      footerActionButtons: [ // custom footer button
        {
          label: "Contact Brainfish Support",
          value: "[e-mail]",
          type: "email"
        }
      ]
    }
  });
</script>

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