Install Orwel in Lovable

1. 1

   Ask the Lovable chat

   Lovable installs the package and writes the code for you. Paste this message into your project chat.

   Lovable chat

   Install the npm package orwel@latest. In src/main.tsx import { orwel } from 'orwel' and call orwel.init({ apiKey: 'orwel_pk_TU_KEY' }) once, before rendering the app. The key is public. Then, on submit of every contact form call orwel.identify({ email, name }) and await orwel.conversion('contact_form') before showing the success message.

2. 2

   Add your production API key

   The key already goes inside the message of step 1. It is public, not a secret. Signed out you see a placeholder. Sign in and your real key shows up here.

   production API key

   orwel_pk_TU_KEY

3. 3

   Check the init

   Lovable should leave something like this in src/main.tsx. If not, ask it to fix it.

   src/main.tsx

   import { orwel } from 'orwel'
   
   orwel.init({ apiKey: 'orwel_pk_TU_KEY' })

4. 4

   Capture your leads

   On submit of every form that captures a contact: identify the person and await the conversion before redirecting. If r.success is false, r.reason tells you why.

   contact form

   import { orwel } from 'orwel'
   
   async function onSubmit(data) {
     orwel.identify({ email: data.email, name: data.name })
     const r = await orwel.conversion('contact_form')
     if (!r.success) console.warn('Orwel:', r.reason)
   }

5. 5

   Verify it live

   Use the dev key instead of the production one while you test. Those events are flagged as test and never count in your reports.

   Open your site with the dev key and watch every event arrive in Dev mode Open Dev mode