Hugging Face's logo

Spaces:
abdelhak66
/
customer-support
Running

App Files Community
abdelhak66 commited on
Commit
c162a96
·
verified ·
1 Parent(s): ddbad68

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +541 -549
index.html CHANGED
@@ -3,587 +3,579 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>24/7 Multilingual Customer Support</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- .chat-container {
11
- height: 500px;
12
- transition: all 0.3s ease;
13
  }
14
- .message {
15
- max-width: 80%;
16
- word-wrap: break-word;
17
  }
18
- .user-message {
19
- background-color: #3b82f6;
20
- color: white;
21
- border-radius: 18px 18px 0 18px;
22
- }
23
- .bot-message {
24
- background-color: #f3f4f6;
25
- color: #1f2937;
26
- border-radius: 18px 18px 18px 0;
27
  }
28
- .typing-indicator::after {
29
- content: "...";
30
- animation: typing 1.5s infinite;
 
 
 
 
 
 
 
 
 
 
 
 
31
  }
32
- @keyframes typing {
33
- 0% { content: "."; }
34
- 33% { content: ".."; }
35
- 66% { content: "..."; }
36
  }
37
- .language-flag {
38
- width: 24px;
39
- height: 16px;
40
- display: inline-block;
41
- margin-right: 5px;
42
- background-size: cover;
43
- border-radius: 2px;
44
  }
45
- .calendly-badge {
46
- background-color: #006bff;
 
 
 
 
 
 
47
  color: white;
48
- padding: 8px 12px;
49
- border-radius: 4px;
50
- display: inline-block;
51
- margin-top: 8px;
52
  font-weight: bold;
53
  }
54
  </style>
55
  </head>
56
- <body class="bg-gray-100">
57
- <div class="container mx-auto max-w-4xl py-8 px-4">
58
- <div class="bg-white rounded-xl shadow-xl overflow-hidden">
59
- <!-- Header -->
60
- <div class="bg-blue-600 text-white p-6 flex items-center justify-between">
61
- <div class="flex items-center">
62
- <div class="bg-white rounded-full p-2 mr-4">
63
- <i class="fas fa-headset text-blue-600 text-2xl"></i>
64
- </div>
65
- <div>
66
- <h1 class="text-2xl font-bold">24/7 Customer Support</h1>
67
- <p class="text-blue-100">Hi there! How can I help you today?</p>
68
- </div>
69
- </div>
70
- <div class="flex space-x-2">
71
- <button id="lang-en" class="lang-btn bg-blue-500 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm flex items-center" data-lang="en">
72
- <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/gb.png')"></span> EN
73
- </button>
74
- <button id="lang-es" class="lang-btn bg-blue-500 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm flex items-center" data-lang="es">
75
- <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/es.png')"></span> ES
76
- </button>
77
- <button id="lang-fr" class="lang-btn bg-blue-500 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm flex items-center" data-lang="fr">
78
- <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/fr.png')"></span> FR
79
- </button>
80
- </div>
81
- </div>
82
-
83
- <!-- Chat Container -->
84
- <div class="chat-container p-4 overflow-y-auto bg-gray-50" id="chat-container">
85
- <div class="flex mb-4 justify-start">
86
- <div class="message bot-message p-4">
87
- <p>Hello! I'm your 24/7 multilingual customer support assistant. How can I help you today?</p>
88
- <div class="mt-2 flex flex-wrap gap-2">
89
- <button class="quick-reply bg-white text-blue-600 px-3 py-1 rounded-full text-sm border border-blue-200 hover:bg-blue-50">Pricing</button>
90
- <button class="quick-reply bg-white text-blue-600 px-3 py-1 rounded-full text-sm border border-blue-200 hover:bg-blue-50">Business Hours</button>
91
- <button class="quick-reply bg-white text-blue-600 px-3 py-1 rounded-full text-sm border border-blue-200 hover:bg-blue-50">Services</button>
92
- <button class="quick-reply bg-white text-blue-600 px-3 py-1 rounded-full text-sm border border-blue-200 hover:bg-blue-50">Return Policy</button>
93
- </div>
94
- </div>
95
- </div>
96
- </div>
97
-
98
- <!-- Input Area -->
99
- <div class="p-4 border-t border-gray-200 bg-white">
100
- <div class="flex items-center">
101
- <input type="text" id="user-input" placeholder="Type your message here..." class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
102
- <button id="send-btn" class="ml-2 bg-blue-600 text-white rounded-full p-2 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
103
- <i class="fas fa-paper-plane"></i>
104
- </button>
105
- </div>
106
- <div class="mt-2 text-xs text-gray-500">
107
- <p>By using this chat, you agree to our <a href="#" class="text-blue-600 hover:underline">Privacy Policy</a></p>
108
  </div>
 
 
 
 
 
 
 
 
 
109
  </div>
110
  </div>
111
- </div>
112
-
113
- <script>
114
- // Current language (default English)
115
- let currentLang = 'en';
116
-
117
- // Translation dictionary
118
- const translations = {
119
- en: {
120
- greeting: "Hello! I'm your 24/7 multilingual customer support assistant. How can I help you today?",
121
- quickReplies: ["Pricing", "Business Hours", "Services", "Return Policy"],
122
- inputPlaceholder: "Type your message here...",
123
- privacyText: "By using this chat, you agree to our Privacy Policy",
124
- faqResponses: {
125
- "Pricing": "Our pricing varies depending on the service. For detailed pricing information, please visit our <a href='/pricing' class='text-blue-600 hover:underline'>pricing page</a>. Would you like me to check pricing for a specific service?",
126
- "Business Hours": "Our customer support is available 24/7. Our physical locations are open Monday to Friday from 9 AM to 6 PM.",
127
- "Services": "We offer a wide range of services including [list services]. Which service are you interested in?",
128
- "Return Policy": "Our return policy allows returns within 30 days of purchase with a receipt. For more details, please see our <a href='/returns' class='text-blue-600 hover:underline'>return policy page</a>."
129
- },
130
- leadQuestions: [
131
- "What service do you need?",
132
- "What's your timeline for this service?",
133
- "How can we contact you for follow-up? (Email/Phone)"
134
- ],
135
- schedulePrompt: "Would you like to schedule an appointment? Here's our real-time availability:",
136
- confirmation: "I've sent a confirmation to your email/SMS. Is there anything else I can help with?",
137
- escalation: "I'm connecting you with a human agent now. Please hold..."
138
- },
139
- es: {
140
- greeting: "¡Hola! Soy tu asistente de servicio al cliente multilingüe 24/7. ¿Cómo puedo ayudarte hoy?",
141
- quickReplies: ["Precios", "Horario", "Servicios", "Política de devolución"],
142
- inputPlaceholder: "Escribe tu mensaje aquí...",
143
- privacyText: "Al usar este chat, aceptas nuestra Política de privacidad",
144
- faqResponses: {
145
- "Precios": "Nuestros precios varían según el servicio. Para información detallada, visita nuestra <a href='/pricing' class='text-blue-600 hover:underline'>página de precios</a>. ¿Te gustaría que revise el precio de un servicio específico?",
146
- "Horario": "Nuestro servicio al cliente está disponible 24/7. Nuestras ubicaciones físicas están abiertas de lunes a viernes de 9 AM a 6 PM.",
147
- "Servicios": "Ofrecemos una amplia gama de servicios que incluyen [lista de servicios]. ¿Qué servicio te interesa?",
148
- "Política de devolución": "Nuestra política de devolución permite devoluciones dentro de los 30 días posteriores a la compra con recibo. Para más detalles, consulta nuestra <a href='/returns' class='text-blue-600 hover:underline'>página de política de devolución</a>."
149
- },
150
- leadQuestions: [
151
- "¿Qué servicio necesitas?",
152
- "¿Cuál es tu plazo para este servicio?",
153
- "¿Cómo podemos contactarte para seguimiento? (Correo electrónico/Teléfono)"
154
- ],
155
- schedulePrompt: "¿Te gustaría programar una cita? Aquí está nuestra disponibilidad en tiempo real:",
156
- confirmation: "He enviado una confirmación a tu correo electrónico/SMS. ¿Hay algo más en lo que pueda ayudar?",
157
- escalation: "Te estoy conectando con un agente humano ahora. Por favor espera..."
158
- },
159
- fr: {
160
- greeting: "Bonjour ! Je suis votre assistant de service client multilingue 24/7. Comment puis-je vous aider aujourd'hui ?",
161
- quickReplies: ["Tarifs", "Heures d'ouverture", "Services", "Politique de retour"],
162
- inputPlaceholder: "Tapez votre message ici...",
163
- privacyText: "En utilisant ce chat, vous acceptez notre Politique de confidentialité",
164
- faqResponses: {
165
- "Tarifs": "Nos tarifs varient selon le service. Pour des informations tarifaires détaillées, veuillez visiter notre <a href='/pricing' class='text-blue-600 hover:underline'>page de tarification</a>. Souhaitez-vous que je vérifie le tarif d'un service spécifique ?",
166
- "Heures d'ouverture": "Notre service client est disponible 24h/24 et 7j/7. Nos emplacements physiques sont ouverts du lundi au vendredi de 9h à 18h.",
167
- "Services": "Nous proposons une large gamme de services incluant [liste des services]. Quel service vous intéresse ?",
168
- "Politique de retour": "Notre politique de retour autorise les retours dans les 30 jours suivant l'achat avec un reçu. Pour plus de détails, veuillez consulter notre <a href='/returns' class='text-blue-600 hover:underline'>page de politique de retour</a>."
169
- },
170
- leadQuestions: [
171
- "De quel service avez-vous besoin ?",
172
- "Quel est votre délai pour ce service ?",
173
- "Comment pouvons-nous vous contacter pour un suivi ? (Email/Téléphone)"
174
- ],
175
- schedulePrompt: "Souhaitez-vous prendre rendez-vous ? Voici notre disponibilité en temps réel :",
176
- confirmation: "J'ai envoyé une confirmation à votre email/SMS. Puis-je vous aider avec autre chose ?",
177
- escalation: "Je vous connecte avec un agent humain maintenant. Veuillez patienter..."
178
- }
179
- };
180
-
181
- // Chat state
182
- let chatState = {
183
- isQualifyingLead: false,
184
- leadQuestionsAsked: 0,
185
- leadAnswers: [],
186
- unresolvedQuestions: 0,
187
- waitingForAppointment: false,
188
- currentLeadData: null
189
- };
190
-
191
- // DOM elements
192
- const chatContainer = document.getElementById('chat-container');
193
- const userInput = document.getElementById('user-input');
194
- const sendBtn = document.getElementById('send-btn');
195
- const langButtons = document.querySelectorAll('.lang-btn');
196
- const quickReplyButtons = document.querySelectorAll('.quick-reply');
197
-
198
- // Initialize chat
199
- function initChat() {
200
- // Set language buttons active state
201
- langButtons.forEach(btn => {
202
- if (btn.dataset.lang === currentLang) {
203
- btn.classList.add('bg-blue-700');
204
- } else {
205
- btn.classList.remove('bg-blue-700');
206
- }
207
- });
208
-
209
- // Update UI elements with translations
210
- userInput.placeholder = translations[currentLang].inputPlaceholder;
211
- }
212
-
213
- // Add message to chat
214
- function addMessage(text, isUser = false) {
215
- const messageDiv = document.createElement('div');
216
- messageDiv.className = `flex mb-4 ${isUser ? 'justify-end' : 'justify-start'}`;
217
-
218
- const messageContent = document.createElement('div');
219
- messageContent.className = `message ${isUser ? 'user-message' : 'bot-message'} p-4`;
220
- messageContent.innerHTML = text;
221
-
222
- messageDiv.appendChild(messageContent);
223
- chatContainer.appendChild(messageDiv);
224
-
225
- // Scroll to bottom
226
- chatContainer.scrollTop = chatContainer.scrollHeight;
227
- }
228
 
229
- // Show typing indicator
230
- function showTypingIndicator() {
231
- const typingDiv = document.createElement('div');
232
- typingDiv.className = 'flex mb-4 justify-start';
233
-
234
- const typingContent = document.createElement('div');
235
- typingContent.className = 'message bot-message p-4';
236
- typingContent.innerHTML = '<span class="typing-indicator"></span>';
237
-
238
- typingDiv.appendChild(typingContent);
239
- chatContainer.appendChild(typingDiv);
240
- chatContainer.scrollTop = chatContainer.scrollHeight;
241
-
242
- return typingDiv;
243
- }
244
-
245
- // Hide typing indicator
246
- function hideTypingIndicator(typingDiv) {
247
- if (typingDiv && typingDiv.parentNode) {
248
- typingDiv.parentNode.removeChild(typingDiv);
249
- }
250
- }
251
-
252
- // Process user input
253
- function processInput() {
254
- const inputText = userInput.value.trim();
255
- if (!inputText) return;
256
-
257
- // Add user message to chat
258
- addMessage(inputText, true);
259
- userInput.value = '';
260
-
261
- // Check for escalation triggers
262
- if (inputText.toLowerCase().includes('agent') ||
263
- chatState.unresolvedQuestions >= 3 ||
264
- inputText.toLowerCase().includes('payment issue')) {
265
- escalateToHuman();
266
- return;
267
- }
268
-
269
- // Process based on current state
270
- if (chatState.isQualifyingLead) {
271
- processLeadQualification(inputText);
272
- } else if (chatState.waitingForAppointment) {
273
- processAppointmentConfirmation(inputText);
274
- } else {
275
- processGeneralInquiry(inputText);
276
- }
277
- }
278
-
279
- // Process general inquiry
280
- function processGeneralInquiry(inputText) {
281
- const typingDiv = showTypingIndicator();
282
 
283
- // Simulate processing delay
284
- setTimeout(() => {
285
- hideTypingIndicator(typingDiv);
286
-
287
- // Check if this is a FAQ
288
- let isFAQ = false;
289
- for (const [key, value] of Object.entries(translations[currentLang].faqResponses)) {
290
- if (inputText.toLowerCase().includes(key.toLowerCase())) {
291
- addMessage(value);
292
- isFAQ = true;
293
-
294
- // If it's a service question, start lead qualification
295
- if (key === 'Services' || key === 'Servicios' || key === 'Services') {
296
- setTimeout(() => startLeadQualification(), 1000);
297
- }
298
- break;
299
- }
300
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
301
 
302
- if (!isFAQ) {
303
- // Check if this might be a service request
304
- if (inputText.toLowerCase().includes('service') ||
305
- inputText.toLowerCase().includes('servicio') ||
306
- inputText.toLowerCase().includes('service')) {
307
- addMessage(translations[currentLang].faqResponses['Services']);
308
- setTimeout(() => startLeadQualification(), 1000);
309
- } else {
310
- addMessage("I'm not sure I understand. Could you please rephrase your question or choose from these options?");
311
- chatState.unresolvedQuestions++;
312
-
313
- // Show quick replies
314
- const quickRepliesDiv = document.createElement('div');
315
- quickRepliesDiv.className = 'mt-2 flex flex-wrap gap-2';
316
 
317
- translations[currentLang].quickReplies.forEach(reply => {
318
- const btn = document.createElement('button');
319
- btn.className = 'quick-reply bg-white text-blue-600 px-3 py-1 rounded-full text-sm border border-blue-200 hover:bg-blue-50';
320
- btn.textContent = reply;
321
- btn.addEventListener('click', () => {
322
- addMessage(reply, true);
323
- processGeneralInquiry(reply);
324
- });
325
- quickRepliesDiv.appendChild(btn);
326
- });
 
 
 
 
 
327
 
328
- const lastMessage = chatContainer.lastChild.querySelector('.message');
329
- lastMessage.appendChild(quickRepliesDiv);
330
- }
331
- }
332
- }, 1000);
333
- }
334
-
335
- // Start lead qualification process
336
- function startLeadQualification() {
337
- chatState.isQualifyingLead = true;
338
- chatState.leadQuestionsAsked = 0;
339
- chatState.leadAnswers = [];
340
-
341
- const typingDiv = showTypingIndicator();
342
-
343
- setTimeout(() => {
344
- hideTypingIndicator(typingDiv);
345
- addMessage(translations[currentLang].leadQuestions[0]);
346
- }, 1000);
347
- }
348
-
349
- // Process lead qualification answers
350
- function processLeadQualification(answer) {
351
- chatState.leadAnswers.push(answer);
352
- chatState.leadQuestionsAsked++;
353
-
354
- if (chatState.leadQuestionsAsked < translations[currentLang].leadQuestions.length) {
355
- // Ask next question
356
- const typingDiv = showTypingIndicator();
357
-
358
- setTimeout(() => {
359
- hideTypingIndicator(typingDiv);
360
- addMessage(translations[currentLang].leadQuestions[chatState.leadQuestionsAsked]);
361
- }, 1000);
362
- } else {
363
- // All questions answered - qualify lead
364
- qualifyLead();
365
- }
366
- }
367
 
368
- // Qualify lead based on answers
369
- function qualifyLead() {
370
- const typingDiv = showTypingIndicator();
 
 
 
371
 
372
- setTimeout(() => {
373
- hideTypingIndicator(typingDiv);
374
-
375
- // Simple qualification logic
376
- let leadScore = 0;
377
- if (chatState.leadAnswers[1].toLowerCase().includes('soon') ||
378
- chatState.leadAnswers[1].toLowerCase().includes('urgent') ||
379
- chatState.leadAnswers[1].toLowerCase().includes('pronto') ||
380
- chatState.leadAnswers[1].toLowerCase().includes('urgente') ||
381
- chatState.leadAnswers[1].toLowerCase().includes('rapide') ||
382
- chatState.leadAnswers[1].toLowerCase().includes('urgence')) {
383
- leadScore = 10;
384
- } else if (chatState.leadAnswers[1].toLowerCase().includes('next month') ||
385
- chatState.leadAnswers[1].toLowerCase().includes('proximo mes') ||
386
- chatState.leadAnswers[1].toLowerCase().includes('le mois prochain')) {
387
- leadScore = 5;
388
- }
389
-
390
- // Create JSON for Lovable.dev
391
- const leadData = {
392
- service: chatState.leadAnswers[0],
393
- timeline: chatState.leadAnswers[1],
394
- contact: chatState.leadAnswers[2],
395
- score: leadScore,
396
- timestamp: new Date().toISOString(),
397
- language: currentLang
398
- };
399
-
400
- // Store lead data for potential scheduling
401
- chatState.currentLeadData = leadData;
402
-
403
- // Simulate sending to Lovable.dev webhook
404
- simulateLovableWebhook(leadData);
405
-
406
- // Inform user
407
- let responseText = `Thank you for the information! `;
408
-
409
- if (leadScore >= 8) {
410
- responseText += "This sounds urgent! ";
411
- } else if (leadScore >= 3) {
412
- responseText += "We'll follow up with you soon. ";
413
- }
414
-
415
- responseText += translations[currentLang].schedulePrompt;
416
-
417
- addMessage(responseText);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
418
 
419
- // Show calendar integration (simulated)
420
- const calendarDiv = document.createElement('div');
421
- calendarDiv.className = 'mt-4 p-4 bg-white border border-gray-200 rounded-lg';
422
- calendarDiv.innerHTML = `
423
- <h3 class="font-bold mb-2">Available Time Slots</h3>
424
- <div class="grid grid-cols-2 gap-2">
425
- <button class="time-slot bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-3 rounded">Tomorrow 10 AM</button>
426
- <button class="time-slot bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-3 rounded">Tomorrow 2 PM</button>
427
- <button class="time-slot bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-3 rounded">Friday 11 AM</button>
428
- <button class="time-slot bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-3 rounded">Friday 3 PM</button>
 
 
 
 
429
  </div>
430
- <div class="calendly-badge mt-3">
431
- <i class="fas fa-calendar-alt mr-2"></i>Powered by Calendly
 
 
 
 
 
 
432
  </div>
433
- `;
434
-
435
- const lastMessage = chatContainer.lastChild.querySelector('.message');
436
- lastMessage.appendChild(calendarDiv);
437
-
438
- // Add click handlers to time slots
439
- document.querySelectorAll('.time-slot').forEach(slot => {
440
- slot.addEventListener('click', () => {
441
- const selectedTime = slot.textContent;
442
- addMessage(selectedTime, true);
443
- confirmAppointment(selectedTime);
444
- });
445
- });
446
-
447
- chatState.isQualifyingLead = false;
448
- chatState.waitingForAppointment = true;
449
- }, 1000);
450
- }
451
-
452
- // Simulate Lovable.dev webhook call
453
- function simulateLovableWebhook(leadData) {
454
- console.log('Sending to Lovable.dev webhook:', leadData);
455
-
456
- // In a real implementation, you would use:
457
- // fetch('https://your-lovable-dev-webhook-url', {
458
- // method: 'POST',
459
- // headers: {
460
- // 'Content-Type': 'application/json',
461
- // },
462
- // body: JSON.stringify(leadData)
463
- // })
464
-
465
- // For demo purposes, we'll just log it
466
- const response = {
467
- status: 'success',
468
- message: 'Lead processed',
469
- data: leadData
470
- };
471
-
472
- console.log('Lovable.dev response:', response);
473
- }
474
-
475
- // Confirm appointment
476
- function confirmAppointment(time) {
477
- const typingDiv = showTypingIndicator();
478
-
479
- setTimeout(() => {
480
- hideTypingIndicator(typingDiv);
481
-
482
- // Add appointment time to lead data
483
- chatState.currentLeadData.appointmentTime = time;
484
-
485
- // Simulate sending SMS confirmation
486
- if (chatState.currentLeadData.contact) {
487
- simulateSMSConfirmation(chatState.currentLeadData.contact, time);
488
- }
489
-
490
- addMessage(`Great! I've scheduled your appointment for ${time}. ${translations[currentLang].confirmation}`);
491
-
492
- chatState.waitingForAppointment = false;
493
- }, 1000);
494
- }
495
-
496
- // Simulate SMS confirmation
497
- function simulateSMSConfirmation(contact, time) {
498
- console.log('Sending SMS to:', contact);
499
- console.log('Message:', `Your appointment is scheduled for ${time}. Reply STOP to unsubscribe.`);
500
-
501
- // In a real implementation, you would use Twilio:
502
- // fetch('https://api.twilio.com/2010-04-01/Accounts/YOUR_TWILIO_SID/Messages.json', {
503
- // method: 'POST',
504
- // headers: {
505
- // 'Authorization': 'Basic ' + btoa('YOUR_TWILIO_SID:YOUR_TWILIO_TOKEN'),
506
- // 'Content-Type': 'application/x-www-form-urlencoded',
507
- // },
508
- // body: new URLSearchParams({
509
- // 'To': contact,
510
- // 'From': '+1234567890',
511
- // 'Body': `Your appointment is scheduled for ${time}. Reply STOP to unsubscribe.`
512
- // })
513
- // })
514
- }
515
-
516
- // Process appointment confirmation response
517
- function processAppointmentConfirmation(inputText) {
518
- const typingDiv = showTypingIndicator();
519
-
520
- setTimeout(() => {
521
- hideTypingIndicator(typingDiv);
522
-
523
- if (inputText.toLowerCase().includes('yes') ||
524
- inputText.toLowerCase().includes('sí') ||
525
- inputText.toLowerCase().includes('oui')) {
526
- addMessage("What else can I help you with?");
527
- } else {
528
- addMessage("Thank you for chatting with us! Have a great day!");
529
- }
530
-
531
- chatState.waitingForAppointment = false;
532
- }, 1000);
533
- }
534
-
535
- // Escalate to human agent
536
- function escalateToHuman() {
537
- const typingDiv = showTypingIndicator();
538
-
539
- setTimeout(() => {
540
- hideTypingIndicator(typingDiv);
541
- addMessage(translations[currentLang].escalation);
542
-
543
- // Simulate transfer
544
- console.log('Transferring to human agent...');
545
- }, 1500);
546
- }
547
 
548
- // Change language
549
- function changeLanguage(lang) {
550
- currentLang = lang;
551
- initChat();
552
-
553
- // Add language change message
554
- const typingDiv = showTypingIndicator();
555
-
556
- setTimeout(() => {
557
- hideTypingIndicator(typingDiv);
558
-
559
- let langName = '';
560
- if (lang === 'en') langName = 'English';
561
- if (lang === 'es') langName = 'Spanish';
562
- if (lang === 'fr') langName = 'French';
563
-
564
- addMessage(`Language changed to ${langName}. How can I help you?`);
565
- }, 1000);
566
- }
 
567
 
568
- // Event listeners
569
- sendBtn.addEventListener('click', processInput);
570
- userInput.addEventListener('keypress', (e) => {
571
- if (e.key === 'Enter') processInput();
572
- });
573
-
574
- langButtons.forEach(btn => {
575
- btn.addEventListener('click', () => changeLanguage(btn.dataset.lang));
 
 
 
 
 
 
 
 
 
 
 
576
  });
577
 
578
- quickReplyButtons.forEach(btn => {
579
- btn.addEventListener('click', () => {
580
- addMessage(btn.textContent, true);
581
- processGeneralInquiry(btn.textContent);
 
 
582
  });
583
- });
584
-
585
- // Initialize chat
586
- initChat();
587
  </script>
588
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=abdelhak66/customer-support" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
589
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Employee Suite - Integrations & Deployment</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
 
12
  }
13
+ .integration-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
  }
17
+ .tooltip {
18
+ position: relative;
19
+ display: inline-block;
 
 
 
 
 
 
20
  }
21
+ .tooltip .tooltip-text {
22
+ visibility: hidden;
23
+ width: 200px;
24
+ background-color: #555;
25
+ color: #fff;
26
+ text-align: center;
27
+ border-radius: 6px;
28
+ padding: 5px;
29
+ position: absolute;
30
+ z-index: 1;
31
+ bottom: 125%;
32
+ left: 50%;
33
+ margin-left: -100px;
34
+ opacity: 0;
35
+ transition: opacity 0.3s;
36
  }
37
+ .tooltip:hover .tooltip-text {
38
+ visibility: visible;
39
+ opacity: 1;
 
40
  }
41
+ .deployment-step {
42
+ counter-increment: step-counter;
43
+ position: relative;
44
+ padding-left: 3.5rem;
 
 
 
45
  }
46
+ .deployment-step::before {
47
+ content: counter(step-counter);
48
+ position: absolute;
49
+ left: 0;
50
+ top: 0;
51
+ width: 2.5rem;
52
+ height: 2.5rem;
53
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
54
  color: white;
55
+ border-radius: 50%;
56
+ display: flex;
57
+ align-items: center;
58
+ justify-content: center;
59
  font-weight: bold;
60
  }
61
  </style>
62
  </head>
63
+ <body class="bg-gray-50 font-sans">
64
+ <!-- Header -->
65
+ <header class="gradient-bg text-white shadow-lg">
66
+ <div class="container mx-auto px-4 py-6">
67
+ <div class="flex justify-between items-center">
68
+ <div class="flex items-center space-x-4">
69
+ <i class="fas fa-robot text-3xl"></i>
70
+ <h1 class="text-2xl font-bold">AI Employee Suite</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71
  </div>
72
+ <nav class="hidden md:flex space-x-6">
73
+ <a href="#" class="hover:text-gray-200">Dashboard</a>
74
+ <a href="#" class="hover:text-gray-200">Modules</a>
75
+ <a href="#" class="font-bold border-b-2 border-white">Integrations</a>
76
+ <a href="#" class="hover:text-gray-200">Settings</a>
77
+ </nav>
78
+ <button class="md:hidden text-xl">
79
+ <i class="fas fa-bars"></i>
80
+ </button>
81
  </div>
82
  </div>
83
+ </header>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84
 
85
+ <!-- Main Content -->
86
+ <main class="container mx-auto px-4 py-8">
87
+ <!-- Integrations Section -->
88
+ <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden">
89
+ <div class="gradient-bg p-6 text-white">
90
+ <h2 class="text-2xl font-bold">AI Module Integrations</h2>
91
+ <p class="opacity-90">Connect with your favorite tools and services</p>
92
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
93
 
94
+ <div class="p-6">
95
+ <!-- Integration Table -->
96
+ <div class="overflow-x-auto">
97
+ <table class="min-w-full divide-y divide-gray-200">
98
+ <thead class="bg-gray-50">
99
+ <tr>
100
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AI Module</th>
101
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Integration Tools</th>
102
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Primary Use Cases</th>
103
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
104
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
105
+ </tr>
106
+ </thead>
107
+ <tbody class="bg-white divide-y divide-gray-200">
108
+ <!-- Voice AI -->
109
+ <tr>
110
+ <td class="px-6 py-4 whitespace-nowrap">
111
+ <div class="flex items-center">
112
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
113
+ <i class="fas fa-phone-volume text-blue-600"></i>
114
+ </div>
115
+ <div class="ml-4">
116
+ <div class="text-sm font-medium text-gray-900">Voice AI</div>
117
+ </div>
118
+ </div>
119
+ </td>
120
+ <td class="px-6 py-4 whitespace-nowrap">
121
+ <div class="flex space-x-2">
122
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">Twilio</span>
123
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs font-medium">Plivo</span>
124
+ </div>
125
+ </td>
126
+ <td class="px-6 py-4">
127
+ <div class="text-sm text-gray-500">Call handling, voicemail, IVR systems</div>
128
+ </td>
129
+ <td class="px-6 py-4 whitespace-nowrap">
130
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Connected</span>
131
+ </td>
132
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
133
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button>
134
+ <button class="text-gray-600 hover:text-gray-900">Disconnect</button>
135
+ </td>
136
+ </tr>
137
+
138
+ <!-- Conversation AI -->
139
+ <tr>
140
+ <td class="px-6 py-4 whitespace-nowrap">
141
+ <div class="flex items-center">
142
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
143
+ <i class="fas fa-comments text-purple-600"></i>
144
+ </div>
145
+ <div class="ml-4">
146
+ <div class="text-sm font-medium text-gray-900">Conversation AI</div>
147
+ </div>
148
+ </div>
149
+ </td>
150
+ <td class="px-6 py-4 whitespace-nowrap">
151
+ <div class="flex space-x-2">
152
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">Lovable.dev</span>
153
+ <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium">Dialogflow</span>
154
+ </div>
155
+ </td>
156
+ <td class="px-6 py-4">
157
+ <div class="text-sm text-gray-500">Website/live chat, messaging automation</div>
158
+ </td>
159
+ <td class="px-6 py-4 whitespace-nowrap">
160
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Connected</span>
161
+ </td>
162
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
163
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button>
164
+ <button class="text-gray-600 hover:text-gray-900">Disconnect</button>
165
+ </td>
166
+ </tr>
167
+
168
+ <!-- Reviews AI -->
169
+ <tr>
170
+ <td class="px-6 py-4 whitespace-nowrap">
171
+ <div class="flex items-center">
172
+ <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center">
173
+ <i class="fas fa-star text-green-600"></i>
174
+ </div>
175
+ <div class="ml-4">
176
+ <div class="text-sm font-medium text-gray-900">Reviews AI</div>
177
+ </div>
178
+ </div>
179
+ </td>
180
+ <td class="px-6 py-4 whitespace-nowrap">
181
+ <div class="flex space-x-2">
182
+ <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs font-medium">Google API</span>
183
+ <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium">Yelp API</span>
184
+ </div>
185
+ </td>
186
+ <td class="px-6 py-4">
187
+ <div class="text-sm text-gray-500">Review generation, sentiment analysis</div>
188
+ </td>
189
+ <td class="px-6 py-4 whitespace-nowrap">
190
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
191
+ </td>
192
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
193
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Connect</button>
194
+ <button class="text-gray-600 hover:text-gray-900" disabled>Disconnect</button>
195
+ </td>
196
+ </tr>
197
+
198
+ <!-- Funnel AI -->
199
+ <tr>
200
+ <td class="px-6 py-4 whitespace-nowrap">
201
+ <div class="flex items-center">
202
+ <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center">
203
+ <i class="fas fa-funnel-dollar text-yellow-600"></i>
204
+ </div>
205
+ <div class="ml-4">
206
+ <div class="text-sm font-medium text-gray-900">Funnel AI</div>
207
+ </div>
208
+ </div>
209
+ </td>
210
+ <td class="px-6 py-4 whitespace-nowrap">
211
+ <div class="flex space-x-2">
212
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">GoHighLevel</span>
213
+ <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs font-medium">WordPress</span>
214
+ </div>
215
+ </td>
216
+ <td class="px-6 py-4">
217
+ <div class="text-sm text-gray-500">Landing page automation, funnel creation</div>
218
+ </td>
219
+ <td class="px-6 py-4 whitespace-nowrap">
220
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Connected</span>
221
+ </td>
222
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
223
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button>
224
+ <button class="text-gray-600 hover:text-gray-900">Disconnect</button>
225
+ </td>
226
+ </tr>
227
+
228
+ <!-- Content AI -->
229
+ <tr>
230
+ <td class="px-6 py-4 whitespace-nowrap">
231
+ <div class="flex items-center">
232
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
233
+ <i class="fas fa-pen-fancy text-indigo-600"></i>
234
+ </div>
235
+ <div class="ml-4">
236
+ <div class="text-sm font-medium text-gray-900">Content AI</div>
237
+ </div>
238
+ </div>
239
+ </td>
240
+ <td class="px-6 py-4 whitespace-nowrap">
241
+ <div class="flex space-x-2">
242
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">OpenAI GPT</span>
243
+ <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs font-medium">Jasper</span>
244
+ </div>
245
+ </td>
246
+ <td class="px-6 py-4">
247
+ <div class="text-sm text-gray-500">Blog/social media content generation</div>
248
+ </td>
249
+ <td class="px-6 py-4 whitespace-nowrap">
250
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Connected</span>
251
+ </td>
252
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
253
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button>
254
+ <button class="text-gray-600 hover:text-gray-900">Disconnect</button>
255
+ </td>
256
+ </tr>
257
+
258
+ <!-- Workflow AI -->
259
+ <tr>
260
+ <td class="px-6 py-4 whitespace-nowrap">
261
+ <div class="flex items-center">
262
+ <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center">
263
+ <i class="fas fa-tasks text-red-600"></i>
264
+ </div>
265
+ <div class="ml-4">
266
+ <div class="text-sm font-medium text-gray-900">Workflow AI</div>
267
+ </div>
268
+ </div>
269
+ </td>
270
+ <td class="px-6 py-4 whitespace-nowrap">
271
+ <div class="flex space-x-2">
272
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">Zapier</span>
273
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs font-medium">Make</span>
274
+ </div>
275
+ </td>
276
+ <td class="px-6 py-4">
277
+ <div class="text-sm text-gray-500">CRM/email automation, task workflows</div>
278
+ </td>
279
+ <td class="px-6 py-4 whitespace-nowrap">
280
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Connected</span>
281
+ </td>
282
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
283
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button>
284
+ <button class="text-gray-600 hover:text-gray-900">Disconnect</button>
285
+ </td>
286
+ </tr>
287
+ </tbody>
288
+ </table>
289
+ </div>
290
 
291
+ <!-- Add New Integration -->
292
+ <div class="mt-6 border-t pt-6">
293
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Add New Integration</h3>
294
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
295
+ <select class="border rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
296
+ <option disabled selected>Select AI Module</option>
297
+ <option>Voice AI</option>
298
+ <option>Conversation AI</option>
299
+ <option>Reviews AI</option>
300
+ <option>Funnel AI</option>
301
+ <option>Content AI</option>
302
+ <option>Workflow AI</option>
303
+ </select>
 
304
 
305
+ <select class="border rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
306
+ <option disabled selected>Select Integration Tool</option>
307
+ <option>Twilio</option>
308
+ <option>Plivo</option>
309
+ <option>Lovable.dev</option>
310
+ <option>Dialogflow</option>
311
+ <option>Google API</option>
312
+ <option>Yelp API</option>
313
+ <option>GoHighLevel</option>
314
+ <option>WordPress</option>
315
+ <option>OpenAI GPT</option>
316
+ <option>Jasper</option>
317
+ <option>Zapier</option>
318
+ <option>Make (Integromat)</option>
319
+ </select>
320
 
321
+ <button class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
322
+ Connect Service
323
+ </button>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
328
 
329
+ <!-- Deployment Steps Section -->
330
+ <section class="bg-white rounded-xl shadow-md overflow-hidden">
331
+ <div class="gradient-bg p-6 text-white">
332
+ <h2 class="text-2xl font-bold">Deployment Guide</h2>
333
+ <p class="opacity-90">Step-by-step instructions to deploy your AI Employee Suite</p>
334
+ </div>
335
 
336
+ <div class="p-6">
337
+ <ol class="space-y-8 list-decimal list-inside">
338
+ <!-- Step 1 -->
339
+ <li class="deployment-step">
340
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Host the Code</h3>
341
+ <div class="ml-2">
342
+ <p class="text-gray-600 mb-4">Choose a serverless platform to host your AI Employee Suite:</p>
343
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
344
+ <div class="bg-gray-100 p-4 rounded-lg">
345
+ <div class="flex items-center mb-2">
346
+ <i class="fab fa-aws text-orange-500 text-xl mr-2"></i>
347
+ <h4 class="font-medium">AWS Lambda</h4>
348
+ </div>
349
+ <p class="text-sm text-gray-600">Ideal for scalable, event-driven execution with tight AWS integration.</p>
350
+ <button class="mt-2 text-blue-600 text-sm font-medium">View Setup Guide</button>
351
+ </div>
352
+ <div class="bg-gray-100 p-4 rounded-lg">
353
+ <div class="flex items-center mb-2">
354
+ <i class="fab fa-google text-blue-500 text-xl mr-2"></i>
355
+ <h4 class="font-medium">Google Cloud Functions</h4>
356
+ </div>
357
+ <p class="text-sm text-gray-600">Great for projects already using Google Cloud services.</p>
358
+ <button class="mt-2 text-blue-600 text-sm font-medium">View Setup Guide</button>
359
+ </div>
360
+ </div>
361
+ <div class="bg-gray-800 text-green-400 p-4 rounded-lg overflow-x-auto">
362
+ <code class="text-sm">
363
+ # Sample deployment command<br>
364
+ $ gcloud functions deploy ai-employee-suite \<br>
365
+ &nbsp;&nbsp;--runtime python39 \<br>
366
+ &nbsp;&nbsp;--trigger-http \<br>
367
+ &nbsp;&nbsp;--allow-unauthenticated
368
+ </code>
369
+ </div>
370
+ </div>
371
+ </li>
372
+
373
+ <!-- Step 2 -->
374
+ <li class="deployment-step">
375
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Connect APIs</h3>
376
+ <div class="ml-2">
377
+ <p class="text-gray-600 mb-4">Integrate with essential services for full functionality:</p>
378
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
379
+ <div class="bg-gray-100 p-4 rounded-lg">
380
+ <div class="flex items-center mb-2">
381
+ <i class="fas fa-credit-card text-purple-500 text-xl mr-2"></i>
382
+ <h4 class="font-medium">Stripe</h4>
383
+ </div>
384
+ <p class="text-sm text-gray-600">For payment processing and monetization.</p>
385
+ <div class="mt-2 flex items-center">
386
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">Connected</span>
387
+ <button class="ml-2 text-blue-600 text-xs font-medium">Configure</button>
388
+ </div>
389
+ </div>
390
+ <div class="bg-gray-100 p-4 rounded-lg">
391
+ <div class="flex items-center mb-2">
392
+ <i class="fas fa-level-up-alt text-blue-500 text-xl mr-2"></i>
393
+ <h4 class="font-medium">GoHighLevel</h4>
394
+ </div>
395
+ <p class="text-sm text-gray-600">For funnel automation and CRM features.</p>
396
+ <div class="mt-2 flex items-center">
397
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">Connected</span>
398
+ <button class="ml-2 text-blue-600 text-xs font-medium">Configure</button>
399
+ </div>
400
+ </div>
401
+ <div class="bg-gray-100 p-4 rounded-lg">
402
+ <div class="flex items-center mb-2">
403
+ <i class="fas fa-phone text-green-500 text-xl mr-2"></i>
404
+ <h4 class="font-medium">Twilio</h4>
405
+ </div>
406
+ <p class="text-sm text-gray-600">For Voice AI call handling and SMS.</p>
407
+ <div class="mt-2 flex items-center">
408
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">Connected</span>
409
+ <button class="ml-2 text-blue-600 text-xs font-medium">Configure</button>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
414
+ <div class="flex">
415
+ <div class="flex-shrink-0">
416
+ <i class="fas fa-exclamation-circle text-yellow-400"></i>
417
+ </div>
418
+ <div class="ml-3">
419
+ <p class="text-sm text-yellow-700">
420
+ Ensure all API keys are stored securely using environment variables or a secrets manager.
421
+ </p>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </li>
427
+
428
+ <!-- Step 3 -->
429
+ <li class="deployment-step">
430
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Embed in Platforms</h3>
431
+ <div class="ml-2">
432
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
433
+ <div>
434
+ <h4 class="font-medium text-gray-700 mb-2">Website Chatbot</h4>
435
+ <p class="text-gray-600 text-sm mb-3">Add the Lovable.dev chatbot to your website:</p>
436
+ <div class="bg-gray-800 text-green-400 p-4 rounded-lg overflow-x-auto">
437
+ <code class="text-sm">
438
+ &lt;!-- Add to your website's &lt;head&gt; --&gt;<br>
439
+ &lt;script src="https://cdn.lovable.dev/chatbot.js"&gt;&lt;/script&gt;<br>
440
+ &lt;script&gt;<br>
441
+ &nbsp;&nbsp;window.lovableSettings = {<br>
442
+ &nbsp;&nbsp;&nbsp;&nbsp;apiKey: 'YOUR_API_KEY',<br>
443
+ &nbsp;&nbsp;&nbsp;&nbsp;position: 'bottom-right'<br>
444
+ &nbsp;&nbsp;};<br>
445
+ &lt;/script&gt;
446
+ </code>
447
+ </div>
448
+ <button class="mt-3 text-sm text-blue-600 font-medium">Copy Embed Code</button>
449
+ </div>
450
+ <div>
451
+ <h4 class="font-medium text-gray-700 mb-2">Webhook Setup</h4>
452
+ <p class="text-gray-600 text-sm mb-3">Configure webhooks to trigger workflows:</p>
453
+ <div class="bg-gray-100 p-4 rounded-lg">
454
+ <div class="flex items-center mb-2">
455
+ <i class="fab fa-slack text-purple-500 text-xl mr-2"></i>
456
+ <h4 class="font-medium">Sample Webhook URL</h4>
457
+ </div>
458
+ <div class="bg-white p-2 rounded border text-sm text-gray-700 mb-2 overflow-x-auto">
459
+ https://api.yourservice.com/webhook/ai-employee?token=SECURE_TOKEN
460
+ </div>
461
+ <p class="text-xs text-gray-500">Use this URL in Zapier/Make to trigger workflows</p>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </li>
467
+
468
+ <!-- Step 4 -->
469
+ <li class="deployment-step">
470
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Testing & Monitoring</h3>
471
+ <div class="ml-2">
472
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
473
+ <div class="bg-gray-100 p-4 rounded-lg">
474
+ <h4 class="font-medium text-gray-700 mb-2">Test All Modules</h4>
475
+ <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
476
+ <li>Verify voice call quality</li>
477
+ <li>Test chatbot responses</li>
478
+ <li>Check review generation</li>
479
+ <li>Validate funnel creation</li>
480
+ </ul>
481
+ <button class="mt-3 bg-purple-600 hover:bg-purple-700 text-white py-1 px-3 rounded text-sm font-medium">
482
+ Run Test Suite
483
+ </button>
484
+ </div>
485
+ <div class="bg-gray-100 p-4 rounded-lg">
486
+ <h4 class="font-medium text-gray-700 mb-2">Monitoring Setup</h4>
487
+ <div class="flex items-center space-x-3">
488
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">New Relic</span>
489
+ <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs font-medium">Datadog</span>
490
+ <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium">Sentry</span>
491
+ </div>
492
+ <p class="text-xs text-gray-500 mt-2">Recommended for performance tracking and error monitoring</p>
493
+ <button class="mt-3 text-sm text-blue-600 font-medium">Configure Monitoring</button>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </li>
498
+ </ol>
499
 
500
+ <!-- Deployment Completion -->
501
+ <div class="mt-8 border-t pt-6">
502
+ <div class="bg-green-50 border-l-4 border-green-400 p-4">
503
+ <div class="flex">
504
+ <div class="flex-shrink-0">
505
+ <i class="fas fa-check-circle text-green-400"></i>
506
+ </div>
507
+ <div class="ml-3">
508
+ <p class="text-sm text-green-700">
509
+ <span class="font-bold">Congratulations!</span> Your AI Employee Suite is now ready for deployment.
510
+ Follow these final steps to go live.
511
+ </p>
512
+ </div>
513
+ </div>
514
  </div>
515
+
516
+ <div class="mt-4 flex justify-end space-x-3">
517
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg font-medium">
518
+ Save for Later
519
+ </button>
520
+ <button class="gradient-bg hover:opacity-90 text-white py-2 px-4 rounded-lg font-medium">
521
+ Complete Deployment
522
+ </button>
523
  </div>
524
+ </div>
525
+ </div>
526
+ </section>
527
+ </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
528
 
529
+ <!-- Footer -->
530
+ <footer class="bg-white border-t mt-12">
531
+ <div class="container mx-auto px-4 py-6">
532
+ <div class="flex flex-col md:flex-row justify-between items-center">
533
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
534
+ <i class="fas fa-robot text-purple-600"></i>
535
+ <span class="font-medium">AI Employee Suite</span>
536
+ </div>
537
+ <div class="flex space-x-6">
538
+ <a href="#" class="text-gray-600 hover:text-gray-900">Privacy</a>
539
+ <a href="#" class="text-gray-600 hover:text-gray-900">Terms</a>
540
+ <a href="#" class="text-gray-600 hover:text-gray-900">Docs</a>
541
+ <a href="#" class="text-gray-600 hover:text-gray-900">Support</a>
542
+ </div>
543
+ </div>
544
+ <div class="mt-4 text-center md:text-left text-sm text-gray-500">
545
+ © 2023 AI Employee Suite. All rights reserved.
546
+ </div>
547
+ </div>
548
+ </footer>
549
 
550
+ <script>
551
+ // Simple function to handle the "Copy Embed Code" button
552
+ document.querySelectorAll('button').forEach(button => {
553
+ if (button.textContent.includes('Copy Embed Code')) {
554
+ button.addEventListener('click', function() {
555
+ const codeBlock = this.previousElementSibling.querySelector('code');
556
+ navigator.clipboard.writeText(codeBlock.textContent);
557
+
558
+ // Change button text temporarily
559
+ const originalText = this.textContent;
560
+ this.textContent = 'Copied!';
561
+ this.classList.add('text-green-600');
562
+
563
+ setTimeout(() => {
564
+ this.textContent = originalText;
565
+ this.classList.remove('text-green-600');
566
+ }, 2000);
567
+ });
568
+ }
569
  });
570
 
571
+ // Handle test suite button
572
+ const testSuiteButton = document.querySelector('button:contains("Run Test Suite")');
573
+ if (testSuiteButton) {
574
+ testSuiteButton.addEventListener('click', function() {
575
+ alert('Running comprehensive test suite... Check console for results.');
576
+ console.log('AI Employee Suite Test Results:\n- Voice AI: ✅\n- Conversation AI: ✅\n- Reviews AI: ✅\n- Funnel AI: ✅\n- Content AI: ✅\n- Workflow AI: ✅');
577
  });
578
+ }
 
 
 
579
  </script>
580
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=abdelhak66/customer-support" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
581
  </html>