🤖 General Widget Manager

Beheer de algemene ITLive widget die op itlive.nl wordt getoond

⚙️ Widget Configuratie

Dit bepaalt hoe de AI zich gedraagt. Beschrijf de rol, toon en expertise van de assistent.

🤖 AI Instellingen

Configureer AI provider, max tokens, temperature en memory instellingen.

Maximum aantal tokens voor AI responses (100-8000). Hoger = langere responses.
Creativiteit van AI (0.0 = deterministisch, 2.0 = zeer creatief). Aanbevolen: 0.7
AI gebruikt RAG documents voor betere context en antwoorden.
AI onthoudt vorige gesprekken per sessie voor context.
Hoeveel dagen chat history bewaard blijft (1-365).
Selecteer AI provider. "Auto" gebruikt de provider uit Admin → AI Providers.

🔗 Embed Code Generator

Genereer embed code om de widget op externe websites te plaatsen.

Unieke token voor embed authenticatie. Bewaar deze veilig!
  1. Kopieer de embed code hierboven
  2. Plak de code vóór de </body> tag op je website
  3. De widget verschijnt automatisch in de rechterbenedenhoek
  4. Widget gebruikt persistent memory per bezoeker (via localStorage)
  5. RAG documents worden automatisch gebruikt voor context

📚 RAG Documents

Upload en beheer documents voor RAG (Retrieval Augmented Generation). AI gebruikt deze voor betere context.

Voegt Admin-pagina's en Klantportaal-beschrijving toe aan RAG.
Ondersteunde formaten: TXT, PDF, DOC, DOCX, MD

Bestaande RAG Documents

Nog geen RAG documents. Voeg er een toe!

📋 Widget Instructies

Maak meerdere instructies die de AI moet volgen. Deze worden toegevoegd aan de system prompt.

Bestaande Instructies

Nog geen instructies. Voeg er een toe!

📚 Kennis Base

Voeg ITLive-specifieke kennis toe die de widget kan gebruiken om klanten te helpen.

Voeg hier alle relevante informatie toe over ITLive: diensten, prijzen, features, support info, etc.

Huidige Kennis Base Preview:

Geen kennis base content.

🎓 Training Data

Voeg vraag-antwoord paren toe om de widget te trainen op specifieke vragen.

Bestaande Training Data

Nog geen training data. Voeg er een toe!

🧙 Snel Widget Installeren - Wizard

Volg deze stappen om de widget snel in te stellen en te installeren.

Stap 1: Basis Configuratie ✅

Ga naar de ⚙️ Configuratie tab en vul de basisinstellingen in:

  • Widget Naam
  • Widget Titel
  • Welkomstbericht
  • System Prompt

Stap 2: AI Instellingen ✅

Configureer AI in de 🤖 AI Instellingen tab:

  • Max Tokens (aanbevolen: 2000)
  • Temperature (aanbevolen: 0.7)
  • Schakel RAG in voor betere context
  • Schakel Persistent Memory in voor chat geschiedenis

Stap 3: RAG Documents Toevoegen (Optioneel)

Voeg relevante documents toe in de 📚 RAG Documents tab voor betere AI context:

  • Prijzen informatie
  • Diensten overzicht
  • Support informatie
  • Technische documentatie

Stap 4: Instructies Toevoegen (Optioneel)

Maak instructies in de 📋 Instructies tab om AI gedrag te sturen:

  • Altijd vriendelijk zijn
  • Specifieke diensten benadrukken
  • Call-to-action toevoegen

Stap 5: Embed Code Kopiëren 🚀

Kopieer de embed code uit de 🔗 Embed Code tab en plak deze op je website:

<script src="https://portal.itlive.nl/admin_portal/widgets/general-widget-embed.js?token=GENERATE_TOKEN"></script>

💡 Tips

  • Test de widget eerst in de 👁️ Preview tab
  • Zorg dat AI Providers zijn geconfigureerd in Admin → AI Providers
  • RAG documents verbeteren de kwaliteit van AI antwoorden aanzienlijk
  • Persistent memory zorgt voor betere context in langere gesprekken
  • Meerdere instructies kunnen elkaar aanvullen

👥 Automatische Widget Generatie voor Klanten

Genereer automatisch AI widgets voor klanten op basis van hun bedrijfsgegevens, RAG index en services.

Voer het klant ID in om automatisch een widget te genereren met AI op basis van klantgegevens.

Gegenereerde Klant Widgets

Laden...

📊 Widget Analytics

Bekijk statistieken en gebruik van de widgets.

-

Totaal Sessies

-

Totaal Berichten

-

Actieve Widgets

👁️ Widget Preview

Test hoe de widget eruit ziet en werkt

`; document.getElementById('embed-code-html').value = embedCode; }); // Save embed settings document.getElementById('embed-enabled')?.addEventListener('change', async function() { const res = await fetch('/admin_portal/api/general-widget-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'save-embed-settings', embed_enabled: this.checked }) }); const result = await res.json(); if (result.success) { showAlert('embed-alert', '✅ Embed instellingen opgeslagen!', 'success'); } }); // RAG document form document.getElementById('rag-form')?.addEventListener('submit', async (e) => { e.preventDefault(); const formData = new FormData(); formData.append('action', 'add-rag-document'); formData.append('title', document.getElementById('rag-title').value); formData.append('category', document.getElementById('rag-category').value); formData.append('content', document.getElementById('rag-content').value); const fileInput = document.getElementById('rag-file'); if (fileInput.files.length > 0) { formData.append('file', fileInput.files[0]); } const res = await fetch('/admin_portal/api/general-widget-api.php', { method: 'POST', body: formData }); const result = await res.json(); if (result.success) { showAlert('rag-alert', '✅ RAG document toegevoegd!', 'success'); document.getElementById('rag-form').reset(); setTimeout(() => location.reload(), 1000); } else { showAlert('rag-alert', '❌ Fout: ' + result.message, 'error'); } }); async function deleteRAGDocument(id) { if (!confirm('Weet je zeker dat je dit RAG document wilt verwijderen?')) return; const res = await fetch('/admin_portal/api/general-widget-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'delete-rag-document', id: id }) }); const result = await res.json(); if (result.success) { location.reload(); } else { alert('Fout: ' + result.message); } } document.getElementById('btn-index-portal-data')?.addEventListener('click', async function() { const btn = this; btn.disabled = true; btn.textContent = 'Bezig…'; const res = await fetch('/admin_portal/api/general-widget-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'index-portal-data' }) }); const result = await res.json(); btn.disabled = false; btn.textContent = '🌐 Indexeer met portaldata'; if (result.success) { showAlert('rag-alert', '✅ ' + result.message, 'success'); setTimeout(() => location.reload(), 1200); } else { showAlert('rag-alert', '❌ ' + (result.message || 'Fout bij indexeren'), 'error'); } }); // Instructions form document.getElementById('instructions-form')?.addEventListener('submit', async (e) => { e.preventDefault(); const data = { action: 'add-instruction', instruction_name: document.getElementById('instruction-name').value, instruction_text: document.getElementById('instruction-text').value, priority: parseInt(document.getElementById('instruction-priority').value), is_active: document.getElementById('instruction-active').checked }; if (!data.instruction_name || !data.instruction_text) { showAlert('instructions-alert', '❌ Naam en tekst zijn verplicht', 'error'); return; } const res = await fetch('/admin_portal/api/general-widget-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); const result = await res.json(); if (result.success) { showAlert('instructions-alert', '✅ Instructie toegevoegd!', 'success'); document.getElementById('instructions-form').reset(); setTimeout(() => location.reload(), 1000); } else { showAlert('instructions-alert', '❌ Fout: ' + result.message, 'error'); } }); async function toggleInstruction(id, isActive) { const res = await fetch('/admin_portal/api/general-widget-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'toggle-instruction', id: id, is_active: isActive }) }); const result = await res.json(); if (result.success) { location.reload(); } else { alert('Fout: ' + result.message); } } async function deleteInstruction(id) { if (!confirm('Weet je zeker dat je deze instructie wilt verwijderen?')) return; const res = await fetch('/admin_portal/api/general-widget-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'delete-instruction', id: id }) }); const result = await res.json(); if (result.success) { location.reload(); } else { alert('Fout: ' + result.message); } } function showAlert(containerId, message, type) { const container = document.getElementById(containerId); if (!container) return; container.innerHTML = `
${message}
`; setTimeout(() => { container.innerHTML = ''; }, 5000); } // Customer widgets functions async function generateCustomerWidget() { const customerId = parseInt(document.getElementById('customer-id-widget').value); if (!customerId || customerId <= 0) { showAlert('customer-widgets-alert', '❌ Voer een geldig klant ID in', 'error'); return; } const btn = event.target; btn.disabled = true; btn.textContent = 'Bezig met genereren...'; try { const res = await fetch('/admin_portal/api/general-widget-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'generate-customer-widget', customer_id: customerId }) }); const result = await res.json(); if (result.success) { showAlert('customer-widgets-alert', '✅ Widget succesvol gegenereerd! Embed token: ' + result.embed_token, 'success'); loadCustomerWidgets(); } else { showAlert('customer-widgets-alert', '❌ Fout: ' + result.message, 'error'); } } catch (error) { showAlert('customer-widgets-alert', '❌ Fout: ' + error.message, 'error'); } finally { btn.disabled = false; btn.textContent = '🤖 Genereer Widget voor Klant'; } } async function loadCustomerWidgets() { const res = await fetch('/admin_portal/api/general-widget-api.php?action=list-customer-widgets'); const data = await res.json(); const container = document.getElementById('customer-widgets-list'); if (!data.success || !data.widgets || data.widgets.length === 0) { container.innerHTML = '

Nog geen klant widgets gegenereerd.

'; return; } container.innerHTML = data.widgets.map(widget => `
${widget.widget_name || 'Widget'} Klant ID: ${widget.customer_id} ${widget.auto_generated ? '🤖 Auto' : ''}
Embed Token: ${widget.embed_token}
Welkomstbericht: ${widget.welcome_message || 'Geen'}
`).join(''); } async function deleteCustomerWidget(id) { if (!confirm('Weet je zeker dat je deze klant widget wilt verwijderen?')) return; // TODO: Add delete endpoint alert('Delete functionaliteit komt binnenkort'); } async function loadAnalytics() { // TODO: Implement analytics loading document.getElementById('total-sessions').textContent = '0'; document.getElementById('total-messages').textContent = '0'; document.getElementById('active-widgets').textContent = '1'; }