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

# Quickstart

> Get started with the CardSwitcher integration to provision cards to merchant accounts.

## Introduction

Integrating Knot is quite simple. You'll need a basic client-side and server-side integration: your backend creates a session, your client invokes the SDK, and once the user authenticates, your backend listens for the webhook and switches the card.

## Set Up

<Steps>
  <Step title="Access your customer dashboard" icon="table-columns" titleSize="h4">
    Ensure you have access to your [Customer Dashboard](https://dashboard.knotapi.com) and retrieve your `client_id` and `secret`, which you will use as the basic auth username and password for your API key respectively. Note that your `client_id` and `secret` vary between the `development` and `production` environments.
  </Step>

  <Step title="Install the SDK" icon="mobile" titleSize="h4">
    Install and import an SDK for your platform: [iOS](/sdk/ios), [Android](/sdk/android), [React Native](/sdk/react-native), [Flutter](/sdk/flutter), or [Web](/sdk/web).
  </Step>

  <Step title="Subscribe to webhooks" icon="webhook" titleSize="h4">
    Register a webhook endpoint in the [Customer Dashboard](https://dashboard.knotapi.com/developers/webhooks) and subscribe to the [webhook events](/webhooks) your backend needs to be notified of when to send the card details to Knot and further card switching lifecycle events.
  </Step>
</Steps>

## Start the Flow

<Steps>
  <Step title="Call the API to create a session" icon="code" titleSize="h4">
    With your `client_id` and `secret` for the `development` environment, call [Create Session](/api-reference/sessions/create-session) with `type: card_switcher` to create a session used when invoking the SDK.

    <Tip>
      You can send the user's `email` and `phone_number` when creating the session to automatically detect their online merchant accounts and personalize the experience in the SDK. [See more here.](/card-switcher/personalization#auto-detection-via-email-&-phone)
    </Tip>
  </Step>

  <Step title="Initialize the SDK and handle callbacks" icon="play" titleSize="h4">
    Initialize the SDK with the `session_id` retrieved from [Create Session](/api-reference/sessions/create-session). The SDK is where users will interact with the Knot UI to authenticate to various merchants. All login flows, including step-up authentication, are handled with the SDK. Users will see real-time feedback as they progress through authenticating with a merchant.

    Wire up `onSuccess`, `onError`, `onExit`, and `onEvent` to react to client-side events as the user moves through the flow. See further details on callback events for [iOS](/sdk/ios#events), [Android](/sdk/android#events), [React Native](/sdk/react-native#events), [Flutter](/sdk/flutter#events), and [Web](/sdk/web).

    **Tag your entry points.** To provide better visibility into conversion across different entry points, the Knot SDK supports an `entryPoint` parameter when invoking the SDK. This value is returned in the down-funnel [`AUTHENTICATED`](/link/webhook-events/authenticated) webhook event, allowing you to measure conversion by entry point in your analytics tool of choice.

    Pass a distinct `entryPoint` value for each entry point location where the Knot SDK is invoked in your app. Common examples: `onboarding`, `home`, `push-notif-X`, `in-app-lifecycle-card-X`.

    <Tip>
      Tagging entry points is strongly recommended to future-proof visibility into your implementation and allow for downstream conversion optimizations.
    </Tip>
  </Step>

  <Step title="Switch a card" icon="credit-card" titleSize="h4">
    Send card information to [Switch Card](/api-reference/products/card-switcher/switch-card) or [Switch Card (JWE)](/api-reference/products/card-switcher/switch-card-jwe) within 15 seconds of receiving the [`AUTHENTICATED`](/link/webhook-events/authenticated) webhook when `send_card: true`. This event is fired after a user authenticates to a merchant account. You can read more about sending card data to Knot [here](/card-switcher/sending-card-data).

    <Tip>
      In the development environment, you can bypass the client-side SDK entirely to test this flow. Use the [Link Account](/api-reference/development/link-account) endpoint with `card_switcher: true` to simulate a user authentication and fire the `AUTHENTICATED` webhook. See the [testing guide](/card-switcher/testing) for more detailed steps & instructions.
    </Tip>
  </Step>
</Steps>

## Testing

Validate your integration end-to-end in the `development` environment with the [testing guide](/card-switcher/testing).

## What's Next

<CardGroup cols={2}>
  <Card title="Personalization" icon="user-pen" href="/card-switcher/personalization">
    Auto-detect a user's online merchant accounts  for a personalized card switching  experience.
  </Card>

  <Card title="Subscription data" icon="rotate" href="/subscription-manager/quickstart">
    Receive subscription details back when a card is provisioned to a merchant account.
  </Card>

  <Card title="Detected accounts" icon="arrows-rotate" href="/detect/quickstart">
    Sync detected merchant accounts to power lifecycle and re-engagement campaigns.
  </Card>

  <Card title="Transaction data" icon="cart-shopping" href="/transaction-link/quickstart">
    Retrieve users' SKU-level transaction history from their connected merchant accounts.
  </Card>
</CardGroup>