> ## Documentation Index
> Fetch the complete documentation index at: https://orwel-22af1265.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Install by framework

> Short setup per framework. The step by step guide with your own key lives at orwel.io/install.

Every install is the same three things: add the SDK, put your production API key in an environment variable, and call `orwel.init({ apiKey })` once in the browser. The pages at [orwel.io/install](https://orwel.io/install) walk you through each platform with copy and paste steps.

<Tip>
  Use the development key (`orwel_dev_...`) while you test and the production API key (`orwel_pk_...`) in production. See [Dev mode](/guides/dev-mode).
</Tip>

## Frameworks

<Tabs>
  <Tab title="Next.js">
    ```bash theme={null}
    npm i orwel@latest
    ```

    ```bash .env.local theme={null}
    NEXT_PUBLIC_ORWEL_KEY=orwel_pk_...
    ```

    ```tsx app/orwel.tsx theme={null}
    'use client'
    import { useEffect } from 'react'
    import orwel from 'orwel'

    export function Orwel() {
      useEffect(() => {
        const apiKey = process.env.NEXT_PUBLIC_ORWEL_KEY
        if (apiKey) orwel.init({ apiKey })
      }, [])
      return null
    }
    ```

    Render `<Orwel />` once in `app/layout.tsx`. [Full guide](https://orwel.io/install/nextjs)
  </Tab>

  <Tab title="SvelteKit">
    ```bash theme={null}
    npm i orwel@latest
    ```

    ```bash .env theme={null}
    PUBLIC_ORWEL_KEY=orwel_pk_...
    ```

    ```svelte src/routes/+layout.svelte theme={null}
    <script>
      import { onMount } from 'svelte'
      import { PUBLIC_ORWEL_KEY } from '$env/static/public'
      import orwel from 'orwel'

      onMount(() => {
        if (PUBLIC_ORWEL_KEY) orwel.init({ apiKey: PUBLIC_ORWEL_KEY })
      })
    </script>

    <slot />
    ```

    [Full guide](https://orwel.io/install/sveltekit)
  </Tab>

  <Tab title="Astro">
    ```bash theme={null}
    npm i orwel@latest
    ```

    ```bash .env theme={null}
    PUBLIC_ORWEL_KEY=orwel_pk_...
    ```

    ```astro src/layouts/Base.astro theme={null}
    <script>
      import orwel from 'orwel'
      const apiKey = import.meta.env.PUBLIC_ORWEL_KEY
      if (apiKey) orwel.init({ apiKey })
    </script>
    ```

    [Full guide](https://orwel.io/install/astro)
  </Tab>

  <Tab title="React and Vite">
    ```bash theme={null}
    npm i orwel@latest
    ```

    ```bash .env theme={null}
    VITE_ORWEL_KEY=orwel_pk_...
    ```

    ```ts src/main.tsx theme={null}
    import orwel from 'orwel'

    const apiKey = import.meta.env.VITE_ORWEL_KEY
    if (apiKey) orwel.init({ apiKey })
    ```

    Call it before rendering the app. [Full guide](https://orwel.io/install/vite)
  </Tab>
</Tabs>

## Sites without a build step

For plain HTML and website builders, add the CDN script to the `<head>` of every page. The production API key goes in the script itself; it can only send data, so that is safe.

```html theme={null}
<script src="https://cdn.jsdelivr.net/npm/orwel@1/dist/orwel.umd.js"></script>
<script>
  orwel.init({ apiKey: 'orwel_pk_...' })
</script>
```

| Platform | Where to paste it | Guide |
| - | - | - |
| HTML | Before `</head>` in every page | [orwel.io/install/html](https://orwel.io/install/html) |
| Shopify | Online Store, Themes, Edit code, `theme.liquid` | [orwel.io/install/shopify](https://orwel.io/install/shopify) |
| WordPress | A header snippet with the WPCode plugin | [orwel.io/install/wordpress](https://orwel.io/install/wordpress) |
| Webflow | Site settings, Custom code, Head code | [orwel.io/install/webflow](https://orwel.io/install/webflow) |
| Lovable | Ask the Lovable chat, with the key in Secrets as `VITE_ORWEL_KEY` | [orwel.io/install/lovable](https://orwel.io/install/lovable) |

## Then capture conversions

```ts theme={null}
const { success } = await orwel.conversion('lead', { email, name })
```

See [Conversions](/sdk/conversions) for the details, and the [AI skill](/sdk/ai-skill) if you prefer a coding agent to do the install for you.


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