IonfirmDOCS
Docssmart_ai_contactform Guide
smart_ai_contactform/Docs

Framework Guides (React, Next.js, WP)

How to integrate the Smart AI Contact Form into modern JavaScript frameworks and WordPress.

Framework Integration Guides

Because the Smart AI Contact Form is built with pure Vanilla Javascript, it is completely framework-agnostic. It does not conflict with virtual DOMs or require complex NPM packages.

However, modern frameworks like React and Next.js handle external scripts a bit differently than plain HTML. Here is exactly how to drop the widget into the most popular platforms.

Next.js (App or Pages Router)

Next.js has a built-in <Script> component designed specifically for loading external third-party scripts efficiently without blocking page rendering.

  1. Open your root layout file (app/layout.tsx or pages/_app.tsx).
  2. Import the Next.js Script component.
  3. Add the widget URL. We recommend the lazyOnload strategy so it doesn't impact your initial page load speed.
import Script from 'next/script';
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        
        {/* Smart AI Contact Widget */}
        <Script 
          src="https://yourwebsite.com/widget.js" 
          strategy="lazyOnload" 
        />
      </body>
    </html>
  );
}

React (Vite / Create React App)

In a standard React application, you cannot simply drop a <script> tag inside your JSX return statement. Instead, you use a useEffect hook to dynamically inject the script into the document body when the component mounts.

You can place this in your main App.jsx or a dedicated SupportWidget.jsx component.

import React, { useEffect } from 'react';
 
const SupportWidget = () => {
  useEffect(() => {
    // Check if script is already loaded to prevent duplicates
    if (!document.getElementById('ai-widget-script')) {
      const script = document.createElement('script');
      script.id = 'ai-widget-script';
      script.src = 'https://yourwebsite.com/widget.js';
      script.async = true;
      document.body.appendChild(script);
    }
  }, []);
 
  return null; // The script handles the UI, so React renders nothing here
};
 
export default SupportWidget;

WordPress

There are two ways to add the widget to a WordPress site: the easy way (for clients) and the developer way.

Method 1: The Easy Way (Plugin)

If you are installing this for a client, the safest method is using a header/footer injection plugin. This ensures the script survives theme updates.

  1. In the WordPress Admin dashboard, go to Plugins > Add New.
  2. Search for and install WPCode (or any "Insert Headers and Footers" plugin).
  3. Go to the plugin's settings and find the Footer section.
  4. Paste your widget script tag:
<script src="https://yourwebsite.com/widget.js"></script>
  1. Click Save.

Method 2: The Developer Way (functions.php)

If you are building a custom theme, you can enqueue the script natively via your functions.php file.

function enqueue_ai_smart_widget() {
    // Enqueue the widget script in the footer
    wp_enqueue_script(
        'ai-smart-widget', 
        'https://yourwebsite.com/widget.js', 
        array(), 
        '1.0.0', 
        true // true = load in footer
    );
}
add_action('wp_enqueue_scripts', 'enqueue_ai_smart_widget');