Engaging Visitors: Deploying Your AI Agent on Your Website

1
// Load only after user interaction (click, scroll, etc.)
2
document.addEventListener('scroll', function loadWidget() {
3
  window.__CHAT_WIDGET_CONFIG = {
4
    agentId: "YOUR_AGENT_ID_HERE",
5
  };
6
  
7
  const script = document.createElement('script');
8
  script.src = 'https://widget-cdn.flockx.io/flockx-chat.min.js';
9
  document.body.appendChild(script);
10
  
11
  // Remove listener after first trigger
12
  document.removeEventListener('scroll', loadWidget);
13
}, { once: true });

1
// Wait for widget to be ready
2
window.addEventListener('flockx:ready', () => {
3
  console.log('Flockx widget is ready!');
4
  
5
  // Set user context for personalized responses
6
  FlockxWidget.setUser({
7
    name: 'Alex Creator',
8
    email: 'alex@example.com',
9
    plan: 'pro',
10
    interests: ['podcasting', 'content creation']
11
  });
12
});
13
14
// Track messages in your analytics
15
window.addEventListener('flockx:message:sent', (event) => {
16
  analytics.track('chat_message_sent', {
17
    text: event.detail.text,
18
    page: window.location.pathname
19
  });
20
});
21
22
window.addEventListener('flockx:message:received', (event) => {
23
  analytics.track('chat_message_received', {
24
    agent: event.detail.agent,
25
    responseTime: event.detail.responseTime
26
  });
27
});
28
29
// Open widget when clicking a custom button
30
document.getElementById('help-button').addEventListener('click', () => {
31
  FlockxWidget.open();
32
});
33
34
// Send contextual message based on page
35
if (window.location.pathname.includes('/pricing')) {
36
  window.addEventListener('flockx:open', () => {
37
    FlockxWidget.sendMessage('I have a question about pricing');
38
  }, { once: true });
39
}

1
window.__CHAT_WIDGET_CONFIG = {
2
  // Required
3
  agentId: "YOUR_AGENT_ID",  // UUID of your Flockx agent
4
  
5
  // Appearance
6
  widgetButtonImageUrl: "/avatar.jpg",  // Custom avatar image
7
  widgetButtonSize: 60,                  // Button size in pixels (default: 60)
8
  position: "bottom-right",              // "bottom-right" | "bottom-left"
9
  theme: "auto",                         // "light" | "dark" | "auto"
10
  primaryColor: "#6A67FF",               // Accent color (hex)
11
  
12
  // Branding
13
  headerTitle: "Chat with us",           // Header text when open
14
  inputPlaceholder: "Type a message...", // Input placeholder text
15
  welcomeMessage: "Hi! How can I help?", // First message from agent
16
  
17
  // Behavior
18
  hideButton: false,                     // Hide default floating button
19
  autoOpen: false,                       // Auto-open on page load
20
  autoOpenDelay: 5000,                   // Delay before auto-open (ms)
21
  
22
  // Advanced
23
  persistSession: true,                  // Remember conversation across pages
24
  enableSounds: true,                    // Play notification sounds
25
  enableNotifications: false,            // Browser notifications (requires permission)
26
  
27
  // Analytics
28
  onReady: function() {},                // Callback when widget is ready
29
  onOpen: function() {},                 // Callback when widget opens
30
  onClose: function() {},                // Callback when widget closes
31
  onMessageSent: function(message) {},   // Callback when user sends message
32
  onMessageReceived: function(message) {} // Callback when agent responds
33
};

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

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

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

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

1
// Example: Different agents for different pages
2
const agentConfig = {
3
  '/support': 'support-agent-uuid',
4
  '/sales': 'sales-agent-uuid',
5
  '/booking': 'booking-agent-uuid',
6
  default: 'general-agent-uuid'
7
};
8
9
const currentPath = window.location.pathname;
10
const agentId = Object.keys(agentConfig).find(path => 
11
  currentPath.includes(path)
12
) ? agentConfig[Object.keys(agentConfig).find(path => 
13
  currentPath.includes(path))] : agentConfig.default;
14
15
window.__CHAT_WIDGET_CONFIG = {
16
  agentId: agentId,
17
  // ... other config
18
};

1
window.addEventListener('flockx:message:sent', (e) => {
2
  gtag('event', 'chat_message', {
3
    event_category: 'engagement',
4
    event_label: 'user_message',
5
    value: 1
6
  });
7
});
8
9
window.addEventListener('flockx:message:received', (e) => {
10
  gtag('event', 'chat_response', {
11
    event_category: 'engagement',
12
    event_label: 'ai_response',
13
    value: 1
14
  });
15
});

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

1
const isMobile = window.innerWidth < 768;
2
3
window.__CHAT_WIDGET_CONFIG = {
4
  agentId: "YOUR_AGENT_ID",
5
  widgetButtonSize: isMobile ? 50 : 60,
6
  position: isMobile ? "bottom-right" : "bottom-right"
7
};

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