Next.js chatbot – Integrace SiteBot24 s React/Next.js aplikací

SiteBot24 v Next.js aplikaci

Next.js nabízí několik způsobů jak integrovat externí skripty. Doporučujeme použít komponentu next/script pro optimální výkon.

Metoda 1: next/script v layout.tsx (Doporučeno)

// app/layout.tsx nebo pages/_app.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="cs">
      <body>
        {children}
        <Script
          src="https://widget.sitebot24.com/widget.js"
          data-token="VÁŠ_TOKEN_ZDE"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Metoda 2: useEffect v Client Component

'use client'
import { useEffect } from 'react'

export function ChatbotWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://widget.sitebot24.com/widget.js'
    script.setAttribute('data-token', 'VÁŠ_TOKEN_ZDE')
    script.async = true
    document.body.appendChild(script)
    
    return () => {
      document.body.removeChild(script)
    }
  }, [])
  
  return null
}

Strategie načítání

next/script podporuje 3 strategie:

beforeInteractive – před hydratací (nevhodné pro chatbot)
afterInteractive – po hydrataci (výchozí, dobré)
lazyOnload – během idle time (doporučeno pro chatbot)

TypeScript deklarace

Pokud TypeScript stěžuje na neznámé atributy:

// Přidejte do globals.d.ts nebo next-env.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    script: React.DetailedHTMLProps<
      React.ScriptHTMLAttributes<HTMLScriptElement> & {
        'data-token'?: string
      },
      HTMLScriptElement
    >
  }
}

Podmíněné zobrazení

Pokud chcete chatbot zobrazit jen na určitých stránkách:

'use client'
import { usePathname } from 'next/navigation'
import Script from 'next/script'

export function ConditionalChatbot() {
  const pathname = usePathname()
  const showChatbot = !pathname.startsWith('/admin')
  
  if (!showChatbot) return null
  
  return (
    <Script
      src="https://widget.sitebot24.com/widget.js"
      data-token="VÁŠ_TOKEN_ZDE"
      strategy="lazyOnload"
    />
  )
}