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

# ConnectKit Tutorial

> Create a ConnectKit flow and open the hosted CoinStats connection popup from your app.

![ConnectKit hosted popup example](https://mintcdn.com/dev-c758229b/t8KX4os34x2U4jMV/api-docs/assets/connectkit-popup.png?fit=max\&auto=format\&n=t8KX4os34x2U4jMV\&q=85\&s=01dfabb50e71faf39f767a57bad94a2f)

ConnectKit lets your app send users into a branded CoinStats-hosted popup to connect wallets or exchanges. Your API key stays on CoinStats servers. Your frontend only uses the public ConnectKit ID, redirect URL, and your own `state` value.

## What value this gives

* Add wallet and exchange connection to your product without building exchange credential forms yourself.
* Keep API keys out of browser code. The ConnectKit ID is public; the API key remains server-side.
* Receive a `portfolioId`, `connectionId`, and your original `state` when the connection finishes.
* Control which domains can open ConnectKit with allowed origins and redirect URLs.

## Example values

Use values like these while testing the flow:

| Field | Example value | Where it is used |
| - | - | - |
| Name | `Example App Portfolio` | Internal dashboard name |
| Company name | `Example App` | Displayed inside the hosted popup |
| Allowed origin | `https://app.example.com` | The browser origin allowed to open ConnectKit |
| Redirect URL | `https://app.example.com/coinstats/callback` | Where CoinStats sends the user after connection |
| ConnectKit ID | `pcw_3d349bd92f0c99a219` | Public ID used by your frontend |
| State | `user_12345` | Your user/session reference returned with the result |

## Set up ConnectKit

**1. Open ConnectKit settings**

Go to the [API dashboard](https://openapi.coinstats.app/connect-kits), open **ConnectKit**, and click **Add**.

**2. Add the trusted values**

Fill in the fields that define where ConnectKit can run and how it appears to users:

* **Company logo**: Upload the logo shown in the hosted connection popup.
* **Name**: Add an internal name for this setup, such as `test` or `prod_app`.
* **Company name**: Add the app or brand name users will see, such as `Example App`.
* **Allowed origins**: Add every browser origin allowed to open ConnectKit.
* **Redirect URLs**: Add the exact callback URLs CoinStats can return to after connection, one per environment.
* **Config**: Choose the default mode, appearance, and accent color if you want defaults different from the SDK call.

![Create ConnectKit form screenshot](https://mintcdn.com/dev-c758229b/t8KX4os34x2U4jMV/api-docs/assets/connectkit-create.png?fit=max\&auto=format\&n=t8KX4os34x2U4jMV\&q=85\&s=b966c6a835638f78a2ae3078c1d7f7d0)

**3. Copy the ID**

After saving, copy the ID from the list. This ID is safe to use in browser code.

![ConnectKit list screenshot](https://mintcdn.com/dev-c758229b/t8KX4os34x2U4jMV/api-docs/assets/connectkit-list.png?fit=max\&auto=format\&n=t8KX4os34x2U4jMV\&q=85\&s=ffb34a12984a9f0863bd221d2de628e9)

**4. Open the hosted popup**

Use the npm package or hosted script to open the popup from your app. The popup runs on `connect.coinstats.app`.

## NPM integration

Install the SDK:

```bash theme={null}
npm install @coinstats/connectkit
```

Open the popup from browser code:

```ts theme={null}
import { openCoinStatsConnect } from '@coinstats/connectkit';

openCoinStatsConnect({
  id: 'pcw_3d349bd92f0c99a219',
  redirectUri: 'https://app.example.com/coinstats/callback',
  state: 'user_12345',
  mode: 'both',
  appearance: 'light',
  accentColor: '#F7931A',
  onSuccess(result) {
    console.log('Connected portfolio', result.portfolioId);
  },
  onError(error) {
    console.error(error.message);
  },
  onClose() {
    console.log('User closed the popup');
  },
});
```

## Script tag integration

For plain HTML pages, load the hosted browser bundle:

```html theme={null}
<script src="https://connect.coinstats.app/coinstats-connect.js"></script>
<script>
  window.openCoinStatsConnect({
    id: 'pcw_3d349bd92f0c99a219',
    redirectUri: 'https://app.example.com/coinstats/callback',
    state: 'user_12345',
    mode: 'both',
    appearance: 'light',
    accentColor: '#F7931A',
    onSuccess: function (result) {
      console.log('Connected portfolio', result.portfolioId);
    },
  });
</script>
```

## Handle the result

When the user finishes, match the returned `state` with the user or session that started the flow. Store the returned `portfolioId` or `connectionId` on your side.

Example redirect:

```http theme={null}
GET /coinstats/callback
  ?status=success
  &portfolioId=portfolio_abc123
  &connectionId=binance
  &state=user_12345
```

Example popup callback result:

```json theme={null}
{
  "status": "success",
  "portfolioId": "portfolio_abc123",
  "connectionId": "binance",
  "state": "user_12345"
}
```

## Before going live

* Add every production origin that can open the popup.
* Use HTTPS redirect URLs in production.
* Generate and keep the API key in the CoinStats API dashboard.
* Store the returned portfolio or connection ID with your user.
* Keep API keys server-side. The frontend only needs the ConnectKit ID.

## Need Help?

> **[Support Documentation](https://help.coinstats.app/en/articles/12002063)**
>
> Check our comprehensive help center

> **[Telegram Support](https://t.me/+JPUMD1QAMTNmNGQy)**
>
> Join our API support channel for real-time help

> **[Email Support](mailto:api.support@coinstats.app)**
>
> You can reach us directly at [api.support@coinstats.app](mailto:api.support@coinstats.app)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.