Integrating Brainfish Widgets with Vue

1. Install the Brainfish Dependency

Install the Brainfish library in your Vue project using npm:

npm install @brainfish-ai/web-widget

2. Create the Search Widget Component

Create a file named BrainfishSearch.vue and add the following code:

<template>
  <!-- Custom HTML element for the Brainfish search widget -->
  <brainfish-search-widget :class="className"></brainfish-search-widget>
</template>

<script>
import { onMounted } from 'vue';
import Brainfish from '@brainfish-ai/web-widget';

export default {
  setup() {
    // Initialize the Brainfish search widget after the component is mounted
    onMounted(() => {
      Brainfish.Widgets.init({
        widgetKey: 'YOUR_WIDGET_KEY', // Replace with your unique widget key
      });
    });

    // Class name for styling purposes
    const className = 'custom-class';
    return { className };
  },
};
</script>

3. Create the SlideOver Widget Component

Create a file named BrainfishSlideOver.vue and add the following code:

<template>
  <!-- Button to trigger the Brainfish help widget -->
  <button class="brainfish-trigger-button" @click="openHelpWidget">Help</button>
</template>

<script>
import { onMounted } from 'vue';
import Brainfish from '@brainfish-ai/web-widget';

export default {
  setup() {
    // Initialize the Brainfish widget after the component is mounted
    onMounted(() => {
      Brainfish.Widgets.init({
        widgetKey: 'YOUR_WIDGET_KEY', // Replace with your unique widget key
      });
    });
  },
};
</script>

Notes

• widgetKey: Replace 'YOUR_WIDGET_KEY' with your actual widget key provided by Brainfish.
• Styling: Use the :class binding to apply custom styles to the search widget.