Install by framework

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

View as Markdown Open in Claude Open in ChatGPT

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 walk you through each platform with copy and paste steps.

Use the development key (orwel_dev_...) while you test and the production API key (orwel_pk_...) in production. See Dev mode.

Frameworks

npm i orwel@latest

.env.local

NEXT_PUBLIC_ORWEL_KEY=orwel_pk_...

app/orwel.tsx

'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

npm i orwel@latest

.env

PUBLIC_ORWEL_KEY=orwel_pk_...

src/routes/+layout.svelte

<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

npm i orwel@latest

.env

PUBLIC_ORWEL_KEY=orwel_pk_...

src/layouts/Base.astro

<script>
  import orwel from 'orwel'
  const apiKey = import.meta.env.PUBLIC_ORWEL_KEY
  if (apiKey) orwel.init({ apiKey })
</script>

Full guide

npm i orwel@latest

.env

VITE_ORWEL_KEY=orwel_pk_...

src/main.tsx

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

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

<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
Shopify	Online Store, Themes, Edit code, `theme.liquid`	orwel.io/install/shopify
WordPress	A header snippet with the WPCode plugin	orwel.io/install/wordpress
Webflow	Site settings, Custom code, Head code	orwel.io/install/webflow
Lovable	Ask the Lovable chat, with the key in Secrets as `VITE_ORWEL_KEY`	orwel.io/install/lovable

Then capture conversions

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

See Conversions for the details, and the AI skill if you prefer a coding agent to do the install for you.