Tech support services (B2C/B2B)
Wideview / mysupport.gr
Headless WooCommerce + Next.js με Stripe LIVE, guest quotes & 15 subscriptions
Ένα WC backend, ένα Next.js frontend, 81 services + recurring billing
Challenge
Τι έπρεπε να λυθεί
Το παλιό mysupport είχε WooCommerce site με slow load times σε mobile και confused product taxonomy. Wideview ήθελε σύγχρονο UX, instant quotes χωρίς login wall, recurring billing για συντήρηση, και διαχωρισμό admin από frontend για να μπορεί να αλλάζει tech χωρίς να ρισκάρει ταμείο. Παράλληλα custom support tickets και public REST API για third-party integrations.
Solution
Τι χτίσαμε
Headless architecture: WP για products + orders database (cleaned από 23 περιττά plugins, 71 orphan tables, 2.600+ orphan rows), Next.js 16 για frontend με SSG product pages. Stripe LIVE με 15 recurring products + portal, Supabase για auth + storage (quote-attachments bucket), Turnstile σε όλα τα public forms. Custom mu-plugins για quote management (mysupport-quotes 0.1.0), subscriptions, public API (Bearer token auth, rate limited 100 req/min).
Custom Modules
Τι το κάνει διαφορετικό
Headless WC + Next.js 16 architecture
WP REST API + custom endpoints για quotes/subscriptions/support. Next.js 16 με ISR (revalidate per product). Frontend deploy ανεξάρτητα στο Coolify (uuid cugpxv0xprq2bhfambhzpxex), backend WP σε s1. Cloudflare strict SSL, www → apex 301 redirect.
Guest quote system + 81 services
Custom quote builder χωρίς login: visitor compose-άρει service bundle, system creates persistent quote URL με attachments σε Supabase storage, sales team confirms via admin. 81 published services σε 14 categories, όλα με full SEO content (whats_included, how_it_works, FAQs, highlights, testimonial, CTA), professional Pexels images compressed σε 1200px.
15 recurring subscriptions + Stripe LIVE
Custom subscription system σε mu-plugin `mysupport-subscriptions.php`, δικά μας DB tables `wp_msq_subscriptions` + `wp_msq_subscription_invoices`. 15 Stripe Products με recurring prices LIVE (acct_1Qqy4mEmsxC6fMaw). Webhook στο `we_1TLr8lEmsxC6fMaw6yec6E79` με 10 events (checkout.session.completed, payment_intent.payment_failed, charge.refunded, invoice events). Customer portal σε /account/subscriptions/.
Custom support tickets + public REST API
DB: `wp_msq_support_tickets` + `wp_msq_support_messages`. CRUD + reply + close. Public REST API namespace `/mysupport/v1/api/`, Bearer token auth μέσω `wp_msq_api_keys`, rate limiting 100 req/min per key, audit log σε `wp_msq_api_log`.
Supabase auth + customer portal
Self-hosted Supabase σε s3 Coolify (db.mysupport.gr, service uuid hby59mg4vq9mvy6yfsx25ids). Email confirmation με branded templates (Mailgun mg.mysupport.gr SMTP). Customer portal: dashboard, quotes, subscriptions, orders, unified payments, support, profile.
Cloudflare Turnstile σε όλα τα public forms
Invisible captcha σε contact, request-quote, subscription start. Script tag approach (η React render API έδινε infinite loop). Server-side token verification στα Next.js API routes.
Schema-rich SEO + GSC verified
Όλες οι 12 τύποι σελίδων με title/description/canonical/OG/Twitter cards. Schemas: Organization, LocalBusiness, Product+Brand+AggregateRating+Offer+BreadcrumbList, CollectionPage, AboutPage, ContactPage, FAQPage, BlogPosting, Review (5), AggregateRating Brand-level 5.0/35. Sitemap 174 URLs, GSC verified siteOwner, 15 URLs μέσω Indexing API. PageSpeed mobile 96-99 Perf, CLS 0.
Live από production
Πώς δείχνει στην πράξη
Screenshots από το ζωντανό site. Τιμές, ονόματα πελατών και ευαίσθητα στοιχεία είναι μασκαρισμένα με skeleton blur ώστε να φαίνεται μόνο το functionality.
Mobile
Hero mobile, Next.js render με trust signals
Desktop
Hero desktop με ψηφιακή υπηρεσιολογία 80+ services
Mobile
Catalog mobile, vertical product cards με image
Desktop
Catalog desktop με category navigation
Desktop
Quote builder χωρίς login wall, attachments via Supabase storage
Mobile
Wideview Support iOS app, companion του mysupport.gr για όλους τους πελάτες
Mobile
Tickets σε chat-style: priority badges, message threads, file attachments, status updates
Mobile
Finance: invoices, contracts, proposals, payments σε ένα view με due dates και status
Tech Stack
Με τι χτίστηκε
Όλο το stack είναι τυποποιημένο. Δεν βασίζεται σε κρυφά παραμετροποιημένα plugins ή proprietary cloud services. Μπορεί να μεταφερθεί ή να συντηρηθεί από οποιαδήποτε ομάδα γνωρίζει το stack.
Όταν έχω ερώτηση για το site μου ή ζητάω αλλαγή, ανοίγω το Wideview Support app, γράφω σαν chat, η ομάδα απαντάει στην ίδια καρτέλα. Όλο το ιστορικό συγκεντρωμένο, χωρίς να ψάχνω σε inbox emails.
Χαρούλα Κληρονόμου · JK Tours, πελάτης DoSmart
FAQ
Συχνές ερωτήσεις
Τι σημαίνει headless e-commerce και γιατί είναι καλύτερο;
Headless σημαίνει ότι το frontend (αυτό που βλέπει ο πελάτης) είναι ξεχωριστή εφαρμογή από το backend (όπου ζουν products, orders, payments). Στο mysupport.gr το frontend είναι Next.js 16 σε s3 Coolify ενώ το backend είναι WordPress σε s1, και επικοινωνούν μέσω REST API. Πλεονέκτημα: αλλάζεις stack frontend (πχ migration σε νεότερη Next.js version) χωρίς να ρισκάρεις το ταμείο, και mobile load times είναι αρκετά πιο γρήγορα γιατί φεύγει όλο το WP overhead από το rendering path.
Στηρίζεται recurring billing και πώς γίνεται με Stripe;
Ναι, υπάρχουν 15 recurring subscription products LIVE σε Stripe (acct_1Qqy4mEmsxC6fMaw). Φτιάξαμε custom subscription system σε mu-plugin mysupport-subscriptions.php με δικά μας DB tables wp_msq_subscriptions και wp_msq_subscription_invoices. Το webhook πιάνει 10 events (checkout.session.completed, payment_intent.payment_failed, charge.refunded, invoice.* events) ώστε ο πελάτης βλέπει σωστή κατάσταση στο portal /account/subscriptions/ ακόμα και μετά από failed payment ή refund.
Μπορεί ο πελάτης να ζητήσει quote χωρίς να κάνει εγγραφή;
Ναι. Ο guest quote builder επιτρέπει σε visitor να συνθέσει service bundle, να προσθέσει attachments (αποθηκεύονται σε Supabase storage bucket quote-attachments) και να λάβει persistent quote URL χωρίς login. Ο sales team το βλέπει στο admin και επιβεβαιώνει. Έτσι αποφεύγεται το login wall που μειώνει conversion rate σε B2B requests.
Πώς προστατεύονται τα forms από spam και bots;
Όλα τα public forms (contact, request-quote, subscription start) τρέχουν Cloudflare Turnstile invisible captcha. Χρησιμοποιήσαμε script tag approach αντί για React render API γιατί το δεύτερο έδινε infinite loop σε client-side hydration. Server-side τα tokens verify-άρονται στα Next.js API routes πριν προχωρήσει το request.
Πόσο γρήγορες είναι οι σελίδες σε mobile;
Lighthouse mobile 96-99 για Performance, SEO 92-100. Κάναμε επίσης database cleanup του παλιού WC site: 71 orphan tables dropped, 2.600+ orphan rows καθαρίστηκαν, 23 περιττά plugins αφαιρέθηκαν (κρατήσαμε 7 active). Το static generation μέσω ISR (revalidate per product) και η αποσύνδεση του frontend από το WP βάζει load times σε επίπεδο που δε φτάνεις με WP-only setup.
Έχει public REST API για third-party integrations;
Ναι. Stήσαμε REST API namespace /mysupport/v1/api/ με Bearer token auth μέσω wp_msq_api_keys, rate limiting 100 requests/min per key, και audit log σε wp_msq_api_log. Έτσι third-party εργαλεία (πχ helpdesk, sales automation, internal scripts) μπορούν να χτυπάνε τα δικά μας endpoints χωρίς να αγγίζουν direct το WP database.