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

# Connect Widget

> Embed the provider authorization flow in your application

The Connect widget lets your end users authorize their CRM/PMS accounts directly from your application. It handles OAuth flows, credential entry, and connection management — you just embed it and receive a callback when the connection is ready.

## How It Works

```
Your App                    RouteMCP                   Provider
  │                            │                           │
  │  POST /connect/token       │                           │
  │  (with endUserId)          │                           │
  │ ──────────────────────────>│                           │
  │  { token: "ct_..." }      │                           │
  │ <──────────────────────────│                           │
  │                            │                           │
  │  Open Connect widget       │                           │
  │  with token                │                           │
  │ ─────────────────────>     │                           │
  │                            │   OAuth / Credentials     │
  │                            │ ────────────────────────> │
  │                            │   Access granted          │
  │                            │ <──────────────────────── │
  │  onSuccess callback        │                           │
  │ <─────────────────────     │                           │
  │                            │                           │
  │  GET /contacts?provider=   │                           │
  │ ──────────────────────────>│  Fetch from provider      │
  │  Unified data              │ ────────────────────────> │
  │ <──────────────────────────│ <──────────────────────── │
```

## 1. Create a Connect Token

Generate a short-lived token scoped to an end user:

```bash theme={null}
curl -X POST https://api.routemcp.io/api/v1/connect/token \
  -H "Authorization: Bearer sk_live_your_api_key" \
  -H "Content-Type: application/json" \
  -d '{
    "endUserId": "user-123",
    "endUserDisplayName": "Jane Doe"
  }'
```

Response:

```json theme={null}
{
  "success": true,
  "data": {
    "token": "ct_abc123...",
    "expiresAt": "2026-03-09T15:00:00.000Z"
  }
}
```

| Parameter            | Type   | Required | Description                                       |
| -------------------- | ------ | -------- | ------------------------------------------------- |
| `endUserId`          | string | Yes      | Your internal user ID — used to scope connections |
| `endUserDisplayName` | string | No       | Display name shown in the widget header           |
| `endUserEmail`       | string | No       | Email address of the end user                     |

The token expires in **10 minutes**. Generate a fresh token each time a user needs to connect.

## 2. Embed the Widget

Install the Connect SDK:

```bash theme={null}
npm install @routemcp/connect-sdk
# or
pnpm add @routemcp/connect-sdk
```

### Vanilla JS / TypeScript

```ts theme={null}
import { RouteMCPConnect } from '@routemcp/connect-sdk';

RouteMCPConnect.open({
  token: "ct_abc123...",
  onSuccess: (connection) => {
    console.log("Connected:", connection.provider);
    // Now you can fetch data for this user
  },
  onError: (error) => {
    console.error("Connection failed:", error);
  },
  onClose: () => {
    console.log("Widget closed");
  },
});
```

### React

```tsx theme={null}
import { ConnectButton } from '@routemcp/connect-sdk/react';

function MyConnectButton({ token }: { token: string }) {
  return (
    <ConnectButton
      token={token}
      onSuccess={(connection) => {
        console.log("Connected:", connection.provider);
        // Now you can fetch data for this user
      }}
      onError={(error) => console.error("Connection failed:", error)}
      onClose={() => console.log("Widget closed")}
    />
  );
}
```

### CDN (no bundler)

```html theme={null}
<script src="https://connect.routemcp.com/sdk.js"></script>
<script>
  RouteMCP.connect({
    token: "ct_abc123...",
    onSuccess: (connection) => {
      console.log("Connected:", connection.provider);
    },
    onError: (error) => {
      console.error("Connection failed:", error.message);
    },
    onClose: () => {
      console.log("Widget closed");
    }
  });
</script>
```

## 3. Fetch Data

Once connected, use the unified API to access the user's data:

```bash theme={null}
curl https://api.routemcp.io/api/v1/crm/contact?provider=hubspot \
  -H "Authorization: Bearer sk_live_your_api_key"
```

The API key is scoped to your organization — all connections created by your end users are accessible through the same key.

## Widget Customization

The Connect widget's appearance (colors, fonts, logo, dark mode) is configured from the RouteMCP dashboard under **SDK Config**. No code changes needed — the widget automatically picks up your branding.

## Supported Providers

| Provider      | Slug          | Auth Type |
| ------------- | ------------- | --------- |
| Salesforce    | `salesforce`  | OAuth 2.0 |
| HubSpot       | `hubspot`     | OAuth 2.0 |
| Zoho CRM      | `zoho-crm`    | OAuth 2.0 |
| Pipedrive     | `pipedrive`   | OAuth 2.0 |
| LeadConnector | `gohighlevel` | OAuth 2.0 |
| Monday CRM    | `monday-crm`  | OAuth 2.0 |