Engaging Visitors: Deploying Your AI Agent on Your Website

// Load only after user interaction (click, scroll, etc.)
document.addEventListener('scroll', function loadWidget() {
  window.__CHAT_WIDGET_CONFIG = {
    agentId: "YOUR_AGENT_ID_HERE",
  };
  
  const script = document.createElement('script');
  script.src = 'https://widget-cdn.flockx.io/flockx-chat.min.js';
  document.body.appendChild(script);
  
  // Remove listener after first trigger
  document.removeEventListener('scroll', loadWidget);
}, { once: true });

// Wait for widget to be ready
window.addEventListener('flockx:ready', () => {
  console.log('Flockx widget is ready!');
  
  // Set user context for personalized responses
  FlockxWidget.setUser({
    name: 'Alex Creator',
    email: 'alex@example.com',
    plan: 'pro',
    interests: ['podcasting', 'content creation']
  });
});
// Track messages in your analytics
window.addEventListener('flockx:message:sent', (event) => {
  analytics.track('chat_message_sent', {
    text: event.detail.text,
    page: window.location.pathname
  });
});
window.addEventListener('flockx:message:received', (event) => {
  analytics.track('chat_message_received', {
    agent: event.detail.agent,
    responseTime: event.detail.responseTime
  });
});
// Open widget when clicking a custom button
document.getElementById('help-button').addEventListener('click', () => {
  FlockxWidget.open();
});
// Send contextual message based on page
if (window.location.pathname.includes('/pricing')) {
  window.addEventListener('flockx:open', () => {
    FlockxWidget.sendMessage('I have a question about pricing');
  }, { once: true });
}

window.__CHAT_WIDGET_CONFIG = {
  // Required
  agentId: "YOUR_AGENT_ID",  // UUID of your Flockx agent
  
  // Appearance
  widgetButtonImageUrl: "/avatar.jpg",  // Custom avatar image
  widgetButtonSize: 60,                  // Button size in pixels (default: 60)
  position: "bottom-right",              // "bottom-right" | "bottom-left"
  theme: "auto",                         // "light" | "dark" | "auto"
  primaryColor: "#6A67FF",               // Accent color (hex)
  
  // Branding
  headerTitle: "Chat with us",           // Header text when open
  inputPlaceholder: "Type a message...", // Input placeholder text
  welcomeMessage: "Hi! How can I help?", // First message from agent
  
  // Behavior
  hideButton: false,                     // Hide default floating button
  autoOpen: false,                       // Auto-open on page load
  autoOpenDelay: 5000,                   // Delay before auto-open (ms)
  
  // Advanced
  persistSession: true,                  // Remember conversation across pages
  enableSounds: true,                    // Play notification sounds
  enableNotifications: false,            // Browser notifications (requires permission)
  
  // Analytics
  onReady: function() {},                // Callback when widget is ready
  onOpen: function() {},                 // Callback when widget opens
  onClose: function() {},                // Callback when widget closes
  onMessageSent: function(message) {},   // Callback when user sends message
  onMessageReceived: function(message) {} // Callback when agent responds
};

window.__CHAT_WIDGET_CONFIG = {
  agentId: "YOUR_AGENT_ID",
  welcomeMessage: "Hey! I can help you find episodes, get show notes, or answer questions about our podcast. What are you looking for?",
  headerTitle: "Podcast Assistant"
};

window.__CHAT_WIDGET_CONFIG = {
  agentId: "YOUR_AGENT_ID",
  welcomeMessage: "Welcome to my studio! I can help with commission inquiries, portfolio questions, or booking information.",
  headerTitle: "Studio Assistant"
};

window.__CHAT_WIDGET_CONFIG = {
  agentId: "YOUR_AGENT_ID",
  welcomeMessage: "Thanks for visiting! I can help you find articles, answer questions about my work, or discuss collaboration opportunities.",
  headerTitle: "Content Assistant"
};

window.__CHAT_WIDGET_CONFIG = {
  agentId: "YOUR_AGENT_ID",
  welcomeMessage: "Hey there! I can help with booking inquiries, merchandise, or finding information about upcoming shows.",
  headerTitle: "Music Assistant"
};

// Example: Different agents for different pages
const agentConfig = {
  '/support': 'support-agent-uuid',
  '/sales': 'sales-agent-uuid',
  '/booking': 'booking-agent-uuid',
  default: 'general-agent-uuid'
};
const currentPath = window.location.pathname;
const agentId = Object.keys(agentConfig).find(path => 
  currentPath.includes(path)
) ? agentConfig[Object.keys(agentConfig).find(path => 
  currentPath.includes(path))] : agentConfig.default;
window.__CHAT_WIDGET_CONFIG = {
  agentId: agentId,
  // ... other config
};

window.addEventListener('flockx:message:sent', (e) => {
  gtag('event', 'chat_message', {
    event_category: 'engagement',
    event_label: 'user_message',
    value: 1
  });
});
window.addEventListener('flockx:message:received', (e) => {
  gtag('event', 'chat_response', {
    event_category: 'engagement',
    event_label: 'ai_response',
    value: 1
  });
});

window.addEventListener('flockx:message:sent', (e) => {
  analytics.track('Chat Message Sent', {
    text: e.detail.text,
    page: window.location.pathname
  });
});

const isMobile = window.innerWidth < 768;
window.__CHAT_WIDGET_CONFIG = {
  agentId: "YOUR_AGENT_ID",
  widgetButtonSize: isMobile ? 50 : 60,
  position: isMobile ? "bottom-right" : "bottom-right"
};

window.__CHAT_WIDGET_CONFIG = {
  agentId: "YOUR_AGENT_ID",
  a11y: {
    announceMessages: true,  // Announce new messages to screen readers
    highContrast: false      // Force high contrast mode
  }
};