Integrating Brainfish Widgets with Angular

1. Install the Brainfish Dependency

Install the Brainfish library in your Angular project using npm:

npm install @brainfish-ai/web-widget

2. Create the Search Widget Component

Create a new component for the Brainfish search widget. Run the following Angular CLI command to generate the component:

ng generate component BrainfishSearch

In brainfish-search.component.ts, add the following code:

import { Component, OnInit } from '@angular/core';
import Brainfish from '@brainfish-ai/web-widget';

@Component({
  selector: 'app-brainfish-search',
  templateUrl: './brainfish-search.component.html',
  styleUrls: ['./brainfish-search.component.css']
})
export class BrainfishSearchComponent implements OnInit {
  // Class name for styling
  className = 'custom-class';

  // Initialize the Brainfish search widget when the component initializes
  ngOnInit() {
    Brainfish.Widgets.init({
      widgetKey: 'YOUR_WIDGET_KEY', // Replace with your unique widget key
    });
  }
}

In brainfish-search.component.html, add the following code:

<!-- Custom HTML element for the Brainfish search widget -->
<brainfish-search-widget [ngClass]="className"></brainfish-search-widget>

3. Create the SlideOver Widget Component

Similarly, create a new component for the Brainfish SlideOver widget using Angular CLI:

ng generate component BrainfishSlideOver

In brainfish-slide-over.component.ts, add the following code:

import { Component, OnInit } from '@angular/core';
import Brainfish from '@brainfish-ai/web-widget';

@Component({
  selector: 'app-brainfish-slide-over',
  templateUrl: './brainfish-slide-over.component.html',
  styleUrls: ['./brainfish-slide-over.component.css']
})
export class BrainfishSlideOverComponent implements OnInit {

  // Initialize the Brainfish widget when the component initializes
  ngOnInit() {
    Brainfish.Widgets.init({
      widgetKey: 'YOUR_WIDGET_KEY', // Replace with your unique widget key
    });
  }

  // Function to open the Brainfish help widget
  openHelpWidget() {
    Brainfish.Widgets.open();
  }
}

Notes

• widgetKey: Replace 'YOUR_WIDGET_KEY' with your actual widget key provided by Brainfish.
• Styling: Use the class attribute or Angular's ngClass directive to apply custom styles.