1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<!-- Analytics + consent (waslio) --> 5<meta name="google-site-verification" content="GSC_VERIFICATION_TOKEN">
6<script> 7(function () { 8 var GA_ID = "G-NJLNMXTYB1"; 9 var CLARITY_ID = "y17thgo86x"; // set when available 10 var KEY = "waslio-consent"; 11 12 function loadAnalytics() { 13 if (GA_ID && GA_ID.indexOf("G-") === 0 && !window.__gaLoaded) { 14 window.__gaLoaded = 1; 15 var s = document.createElement("script"); s.async = 1; 16 s.src = "https://www.googletagmanager.com/gtag/js?id=" + GA_ID; 17 document.head.appendChild(s); 18 window.dataLayer = window.dataLayer || []; 19 window.gtag = function () { dataLayer.push(arguments); }; 20 gtag("js", new Date()); 21 gtag("config", GA_ID, { anonymize_ip: true }); 22 } 23 if (CLARITY_ID && CLARITY_ID !== "y17thgo86x" && !window.__clarityLoaded) { 24 window.__clarityLoaded = 1; 25 (function (c, l, a, r, i, t, y) { 26 c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments); }; 27 t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i; 28 y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y); 29 })(window, document, "clarity", "script", CLARITY_ID); 30 } 31 } 32 33 function hideBanner() { var b = document.getElementById("waslio-cookie"); if (b) b.remove(); } 34 function setConsent(v) { try { localStorage.setItem(KEY, v); } catch (e) {} hideBanner(); if (v === "granted") loadAnalytics(); } 35 36 function showBanner() { 37 if (document.getElementById("waslio-cookie")) return; 38 var css = "#waslio-cookie{position:fixed;left:16px;right:16px;bottom:16px;max-width:640px;margin:0 auto;z-index:100000;" 39 + "background:#1C163A;color:#EDEAF7;border-radius:14px;padding:18px 20px;box-shadow:0 12px 40px rgba(0,0,0,.35);" 40 + "font:14px/1.5 -apple-system,'Segoe UI',Roboto,sans-serif;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}" 41 + "#waslio-cookie p{margin:0;flex:1 1 300px;color:#C7C2E0}#waslio-cookie a{color:#FF8A7E;text-decoration:underline}" 42 + "#waslio-cookie .wc-btns{display:flex;gap:8px;flex:0 0 auto}" 43 + "#waslio-cookie button{font:600 13px/1 inherit;border:none;border-radius:99px;padding:10px 18px;cursor:pointer}" 44 + "#waslio-cookie .wc-accept{background:#FF6B5E;color:#fff}#waslio-cookie .wc-decline{background:transparent;color:#C7C2E0;border:1.5px solid rgba(255,255,255,.25)}" 45 + "@media(prefers-reduced-motion:no-preference){#waslio-cookie{animation:wcUp .3s ease both}}@keyframes wcUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}"; 46 var st = document.createElement("style"); st.textContent = css; document.head.appendChild(st); 47 var d = document.createElement("div"); d.id = "waslio-cookie"; 48 d.innerHTML = '<p>We use cookies for analytics to understand traffic and improve Waslio. ' 49 + 'See our <a href="/privacy">privacy policy</a>.</p>' 50 + '<div class="wc-btns"><button class="wc-decline" id="wc-no">Decline</button>' 51 + '<button class="wc-accept" id="wc-yes">Accept</button></div>'; 52 document.body.appendChild(d); 53 document.getElementById("wc-yes").onclick = function () { setConsent("granted"); }; 54 document.getElementById("wc-no").onclick = function () { setConsent("denied"); }; 55 } 56 57 function init() { 58 var c; 59 try { c = localStorage.getItem(KEY); } catch (e) {} 60 if (c === "granted") loadAnalytics(); 61 else if (c !== "denied") showBanner(); 62 } 63 if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init); 64 else init(); 65})(); 66</script>
66 67<!-- /Analytics --> 68 69<meta charset="UTF-8"> 70<meta name="viewport" content="width=device-width, initial-scale=1.0"> 71<title>Multi-Courier Delivery for Shopify UAE â Waslio Courier</title> 72<meta name="description" content="Waslio connects your Shopify store to noon Send, Careem Express, Quiqup and more in one app. Same-day dispatch on autopilot with automatic courier failover, delivery-slot timing and branded live tracking. Built for UAE merchants."> 73<meta property="og:title" content="Waslio â Same-day dispatch on autopilot"> 74<meta property="og:description" content="One Shopify app for noon Send, Careem Express, Quiqup & more. Auto-dispatch, courier failover and branded live tracking for UAE stores."> 75<meta property="og:type" content="website"> 76<meta property="og:image" content="https://waslioconnect.com/assets/og-image.png"> 77<meta property="og:url" content="https://waslioconnect.com/courier"> 78<meta name="twitter:card" content="summary_large_image"> 79<link rel="canonical" href="https://waslioconnect.com/courier"> 80<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%232B2350'/%3E%3Ctext x='32' y='44' font-family='sans-serif' font-size='34' font-weight='700' fill='%23FF6B5E' text-anchor='middle'%3Ew%3C/text%3E%3C/svg%3E"> 81<link rel="preconnect" href="https://fonts.googleapis.com"> 82<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 83<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@500&display=swap" rel="stylesheet">
84<script type="application/ld+json"> 85{ 86 "@context": "https://schema.org", 87 "@type": "SoftwareApplication", 88 "name": "Waslio: Courier Integration", 89 "operatingSystem": "Web", 90 "applicationCategory": "BusinessApplication", 91 "description": "Multi-courier same-day delivery app for Shopify stores in the UAE. Dispatches orders to noon Send, Careem Express, Quiqup and more with automatic failover, delivery-slot timing and branded live tracking.", 92 "offers": { "@type": "Offer", "priceCurrency": "AED" }, 93 "publisher": { "@type": "Organization", "name": "Waslio" } 94} 95</script>
95 96<style> 97 :root{ 98 --ink:#2B2350; 99 --ink-deep:#1C163A; 100 --accent:#FF6B5E; 101 --bg:#FAF8F5; 102 --paper:#FFFFFF; 103 --delivered:#1E9E6A; 104 --transit:#3E6DD8; 105 --failover:#E8A13C; 106 --cod:#8A5CF6; 107 --line:rgba(43,35,80,.12); 108 --muted:#6A6486; 109 --radius:14px; 110 --font-display:'Space Grotesk',system-ui,sans-serif; 111 --font-body:'IBM Plex Sans',system-ui,sans-serif; 112 --font-ar:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; 113 } 114 *{margin:0;padding:0;box-sizing:border-box} 115 html{scroll-behavior:smooth} 116 body{ 117 font-family:var(--font-body); 118 background:var(--bg); 119 color:var(--ink); 120 line-height:1.6; 121 font-size:16px; 122 -webkit-font-smoothing:antialiased; 123 } 124 h1,h2,h3{font-family:var(--font-display);line-height:1.12;letter-spacing:-.015em} 125 a{color:inherit} 126 :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px} 127 .wrap{max-width:1120px;margin:0 auto;padding:0 24px} 128 129 /* ---------- Nav ---------- */ 130 nav{ 131 position:sticky;top:0;z-index:50; 132 background:rgba(250,248,245,.85); 133 backdrop-filter:blur(10px); 134 border-bottom:1px solid var(--line); 135 } 136 .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px} 137 .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none} 138 .brand-en{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em} 139 .brand-en .dot{color:var(--accent)} 140 .brand-ar{font-family:var(--font-ar);font-size:1rem;color:var(--muted)} 141 .nav-cta{ 142 font-family:var(--font-display);font-weight:600;font-size:.92rem; 143 background:var(--ink);color:#fff;text-decoration:none; 144 padding:10px 18px;border-radius:99px; 145 transition:background .2s; 146 } 147 .nav-cta:hover{background:var(--accent)} 148 149 /* ---------- Hero ---------- */ 150 .hero{padding:72px 0 40px} 151 .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} 152 .eyebrow{ 153 display:inline-flex;align-items:center;gap:8px; 154 font-family:var(--font-display);font-weight:600;font-size:.8rem; 155 text-transform:uppercase;letter-spacing:.14em;color:var(--muted); 156 margin-bottom:20px; 157 } 158 .eyebrow::before{content:"";width:22px;height:2px;background:var(--accent)} 159 h1{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:700;margin-bottom:20px} 160 h1 .fade{color:var(--muted);font-weight:600} 161 .hero p.lede{font-size:1.12rem;color:var(--muted);max-width:34em;margin-bottom:30px} 162 .hero p.lede strong{color:var(--ink);font-weight:600} 163 .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center} 164 .btn{ 165 font-family:var(--font-display);font-weight:600;font-size:1rem; 166 padding:14px 26px;border-radius:99px;text-decoration:none; 167 display:inline-block;border:none;cursor:pointer; 168 transition:transform .15s,box-shadow .15s,background .2s; 169 } 170 .btn:hover{transform:translateY(-1px)} 171 .btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(255,107,94,.35)} 172 .btn-primary:hover{box-shadow:0 8px 22px rgba(255,107,94,.45)} 173 .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)} 174 .btn-ghost:hover{border-color:var(--ink)} 175 .cta-note{font-size:.85rem;color:var(--muted)} 176 177 /* ---------- Waterfall simulation (signature) ---------- */ 178 .sim{ 179 background:var(--ink-deep); 180 border-radius:20px; 181 padding:26px 24px 22px; 182 color:#EDEAF7; 183 box-shadow:0 24px 60px rgba(28,22,58,.35); 184 position:relative; 185 overflow:hidden; 186 } 187 .sim::after{ /* faint route lines texture */ 188 content:"";position:absolute;inset:0;pointer-events:none;opacity:.07; 189 background: 190 radial-gradient(circle at 85% 12%, var(--accent) 0 2px, transparent 3px), 191 radial-gradient(circle at 12% 88%, var(--transit) 0 2px, transparent 3px), 192 linear-gradient(115deg, transparent 48%, #fff 48.5%, transparent 49%); 193 } 194 .sim-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px} 195 .sim-title{font-family:var(--font-display);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:#9A93BD} 196 .sim-live{display:flex;align-items:center;gap:6px;font-size:.75rem;color:#9A93BD} 197 .sim-live i{width:7px;height:7px;border-radius:50%;background:var(--delivered);display:inline-block} 198 .order-card{ 199 background:rgba(255,255,255,.06); 200 border:1px solid rgba(255,255,255,.1); 201 border-radius:12px;padding:12px 16px;margin-bottom:16px; 202 display:flex;justify-content:space-between;align-items:center;gap:10px; 203 font-variant-numeric:tabular-nums; 204 } 205 .order-id{font-family:var(--font-display);font-weight:600;font-size:.95rem} 206 .order-meta{font-size:.8rem;color:#9A93BD} 207 .cod-tag{font-size:.72rem;font-weight:600;color:var(--cod);background:rgba(138,92,246,.16);padding:3px 9px;border-radius:99px;white-space:nowrap} 208 .courier-row{ 209 display:flex;align-items:center;gap:12px; 210 padding:13px 14px;border-radius:12px;margin-bottom:8px; 211 border:1px solid transparent; 212 transition:background .4s,border-color .4s,opacity .4s; 213 opacity:.38; 214 } 215 .courier-row.active{opacity:1;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)} 216 .courier-row.failed{opacity:.55} 217 .courier-row.won{opacity:1;background:rgba(30,158,106,.12);border-color:rgba(30,158,106,.4)} 218 .c-rank{ 219 font-family:var(--font-display);font-size:.7rem;font-weight:600;color:#9A93BD; 220 width:20px;text-align:center;flex-shrink:0; 221 } 222 .c-name{font-family:var(--font-display);font-weight:600;font-size:.95rem;flex:1} 223 .c-status{font-size:.8rem;color:#9A93BD;font-variant-numeric:tabular-nums;text-align:right} 224 .c-status .ok{color:var(--delivered);font-weight:600} 225 .c-status .bad{color:var(--failover);font-weight:600} 226 .c-status .wait{color:var(--transit)} 227 .cascade{ 228 height:18px;margin:-2px 0 6px 23px; 229 border-left:2px dashed rgba(232,161,60,.6); 230 opacity:0;transition:opacity .3s; 231 } 232 .cascade.show{opacity:1} 233 .wa-bubble{ 234 margin-top:14px; 235 background:#123D2E;border:1px solid rgba(30,158,106,.4); 236 border-radius:12px 12px 12px 4px; 237 padding:11px 14px;font-size:.86rem; 238 opacity:0;transform:translateY(6px); 239 transition:opacity .4s,transform .4s; 240 min-height:44px; 241 } 242 .wa-bubble.show{opacity:1;transform:none} 243 .wa-bubble .wa-tag{font-size:.68rem;color:#7FB99F;display:block;margin-bottom:2px;font-weight:600;letter-spacing:.06em} 244 .wasal{color:var(--delivered);font-weight:700} 245 .wasal .ar{font-family:var(--font-ar)} 246 247 /* ---------- Works with ---------- */ 248 .works{padding:34px 0 8px;text-align:center} 249 .works-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:600;margin-bottom:14px} 250 .works-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap} 251 .chip{ 252 font-family:var(--font-display);font-weight:600;font-size:.92rem; 253 border:1.5px solid var(--line);border-radius:99px;padding:6px 18px 6px 8px; 254 background:var(--paper);display:inline-flex;align-items:center;gap:9px; 255 } 256 .clogo{ 257 width:26px;height:26px;border-radius:7px;font-style:normal;font-weight:700; 258 display:inline-flex;align-items:center;justify-content:center; 259 font-size:.62rem;letter-spacing:-.02em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); 260 flex-shrink:0; 261 } 262 .chip.soon{color:var(--muted);border-style:dashed} 263 .chip.soon small{font-weight:500;font-size:.72rem} 264 265 /* ---------- Features ---------- */ 266 section.features{padding:76px 0 30px} 267 .sec-head{max-width:34em;margin-bottom:44px} 268 .sec-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:12px} 269 .sec-head p{color:var(--muted);font-size:1.05rem} 270 .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} 271 .feat{ 272 background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); 273 padding:26px 24px; 274 } 275 .feat .glyph{ 276 width:42px;height:42px;border-radius:11px;margin-bottom:18px; 277 display:flex;align-items:center;justify-content:center; 278 } 279 .feat h3{font-size:1.15rem;margin-bottom:10px} 280 .feat p{font-size:.94rem;color:var(--muted)} 281 .g-fall{background:rgba(255,107,94,.12)} 282 .g-slot{background:rgba(62,109,216,.12)} 283 .g-wa{background:rgba(30,158,106,.12)} 284 285 /* ---------- How it works ---------- */ 286 section.how{padding:60px 0} 287 .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step} 288 .step{ 289 background:transparent;border-top:2px solid var(--line);padding-top:20px;position:relative; 290 } 291 .step::before{ 292 counter-increment:step;content:counter(step,decimal-leading-zero); 293 font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--accent); 294 display:block;margin-bottom:10px; 295 } 296 .step h3{font-size:1.08rem;margin-bottom:8px} 297 .step p{font-size:.92rem;color:var(--muted)} 298 299 /* ---------- noon SEO section ---------- */ 300 section.noon{padding:60px 0} 301 .noon-card{ 302 background:var(--ink);color:#EDEAF7;border-radius:20px; 303 padding:52px 48px;display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center; 304 } 305 .noon-card h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:14px} 306 .noon-card p{color:#B7B1D6;font-size:1rem;margin-bottom:12px} 307 .noon-card p strong{color:#fff} 308 .noon-list{list-style:none;display:grid;gap:12px} 309 .noon-list li{ 310 display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:#D9D5EC; 311 } 312 .noon-list li::before{content:"â";color:var(--delivered);font-weight:700;flex-shrink:0} 313 314 /* ---------- Waitlist ---------- */ 315 section.waitlist{padding:76px 0 90px} 316 .wl-card{ 317 background:var(--paper);border:1px solid var(--line);border-radius:20px; 318 padding:52px 48px;max-width:680px;margin:0 auto;text-align:center; 319 } 320 .wl-card h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:10px} 321 .wl-card>p{color:var(--muted);margin-bottom:28px;max-width:30em;margin-inline:auto} 322 form{display:grid;gap:12px;text-align:left} 323 label{font-family:var(--font-display);font-weight:600;font-size:.82rem} 324 input{ 325 font-family:var(--font-body);font-size:1rem; 326 padding:13px 16px;border-radius:10px;border:1.5px solid var(--line); 327 background:var(--bg);color:var(--ink);width:100%; 328 } 329 input:focus{border-color:var(--ink);outline:none} 330 form .btn{margin-top:6px} 331 .form-note{font-size:.8rem;color:var(--muted);text-align:center;margin-top:10px} 332 .form-success{ 333 display:none;padding:18px;border-radius:12px; 334 background:rgba(30,158,106,.1);border:1px solid rgba(30,158,106,.35); 335 color:var(--delivered);font-weight:600;text-align:center; 336 } 337 338 /* ---------- Nav links ---------- */ 339 .nav-links{display:flex;gap:22px;align-items:center;font-size:.92rem;margin-left:auto;margin-right:26px} 340 .nav-links>a{color:var(--muted);text-decoration:none;font-weight:500}
341 .nav-links>a:hover{color:var(--ink)} 342 .brand-tag{font-family:var(--font-display);font-weight:500;font-size:.9rem;color:var(--muted);letter-spacing:-.01em} 343 .nav-dd{position:relative} 344 .nav-dd-btn{font:inherit;font-weight:500;color:var(--muted);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:6px 0} 345 .nav-dd-btn:hover{color:var(--ink)} 346 .nav-dd-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);min-width:260px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 44px rgba(11,10,31,.14);padding:8px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;z-index:60} 347 .nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%)} 348 .nav-dd-menu a{display:block;padding:10px 12px;border-radius:9px;text-decoration:none;color:var(--ink)} 349 .nav-dd-menu a:hover{background:var(--bg)} 350 .nav-dd-menu a b{display:block;font-family:var(--font-display);font-weight:600;font-size:.95rem} 351 .nav-dd-menu a span{font-size:.82rem;color:var(--muted)} 352 .foot-links{display:flex;gap:18px;flex-wrap:wrap} 353 .foot-links a{color:inherit;text-decoration:none} 354 .foot-disc{margin-top:16px;font-size:.78rem;color:var(--muted);opacity:.85;max-width:64em} 355 356 /* ---------- Screenshots ---------- */ 357 section.shots{padding:70px 0 30px} 358 .shots-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:stretch} 359 .shots-grid + .shots-grid{margin-top:20px;grid-template-columns:1fr 1fr} 360 .shot-card{ 361 background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); 362 overflow:hidden;display:flex;flex-direction:column;margin:0; 363 } 364 .shot-img{flex:1;min-height:0;overflow:hidden;border-bottom:1px solid var(--line);background:#f2f1f6} 365 .shot-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} 366 .shot-card figcaption{padding:14px 18px;font-size:.88rem;color:var(--muted)} 367 .shot-card figcaption strong{color:var(--ink);display:block;font-family:var(--font-display);font-size:.95rem} 368 .shot-phone .shot-img{background:var(--ink);display:flex;justify-content:center;padding:26px 0 0} 369 .shot-phone .shot-img img{width:64%;height:auto;object-fit:contain;border-radius:20px 20px 0 0;box-shadow:0 12px 40px rgba(0,0,0,.45)} 370 .shots-grid .shot-tall .shot-img{max-height:none} 371 .shots-grid:first-of-type .shot-card:first-child .shot-img{aspect-ratio:16/9;flex:none} 372 .shots-grid + .shots-grid .shot-img{aspect-ratio:16/9;flex:none} 373 374 /* ---------- Pricing ---------- */ 375 section.pricing{padding:70px 0 30px} 376 .price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} 377 .price{ 378 background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius); 379 padding:24px 22px;display:flex;flex-direction:column;position:relative; 380 } 381 .price.hot{border-color:var(--accent);box-shadow:0 10px 30px rgba(255,107,94,.14)} 382 .price .pop{ 383 position:absolute;top:-11px;left:50%;transform:translateX(-50%); 384 background:var(--accent);color:#fff;font-size:.68rem;font-weight:700; 385 letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:3px 12px; 386 } 387 .price h3{font-size:1.05rem;margin-bottom:4px} 388 .price .amt{font-family:var(--font-display);font-size:1.9rem;font-weight:700;margin:6px 0 2px} 389 .price .amt small{font-size:.85rem;color:var(--muted);font-weight:500} 390 .price .quota{font-size:.82rem;color:var(--muted);margin-bottom:14px} 391 .price ul{list-style:none;display:grid;gap:8px;font-size:.86rem;color:#453d6b;margin:0;padding:0} 392 .price ul li::before{content:"â ";color:var(--delivered);font-weight:700} 393 .price-note{font-size:.85rem;color:var(--muted);text-align:center;margin-top:18px} 394 395 /* ---------- FAQ teaser ---------- */ 396 section.faqt{padding:50px 0 20px} 397 .faqt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} 398 .faqt details{ 399 background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 20px; 400 } 401 .faqt summary{font-family:var(--font-display);font-weight:600;cursor:pointer;font-size:.98rem} 402 .faqt details p{margin-top:10px;font-size:.92rem;color:var(--muted)} 403 .faqt-more{text-align:center;margin-top:18px;font-size:.92rem} 404 405 /* ---------- Scroll reveal ---------- */ 406 .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease} 407 .rv.in{opacity:1;transform:none} 408 409 /* ---------- Footer ---------- */ 410 footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:.86rem} 411 .foot-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} 412 .foot-brand{display:flex;align-items:baseline;gap:8px} 413 .foot-brand .brand-en{font-size:1.05rem;color:var(--ink)} 414 .foot-wasal{font-family:var(--font-ar)} 415 416 /* ---------- Responsive ---------- */
417 @media (max-width:900px){ 418 .hero-grid,.noon-card{grid-template-columns:1fr;gap:36px} 419 .feat-grid,.how-grid{grid-template-columns:1fr} 420 .shots-grid,.faqt-grid{grid-template-columns:1fr} 421 .price-grid{grid-template-columns:1fr 1fr} 422 .nav-links{display:none} 423 .hero{padding:48px 0 28px} 424 .noon-card,.wl-card{padding:36px 26px} 425 } 426 @media (prefers-reduced-motion:reduce){ 427 html{scroll-behavior:auto} 428 *,*::before,*::after{animation:none!important;transition:none!important} 429 } 430</style> 431<!-- Crisp live chat -->
432<script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="ab8973f4-4aaf-46f5-af49-dbd01a7d7b9b";(function(){var d=document,s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
432 433<!-- /Crisp --> 434</head> 435<body> 436 437<nav> 438 <div class="wrap nav-in"> 439 <a class="brand" href="/" aria-label="Waslio Connect home"> 440 <span class="brand-en">waslio<span class="dot">.</span></span> 441 <span class="brand-tag">Connect</span> 442 </a> 443 <div class="nav-links"> 444 <div class="nav-dd"> 445 <button class="nav-dd-btn" aria-haspopup="true">Products 446 <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M2.5 4.5L6 8l3.5-3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg> 447 </button> 448 <div class="nav-dd-menu"> 449 <a href="/courier"><b>Waslio Courier</b><span>Same-day UAE multi-courier dispatch</span></a> 450 <a href="/odoo"><b>Waslio: Odoo Integration</b><span>Two-way Shopify â Odoo ERP sync</span></a> 451 <a href="/resume-downloader"><b>Resume Downloader</b><span>Bulk-download LinkedIn applicant resumes</span></a> 452 </div> 453 </div> 454 <a href="#shots">Product</a><a href="#pricing">Pricing</a><a href="/faq">FAQ</a> 455 </div> 456 <a class="nav-cta" href="https://apps.shopify.com/waslio" target="_blank" rel="noopener">Install on Shopify</a> 457 </div> 458</nav> 459 460<header class="hero"> 461 <div class="wrap hero-grid"> 462 <div> 463 <span class="eyebrow">Multi-courier Shopify app · UAE</span> 464 <h1>Same-day dispatch on autopilot. <span class="fade">With automatic failover.</span></h1> 465 <p class="lede">Waslio connects your Shopify store to <strong>noon Send, Careem Express and Quiqup</strong> in one 10-minute install. Rules pick the courier for every order â and if no rider shows up, the order falls to the next courier automatically. Delivery-slot timing, Shopify Flow triggers and branded live tracking included.</p> 466 <div class="cta-row"> 467 <a class="btn btn-primary" href="https://apps.shopify.com/waslio" target="_blank" rel="noopener">Install on Shopify â free plan available</a> 468 <a class="btn btn-ghost" href="#how">How it works</a> 469 </div> 470 <p class="cta-note" style="margin-top:14px">Live on the Shopify App Store · Free plan · Bring your own courier accounts · No sales call.</p> 471 </div> 472 473 <!-- Signature: live dispatch waterfall -->
474 <div class="sim" aria-label="Animated demo of Waslio dispatch failover"> 475 <div class="sim-head"> 476 <span class="sim-title">Dispatch waterfall</span> 477 <span class="sim-live"><i></i> live rules</span> 478 </div> 479 <div class="order-card"> 480 <div> 481 <div class="order-id">Order #2481</div> 482 <div class="order-meta">Dubai Marina · 2 items · slot 4â6 PM</div> 483 </div> 484 <span class="cod-tag">Prepaid · AED 240</span> 485 </div> 486 487 <div class="courier-row" id="row-noon"> 488 <span class="c-rank">1</span> 489 <span class="c-name">noon Send</span> 490 <span class="c-status" id="st-noon">â</span> 491 </div> 492 <div class="cascade" id="cascade-1"></div> 493 <div class="courier-row" id="row-careem"> 494 <span class="c-rank">2</span> 495 <span class="c-name">Careem Express</span> 496 <span class="c-status" id="st-careem">â</span> 497 </div> 498 <div class="cascade" id="cascade-2" style="height:12px"></div> 499 <div class="courier-row" id="row-quiqup" style="margin-bottom:0"> 500 <span class="c-rank">3</span> 501 <span class="c-name">Quiqup</span> 502 <span class="c-status" id="st-quiqup">standby</span> 503 </div> 504 505 <div class="wa-bubble" id="wa" aria-live="polite"> 506 <span class="wa-tag">TRACKING PAGE â CUSTOMER</span> 507 <span id="wa-text"></span> 508 </div> 509 </div> 510 </div> 511</header> 512 513<div class="works wrap"> 514 <p class="works-label">Works with your couriers</p> 515 <div class="works-row"> 516 <span class="chip"><i class="clogo" style="background:#FEEE00;color:#111111">noon</i>noon Send</span> 517 <span class="chip"><i class="clogo" style="background:#00A859;color:#fff;font-size:.5rem">Careem</i>Careem Express</span> 518 <span class="chip"><i class="clogo" style="background:#E6007E;color:#fff;font-size:.5rem">Quiqup</i>Quiqup</span> 519 <span class="chip soon"><i class="clogo" style="background:#00B8D9;color:#fff;font-size:.5rem">jeebly</i>Jeebly <small>· beta</small></span> 520 <span class="chip soon"><i class="clogo" style="background:#FC3F1D;color:#fff;font-size:.52rem">Yango</i>Yango <small>· beta</small></span> 521 <span class="chip soon"><i class="clogo" style="background:#0E1B2C;color:#4FE3C1;font-size:.44rem">swftbox</i>swftbox <small>· beta</small></span> 522 <span class="chip soon"><i class="clogo" style="background:#101820;color:#C8FF00;font-size:.54rem">LYVE</i>Lyve <small>· beta</small></span> 523 <span class="chip soon"><i class="clogo" style="background:#E4172E;color:#fff;font-size:.54rem">iMile</i>iMile <small>· beta</small></span> 524 <span class="chip soon"><i class="clogo" style="background:#6C2BD9;color:#fff;font-size:.54rem">barq</i>BARQ Fleet <small>· KSA</small></span> 525 <span class="chip soon"><i class="clogo" style="background:#E30613;color:#fff;font-size:.46rem">aramex</i>Aramex <small>· beta</small></span> 526 </div> 527</div> 528 529<section class="features"> 530 <div class="wrap"> 531 <div class="sec-head"> 532 <h2>Your whole delivery stack, one app</h2> 533 <p>Built for UAE stores that live and die by same-day: florists, bakeries, butchers, pharmacies. Not an enterprise platform â software you install yourself.</p> 534 </div> 535 <div class="feat-grid"> 536 <article class="feat"> 537 <div class="glyph g-fall" aria-hidden="true"> 538 <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M3 4h10M7 11h10M11 18h8" stroke="#FF6B5E" stroke-width="2.4" stroke-linecap="round"/><path d="M13 2l2 2-2 2M17 9l2 2-2 2" stroke="#FF6B5E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> 539 </div> 540 <h3>Dispatch waterfall</h3> 541 <p>Rules pick the courier by zone, time window and order tags. If no rider is assigned in N minutes, the order auto-falls to the next courier. No refreshing dashboards, no angry customers.</p> 542 </article> 543 <article class="feat"> 544 <div class="glyph g-slot" aria-hidden="true"> 545 <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="3" y="4" width="16" height="15" rx="2.5" stroke="#3E6DD8" stroke-width="2"/><path d="M3 9h16M8 2v4M14 2v4" stroke="#3E6DD8" stroke-width="2" stroke-linecap="round"/><circle cx="14.5" cy="14" r="1.6" fill="#3E6DD8"/></svg> 546 </div> 547 <h3>Auto-dispatch triggers</h3> 548 <p>
548Dispatch when an order is created, paid, fulfilled or tagged â including tags added by Shopify Flow. Reads delivery slots from Zapiet-style apps and times the rider to them.</p> 549 </article> 550 <article class="feat"> 551 <div class="glyph g-wa" aria-hidden="true"> 552 <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 3a8 8 0 1 0 4.2 14.8L19 19l-1-3.6A8 8 0 0 0 11 3z" stroke="#1E9E6A" stroke-width="2" stroke-linejoin="round"/><path d="M7.5 11.5l2.3 2.3L15 9.5" stroke="#1E9E6A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 553 </div> 554 <h3>Branded live tracking</h3> 555 <p>Every delivery gets a tracking page with the rider moving live on the map â your logo, colors and domain. Customers rate the delivery when it lands.</p> 556 </article> 557 </div> 558 </div> 559</section> 560 561<section class="shots" id="shots"> 562 <div class="wrap"> 563 <div class="sec-head rv"> 564 <h2>See Waslio in action</h2> 565 <p>The real app â dispatch board, drop-off confirmation, courier analytics, and the tracking page your customers see.</p> 566 </div> 567 <div class="shots-grid"> 568 <figure class="shot-card rv"> 569 <div class="shot-img"><img src="/assets/shot-dashboard.png" alt="Waslio dashboard: live deliveries across noon Send, Careem Express and Quiqup" loading="eager"></div> 570 <figcaption><strong>One dispatch board</strong>Every courier, every rider, one screen â live status, drivers and quota at a glance.</figcaption> 571 </figure> 572 <figure class="shot-card shot-phone rv"> 573 <div class="shot-img"><img src="/assets/shot-tracking-phone.png" alt="Branded customer tracking page with live rider map" loading="eager"></div> 574 <figcaption><strong>Branded live tracking</strong>Customers follow the rider on your page â your logo, colors and domain.</figcaption> 575 </figure> 576 </div> 577 <div class="shots-grid"> 578 <figure class="shot-card rv"> 579 <div class="shot-img"><img src="/assets/shot-dispatch.png" alt="Confirming the delivery drop-off pin on a map" loading="lazy"></div> 580 <figcaption><strong>Pin-accurate drop-offs</strong>Confirm on the map once â Waslio remembers the pin for that address.</figcaption> 581 </figure> 582 <figure class="shot-card rv"> 583 <div class="shot-img"><img src="/assets/shot-analytics.png" alt="Delivery analytics: on-time rate, median time, auto vs manual" loading="lazy"></div> 584 <figcaption><strong>Numbers that matter</strong>On-time rate, median door-time, and how many deliveries the waterfall saved.</figcaption> 585 </figure> 586 </div> 587 </div> 588</section> 589 590<section class="how" id="how"> 591 <div class="wrap"> 592 <div class="sec-head"> 593 <h2>Live in 10 minutes</h2> 594 </div> 595 <div class="how-grid"> 596 <div class="step"> 597 <h3>Install from the Shopify App Store</h3> 598 <p>One click. No sales call, no onboarding fee, no "book a demo".</p> 599 </div> 600 <div class="step"> 601 <h3>Paste your courier API keys</h3> 602 <p>You keep your own noon Send, Careem and Quiqup accounts and rates. Waslio just orchestrates them.</p> 603 </div> 604 <div class="step"> 605 <h3>Set your dispatch rules</h3> 606 <p>Choose courier priority by zone and time, set the failover timer, pick your trigger â paid, created, fulfilled or a Shopify Flow tag. Orders dispatch themselves.</p> 607 </div> 608 </div> 609 </div> 610</section> 611 612<section class="noon"> 613 <div class="wrap"> 614 <div class="noon-card"> 615 <div> 616 <h2>The noon Send Shopify integration â plus every other courier</h2> 617 <p>Hundreds of UAE businesses ship with noon Send, but there's no official Shopify connection â so orders get re-typed into dashboards by hand. Waslio connects noon Send to Shopify natively.</p> 618 <p><strong>And because noon is one courier, not a delivery strategy,</strong> Waslio puts Careem Express and Quiqup in the same waterfall â so a busy Friday at one courier never becomes a missed delivery for you.</p> 619 </div> 620 <ul class="noon-list"> 621 <li>Orders flow to noon Send automatically â booked, tracked, and fulfilled at pickup</li> 622 <li>
622Automatic fallback to Careem or Quiqup when no rider is available</li> 623 <li>One tracking page and one delivery report across all couriers</li> 624 </ul> 625 </div> 626 </div> 627</section> 628 629<section class="pricing" id="pricing"> 630 <div class="wrap"> 631 <div class="sec-head rv"> 632 <h2>Simple pricing, priced per delivery volume</h2> 633 <p>Billed through Shopify. Bring your own courier accounts â Waslio never marks up delivery fees. Free setup included with every plan.</p> 634 </div> 635 <div class="price-grid"> 636 <div class="price rv"> 637 <h3>Free</h3><div class="amt">$0</div> 638 <div class="quota">30 deliveries / month</div> 639 <ul><li>All couriers & live tracking</li><li>Order-page dispatch</li><li>Customer tracking pages</li><li>Demo mode</li></ul> 640 </div> 641 <div class="price rv"> 642 <h3>Starter</h3><div class="amt">$9.99<small>/mo</small></div> 643 <div class="quota">150 deliveries · then $0.10 each</div> 644 <ul><li>Everything in Free</li><li>Delivery analytics</li><li>Customer email notifications</li><li>Your logo on tracking</li></ul> 645 </div> 646 <div class="price hot rv"> 647 <span class="pop">Most popular</span> 648 <h3>Growth</h3><div class="amt">$29.99<small>/mo</small></div> 649 <div class="quota">1,500 deliveries · then $0.05 each</div> 650 <ul><li>Auto-dispatch on slots</li><li>Routing rules + waterfall failover</li><li>Multi-branch pickups</li><li>Branded tracking domain</li><li>Heatmaps & CSV reports</li></ul> 651 </div> 652 <div class="price rv"> 653 <h3>Pro</h3><div class="amt">$79.99<small>/mo</small></div> 654 <div class="quota">6,000 deliveries · then $0.03 each</div> 655 <ul><li>Everything in Growth</li><li>Priority support</li><li>Custom feature requests</li><li>Onboarding done for you</li></ul> 656 </div> 657 </div> 658 <p class="price-note">Overage has a fixed monthly maximum built into each plan ($25 / $75 / $180) â never more. Referrals add bonus deliveries. <a href="https://apps.shopify.com/waslio" target="_blank" rel="noopener">Start free on the App Store â</a></p> 659 </div> 660</section> 661 662<section class="faqt"> 663 <div class="wrap"> 664 <div class="sec-head rv"><h2>Quick answers</h2></div> 665 <div class="faqt-grid"> 666 <details class="rv"><summary>Do I need my own courier accounts?</summary> 667 <p>Yes â you keep your rates and relationships. Waslio is the dispatch layer on top, so we never mark up a delivery. No account yet? We'll point you to the right onboarding contacts.</p></details> 668 <details class="rv"><summary>What happens when no rider shows up?</summary> 669 <p>The waterfall takes over: after your configured window, the order cancels with courier #1 and re-dispatches to courier #2 automatically â same tracking link, full audit trail.</p></details> 670 <details class="rv"><summary>Does it work with delivery slots (Zapiet etc.)?</summary> 671 <p>Yes. Auto-dispatch reads the slot your scheduling app writes on the order and dispatches with your configured lead time â riders arrive when the order is actually ready.</p></details> 672 <details class="rv"><summary>Can I try it without real deliveries?</summary> 673 <p>Enter "demo" as a courier API key and every delivery is simulated end-to-end, including a moving rider on the live map.</p></details> 674 </div> 675 <p class="faqt-more"><a href="/faq">All questions answered â</a></p> 676 </div> 677</section> 678 679<section class="waitlist" id="waitlist"> 680 <div class="wrap"> 681 <div class="wl-card"> 682 <h2>Get set up free â weâll do it with you</h2> 683 <p style="margin-bottom:18px"><a class="btn btn-primary" href="https://apps.shopify.com/waslio" target="_blank" rel="noopener">Install Waslio on the Shopify App Store</a></p> 684 <p>Prefer a hand? Free setup is included with every plan â we connect your couriers, configure auto-dispatch and run a test delivery with you. Leave your details and we'll reach out.</p> 685 <form id="waitlist-form" novalidate> 686 <div> 687 <label for="f-store">Your store URL</label> 688 <input id="f-store" name="store" type="url" placeholder="yourstore.com" required autocomplete="url"> 689 </div> 690 <div> 691 <label for="f-email">Email</label> 692 <input id="f-email" name="email" type="email" placeholder="[email protected]" required autocomplete="email"> 693 </div> 694 <div> 695 <label for="f-wa">WhatsApp number <span style="font-weight:400;color:var(--muted)">(optional â it's how we work)</span></label> 696 <input id="f-wa" name="whatsapp" type="tel" placeholder="+971 5x xxx xxxx" autocomplete="tel"> 697 </div>
698 <button class="btn btn-ghost" type="submit" style="border:1.5px solid var(--line)">Request free setup</button> 699 </form> 700 <div class="form-success" id="form-success">Wasal â â request received. We'll reply within one business day.</div> 701 <p class="form-note">No spam, no credit card. Just a reply from the founder.</p> 702 </div> 703 </div> 704</section> 705 706<footer> 707 <div class="wrap foot-in"> 708 <div class="foot-brand"> 709 <span class="brand-en">waslio<span class="dot" style="color:var(--accent)">.</span></span> 710 <span class="brand-tag">Connect</span> 711 </div> 712 <div class="foot-links"> 713 <a href="/courier">Courier</a> 714 <a href="/odoo">Odoo Integration</a> 715 <a href="/docs">Docs</a> 716 <a href="/faq">FAQ</a> 717 <a href="/privacy">Privacy</a> 718 <a href="/terms">Terms</a> 719 <a href="mailto:[email protected]">Support</a> 720 </div> 721 <div><span class="wasal">wasal <span class="ar" lang="ar">ÙØµÙ</span> â</span></div> 722 </div> 723 <div class="wrap foot-disc">Not affiliated with or endorsed by Shopify or Odoo. Odoo is a trademark of Odoo S.A.; Shopify is a trademark of Shopify Inc.</div> 724</footer> 725
726<script> 727/* ---------- Dispatch waterfall simulation ---------- */ 728(function(){ 729 const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; 730 const $ = id => document.getElementById(id); 731 const rows = { noon:$('row-noon'), careem:$('row-careem'), quiqup:$('row-quiqup') }; 732 const st = { noon:$('st-noon'), careem:$('st-careem'), quiqup:$('st-quiqup') }; 733 const cascade1 = $('cascade-1'), wa = $('wa'), waText = $('wa-text'); 734 let timers = []; 735 736 function resetAll(){ 737 timers.forEach(clearTimeout); timers = []; 738 Object.values(rows).forEach(r => r.className = 'courier-row'); 739 st.noon.textContent = 'â'; st.careem.textContent = 'â'; st.quiqup.textContent = 'standby'; 740 cascade1.classList.remove('show'); 741 wa.classList.remove('show'); waText.innerHTML = ''; 742 } 743 function at(ms, fn){ timers.push(setTimeout(fn, ms)); } 744 745 function finalState(){ 746 rows.noon.classList.add('failed'); 747 st.noon.innerHTML = '<span class="bad">no rider · timed out</span>'; 748 cascade1.classList.add('show'); 749 rows.careem.classList.add('won'); 750 st.careem.innerHTML = '<span class="ok">rider assigned â ETA 38 min</span>'; 751 wa.classList.add('show'); 752 waText.innerHTML = 'Your order is delivered. <span class="wasal">Wasal <span class="ar" lang="ar">ÙØµÙ</span> â</span>'; 753 } 754 755 function run(){ 756 resetAll(); 757 if (reduced){ finalState(); return; } 758 759 rows.noon.classList.add('active'); 760 st.noon.innerHTML = '<span class="wait">requesting riderâ¦</span>'; 761 762 // countdown on noon 763 let s = 0; 764 const tick = () => { 765 s += 20; 766 if (s <= 240){ 767 st.noon.innerHTML = '<span class="wait">requesting rider⦠' + Math.floor(s/60) + ':' + String(s%60).padStart(2,'0') + '</span>'; 768 timers.push(setTimeout(tick, 350)); 769 } 770 }; 771 at(600, tick); 772 773 at(5400, () => { 774 rows.noon.classList.remove('active'); rows.noon.classList.add('failed'); 775 st.noon.innerHTML = '<span class="bad">no rider in 4 min â</span>'; 776 cascade1.classList.add('show'); 777 }); 778 at(6100, () => { 779 rows.careem.classList.add('active'); 780 st.careem.innerHTML = '<span class="wait">requesting riderâ¦</span>'; 781 }); 782 at(7800, () => { 783 rows.careem.classList.remove('active'); rows.careem.classList.add('won'); 784 st.careem.innerHTML = '<span class="ok">rider assigned â ETA 38 min</span>'; 785 }); 786 at(8600, () => { 787 wa.classList.add('show'); 788 waText.innerHTML = 'Your order is on the way â track it live here ðµ'; 789 }); 790 at(11600, () => { 791 waText.innerHTML = 'Your order is delivered. <span class="wasal">Wasal <span class="ar" lang="ar">ÙØµÙ</span> â</span>'; 792 }); 793 at(15500, run); // loop 794 } 795 run(); 796})(); 797 798/* ---------- Waitlist form ---------- 799 TODO: point this at your real endpoint (Formspree / your Remix action / a 800 Google Form action URL) before launch. Currently it validates and shows 801 the success state locally so the page is demo-ready. */ 802document.getElementById('waitlist-form').addEventListener('submit', function(e){ 803 e.preventDefault(); 804 const form = e.target; 805 if (!form.reportValidity()) return; 806 // fetch('YOUR_ENDPOINT', { method:'POST', body:new FormData(form) }) 807 form.style.display = 'none'; 808 document.getElementById('form-success').style.display = 'block'; 809}); 810</script>
vendor: 1 bytes, line 810
810
811<script> 812/* Scroll-reveal (no-op under prefers-reduced-motion via CSS override) */ 813if ("IntersectionObserver" in window) { 814 const io = new IntersectionObserver((es) => es.forEach((e) => { 815 if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } 816 }), { threshold: 0.12 }); 817 document.querySelectorAll(".rv").forEach((el) => io.observe(el)); 818} else { 819 document.querySelectorAll(".rv").forEach((el) => el.classList.add("in")); 820} 821</script>
821 822</body> 823</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.