Install Orwel in Next.js

1. 1

   Install the package

   With yarn or pnpm use their equivalent.

   terminal

   npm i orwel@latest

2. 2

   Add your production API key

   Signed out you see a placeholder. Sign in and your real key shows up here.

   .env.local

   NEXT_PUBLIC_ORWEL_KEY=orwel_pk_TU_KEY

3. 3

   Init once on the client

   Render <Orwel /> once inside app/layout.tsx. With the Pages Router, call it from pages/_app.tsx.

   app/orwel.tsx

   'use client'
   
   import { useEffect } from 'react'
   import { orwel } from 'orwel'
   
   export function Orwel() {
     useEffect(() => {
       orwel.init({ apiKey: process.env.NEXT_PUBLIC_ORWEL_KEY! })
     }, [])
     return null
   }

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