Skip to main content

​
Connect Widget

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: 
curl -X POST http://localhost:5001/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: 
{
  "success": true,
  "data": {
    "token": "ct_abc123...",
    "expiresAt": "2026-03-09T15:00:00.000Z"
  }
}
ParameterTypeRequiredDescription
endUserIdstringYesYour internal user ID — used to scope connections
endUserDisplayNamestringNoDisplay name shown in the widget header
endUserEmailstringNoEmail 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: 
npm install @routemcp/connect-sdk
# or
pnpm add @routemcp/connect-sdk

​
Vanilla JS / TypeScript

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

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)

<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: 
curl http://localhost:5001/api/v1/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

ProviderSlugAuth Type
HubSpothubspotOAuth 2.0
Zoho CRMzoho-crmOAuth 2.0
PipedrivepipedriveOAuth 2.0
GoHighLevelgohighlevelOAuth 2.0
Monday CRMmonday-crmOAuth 2.0