Next.js Integration

Add Testinora to your Next.js app the right way.

Option 1 — Script component (recommended)

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <div id="testinora-widget" />
      <Script
        src="https://testinora.com/widget.js"
        data-widget-slug="your-slug"
        strategy="lazyOnload"
      />
    </>
  )
}

Option 2 — useEffect (client component)

'use client'

import { useEffect } from 'react'

export default function TestinoraWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://testinora.com/widget.js'
    script.dataset.widgetSlug = 'your-slug'
    document.body.appendChild(script)

    return () => script.remove()
  }, [])

  return <div id="testinora-widget" />
}

Option 3 — dangerouslySetInnerHTML

export default function Page() {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: `
          <div id="testinora-widget"></div>
          <script
            src="https://testinora.com/widget.js"
            data-widget-slug="your-slug">
          </script>
        `,
      }}
    />
  )
}

App Router vs Pages Router

The widget works in both routers. In App Router projects, prefer a small client component or next/script. In Pages Router projects, the same patterns still work inside regular page components.