---
title: "Integrating Brainfish Widgets with Salesforce Lightning Web Components (LWC)"
description: "1. Create the Search Widget Component"
canonical_url: "https://help.brainfi.sh/articles/integrating-brainfish-widgets-with-salesforce-lightning-web-components-lwc-KY4yuFtfgU"
md_url: "https://help.brainfi.sh/articles/integrating-brainfish-widgets-with-salesforce-lightning-web-components-lwc-KY4yuFtfgU.md"
---
# 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:

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

**Edit the Component Files:**

* `brainfishSearch.html`

```markup
<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`

```javascript
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.