Premium AI Chat for Any Website

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

function App() {
  useEffect(() => {
    // Load GhostChat script
    const script = document.createElement('script');
    script.src = 'https://ghostchat.pages.dev/ghostchat_free.js';
    script.async = true;
    script.onload = () => {
      window.initGhostChat({
        apiKey: 'sk-YOUR-OPENAI-KEY',
        theme: 'minimal-dark',
        primaryColor: '#7C3AED'
      });
    };
    document.body.appendChild(script);

    return () => {
      // Cleanup on unmount
      const widget = document.getElementById('ghostchat-widget');
      if (widget) widget.remove();
    };
  }, []);

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

export default App;

// App.js with context scraping
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://ghostchat.pages.dev/ghostchat_main.js';
    script.async = true;
    script.onload = () => {
      window.initGhostChat({
        licenseKey: 'PERSONAL-XXXXX-XXXXX-XXXXX-XXXXX',
        apiKey: 'sk-YOUR-OPENAI-KEY',
        theme: 'glassmorphism',
        provider: 'openai:gpt-4',
        
        // Scrape your docs for context
        contextMode: 'summarize',
        contextUrl: 'https://yoursite.com/docs',
        scrapingApiUrl: 'https://your-scraping-server.com/api/scrape',
        
        primaryColor: '#8b5cf6'
      });
    };
    document.body.appendChild(script);
  }, []);

  return <div className="App">{/* content */}</div>;
}

<!-- Go to Appearance → Theme Editor → footer.php -->
<!-- Add before </body> tag -->

<script src="https://ghostchat.pages.dev/ghostchat_free.js"></script>
<script>
  initGhostChat({
    apiKey: 'sk-YOUR-OPENAI-KEY',
    theme: 'minimal-light',
    primaryColor: '#7C3AED',
    welcomeMessage: 'Welcome! How can I help you today?'
  });
</script>

<!-- Perfect for WooCommerce stores -->
<script src="https://ghostchat.pages.dev/ghostchat_main.js"></script>
<script>
  initGhostChat({
    licenseKey: 'PERSONAL-XXXXX-XXXXX-XXXXX-XXXXX',
    apiKey: 'sk-YOUR-OPENAI-KEY',
    theme: 'minimal-dark',
    provider: 'openai:gpt-4',
    
    // Bot learns from your WooCommerce FAQ
    contextMode: 'faq',
    contextUrl: '<?php echo home_url('/faq'); ?>',
    scrapingApiUrl: 'https://your-scraping-server.com/api/scrape',
    
    welcomeMessage: 'Need help with your order? Ask me!',
    primaryColor: '#8b5cf6'
  });
</script>

// pages/_app.js
import { useEffect } from 'react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // Load GhostChat on client side only
    const script = document.createElement('script');
    script.src = 'https://ghostchat.pages.dev/ghostchat_free.js';
    script.async = true;
    script.onload = () => {
      window.initGhostChat({
        apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY,
        theme: 'minimal-light',
        primaryColor: '#7C3AED'
      });
    };
    document.body.appendChild(script);
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

// pages/_app.js - Agency tier with full scraping
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://ghostchat.pages.dev/ghostchat_main.js';
    script.async = true;
    script.onload = () => {
      window.initGhostChat({
        licenseKey: process.env.NEXT_PUBLIC_LICENSE_KEY,
        apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY,
        theme: 'ghost-orb',
        provider: 'openai:gpt-4',
        
        // Full scrape: Bot learns from multiple docs pages
        contextMode: 'full_scrape',
        contextUrl: 'https://yoursite.com/docs',
        scrapingApiUrl: process.env.NEXT_PUBLIC_SCRAPING_API,
        
        primaryColor: '#8b5cf6'
      });
    };
    document.body.appendChild(script);
  }, []);

  return <Component {...pageProps} />;
}

<!-- Go to: Online Store → Themes → Actions → Edit Code -->
<!-- Open: Layout/theme.liquid -->
<!-- Add before closing </body> tag -->

<script src="https://ghostchat.pages.dev/ghostchat_free.js"></script>
<script>
  initGhostChat({
    apiKey: 'sk-YOUR-OPENAI-KEY',
    theme: 'minimal-light',
    primaryColor: '{{ settings.color_accent }}',
    welcomeMessage: 'Welcome to {{ shop.name }}! How can I help?',
    buttonText: '💬 Chat with us'
  });
</script>

<!-- Perfect for e-commerce support -->
<script src="https://ghostchat.pages.dev/ghostchat_main.js"></script>
<script>
  initGhostChat({
    licenseKey: 'PERSONAL-XXXXX-XXXXX-XXXXX-XXXXX',
    apiKey: 'sk-YOUR-OPENAI-KEY',
    theme: 'glassmorphism',
    provider: 'openai:gpt-4',
    
    // Bot learns from your shipping/returns page
    contextMode: 'faq',
    contextUrl: '{{ shop.url }}/pages/shipping-returns',
    scrapingApiUrl: 'https://your-scraping-server.com/api/scrape',
    
    welcomeMessage: 'Hi! Need help with shipping, returns, or products?',
    primaryColor: '{{ settings.color_accent }}'
  });
</script>