{"id":147,"date":"2026-10-25T19:05:26","date_gmt":"2026-10-25T16:05:26","guid":{"rendered":"https:\/\/qcoders.com\/work\/booking-system\/"},"modified":"2026-11-02T09:00:49","modified_gmt":"2026-11-02T07:00:49","slug":"booking-system","status":"publish","type":"page","link":"https:\/\/qcoders.com\/ar\/work\/booking-system\/","title":{"rendered":"Booking System"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"147\" class=\"elementor elementor-147\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c66f63e e-con-full elementor-hidden-desktop elementor-hidden-tablet e-flex e-con e-parent\" data-id=\"c66f63e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-103db4d4 elementor-widget elementor-widget-html\" data-id=\"103db4d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n.qcm{--ink:#0A0E17;--step:#131A27;--line:#232C3D;--paper:#F6F5F0;--mute:#A9AEB8;--volt:#C8F53B;--pad:20px;--sec:88px;\n  --sans:\"Readex Pro\",system-ui,sans-serif;--mono:\"JetBrains Mono\",ui-monospace,monospace}\n.qcm *{box-sizing:border-box;margin:0;padding:0}\n.qcm{background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:400;line-height:1.45;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}\n.qcm img{display:block;max-width:100%;height:auto}\n.qcm a{color:inherit;text-decoration:none}\n.qcm ul,.qcm ol{list-style:none}\n.qcm section[id]{scroll-margin-top:72px}\n.qcm .label{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--volt);font-weight:500;line-height:1.4}\n.qcm .label.dim{color:var(--mute)}\n.qcm .label[data-l]::before{content:attr(data-l)}\n.qcm .dtag[data-tag]::after{content:attr(data-tag)}\n.qcm .hero{padding:28px var(--pad) 0;position:relative}\n.qcm h1{font-weight:700;font-size:clamp(44px,13.4vw,56px);line-height:.95;letter-spacing:-.035em;margin-top:12px;text-wrap:balance}\n.qcm h1 em,.qcm h2 em,.qcm .big em{font-style:normal;color:var(--volt)}\n.qcm .lead{font-size:17px;line-height:1.45;color:var(--mute);margin-top:16px;max-width:350px}\n.qcm .btns{display:flex;gap:10px;margin-top:22px}\n.qcm .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:12px;font-weight:600;font-size:16px;padding:0 16px}\n.qcm .btn svg{width:20px;height:20px}\n.qcm .btn.volt-b{background:var(--volt);color:var(--ink)}\n.qcm .btn.ink{background:var(--ink);color:var(--paper);margin-top:22px;width:100%}\n.qcm .btn.line{border:1.5px solid var(--line);color:var(--paper);flex:0 0 auto}\n.qcm .sh{padding:var(--sec) var(--pad) 22px}\n.qcm .sh-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}\n.qcm .sh h2{font-size:38px;line-height:1;letter-spacing:-.03em;font-weight:700;margin-top:10px;text-wrap:balance}\n.qcm .sh .count{font-family:var(--mono);font-size:12px;color:var(--mute);white-space:nowrap;}\n.qcm .sh .intro{font-size:16px;color:var(--mute);margin-top:14px;max-width:350px}\n.qcm .volt{background:var(--volt);color:var(--ink);margin-top:var(--sec);padding:40px var(--pad) 40px}\n.qcm .volt .label{color:var(--ink);opacity:.75}\n.qcm .volt .big{font-size:36px;line-height:1.02;letter-spacing:-.035em;font-weight:700;margin-top:12px;text-wrap:balance}\n.qcm .volt p{font-size:17px;line-height:1.4;margin-top:14px;max-width:340px}\n.qcm .rows{border-top:1px solid var(--line)}\n.qcm .rows>li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:22px var(--pad) 24px;border-bottom:1px solid var(--line)}\n.qcm .rows .n{font-family:var(--mono);font-size:12px;color:var(--volt);padding-top:9px}\n.qcm .rows h3{font-size:28px;line-height:1.05;letter-spacing:-.025em;font-weight:600;text-wrap:balance}\n.qcm .rows.xl h3{font-size:34px;letter-spacing:-.03em}\n.qcm .rows p{font-size:15px;color:var(--mute);margin-top:8px;line-height:1.45}\n.qcm .rows .you{color:var(--paper);font-size:17px;line-height:1.35;font-weight:500}\n.qcm :is(.rows,.qcm .steps) .proof{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--volt);min-height:24px}\n.qcm :is(.rows,.qcm .steps) .proof svg{width:16px;height:16px}\n.qcm .rows .links{margin-top:12px;font-size:15px;color:var(--mute)}\n.qcm .rows .links a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--volt)}\n.qcm .form-note{padding:18px var(--pad) 0;font-size:14px;line-height:1.45;color:var(--mute)}\n.qcm .form-note a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--volt)}\n.qcm .rows .crop,.qcm .rows .dk,.qcm .rows .ph{margin-top:18px}\n.qcm .dk{position:relative;border-radius:12px;overflow:hidden;background:var(--step);box-shadow:0 24px 50px -24px rgba(0,0,0,.8),0 0 0 1px rgba(246,245,240,.09)}\n.qcm .dk img{width:100%}\n.qcm .ph{position:relative;border-radius:24px;overflow:hidden;border:5px solid #1c2433;background:var(--step);aspect-ratio:390\/844;box-shadow:0 24px 50px -20px rgba(0,0,0,.8),0 0 0 1px rgba(246,245,240,.08)}\n.qcm .ph img{width:100%;height:100%;object-fit:cover;object-position:top}\n.qcm .crop{position:relative;overflow:hidden;border-radius:12px;background:var(--step);box-shadow:0 0 0 1px rgba(246,245,240,.09);min-height:0}\n.qcm .crop img{position:absolute;max-width:none;width:var(--zw);height:auto;left:var(--zx);top:var(--zy)}\n.qcm .cap{font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:12px;line-height:1.45}\n.qcm .cap a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(246,245,240,.35)}\n.qcm .duo{position:relative;margin:28px 0 0;aspect-ratio:390\/318}\n.qcm .hero .duo,.qcm .steps .duo{margin:28px calc(var(--pad) * -1) 0}\n.qcm .duo .dk{position:absolute;left:0;top:0;width:80%;border-radius:0 12px 12px 0}\n.qcm .duo .ph{position:absolute;right:5%;top:14%;width:33%}\n.qcm .fig{padding:0 var(--pad)}\n.qcm .dtag{position:absolute;left:var(--pad);bottom:10%;font-family:var(--mono);font-size:11px;background:var(--ink);border:1px solid rgba(200,245,59,.5);color:var(--volt);padding:5px 9px;border-radius:6px}\n.qcm .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 var(--pad)}\n.qcm .pair>figure:last-child{margin-top:44px}\n.qcm .facts{display:grid;grid-template-columns:1fr 1fr 1fr;margin:24px var(--pad) 0;border-top:1.5px solid var(--line)}\n.qcm .facts div{padding:12px 0 0;font-size:13px;line-height:1.3;color:var(--mute)}\n.qcm .facts div+div{padding-left:12px;border-left:1px solid var(--line)}\n.qcm .facts b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--paper)}\n.qcm .points{margin:22px var(--pad) 0;border-top:1px solid var(--line)}\n.qcm .points li{padding:14px 0;border-bottom:1px solid var(--line)}\n.qcm .points b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.2}\n.qcm .points span{display:block;font-size:15px;color:var(--mute);margin-top:4px}\n.qcm .dl{margin:24px var(--pad) 0;border-top:1px solid var(--line)}\n.qcm .dl div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}\n.qcm .dl dt{font-family:var(--mono);font-size:12px;color:var(--volt);padding-top:3px}\n.qcm .dl dd{font-size:16px;line-height:1.4}\n.qcm .idx{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}\n.qcm .idx a{display:flex;flex-direction:column;justify-content:space-between;min-height:84px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--step)}\n.qcm .idx b{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.1}\n.qcm .idx small{font-family:var(--mono);font-size:11px;color:var(--mute)}\n.qcm .idx small i{font-style:normal;color:var(--volt)}\n.qcm .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}\n.qcm .chips li,.qcm .chips a{font-size:14px;padding:7px 12px;border:1px solid var(--line);border-radius:99px;color:var(--paper);line-height:1.3}\n.qcm .chips a{display:inline-flex;align-items:center;min-height:40px}\n.qcm .tiles{display:flex;flex-direction:column;gap:14px}\n.qcm .tile{display:block;position:relative;background:var(--step);overflow:hidden}\n.qcm .tile .pic{position:relative;aspect-ratio:16\/10;overflow:hidden}\n.qcm .tile .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}\n.qcm .tile .meta{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px var(--pad) 20px}\n.qcm .tile .tt{font-size:24px;line-height:1.1;letter-spacing:-.02em;font-weight:600;margin-top:6px;color:var(--paper)}\n.qcm .tile .tl{display:block;font-size:15px;color:var(--mute);margin-top:8px;line-height:1.4}\n.qcm .go{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--volt);color:var(--ink);display:grid;place-items:center;margin-top:4px}\n.qcm .go svg{width:20px;height:20px}\n.qcm .tile .num{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:11px;background:rgba(10,14,23,.82);color:var(--paper);padding:5px 8px;border-radius:6px}\n.qcm .tile.flip .meta{flex-direction:row-reverse}\n.qcm .tile.flip .meta>div{text-align:right}\n.qcm .tile.flip .go{background:transparent;border:1.5px solid var(--volt);color:var(--volt)}\n.qcm .tile:active .pic img{transform:scale(1.03)}\n.qcm .tile[hidden]{display:none}\n.qcm .flt{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}\n.qcm .flt button{font:500 14px\/1 var(--sans);color:var(--paper);background:transparent;border:1px solid var(--line);border-radius:99px;height:40px;padding:0 13px;cursor:pointer}\n.qcm .flt button[aria-pressed=true]{background:var(--volt);border-color:var(--volt);color:var(--ink)}\n.qcm .flt button:focus-visible,.qcm .qa summary:focus-visible,.qcm a:focus-visible{outline:2px solid var(--volt);outline-offset:2px}\n.qcm .steps{border-top:1px solid var(--line)}\n.qcm .steps>li{padding:24px var(--pad) 26px;border-bottom:1px solid var(--line)}\n.qcm .steps .top{display:flex;align-items:baseline;gap:12px}\n.qcm .steps .n{font-family:var(--mono);font-size:12px;color:var(--volt)}\n.qcm .steps h3{font-size:30px;line-height:1.05;letter-spacing:-.025em;font-weight:600;text-wrap:balance}\n.qcm .steps p{font-size:15px;color:var(--mute);margin-top:10px}\n.qcm .steps .side{display:grid;grid-template-columns:1fr 128px;gap:16px;align-items:start}\n.qcm .steps .side .ph,.qcm .steps .side .crop{margin-top:4px}\n.qcm .steps .wide{margin-top:18px}\n.qcm .steps.giant h3{font-size:clamp(52px,16vw,64px);line-height:.95;letter-spacing:-.04em;font-weight:700}\n.qcm .steps.giant .you{font-size:18px;color:var(--paper);font-weight:500;line-height:1.35;margin-top:12px}\n.qcm .nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}\n.qcm .nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:99px;font-size:14px}\n.qcm .qa{border-top:1px solid var(--line)}\n.qcm .qa details{border-bottom:1px solid var(--line)}\n.qcm .qa summary{list-style:none;display:grid;grid-template-columns:1fr 28px;gap:14px;align-items:start;padding:18px var(--pad);cursor:pointer}\n.qcm .qa summary::-webkit-details-marker{display:none}\n.qcm .qa summary h3{font-size:18px;line-height:1.3;font-weight:500;letter-spacing:-.01em}\n.qcm .qa summary svg{width:22px;height:22px;color:var(--volt);margin-top:1px;transition:transform .25s ease}\n.qcm .qa details[open] summary svg{transform:rotate(45deg)}\n.qcm .qa details[open] summary h3{color:var(--volt)}\n.qcm .qa .ans{padding:0 var(--pad) 22px;font-size:16px;color:var(--mute);line-height:1.5}\n.qcm .qa .ans a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--volt)}\n.qcm .ind{border-top:1px solid var(--line)}\n.qcm .ind li a,.qcm .ind li>div{display:block;padding:20px var(--pad);border-bottom:1px solid var(--line)}\n.qcm .ind h3{font-size:26px;line-height:1.08;letter-spacing:-.025em;font-weight:600}\n.qcm .ind p{font-size:15px;color:var(--mute);margin-top:8px}\n.qcm .ind .ex{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--mono);font-size:13px;color:var(--volt)}\n.qcm .ind .ex svg{width:16px;height:16px}\n.qcm .tech{border-top:1px solid var(--line)}\n.qcm .tech>li{padding:22px var(--pad);border-bottom:1px solid var(--line)}\n.qcm .tech h3{font-size:26px;line-height:1.08;letter-spacing:-.025em;font-weight:600}\n.qcm .tech p{font-size:15px;color:var(--mute);margin-top:8px}\n.qcm .stackl{padding:0 var(--pad)}\n.qcm .more{display:flex;align-items:center;justify-content:space-between;margin:14px var(--pad) 0;height:56px;padding:0 18px;border:1px solid var(--line);border-radius:12px;font-weight:500}\n.qcm .more svg{width:20px;height:20px;color:var(--volt)}\n.qcm .more.on-volt{margin:22px 0 0;border-color:rgba(10,14,23,.35);color:var(--ink)}\n.qcm .more.on-volt svg{color:var(--ink)}\n.qcm .cta{position:relative;padding:var(--sec) var(--pad) 48px}\n.qcm .cta h2,.qcm .cta h1{font-size:clamp(40px,12vw,48px);line-height:.94;letter-spacing:-.04em;font-weight:700;margin-top:12px;text-wrap:balance}\n.qcm .cta .sub{font-size:17px;color:var(--mute);margin-top:16px;max-width:340px}\n.qcm .needs-q{margin-top:24px}\n.qcm .needs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}\n.qcm .needs a{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border:1px solid rgba(200,245,59,.45);border-radius:99px;font-size:15px;font-weight:500}\n.qcm .needs a:active{background:var(--volt);color:var(--ink)}\n.qcm .wa{display:flex;align-items:center;gap:14px;margin-top:22px;background:var(--volt);color:var(--ink);border-radius:18px;padding:18px}\n.qcm .wa .ic{flex:0 0 52px;height:52px;border-radius:14px;background:var(--ink);color:var(--volt);display:grid;place-items:center}\n.qcm .wa .ic svg{width:28px;height:28px}\n.qcm .wa b{display:block;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.1}\n.qcm .wa span span{display:block;font-size:15px;font-weight:500;margin-top:3px}\n.qcm .wa .arr{margin-left:auto;width:22px;height:22px;flex:0 0 22px}\n.qcm .alt{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:16px 18px;border:1px solid var(--line);border-radius:14px}\n.qcm .alt b{font-weight:500}\n.qcm .alt>svg{width:22px;height:22px;color:var(--volt)}\n.qcm .langs{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}\n.qcm .langs span{font-size:14px;padding:7px 12px;border:1px solid var(--line);border-radius:99px}\n.qcm .form-head{padding:var(--sec) var(--pad) 28px}\n.qcm .form-head h2{font-size:38px;line-height:1;letter-spacing:-.03em;font-weight:700;margin-top:10px}\n.qcm .form-head p.intro{font-size:16px;color:var(--mute);margin-top:14px}\n.qcm .reach{margin-top:12px;border-top:1px solid var(--line)}\n.qcm .reach a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}\n.qcm .reach b{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em}\n.qcm .reach small{display:block;font-size:14px;color:var(--mute);margin-top:2px}\n.qcm .reach svg{width:22px;height:22px;color:var(--volt);flex:0 0 22px}\n.qcm .end{height:8px}\n@media (prefers-reduced-motion:no-preference){\n.qcm.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}\n.qcm.js .rv.in{opacity:1;transform:none}\n.qcm.js .scan>img{clip-path:inset(0 0 100% 0)}\n.qcm.js .scan.in>img{animation:qcmscan 1.05s cubic-bezier(.65,.05,.3,1) both}\n.qcm.js .scan::after{content:\"\";position:absolute;left:0;right:0;top:0;height:2px;background:var(--volt);box-shadow:0 0 14px 2px rgba(200,245,59,.55);transform:translateY(-100%);opacity:0;pointer-events:none;z-index:4}\n.qcm.js .scan.in::after{animation:qcmline 1.05s cubic-bezier(.65,.05,.3,1) both}\n.qcm.js .rv .scan.in>img,.qcm.js .rv .scan.in::after{animation-delay:.15s}\n.qcm.js .scan.done>img{animation:none;clip-path:none}\n.qcm.js .scan.done::after{animation:none;opacity:0}\n.qcm .hero h1{animation:qcmrise .8s cubic-bezier(.2,.7,.2,1) both}\n}\n.qcm .tag{color:var(--paper);font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.01em;max-width:340px}\n.qcm .summary{padding:28px var(--pad) 0;font-size:16px;color:var(--mute);line-height:1.5}\n.qcm .crop.narrow{width:62%}\n.qcm .places{display:block}\n.qcm .places .say{display:block;padding:0 var(--pad) 22px;margin-top:-12px;font-size:38px;line-height:1;letter-spacing:-.03em;font-weight:700}\n.qcm .places .pl{display:block;padding:14px var(--pad);border-bottom:1px solid var(--line);font-size:clamp(40px,12vw,48px);line-height:1;letter-spacing:-.04em;font-weight:700}\n.qcm .places .say+.pl{border-top:1px solid var(--line)}\n.qcm .places .pl:last-child{color:var(--volt)}\n.qcm .intro.pad{padding:20px var(--pad) 0;font-size:16px;color:var(--mute)}\n.qcm .side-shot{margin-top:18px}\n.qcm .volt .first{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em;margin-top:18px}\n.qcm .volt h2.big{color:var(--ink)}\n.qcm .side-shot .crop{width:70%}\n@keyframes qcmscan{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}\n@keyframes qcmline{0%{top:0;opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}\n@keyframes qcmrise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}\n<\/style>\n<div class=\"qcm\">\n<svg width=\"0\" height=\"0\" style=\"position:absolute\" aria-hidden=\"true\">\n<symbol id=\"qcm-arr\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/symbol>\n<symbol id=\"qcm-up\" viewBox=\"0 0 24 24\"><path d=\"M7 17 17 7M8 7h9v9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/symbol>\n<symbol id=\"qcm-wa\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12.04 2a9.9 9.9 0 0 0-8.5 15l-1.4 5 5.2-1.36A9.9 9.9 0 1 0 12.04 2Zm0 18.1a8.2 8.2 0 0 1-4.2-1.15l-.3-.18-3.08.8.82-3-.2-.31a8.2 8.2 0 1 1 6.96 3.84Zm4.5-6.14c-.25-.12-1.46-.72-1.69-.8-.23-.08-.39-.12-.55.12-.17.25-.64.8-.78.97-.14.16-.29.18-.53.06a6.7 6.7 0 0 1-3.37-2.94c-.25-.44.25-.41.72-1.36.08-.16.04-.3-.02-.43l-.76-1.83c-.2-.48-.4-.41-.55-.42h-.47a.9.9 0 0 0-.65.3 2.74 2.74 0 0 0-.85 2.04c0 1.2.87 2.37 1 2.53.12.16 1.72 2.63 4.17 3.69 1.55.67 2.16.73 2.93.61.47-.07 1.46-.6 1.66-1.17.2-.58.2-1.07.15-1.17-.07-.1-.23-.16-.47-.28Z\"\/><\/symbol>\n<symbol id=\"qcm-plus\" viewBox=\"0 0 24 24\"><path d=\"M12 5v14M5 12h14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/symbol>\n<\/svg>\n<section class=\"hero\">\n  <p class=\"label\" data-l=\"\/\/ Systems  \u00b7  03 \/ 06\"><\/p>\n  <h1>Booking for clinics<\/h1>\n  <p class=\"lead tag\">A booking system for clinics and salons, including online booking, a staff calendar and reminders.<\/p>\n  <div class=\"duo\"><div class=\"dk scan\"><img fetchpriority=\"high\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp\" srcset=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar-768x480.webp 768w, https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar-1024x640.webp 1024w, https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp 1440w\" sizes=\"80vw\" width=\"1440\" height=\"900\" fetchpriority=\"high\" decoding=\"async\" alt=\"Booking system staff calendar: bookings by service, breaks, a live time line, and the booking panel with deposit, reminders and visit history.\"><\/div><div class=\"ph scan\"><img src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-05-mobile-upcoming-visit.webp\" width=\"390\" height=\"844\" decoding=\"async\" alt=\"Upcoming visit: time, staff, directions and what to prepare, with one-tap reschedule or cancel.\"><\/div><span class=\"dtag\" aria-hidden=\"true\" data-tag=\"\/\/ booking-system\"><\/span><\/div>\n<\/section>\n<p class=\"summary\">A booking system for clinics, salons and studios that takes bookings online, collects a deposit and sends reminders automatically. Staff also see the whole week on one calendar, with each client&#x27;s history, payments and no-shows next to every booking.<\/p>\n<dl class=\"dl\"><div><dt>Made for<\/dt><dd>Clinics, salons and studios that work by appointment.<\/dd><\/div><div><dt>Used by<\/dt><dd>Clients who book online, the front desk and the owner.<\/dd><\/div><div><dt>Runs on<\/dt><dd>The web for the booking page and the calendar, WhatsApp and SMS for reminders.<\/dd><\/div><\/dl>\n<section class=\"volt rv\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>The challenge<\/p><h2 class=\"big\">Why clinics need a booking system<\/h2><p class=\"first\">Many service businesses still take bookings by phone, WhatsApp and a paper diary.<\/p><p>The front desk spends hours confirming times, and when a client does not come, the empty slot is lost. Staff hours, client notes and payments also live in different places. As a result, it is hard to see who is coming, who has paid and who often misses visits.<\/p><\/section>\n<section>\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>Features<\/p><span class=\"count\">07 parts<\/span><\/div><h2>What&#x27;s in the booking system<\/h2><p class=\"intro\">Seven parts that run the front desk, from the first booking to the waitlist.<\/p><\/div>\n  <ol class=\"rows\"><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">01<\/span><div><h3>Online booking system<\/h3><p>Clients pick a service, a staff member and a free time, then pay a deposit to hold it. The page shows only times that really work, based on staff hours, breaks and rooms.<\/p><div class=\"crop scan\" style=\"aspect-ratio:486\/590;--zw:296.296%;--zx:-97.119%;--zy:-33.220%\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\" alt=\"The booking page: the client picks a therapist, a day in November and a free time, 15:00 on Thursday 12 November\"><\/div><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">02<\/span><div><h3>Staff week calendar<\/h3><p>The whole team on one screen: bookings colored by service, breaks, closed hours and a live time line. The front desk also checks clients in, moves bookings and sees who still owes a deposit.<\/p><div class=\"crop scan\" style=\"aspect-ratio:426\/470;--zw:338.028%;--zx:-94.836%;--zy:-28.936%\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\" alt=\"Three days of the staff calendar: bookings colored by service, a lunch break, a no-show and the live time line\"><\/div><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">03<\/span><div><h3>WhatsApp and SMS reminders<\/h3><p>Confirmation, 24-hour and 2-hour messages go out on their own, followed by aftercare tips after the visit. When clients confirm, reschedule or cancel with one tap, their reply updates the booking. If a WhatsApp message is not read, an SMS goes out instead.<\/p><div class=\"crop scan\" style=\"aspect-ratio:370\/412;--zw:389.189%;--zx:-281.622%;--zy:-56.311%\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-03-reminder-settings.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\" alt=\"The 24-hour reminder as the client sees it on WhatsApp, with Confirm, Reschedule and Cancel buttons and the client&#x27;s reply\"><\/div><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">04<\/span><div><h3>Deposits and online payment<\/h3><p>Clients pay a deposit by card when they book and pay the rest at the visit. Your cancellation rules decide when a deposit is kept.<\/p><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">05<\/span><div><h3>Client records<\/h3><p>Each client&#x27;s visits, notes, payments and messages in one place, so any staff member knows the full story before the visit starts.<\/p><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">06<\/span><div><h3>No-show tracking<\/h3><p>A visit is marked as a no-show if the client is not checked in on time. After repeated no-shows, the system can ask for full payment on the next online booking.<\/p><\/div><\/li><li class=\"rv\"><span class=\"n\" aria-hidden=\"true\">07<\/span><div><h3>Waitlist<\/h3><p>When a day is full, clients join a waitlist and get a message as soon as a place opens.<\/p><\/div><\/li><\/ol>\n<\/section>\n<section>\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>How it works<\/p><span class=\"count\">04 steps<\/span><\/div><h2>How the booking system works<\/h2><\/div>\n  <ol class=\"steps\"><li class=\"rv\"><div class=\"top\"><span class=\"n\">01<\/span><\/div><h3>Set up the booking system<\/h3><p>Add services, prices, durations, staff hours, rooms and deposit rules. The booking page then uses these rules to show free times.<\/p><div class=\"wide\"><div class=\"dk scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\" alt=\"Booking system public page: clients choose a service, a therapist and a free time, then pay a deposit to hold it.\"><\/div><\/div><\/li><li class=\"rv\"><div class=\"side\"><div><div class=\"top\"><span class=\"n\">02<\/span><\/div><h3>Clients book and pay<\/h3><p>Clients book from a link on your website, social pages or WhatsApp. They then pay a deposit by card and get a confirmation on WhatsApp right away.<\/p><\/div><div class=\"ph scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-04-mobile-confirmation.webp\" width=\"390\" height=\"844\" loading=\"lazy\" decoding=\"async\" alt=\"Booking system confirmation on the client&#x27;s phone, with the deposit receipt, reminder plan and add-to-calendar.\"><\/div><\/div><\/li><li class=\"rv\"><div class=\"top\"><span class=\"n\">03<\/span><\/div><h3>Reminders run on their own<\/h3><p>The system sends reminders before each visit and reads the replies. Confirmed, rescheduled and canceled visits update the calendar automatically.<\/p><div class=\"wide\"><div class=\"dk scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-03-reminder-settings.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\" alt=\"Reminder settings: the WhatsApp and SMS flow step by step, a message template with live preview, and no-show rules.\"><\/div><\/div><\/li><li class=\"rv\"><div class=\"top\"><span class=\"n\">04<\/span><\/div><h3>Run the day from one screen<\/h3><p>The front desk checks clients in, takes the rest of the payment and marks no-shows. Owners also see bookings, payments and no-shows by day, staff member or service.<\/p><div class=\"wide\"><div class=\"dk scan\"><img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\" alt=\"Booking system staff calendar: bookings by service, breaks, a live time line, and the booking panel with deposit, reminders and visit history.\"><\/div><\/div><\/li><\/ol>\n<\/section>\n<section>\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>Built with<\/p><\/div><h2>Tools behind the booking system<\/h2><\/div>\n  <ul class=\"chips stackl\"><li>Laravel (PHP)<\/li> <li>React<\/li> <li>Next.js<\/li> <li>PostgreSQL<\/li> <li>Redis (queues and scheduled reminders)<\/li> <li>WhatsApp Business API<\/li> <li>SMS gateway<\/li> <li>Stripe \/ Paymob<\/li> <li>Calendar files (ICS) for Google and Apple calendars<\/li> <li>AWS \/ DigitalOcean<\/li><\/ul>\n  <a class=\"more\" href=\"\/services\/#systems\">Part of our business systems <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a>\n  <a class=\"more\" href=\"\/how-we-work\/\">See how a project runs <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a>\n<\/section>\n<section>\n  <div class=\"sh\"><div class=\"sh-row\"><p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>Next project<\/p><span class=\"count\">04 \/ 06<\/span><\/div><h2>Fashion online store<\/h2><\/div>\n  <div class=\"tiles\"><a class=\"tile rv\" href=\"\/work\/online-store\/\" data-cat=\"stores\"><div class=\"pic scan\"><span class=\"num\">04 \/ Stores<\/span> <img loading=\"lazy\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-cover.webp\" srcset=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-cover-768x480.webp 768w, https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-cover-1024x640.webp 1024w, https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-cover-1536x960.webp 1536w, https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-online-store-r3-cover.webp 1600w\" sizes=\"auto, 100vw\" width=\"1600\" height=\"1000\" loading=\"lazy\" decoding=\"async\" alt=\"Fashion online store home page and mobile checkout screen\"><\/div> <div class=\"meta\"><div><h3 class=\"label\">Fashion online store<\/h3> <p class=\"tt\">A modern fashion store, with one admin to ship orders.<\/p><\/div> <span class=\"go\"><svg aria-hidden=\"true\"><use href=\"#qcm-up\"\/><\/svg><\/span><\/div><\/a><\/div>\n  <a class=\"more\" href=\"\/work\/\">All projects <svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a>\n<\/section>\n<section class=\"cta\">\n  <p class=\"label\"><span aria-hidden=\"true\">\/\/ <\/span>Contact<\/p>\n  <h2>Want one like this?<\/h2>\n  <p class=\"sub\">Tell us how your business works. Then we&#x27;ll suggest what fits, even if that&#x27;s a ready-made tool. No tech words needed.<\/p>\n  <p class=\"label dim needs-q\">What do you need?<\/p>\n  <ul class=\"needs\" aria-label=\"What do you need?\"><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20a%20website.\" target=\"_blank\" rel=\"noopener\">Website<\/a><\/li><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20an%20online%20store.\" target=\"_blank\" rel=\"noopener\">Online store<\/a><\/li><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20a%20mobile%20app.\" target=\"_blank\" rel=\"noopener\">App<\/a><\/li><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20a%20business%20system.\" target=\"_blank\" rel=\"noopener\">Business system<\/a><\/li><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20an%20AI%20assistant.\" target=\"_blank\" rel=\"noopener\">AI<\/a><\/li><li><a href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20help%20deciding.\" target=\"_blank\" rel=\"noopener\">Not sure yet<\/a><\/li><\/ul>\n  <a class=\"wa\" href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20a%20business%20system.\" target=\"_blank\" rel=\"noopener\">\n    <span class=\"ic\"><svg aria-hidden=\"true\"><use href=\"#qcm-wa\"\/><\/svg><\/span>\n    <span><b>Chat on WhatsApp<\/b> <span>+966 50 760 0156<\/span><\/span>\n    <svg class=\"arr\" aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg>\n  <\/a>\n  <a class=\"alt\" href=\"mailto:info@qcoders.com\"><span><span class=\"label dim\">\/\/ Email<\/span><br><b>info@qcoders.com<\/b><\/span><svg aria-hidden=\"true\"><use href=\"#qcm-arr\"\/><\/svg><\/a>\n  <div class=\"langs\"><span>English<\/span> <span lang=\"ar\" dir=\"rtl\">\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/span> <span lang=\"tr\">T\u00fcrk\u00e7e<\/span><\/div>\n<\/section>\n<\/div>\n<script>(function(){document.querySelectorAll('.qcm:not([data-qcm])').forEach(function(r){r.setAttribute('data-qcm','1');r.classList.add('js');\nvar els=r.querySelectorAll('.rv,.scan');\nif(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('in')});}else{\nvar io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){var t=e.target;t.classList.add('in');io.unobserve(t);if(t.classList.contains('scan'))setTimeout(function(){t.classList.add('done')},1400);}})},{rootMargin:'0px 0px -10% 0px',threshold:0.12});\nels.forEach(function(e){io.observe(e)});}\nvar f=r.querySelector('.flt');if(f){var bs=f.querySelectorAll('button'),ts=r.querySelectorAll('.tiles .tile'),c=r.querySelector('[data-count]');\nbs.forEach(function(b){b.addEventListener('click',function(){var k=b.getAttribute('data-f'),n=0;bs.forEach(function(x){x.setAttribute('aria-pressed',x===b?'true':'false')});\nts.forEach(function(t){var on=k==='all'||t.getAttribute('data-cat')===k;t.hidden=!on;if(on){n++;t.classList.add('in');t.querySelectorAll('.scan').forEach(function(s){s.classList.add('in','done')});}});\nif(c)c.textContent=(n<10?'0':'')+n+(n===1?' project':' projects');});});}\n});})();<\/script><script>(function(){if(window.__qcmHash)return;window.__qcmHash=1;function go(){var h=decodeURIComponent(location.hash.slice(1));if(!h)return;\nvar t=document.getElementById(h);if(t&&t.getClientRects().length)return;var m=document.getElementById('m-'+h);if(!m||!m.getClientRects().length)return;\nif(m.tagName==='DETAILS')m.open=true;m.scrollIntoView();}window.addEventListener('hashchange',go);\nif(document.readyState==='complete')go();else window.addEventListener('load',go);})();<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-485093e e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"485093e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e72b013 elementor-widget elementor-widget-html\" data-id=\"7e72b013\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n\/* Body text on the CRM blue: Paper on #2F54E0 is 5.6:1, the lowest of the product fields, so running text\n   there is set at 400 instead of the 300 that v2.css gives light text on dark grounds. (Page-scoped\n   copy of a fix that belongs in v2.css section 2, on .qc2--f-crm.) *\/\n.qc2.qc2--f-crm, .qc2 .qc2--f-crm { --qc2-w-body: 400; }\n\/* 01 Screen on stage, as the case opener (.qc2-stage--open). The h1 (with its code label, the two in\n   .qc2-stage__head) and the tagline take the first row at opposite ends (margin and the 50% line); the\n   facts sit under the h1, the product's screens stand on the section's foot beside them. On a phone the\n   screens come straight after the tagline. *\/\n.qc2.qc2-stage--open { padding-top: var(--qc2-s9); }\n.qc2.qc2-stage--open .qc2-stage__lead { max-width: 30ch; }\n.qc2.qc2-stage--open .qc2-stage__text > * + * { margin-top: var(--qc2-s5); }\n.qc2.qc2-stage--open .qc2-facts dt { font-weight: 500; }\n@container qc2 (max-width: 63.99rem) {\n  .qc2.qc2-stage--open .qc2-stage__lead { margin-top: var(--qc2-s5); padding-bottom: var(--qc2-s7); }\n  .qc2.qc2-stage--open .qc2-stage__text { padding-bottom: var(--qc2-sec); }\n}\n@container qc2 (min-width: 64rem) {\n  .qc2.qc2-stage--open .qc2-grid { row-gap: var(--qc2-s7); }\n  .qc2.qc2-stage--open .qc2-stage__head { grid-column: 1 \/ span 6; grid-row: 1; align-self: end; }\n  .qc2.qc2-stage--open .qc2-stage__lead { grid-column: 7 \/ -1; grid-row: 1; align-self: end; }\n  .qc2.qc2-stage--open .qc2-stage__text { grid-row: 2; padding-bottom: var(--qc2-s8); }\n  .qc2.qc2-stage--open :is(.qc2-stage__screen, .qc2-stage__phone) { grid-row: 2; }\n  .qc2.qc2-stage--open .qc2-stage__phone { max-width: 13.5rem; margin-left: var(--qc2-s6); }\n}\n<\/style>\n\n<div class=\"qc2 qc2--f-book qc2-stage qc2-stage--open\">\n  <div class=\"qc2-wrap qc2-grid\">\n    <div class=\"qc2-head qc2-stage__head\">\n      <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Systems<\/p>\n      <div class=\"qc2-display\" role=\"heading\" aria-level=\"1\">Booking for clinics<\/div>\n    <\/div>\n    <p class=\"qc2-lead qc2-stage__lead\">A booking system for clinics and salons, including online booking, a staff calendar and reminders.<\/p>\n    <figure class=\"qc2-pic qc2-screen qc2-stage__screen\">\n      <img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp\" width=\"1440\" height=\"900\" fetchpriority=\"high\" alt=\"Booking system staff calendar: bookings by service, breaks, a live time line, and the booking panel with deposit, reminders and visit history.\">\n    <\/figure>\n    <figure class=\"qc2-pic qc2-phone qc2-stage__phone\">\n      <img decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-05-mobile-upcoming-visit.webp\" width=\"390\" height=\"844\" alt=\"Upcoming visit: time, staff, directions and what to prepare, with one-tap reschedule or cancel.\">\n    <\/figure>\n    <div class=\"qc2-stage__text\">\n      <p>A booking system for clinics, salons and studios that takes bookings online, collects a deposit and sends reminders automatically. Staff also see the whole week on one calendar, with each client&#x27;s history, payments and no-shows next to every booking.<\/p>\n      <dl class=\"qc2-facts\">\n        <div><dt>Made for<\/dt><dd>Clinics, salons and studios that work by appointment.<\/dd><\/div>\n        <div><dt>Used by<\/dt><dd>Clients who book online, the front desk and the owner.<\/dd><\/div>\n        <div><dt>Runs on<\/dt><dd>The web for the booking page and the calendar, WhatsApp and SMS for reminders.<\/dd><\/div>\n      <\/dl>\n    <\/div>\n  <\/div>\n<\/div>\n<style data-qc2-guard>\n\/* make_v2.py: the margin rules above, one id stronger than Elementor's figure reset (kit-v2.css 2) *\/\n.qc2.qc2-stage--open .qc2-stage__text > * + *:not(#qc2-guard) { margin-top: var(--qc2-s5); }\n@container qc2 (max-width: 63.99rem) { .qc2.qc2-stage--open .qc2-stage__lead:not(#qc2-guard) { margin-top: var(--qc2-s5); } }\n@container qc2 (min-width: 64rem) { .qc2.qc2-stage--open .qc2-stage__phone:not(#qc2-guard) { margin-left: var(--qc2-s6); } }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-73d73ca7 e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"73d73ca7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6366968c elementor-widget elementor-widget-html\" data-id=\"6366968c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>@media(max-width:1024px){.qcui-d{display:none!important}}@media(min-width:1025px){.qcui-t{display:none!important}}<\/style>\n<div class=\"qc2 qc2--paper qc2-two qc2-two--flip\">\n  <div class=\"qc2-two__split\">\n    <div class=\"qc2-two__a qc2-stack\">\n      <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>The challenge<\/p>\n      <h2 class=\"qc2-h\">Why clinics need a booking system<\/h2>\n      <p class=\"qc2-lead\">Many service businesses still take bookings by phone, WhatsApp and a paper diary.<\/p>\n      <p>The front desk spends hours confirming times, and when a client does not come, the empty slot is lost. Staff hours, client notes and payments also live in different places. As a result, it is hard to see who is coming, who has paid and who often misses visits.<\/p>\n    <\/div>\n    <div class=\"qc2-two__b\">\n      <figure class=\"qc2-pic qc2-cut\" style=\"--qc2-focus: 55% 35%; --qc2-focus-m: 58% 35%\">\n      \n      <img loading=\"lazy\" decoding=\"async\" class=\"qcui-t\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-clinic-two-staff-tablet-r210.webp\" width=\"2400\" height=\"1143\" loading=\"lazy\" alt=\"WhatsApp reminder settings of the booking system on a tablet and the client's upcoming visit on a phone\"><img loading=\"lazy\" decoding=\"async\" class=\"qcui-d\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-clinic-two-staff-tablet-r80.webp\" width=\"1300\" height=\"1625\" loading=\"lazy\" alt=\"WhatsApp reminder settings of the booking system on a tablet and the client's upcoming visit on a phone\">\n      <\/figure>\n    <\/div>\n  <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-12ac379d e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"12ac379d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5921f865 elementor-widget elementor-widget-html\" data-id=\"5921f865\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n\/* 03 Spec sheet for a product's features: eight rows, so a tighter rhythm than the default 96px; five\n   rows carry a tight crop of the screen they describe; the last row lists the stack in two columns.\n   The paragraphs are the content here, so they are set in full Ink, not the muted grey of v2.css. *\/\n.qc2 .qc2-pic.qc2-zoom { background: var(--qc2-paper); }\n.qc2.qc2-case-rows .qc2-rows__row p { color: var(--qc2-fg); }\n.qc2 .qc2-pic.qc2-zoom > img {\n  position: absolute; left: var(--zx); top: var(--zy); width: var(--zw); max-width: none; height: auto; object-fit: fill;\n}\n.qc2.qc2-case-rows .qc2-built-with { columns: 2 14rem; column-gap: var(--qc2-gutter); }\n.qc2.qc2-case-rows .qc2-built-with li { break-inside: avoid; padding-block: 0.2em; }\n@container qc2 (min-width: 64rem) {\n  .qc2.qc2-case-rows .qc2-rows__list { gap: var(--qc2-s8); }\n  .qc2.qc2-case-rows .qc2-rows__row:has(> .qc2-rows__crop) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }\n}\n<\/style>\n<div class=\"qc2 qc2--stone qc2-rows qc2-rows--hold qc2-case-rows qc2-sec\">\n  <div class=\"qc2-wrap qc2-grid\">\n    <div class=\"qc2-rows__head qc2-stack\">\n      <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Features<\/p>\n      <h2 class=\"qc2-h\">What&#x27;s in the booking system<\/h2>\n      <p>Seven parts that run the front desk, from the first booking to the waitlist.<\/p>\n    <\/div>\n    <ul class=\"qc2-rows__list\">\n      <li class=\"qc2-rows__row\">\n        <h3 class=\"qc2-title\">Online booking system<\/h3>\n        <p>Clients pick a service, a staff member and a free time, then pay a deposit to hold it. The page shows only times that really work, based on staff hours, breaks and rooms.<\/p>\n        <figure class=\"qc2-rows__crop qc2-cut\">\n          <div class=\"qc2-pic qc2-zoom\" style=\"aspect-ratio: 486 \/ 590; --zw: 296.296%; --zx: -97.119%; --zy: -33.220%\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"The booking page: the client picks a therapist, a day in November and a free time, 15:00 on Thursday 12 November\"><\/div>\n        <\/figure>\n      <\/li>\n      <li class=\"qc2-rows__row\">\n        <h3 class=\"qc2-title\">Staff week calendar<\/h3>\n        <p>The whole team on one screen: bookings colored by service, breaks, closed hours and a live time line. The front desk also checks clients in, moves bookings and sees who still owes a deposit.<\/p>\n        <figure class=\"qc2-rows__crop qc2-cut\">\n          <div class=\"qc2-pic qc2-zoom\" style=\"aspect-ratio: 426 \/ 470; --zw: 338.028%; --zx: -94.836%; --zy: -28.936%\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Three days of the staff calendar: bookings colored by service, a lunch break, a no-show and the live time line\"><\/div>\n        <\/figure>\n      <\/li>\n      <li class=\"qc2-rows__row\">\n        <h3 class=\"qc2-title\">WhatsApp and SMS reminders<\/h3>\n        <p>Confirmation, 24-hour and 2-hour messages go out on their own, followed by aftercare tips after the visit. When clients confirm, reschedule or cancel with one tap, their reply updates the booking. If a WhatsApp message is not read, an SMS goes out instead.<\/p>\n        <figure class=\"qc2-rows__crop qc2-cut\">\n          <div class=\"qc2-pic qc2-zoom\" style=\"aspect-ratio: 370 \/ 412; --zw: 389.189%; --zx: -281.622%; --zy: -56.311%\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-03-reminder-settings.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"The 24-hour reminder as the client sees it on WhatsApp, with Confirm, Reschedule and Cancel buttons and the client&#x27;s reply\"><\/div>\n        <\/figure>\n      <\/li>\n      <li class=\"qc2-rows__row\">\n        <h3 class=\"qc2-title\">Deposits and online payment<\/h3>\n        <p>Clients pay a deposit by card when they book and pay the rest at the visit. Your cancellation rules decide when a deposit is kept.<\/p>\n      <\/li>\n      <li class=\"qc2-rows__row\">\n        <h3 class=\"qc2-title\">Client records<\/h3>\n        <p>Each client&#x27;s visits, notes, payments and messages in one place, so any staff member knows the full story before the visit starts.<\/p>\n      <\/li>\n      <li class=\"qc2-rows__row\">\n        <h3 class=\"qc2-title\">No-show tracking<\/h3>\n        <p>A visit is marked as a no-show if the client is not checked in on time. After repeated no-shows, the system can ask for full payment on the next online booking.<\/p>\n      <\/li>\n      <li class=\"qc2-rows__row\">\n        <h3 class=\"qc2-title\">Waitlist<\/h3>\n        <p>When a day is full, clients join a waitlist and get a message as soon as a place opens.<\/p>\n      <\/li>\n      <li class=\"qc2-rows__row\">\n        <h3 class=\"qc2-title\">Tools behind the booking system<\/h3>\n        <ul class=\"qc2-built-with\">\n          <li>Laravel (PHP)<\/li>\n          <li>React<\/li>\n          <li>Next.js<\/li>\n          <li>PostgreSQL<\/li>\n          <li>Redis (queues and scheduled reminders)<\/li>\n          <li>WhatsApp Business API<\/li>\n          <li>SMS gateway<\/li>\n          <li>Stripe \/ Paymob<\/li>\n          <li>Calendar files (ICS) for Google and Apple calendars<\/li>\n          <li>AWS \/ DigitalOcean<\/li>\n        <\/ul>\n        <div class=\"qc2-actions\"><a class=\"qc2-link\" href=\"\/services\/#systems\">Part of our business systems<\/a> <a class=\"qc2-link\" href=\"\/how-we-work\/\">See how a project runs<\/a><\/div>\n      <\/li>\n    <\/ul>\n  <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6429fff8 e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"6429fff8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c949166 elementor-widget elementor-widget-html\" data-id=\"2c949166\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n\/* 04 Process rail of a case, on Paper: the screens gallery. The held side carries the heading and a plate\n   of the product's own colour, bleeding off the left edge, on which each step's screen stands whole:\n   desktop screens across the plate (a long one is cropped from its top-left), phone screens and tall\n   crops at the plate's height. Each step carries the screen's caption from case.json. On a phone every\n   step shows its screen on its own plate, edge to edge, the caption on the plate under it. *\/\n.qc2.qc2-case-rail .qc2-rail__cap { margin-top: var(--qc2-s4); max-width: 46ch; }\n@container qc2 (max-width: 63.99rem) {\n  .qc2.qc2-case-rail .qc2-rail__cap { display: none; }\n  .qc2.qc2-case-rail .qc2-rail__step > .qc2-rail__inline {\n    display: grid; justify-items: center; gap: var(--qc2-s4);\n    margin: 0 calc(-1 * var(--qc2-margin)) var(--qc2-s6); padding: var(--qc2-s6) var(--qc2-margin) var(--qc2-s5);\n  }\n  .qc2.qc2-case-rail .qc2-rail__inline > .qc2-pic { width: 100%; }\n  .qc2.qc2-case-rail .qc2-rail__inline > :is(.qc2-phone, .qc2-tall) { width: min(64%, 18rem); }\n  .qc2.qc2-case-rail .qc2-rail__inline > .qc2-cap { justify-self: start; margin: 0; color: var(--qc2-fg); }\n}\n@container qc2 (min-width: 64rem) {\n  .qc2.qc2-case-rail .qc2-rail__steps { padding-block: 12svh 20svh; }\n  .qc2.qc2-case-rail .qc2-rail__step { min-height: 42svh; }\n  .qc2.qc2-case-rail .qc2-rail__frame { flex: 1 1 auto; aspect-ratio: auto; min-height: 22rem; }\n  .qc2.qc2-case-rail .qc2-rail__frame > .qc2-screen {\n    inset: 50% var(--qc2-s7) auto 0; height: auto; max-height: calc(100% - 2 * var(--qc2-s7));\n    aspect-ratio: 16 \/ 10; translate: 0 -50%;\n  }\n  .qc2.qc2-case-rail .qc2-rail__frame > :is(.qc2-phone, .qc2-tall) {\n    inset: var(--qc2-s7) auto auto 50%; width: auto; height: calc(100% - 2 * var(--qc2-s7)); translate: -50% 0;\n  }\n  .qc2.qc2-case-rail .qc2-rail__frame > .qc2-phone { aspect-ratio: 390 \/ 844; }\n}\n@container qc2 (min-width: 90rem) {   \/* wide screens: a seven-column plate, the steps on the last four *\/\n  .qc2.qc2-case-rail .qc2-rail__hold { grid-column: 1 \/ span 7; }\n  .qc2.qc2-case-rail .qc2-rail__steps { grid-column: 9 \/ -1; }\n}\n<\/style>\n<div class=\"qc2 qc2--paper qc2-rail qc2-rail--screens qc2-case-rail qc2-sec\">\n  <div class=\"qc2-wrap qc2-grid\">\n    <div class=\"qc2-rail__hold\">\n      <div class=\"qc2-head\">\n        <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>How it works<\/p>\n        <h2 class=\"qc2-h\">How the booking system works<\/h2>\n      <\/div>\n      <div class=\"qc2-rail__frame qc2--f-book\">\n        <figure class=\"qc2-pic qc2-screen is-on\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Booking system public page: clients choose a service, a therapist and a free time, then pay a deposit to hold it.\"><\/figure>\n        <figure class=\"qc2-pic qc2-phone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-04-mobile-confirmation.webp\" width=\"390\" height=\"844\" loading=\"lazy\" alt=\"Booking system confirmation on the client&#x27;s phone, with the deposit receipt, reminder plan and add-to-calendar.\"><\/figure>\n        <figure class=\"qc2-pic qc2-screen\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-03-reminder-settings.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Reminder settings: the WhatsApp and SMS flow step by step, a message template with live preview, and no-show rules.\"><\/figure>\n        <figure class=\"qc2-pic qc2-screen\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Booking system staff calendar: bookings by service, breaks, a live time line, and the booking panel with deposit, reminders and visit history.\"><\/figure>\n      <\/div>\n    <\/div>\n    <ol class=\"qc2-rail__steps\">\n      <li class=\"qc2-rail__step\">\n        <figure class=\"qc2-rail__inline qc2--f-book\">\n          <div class=\"qc2-pic qc2-screen\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-02-booking-page.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Booking system public page: clients choose a service, a therapist and a free time, then pay a deposit to hold it.\"><\/div>\n          <figcaption class=\"qc2-cap\">Booking system public page: clients choose a service, a therapist and a free time, then pay a deposit to hold it.<\/figcaption>\n        <\/figure>\n        <h3 class=\"qc2-title\">Set up the booking system<\/h3>\n        <p>Add services, prices, durations, staff hours, rooms and deposit rules. The booking page then uses these rules to show free times.<\/p>\n        <p class=\"qc2-small qc2-muted qc2-rail__cap\">Booking system public page: clients choose a service, a therapist and a free time, then pay a deposit to hold it.<\/p>\n      <\/li>\n      <li class=\"qc2-rail__step\">\n        <figure class=\"qc2-rail__inline qc2--f-book\">\n          <div class=\"qc2-pic qc2-phone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-04-mobile-confirmation.webp\" width=\"390\" height=\"844\" loading=\"lazy\" alt=\"Booking system confirmation on the client&#x27;s phone, with the deposit receipt, reminder plan and add-to-calendar.\"><\/div>\n          <figcaption class=\"qc2-cap\">Booking system confirmation on the client&#x27;s phone, with the deposit receipt, reminder plan and add-to-calendar.<\/figcaption>\n        <\/figure>\n        <h3 class=\"qc2-title\">Clients book and pay<\/h3>\n        <p>Clients book from a link on your website, social pages or WhatsApp. They then pay a deposit by card and get a confirmation on WhatsApp right away.<\/p>\n        <p class=\"qc2-small qc2-muted qc2-rail__cap\">Booking system confirmation on the client&#x27;s phone, with the deposit receipt, reminder plan and add-to-calendar.<\/p>\n      <\/li>\n      <li class=\"qc2-rail__step\">\n        <figure class=\"qc2-rail__inline qc2--f-book\">\n          <div class=\"qc2-pic qc2-screen\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-03-reminder-settings.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Reminder settings: the WhatsApp and SMS flow step by step, a message template with live preview, and no-show rules.\"><\/div>\n          <figcaption class=\"qc2-cap\">Reminder settings: the WhatsApp and SMS flow step by step, a message template with live preview, and no-show rules.<\/figcaption>\n        <\/figure>\n        <h3 class=\"qc2-title\">Reminders run on their own<\/h3>\n        <p>The system sends reminders before each visit and reads the replies. Confirmed, rescheduled and canceled visits update the calendar automatically.<\/p>\n        <p class=\"qc2-small qc2-muted qc2-rail__cap\">Reminder settings: the WhatsApp and SMS flow step by step, a message template with live preview, and no-show rules.<\/p>\n      <\/li>\n      <li class=\"qc2-rail__step\">\n        <figure class=\"qc2-rail__inline qc2--f-book\">\n          <div class=\"qc2-pic qc2-screen\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp\" width=\"1440\" height=\"900\" loading=\"lazy\" alt=\"Booking system staff calendar: bookings by service, breaks, a live time line, and the booking panel with deposit, reminders and visit history.\"><\/div>\n          <figcaption class=\"qc2-cap\">Booking system staff calendar: bookings by service, breaks, a live time line, and the booking panel with deposit, reminders and visit history.<\/figcaption>\n        <\/figure>\n        <h3 class=\"qc2-title\">Run the day from one screen<\/h3>\n        <p>The front desk checks clients in, takes the rest of the payment and marks no-shows. Owners also see bookings, payments and no-shows by day, staff member or service.<\/p>\n        <p class=\"qc2-small qc2-muted qc2-rail__cap\">Booking system staff calendar: bookings by service, breaks, a live time line, and the booking panel with deposit, reminders and visit history.<\/p>\n      <\/li>\n    <\/ol>\n  <\/div>\n<\/div>\n<style data-qc2-guard>\n\/* make_v2.py: the margin rules above, one id stronger than Elementor's figure reset (kit-v2.css 2) *\/\n.qc2.qc2-case-rail .qc2-rail__cap:not(#qc2-guard) { margin-top: var(--qc2-s4); }\n@container qc2 (max-width: 63.99rem) { .qc2.qc2-case-rail .qc2-rail__step > .qc2-rail__inline:not(#qc2-guard) { margin: 0 calc(-1 * var(--qc2-margin)) var(--qc2-s6); } }\n@container qc2 (max-width: 63.99rem) { .qc2.qc2-case-rail .qc2-rail__inline > .qc2-cap:not(#qc2-guard) { margin: 0; } }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2a23739b e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"2a23739b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-466007d8 elementor-widget elementor-widget-html\" data-id=\"466007d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n\/* 05 Full-bleed band as the link to the next project: the whole band is one link. *\/\n.qc2.qc2-band.qc2-band--next { --qc2-focus: var(--qc2-volt); }\n.qc2.qc2-band--next .qc2-band__link { display: block; color: inherit; text-decoration: none; }\n.qc2.qc2-band--next .qc2-band__link:focus-visible { outline-offset: -6px; }\n.qc2.qc2-band--next .qc2-band__go {\n  display: inline-block; color: var(--qc2-volt);\n  text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em;\n  transition: text-decoration-thickness var(--qc2-t-hover) ease;\n}\n@media (hover: hover) and (pointer: fine) {\n  .qc2.qc2-band--next .qc2-band__link:hover .qc2-band__go { text-decoration-thickness: 0.14em; }\n}\n<\/style>\n<div class=\"qc2 qc2-band qc2-band--next\">\n  <a class=\"qc2-band__link\" href=\"\/work\/online-store\/\">\n    <figure class=\"qc2-pic qc2-band__pic qc2-cut\" style=\"--qc2-focus: 60% 40%; --qc2-focus-m: 62% 35%\">\n      \n      <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-menswear-seller-product-photo-r155.webp\" width=\"2400\" height=\"1548\" loading=\"lazy\" alt=\"The online store's orders screen on a laptop and the payment step of checkout on a phone\">\n    <\/figure>\n    <div class=\"qc2-band__plate\">\n      <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Next project<\/p>\n      <h2 class=\"qc2-h\">Fashion online store<\/h2>\n      <p>A fashion ecommerce website with a short checkout, as well as one admin to ship orders.<\/p>\n      <span class=\"qc2-band__go\">See the next project<\/span>\n    <\/div>\n  <\/a>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2ec0915 e-con-full elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"2ec0915\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34b67f14 elementor-widget elementor-widget-html\" data-id=\"34b67f14\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<div class=\"qc2 qc2--ink qc2-line\">\n  <div class=\"qc2-wrap qc2-grid\">\n    <div class=\"qc2-line__text qc2-stack\">\n      <p class=\"qc2-label\"><span aria-hidden=\"true\">\/\/ <\/span>Contact<\/p>\n      <h2 class=\"qc2-h\">Want one like this?<\/h2>\n      <p class=\"qc2-lead qc2-muted\">Pick what you need, then we'll write the first message for you. No tech words needed.<\/p>\n      <fieldset class=\"qc2-pick\">\n        <legend>What do you need?<\/legend>\n        <div class=\"qc2-pick__opts\">\n          <label><input type=\"radio\" name=\"need\" value=\"a website\"><span>Website<\/span><\/label>\n          <label><input type=\"radio\" name=\"need\" value=\"an online store\"><span>Online store<\/span><\/label>\n          <label><input type=\"radio\" name=\"need\" value=\"a mobile app\"><span>App<\/span><\/label>\n          <label><input type=\"radio\" name=\"need\" value=\"a business system\" checked><span>Business system<\/span><\/label>\n          <label><input type=\"radio\" name=\"need\" value=\"an AI assistant\"><span>AI<\/span><\/label>\n          <label><input type=\"radio\" name=\"need\" value=\"help deciding\"><span>Not sure yet<\/span><\/label>\n        <\/div>\n      <\/fieldset>\n      <div class=\"qc2-actions\">\n        <a class=\"qc2-btn\" data-qc2-wa href=\"https:\/\/wa.me\/966507600156?text=Hi%20Qcoders%2C%20I%20found%20you%20on%20your%20website.%20I%20need%20a%20business%20system.\">Message us on WhatsApp<\/a>\n        <a class=\"qc2-link\" href=\"mailto:info@qcoders.com\">info@qcoders.com<\/a>\n      <\/div>\n    <\/div>\n    <figure class=\"qc2-pic qc2-line__pic qc2-cut\">\n      \n      <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-ui-phone-held-close.webp\" width=\"1000\" height=\"1250\" loading=\"lazy\" alt=\"A phone showing a WhatsApp message to Qcoders\">\n      <div class=\"qc2-line__screen\" data-ui aria-hidden=\"true\">\n        <div class=\"qc2-line__bar\">\n          <svg viewBox=\"7 16 115 97\"><g fill=\"none\" stroke-width=\"12\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M51 28 L19 60 L51 92\" stroke=\"#0A0E17\"\/><path d=\"M69 28 L101 60 L69 92\" stroke=\"#0A0E17\"\/><path d=\"M97 88 L110 101\" stroke=\"#6E9400\"\/><\/g><\/svg>\n          Qcoders\n        <\/div>\n        <div class=\"qc2-line__msgs\">\n          <p class=\"qc2-line__bubble\" data-qc2-wa-text>Hi Qcoders, I found you on your website. I need a business system.<\/p>\n        <\/div>\n        <div class=\"qc2-line__compose\">Message<\/div>\n      <\/div>\n    <\/figure>\n  <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Booking for clinics A booking system for clinics and salons, including online booking, a staff calendar and reminders. A booking system for clinics, salons and studios that takes bookings online, collects a deposit and sends reminders automatically. Staff also see the whole week on one calendar, with each client&#x27;s history, payments and no-shows next to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":144,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-147","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Booking system for clinics and salons | Qcoders<\/title>\n<meta name=\"description\" content=\"A booking system for clinics, salons and studios: online booking with deposits, one staff calendar, and WhatsApp and SMS reminders.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/qcoders.com\/ar\/work\/booking-system\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Booking system for clinics and salons | Qcoders\" \/>\n<meta property=\"og:description\" content=\"A booking system for clinics, salons and studios: online booking with deposits, one staff calendar, and WhatsApp and SMS reminders.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/qcoders.com\/ar\/work\/booking-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Qcoders\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-02T07:00:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"12 \u062f\u0642\u064a\u0642\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/work\\\/booking-system\\\/\",\"url\":\"https:\\\/\\\/qcoders.com\\\/work\\\/booking-system\\\/\",\"name\":\"Booking system for clinics and salons | Qcoders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/work\\\/booking-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/work\\\/booking-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/qcoders.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/qc-work-booking-system-01-staff-calendar.webp\",\"datePublished\":\"2026-10-25T16:05:26+00:00\",\"dateModified\":\"2026-11-02T07:00:49+00:00\",\"description\":\"A booking system for clinics, salons and studios: online booking with deposits, one staff calendar, and WhatsApp and SMS reminders.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/work\\\/booking-system\\\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/qcoders.com\\\/work\\\/booking-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/work\\\/booking-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/qcoders.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/qc-work-booking-system-01-staff-calendar.webp\",\"contentUrl\":\"https:\\\/\\\/qcoders.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/qc-work-booking-system-01-staff-calendar.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/work\\\/booking-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/qcoders.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Work\",\"item\":\"https:\\\/\\\/qcoders.com\\\/work\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Booking System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/#website\",\"url\":\"https:\\\/\\\/qcoders.com\\\/\",\"name\":\"Qcoders\",\"description\":\"Code that runs your business.\",\"publisher\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/qcoders.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/#organization\",\"name\":\"Qcoders\",\"url\":\"https:\\\/\\\/qcoders.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/qcoders.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/qcoders.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/qcoders-logo-qcoders-2026.png\",\"contentUrl\":\"https:\\\/\\\/qcoders.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/qcoders-logo-qcoders-2026.png\",\"width\":2000,\"height\":398,\"caption\":\"Qcoders\"},\"image\":{\"@id\":\"https:\\\/\\\/qcoders.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Booking system for clinics and salons | Qcoders","description":"A booking system for clinics, salons and studios: online booking with deposits, one staff calendar, and WhatsApp and SMS reminders.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/qcoders.com\/ar\/work\/booking-system\/","og_locale":"ar_AR","og_type":"article","og_title":"Booking system for clinics and salons | Qcoders","og_description":"A booking system for clinics, salons and studios: online booking with deposits, one staff calendar, and WhatsApp and SMS reminders.","og_url":"https:\/\/qcoders.com\/ar\/work\/booking-system\/","og_site_name":"Qcoders","article_modified_time":"2026-11-02T07:00:49+00:00","og_image":[{"url":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"12 \u062f\u0642\u064a\u0642\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/qcoders.com\/work\/booking-system\/","url":"https:\/\/qcoders.com\/work\/booking-system\/","name":"Booking system for clinics and salons | Qcoders","isPartOf":{"@id":"https:\/\/qcoders.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/qcoders.com\/work\/booking-system\/#primaryimage"},"image":{"@id":"https:\/\/qcoders.com\/work\/booking-system\/#primaryimage"},"thumbnailUrl":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp","datePublished":"2026-10-25T16:05:26+00:00","dateModified":"2026-11-02T07:00:49+00:00","description":"A booking system for clinics, salons and studios: online booking with deposits, one staff calendar, and WhatsApp and SMS reminders.","breadcrumb":{"@id":"https:\/\/qcoders.com\/work\/booking-system\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/qcoders.com\/work\/booking-system\/"]}]},{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/qcoders.com\/work\/booking-system\/#primaryimage","url":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp","contentUrl":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qc-work-booking-system-01-staff-calendar.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/qcoders.com\/work\/booking-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/qcoders.com\/"},{"@type":"ListItem","position":2,"name":"Work","item":"https:\/\/qcoders.com\/work\/"},{"@type":"ListItem","position":3,"name":"Booking System"}]},{"@type":"WebSite","@id":"https:\/\/qcoders.com\/#website","url":"https:\/\/qcoders.com\/","name":"Qcoders","description":"\u0628\u0631\u0645\u062c\u064a\u0627\u062a \u062a\u0634\u063a\u0651\u0644 \u0623\u0639\u0645\u0627\u0644\u0643.","publisher":{"@id":"https:\/\/qcoders.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/qcoders.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/qcoders.com\/#organization","name":"Qcoders","url":"https:\/\/qcoders.com\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/qcoders.com\/#\/schema\/logo\/image\/","url":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qcoders-logo-qcoders-2026.png","contentUrl":"https:\/\/qcoders.com\/wp-content\/uploads\/2026\/10\/qcoders-logo-qcoders-2026.png","width":2000,"height":398,"caption":"Qcoders"},"image":{"@id":"https:\/\/qcoders.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/pages\/147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/comments?post=147"}],"version-history":[{"count":22,"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/pages\/147\/revisions"}],"predecessor-version":[{"id":1090,"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/pages\/147\/revisions\/1090"}],"up":[{"embeddable":true,"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/pages\/144"}],"wp:attachment":[{"href":"https:\/\/qcoders.com\/ar\/wp-json\/wp\/v2\/media?parent=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}