D'outils déconnectés à une clinique intégrée — Privatklinik Kreuzlingen

La Privatklinik Kreuzlingen est une clinique privée de chirurgie plastique, reconstructive et esthétique située Gaissbergstrasse 45, à Kreuzlingen. Lorsque nous avons analysé la situation au printemps 2025, le constat était clair : une clinique compétente, avec un personnel bien formé, qui fonctionnait sur une infrastructure numérique qui n'avait jamais été conçue pour elle.

Cet article documente ce que nous avons trouvé, comment nous l'avons résolu et comment la même configuration peut être reproduite — étape par étape, de manière techniquement complète.

Le point de départ

Ce que nous avons trouvé n'est pas un cas isolé. C'est l'image typique d'une clinique qui a grandi au fil des années avec ce qui était disponible — jamais avec un système pensé pour elle dès le départ.

Site web

Le site tournait sur WIX. Entretenu sporadiquement, à peine optimisé pour les moteurs de recherche, avec des contenus en partie obsolètes et aucune possibilité d'intégration programmatique. Pas d'API, pas de webhook, aucune base technique. La réservation en ligne passait par un widget tiers intégré qui ne communiquait ni avec l'agenda ni avec le logiciel de gestion du cabinet.

Réservation et accueil

Le système de réservation vivait dans son propre monde. Il ne connaissait ni le planning opératoire ni le logiciel de gestion. Résultat : le personnel de l'accueil consacrait une part importante de son temps de travail à reporter manuellement des informations d'un système à l'autre — doubles saisies, relances oubliées, surcharge chronique. L'équipe travaillait dur, mais contre sa propre infrastructure.

Planification opératoire

Le planning opératoire existait dans Excel. Pas de mise à jour en temps réel. Aucun lien avec le stock ou la disponibilité du matériel. Aucune transmission structurée vers l'anesthésie. Chaque modification exigeait une communication manuelle entre plusieurs personnes.

Gestion du cabinet

Un logiciel de gestion propriétaire ancien, sans interface API, sans possibilité d'export et sans feuille de route de mises à jour. Un verrouillage fournisseur classique : les données étaient là, mais inexploitables.

Documentation d'anesthésie

Un PDMS propriétaire qui numérisait le processus papier à l'identique — et s'arrêtait là. Aucun avantage perceptible par rapport au papier, si ce n'est que le papier avait disparu. Aucune intégration avec le planning opératoire, aucun lien avec les données cliniques ou administratives.

Marketing et suivi

Aucun suivi du funnel. Pas de paramètres UTM. Aucune attribution des conversions. Le budget marketing était dépensé sans savoir s'il produisait quoi que ce soit. Quel canal amenait des patients qui se faisaient réellement opérer et payaient ? Personne ne le savait.

Le tableau d'ensemble : une clinique qui tenait grâce à l'effort humain, pas grâce à l'infrastructure technique. Un personnel engagé qui consacrait une part importante de son énergie à combler manuellement les lacunes d'information.

Ce que nous avons construit

Nous avons mis en place Viali comme plateforme unifiée reliant chaque niveau : marketing, prise de rendez-vous, planification opératoire, anesthésie, gestion du stock et reporting de direction. Cet article documente les premières étapes, les plus fondamentales : la nouvelle infrastructure numérique de la clinique.

Étape 1 — Le nouveau site de la clinique

De WIX à Next.js

L'ancien site WIX était un point final, pas une plateforme. Il ne pouvait ni recevoir ni envoyer de données, et chaque mise à jour exigeait une personne à l'aise techniquement, avec un accès au CMS.

Nous avons entièrement reconstruit le site — avec Next.js 15 et la génération de site statique (SSG). Développé sur Replit avec l'aide de l'IA, entièrement optimisé pour le SEO, avec des tests Google Lighthouse automatisés intégrés en permanence à la boucle de développement.

Le résultat : 99 Performance / 100 Accessibility / 100 Best Practices / 100 SEO sur Google Lighthouse — sur le domaine de production.

Configuration technique

La configuration suivante est utilisée à la fois pour le site marketing viali.app et pour la Privatklinik Kreuzlingen. Elle est explicitement optimisée pour les agents IA — structurée et commentée de façon à ce que des agents puissent la lire, l'appliquer et l'étendre sans contexte manuel.

import type { NextConfig } from "next";

const replitDomain = process.env.REPLIT_DEV_DOMAIN ?? "";

const nextConfig: NextConfig = {
  // lucide-react nécessite une transpilation explicite (compatibilité ESM dans Next.js)
  transpilePackages: ["lucide-react"],

  // Domaines proxy de Replit pour CORS en mode développement
  allowedDevOrigins: [
    "*.replit.dev",
    "*.repl.co",
    "*.replit.app",
    "*.picard.replit.dev",
    ...(replitDomain ? [replitDomain] : []),
  ],

  experimental: {
    // Utilise .browserslistrc pour le compilateur SWC → bundles de polyfills plus petits
    browsersListForSwc: true,
  },

  images: {
    // Formats modernes : AVIF et WebP pour une meilleure compression
    formats: ["image/avif", "image/webp"],
  },
};

export default nextConfig;

> 1%
last 2 versions
not dead
not ie 11

# --- DÉVELOPPEMENT (workflow Replit par défaut) ---
# Turbopack : rechargement à chaud en moins de 2 secondes, aucun conflit CSP avec le proxy de Replit.
# Important : "next dev" avec webpack échoue dans l'aperçu de Replit —
# le proxy CSP de Replit bloque eval(), dont le HMR de webpack a impérativement besoin.
# Turbopack contourne entièrement ce problème.
next dev --turbopack --port 5000

# --- AVANT LES TESTS LIGHTHOUSE ---
# Étape 1 : build de production avec webpack (pas --turbopack)
# Turbopack produit des bundles JS ~45 % plus lourds → scores de performance plus bas.
# Toujours utiliser le build webpack pour les tests Lighthouse.
npx next build

# Étape 2 : démarrer le serveur de production
next start --port 5000

# Étape 3 : lancer le test Lighthouse
# Ensuite : rebasculer le workflow sur "next dev --turbopack --port 5000"

Mises à jour du contenu sans compétences de développeur

Un avantage clé de cette architecture : le personnel de la clinique peut mettre à jour les contenus de manière autonome. Il désigne à l'agent IA l'élément à modifier, décrit ce qui doit changer — l'agent effectue la modification, reconstruit la page, et elle est en ligne. Pas de formation CMS, pas de ticket au développeur, pas d'attente.

Étape 2 — Suivi UTM et des sources → intégration de la réservation Viali

Le nouveau site est la première étape. La deuxième est l'attribution complète : pouvoir rattacher chaque réservation à sa source marketing d'origine — et transmettre cette information sans rupture à Viali.

Ce qui est relevé au premier chargement

Au chargement de la page, les données suivantes sont lues et stockées :

• Paramètres UTM : utm_source, utm_medium, utm_campaign, utm_term, utm_content
• Identifiants de clic Google Ads : gclid, gbraid, wbraid
• Meta (Facebook / Instagram) : fbclid, igshid
• LinkedIn : li_fat_id
• TikTok : ttclid
• Microsoft Ads : msclkid
• Détection automatique du référent : en l'absence de paramètres UTM, document.referrer est comparé à une liste connue (Google, Bing, Facebook, Instagram, TikTok, LinkedIn, etc.) et un canal synthétique est attribué — par exemple google/organic ou instagram/social. Les référents externes inconnus reçoivent referral/referral ; l'absence de référent devient direct/none.
• Solution de repli — question manuelle sur la source : si la détection automatique aboutit à direct/none, le parcours de réservation ajoute une étape. Une question structurée demande activement au patient comment il a trouvé la clinique. La réponse — par exemple Réseaux sociaux → Instagram — est transmise à l'objet de suivi comme valeur confirmée manuellement et remplace le placeholder direct/none. Aucun contact patient ne reste sans attribution de source.

Stockage

Toutes les données sont stockées sous forme d'objet JSON dans la clé sessionStorage pkk_tracking. Lors d'une navigation interne (même domaine, sans nouveaux paramètres UTM ni identifiants de clic), les données de session existantes sont réutilisées. Une nouvelle visite externe avec des paramètres UTM ou des identifiants de clic les écrase.

Transmission des données à Viali

Lorsque l'utilisateur ouvre le dialogue de réservation, buildBookingUrl() construit dynamiquement l'URL de l'iframe avec tous les paramètres de suivi collectés. La spécification complète est publiée sur use.viali.app/api.

https://use.viali.app/book/eq0E3SKW7kZl9id5Ce3BszaN
  ?embed=true
  &service=liposuction
  &utm_source=google
  &utm_medium=cpc
  &utm_campaign=body_contouring_spring
  &gclid=abc123xyz

Sélection de la prestation

Préremplissage patient

Suivi UTM

Identifiants de clic publicitaires — enregistrés sur le lead et renvoyés via la Conversions API afin que les plateformes publicitaires puissent associer les conversions aux clics.

Divers

Viali reçoit ces paramètres, attribue la réservation au clic publicitaire d'origine et la rend disponible dans le CRM et le reporting des conversions — de bout en bout, jusqu'à l'intervention réalisée et payée.

Étape 3 — De la réservation au bloc opératoire : le parcours patient

Agenda des rendez-vous

Dès qu'un patient termine sa réservation, le rendez-vous apparaît directement dans l'agenda de Viali — sans saisie manuelle, sans copier-coller, sans appel à l'accueil. La vue journalière affiche tous les praticiens côte à côte, avec le statut du rendez-vous (Confirmé, En attente), le nom du patient et l'intervention visibles d'un coup d'œil. En passant à la vue hebdomadaire ou mensuelle, l'équipe de la clinique obtient immédiatement une vue d'ensemble des capacités.

Confirmation et rappel automatiques

Le patient reçoit une confirmation automatique par SMS et par e-mail immédiatement après sa réservation — sans aucune action de l'équipe de la clinique. 24 heures avant le rendez-vous, un second rappel automatique est envoyé. Les deux messages sont générés et envoyés par Viali. L'accueil n'en gère aucun manuellement.

Questionnaire préopératoire

Lorsque le patient arrive à la clinique, il remplit le questionnaire préopératoire numérique sur son téléphone ou sur une tablette — avant même d'atteindre le guichet. Le formulaire est structuré en plusieurs onglets :

• Données personnelles — nom, date de naissance, taille, poids
• Allergies
• Antécédents médicaux (Erkrankungen)
• Traitements en cours
• Mode de vie — tabac, alcool, activité physique
• Documents — téléversement de dossiers médicaux existants
• Remarques complémentaires

Le questionnaire rempli est enregistré dans Viali et immédiatement accessible à l'équipe d'anesthésie — pas de formulaires papier, pas de ressaisie, aucune perte d'information entre l'accueil et la salle d'opération. Le médecin anesthésiste consulte les allergies, les traitements et les antécédents du patient directement dans le système, exactement là où il en a besoin, avant que le patient n'arrive au bloc.

Du rendez-vous au traitement ou au bloc opératoire

Une fois le questionnaire complété, le rendez-vous suit l'un de deux chemins selon l'intervention.

Traitement direct (p. ex. Botox, fillers, petites interventions) — le praticien ouvre un nouveau dossier de traitement directement sur le patient. Le formulaire enregistre la date et l'heure, les notes de séance et les lignes de traitement — chaque ligne décrivant un produit ou un acte appliqué. Une fois documenté, le dossier est signé et verrouillé dans le système.

Intervention planifiée — si l'intervention nécessite la salle d'opération, le rendez-vous alimente le planning opératoire. L'agenda chirurgical affiche toutes les salles d'opération côte à côte (OP1, OP2, OP3) avec l'intervention prévue, le nom et la date de naissance du patient, ainsi que le statut de planification. Le planning peut être consulté par jour, par semaine ou par mois, et prend en charge des workflows de demande pour les cas qui doivent être approuvés avant d'être confirmés sur le créneau opératoire.

Les deux chemins — traitement direct et intervention planifiée — sont documentés dans le même dossier patient. Aucun changement de système entre consultation, bloc opératoire et facturation.

Documentation clinique peropératoire

Une fois le patient au bloc, l'équipe chirurgicale et le médecin anesthésiste travaillent simultanément dans Viali — chacun dans sa propre vue, toutes deux liées au même dossier opératoire.

Côté chirurgie — le dossier peropératoire enregistre tout en temps réel : installation du patient (décubitus dorsal, latéral, ventral, etc.) avec notes libres, désinfection, configuration de l'équipement (mode de coagulation : monopolaire/bipolaire, position de l'électrode neutre, côté du corps), comptages et matériel stérile, matériel utilisé, et checklists pré- et postopératoires. Tout est structuré, horodaté et enregistré dans le dossier patient.

Côté anesthésie — le médecin anesthésiste documente les signes vitaux dans une vue parallèle sur toute la durée de l'intervention : pression artérielle (systolique/diastolique), fréquence cardiaque, SpO2 et valeurs documentées, dont le BIS (index bispectral) et le TOF (train de quatre). Les concentrations des médicaments sont consignées en continu — ici Propofol Ce 1.7 et Rémifentanil Ce 5.7. La ligne du temps est renseignée en continu et couvre toute la durée de l'anesthésie.

Déstockage automatique

Chaque article consommé pendant l'intervention — médicaments, consommables, implants — est suivi dans l'onglet stock au fil de l'opération. À la fin de l'intervention, une seule action « Valider le matériel utilisé » ouvre le dialogue de confirmation avec une liste préétablie de tout ce qui a été enregistré. Les articles courants (15 dans ce cas : filtres respiratoires, masques, antibiotiques et autres fournitures) sont validés en un clic. Les stupéfiants — comme le Fentanyl 50 µg/ml — sont listés séparément et exigent une signature numérique supplémentaire avant que la quantité ne soit déduite.

Une fois la validation effectuée, toutes les quantités sont automatiquement déduites du stock de l'unité — pas d'étape distincte de gestion du stock, pas de feuille de comptage papier, pas de ressaisie a posteriori.

À la clôture de l'intervention, les deux dossiers sont verrouillés ensemble — un protocole opératoire complet et conforme à la loi, sans une seule feuille de papier.

Étape 4 — Attribution full-funnel : du clic publicitaire au chiffre d'affaires

Comme chaque réservation porte les paramètres UTM et les identifiants de clic publicitaires de l'étape 2, Viali peut rattacher chaque rendez-vous et chaque intervention à sa source d'origine — automatiquement, sans étiquetage manuel. Le module Marketing regroupe ces données dans une vue de reporting unique, filtrable par praticien, source et campagne.

Comment les patients nous ont trouvés

Sur la période de juin 2025 à avril 2026, la Privatklinik Kreuzlingen a enregistré 109 références de réservation au total. Répartition par canal :

• Réseaux sociaux 60 (55 %) — la plus grande source à elle seule
• Moteurs de recherche 38 (35 %) — répartis à 56 % organique / 44 % payant sur Google ; Bing et DuckDuckGo représentent le reste
• Recommandation personnelle 7 (6 %)
• Autre 3 (3 %) / Marketing 1 (1 %)

Indicateurs de conversion

Un filtre sur n'importe quelle combinaison de praticien, source et campagne recalcule instantanément tous les indicateurs en aval :

Étapes du funnel par source

Le graphique des étapes du funnel montre la déperdition à chaque étape — Références, Rendez-vous, Honorés, Intervention planifiée, Payée — ventilée par canal. Les réseaux sociaux génèrent le plus de références (60), mais convertissent moins bien que les moteurs de recherche, où le trafic organique (Réf→Intervention 27,3 %, Rendez-vous→Intervention 54,5 %) surpasse nettement le trafic payant (12,5 % / 16,7 %).

Tableau de conversion par source

Le tableau détaillé donne une vue complète de toutes les sources, avec des sous-lignes Payant vs Organique pour les moteurs de recherche et les réseaux sociaux, et des colonnes pour les références, les rendez-vous honorés, les non-présentations, les annulations, les interventions, le taux Réf→Intervention et le taux Rendez-vous→Intervention.

Conversions API — renvoyer les résultats réels

Savoir quel canal a généré une réservation, ce n'est que la moitié de la boucle. L'autre moitié consiste à indiquer à Meta et à Google lesquels de ces clics se sont réellement transformés en intervention payée.

Via la Conversions API de Viali (use.viali.app/api), chaque événement de conversion — lead, rendez-vous réservé, intervention planifiée, paiement reçu — est renvoyé côté serveur à la plateforme publicitaire qui a généré le clic d'origine, associé à l'identifiant de clic initial (fbclid, gclid, etc.). Meta le reçoit via CAPI, Google via la Google Ads Conversions API.

Les plateformes utilisent ces signaux pour réentraîner leurs algorithmes d'enchères : au lieu d'optimiser pour des clics ou des formulaires remplis, elles apprennent le profil d'un patient qui a parcouru tout le funnel et payé une intervention d'une valeur de CHF 6'000 à 30'000. Les campagnes suivantes attirent davantage de patients de ce type.

Cela referme la boucle ouverte à l'étape 2 : les paramètres UTM et les identifiants de clic collectés lors de la réservation deviennent les données de conversion visibles ici — liées à un chiffre d'affaires chirurgical réel, et non à de simples clics ou leads.

Conclusion

Avant Viali, la Privatklinik Kreuzlingen ressemblait à la plupart des cliniques privées de Suisse : opérationnelle sur le plan technique, mais fragile. Un site WIX impossible à mettre à jour sans développeur. Un système de réservation dans un silo séparé. Un planning opératoire sur Excel, partagé par e-mail. Une documentation d'anesthésie sur papier. Un stock suivi de mémoire. Des dépenses marketing sans lien avec le chiffre d'affaires.

Le résultat n'était pas une clinique qui ne fonctionnait pas. C'était une clinique où chaque transmission introduisait un risque — où l'allergie d'un patient pouvait dormir dans un PDF que personne n'ouvrait. Où une campagne Botox à CHF 3'000 par mois ne pouvait être rattachée à aucune intervention. Où la direction devait interroger quatre personnes différentes pour obtenir une réponse partielle à une question simple.

Viali a remplacé tout cela par un système unique dans lequel chaque rôle de la clinique — accueil, praticien, soins, médecin anesthésiste, direction — accède exactement aux informations dont il a besoin, exactement au bon moment :

• L'accueil voit la journée complète avec les rendez-vous confirmés et le statut des patients.
• Le patient remplit le questionnaire préopératoire sur son téléphone avant son arrivée.
• Le médecin anesthésiste consulte les antécédents du patient avant que celui-ci n'arrive au bloc.
• Le chirurgien documente l'installation, l'équipement et les checklists en temps réel.
• Le médecin anesthésiste enregistre les signes vitaux et les concentrations des médicaments en continu, dans une vue liée.
• Le stock se déduit de lui-même à mesure que les articles sont consommés et validés.
• La direction voit quelle source a généré CHF 79'100 de chiffre d'affaires chirurgical — pas des clics, pas des leads, mais des opérations réellement payées.
• Meta et Google reçoivent le signal de conversion et envoient davantage de patients semblables à ceux qui se sont réellement fait opérer.

Les données enregistrées ne dorment pas dans une base de données. Elles circulent : du formulaire de réservation à l'agenda, du questionnaire au bloc opératoire, du dossier opératoire au stock, du paiement à la plateforme publicitaire. Chaque information saisie par un rôle devient une donnée utile pour le suivant.

Voilà à quoi ressemble un système clinique entièrement intégré. Pas plus de logiciels — moins de frictions, moins de risques, moins de travail manuel. Et une ligne complète et ininterrompue, du premier clic publicitaire à la dernière facture payée.

Si vous souhaitez construire la même chose pour votre clinique, contactez-nous.

Questions fréquentes

Qu'est-ce que la Privatklinik Kreuzlingen a remplacé par Viali ?

Un site WIX, un système de réservation isolé, un planning opératoire sur Excel, une documentation d'anesthésie propriétaire calquée sur le papier et des dépenses publicitaires à l'aveugle — le tout réuni dans une plateforme intégrée unique.

Quel score Lighthouse le nouveau site a-t-il obtenu ?

99 Performance / 100 Accessibility / 100 Best Practices / 100 SEO sur le domaine de production, avec un site construit en Next.js 15 et génération de site statique (SSG).

Comment l'attribution des réservations est-elle enregistrée ?

Les paramètres UTM et les identifiants de clic publicitaires (gclid, fbclid et autres) sont relevés au premier chargement, stockés et transmis à Viali, de sorte que chaque réservation est rattachée à sa source marketing d'origine.

Comment fonctionne la documentation peropératoire ?

L'équipe chirurgicale et l'équipe d'anesthésie travaillent simultanément dans Viali, dans des vues liées — installation du patient, équipement et checklists documentés au fil de l'eau d'un côté, signes vitaux et concentrations des médicaments consignés en continu de l'autre — et les deux dossiers sont verrouillés ensemble à la fin.

Comment fonctionne le déstockage ?

Le matériel utilisé est enregistré pendant l'intervention et validé en un clic ; les stupéfiants exigent une signature numérique supplémentaire, puis toutes les quantités sont automatiquement déduites du stock.

Qu'a révélé l'attribution full-funnel ?

Entre juin 2025 et avril 2026, 109 références ont produit 13 interventions payées et CHF 79'100 de chiffre d'affaires ; la recherche organique a mieux converti que la recherche payante, et les conversions ont été renvoyées à Meta et Google via la Conversions API.

*D'autres sections suivront : salle de réveil (SSPI), gestion du stock et reporting de direction.*