PageSourceSearch

https://waslioconnect.com/courier

html waslioconnect.com collected 2026-09-24 14:56:34 UTC 42,928 bytes, 823 lines download raw bytes

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.