> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hotglue.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Connections

> Render the Connections component

## Connections

The `Connections` component is a React component used to render the supported connectors directly within in your application.

### Props:

* **flows**: `boolean`
  * If true, groups the icons by flows.
* **className**: `string` (optional)
  * Overrides the default classes of the connections container.
* **filter**: `object` (optional)
  * Allows for filtering to show specific connectors or flows.
  * **connectors**: `Array<string>` (optional)
    * An array of connector identifiers to filter.
  * **flows**: `Array<string>` (optional)
    * An array of flow identifiers to filter.

<Frame caption="The flows prop determines if the connector components are grouped by flows">
  <div className="flex flex-col gap-y-4">
    <img src="https://mintcdn.com/hotglue/efi-P21q_Uweg2f5/widget-v3/images/ConnectionsNoGroup.png?fit=max&auto=format&n=efi-P21q_Uweg2f5&q=85&s=b00e668737a3880079b966ac0de29907" width="798" height="664" data-path="widget-v3/images/ConnectionsNoGroup.png" />

    <img src="https://mintcdn.com/hotglue/efi-P21q_Uweg2f5/widget-v3/images/ConnectionsByFlow.png?fit=max&auto=format&n=efi-P21q_Uweg2f5&q=85&s=96b0ba01b5492c1ebd4cc263251ed383" width="991" height="449" data-path="widget-v3/images/ConnectionsByFlow.png" />
  </div>
</Frame>

### Example:

```jsx theme={null}
<Connections flows={true} className="my-custom-class" filter={{ connectors: ['salesforce'], flows: ['exampleFlow'] }}/>
```

<Frame caption="The connections component opens directly the widget's connector pages">
  <video src="https://mintcdn.com/hotglue/efi-P21q_Uweg2f5/widget-v3/images/FullConnectionsDemo.mov?fit=max&auto=format&n=efi-P21q_Uweg2f5&q=85&s=178436ec886998a2ded5bc89e9852422" controls autoplay loop muted data-path="widget-v3/images/FullConnectionsDemo.mov" />
</Frame>