Intégration React

Intégrez le widget AskIA dans votre application React ou Next.js.

Intégration Next.js

Pour les applications Next.js, utilisez le composant Script pour des performances optimales :

App Router (Next.js 13+)

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Pages Router (Next.js 12)

pages/_app.tsx

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID"
        strategy="lazyOnload"
      />
    </>
  )
}

Intégration React

Pour les applications React standard, utilisez un hook personnalisé :

Hook Personnalisé

hooks/useAskIAWidget.ts

import { useEffect } from 'react'

function useAskIAWidget(botId: string) {
  useEffect(() => {
    // Check if widget already loaded
    if (window.AskIAWidget) {
      return
    }

    const script = document.createElement('script')
    script.src = `askiabot.com/api/widget/embed.js?botId=${botId}`
    script.async = true
    document.body.appendChild(script)

    return () => {
      // Cleanup on unmount
      const widget = document.querySelector('askia-widget')
      if (widget) {
        widget.remove()
      }
      if (script.parentNode) {
        script.parentNode.removeChild(script)
      }
      window.AskIAWidget = false
    }
  }, [botId])
}

export default useAskIAWidget

Utiliser le Hook

App.tsx

import useAskIAWidget from '@/hooks/useAskIAWidget'

function App() {
  useAskIAWidget('YOUR_BOT_ID')

  return (
    <div>
      <h1>My React App</h1>
      {/* Your app content */}
    </div>
  )
}

export default App

Composant React

Créez un composant réutilisable :

components/AskIAWidget.tsx

import { useEffect } from 'react'

interface AskIAWidgetProps {
  botId: string
}

export function AskIAWidget({ botId }: AskIAWidgetProps) {
  useEffect(() => {
    if (window.AskIAWidget) {
      return
    }

    const script = document.createElement('script')
    script.src = `askiabot.com/api/widget/embed.js?botId=${botId}`
    script.async = true
    document.body.appendChild(script)

    return () => {
      const widget = document.querySelector('askia-widget')
      if (widget) {
        widget.remove()
      }
      if (script.parentNode) {
        script.parentNode.removeChild(script)
      }
      window.AskIAWidget = false
    }
  }, [botId])

  return null
}

// Usage:
// <AskIAWidget botId="YOUR_BOT_ID" />

Variables d'Environnement

Pour Next.js, vous pouvez utiliser des variables d'environnement pour l'URL de l'API :

.env.local

// .env.local
NEXT_PUBLIC_ASKIA_API_URL=https://askiabot.com

// app/layout.tsx
<Script
  src={`${process.env.NEXT_PUBLIC_ASKIA_API_URL}/api/widget/embed.js?botId=${process.env.NEXT_PUBLIC_ASKIA_BOT_ID}`}
  strategy="lazyOnload"
/>

Types TypeScript

Ajoutez des définitions de types pour un meilleur support TypeScript :

types/askia.d.ts

// types/askia.d.ts
declare global {
  interface Window {
    AskIAWidget?: boolean
    cleanupAskIAWidget?: () => void
  }
}

export {}

Bonnes Pratiques

Chargement Différé : Utilisez strategy="lazyOnload" dans Next.js pour de meilleures performances
Nettoyage : Nettoyez toujours le widget au démontage du composant
Variables d'Environnement : Stockez l'ID du bot et l'URL de l'API dans des variables d'environnement
Typage Sûr : Ajoutez des définitions TypeScript pour une meilleure expérience de développement

Intégration React

Intégration Next.js

App Router (Next.js 13+)

Pages Router (Next.js 12)

Intégration React

Hook Personnalisé

Utiliser le Hook

Composant React

Variables d'Environnement

Types TypeScript

Bonnes Pratiques

Prochaines Étapes

Exemple Vue.js

Guide Widget