Website Integration

    Add AIE's intelligent chatbot to any website with just a few lines of code. Our lightweight widget integrates seamlessly with any web technology.

    Get API Key

    Sign up for AIE and get your API key from the guide

    Add Script Tag

    Include the AIE widget script in your website HTML

    Configure Settings

    Customize appearance and behavior to match your brand

    Test & Deploy

    Verify everything works and deploy to production

    Quick Setup

    Get started in under 2 minutes by adding this script tag to your website:

    Basic Integration
    <!-- Add this script before closing </head> tag -->
<script>
  (function(a,i,e){
    var s=document.createElement('script');
    s.src='https://cdn.aiechatbots.com/widget.js';
    s.async=true;
    s.setAttribute('data-aie-key','your-api-key-here');
    s.setAttribute('data-aie-position','bottom-right');
    document.head.appendChild(s);
  })();
</script>

    What this does:

    • • Loads the AIE widget asynchronously
    • • Positions the chat button in the bottom-right corner
    • • Connects to your specific chatbot using your API key
    • • Automatically handles mobile responsiveness

    Advanced Configuration

    For more control over appearance and behavior, use the configuration object:

    Advanced Configuration
    <script>
  window.AIEConfig = {
    apiKey: 'your-api-key-here',
    position: 'bottom-right', // bottom-left, top-right, top-left
    theme: {
      primaryColor: '#3B82F6',
      backgroundColor: '#FFFFFF',
      textColor: '#1F2937',
      borderRadius: '12px'
    },
    chatbot: {
      welcomeMessage: 'Hello! How can I help you today?',
      placeholder: 'Type your message...',
      title: 'Customer Support'
    },
    behavior: {
      autoOpen: false,
      showOnPages: ['/contact', '/support'],
      hideOnPages: ['/admin'],
      triggerAfter: 5000 // Show after 5 seconds
    }
  };
</script>
<script src="https://cdn.aiechatbots.com/widget.js" async></script>

    Configuration Options:

    Position Options
    bottom-right
    Default
    bottom-left
    top-right
    top-left
    Behavior Settings
    • autoOpen: Auto-open chat on page load
    • showOnPages: Only show on specific pages
    • hideOnPages: Hide on certain pages
    • triggerAfter: Delay before showing

    Customization Options

    Make the chatbot match your brand perfectly:

    Visual Customization
    • primaryColor: Main brand color
    • backgroundColor: Chat window background
    • textColor: Message text color
    • borderRadius: Corner roundness
    • fontFamily: Custom font
    • chatBubbleColor: Message bubble colors
    Content Customization
    • welcomeMessage: First message shown
    • placeholder: Input field placeholder
    • title: Chat window title
    • subtitle: Optional subtitle
    • avatarUrl: Custom bot avatar
    • poweredBy: Show/hide "Powered by AIE"

    Event Handling

    Listen to widget events for analytics tracking and custom integrations:

    Event Handling & API
    <script>
  // Listen for AIE widget events
  window.addEventListener('aie:ready', function() {
    console.log('AIE widget is ready');
  });

  window.addEventListener('aie:conversation:started', function(event) {
    console.log('Conversation started:', event.detail);
    // Track with analytics
    gtag('event', 'chat_started');
  });

  window.addEventListener('aie:message:sent', function(event) {
    console.log('Message sent:', event.detail);
  });

  window.addEventListener('aie:conversation:ended', function(event) {
    console.log('Conversation ended:', event.detail);
    // Track conversation completion
    gtag('event', 'chat_completed', {
      duration: event.detail.duration,
      messages: event.detail.messageCount
    });
  });

  // Programmatic control
  function openChat() {
    window.AIE.open();
  }

  function closeChat() {
    window.AIE.close();
  }

  function sendMessage(message) {
    window.AIE.sendMessage(message);
  }
</script>

    Available Events:

    aie:ready

    Widget loaded and initialized

    aie:conversation:started

    User started a new conversation

    aie:message:sent

    User sent a message

    aie:conversation:ended

    Conversation completed or closed

    Framework-Specific Integration

    Examples for popular web frameworks:

    React Integration
    Clean integration with React applications using useEffect
    import { useEffect } from 'react';

const AIEWidget = ({ config }) => {
  useEffect(() => {
    // Load AIE widget
    const script = document.createElement('script');
    script.src = 'https://cdn.aiechatbots.com/widget.js';
    script.async = true;
    
    // Set configuration
    window.AIEConfig = config;
    
    document.head.appendChild(script);
    
    return () => {
      // Cleanup
      document.head.removeChild(script);
      if (window.AIE) {
        window.AIE.destroy();
      }
    };
  }, [config]);

  return null; // Widget renders automatically
};

// Usage
const App = () => {
  const aieConfig = {
    apiKey: 'your-api-key',
    position: 'bottom-right',
    theme: {
      primaryColor: '#3B82F6'
    }
  };

  return (
    <div>
      <AIEWidget config={aieConfig} />
      {/* Your app content */}
    </div>
  );
};
    Vue.js Integration
    Integration guide for Vue.js applications
    View guide
    Angular Integration
    Step-by-step Angular integration
    View guide

    Troubleshooting

    Common Issues

    Widget not appearing

    • • Check that your API key is correct
    • • Verify the script is loading (check Network tab)
    • • Ensure no ad blockers are interfering
    • • Check browser console for JavaScript errors

    Styling conflicts

    • • The widget uses isolated CSS to prevent conflicts
    • • Check for z-index issues with other elements
    • • Use custom CSS to override specific styles if needed

    Performance considerations

    • • Widget loads asynchronously and won't block page rendering
    • • Lazy loads resources only when chat is opened
    • • Total size is less than 50KB compressed

    Need help with integration?

    Our support team is ready to help you integrate AIE into your website perfectly.