1. Create the Search Widget Component

1. Create the Component:

   Run the following command to create a new Lightning Web Component for the Brainfish search widget:

   sfdx force:lightning:component:create --type lwc --componentname brainfishSearch --outputdir force-app/main/default/lwc
   

Edit the Component Files:

• brainfishSearch.html

<template>
    <lightning-card title="Brainfish Search Widget">
        <div class="slds-m-around_medium">
            <!-- Custom HTML element for the Brainfish search widget -->
            <div class="brainfish-search-widget" data-widget-key={widgetKey}></div>
        </div>
    </lightning-card>
</template>

brainfishSearch.js

import { LightningElement, api } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';

// CDN URL for Brainfish library
const BRAINFISH_CDN = 'https://cdn.jsdelivr.net/npm/@brainfish-ai/web-widget@latest/dist/web.js';

export default class BrainfishSearch extends LightningElement {
    @api widgetKey; // Unique widget key for Brainfish

    brainfishLib;

    renderedCallback() {
        if (this.brainfishLib) {
            return;
        }

        // Load Brainfish library from CDN
        loadScript(this, BRAINFISH_CDN)
            .then(() => {
                this.brainfishLib = window.Brainfish; // Ensure Brainfish library is loaded
                this.initializeBrainfish();
            })
            .catch(error => {
                console.log("Error loading Brainfish library", error);
            });
    }

    initializeBrainfish() {
        if (this.brainfishLib) {
            this.brainfishLib.Widgets.init({
                widgetKey: this.widgetKey, // Your unique widget key
            });
        }
    }
}

Notes

• widgetKey: Replace widgetKey with your actual Brainfish widget key provided by Brainfish.
• CDN URL: Ensure the URL https://cdn.jsdelivr.net/npm/@brainfish-ai/web-widget@latest/dist/web.js is correct and corresponds to the Brainfish library version you need.

This guide covers integrating Brainfish widgets into a Salesforce Lightning Web Component (LWC) application using the provided CDN URL.