Marketplace Component

The Fusebit Marketplace React Component enables you to easily make all your Integrations available to users of your application through our beautiful components that integrate directly with Fusebit.

The FusebitMarketplace component will create a tile for each Integration that you pass to it in an automatically generated gallery style page. Each Integration tile in this gallery will check directly with Fusebit to see if the Tenant has already installed the Integration and reflect the state accordingly.

953953

Marketplace Component with 3 Tiles

Installation

To get started, you can install it directly from npm:

npm i @fusebit/react-marketplace

Then, in your app, you can import the component directly :

import { Marketplace as FusebitMarketplace } from "@fusebit/react-marketplace";


const Marketplace = (props: {
  getIntegrations: integrationsList;
  onUninstall: (integrationId: string) => Promise<void>;
  getInstallUrl: (integrationId: string) => Promise<string>;
}) => {
  return (
        <FusebitMarketplace
              getIntegrations={props.getIntegrations}
          onUninstallClick={props.onUninstall}
          getInstallUrl={props.getInstallUrl}
        />
  );
}   

export default Marketplace;

Properties

The Marketplace Component requires three pieces of information to properly render a tile:

  • getIntegrations: What Integrations do you want to display in your marketplace gallery?
  • getInstallUrl: What is the redirect URL for each integration after installation has completed?
  • onUninstallClick: What is the flow for each integration after it has been uninstalled?

Check out this guide for a step-by-step tutorial on how to implement these properties.

📘

Fusebit Integrations Feed

To help with generating assets and descriptions out of box for you, the Marketplace Component relies heavily on a Fusebit provided 'Integrations Feed'.

This, publicly available, JSON file includes a list of all our available integration templates and associated metadata such as their titles, description, icons etc.

Optional Parameters

The marketplace component generates a gallery of Tiles that each represent a unique integration. In addition to the standard out of box layout, there are also a number of customizations that you could perform on the tiles as well.

Broadly speaking, there's three types of customizations you can perform on the tiles:

  • Show/Hide Elements (Image, Title, Subtitle, Description etc.)
  • Customize Elements (Change Labels, Changes Images, etc.)
  • Override Styles (Customize Styles, Layout, etc.)
813813

All the elements that make up a Tile

Show/Hide Elements

Every element above is displayed by default, but you can hide them by passing through a parameter and the Marketplace Component will adjust the layout of every Tile accordingly.

In this example below, everything but the 'Install App' button will be hidden in the Marketplace Tile

import { Marketplace as FusebitMarketplace } from "@fusebit/react-marketplace";

return (
  <FusebitMarketplace
    getIntegrations={props.getIntegrations}
    getInstallUrl={props.getInstallUrl}
    onUninstallClick={props.onUninstall}
    hideTitle={true}
    hideSubtitle={true}
    hideDescription={true}
    hideLearnMore={true}
    hideImages={true}
  />
);

Customize Elements

In addition to display/hide these elements, you can also override the standard labels and set your own. This could be done in two ways:

  • At a Marketplace Level on the common elements
  • At a Tile Level for each integration

In this example below, we are overriding the default text for 'Install / Uninstall' and 'Learn More' for all tiles in the Marketplace.

import { Marketplace as FusebitMarketplace } from "@fusebit/react-marketplace";

return (
  <FusebitMarketplace
    getIntegrations={props.getIntegrations}
    getInstallUrl={props.getInstallUrl}
    onUninstallClick={props.onUninstall}
    installText = 'Configure'
    uninstallText='Remove'
    learnMoreText='More Info'
  />
);

If you want to provide a custom Title, Subtitle & Description for each Integration (or Tile), this is also very simple. You would provide these values in the integrationsList array provided as part of getIntegrations.

In this example below, we are only customizing the Asana integration while the Github integration will pull the defaults for Subtitle and Description.

integrationsList: [
   {
      "integrationId":"asana-integration-372",
      "feedId":"asana",
      "isInstalled":true,
      "title":"Get Asana Tasks",
      "customSubtitle":"Dashboard Enhancement",
      "customDescription":"Connect your Asana to our Dashboard and receive task notifications."
   },
   {
      "integrationId":"githubapp-integration-131",
      "feedId":"githubapp",
      "isInstalled":false,
      "title":"Sync Github Issues"
   }
]

Override Styles

Finally, you can override the entire look & feel of the different elements of the Tile by using the classes property. All you need to do is provide a reference to the css styling that you want to use instead.

855855

All the customizable classes in a Tile

For instance, if you want to update the background of the .bottomContent to be black instead of white, then you would just pass that as a property of the bottomContent class like so:

import { Marketplace as FusebitMarketplace } from "@fusebit/react-marketplace";
import './CustomStyles.css'

const Marketplace = (props: {
  getIntegrations: integrationsList;
  onUninstall: (integrationId: string) => Promise<void>;
  getInstallUrl: (integrationId: string) => Promise<string>;
}) => {
  return (
        <FusebitMarketplace
          getIntegrations={props.getIntegrations}
          onUninstallClick={props.onUninstall}
          getInstallUrl={props.getInstallUrl}
                    classes={{bottomContent: "override-bottom-content"}}
        />
  );
}   

export default Marketplace;
.override-bottom-content {
    background: black;
}

Did this page help you?