Loading dashboard…

Welcome back, User

Free credits

Use these before pay‑per‑generation kicks in

0 / 500

0 used 500 total

After free credits: $0.18 per generation

💳

Billing & payment

Add a payment method to continue after free credits. Secured by Stripe.

Total generations

Free

Paid

Total cost

$0.00

Your domains

Add a domain and copy the embed code to your site

📦 Widget Installation Guide

🚀 Quick Start (Works Everywhere)

Copy your widget code

From the "Widget Installation Code" section above

Paste before closing </body> tag

In your HTML file or template

Deploy and test!

Visit your product page and look for the widget button

📱 Platform-Specific Instructions

🎨

WordPress

Go to Appearance → Theme Editor
Find footer.php
Add code before <?php wp_footer(); ?>
Click Update File

🛍️

Shopify

Go to Online Store → Themes
Click Actions → Edit code
Find theme.liquid
Add code before </body>

⚛️

React / Next.js (JS/TS)

React (JS/TSX): public/index.html

Next.js: pages/_document.tsx or app/layout.tsx (App Router)

→ View TypeScript examples

🎯

Wix

Go to Settings → Custom Code
Click + Add Custom Code
Set to Body - end
Apply to All pages

🏷️

Google Tag Manager

Create New Tag
Choose Custom HTML
Paste widget code
Set trigger to All Pages

⬛

Squarespace

Go to Settings → Advanced
Click Code Injection
Paste in Footer section
Click Save

✅ Testing Checklist

✓ Widget button appears on your product pages
✓ Clicking opens modal where users can upload images
✓ No console errors (Press F12 to check)
✓ Generation works and shows in your dashboard

📘 TypeScript / TSX Examples

Next.js Pages Router (_app.tsx) ⭐ Recommended

✓ Avoids Next.js sync script ESLint error

// pages/_app.tsx (RECOMMENDED - Avoids ESLint errors)
import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      
      {/* AI Furniture Widget */}
      <Script
        id="furniture-ai-config"
        strategy="afterInteractive"
        dangerouslySetInnerHTML=
      />
      <Script
        src="https://furniture-ai.com/widget/widget.js"
        strategy="afterInteractive"
        onLoad={() => {
          if (window.initAIFurnitureWidget) {
            window.initAIFurnitureWidget(window.FURNITURE_AI_CONFIG);
          }
        }}
      />
    </>
  );
}

Next.js App Router (layout.tsx)

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        
        {/* AI Furniture Widget */}
        <Script
          id="furniture-ai-config"
          strategy="afterInteractive"
          dangerouslySetInnerHTML=
        />
        <Script
          src="https://furniture-ai.com/widget/widget.js"
          strategy="afterInteractive"
          onLoad={() => {
            if (window.initAIFurnitureWidget) {
              window.initAIFurnitureWidget(window.FURNITURE_AI_CONFIG);
            }
          }}
        />
      </body>
    </html>
  );
}

React TypeScript (useEffect Hook)

// App.tsx
import { useEffect } from 'react';

// Declare global config type
declare global {
  interface Window {
    FURNITURE_AI_CONFIG: {
      domain: string;
      domainId: string;
    };
    initAIFurnitureWidget?: (config: any) => void;
  }
}

function App() {
  useEffect(() => {
    // Configure widget
    window.FURNITURE_AI_CONFIG = {
      domain: 'your-domain.com',
      domainId: 'your-unique-id'
    };
    
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://furniture-ai.com/widget/widget.js';
    script.async = true;
    
    // Initialize after script loads
    script.onload = () => {
      if (window.initAIFurnitureWidget) {
        window.initAIFurnitureWidget(window.FURNITURE_AI_CONFIG);
      }
    };
    
    document.body.appendChild(script);
    
    // Cleanup
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="App">
      {/* Your app content */}
    </div>
  );
}

export default App;

Type Definitions (Optional)

// types/furniture-ai.d.ts
export interface FurnitureAIConfig {
  domain: string;
  domainId: string;
  autoShow?: boolean;
  buttonText?: string;
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  primaryColor?: string;
  onGenerate?: (data: any) => void;
  onError?: (error: Error) => void;
  onOpen?: () => void;
  onClose?: () => void;
}

declare global {
  interface Window {
    FURNITURE_AI_CONFIG: FurnitureAIConfig;
    initAIFurnitureWidget?: (config: FurnitureAIConfig) => void;
    AIFurniture?: {
      open: (options?: any) => void;
      close: () => void;
      getState: () => any;
    };
  }
}

🚨 Troubleshooting

Widget not showing?

Check browser console (F12) for errors
Verify domain matches exactly in config
Clear browser cache and refresh

"Domain not authorized" error?

Ensure domain is added and active in dashboard
Check spelling matches exactly

"No credits available" error?

Check your credit balance above
Go to this dashboard and add a payment method (Billing section) to continue

Need more help? Contact support

Recent activity

Latest generations and conversions