# Embedded / Bridge

# Shopfront Embedded Bridge

The Shopfront embedded bridge is the easiest way to communicate with Shopfront when embedding your application.

## Installing the Shopfront Embedded Bridge

We would suggest using a package manager (such as Yarn) and a bundler (such as Webpack) to manage your JavaScript code.

You can install the Shopfront Embedded Bridge by running the following command in NPM (or the equivalent in your
package manager):

```bash
npm i --save @shopfront/bridge
```

You can then use it within your application by importing it:

```javascript
import { Bridge, Button, Toast } from "@shopfront/bridge";

// You'll need the Vendor's subdomain to initialize the bridge.
// Luckily, the Vendor's subdomain gets passed via a GET parameter on the URL
const url = new URL(window.location.href);

const application = Bridge.createApplication({
    id    : process.env.CLIENT_ID, // Your CLIENT_ID
    vendor: url.searchParams.get('vendor') // The Vendor this application is for
});
```

## Using the Shopfront Embedded Bridge

Once you've installed the Shopfront Embedded Bridge you'll need to register the hooks your application will be using.
This is done by calling the `addEventListener` method on the created application:

```javascript
// Continuing from the previous code
const hookName = "REQUEST_BUTTONS";
const listener = () => {
    const button = new Button("Send to Integration");
    button.addEventListener("click", () => {
        application.send(new Toast("success", "You've clicked the button"));
    });
    
    return [button];
};

application.addEventListener(hookName, listener);
```