Integrations
React Integration
Overview
Integrate CONSETO into React applications using hooks and context. Works with Next.js, Vite, Create React App, and other React frameworks.
Difficulty: Medium
Requires basic React knowledge. Works with any React-based framework.
Method 1: Script Tag (Recommended)
Next.js App Router
Create a client component for CONSETO initialization:
tsx
// components/conseto-init.tsx
'use client'
import Script from 'next/script'
export function ConsetoInit() {
return (
<Script
src="https://www.conseto.io/dist/conseto.min.js"
strategy="afterInteractive"
onLoad={() => {
if (typeof window !== 'undefined' && window.Conseto) {
window.Conseto.init({
clientId: process.env.NEXT_PUBLIC_CONSETO_CLIENT_ID,
language: 'sk',
theme: 'auto'
}).then(conseto => {
window.conseto = conseto;
});
}
}}
/>
)
}Add to your layout:
tsx
// app/layout.tsx
import { ConsetoInit } from '@/components/conseto-init'
export default function RootLayout({ children }) {
return (
<html lang="sk">
<body>
{children}
<ConsetoInit />
</body>
</html>
)
}Method 2: React Hook
Create a custom hook for CONSETO:
tsx
// hooks/useConseto.ts
import { useEffect, useState } from 'react'
export function useConseto(config) {
const [conseto, setConseto] = useState(null)
const [isReady, setIsReady] = useState(false)
useEffect(() => {
const script = document.createElement('script')
script.src = 'https://www.conseto.io/dist/conseto.min.js'
script.async = true
script.onload = async () => {
const instance = await window.Conseto.init(config)
setConseto(instance)
setIsReady(true)
window.conseto = instance
}
document.head.appendChild(script)
return () => document.head.removeChild(script)
}, [])
const track = (event, data) => conseto?.track(event, data)
const trackConversion = (type, data) => conseto?.trackConversion(type, data)
return { conseto, isReady, track, trackConversion }
}