React Integration

Integrate AskIA widget into your React or Next.js application.

Next.js Integration

For Next.js applications, use the Script component for optimal performance:

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"
      />
    </>
  )
}

React Integration

For standard React applications, use a custom hook:

Custom Hook

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

Using the 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

React Component

Create a reusable component:

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" />

Environment Variables

For Next.js, you can use environment variables for the API URL:

.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"
/>

TypeScript Types

Add type definitions for better TypeScript support:

types/askia.d.ts

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

export {}

Best Practices

Lazy Loading: Use strategy="lazyOnload" in Next.js for better performance
Cleanup: Always clean up the widget on component unmount
Environment Variables: Store bot ID and API URL in environment variables
Type Safety: Add TypeScript definitions for better development experience

Next Steps

Vue.js Example

See how to integrate with Vue.js

Widget Guide

Learn more about widget integration