Upload & Install

Installing the Smart AI Contact Form takes less than a minute. Because there is no database to configure and no Node.js/Composer dependencies to install, you simply upload the files to your server and paste a script tag into your HTML.

Step 1: Download & Extract

When you purchase the widget, you will receive a .zip file containing the source code.

1. Download the .zip file to your computer.
2. Extract (unzip) the folder.
3. You will see a folder containing files like ai-handler.php, widget.js, and a lib directory.

Step 2: Upload to Your Server

You can use any standard FTP client (like FileZilla) or your web host's built-in File Manager (like cPanel).

1. Log in to your web hosting control panel or FTP client.
2. Navigate to your website's public directory (usually public_html, www, or htdocs).
3. Create a new folder for the script. We recommend naming it something simple, like ai-form or support-widget.
   • Example path: public_html/ai-form/
4. Upload all the extracted files and folders into this new directory.

Verify Your File Structure

Once uploaded, your folder on the server should look exactly like this:

📁 smart ai contact form/
    ├── 📁 lib/               (Contains PHPMailer files)
    ├── 📄 .env.example       (Configuration template)
    ├── 📄 .htaccess          (Security rules)
    ├── 📄 ai-handler.php     (The main backend processor)
    ├── 📄 content.json       (Your AI knowledge base)
    ├── 📄 embed.js           (Inline form frontend)
    ├── 📄 form.html          (UI for the floating widget)
    ├── 📄 script.js          (Logic for the floating widget)
    └── 📄 widget.js          (The floating widget injector)

Step 3: Embed on Your Website

Now that the files are hosted on your server, you can display the AI form anywhere on your website.

Replace https://yourwebsite.com/ with the actual URL where you uploaded the folder in Step 2.

Option A: Floating Widget (Recommended)

This creates a chat-style button in the bottom corner of your website.

Paste this just before your closing </body> tag:

<script src="https://yourwebsite.com/widget.js"></script>

Option B: Inline Embed (Contact Page Style)

Use this method if you want the form to appear exactly where you place it on the page (e.g., a “Contact Us” page).

1. Add this container where the form should render:

<div id="ai-contact-form"></div>
<script src="https://yourwebsite.com/embed.js"></script>

If you load your website right now, you will see the form! However, if you try to send a message, it will fail because we haven't added your API keys yet.

Let's fix that. Head over to the next section: API Keys (.env Setup).