{"id":6,"date":"2025-12-19T10:11:59","date_gmt":"2025-12-19T10:11:59","guid":{"rendered":"https:\/\/test.vanachat.nl\/?page_id=6"},"modified":"2026-02-18T16:28:25","modified_gmt":"2026-02-18T16:28:25","slug":"elementor-6","status":"publish","type":"page","link":"https:\/\/test.vanachat.nl\/","title":{"rendered":"Elementor #6"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6\" class=\"elementor elementor-6\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe2ef44 e-flex e-con-boxed e-con e-parent\" data-id=\"fe2ef44\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2f700d6 e-flex e-con-boxed e-con e-parent\" data-id=\"2f700d6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c7233f elementor-widget elementor-widget-html\" data-id=\"0c7233f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- VANA Chat Widget -->\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\r\n<div id=\"vana-chat-widget-694708c31b1668e6b62fe370\"><\/div>\r\n<script>\r\n(function() {\r\n  const config = {\r\n    chatbotId: \"694708c31b1668e6b62fe370\",\r\n    chatbotName: \"VANA Chat\",\r\n    primaryColor: \"#3b82f6\",\r\n    secondaryColor: \"#1e40af\",\r\n    accentColor: \"#2563eb\",\r\n    headerTextColor: \"#ffffff\",\r\n    welcomeMessage: `Hi! \ud83d\udc4b Benieuwd hoe zo'n chatbot op jouw eigen site zou staan? Vraag me gerust hoe het werkt of wat het kost!`,\r\n    apiUrl: \"https:\/\/preview-sandbox--84d6cae32a36c1a7809cf54a18a4e70c.base44.app\/api\",\r\n    position: \"bottom-right\",\r\n    whiteLabel: false,\r\n\r\n    welcomeScreen: {\r\n      enabled: true,\r\n      title: \"Welkom bij VANA Chat!\",\r\n      description: \"Benieuwd hoe VANA Chat werkt of wat het kost? Ik help je direct verder. Klik op 'Start Chat' om te starten.\",\r\n      buttonText: \"Start chat\",\r\n      menuTitle: \"MEER OPTIES\",\r\n      menuLinks: [{\"label\":\"Direct een demo boeken\",\"url\":\"https:\/\/vanachat.nl\/contact\/\",\"icon\":\"\ud83d\udccb\"}]\r\n    },\r\n    \r\n    typingDelay: {\r\n      min: 800,\r\n      max: 2000,\r\n      perCharacter: 15\r\n    },\r\n    \r\n    faqs: [{\"vraag\":\"Is de installatie moeilijk?\",\"antwoord\":\"Nee, het is eenvoudig. Voeg \u00e9\u00e9n regeltje code toe aan uw website en wij kunnen het ook gratis voor u doen, zodat uw bot binnen 24 uur live is.\"},{\"vraag\":\"Op welke platforms werkt VANA Chat?\",\"antwoord\":\"VANA Chat werkt op elk platform waar u HTML kunt toevoegen, zoals WordPress, Shopify, Squarespace, Wix, en Phoenix.\"},{\"vraag\":\"Vertraagt dit mijn website?\",\"antwoord\":\"Nee, het script laadt asynchroon, waardoor uw website eerst volledig laadt en daarna pas de chatbot, zonder merkbare vertraging voor bezoekers.\"},{\"vraag\":\"Kan ik de kleuren van de chatbot aanpassen?\",\"antwoord\":\"Ja, de chatbot kan volledig gestyled worden in uw huisstijl, inclusief uw logo en kleurenschema.\"},{\"vraag\":\"Hoe verzamelt de bot informatie over mijn bedrijf?\",\"antwoord\":\"Wij voeden de bot met informatie van uw website, documenten en PDF's, zodat hij snel kan antwoorden.\"},{\"vraag\":\"Wat als de bot het antwoord niet weet?\",\"antwoord\":\"De bot vraagt om contactgegevens van de bezoeker en stuurt deze naar u door, zodat u zelf verder kunt helpen.\"},{\"vraag\":\"Kan de bot onjuiste informatie geven?\",\"antwoord\":\"De AI is strikt ingesteld en mag alleen antwoorden geven op basis van de informatie die wij bieden, waardoor de kans op onjuiste antwoorden minimaal is.\"},{\"vraag\":\"In welke talen kan de bot antwoorden?\",\"antwoord\":\"VANA Chat spreekt standaard meer dan 50 talen en beantwoordt automatisch in de taal van de gebruiker.\"},{\"vraag\":\"Is VANA Chat AVG \/ GDPR proof?\",\"antwoord\":\"Ja, we sluiten een verwerkersovereenkomst en zorgen ervoor dat data veilig op Europese servers wordt opgeslagen.\"},{\"vraag\":\"Wat gebeurt er met de gegevens van mijn klanten?\",\"antwoord\":\"De gegevens worden veilig opgeslagen in uw dashboard en worden nooit gebruikt om publieke AI-modellen te trainen.\"},{\"vraag\":\"Kan de chatbot afspraken inplannen?\",\"antwoord\":\"Ja, we kunnen de bot koppelen aan uw agendatool of de voorkeursdatum van de klant noteren en naar u mailen.\"},{\"vraag\":\"Kan de bot orders opzoeken voor mijn webshop?\",\"antwoord\":\"Ja, we kunnen geavanceerde koppelingen maken, maar de bot kan ook veelgestelde vragen over levertijden en retouren beantwoorden.\"},{\"vraag\":\"Kan ik het gesprek zelf overnemen?\",\"antwoord\":\"Ja, u ontvangt een melding als er een lead binnenkomt en u kunt dan direct contact opnemen met de klant.\"},{\"vraag\":\"Hoe kan VANA Chat een rijschool helpen?\",\"antwoord\":\"De chatbot vangt nieuwe leerlingen op, beantwoordt vragen over pakketprijzen en plant proeflessen in terwijl u lesgeeft.\"},{\"vraag\":\"Wat zijn de voordelen voor tandartsen?\",\"antwoord\":\"De bot ontlast de balieassistent door veelgestelde vragen zoals openingstijden en tarieven te beantwoorden.\"},{\"vraag\":\"Levert het gebruik van een chatbot voor een webshop winst op?\",\"antwoord\":\"Ja, de chatbot helpt klanten die twijfelen om vragen te stellen en verhoogt zo de conversie, vooral in de avonduren.\"},{\"vraag\":\"Zijn er verborgen kosten per gesprek?\",\"antwoord\":\"Nee, we werken met transparante pakketten. Bij normaal gebruik zijn er geen extra kosten per bericht.\"},{\"vraag\":\"Is er een gratis proefperiode?\",\"antwoord\":\"Ja, vaak kunnen we een pilot starten waarbij u de software de eerste maand gratis mag testen. U betaalt dan alleen de eenmalige inrichtingskosten.\"},{\"vraag\":\"Zit ik aan een lang contract vast?\",\"antwoord\":\"Nee, wij geloven in onze kracht. Onze abonnementen zijn maandelijks opzegbaar. U zit nergens aan vast.\"},{\"vraag\":\"Wat kost VANA Chat?\",\"antwoord\":\"We werken met een vast, laag maandbedrag en een eenmalige setup-fee voor de inrichting. Omdat we maatwerk leveren, doen we graag een persoonlijk voorstel. Vraag gerust een offerte aan!\"}],\r\n    leadForm: {\r\n      message: `Laat uw gegevens achter`,\r\n      fields: {\"specifieke_vraag_enabled\":false,\"bedrijf\":true,\"meerkeuze_vraag_enabled\":false,\"telefoon\":true,\"meerkeuze_vraag_text\":null,\"naam\":true,\"afspraak_plannen\":false,\"specifieke_vraag_text\":null,\"meerkeuze_opties\":[],\"email\":true},\r\n      naam_vraag: \"Ik help je graag verder! Mag ik eerst je naam weten?\",\r\n      telefoon_vraag: \"Wat is je telefoonnummer?\",\r\n      email_vraag: \"En tot slot, wat is je e-mailadres?\",\r\n      afspraak_datum_vraag: \"Op welke datum wil je langskomen?\",\r\n      afspraak_tijd_vraag: \"Hoe laat zou je willen komen?\",\r\n      succes_bericht: \"Bedankt voor je gegevens! We nemen binnen 24 uur contact met je op.\"\r\n    },\r\n    proactive: {\r\n      enabled: true,\r\n      timeDelay: 5,\r\n      scrollTrigger: 0,\r\n      exitIntent: false,\r\n      pageRules: []\r\n    },\r\n    menuItems: [{\"question\":\"Wat is VANA Chat?\",\"label\":\"VANA Chat\"},{\"question\":\"Wat kost VANA Chat?\",\"label\":\"Kosten\"},{\"question\":\"Is de installatie moeilijk?\",\"label\":\"Installatie\"}]\r\n  };\r\n\r\n  \/\/ Widget CSS - Modern SaaS Design\r\n  const style = document.createElement('style');\r\n  style.textContent = `\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\r\n    \r\n    @keyframes vana-float {\r\n      0%, 100% { transform: translateY(0px); }\r\n      50% { transform: translateY(-6px); }\r\n    }\r\n    \r\n    @keyframes vana-glow {\r\n      0%, 100% { box-shadow: 0 8px 32px rgba(236, 72, 153, 0.25), 0 0 0 0 rgba(236, 72, 153, 0.4); }\r\n      50% { box-shadow: 0 12px 40px rgba(236, 72, 153, 0.35), 0 0 0 12px rgba(236, 72, 153, 0); }\r\n    }\r\n    #vana-widget-button-${config.chatbotId} {\r\n      position: fixed;\r\n      bottom: 24px;\r\n      right: 24px;\r\n      width: 60px;\r\n      height: 60px;\r\n      border-radius: 50%;\r\n      background: linear-gradient(135deg, ${config.primaryColor} 0%, ${config.secondaryColor} 100%);\r\n      border: none;\r\n      cursor: pointer;\r\n      z-index: 99999;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n      animation: vana-float 3s ease-in-out infinite, vana-glow 3s ease-in-out infinite;\r\n      box-shadow: 0 8px 32px rgba(0,0,0,0.25);\r\n    }\r\n    \r\n    #vana-widget-button-${config.chatbotId}::before {\r\n      content: '';\r\n      position: absolute;\r\n      inset: -2px;\r\n      border-radius: 50%;\r\n      background: linear-gradient(135deg, ${config.primaryColor}, ${config.accentColor});\r\n      opacity: 0;\r\n      transition: opacity 0.3s;\r\n      z-index: -1;\r\n    }\r\n    \r\n    #vana-widget-button-${config.chatbotId}:hover::before {\r\n      opacity: 1;\r\n    }\r\n    \r\n    #vana-widget-button-${config.chatbotId} svg {\r\n      width: 28px;\r\n      height: 28px;\r\n      fill: white;\r\n      transition: transform 0.3s;\r\n    }\r\n    \r\n    #vana-widget-button-${config.chatbotId}:hover {\r\n      transform: scale(1.1) translateY(-4px);\r\n      animation: none;\r\n    }\r\n    \r\n    #vana-widget-button-${config.chatbotId}:hover svg {\r\n      transform: scale(1.1);\r\n    }\r\n    \r\n    #vana-widget-button-${config.chatbotId}:active {\r\n      transform: scale(1.05) translateY(-2px);\r\n    }\r\n    #vana-widget-container-${config.chatbotId} {\r\n      position: fixed;\r\n      bottom: 100px;\r\n      right: 24px;\r\n      width: 420px;\r\n      height: 680px;\r\n      background: rgba(255, 255, 255, 0.95);\r\n      backdrop-filter: blur(20px) saturate(180%);\r\n      -webkit-backdrop-filter: blur(20px) saturate(180%);\r\n      border-radius: 20px;\r\n      box-shadow: \r\n        0 20px 60px rgba(0, 0, 0, 0.12),\r\n        0 0 0 1px rgba(255, 255, 255, 0.5),\r\n        inset 0 1px 0 rgba(255, 255, 255, 0.8);\r\n      z-index: 99999;\r\n      display: none;\r\n      flex-direction: column;\r\n      overflow: hidden;\r\n      animation: slideUpScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n    }\r\n    \r\n    @media (max-width: 768px) {\r\n      #vana-widget-container-${config.chatbotId} {\r\n        bottom: 100px;\r\n        right: 12px;\r\n        left: 12px;\r\n        width: calc(100vw - 24px);\r\n        height: calc(100dvh - 130px);\r\n        max-height: 700px;\r\n        border-radius: 20px;\r\n      }\r\n      \r\n      #vana-widget-button-${config.chatbotId} {\r\n        bottom: 20px;\r\n        right: 20px;\r\n        width: 56px;\r\n        height: 56px;\r\n      }\r\n    }\r\n    \r\n    @keyframes slideUpScale {\r\n      0% { \r\n        opacity: 0; \r\n        transform: translateY(40px) scale(0.9);\r\n      }\r\n      100% { \r\n        opacity: 1; \r\n        transform: translateY(0) scale(1);\r\n      }\r\n    }\r\n    #vana-widget-container-${config.chatbotId}.open {\r\n      display: flex;\r\n    }\r\n    #vana-widget-header-${config.chatbotId} {\r\n      background: linear-gradient(135deg, ${config.primaryColor} 0%, ${config.accentColor} 100%);\r\n      color: ${config.headerTextColor};\r\n      padding: 24px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n    \r\n    #vana-widget-header-${config.chatbotId}::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 100%);\r\n      pointer-events: none;\r\n    }\r\n    \r\n    #vana-widget-header-${config.chatbotId}::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: -50%;\r\n      right: -10%;\r\n      width: 200px;\r\n      height: 200px;\r\n      border-radius: 50%;\r\n      background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);\r\n      animation: float-bubble 8s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes float-bubble {\r\n      0%, 100% { transform: translate(0, 0); }\r\n      50% { transform: translate(-20px, 20px); }\r\n    }\r\n    \r\n    #vana-widget-header-${config.chatbotId} h3 {\r\n      margin: 0;\r\n      font-size: 18px;\r\n      font-weight: 700;\r\n      letter-spacing: -0.03em;\r\n      position: relative;\r\n      z-index: 1;\r\n    }\r\n    \r\n    #vana-widget-header-${config.chatbotId} p {\r\n      margin: 4px 0 0 0;\r\n      font-size: 13px;\r\n      opacity: 0.9;\r\n      font-weight: 500;\r\n      position: relative;\r\n      z-index: 1;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n    }\r\n    \r\n    #vana-widget-header-${config.chatbotId} p::before {\r\n      content: '';\r\n      width: 6px;\r\n      height: 6px;\r\n      background: #4ade80;\r\n      border-radius: 50%;\r\n      display: inline-block;\r\n      box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);\r\n      animation: pulse-dot 2s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes pulse-dot {\r\n      0%, 100% { opacity: 1; }\r\n      50% { opacity: 0.5; }\r\n    }\r\n    #vana-widget-messages-${config.chatbotId} {\r\n      flex: 1;\r\n      overflow-y: auto;\r\n      padding: 24px;\r\n      background: \r\n        linear-gradient(to bottom, \r\n          rgba(248, 250, 252, 0.8) 0%, \r\n          rgba(241, 245, 249, 0.6) 100%\r\n        );\r\n      scroll-behavior: smooth;\r\n      scrollbar-width: thin;\r\n      scrollbar-color: rgba(0,0,0,0.2) transparent;\r\n    }\r\n    \r\n    #vana-widget-messages-${config.chatbotId}::-webkit-scrollbar {\r\n      width: 6px;\r\n    }\r\n    \r\n    #vana-widget-messages-${config.chatbotId}::-webkit-scrollbar-track {\r\n      background: transparent;\r\n    }\r\n    \r\n    #vana-widget-messages-${config.chatbotId}::-webkit-scrollbar-thumb {\r\n      background: rgba(0,0,0,0.15);\r\n      border-radius: 10px;\r\n      transition: background 0.2s;\r\n    }\r\n    \r\n    #vana-widget-messages-${config.chatbotId}::-webkit-scrollbar-thumb:hover {\r\n      background: rgba(0,0,0,0.25);\r\n    }\r\n    #vana-widget-input-area-${config.chatbotId} {\r\n      padding: 20px;\r\n      background: rgba(255, 255, 255, 0.9);\r\n      backdrop-filter: blur(10px);\r\n      border-top: 1px solid rgba(0,0,0,0.05);\r\n    }\r\n    \r\n    #vana-widget-input-form-${config.chatbotId} {\r\n      display: flex;\r\n      gap: 10px;\r\n      align-items: flex-end;\r\n    }\r\n    \r\n    #vana-widget-input-${config.chatbotId} {\r\n      flex: 1;\r\n      padding: 14px 18px;\r\n      border: 2px solid rgba(0,0,0,0.08);\r\n      border-radius: 12px;\r\n      outline: none;\r\n      font-size: 15px;\r\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n      background: white;\r\n      resize: none;\r\n      min-height: 48px;\r\n      max-height: 120px;\r\n      line-height: 1.5;\r\n    }\r\n    \r\n    #vana-widget-input-${config.chatbotId}:focus {\r\n      border-color: ${config.primaryColor};\r\n      box-shadow: 0 0 0 3px rgba(0,0,0,0.1);\r\n    }\r\n    \r\n    #vana-widget-input-${config.chatbotId}::placeholder {\r\n      color: #9ca3af;\r\n    }\r\n    \r\n    #vana-widget-send-${config.chatbotId} {\r\n      padding: 14px 20px;\r\n      background: linear-gradient(135deg, ${config.primaryColor} 0%, ${config.secondaryColor} 100%);\r\n      color: white;\r\n      border: none;\r\n      border-radius: 12px;\r\n      cursor: pointer;\r\n      font-weight: 600;\r\n      font-size: 15px;\r\n      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n      box-shadow: 0 4px 12px rgba(0,0,0,0.3);\r\n      min-width: 100px;\r\n    }\r\n    \r\n    #vana-widget-send-${config.chatbotId}:hover:not(:disabled) {\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 6px 20px rgba(0,0,0,0.4);\r\n    }\r\n    \r\n    #vana-widget-send-${config.chatbotId}:active:not(:disabled) {\r\n      transform: translateY(0);\r\n    }\r\n    \r\n    #vana-widget-send-${config.chatbotId}:disabled {\r\n      opacity: 0.5;\r\n      cursor: not-allowed;\r\n      transform: none;\r\n    }\r\n    .vana-message-${config.chatbotId} {\r\n      margin-bottom: 20px;\r\n      display: flex;\r\n      gap: 12px;\r\n      animation: messageSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n    }\r\n    \r\n    @keyframes messageSlideIn {\r\n      0% { \r\n        opacity: 0; \r\n        transform: translateY(20px) scale(0.95);\r\n      }\r\n      100% { \r\n        opacity: 1; \r\n        transform: translateY(0) scale(1);\r\n      }\r\n    }\r\n    \r\n    .vana-message-${config.chatbotId}.user {\r\n      flex-direction: row-reverse;\r\n    }\r\n    \r\n    .vana-message-avatar-${config.chatbotId} {\r\n      width: 36px;\r\n      height: 36px;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex-shrink: 0;\r\n      font-size: 18px;\r\n      box-shadow: 0 2px 8px rgba(0,0,0,0.1);\r\n    }\r\n    \r\n    .vana-message-${config.chatbotId}.bot .vana-message-avatar-${config.chatbotId} {\r\n      background: linear-gradient(135deg, ${config.primaryColor} 0%, ${config.accentColor} 100%);\r\n      color: white;\r\n    }\r\n    \r\n    .vana-message-${config.chatbotId}.user .vana-message-avatar-${config.chatbotId} {\r\n      background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\r\n    }\r\n    \r\n    .vana-message-bubble-${config.chatbotId} {\r\n      max-width: 75%;\r\n      padding: 14px 18px;\r\n      border-radius: 18px;\r\n      font-size: 15px;\r\n      line-height: 1.6;\r\n      word-wrap: break-word;\r\n      position: relative;\r\n      white-space: pre-wrap;\r\n    }\r\n    \r\n    .vana-message-${config.chatbotId}.bot .vana-message-bubble-${config.chatbotId} {\r\n      background: white;\r\n      color: #1f2937;\r\n      box-shadow: \r\n        0 2px 8px rgba(0,0,0,0.06),\r\n        0 0 0 1px rgba(0,0,0,0.04);\r\n    }\r\n    \r\n    .vana-message-${config.chatbotId}.user .vana-message-bubble-${config.chatbotId} {\r\n      background: linear-gradient(135deg, ${config.primaryColor} 0%, ${config.secondaryColor} 100%);\r\n      color: white;\r\n      box-shadow: 0 4px 12px rgba(0,0,0,0.25);\r\n    }\r\n    .vana-typing-${config.chatbotId} {\r\n      display: flex;\r\n      gap: 5px;\r\n      padding: 12px 16px;\r\n    }\r\n    \r\n    .vana-typing-dot-${config.chatbotId} {\r\n      width: 8px;\r\n      height: 8px;\r\n      background: linear-gradient(135deg, ${config.primaryColor}, ${config.accentColor});\r\n      border-radius: 50%;\r\n      animation: typing-bounce 1.4s infinite ease-in-out;\r\n    }\r\n    \r\n    .vana-typing-dot-${config.chatbotId}:nth-child(2) {\r\n      animation-delay: 0.2s;\r\n    }\r\n    \r\n    .vana-typing-dot-${config.chatbotId}:nth-child(3) {\r\n      animation-delay: 0.4s;\r\n    }\r\n    \r\n    @keyframes typing-bounce {\r\n      0%, 60%, 100% { transform: translateY(0); opacity: 0.7; }\r\n      30% { transform: translateY(-10px); opacity: 1; }\r\n    }\r\n    .vana-lead-form-${config.chatbotId} {\r\n      background: white;\r\n      padding: 20px;\r\n      border-radius: 16px;\r\n      box-shadow: \r\n        0 4px 16px rgba(0,0,0,0.08),\r\n        0 0 0 1px rgba(0,0,0,0.04);\r\n    }\r\n    \r\n    .vana-lead-form-${config.chatbotId} h4 {\r\n      margin: 0 0 8px 0;\r\n      font-size: 16px;\r\n      font-weight: 700;\r\n      color: #1f2937;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n    }\r\n    \r\n    .vana-lead-form-${config.chatbotId} p {\r\n      margin: 0 0 16px 0;\r\n      font-size: 14px;\r\n      color: #6b7280;\r\n      line-height: 1.5;\r\n    }\r\n    \r\n    .vana-lead-form-${config.chatbotId} input,\r\n    .vana-lead-form-${config.chatbotId} select {\r\n      width: 100%;\r\n      padding: 12px 14px;\r\n      margin-bottom: 10px;\r\n      border: 2px solid rgba(0,0,0,0.08);\r\n      border-radius: 10px;\r\n      font-size: 15px;\r\n      box-sizing: border-box;\r\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n      transition: all 0.2s;\r\n      background: #fafbfc;\r\n    }\r\n    \r\n    .vana-lead-form-${config.chatbotId} input:focus,\r\n    .vana-lead-form-${config.chatbotId} select:focus {\r\n      outline: none;\r\n      border-color: ${config.primaryColor};\r\n      box-shadow: 0 0 0 3px rgba(0,0,0,0.1);\r\n      background: white;\r\n    }\r\n    \r\n    .vana-lead-form-${config.chatbotId} button {\r\n      width: 100%;\r\n      padding: 14px;\r\n      background: linear-gradient(135deg, ${config.primaryColor} 0%, ${config.secondaryColor} 100%);\r\n      color: white;\r\n      border: none;\r\n      border-radius: 10px;\r\n      font-weight: 600;\r\n      font-size: 15px;\r\n      cursor: pointer;\r\n      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n      box-shadow: 0 4px 12px rgba(0,0,0,0.3);\r\n      margin-top: 8px;\r\n    }\r\n    \r\n    .vana-lead-form-${config.chatbotId} button:hover {\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 6px 20px rgba(0,0,0,0.4);\r\n    }\r\n    .vana-close-btn-${config.chatbotId} {\r\n      background: rgba(255,255,255,0.2);\r\n      border: none;\r\n      color: white;\r\n      width: 36px;\r\n      height: 36px;\r\n      border-radius: 50%;\r\n      cursor: pointer;\r\n      font-size: 20px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n      backdrop-filter: blur(10px);\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n    \r\n    .vana-close-btn-${config.chatbotId}:hover {\r\n      background: rgba(255,255,255,0.3);\r\n      transform: rotate(90deg);\r\n    }\r\n    \r\n    .vana-menu-buttons-${config.chatbotId} {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 8px;\r\n      padding: 16px 20px;\r\n      background: rgba(255, 255, 255, 0.7);\r\n      backdrop-filter: blur(10px);\r\n      border-bottom: 1px solid rgba(0,0,0,0.05);\r\n    }\r\n    \r\n    .vana-menu-btn-${config.chatbotId} {\r\n      padding: 10px 16px;\r\n      font-size: 13px;\r\n      border: none;\r\n      background: white;\r\n      color: #374151;\r\n      border-radius: 12px;\r\n      cursor: pointer;\r\n      font-weight: 500;\r\n      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n      box-shadow: \r\n        0 2px 6px rgba(0,0,0,0.06),\r\n        0 0 0 1px rgba(0,0,0,0.04);\r\n    }\r\n    \r\n    .vana-menu-btn-${config.chatbotId}:hover {\r\n      background: linear-gradient(135deg, ${config.primaryColor} 0%, ${config.accentColor} 100%);\r\n      color: white;\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 4px 12px rgba(0,0,0,0.3);\r\n    }\r\n    \r\n    .vana-footer-${config.chatbotId} {\r\n      text-align: center;\r\n      padding: 12px 0 0 0;\r\n      font-size: 11px;\r\n      color: #9ca3af;\r\n    }\r\n    \r\n    .vana-footer-${config.chatbotId} a {\r\n      color: ${config.primaryColor};\r\n      text-decoration: none;\r\n      font-weight: 500;\r\n      transition: opacity 0.2s;\r\n    }\r\n    \r\n    .vana-footer-${config.chatbotId} a:hover {\r\n      opacity: 0.7;\r\n    }\r\n\r\n    .vana-welcome-screen-${config.chatbotId} {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      display: flex;\r\n      flex-direction: column;\r\n      background: linear-gradient(to bottom, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.9));\r\n      z-index: 10;\r\n    }\r\n\r\n    .vana-welcome-header-${config.chatbotId} {\r\n      text-align: center;\r\n      padding: 32px 24px 24px;\r\n      background: white;\r\n      border-bottom: 1px solid rgba(0,0,0,0.05);\r\n      position: relative;\r\n    }\r\n\r\n    .vana-welcome-header-${config.chatbotId} h2 {\r\n      font-size: 22px;\r\n      font-weight: 700;\r\n      color: #1f2937;\r\n      margin: 0 0 4px 0;\r\n      line-height: 1.3;\r\n    }\r\n\r\n    .vana-welcome-close-btn-${config.chatbotId} {\r\n      position: absolute;\r\n      top: 16px;\r\n      right: 16px;\r\n      background: rgba(0,0,0,0.05);\r\n      border: none;\r\n      color: #6b7280;\r\n      width: 32px;\r\n      height: 32px;\r\n      border-radius: 50%;\r\n      cursor: pointer;\r\n      font-size: 20px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: all 0.2s;\r\n    }\r\n\r\n    .vana-welcome-close-btn-${config.chatbotId}:hover {\r\n      background: rgba(0,0,0,0.1);\r\n      transform: rotate(90deg);\r\n    }\r\n\r\n    .vana-welcome-content-${config.chatbotId} {\r\n      flex: 1;\r\n      overflow-y: auto;\r\n      padding: 24px;\r\n      scrollbar-width: thin;\r\n      scrollbar-color: rgba(0,0,0,0.2) transparent;\r\n    }\r\n\r\n    .vana-welcome-content-${config.chatbotId}::-webkit-scrollbar {\r\n      width: 6px;\r\n    }\r\n\r\n    .vana-welcome-content-${config.chatbotId}::-webkit-scrollbar-track {\r\n      background: transparent;\r\n    }\r\n\r\n    .vana-welcome-content-${config.chatbotId}::-webkit-scrollbar-thumb {\r\n      background: rgba(0,0,0,0.15);\r\n      border-radius: 10px;\r\n    }\r\n\r\n    .vana-welcome-chatbot-card-${config.chatbotId} {\r\n      background: white;\r\n      border-radius: 16px;\r\n      padding: 24px;\r\n      margin-bottom: 24px;\r\n      box-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n      text-align: center;\r\n    }\r\n\r\n    .vana-welcome-chatbot-card-${config.chatbotId} .bot-icon {\r\n      font-size: 48px;\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .vana-welcome-chatbot-card-${config.chatbotId} h3 {\r\n      font-size: 18px;\r\n      font-weight: 700;\r\n      color: #1f2937;\r\n      margin: 0 0 12px 0;\r\n      line-height: 1.3;\r\n    }\r\n\r\n    .vana-welcome-chatbot-card-${config.chatbotId} p {\r\n      font-size: 14px;\r\n      color: #6b7280;\r\n      line-height: 1.6;\r\n      margin: 0 0 20px 0;\r\n    }\r\n\r\n    .vana-welcome-start-btn-${config.chatbotId} {\r\n      width: 100%;\r\n      padding: 16px;\r\n      background: linear-gradient(135deg, ${config.primaryColor} 0%, ${config.secondaryColor} 100%);\r\n      color: white;\r\n      border: none;\r\n      border-radius: 12px;\r\n      font-weight: 600;\r\n      font-size: 15px;\r\n      cursor: pointer;\r\n      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n      box-shadow: 0 4px 12px rgba(0,0,0,0.25);\r\n    }\r\n\r\n    .vana-welcome-start-btn-${config.chatbotId}:hover {\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 6px 20px rgba(0,0,0,0.35);\r\n    }\r\n\r\n    .vana-welcome-start-btn-${config.chatbotId}:active {\r\n      transform: translateY(0);\r\n    }\r\n\r\n    .vana-welcome-menu-title-${config.chatbotId} {\r\n      font-size: 11px;\r\n      font-weight: 700;\r\n      color: #9ca3af;\r\n      letter-spacing: 0.08em;\r\n      margin-bottom: 16px;\r\n      text-align: center;\r\n    }\r\n\r\n    .vana-welcome-menu-link-${config.chatbotId} {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      padding: 16px;\r\n      margin-bottom: 10px;\r\n      background: white;\r\n      border-radius: 12px;\r\n      text-decoration: none;\r\n      color: #1f2937;\r\n      transition: all 0.2s;\r\n      box-shadow: 0 2px 6px rgba(0,0,0,0.06);\r\n      border: 1px solid transparent;\r\n    }\r\n\r\n    .vana-welcome-menu-link-${config.chatbotId}:hover {\r\n      box-shadow: 0 4px 12px rgba(0,0,0,0.12);\r\n      transform: translateY(-2px);\r\n      border-color: rgba(0,0,0,0.08);\r\n    }\r\n\r\n    .vana-welcome-menu-link-content-${config.chatbotId} {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 14px;\r\n    }\r\n\r\n    .vana-welcome-menu-link-${config.chatbotId} .icon {\r\n      font-size: 22px;\r\n      width: 28px;\r\n      text-align: center;\r\n    }\r\n\r\n    .vana-welcome-menu-link-${config.chatbotId} .label {\r\n      font-size: 15px;\r\n      font-weight: 500;\r\n      color: #1f2937;\r\n    }\r\n\r\n    .vana-welcome-menu-link-${config.chatbotId} .arrow {\r\n      color: #9ca3af;\r\n      font-size: 20px;\r\n      transition: all 0.2s;\r\n    }\r\n\r\n    .vana-welcome-menu-link-${config.chatbotId}:hover .arrow {\r\n      color: ${config.primaryColor};\r\n      transform: translateX(4px);\r\n    }\r\n\r\n    .vana-welcome-footer-${config.chatbotId} {\r\n      text-align: center;\r\n      padding: 16px 24px;\r\n      background: white;\r\n      border-top: 1px solid rgba(0,0,0,0.05);\r\n    }\r\n\r\n    .vana-welcome-footer-${config.chatbotId} .footer-text {\r\n      font-size: 11px;\r\n      color: #9ca3af;\r\n    }\r\n\r\n    .vana-welcome-footer-${config.chatbotId} a {\r\n      color: ${config.primaryColor};\r\n      text-decoration: none;\r\n      font-weight: 500;\r\n      transition: opacity 0.2s;\r\n    }\r\n\r\n    .vana-welcome-footer-${config.chatbotId} a:hover {\r\n      opacity: 0.7;\r\n    }\r\n    `;\r\n    document.head.appendChild(style);\r\n\r\n  \/\/ Widget HTML\r\n  const container = document.getElementById('vana-chat-widget-' + config.chatbotId);\r\n  container.innerHTML = `\r\n    <button id=\"vana-widget-button-${config.chatbotId}\" aria-label=\"Open chat\">\r\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z\"\/>\r\n        <circle cx=\"9\" cy=\"10\" r=\"1.5\"\/>\r\n        <circle cx=\"15\" cy=\"10\" r=\"1.5\"\/>\r\n      <\/svg>\r\n    <\/button>\r\n    <div id=\"vana-widget-container-${config.chatbotId}\" role=\"dialog\" aria-labelledby=\"vana-widget-title\">\r\n      <div id=\"vana-widget-header-${config.chatbotId}\">\r\n        <div>\r\n          <h3 id=\"vana-widget-title\">${escapeHtml(config.chatbotName)}<\/h3>\r\n          <p>Antwoordt direct<\/p>\r\n        <\/div>\r\n        <button class=\"vana-close-btn-${config.chatbotId}\" aria-label=\"Close chat\">\u00d7<\/button>\r\n      <\/div>\r\n      ${config.menuItems && config.menuItems.length > 0 ? `\r\n        <div class=\"vana-menu-buttons-${config.chatbotId}\" id=\"vana-menu-${config.chatbotId}\">\r\n          ${config.menuItems.map(item => `<button class=\"vana-menu-btn-${config.chatbotId}\" data-question=\"${escapeHtml(item.question)}\">${escapeHtml(item.label)}<\/button>`).join('')}\r\n        <\/div>\r\n      ` : ''}\r\n      <div id=\"vana-widget-messages-${config.chatbotId}\"><\/div>\r\n      <div id=\"vana-widget-input-area-${config.chatbotId}\">\r\n        <form id=\"vana-widget-input-form-${config.chatbotId}\">\r\n          <input \r\n            type=\"text\" \r\n            id=\"vana-widget-input-${config.chatbotId}\" \r\n            placeholder=\"Stel je vraag...\"\r\n            maxlength=\"500\"\r\n            autocomplete=\"off\"\r\n          >\r\n          <button type=\"submit\" id=\"vana-widget-send-${config.chatbotId}\">\r\n            Verstuur\r\n          <\/button>\r\n        <\/form>\r\n        ${!config.whiteLabel ? `\r\n          <div class=\"vana-footer-${config.chatbotId}\">\r\n            Mogelijk gemaakt door <a href=\"https:\/\/www.vanachat.nl\" target=\"_blank\" rel=\"noopener noreferrer\">VANA CHAT<\/a>\r\n          <\/div>\r\n        ` : ''}\r\n      <\/div>\r\n    <\/div>\r\n  `;\r\n\r\n  \/\/ Widget Logic\r\n  const widgetButton = document.getElementById('vana-widget-button-' + config.chatbotId);\r\n  const widgetContainer = document.getElementById('vana-widget-container-' + config.chatbotId);\r\n  const messagesContainer = document.getElementById('vana-widget-messages-' + config.chatbotId);\r\n  const inputForm = document.getElementById('vana-widget-input-form-' + config.chatbotId);\r\n  const input = document.getElementById('vana-widget-input-' + config.chatbotId);\r\n  const sendButton = document.getElementById('vana-widget-send-' + config.chatbotId);\r\n  const closeButton = widgetContainer.querySelector('.vana-close-btn-' + config.chatbotId);\r\n\r\n  let messages = [];\r\n  let conversationId = null;\r\n  let isTyping = false;\r\n  let leadCaptured = false;\r\n  let leadFormShown = false;\r\n  let messageCount = 0;\r\n  let proactiveTriggered = false;\r\n  let scrollDepth = 0;\r\n  let eventListeners = [];\r\n  let leadFlowActive = false;\r\n  let leadFlowStep = null;\r\n  let leadFlowData = {};\r\n  let leadFlowPending = false;\r\n  let showingWelcomeScreen = config.welcomeScreen.enabled;\r\n\r\n  \/\/ Security: HTML escape function\r\n  function escapeHtml(str) {\r\n    if (!str) return '';\r\n    const div = document.createElement('div');\r\n    div.textContent = str;\r\n    return div.innerHTML;\r\n  }\r\n\r\n  \/\/ Sanitize input\r\n  function sanitizeInput(str) {\r\n    if (!str) return '';\r\n    return str.trim().slice(0, 500).replace(\/[<>]\/g, '');\r\n  }\r\n\r\n  \/\/ Calculate realistic typing delay based on message length\r\n  function calculateTypingDelay(message) {\r\n    const baseDelay = config.typingDelay.min + Math.random() * (config.typingDelay.max - config.typingDelay.min);\r\n    const lengthDelay = message.length * config.typingDelay.perCharacter;\r\n    return Math.min(baseDelay + lengthDelay, 4000);\r\n  }\r\n\r\n  \/\/ Add message to UI\r\n  function addMessage(text, type, allowBasicHtml = false) {\r\n    const messageDiv = document.createElement('div');\r\n    messageDiv.className = `vana-message-${config.chatbotId} ${type}`;\r\n    \r\n    const avatar = document.createElement('div');\r\n    avatar.className = `vana-message-avatar-${config.chatbotId}`;\r\n    avatar.textContent = type === 'bot' ? '\ud83e\udd16' : '\ud83d\udc64';\r\n    \r\n    const bubble = document.createElement('div');\r\n    bubble.className = `vana-message-bubble-${config.chatbotId}`;\r\n    \r\n    if (allowBasicHtml && text.includes('vana-lead-form-')) {\r\n      bubble.innerHTML = text;\r\n    } else if (type === 'bot' && typeof marked !== 'undefined') {\r\n      \/\/ Parse markdown for bot messages\r\n      bubble.innerHTML = marked.parse(text);\r\n    } else {\r\n      bubble.textContent = text;\r\n    }\r\n    \r\n    messageDiv.appendChild(avatar);\r\n    messageDiv.appendChild(bubble);\r\n    messagesContainer.appendChild(messageDiv);\r\n    \r\n    messagesContainer.scrollTop = messagesContainer.scrollHeight;\r\n    \r\n    messages.push({ text, type, timestamp: new Date() });\r\n  }\r\n\r\n  \/\/ Show typing indicator\r\n  function showTyping() {\r\n    if (isTyping) return;\r\n    isTyping = true;\r\n    \r\n    const typingDiv = document.createElement('div');\r\n    typingDiv.className = `vana-message-${config.chatbotId} bot`;\r\n    typingDiv.id = 'vana-typing-indicator-' + config.chatbotId;\r\n    \r\n    const avatar = document.createElement('div');\r\n    avatar.className = `vana-message-avatar-${config.chatbotId}`;\r\n    avatar.textContent = '\ud83e\udd16';\r\n    \r\n    const bubble = document.createElement('div');\r\n    bubble.className = `vana-message-bubble-${config.chatbotId}`;\r\n    \r\n    const typing = document.createElement('div');\r\n    typing.className = `vana-typing-${config.chatbotId}`;\r\n    typing.innerHTML = `\r\n      <div class=\"vana-typing-dot-${config.chatbotId}\"><\/div>\r\n      <div class=\"vana-typing-dot-${config.chatbotId}\"><\/div>\r\n      <div class=\"vana-typing-dot-${config.chatbotId}\"><\/div>\r\n    `;\r\n    \r\n    bubble.appendChild(typing);\r\n    typingDiv.appendChild(avatar);\r\n    typingDiv.appendChild(bubble);\r\n    messagesContainer.appendChild(typingDiv);\r\n    messagesContainer.scrollTop = messagesContainer.scrollHeight;\r\n  }\r\n\r\n  \/\/ Hide typing indicator\r\n  function hideTyping() {\r\n    const typingIndicator = document.getElementById('vana-typing-indicator-' + config.chatbotId);\r\n    if (typingIndicator) {\r\n      typingIndicator.remove();\r\n    }\r\n    isTyping = false;\r\n  }\r\n\r\n\r\n\r\n  \/\/ Send message with realistic delays\r\n  async function sendMessage(text) {\r\n    const sanitizedText = sanitizeInput(text);\r\n    if (!sanitizedText) return;\r\n\r\n    addMessage(sanitizedText, 'user');\r\n    input.value = '';\r\n    input.disabled = true;\r\n    sendButton.disabled = true;\r\n    messageCount++;\r\n\r\n    showTyping();\r\n\r\n    try {\r\n      let answer, found = false;\r\n\r\n      try {\r\n        const payload = {\r\n          chatbot_id: config.chatbotId,\r\n          message: sanitizedText,\r\n          conversation_id: conversationId\r\n        };\r\n\r\n        \/\/ Include lead flow data if active\r\n        if (leadFlowActive && leadFlowStep) {\r\n          payload.lead_flow_step = leadFlowStep;\r\n          payload.lead_flow_data = leadFlowData;\r\n        }\r\n\r\n        const response = await fetch(`${config.apiUrl}\/functions\/widgetChat`, {\r\n          method: 'POST',\r\n          headers: {\r\n            'Content-Type': 'application\/json',\r\n          },\r\n          body: JSON.stringify(payload)\r\n        });\r\n\r\n        if (response.ok) {\r\n          const data = await response.json();\r\n          answer = data.answer;\r\n          found = data.found;\r\n          if (data.conversation_id) {\r\n            conversationId = data.conversation_id;\r\n          }\r\n\r\n          \/\/ Handle lead flow cancellation\r\n          if (data.lead_flow_step === null && leadFlowActive) {\r\n            \/\/ Lead flow was cancelled\r\n            leadFlowActive = false;\r\n            leadFlowStep = null;\r\n            leadFlowData = {};\r\n            leadFlowPending = false;\r\n          }\r\n          \r\n          \/\/ Handle lead flow\r\n          if (data.start_lead_flow && !leadFlowActive) {\r\n            leadFlowPending = true;\r\n          }\r\n          \r\n          if (data.lead_flow_step) {\r\n            leadFlowActive = true;\r\n            leadFlowStep = data.lead_flow_step;\r\n            if (data.lead_flow_data) {\r\n              leadFlowData = data.lead_flow_data;\r\n            }\r\n            if (data.lead_flow_step === 'done') {\r\n              leadFlowActive = false;\r\n              leadCaptured = true;\r\n              leadFlowStep = null;\r\n              leadFlowData = {};\r\n              leadFlowPending = false;\r\n            }\r\n          }\r\n\r\n          const delay = calculateTypingDelay(answer);\r\n          await new Promise(resolve => setTimeout(resolve, delay));\r\n\r\n          hideTyping();\r\n          addMessage(answer, 'bot');\r\n          \r\n          \/\/ Start lead flow after showing the answer\r\n          if (leadFlowPending && !leadFlowActive) {\r\n            leadFlowPending = false;\r\n            leadFlowActive = true;\r\n            leadFlowStep = 'name';\r\n            leadFlowData = { bron_pagina: window.location.href };\r\n            \r\n            const nameQuestion = config.leadForm?.naam_vraag || 'Ik help je graag verder! Mag ik eerst je naam weten?';\r\n            const nameQuestionWithStop = nameQuestion + \"\\n\\n(Typ 'stop' om te annuleren)\";\r\n            \r\n            await new Promise(resolve => setTimeout(resolve, 800));\r\n            showTyping();\r\n            await new Promise(resolve => setTimeout(resolve, 1200));\r\n            hideTyping();\r\n            addMessage(nameQuestionWithStop, 'bot');\r\n          }\r\n        } else {\r\n          throw new Error('API failed');\r\n        }\r\n      } catch (apiError) {\r\n        console.log('API error, using fallback:', apiError);\r\n        \r\n        if (leadFlowActive) {\r\n          answer = 'Sorry, er ging iets mis. Kun je dat nog eens proberen?';\r\n        } else {\r\n          answer = findAnswerLocal(sanitizedText);\r\n          found = answer !== 'Bedankt voor je vraag! Om je het beste antwoord te geven, laat je gegevens achter zodat we persoonlijk contact kunnen opnemen.';\r\n          \r\n          if (!found && !leadCaptured) {\r\n            leadFlowPending = true;\r\n          }\r\n        }\r\n\r\n        const delay = calculateTypingDelay(answer);\r\n        await new Promise(resolve => setTimeout(resolve, delay));\r\n\r\n        hideTyping();\r\n        addMessage(answer, 'bot');\r\n        \r\n        if (leadFlowPending && !leadFlowActive) {\r\n          leadFlowPending = false;\r\n          leadFlowActive = true;\r\n          leadFlowStep = 'name';\r\n          leadFlowData = { bron_pagina: window.location.href };\r\n          \r\n          const nameQuestion = config.leadForm?.naam_vraag || 'Ik help je graag verder! Mag ik eerst je naam weten?';\r\n          \r\n          await new Promise(resolve => setTimeout(resolve, 800));\r\n          showTyping();\r\n          await new Promise(resolve => setTimeout(resolve, 1200));\r\n          hideTyping();\r\n          addMessage(nameQuestion, 'bot');\r\n        }\r\n      }\r\n      \r\n    } catch (error) {\r\n      console.error('Widget error:', error);\r\n      hideTyping();\r\n      addMessage('Sorry, er ging iets mis. Probeer het opnieuw!', 'bot');\r\n    } finally {\r\n      input.disabled = false;\r\n      sendButton.disabled = false;\r\n      input.focus();\r\n    }\r\n  }\r\n\r\n  \/\/ FAQ matching\r\n  function findAnswerLocal(question) {\r\n    const q = question.toLowerCase().trim();\r\n    const faqs = config.faqs || [];\r\n    \r\n    if (faqs.length === 0) {\r\n      return 'Bedankt voor je vraag! Laat je gegevens achter zodat we je persoonlijk kunnen helpen.';\r\n    }\r\n    \r\n    let bestMatch = null;\r\n    let bestScore = 0;\r\n    \r\n    for (const faq of faqs) {\r\n      const faqQ = faq.vraag.toLowerCase().trim();\r\n      \r\n      const exactMatch = q === faqQ ? 1.0 : 0;\r\n      const containsScore = faqQ.includes(q) ? 0.9 : (q.includes(faqQ) ? 0.8 : 0);\r\n      const wordOverlap = calculateWordOverlap(q, faqQ);\r\n      const similarityScore = calculateSimilarity(q, faqQ);\r\n      \r\n      const finalScore = Math.max(\r\n        exactMatch,\r\n        containsScore,\r\n        wordOverlap * 0.7,\r\n        similarityScore * 0.6\r\n      );\r\n      \r\n      if (finalScore > bestScore) {\r\n        bestScore = finalScore;\r\n        bestMatch = faq;\r\n      }\r\n    }\r\n    \r\n    if (bestScore >= 0.6 && bestMatch) {\r\n      return bestMatch.antwoord;\r\n    }\r\n    \r\n    return 'Bedankt voor je vraag! Om je het beste antwoord te geven, laat je gegevens achter zodat we persoonlijk contact kunnen opnemen.';\r\n  }\r\n  \r\n  function calculateWordOverlap(str1, str2) {\r\n    const words1 = str1.split(\/\\s+\/).filter(w => w.length > 2);\r\n    const words2 = str2.split(\/\\s+\/).filter(w => w.length > 2);\r\n    \r\n    if (words1.length === 0 || words2.length === 0) return 0;\r\n    \r\n    const set2 = new Set(words2);\r\n    const matches = words1.filter(w => set2.has(w)).length;\r\n    \r\n    return matches \/ Math.max(words1.length, words2.length);\r\n  }\r\n  \r\n  function calculateSimilarity(str1, str2) {\r\n    const longer = str1.length > str2.length ? str1 : str2;\r\n    const shorter = str1.length > str2.length ? str2 : str1;\r\n    \r\n    if (longer.length === 0) return 1.0;\r\n    \r\n    const editDistance = getEditDistance(shorter, longer);\r\n    return (longer.length - editDistance) \/ longer.length;\r\n  }\r\n  \r\n  function getEditDistance(str1, str2) {\r\n    const matrix = [];\r\n    \r\n    for (let i = 0; i <= str2.length; i++) {\r\n      matrix[i] = [i];\r\n    }\r\n    \r\n    for (let j = 0; j <= str1.length; j++) {\r\n      matrix[0][j] = j;\r\n    }\r\n    \r\n    for (let i = 1; i <= str2.length; i++) {\r\n      for (let j = 1; j <= str1.length; j++) {\r\n        if (str2.charAt(i - 1) === str1.charAt(j - 1)) {\r\n          matrix[i][j] = matrix[i - 1][j - 1];\r\n        } else {\r\n          matrix[i][j] = Math.min(\r\n            matrix[i - 1][j - 1] + 1,\r\n            matrix[i][j - 1] + 1,\r\n            matrix[i - 1][j] + 1\r\n          );\r\n        }\r\n      }\r\n    }\r\n    \r\n    return matrix[str2.length][str1.length];\r\n  }\r\n\r\n  \/\/ Welcome Screen Functions\r\n  function showWelcomeScreen() {\r\n    const menuButtonsContainer = document.getElementById('vana-menu-' + config.chatbotId);\r\n    const inputArea = document.getElementById('vana-widget-input-area-' + config.chatbotId);\r\n\r\n    if (menuButtonsContainer) menuButtonsContainer.style.display = 'none';\r\n    if (inputArea) inputArea.style.display = 'none';\r\n\r\n    messagesContainer.innerHTML = `\r\n      <div class=\"vana-welcome-screen-${config.chatbotId}\">\r\n        <div class=\"vana-welcome-header-${config.chatbotId}\">\r\n          <button class=\"vana-welcome-close-btn-${config.chatbotId}\" id=\"vana-welcome-close-${config.chatbotId}\" aria-label=\"Close chat\">\u00d7<\/button>\r\n          <h2>${escapeHtml(config.welcomeScreen.title || config.chatbotName)}<\/h2>\r\n        <\/div>\r\n        <div class=\"vana-welcome-content-${config.chatbotId}\">\r\n          <div class=\"vana-welcome-chatbot-card-${config.chatbotId}\">\r\n            <div class=\"bot-icon\">\ud83e\udd16<\/div>\r\n            <h3>${escapeHtml(config.chatbotName)}<\/h3>\r\n            <p>${escapeHtml(config.welcomeScreen.description || config.welcomeMessage)}<\/p>\r\n            <button class=\"vana-welcome-start-btn-${config.chatbotId}\" id=\"vana-start-chat-${config.chatbotId}\">\r\n              ${escapeHtml(config.welcomeScreen.buttonText)}\r\n            <\/button>\r\n          <\/div>\r\n\r\n          ${config.welcomeScreen.menuLinks.length > 0 ? `\r\n            <div class=\"vana-welcome-menu-title-${config.chatbotId}\">\r\n              ${escapeHtml(config.welcomeScreen.menuTitle)}\r\n            <\/div>\r\n            ${config.welcomeScreen.menuLinks.map(link => `\r\n              <a href=\"${escapeHtml(link.url)}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"vana-welcome-menu-link-${config.chatbotId}\">\r\n                <div class=\"vana-welcome-menu-link-content-${config.chatbotId}\">\r\n                  <span class=\"icon\">${escapeHtml(link.icon)}<\/span>\r\n                  <span class=\"label\">${escapeHtml(link.label)}<\/span>\r\n                <\/div>\r\n                <span class=\"arrow\">\u2192<\/span>\r\n              <\/a>\r\n            `).join('')}\r\n            ` : ''}\r\n            <\/div>\r\n            ${!config.whiteLabel ? `\r\n            <div class=\"vana-welcome-footer-${config.chatbotId}\">\r\n            <div class=\"footer-text\">\r\n              Mogelijk gemaakt door <a href=\"https:\/\/www.vanachat.nl\" target=\"_blank\" rel=\"noopener noreferrer\">VANA CHAT<\/a>\r\n            <\/div>\r\n            <\/div>\r\n            ` : ''}\r\n            <\/div>\r\n            `;\r\n\r\n    const startBtn = document.getElementById('vana-start-chat-' + config.chatbotId);\r\n    if (startBtn) {\r\n      startBtn.onclick = () => {\r\n        showingWelcomeScreen = false;\r\n        messagesContainer.innerHTML = '';\r\n        if (menuButtonsContainer) menuButtonsContainer.style.display = 'flex';\r\n        if (inputArea) inputArea.style.display = 'block';\r\n        addMessage(config.welcomeMessage, 'bot');\r\n        input.focus();\r\n      };\r\n    }\r\n\r\n    const welcomeCloseBtn = document.getElementById('vana-welcome-close-' + config.chatbotId);\r\n    if (welcomeCloseBtn) {\r\n      welcomeCloseBtn.onclick = () => {\r\n        widgetContainer.classList.remove('open');\r\n      };\r\n    }\r\n    }\r\n\r\n  \/\/ Event Listeners\r\n  widgetButton.onclick = () => {\r\n    const isOpen = widgetContainer.classList.contains('open');\r\n    if (isOpen) {\r\n      widgetContainer.classList.remove('open');\r\n    } else {\r\n      widgetContainer.classList.add('open');\r\n      if (showingWelcomeScreen && config.welcomeScreen.enabled) {\r\n        showWelcomeScreen();\r\n      } else if (messages.length === 0) {\r\n        addMessage(config.welcomeMessage, 'bot');\r\n      }\r\n      input.focus();\r\n    }\r\n  };\r\n\r\n  closeButton.onclick = () => {\r\n    widgetContainer.classList.remove('open');\r\n  };\r\n\r\n  inputForm.onsubmit = (e) => {\r\n    e.preventDefault();\r\n    sendMessage(input.value);\r\n  };\r\n\r\n  const menuContainer = document.getElementById('vana-menu-' + config.chatbotId);\r\n  if (menuContainer) {\r\n    menuContainer.querySelectorAll('.vana-menu-btn-' + config.chatbotId).forEach(btn => {\r\n      btn.onclick = () => {\r\n        const question = btn.getAttribute('data-question');\r\n        if (question) {\r\n          sendMessage(question);\r\n        }\r\n      };\r\n    });\r\n  }\r\n\r\n  const escHandler = (e) => {\r\n    if (e.key === 'Escape' && widgetContainer.classList.contains('open')) {\r\n      widgetContainer.classList.remove('open');\r\n    }\r\n  };\r\n  document.addEventListener('keydown', escHandler);\r\n  eventListeners.push({ type: 'keydown', handler: escHandler });\r\n\r\n  \/\/ Proactive triggers\r\n  if (config.proactive && config.proactive.enabled) {\r\n    if (config.proactive.timeDelay > 0) {\r\n      setTimeout(() => {\r\n        if (!proactiveTriggered && !widgetContainer.classList.contains('open')) {\r\n          triggerProactiveChat(config.welcomeMessage);\r\n        }\r\n      }, config.proactive.timeDelay * 1000);\r\n    }\r\n\r\n    if (config.proactive.scrollTrigger > 0) {\r\n      const scrollHandler = () => {\r\n        if (proactiveTriggered || widgetContainer.classList.contains('open')) return;\r\n\r\n        const windowHeight = window.innerHeight;\r\n        const documentHeight = document.documentElement.scrollHeight;\r\n        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\r\n\r\n        scrollDepth = ((scrollTop + windowHeight) \/ documentHeight) * 100;\r\n\r\n        if (scrollDepth >= config.proactive.scrollTrigger) {\r\n          triggerProactiveChat(config.welcomeMessage);\r\n        }\r\n      };\r\n      window.addEventListener('scroll', scrollHandler, { passive: true });\r\n      eventListeners.push({ type: 'scroll', handler: scrollHandler, element: window });\r\n    }\r\n\r\n    if (config.proactive.exitIntent) {\r\n      const mouseOutHandler = (e) => {\r\n        if (proactiveTriggered || widgetContainer.classList.contains('open')) return;\r\n        if (!e.relatedTarget && e.clientY <= 0) {\r\n          triggerProactiveChat('Wacht! Kunnen we je ergens mee helpen? \ud83d\udcac');\r\n        }\r\n      };\r\n      document.addEventListener('mouseout', mouseOutHandler);\r\n      eventListeners.push({ type: 'mouseout', handler: mouseOutHandler });\r\n    }\r\n  }\r\n\r\n  function triggerProactiveChat(message) {\r\n    proactiveTriggered = true;\r\n    widgetContainer.classList.add('open');\r\n    if (showingWelcomeScreen && config.welcomeScreen.enabled) {\r\n      showWelcomeScreen();\r\n    } else if (messages.length === 0) {\r\n      addMessage(message, 'bot');\r\n    }\r\n    input.focus();\r\n  }\r\n\r\n  window[`vanaCleanup_${config.chatbotId}`] = function() {\r\n    eventListeners.forEach(({ type, handler, element = document }) => {\r\n      element.removeEventListener(type, handler);\r\n    });\r\n    eventListeners = [];\r\n  };\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.vanachat.nl\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.vanachat.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.vanachat.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.vanachat.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.vanachat.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":118,"href":"https:\/\/test.vanachat.nl\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/test.vanachat.nl\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/test.vanachat.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}