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

# Quickstart

> Connect your website with one Bily installation path, then verify your first event.

Connect your website with one installation path. Select the intended store, then open **Bily > Settings > Apps > More settings > Install tracking**. Choose your site's technology and copy the complete script or SDK snippet, including every query parameter and encoded character.

<Steps>
  <Step title="Install Bily once">
    Use the raw script for plain HTML. Use `@bilyai/js` for JavaScript applications, React, and Next.js.

    <Tabs>
      <Tab title="Plain HTML">
        Add the exact script once inside the global `<head>`.

        ```html index.html theme={null}
        <script
          src="https://tracking.example.com/b.js?shop=store.example.com"
          referrerpolicy="strict-origin-when-cross-origin"
        ></script>
        ```
      </Tab>

      <Tab title="Application SDK">
        Install the Bily package.

        ```bash theme={null}
        npm install @bilyai/js
        ```

        Initialize Bily once in browser code.

        ```typescript analytics.ts theme={null}
        import { init } from "@bilyai/js";

        init({
          scriptUrl: "https://tracking.example.com/b.js?shop=store.example.com",
        });
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Record each page once">
    The browser script records the first `PageView` automatically. Do not call `track("PageView")` during the initial mount.

    If your application changes routes without loading a new document, track each later route after the router commits the change.

    ```typescript analytics.ts theme={null}
    import { track } from "@bilyai/js";

    track("PageView", {
      sourceUrl: window.location.href,
      pageTitle: document.title,
    });
    ```
  </Step>

  <Step title="Send your first event">
    Give your application events stable snake\_case names.

    ```typescript analytics.ts theme={null}
    import { track } from "@bilyai/js";

    track("workspace_created", {
      workspace_id: "workspace_456",
      user_id: "user_123",
    });
    ```
  </Step>

  <Step title="Confirm Bily is ready">
    The SDK queues calls while Bily loads, so normal tracking does not need to wait. Use `ready()` only for an explicit load check.

    ```typescript verify-bily.ts theme={null}
    import { ready } from "@bilyai/js";

    try {
      await ready();
      console.info("Bily is ready");
    } catch (error) {
      console.error("Bily did not load", error);
    }
    ```

    Complete the [verification checklist](/guides/verification) before you release.
  </Step>
</Steps>

## Continue with your framework

<CardGroup cols={3}>
  <Card title="JavaScript" icon="js" href="/sdk/javascript" />

  <Card title="React" icon="react" href="/sdk/react" />

  <Card title="Next.js" icon="n" href="/sdk/nextjs" />
</CardGroup>
