How to Deploy This Iframe

1. Copy the iframe HTML snippet

   The core element you need to embed is the <iframe>. Here’s a minimal HTML snippet:

   <iframe
     src="https://foxoi-demo.lucius.space"
     width="600"
     height="400"
     style="border: none;"
     title="Demo Iframe">
   </iframe>

   You can customize the width, height, and any additional styles as needed.

2. Add the snippet to your website

   - If you have a static HTML file, paste the snippet in the desired location of your.html page.
   - If you’re using Next.js (like in the code above), you can include the <iframe> inside a component or page file. For example:

   export default function Home() {
     return (
       <div>
         <h1>My Iframe Page</h1>
         <iframe
           src="https://foxoi-demo.lucius.space"
           width="600"
           height="400"
           style={{ border: 'none' }}
           title="Demo Iframe"
         />
       </div>
     );
   }

3. Deploy (Upload) Your Page

   Once your page includes the <iframe> snippet:

   • Static Hosting: Upload your HTML file(s) to any web server or hosting provider (e.g., GitHub Pages, an S3 bucket, or a standard web host).
   • Next.js Project: Run npm run build followed by npm run start for a local server. For production, deploy to a service like Vercel or Netlify. The key is that your code—especially the iframe—ends up online.
4. Verify the Iframe Loads

   Access your deployed page by visiting its URL. The iframe should load content from https://foxoi-demo.lucius.space (or whichever source you used).

How to Add Authentication to the Iframe

There are 3 ways to add authentication to the iframe.

Query Params
You attach user data or an authentication token to the iframe’s src URL, e.g., iframe-app.com?token=abc123.

Cookies
The parent and iframe share a domain (or subdomain). A secure, httpOnly cookie is set after user login; the iframe automatically inherits the cookie if SameSite and domain settings permit.

postMessage
After the iframe loads, the parent sends a message (containing the user ID or token) via the HTML5 postMessage API. The iframe listens for the message and handles authentication internally.