> ## Documentation Index > Fetch the complete documentation index at: https://docs.toffee.at/llms.txt > Use this file to discover all available pages before exploring further. # Installation > Add Toffee to your site via script tag, npm, or tracking pixel. ## Script tag The simplest way to add Toffee. Drop this before ``: ```html theme={null} ``` The SDK auto-initializes and starts detecting immediately. ## npm ```bash theme={null} npm install @toffee/sdk ``` Then initialize in your application code: ```typescript theme={null} import { init } from '@toffee/sdk' const toffee = init({ apiKey: 'YOUR_API_KEY', endpoint: 'https://api.toffee.at', }) ``` ### React ```tsx theme={null} import { useEffect } from 'react' import { init } from '@toffee/sdk' function App() { useEffect(() => { const toffee = init({ apiKey: 'YOUR_API_KEY', endpoint: 'https://api.toffee.at', }) return () => toffee.destroy() }, []) return

{/* your app */}

} ``` ### Next.js ```tsx theme={null} // app/layout.tsx 'use client' import { useEffect } from 'react' import { init } from '@toffee/sdk' export default function RootLayout({ children }: { children: React.ReactNode }) { useEffect(() => { const toffee = init({ apiKey: 'YOUR_API_KEY', endpoint: 'https://api.toffee.at', }) return () => toffee.destroy() }, []) return ( {children} ) } ``` ### Vue ```vue theme={null} ``` ## Tracking pixel For environments where JavaScript doesn't execute (curl, CLI tools, server-side rendering), use the tracking pixel: ```html theme={null} ``` Or request it directly: ```bash theme={null} curl "https://api.toffee.at/api/v1/pixel?k=YOUR_API_KEY&url=https://example.com/page" ``` The pixel returns a 1x1 transparent GIF and records a pageview event with detection based on the request headers.