const FormExtension = { name: 'Forms', type: 'response', match: ({ trace }) => trace.type === 'Custom_Form' || trace.payload?.name === 'Custom_Form', render: ({ trace, element }) => { const formContainer = document.createElement('form'); formContainer.innerHTML = ` Name Email Mobile Number Your message `; formContainer.addEventListener('input', function () { const name = formContainer.querySelector('.name'); const email = formContainer.querySelector('.email'); const phone = formContainer.querySelector('.phone'); const message = formContainer.querySelector('.message'); if (name.checkValidity()) name.classList.remove('invalid'); if (email.checkValidity()) email.classList.remove('invalid'); if (phone.checkValidity()) phone.classList.remove('invalid'); if (message.checkValidity()) message.classList.remove('invalid'); }); formContainer.addEventListener('submit', function (event) { event.preventDefault(); const name = formContainer.querySelector('.name'); const email = formContainer.querySelector('.email'); const phone = formContainer.querySelector('.phone'); const message = formContainer.querySelector('.message'); let isFormValid = true; if (!name.checkValidity()) { name.classList.add('invalid'); isFormValid = false; } if (!email.checkValidity()) { email.classList.add('invalid'); isFormValid = false; } if (!phone.checkValidity()) { phone.classList.add('invalid'); isFormValid = false; } if (!message.checkValidity()) { message.classList.add('invalid'); isFormValid = false; } if (!isFormValid) { return; } formContainer.querySelector('.submit').remove(); window.voiceflow.chat.interact({ type: 'complete', payload: { var_name: name.value, var_email: email.value, var_phone: phone.value, var_user_message: message.value, var_from_field: "ChatMagnets Website " }, }); }); element.appendChild(formContainer); }, }; (function(d, t) { var v = d.createElement(t), s = d.getElementsByTagName(t)[0]; v.onload = function() { window.voiceflow.chat.load({ verify: { projectID: '685ce05500cd24f6c10376d8' }, url: 'https://general-runtime.voiceflow.com', versionID: 'production', assistant: { extensions: [FormExtension] } }); } v.src = "https://cdn.voiceflow.com/widget-next/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s); })(document, 'script');