Skip to main content

Getting started with Extension Bridge Library

You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

Embed your extension in the Fynd Platform​

First, create a development account and an extension.

  1. From your Fynd Partner dashboard, click Extension.
  2. Click the name of your extension.
  3. From the extension dashboard screen, click Test your Extension.
  4. Select the development account on which you want to test.
  5. In the Embed your extension in Fynd Platform admin section, click Accept.

After you've accepted embedding for an extension, Fynd Platform attempts to load your extension inside an iframe in the Fynd Platform admin.

HTTPS, SSL certificates, and mixed content restrictions​

The Fynd Platform uses HTTPS for all pages. Embedded applications also need to use HTTPS. Failure to use SSL when running an embedded app will cause errors in web browsers, due to mixed content restrictions.

tip

To simplify local development, you can use tunneling software (such as ngrok, localtunnel) to create an SSL tunnel to your localhost server.

Set up Extension Bridge Library in your extension​

Extension Bridge Library is available as a JavaScript module on Github. To install it in your app (to use with bundlers or build systems like webpack), you can use npm or yarn:

  • npm
  • yarn
npm install -- save git+https://github.com/gofynd/fdk-extension-bridge-javascript.git

Click here to read more.

Initialize Extension Bridge Library in your extension​

Once you’ve added Extension Bridge Library to your extension, you need to initialize it by passing in your API key.

import { components } from "@gofynd/fdk-extension-bridge-javascript";

let ext = new Extension({apiKey: "12345667890"});

Set up the Button in ToolBar​

On any page of your extension, if you need to include Button in ToolBar you need to follow some steps.

import { components } from '@gofynd/fdk-extension-bridge-javascript';

let btn = new components.Button(ext, {
    label: "Save"
});

let unsubcribe_handler = btn.subscribe(components.Button.Actions.CLICK, (event) => {
    // your code
});
btn.dispatch();
`

Set up the Toggle Button in ToolBar​

On any page of your extension, if you need to include Toogle Button in ToolBar you need to follow the some steps

import { components } from '@gofynd/fdk-extension-bridge-javascript';

let toggle = new components.ToggleButton(ext, {
    activeLabel: "Active",
    inactiveLabel: "Inactive",
});
let toggle_unsubcribe_handler = toggle.subscribe(components.ToggleButton.Actions.CHANGE, (event) => {
        // your code
});
toggle.dispatch({value: true});
`

Set up the Context Menu Item in ToolBar​

On any page of your extension, if you need to include Context Menu Item in ToolBar you need to follow some steps.

import { components } from '@gofynd/fdk-extension-bridge-javascript';

let context = new components.ContextMenuItem(ext, {
    label: "Details",
});
let toggle_unsubcribe_handler = toggle.subscribe(components.ContextMenuItem.Actions.CLICK, (event) => {
        // your code
});
context.dispatch();
`

Set up the Breadcrumb in ToolBar​

On any page of your extension, if you need to include Breadcrumb in ToolBar you need to follow the steps.

import { components } from '@gofynd/fdk-extension-bridge-javascript';

let breadCrumbs = new components.Breadcrumb(EXT, {
    displayText: "Export Data",
});
breadCrumbs.dispatch();
`

Set up the Tags in ToolBar​

A tag is useful to provide an indicative badge to help the user understand additional information about the extension.

import { components } from '@gofynd/fdk-extension-bridge-javascript';

let tag1 = new components.Tag(EXT, {
    tagState: "info",
    fill: false,
    text: "Public"
});
tag1.dispatch();

let tag2 = new components.Tag(EXT, {
    tagState: "error",
    fill: true,
    text: "Error"
});
tag2.dispatch();

For resetting extension bridge​

ext.destroy()