@brainfish-ai/widgets-initiator

Brainfish In-App Widget

This package provides a simple way to integrate a Brainfish in-app widget in your website or web application. It supports the standard style, and slide-in popup.

Installation

npm install @branfish-ai/web-widget

Directly in your HTML

<script type="module">
    import Brainfish from "https://cdn.jsdelivr.net/npm/@brainfish-ai/web-widget@latest/dist/web.js"
    Brainfish.Widgets.init({ widgetKey: "your-key" });
</script>


<button class="brainfish-trigger-button" onClick="Brainfish.HelpWidget.open('brainfish-trigger-button')">Help</button>

<!-- The widget will emit events when it opens and closes. You can listen to these events by adding the following code to your website: -->

<script>
    // set up the abort controller
    const controller = new AbortController();
    // get the signal
    const { signal } = controller;

    // For close event: (onBrainfishHelpWidgetClosed)
    window.addEventListener('onBrainfishHelpWidgetClosed', yourClosedHandlerFunction, { signal });

    // For opened event: (onBrainfishHelpWidgetOpened)
    window.addEventListener('onBrainfishHelpWidgetOpened', yourOpenedHandlerFunction, { signal });
</script>

<script>
    // abort the event listeners when the widget is no longer needed
    controller.abort();
</script>

Build

Run the following command to build the widget:

yarn build:web-widget

Testing locally

To test the widget locally, you can use the following command:

Start the local server

cd packages/web-widget
npx serve ./ -p 8000 -C

Fire up the test page

You can test the widget locally by opening the test page in your browser. You can also pass in the env parameter to test the widget in different environments. (local, staging, prod).

Note that they all point to the same web widget script run from your local server. (not the CDN). This provides a way to test the widget in different environments without having to deploy to the CDN.

open http://localhost:8000/test-pages/index.html?env=local

If you want to test the widget with the React app (react-search-widget), you can start the React app locally: (this will run on port 3006)

cd packages/react-search-widget
yarn dev