`; document.body.appendChild(launcher); // ── Panel ───────────────────────────────────────────────────────────────── const panel = document.createElement('div'); panel.className = 'ing-chat-panel'; panel.innerHTML = `

$${BRAND_NAME}$

${BRAND_NAME}

Typically replies in a few hours

`; document.body.appendChild(panel); // ── Force typography via JS (overrides stubborn theme CSS) ─────────────── function enforceTypography() { document.querySelectorAll( '.ing-chat-panel *, .ing-chat-launcher *, .ing-bubble, .ing-qbtn, .ing-bot-name, .ing-chat-title, .ing-chat-subtitle' ).forEach(function(el) { el.style.setProperty('text-transform', 'none', 'important'); el.style.setProperty('letter-spacing', '0px', 'important'); el.style.setProperty('font-variant', 'normal', 'important'); el.style.setProperty('word-spacing', 'normal', 'important'); }); } enforceTypography(); // Re-run whenever new elements are added (e.g. new bubbles) new MutationObserver(enforceTypography).observe(panel, { childList: true, subtree: true }); const body = panel.querySelector('.ing-chat-body'); const closeBtn = panel.querySelector('.ing-close'); const openBtn = launcher.querySelector('.ing-chat-btn'); const badge = document.getElementById('ing-unread-badge'); const input = panel.querySelector('.ing-input'); const sendBtn = panel.querySelector('.ing-send'); function scrollToBottom() { body.scrollTop = body.scrollHeight; } // ── Add bubble ──────────────────────────────────────────────────────────── function addBubble(text, who) { if (who === 'user') { const b = document.createElement('div'); b.className = 'ing-bubble ing-user'; b.textContent = text; body.appendChild(b); scrollToBottom(); return; } const wrap = document.createElement('div'); wrap.className = 'ing-bot-wrap'; const avatar = document.createElement('div'); avatar.className = 'ing-bot-avatar'; avatar.innerHTML = ` $${BRAND_NAME}$ `; const meta = document.createElement('div'); meta.className = 'ing-bot-meta'; const name = document.createElement('div'); name.className = 'ing-bot-name'; name.textContent = BRAND_NAME; const b = document.createElement('div'); b.className = 'ing-bubble ing-bot'; b.textContent = text; meta.appendChild(name); meta.appendChild(b); wrap.appendChild(avatar); wrap.appendChild(meta); body.appendChild(wrap); scrollToBottom(); } // ── Quick reply box ─────────────────────────────────────────────────────── function addQuickBox(options, onPick) { const box = document.createElement('div'); box.className = 'ing-quickbox'; const grid = document.createElement('div'); grid.className = 'ing-quickgrid'; options.forEach(opt => { const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'ing-qbtn'; btn.textContent = opt; btn.addEventListener('click', () => { box.querySelectorAll('.ing-qbtn').forEach(b => b.disabled = true); onPick(opt); }); grid.appendChild(btn); }); box.appendChild(grid); body.appendChild(box); scrollToBottom(); } function setInputMode(enabled, placeholder) { input.disabled = !enabled; sendBtn.disabled = !enabled; input.placeholder = placeholder || ''; if (enabled) setTimeout(() => input.focus(), 100); } // ── Chat flow ───────────────────────────────────────────────────────────── function resetChat() { body.innerHTML = ''; state.step = 'intent'; Object.assign(state.data, { lead_id: '', intent: '', employees: '', name: '', email: '', phone: '', message: '', page_url: window.location.href }); addBubble('👋 Got any questions? I\'m happy to help.', 'bot'); addBubble('What would you like to do today?', 'bot'); addQuickBox(INTENT_OPTIONS, (pick) => { state.data.intent = pick; addBubble(pick, 'user'); nextEmployees(); }); setInputMode(false, 'Choose an option above'); } function nextEmployees() { state.step = 'employees'; addBubble('No problem! Before we get started, how many employees work at your company?', 'bot'); addQuickBox(EMPLOYEE_OPTIONS, (pick) => { state.data.employees = pick; addBubble(pick, 'user'); nextName(); }); setInputMode(false, 'Choose an option above'); } function nextName() { state.step = 'name'; addBubble('Great! A member of our team will get back to you. What\'s your full name?', 'bot'); setInputMode(true, 'Type your full name…'); } function nextEmail() { state.step = 'email'; addBubble('Thanks! What\'s your business email address?', 'bot'); setInputMode(true, 'Type your business email…'); } function nextPhone() { state.step = 'phone'; addBubble('Perfect. What\'s your phone number?', 'bot'); setInputMode(true, 'Type your phone number…'); } function nextMessage() { state.step = 'message'; addBubble('Thanks! I\'ve connected you to one of our specialists who\'ll look after you from here.', 'bot'); addBubble('Please type a short message describing what you need.', 'bot'); setInputMode(true, 'Write your message…'); } function isValidEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); } function postAjax(obj) { const fd = new URLSearchParams(); fd.append('action', 'ingreland_chatbot_submit'); fd.append('nonce', NONCE); fd.append('payload', JSON.stringify(obj)); return fetch(AJAX_URL, { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}, body: fd.toString() }).then(r => r.json()); } function submitLead() { state.step = 'submitting'; setInputMode(false, 'Submitting…'); addBubble('Submitting your request…', 'bot'); postAjax({ mode: 'lead', lead_id: state.data.lead_id, intent: state.data.intent, employees: state.data.employees, name: state.data.name, email: state.data.email, phone: state.data.phone, message: state.data.message, page_url: window.location.href, lead_source: sessionStorage.getItem('ing_lead_source') || 'Chatbot' }) .then(res => { if (res && res.success) { if (res.data && res.data.lead_id) state.data.lead_id = res.data.lead_id; // GA4 conversion event — buyer intents only var BUYER_INTENTS = ['Learn about products', 'Request a call', 'Request a sample', 'Request a quote']; if (typeof gtag === 'function' && BUYER_INTENTS.indexOf(state.data.intent) !== -1) { gtag('event', 'chatbot_lead_submit', { intent: state.data.intent, form_location: window.location.pathname }); } addBubble(res.data && res.data.message ? res.data.message : 'Thanks! Our team will contact you shortly.', 'bot'); state.step = 'live'; setInputMode(true, 'Write a message…'); } else { addBubble((res && res.data && res.data.message) ? res.data.message : 'Submission failed. Please try again.', 'bot'); state.step = 'message'; setInputMode(true, 'Write a message (optional)…'); } }) .catch(() => { addBubble('Submission failed. Please try again.', 'bot'); state.step = 'message'; setInputMode(true, 'Write a message (optional)…'); }); } function sendLiveMessage(text) { postAjax({ mode: 'message', lead_id: state.data.lead_id, name: state.data.name, email: state.data.email, phone: state.data.phone, message: text, page_url: window.location.href }) .then(res => { if (!(res && res.success)) { addBubble((res && res.data && res.data.message) ? res.data.message : 'Message failed. Please try again.', 'bot'); } }) .catch(() => addBubble('Message failed. Please try again.', 'bot')); } function handleTextSubmit() { const val = (input.value || '').trim(); if (!val) return; // always require input addBubble(val, 'user'); input.value = ''; if (state.step === 'name') { state.data.name = val; nextEmail(); return; } if (state.step === 'email') { if (!isValidEmail(val)) { addBubble('Please enter a valid business email address.', 'bot'); return; } state.data.email = val; nextPhone(); return; } if (state.step === 'phone') { state.data.phone = val; nextMessage(); return; } if (state.step === 'message') { state.data.message = val; submitLead(); return; } if (state.step === 'live') { sendLiveMessage(val); return; } } function openChat() { panel.classList.add('open'); state.open = true; badge.style.display = 'none'; if (!body.innerHTML.trim()) resetChat(); scrollToBottom(); } function closeChat() { panel.classList.remove('open'); state.open = false; } // Show badge after 5s if not opened setTimeout(() => { if (!state.open) badge.style.display = 'flex'; }, 5000); openBtn.addEventListener('click', () => state.open ? closeChat() : openChat()); closeBtn.addEventListener('click', closeChat); sendBtn.addEventListener('click', handleTextSubmit); input.addEventListener('keydown', e => { if (e.key === 'Enter') handleTextSubmit(); }); })();

Events

Conozca a Ingreland en The Food Tech Summit & Expo 2026

Food Tech Summit & Expo 2026

Fi Asia Indonesia 2026

Fi China (FIC) 2026

Global Ingredients Show 2025

FI China 2025

Newsletter Sign Up