Inline Form Embed

While the floating widget is great for general site-wide support, you may want a dedicated "Contact Us" page. The Inline Form Embed allows you to place the AI chat interface directly into the flow of your website's content, exactly like a traditional HTML contact form.

How to Embed the Inline Form

Embedding the inline form requires two small pieces of HTML. You need a container (<div>) to tell the script where to render the form, and the <script> tag to actually load it.

1. Open the HTML file of the page where you want the form to appear (e.g., contact.html).
2. Paste the <div> container exactly where you want the form to show up.
3. Paste the <script> tag at the bottom of the page, right before the closing </body> tag.

<!-- 1. Place this container exactly where you want the form to appear -->
<div id="ai-contact-form"></div>
 
<!-- 2. Paste this script tag at the bottom of your page -->
<script src="https://yourwebsite.com//embed.js"></script>

How It Works

When the page loads, embed.js searches your HTML for the <div id="ai-contact-form"></div>. Once it finds it, it injects the complete AI chat interface directly into that container.

This means you can easily place it inside your own CSS grids, flexboxes, or WordPress columns to control its maximum width and positioning.

Example Layout:

<main class="container mx-auto py-10">
    <h1 class="text-3xl font-bold text-center">Contact Support</h1>
    <p class="text-center text-gray-500 mb-8">Ask our AI assistant or leave a message for our team.</p>
    
    <!-- We constrain the form to a max-width so it looks great on desktop -->
    <div class="max-w-2xl mx-auto bg-white shadow-lg rounded-xl p-6">
        <div id="ai-contact-form"></div>
    </div>
</main>
 
<!-- Load the script at the end of the body -->
<script src="https://yourwebsite.com/embed.js"></script>

Customizing the Form Styling

The inline form uses Tailwind CSS classes directly injected by the embed.js file. It is designed to be clean and minimal so it blends into almost any website theme.

If you want to change the button colors, text sizes, or border radiuses:

1. Open the embed.js file in your code editor.
2. Locate the HTML template string at the top of the file.
3. Modify the standard CSS or Tailwind classes within the template.
4. Save and upload the file back to your server (remember to hard-refresh your browser to see the changes!).