AI Chat Embed Demo

Method 1: Using Auto-Initialize

Add a container with data attributes and the script will automatically initialize:

<div 
  id="ai-chat-1" 
  data-aichat-container 
  data-aichat-theme-color="#0070f3"
  data-aichat-welcome-message="Hello! How can I help you today?"
></div>

<script src="${process.env.NEXT_PUBLIC_BASE_URL}/embed.js"></script>

Live Example:

Method 2: Using JavaScript API

Initialize the chat component programmatically with custom configuration:

<div id="ai-chat-2"></div>

<script src="${process.env.NEXT_PUBLIC_BASE_URL}/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.AIChat) {
      window.AIChat.init('ai-chat-2', {
        themeColor: '#6d28d9',
        welcomeMessage: 'Hello! I was initialized via JavaScript API.',
        maxHeight: '400px'
      });
    }
  });
</script>

Live Example:

Configuration Options

The following configuration options are available:

systemPrompt: Instructions for the AI assistant
welcomeMessage: Initial message from the assistant
themeColor: Primary color for the chat interface
assistantAvatarUrl: URL for the assistant's avatar
userAvatarUrl: URL for the user's avatar
inputPlaceholder: Placeholder text for the input field
maxHeight: Maximum height for the chat container
width: Width of the chat container
apiEndpoint: Custom API endpoint (must be on same domain or set up with CORS)
showTimestamps: Whether to show message timestamps