1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 4-5
4 5<script async src="https://www.googletagmanager.com/gtag/js?id=
5AW-1056644273
vendor: 13 bytes, lines 5-6
5"> 6</script>
7<script> 8
vendor: 134 bytes, lines 8-12
8window.dataLayer = window.dataLayer || []; 9 function gtag(){dataLayer.push(arguments);} 10 gtag('js', new Date()); 11 12 gtag('config', '
12AW-1056644273
vendor: 4 bytes, line 12
12');
13</script>
13 14 <meta charset="UTF-8"> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 16 <title>ZOAPIIO AI | AI Platform and Solutions</title> 17 <link rel="icon" type="image/png" sizes="32x32" href="images/favicon.png"> 18
18<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
18 19
19<script src="https://cdn.tailwindcss.com"></script>
19 20 <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 21 <link rel="stylesheet" href="css/styles.css" /> 22 <style> 23 body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #ffffff; color: #1a1a1a; } 24 .glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.05); } 25 .gradient-text { background: linear-gradient(90deg, #1e40af, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 26 </style> 27</head> 28<body class="antialiased"> 29 30 <nav class="flex items-center justify-between px-8 py-6 max-w-7xl mx-auto sticky top-0 bg-white/90 z-50"> 31 <img src="https://zoapiio.com/img/logo.png" alt="ZOAPIIO" class="h-8"> 32 <div class="hidden md:flex space-x-10 text-sm font-semibold text-gray-500 uppercase tracking-widest"> 33 <a href="#vialog" class="hover:text-blue-600 transition">Interactive CRM</a> 34 <a href="#vialog" class="hover:text-blue-600 transition">Email Dialog</a> 35 <a href="#vialog" class="hover:text-blue-600 transition">Client Onboarding</a> 36 <a style="font-style: italic;" href="#platform" class="hover:text-blue-600 transition">ZOAPIIO Platform</a> 37 </div> 38 <!-- a href="#signup" class="text-sm font-bold border-2 border-black px-6 py-2 hover:bg-black hover:text-white transition">SIGN UP</a --> 39 </nav> 40 41 <header class="pt-10 px-6"> 42 <div class="max-w-4xl mx-auto text-center"> 43 <span class="inline-block py-1 px-3 mb-6 font-bold tracking-widest bg-blue-50 text-blue-600 rounded-full">ZOAPIIO AI SOLUTIONS</span> 44 </div> 45 </header> 46 47 <section id="ecosystem" class="py-24 bg-gray-50"> 48 <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-20 items-center"> 49 <div class="relative"> 50 <img src="images/ZOAPIIO-Ecosystem.avif" 51 alt="No Risk - All Reward" class="rounded-2xl shadow-xl"> 52 </div> 53 <div> 54 <h2 class="text-3xl font-bold mb-6">Real AI for <span class="gradient-text">Real People</span></h2> 55 <p class="text-lg text-gray-600 mb-8"> 56 AI adoption can be overwhelming?but it doesn?t have to be. ZOAPIIO lets you build your AI ecosystem your way: reuse proven processes, tweak them, or create fully custom workflows. With deep AI integrated at every layer, you can get started without AI expertise and with minimal coding. 57 </p> 58 <p class="text-lg text-gray-600 mb-8"> 59 No up-front investment. We customize and implement your processes at no charge. You only pay the same standard SaaS based pricing. 60 </p> 61 </div> 62 </div> 63 </section> 64 65 <header class="pt-10 pb-10 px-6"> 66 <div class="max-w-4xl mx-auto text-center"> 67 <div class="flex justify-center gap-4"> 68 <a href="#signup" class="bg-blue-600 text-white px-8 py-4 rounded-lg font-bold shadow-lg shadow-blue-200 hover:bg-blue-700 transition">Start Building</a> 69 <a href="demo" class="bg-white border border-gray-200 px-8 py-4 rounded-lg font-bold hover:bg-gray-50 transition">Vialog Demo</a> 70 </div> 71 </div> 72 </header> 73 74 <header class="pt-10 px-6"> 75 <div class="max-w-4xl mx-auto text-center"> 76 <span class="inline-block py-1 px-3 mb-6 font-bold tracking-widest bg-blue-50 text-blue-600 rounded-full">AI POWERED SELF-SERVICE</span> 77 </div> 78 </header> 79 80 <!-- PROBLEM / CONTEXT --> 81 <section class="context"> 82 <h2>You already have a business. ZOAPIIO Vialog gives it a voice.</h2> 83 <p> 84 You run a transactional website ? selling food, merchandise, travel bookings, 85 or event tickets. Your customers want convenience. They want to talk, ask, 86 and transact naturally. ZOAPIIO Vialog lets you add voice commands and chat-based interactions to 87 your existing website ? instantly. 88 </p> 89 <p> 90 This and other processes - out of the box with ZOAPIIO Vialog. 91 </p> 92 </section> 93 94 95 <section id="vialog" class="py-24 bg-white"> 96 <div class="max-w-6xl mx-auto px-6"> 97 <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6"> 98 <div class="max-w-xl"> 99 <h2 class="text-4xl font-bold mb-4">ZOAPIIO Vialog</h2> 100 <p class="text-gray-500 italic text-xl">A Suite of apps to AI power self-service.</p> 101 </div> 102 <div class="text-right"> 103 <p class="text-sm font-bold uppercase tracking-widest text-blue-600">Go RAG with Swag!</p> 104 </div> 105 </div> 106 107 <div class="grid md:grid-cols-2 gap-12"> 108 <div class="bg-blue-50 p-10 rounded-3xl"> 109 <h3 class="text-xl font-bold mb-4 italic">Your competition is already doing it!</h3> 110 <p class="text-gray-600 leading-relaxed"> 111 Start with simple processes, bet on a platform that will take you all the way. 112 </p><p class="text-gray-600 leading-relaxed" style="margin-top: 15px;"> 113 ZOAPIIO = BPM + LOW-CODE + AI! 114 </p> 115 <ul> 116 <li><span class="text-2xl mb-2">⚡</span> Super Fast</li> 117 <li><span class="text-2xl mb-2">🎫</span> Token Efficient</li> 118 <li><span class="text-2xl mb-2">📚</span> Native RAG Support</li> 119 <li><span class="text-2xl mb-2">🎙</span> Voice Commands</li> 120 </ul> 121 </div> 122 <div class="relative"> 123 <img src="images/VIALOG-Graphic.avif"
124 alt="No Risk - All Reward" class="rounded-2xl shadow-xl"> 125 </div> 126 </div> 127 </div> 128 </section> 129 130 131 <!-- FEATURES --> 132 <section id="features" class="features"> 133 <h2>Why ZOAPIIO Vialog</h2> 134 <div class="feature-grid"> 135 136 <div class="feature-card"> 137 <img src="images/photo-why1.avif" alt=""> 138 <h3>No Programming Required</h3> 139 <p> 140 Build agentic use cases without writing code or learning AI frameworks. 141 Just define business rules and flows. 142 </p> 143 </div> 144 145 <div class="feature-card"> 146 <img src="images/photo-why2.avif" alt=""> 147 <h3>Agentic, Not Scripted</h3> 148 <p> 149 High-level business-rule?driven execution that adapts dynamically 150 to real user conversations. 151 </p> 152 </div> 153 154 <div class="feature-card"> 155 <img src="images/photo-why3.avif" alt=""> 156 <h3>Plug Into Your Existing Site</h3> 157 <p> 158 No rebuilds. No migrations. Simply integrate with your current 159 website and workflows. 160 </p> 161 </div> 162 163 <div class="feature-card"> 164 <img src="images/photo-why4.avif" alt=""> 165 <h3>Fast & Token Efficient</h3> 166 <p> 167 Designed to be lightweight, performant, and easy on your AI 168 usage costs. 169 </p> 170 </div> 171 172 </div> 173 </section> 174 175 <!-- HOW IT WORKS> 176 <section id="how" class="how"> 177 <h2 class="text-3xl font-bold mb-4">How It Works</h2> 178 <div class="steps"> 179 <div class="step"> 180 <span>1</span> 181 <p>Create a ZOAPIIO account</p> 182 </div> 183 <div class="step"> 184 <span>2</span> 185 <p>Define business rules and flows</p> 186 </div> 187 <div class="step"> 188 <span>3</span> 189 <p>Integrate Vialog into your site</p> 190 </div> 191 <div class="step"> 192 <span>4</span> 193 <p>Go live with voice & chat AI</p> 194 </div> 195 </div> 196 </section --> 197 198 <header class="pt-10 px-6"> 199 <div class="max-w-4xl mx-auto text-center"> 200 <span class="inline-block py-1 px-3 mb-6 font-bold tracking-widest bg-blue-50 text-blue-600 rounded-full">ZOAPIIO AI PLATFORM (Visit <a class="text-sm" style="font-style: italic;" href="http://zoapiio.com" target="_blank">ZOAPIIO.COM</a>)</span> 201 </div> 202 </header> 203 204 <section id="platform" class="py-24 bg-gray-50"> 205 <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-20 items-center"> 206 <div class="relative"> 207 <img src="images/photo-aivisual.avif" 208 alt="Power. With Control." class="rounded-2xl shadow-xl"> 209 <div class="absolute -bottom-6 -right-6 glass-card p-6 rounded-xl hidden lg:block"> 210 <p class="text-sm font-bold text-blue-600">Zero DevOps</p> 211 <p class="text-xs text-gray-500">Fully Cloud-Native SaaS</p> 212 </div> 213 </div> 214 <div> 215 <h2 class="text-3xl font-bold mb-6">Power. With Control.</h2> 216 <p class="text-lg text-gray-600 mb-8"> 217 AI coding is advancing rapidly, but don't get lost in someone else's code. 218 ZOAPIIO AI offers high-level of control with agentic power. 219 </p> 220 <div class="space-y-6"> 221 <div class="flex items-start gap-4"> 222 <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-sm border border-gray-100 font-bold text-blue-600">01</div> 223 <div> 224 <h4 class="font-bold">No Environment Setup</h4> 225 <p class="text-sm text-gray-500">Eliminate devops overhead. Build directly on the web and go on-prem only when ready.</p> 226 </div> 227 </div> 228 <div class="flex items-start gap-4"> 229 <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-sm border border-gray-100 font-bold text-blue-600">02</div> 230 <div> 231 <h4 class="font-bold">Non-Programmer Friendly</h4> 232 <p class="text-sm text-gray-500">Use business-logic driven configuration rather than complex code frameworks.</p> 233 </div> 234 </div> 235 </div> 236 </div> 237 </div> 238 </section> 239 240 <section id="ide" class="py-24 px-6"> 241 <div class="max-w-6xl mx-auto text-center"> 242 <h2 class="text-3xl font-bold mb-16">Virtual Private App Containers</h2> 243 <div class="relative bg-black rounded-3xl p-4 shadow-2xl overflow-hidden"> 244 <div class="flex gap-2 mb-4 border-b border-gray-800 pb-4 px-4"> 245 <div class="w-3 h-3 rounded-full bg-red-500"></div> 246 <div class="w-3 h-3 rounded-full bg-yellow-500"></div> 247 <div class="w-3 h-3 rounded-full bg-green-500"></div>
248 <span class="ml-4 text-xs text-gray-500">ZOAPIIO_DESIGNER_IDE.sh</span> 249 </div> 250 <img src="images/photo-webideview.avif" 251 alt="Web IDE" class="rounded-xl opacity-80 h-96 w-full object-cover"> 252 <div class="absolute inset-0 flex items-center justify-center"> 253 <div class="bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/20 text-white max-w-md"> 254 <h3 class="text-2xl font-bold mb-4">Application Designer</h3> 255 <p class="text-sm opacity-80">Once signed-up, launch your Web-IDE into your own private container. Build and host apps, processes, and AI chatbots with ease.</p> 256 </div> 257 </div> 258 </div> 259 </div> 260 </section> 261 262 <header class="pt-10 px-6"> 263 <div class="max-w-4xl mx-auto text-center"> 264 <span class="inline-block py-1 px-3 mb-6 font-bold tracking-widest bg-blue-50 text-blue-600 rounded-full">Builder Zone</span> 265 </div> 266 </header> 267 268 <section id="signup" class="py-24 px-6 bg-gray-50"> 269 <div class="max-w-xl mx-auto text-center"> 270 <h2 class="text-3xl font-bold mb-4">Launch your ZOAPIIO Workspace</h2> 271 <p class="text-gray-500 mb-10">You are signing-up with the ZOAPIIO development environment. If you are interested in the Vialog apps, please write to <a href="mailto:[email protected]">Sales</a>.</p> 272 <div class="bg-white p-8 rounded-3xl shadow-sm border border-gray-200"> 273 <form id="homeForm"> 274 <p class="text-green-500 mb-10 LoginNotice" style="display: none;">Launch your instance. Enter your Email, then click WEB-IDE.</p> 275 <div class="flex flex-col gap-2 text-left"> 276 <label for="homeEmail" class="text-sm font-semibold text-gray-700">Email Address</label> 277 <input type="email" id="homeEmail" placeholder="Enter your email" class="w-full px-4 py-4 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:border-blue-500 focus:outline-none transition"> 278 <span id="homeEmailError" class="text-red-500 text-sm min-h-[20px]"></span> 279 </div> 280 281 <!-- WEB-IDE Password Section (Hidden by default) --> 282 <div id="webIdePasswordSection" class="mt-6 hidden"> 283 <div class="flex flex-col gap-2 text-left"> 284 <label for="webIdePassword" class="text-sm font-semibold text-gray-700">Developer Password</label> 285 <input type="password" id="webIdePassword" placeholder="Enter your password" class="w-full px-4 py-4 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:border-blue-500 focus:outline-none transition"> 286 <span id="webIdePasswordError" class="text-red-500 text-sm min-h-[20px]"></span> 287 </div> 288 <button type="button" id="webIdeContinueBtn" class="w-full mt-4 bg-blue-600 text-white py-4 rounded-xl font-bold tracking-widest hover:bg-blue-700 transition">CONTINUE TO IDE</button> 289 </div> 290 291 <div style="padding-top: 10px;"> 292 <button type="button" id="signUpBtn" style="width: 25%" class="bg-black text-white py-4 rounded-xl font-bold tracking-widest hover:bg-blue-600 transition">SIGN-UP</button> 293 <button type="button" id="changePasswordBtn" style="width: 45%" class="bg-black text-white py-4 rounded-xl font-bold tracking-widest hover:bg-blue-600 transition">CHANGE PASSWORD</button> 294 <button type="button" id="webIdeBtn" style="width: 25%" class="bg-black text-white py-4 rounded-xl font-bold tracking-widest hover:bg-blue-600 transition">WEB-IDE</button> 295 </div> 296 </form> 297 </div> 298 </div> 299 </section> 300 301 <footer class="py-12 border-t border-gray-100 text-center"> 302 <img src="https://zoapiio.com/img/logo.png" alt="Logo" class="h-6 mx-auto mb-6 opacity-30"> 303 <p class="text-xs text-gray-400 uppercase tracking-widest">© 2026 Rightangle Technologies Pvt. Ltd.</p> 304 </footer> 305 306
306<script> 307 $(document).ready(function() { 308 309 // Handle redirection after successful signup. 310 function onHashChange() { 311 var hash=window.location.hash; 312 if (hash=='#signup-ok') { 313 window.location.hash='signup'; 314 $('.LoginNotice').show('fast', function() { 315 $('#webIdeBtn').click(); 316 }); 317 } 318 } 319 320 // Email validation function 321 function validateEmail(email) { 322 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 323 return emailRegex.test(email); 324 } 325 326 // Clear error messages 327 function clearError(fieldId) { 328 $('#' + fieldId + 'Error').text(''); 329 $('#' + fieldId).removeClass('border-red-500').addClass('border-gray-200'); 330 } 331 332 // Show error message 333 function showError(fieldId, message) { 334 $('#' + fieldId + 'Error').text(message); 335 $('#' + fieldId).removeClass('border-gray-200').addClass('border-red-500'); 336 } 337 338 $(window).on('hashchange', onHashChange); 339 340 // Validate email on blur 341 $('#homeEmail').on('blur', function() { 342 const email = $(this).val().trim(); 343 clearError('homeEmail'); 344 345 if (email === '') { 346 showError('homeEmail', 'Email is required'); 347 } else if (!validateEmail(email)) { 348 showError('homeEmail', 'Please enter a valid email address'); 349 } 350 }); 351 352 // Clear error on focus 353 $('#homeEmail, #webIdePassword').on('focus', function() { 354 const fieldId = $(this).attr('id'); 355 clearError(fieldId); 356 }); 357 358 // SIGN-UP button 359 $('#signUpBtn').on('click', function() { 360 const email = $('#homeEmail').val().trim(); 361 clearError('homeEmail'); 362 363 if (email === '') { 364 showError('homeEmail', 'Email is required'); 365 return; 366 } 367 368 if (!validateEmail(email)) { 369 showError('homeEmail', 'Please enter a valid email address'); 370 return; 371 } 372 373 // Redirect to signup page 374 window.location.assign('signup.html?'+encodeURIComponent(email)); 375 }); 376 377 // CHANGE PASSWORD button 378 $('#changePasswordBtn').on('click', function() { 379 const email = $('#homeEmail').val().trim(); 380 clearError('homeEmail'); 381 382 if (email === '') { 383 showError('homeEmail', 'Email is required'); 384 return; 385 } 386 387 if (!validateEmail(email)) { 388 showError('homeEmail', 'Please enter a valid email address'); 389 return; 390 } 391 392 // Redirect to change password page 393 window.location.assign('change-password.html?'+encodeURIComponent(email)); 394 }); 395 396 // WEB-IDE button - Toggle password section 397 $('#webIdeBtn').on('click', function() { 398 const email = $('#homeEmail').val().trim(); 399 clearError('homeEmail'); 400 401 if (email === '') { 402 showError('homeEmail', 'Email is required'); 403 return; 404 } 405 406 if (!validateEmail(email)) { 407 showError('homeEmail', 'Please enter a valid email address'); 408 return; 409 } 410 411 // Toggle password section 412 $('#webIdePasswordSection').toggleClass('hidden'); 413 414 // If showing, focus on password field 415 if (!$('#webIdePasswordSection').hasClass('hidden')) { 416 $('#webIdePassword').focus(); 417 } 418 }); 419 420 // WEB-IDE Continue button - Get instance URL and redirect 421 $('#webIdeContinueBtn').on('click', function() { 422 const email = $('#homeEmail').val().trim(); 423 const password = $('#webIdePassword').val().trim(); 424 425 clearError('webIdePassword'); 426 427 if (password === '') { 428 showError('webIdePassword', 'Password is required'); 429 return; 430 } 431 432 // Show loading state 433 $('#webIdeContinueBtn').text('LOADING...').prop('disabled', true); 434 435 // Placeholder API endpoint - Replace with actual endpoint 436 const apiEndpoint = 'getinstance'; 437 438 // Make API call to get instance URL 439 $.ajax({ 440 url: apiEndpoint, 441 method: 'POST', 442 data: { 443 EmailId: email, 444 Password: password 445 }, 446 success: function(response) { 447 // Expecting response format: {Status: "OK", InstanceUrl: "https://instance.url"} 448 if (response.Status === 'OK' && response.InstanceCode) { 449 // Open instance URL in new tab 450 var instanceUrl = '/'+response.InstanceCode+"/designer/index.html"; 451 const ideWindow = window.open(instanceUrl, 'ZOAPIIOAI-WEBIDE'); 452 453 // Attach onload listener to post initialization message when IDE loads 454 if (ideWindow) { 455 ideWindow.onload = function() { 456 const initMessage = { 457 command: 'init', 458 password: password 459 }; 460 ideWindow.postMessage(JSON.stringify(initMessage), '*'); 461 }; 462 } 463 464 // Reset form 465 $('#webIdePassword').val(''); 466 $('#webIdePasswordSection').addClass('hidden'); 467 $('#webIdeContinueBtn').text('CONTINUE TO IDE').prop('disabled', false); 468 } else { 469 showError('webIdePassword', response.StatusMessage || 'Failed to find instance'); 470 $('#webIdeContinueBtn').text('CONTINUE TO IDE').prop('disabled', false); 471 } 472 }, 473 error: function(xhr, status, error) { 474 showError('webIdePassword', 'Connection error. Please try again.'); 475 $('#webIdeContinueBtn').text('CONTINUE TO IDE').prop('disabled', false); 476 } 477 }); 478 }); 479 onHashChange(); 480 }); 481 </script>
481 482 483</body> 484</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.