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):

npm i --save @shopfront/bridge

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

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:

// 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);