​
Description

Embeddable React component that allows users to connect and manage their connected integrations.

The Connections React component is an inline version of the hotglue widget. Rather than including the widget as a modal (dialog) in your web-app, the Connections component allows for a more native experience. See an example below:

Connections component preview

​
Usage

First you must include the HotglueConfig provider as a higher order component in your React app. For example, in index.js:

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import HotglueConfig from '@hotglue/widget';

ReactDOM.render(
  <HotglueConfig
    config={{
      apiKey: 'your-public-environment-api-key',
      envId: 'your-env-id'
    }}
  >
    <App />
  </HotglueConfig>,
  document.getElementById('root')
);

Then you can use the Connections component, as shown below:

App.js

import React from 'react'

import { Connections } from '@hotglue/widget';

const App = (props) => {
  return (
    <div>
      <Connections tenant="test-user" />
    </div>
  );
};

export default App;

​
Properties

NameTypeRequiredDescription
tenantstringtrueID of current user of your application.
filterFlowfunction(flowId) => booleanfalseFunction to filter flows. By default renders all flows. false to hide, true to show.
filterEntityfunction(flowId, entityId, isTarget) => booleanfalseFunction to filter entities within flows (sources and targets). By default renders all entities. false to hide, true to show.
hideFlowsbooleanfalseIf true, will hide the flow container and only render the integrations.
hideBackButtonsbooleanfalseIf true, will hide the back buttons on the connection page.
multipleSourcesbooleanfalseIf true, will allow tenants to link multiple sources to the same flow.
localizationobjectfalseA localization object

​
Styling

The Connections component has defined CSS classes that can be used to override the component’s styling to more closely match your own UI/UX.

​
Flow Container

Each flow is rendered as a section within the Connections component. The classes are shown in the graphic below:

hotglue - Connections Flow Container classes

The classes are also defined in the table below:

Class NameDescription
hg-flows-containerContainer of the entire flow section
hg-flow-titleTitle of the flow
hg-flow-subtitleSubtitle of the flow (description)
hg-connectorsContainer for the connectors section of the flow

​

Connector Card

Each connector (both sources and targets) are rendered as a card within the Flow Container. The classes are shown in the graphic below:

hotglue - Connections Connector Card classes

The classes are also defined in the table below:

Class NameDescription
hg-connector-cardCard containing the connector
hg-connector-card-linkedConnector card for a linked integration
hg-connector-nameConnector name
hg-connector-logoConnector logo
hg-connector-settingsConnector settings gear
hg-connector-linkedConnector linked label

​

Example

Included below is a stylesheet to give the Connections component a dark theme.

CSS
.hg-flows-container {
    background-color: #120c23;
    color: #fff;
    padding: 24px;
}

.hg-flows-container .hg-flow-title {
    font-size: 16px;
    color: #ddd;
}

.hg-flows-container .hg-flow-subtitle {
    font-size: 14px;
    font-weight: 300;
    color: #aaa;
}

.hg-flows-container .hg-connector-card {
    background: #2a233d;
    border: none;
    color: #fff;
}

.hg-connector-card:hover {
    cursor: pointer;
    box-shadow: 0px 4px 0px rgb(93 57 222 / 65%)
}

.hg-connector-card .hg-connector-name {
    font-size: 14px;
}

.hg-connector-card .hg-connector-logo {
    border-radius: 50%;
    background-color: #fff;
}

.hg-connector-card .hg-connector-linked {
    background: #FA5240;
}

.hg-connector-card .hg-connector-settings {
    color: #fff;
    border: 1px solid #777;
}

The result looks like below:

Sample styling of Connections component

HotglueConfigAllow multiple sources