Skip to main content

​
React Integration

If you are building a modern Single Page Application (SPA) using React, Next.js, or Vite, you can dynamically inject the ZynfoAI agent widget script when your application mounts.

​
Implementation Guide

Use a standard useEffect hook in your main layout or root App component to load the AI agent asynchronously: 
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Dynamically load the AI agent widget script
    const embedScript = document.createElement('script');
    embedScript.src = 'https://your-domain.com/widget/embed.js';
    embedScript.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID_HERE'); // Replace with your Agent ID
    embedScript.async = true;
    
    document.head.appendChild(embedScript);

    return () => {
      // Cleanup the script and widget when the React component unmounts
      document.head.removeChild(embedScript);
      const widget = document.getElementById('chatbot-widget');
      if (widget) widget.remove();
    };
  }, []);

  return <div>Your application content here...</div>;
}

​
Remote Configuration

Just like the standard HTML embed, you do not pass configuration props directly to the widget in your React code. All appearance and behavioral settings are fetched automatically in real-time based on the data-chatbot-id you provide.