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.
Script tag
The simplest way to add Toffee. Drop this before </body>:
<script
src="https://cdn.toffee.at/sdk.js"
data-api-key="YOUR_API_KEY"
></script>
The SDK auto-initializes and starts detecting immediately.
npm
Then initialize in your application code:
import { init } from '@toffee/sdk'
const toffee = init({
apiKey: 'YOUR_API_KEY',
endpoint: 'https://api.toffee.at',
})
React
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 <div>{/* your app */}</div>
}
Next.js
// 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 (
<html>
<body>{children}</body>
</html>
)
}
Vue
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { init } from '@toffee/sdk'
let toffee
onMounted(() => {
toffee = init({
apiKey: 'YOUR_API_KEY',
endpoint: 'https://api.toffee.at',
})
})
onUnmounted(() => {
toffee?.destroy()
})
</script>
Tracking pixel
For environments where JavaScript doesn’t execute (curl, CLI tools, server-side rendering), use the tracking pixel:
<img src="https://api.toffee.at/api/v1/pixel?k=YOUR_API_KEY" width="1" height="1" />
Or request it directly:
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.