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

# Quickstart

> Connect Telemetree and start tracking your events!

## Checklist

* Create an account with us at [Telemetree](https://app.telemetree.io/)
* Grab your API Key and project ID from the onboarding page
* Initiate one of our SDKs:
  * [React](#installing-react-sdk)
  * [Python](#installing-python-sdk)
* Send your first event
* Access your dashboard

## Setup your development

Learn how to setup Telemetree with your project and start sending events.

### Installing React SDK

<Tip>
  [Github](https://github.com/Telemetree/react-twa-boilerplate): our React TWA boilerplate to make your life easier!
</Tip>

<AccordionGroup>
  <Accordion title="Install" icon="react">
    [Github](https://github.com/Telemetree/telemetree-react) | [NPM](https://www.npmjs.com/package/@tonsolutions/telemetree-react)
    Install Telemetree React SDK using npm or yarn

    <CodeGroup>
      ```bash npm theme={null}
      npm install @tonsolutions/telemetree-react
      ```

      ```bash yarn theme={null}
      yarn add @tonsolutions/telemetree-react
      ```
    </CodeGroup>

    [**Please consult with the full integration guide for Telegram initialization options.**](https://docs.telemetree.io/sdks/react)
  </Accordion>

  <Accordion title="Initiate" icon="play">
    Use the `TwaAnalyticsProvider` component to wrap your application's root component. This enables analytics tracking throughout your app.

    <CodeGroup>
      ```javascript Initiate Library theme={null}
      import { TwaAnalyticsProvider } from '@tonsolutions/telemetree-react';

      export function App() {
        return (
          <TwaAnalyticsProvider
            projectId='YOUR_PROJECT_ID'
            apiKey='YOUR_API_KEY'
            appName='YOUR_APPLICATION_NAME'
          >
            {/* Rest of your app components */}
          </TwaAnalyticsProvider>
        );
      }
      ```

      ```javascript Optional: Manual Event Tracking theme={null}
      import { useTWAEvent } from '@tonsolutions/telemetree-react';

      const eventBuilder = useTWAEvent();

      const handleButtonClick = () => {
        eventBuilder.track('Button Clicked', {
          label: 'Subscribe Button', // Additional info about the button
          category: 'User Engagement', // Categorize the event
        });
      };

      <button onClick={handleButtonClick}>Subscribe</button>
      ```
    </CodeGroup>
  </Accordion>
</AccordionGroup>

### Installing Python SDK

<AccordionGroup>
  <Accordion title="Install" icon="python">
    [PyPi](https://pypi.org/project/telemetree/)
    Install Telemetree Python SDK using pip

    ```bash pip theme={null}
    pip install telemetree
    ```
  </Accordion>

  <Accordion title="Initiate" icon="play">
    To start tracking events, you need to create an instance of the `Telemetree` class.

    <CodeGroup>
      ```Python Initiate Library theme={null}
      from fastapi import APIRouter, Request
      from telegram import Update
      from telemetree import TelemetreeClient

      router = APIRouter()
      telemetree = TelemetreeClient(
          "your_api_key", "your_project_key"
      )
      ```

      ```Python Connect to Webhook theme={null}
      @router.post("/webhook")
      async def webhook(request: Request):
          """Telegram webhook endpoint."""
          incoming_request_json = await request.json()
          telemetree.track(incoming_request_json)
          de_json_object = Update.de_json(data=await request.json(), bot=application.bot)
          await application.update_queue.put(de_json_object)
      ```
    </CodeGroup>
  </Accordion>
</AccordionGroup>

### Accessing dashboards

<AccordionGroup>
  <Accordion title="Step-by-step guide" icon="file-word">
    <Steps>
      <Step title="Sign up">
        Create an account at [Telemetree](https://telemetree.io) -- it's 100% free!
      </Step>

      <Step title="Verify your email">
        Verify your email and proceed to the dashboard.
      </Step>

      <Step title="Connect your app">
        Before you get access to your dashboard, please, use one of our SDKs to connect your app to Telemetree.
        Download our [SDK](https://telemetree.com/sdk) and integrate it into your project.
      </Step>

      <Step title="Send your first event">
        After our SDK captures at least one event from your app, you will get access to your dashboard.
        *Important*: it may take up to 60 minutes for the event to appear in your dashboard.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

<Card title="Additional resources" icon="telegram" href="extra/links">
  Useful links that will help you in designing and developing a Telegram app.
</Card>