De herramientas desconectadas a una clínica integrada: Privatklinik Kreuzlingen

La Privatklinik Kreuzlingen es una clínica privada de cirugía plástica, reconstructiva y estética situada en Gaissbergstrasse 45, Kreuzlingen. Cuando analizamos la situación en la primavera de 2025, el panorama era claro: una clínica competente, con personal bien formado, que funcionaba sobre una infraestructura digital que nunca se había construido para ella.

Este artículo documenta lo que encontramos, cómo lo resolvimos y cómo puede reproducirse la misma configuración, paso a paso y con todo el detalle técnico.

El punto de partida

Lo que encontramos no es un caso aislado. Es el retrato típico de una clínica que ha crecido durante años con lo que había disponible, nunca con un sistema pensado para ella desde el principio.

Sitio web

La web funcionaba en WIX. Se mantenía de forma esporádica, apenas estaba optimizada para los buscadores, tenía contenidos parcialmente desactualizados y no ofrecía ninguna posibilidad de integración programática. Ni API, ni webhook, ni base técnica alguna. La reserva en línea se resolvía con un widget de terceros incrustado que no se comunicaba ni con el calendario ni con el sistema de gestión de la consulta.

Reservas y recepción

El sistema de reservas vivía en su propio mundo. No conocía ni la programación quirúrgica ni el PMS. La consecuencia: el personal de recepción dedicaba una parte considerable de su jornada a trasladar información a mano de un sistema a otro, con entradas duplicadas, seguimientos olvidados y una sobrecarga crónica. El equipo trabajaba duro, pero contra su propia infraestructura.

Programación quirúrgica

La programación quirúrgica existía en Excel. Sin actualizaciones en tiempo real. Sin conexión con el inventario ni con la disponibilidad de material. Sin un traspaso estructurado a anestesiología. Cada cambio exigía comunicarse manualmente con varias personas.

Gestión de la consulta

Un PMS propietario y antiguo, sin interfaz API, sin posibilidad de exportación y sin hoja de ruta de actualizaciones. Un caso clásico de dependencia del proveedor: los datos estaban ahí, pero no se podían aprovechar.

Documentación anestésica

Un PDMS propietario que digitalizaba el proceso en papel tal cual, y ahí se quedaba. Ninguna ventaja apreciable frente al papel, salvo que el papel había desaparecido. Sin integración con la programación quirúrgica ni conexión con los datos clínicos o administrativos.

Marketing y seguimiento

Cero seguimiento del embudo. Ningún parámetro UTM. Ninguna atribución de conversiones. El presupuesto de marketing se gastaba sin saber si servía de algo. ¿Qué canal traía pacientes que realmente se operaban y pagaban? Nadie lo sabía.

El panorama general: una clínica que funcionaba gracias al esfuerzo humano, no a la infraestructura técnica. Un personal comprometido que dedicaba una parte considerable de su energía a cubrir a mano las lagunas de información.

Lo que construimos

Implantamos Viali como plataforma unificada que conecta todos los niveles: marketing, reserva de citas, programación quirúrgica, anestesia, gestión del inventario e informes de dirección. Este artículo documenta los primeros pasos, los más fundamentales: la nueva infraestructura digital de la clínica.

Paso 1: la nueva web de la clínica

De WIX a Next.js

La antigua web en WIX era un punto final, no una plataforma. No podía recibir ni enviar datos, y cada actualización requería a una persona con soltura técnica y acceso al CMS.

Reconstruimos la web por completo, con Next.js 15 y generación de sitios estáticos (SSG). Desarrollada en Replit con ayuda de IA, totalmente optimizada para SEO y con pruebas automáticas de Google Lighthouse como parte fija del ciclo de desarrollo.

El resultado: 99 Performance / 100 Accessibility / 100 Best Practices / 100 SEO en Google Lighthouse, en el dominio de producción.

Configuración técnica

La siguiente configuración se utiliza tanto para la web de marketing de viali.app como para la Privatklinik Kreuzlingen. Está optimizada expresamente para agentes de IA: estructurada y comentada para que los agentes puedan leerla, aplicarla y ampliarla sin necesitar contexto manual.

import type { NextConfig } from "next";

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

const nextConfig: NextConfig = {
  // lucide-react requiere transpilación explícita (compatibilidad ESM en Next.js)
  transpilePackages: ["lucide-react"],

  // Dominios proxy de Replit para CORS en modo desarrollo
  allowedDevOrigins: [
    "*.replit.dev",
    "*.repl.co",
    "*.replit.app",
    "*.picard.replit.dev",
    ...(replitDomain ? [replitDomain] : []),
  ],

  experimental: {
    // Usa .browserslistrc para el compilador SWC → paquetes de polyfills más pequeños
    browsersListForSwc: true,
  },

  images: {
    // Formatos modernos: AVIF y WebP para una mejor compresión
    formats: ["image/avif", "image/webp"],
  },
};

export default nextConfig;

> 1%
last 2 versions
not dead
not ie 11

# --- DESARROLLO (workflow predeterminado de Replit) ---
# Turbopack: recarga en caliente en menos de 2 segundos, sin conflictos de CSP con el proxy de Replit.
# Importante: "next dev" con webpack falla en la vista previa de Replit:
# el proxy CSP de Replit bloquea eval(), que el HMR de webpack necesita obligatoriamente.
# Turbopack evita este problema por completo.
next dev --turbopack --port 5000

# --- ANTES DE LAS PRUEBAS LIGHTHOUSE ---
# Paso 1: build de producción con webpack (no --turbopack)
# Turbopack genera paquetes JS ~45 % más grandes → puntuaciones de rendimiento más bajas.
# Use siempre el build de webpack para las pruebas Lighthouse.
npx next build

# Paso 2: iniciar el servidor de producción
next start --port 5000

# Paso 3: ejecutar la prueba Lighthouse
# Después: volver a cambiar el workflow a "next dev --turbopack --port 5000"

Actualizar contenidos sin conocimientos de desarrollo

Una ventaja clave de esta arquitectura: el personal de la clínica puede actualizar los contenidos por su cuenta. Señala al agente de IA el elemento que quiere cambiar y describe qué debe ser distinto; el agente realiza la modificación, vuelve a generar la página y el cambio queda publicado. Sin formación en CMS, sin tickets al desarrollador, sin esperas.

Paso 2: seguimiento UTM y de referencias → integración con las reservas de Viali

La nueva web es el primer paso. El segundo es la atribución completa: poder vincular cada reserva con su fuente de marketing original y transmitir esa información a Viali sin fisuras.

Qué se registra en la primera carga

Al cargarse la página, se leen y almacenan los siguientes datos:

• Parámetros UTM: utm_source, utm_medium, utm_campaign, utm_term, utm_content
• Identificadores de clic de Google Ads: gclid, gbraid, wbraid
• Meta (Facebook / Instagram): fbclid, igshid
• LinkedIn: li_fat_id
• TikTok: ttclid
• Microsoft Ads: msclkid
• Detección automática del referente: si no hay parámetros UTM, se compara document.referrer con una lista conocida (Google, Bing, Facebook, Instagram, TikTok, LinkedIn, etc.) y se asigna un canal sintético, por ejemplo google/organic o instagram/social. Los referentes externos desconocidos reciben referral/referral y, si no hay referente, el valor es direct/none.
• Alternativa: pregunta manual sobre la fuente: si la detección automática da como resultado direct/none, el proceso de reserva añade un paso adicional. Una pregunta estructurada pide activamente al paciente que indique cómo encontró la clínica. La respuesta, por ejemplo Redes sociales → Instagram, se transmite al objeto de seguimiento como valor confirmado manualmente y sustituye el marcador direct/none. Ningún contacto de paciente queda sin atribución de fuente.

Almacenamiento

Todos los datos se guardan como objeto JSON bajo la clave de sessionStorage pkk_tracking. En la navegación interna (mismo dominio, sin nuevos parámetros UTM ni identificadores de clic) se reutilizan los datos de sesión existentes. Una nueva visita externa con parámetros UTM o identificadores de clic los sobrescribe.

Transmisión de los datos a Viali

Cuando el usuario abre el diálogo de reserva, buildBookingUrl() construye dinámicamente la URL del iframe con todos los parámetros de seguimiento recopilados. La especificación completa está publicada en 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

Selección del servicio

Datos del paciente rellenados de antemano

Seguimiento UTM

Identificadores de clic de anuncios: se registran en el lead y se devuelven a través de la Conversions API para que las plataformas publicitarias puedan asociar las conversiones con los clics.

Otros

Viali recibe estos parámetros, atribuye la reserva al clic original en el anuncio y la pone a disposición en el CRM y en los informes de conversión, de principio a fin, hasta la cirugía realizada y pagada.

Paso 3: de la reserva al quirófano, el recorrido del paciente

Agenda de citas

En cuanto un paciente completa su reserva, la cita aparece directamente en la agenda de Viali: sin introducirla a mano, sin copiar y pegar, sin llamar a recepción. La vista diaria muestra a todos los profesionales uno al lado del otro, con el estado de la cita (Confirmada, Pendiente), el nombre del paciente y el procedimiento a simple vista. Al cambiar a la vista semanal o mensual, el equipo de la clínica obtiene de inmediato una visión general de la capacidad.

Confirmación y recordatorio automáticos

El paciente recibe una confirmación automática por SMS y correo electrónico inmediatamente después de reservar, sin ninguna intervención del equipo de la clínica. 24 horas antes de la cita se envía un segundo recordatorio automático. Viali genera y envía ambos mensajes. Recepción no gestiona nada de esto a mano.

Cuestionario preoperatorio

Cuando el paciente llega a la clínica, rellena el cuestionario preoperatorio digital en su móvil o en una tableta, antes incluso de llegar al mostrador. El formulario está organizado en varias pestañas:

• Datos personales: nombre, fecha de nacimiento, estatura, peso
• Alergias
• Enfermedades (Erkrankungen)
• Medicación actual
• Estilo de vida: tabaco, alcohol, actividad física
• Documentos: carga de informes médicos existentes
• Notas adicionales

El cuestionario completado se guarda en Viali y queda disponible de inmediato para el equipo de anestesiología: sin formularios en papel, sin volver a introducir datos, sin pérdida de información entre recepción y quirófano. El anestesiólogo consulta las alergias, la medicación y las enfermedades previas del paciente directamente en el sistema, justo donde las necesita, antes de que el paciente llegue al quirófano.

De la cita al tratamiento o al quirófano

Una vez completado el cuestionario, la cita sigue uno de dos caminos según el procedimiento.

Tratamiento directo (p. ej., bótox, rellenos, procedimientos menores): el profesional abre un nuevo registro de tratamiento directamente en la ficha del paciente. El formulario recoge fecha y hora, notas de la sesión y líneas de tratamiento, cada una de las cuales describe un producto o procedimiento aplicado. Una vez documentado, el registro se firma y se bloquea en el sistema.

Cirugía programada: si el procedimiento requiere quirófano, la cita pasa a la programación quirúrgica. El calendario quirúrgico muestra todos los quirófanos uno al lado del otro (OP1, OP2, OP3) con el procedimiento asignado, el nombre y la fecha de nacimiento del paciente y el estado de planificación. La programación puede verse por día, semana o mes, y admite flujos de solicitud para los casos que necesitan aprobación antes de confirmarse en el bloque quirúrgico.

Ambos caminos, tratamiento directo y cirugía programada, se documentan en la misma historia clínica. Sin cambiar de sistema entre consulta, quirófano y facturación.

Documentación clínica intraoperatoria

Una vez que el paciente está en el quirófano, el equipo quirúrgico y el anestesiólogo trabajan en Viali simultáneamente, cada uno en su propia vista y ambos vinculados al mismo registro quirúrgico.

Parte quirúrgica: el registro intraoperatorio recoge todo en tiempo real: la colocación del paciente (decúbito supino, lateral, prono, etc.) con notas de texto libre, la desinfección, la preparación del equipamiento (modo de coagulación monopolar/bipolar, colocación del electrodo neutro, lado del cuerpo), recuentos y material estéril, material utilizado y listas de verificación preoperatorias y postoperatorias. Todo estructurado, todo con marca de tiempo y todo guardado en la historia clínica.

Parte anestésica: el anestesiólogo documenta las constantes vitales en una vista paralela durante toda la intervención: presión arterial (sistólica/diastólica), frecuencia cardiaca, SpO2 y valores documentados como el BIS (índice biespectral) y el TOF (tren de cuatro). Las concentraciones de los fármacos se registran de forma continua; en este caso, propofol Ce 1,7 y remifentanilo Ce 5,7. La línea de tiempo se completa de forma continua y abarca toda la duración de la anestesia.

Descuento automático del inventario

Cada artículo consumido durante el procedimiento (medicamentos, material desechable, implantes) se registra en la pestaña de inventario a medida que avanza la cirugía. Al final de la operación, una única acción «Commit Used Items» abre el diálogo de confirmación con una lista ya preparada de todo lo registrado. Los artículos normales (15 en este caso, entre filtros respiratorios, mascarillas, antibióticos y otros suministros) se confirman con un clic. Los estupefacientes, como el fentanilo 50 µg/ml, aparecen por separado y requieren una firma digital adicional antes de descontar la cantidad.

Una vez confirmadas, todas las cantidades se descuentan automáticamente del inventario de la unidad: sin un paso aparte de gestión de existencias, sin hoja de recuento en papel, sin volver a introducir datos después.

Cuando se cierra la cirugía, ambos registros se bloquean conjuntamente: un protocolo quirúrgico completo y conforme a la normativa, sin una sola hoja de papel.

Paso 4: atribución de embudo completo, del clic en el anuncio a la facturación

Como cada reserva lleva consigo los parámetros UTM y los identificadores de clic del paso 2, Viali puede atribuir cada cita y cada cirugía a su fuente original, de forma automática y sin etiquetado manual. El módulo de Marketing lo agrupa todo en una única vista de informes que puede filtrarse por profesional, fuente y campaña.

Cómo nos encontraron los pacientes

En el periodo de junio de 2025 a abril de 2026, la Privatklinik Kreuzlingen registró 109 referencias de reserva en total. El desglose por canal:

• Redes sociales 60 (55 %): la mayor fuente individual
• Buscadores 38 (35 %): en Google, 56 % orgánico y 44 % de pago; Bing y DuckDuckGo suman el resto
• Recomendación personal 7 (6 %)
• Otros 3 (3 %) / Marketing 1 (1 %)

Métricas de conversión

Al filtrar por cualquier combinación de profesional, fuente y campaña, todas las métricas posteriores se recalculan al instante:

Etapas del embudo por fuente

El gráfico de etapas del embudo muestra la pérdida en cada etapa (referencias, citas, citas acudidas, cirugía programada, pagada) desglosada por canal. Las redes sociales generan el mayor número de referencias (60), pero convierten a una tasa menor que los buscadores, donde el tráfico orgánico (referencia→cirugía 27,3 %, cita→cirugía 54,5 %) supera claramente al de pago (12,5 % / 16,7 %).

Tabla de conversión por fuente

La tabla de desglose ofrece el panorama completo de todas las fuentes, incluidas subfilas de pago y orgánicas para buscadores y redes sociales, con columnas para referencias, citas acudidas, inasistencias, cancelaciones, cirugías, tasa referencia→cirugía y tasa cita→cirugía.

Conversions API: devolver los resultados reales

Saber qué canal generó una reserva es solo la mitad del ciclo. La otra mitad consiste en indicar a Meta y Google cuáles de esos clics se convirtieron realmente en una cirugía pagada.

A través de la Conversions API de Viali (use.viali.app/api), cada evento de conversión (lead, cita reservada, cirugía programada, pago recibido) se envía desde el servidor a la plataforma publicitaria que generó el clic original, asociado mediante el identificador de clic original (fbclid, gclid, etc.). Meta lo recibe a través de CAPI y Google a través de la Google Ads Conversions API.

Las plataformas utilizan estas señales para reentrenar sus algoritmos de puja: en lugar de optimizar para clics o envíos de formularios, aprenden el perfil de un paciente que recorrió todo el embudo y pagó una cirugía de CHF 6'000–30'000. Las campañas siguientes atraen a más pacientes de ese mismo perfil.

Así se cierra el ciclo abierto en el paso 2: los parámetros UTM y los identificadores de clic recogidos en la reserva se convierten en los datos de conversión que aquí se ven, vinculados a la facturación quirúrgica real, no solo a clics o leads.

Conclusión

Antes de Viali, la Privatklinik Kreuzlingen se parecía a la mayoría de las clínicas privadas de Suiza: técnicamente operativa, pero frágil. Una web en WIX que no podía actualizarse sin un desarrollador. Un sistema de reservas en un silo aparte. Una programación quirúrgica en Excel compartida por correo electrónico. Documentación anestésica en papel. Un inventario que se llevaba de memoria. Un gasto en marketing sin ninguna relación con la facturación.

El resultado no era una clínica que no funcionara. Era una clínica en la que cada traspaso introducía un riesgo: donde la alergia de un paciente podía quedarse en un PDF que nadie abría. Donde una campaña de bótox que costaba CHF 3'000 al mes no podía vincularse con una sola cirugía. Donde la dirección tenía que preguntar a cuatro personas distintas para obtener una respuesta parcial a una pregunta sencilla.

Viali lo sustituyó por un único sistema en el que cada función de la clínica (recepción, profesional, enfermería, anestesiología, dirección) tiene acceso exactamente a la información que necesita, justo en el momento adecuado:

• Recepción ve la vista diaria completa con las citas confirmadas y el estado de cada paciente.
• El paciente rellena el cuestionario preoperatorio en su móvil antes de llegar.
• El anestesiólogo lee la historia del paciente antes de que este llegue al quirófano.
• El cirujano documenta la colocación, el equipamiento y las listas de verificación en tiempo real.
• El anestesiólogo registra de forma continua las constantes vitales y las concentraciones de fármacos en una vista vinculada.
• El inventario se descuenta solo a medida que se consumen y confirman los artículos.
• La dirección ve qué fuente generó CHF 79'100 de facturación quirúrgica: no clics, no leads, sino operaciones realmente pagadas.
• Meta y Google reciben la señal de conversión y envían más pacientes como los que realmente se operaron.

Los datos almacenados no se quedan quietos en una base de datos. Circulan: del formulario de reserva a la agenda, del cuestionario al quirófano, del registro quirúrgico al inventario, del pago a la plataforma publicitaria. Cada dato que introduce una función se convierte en información útil para la siguiente.

Así es un sistema clínico totalmente integrado. No más software, sino menos fricción, menos riesgo y menos trabajo manual. Y una línea completa e ininterrumpida desde el primer clic en el anuncio hasta la última factura pagada.

Si quiere construir lo mismo para su clínica, contáctenos.

Preguntas frecuentes

¿Qué sustituyó la Privatklinik Kreuzlingen con Viali?

Una web en WIX, un sistema de reservas aislado, una programación quirúrgica en Excel, una documentación anestésica propietaria al estilo del papel y un gasto publicitario a ciegas, todo ello reunido en una única plataforma integrada.

¿Qué puntuación Lighthouse obtuvo la nueva web?

99 Performance / 100 Accessibility / 100 Best Practices / 100 SEO en el dominio de producción, desarrollada con Next.js 15 y generación de sitios estáticos (SSG).

¿Cómo se registra la atribución de las reservas?

Los parámetros UTM y los identificadores de clic de los anuncios (gclid, fbclid y otros) se registran en la primera carga, se almacenan y se transmiten a Viali, de modo que cada reserva se vincula con su fuente de marketing original.

¿Cómo funciona la documentación intraoperatoria?

El equipo quirúrgico y el de anestesia trabajan simultáneamente en Viali en vistas vinculadas: colocación, equipamiento y listas de verificación documentados sobre la marcha por un lado, constantes vitales y concentraciones de fármacos registradas de forma continua por el otro. Al final, ambos registros se bloquean conjuntamente.

¿Cómo funciona el descuento del inventario?

El material utilizado se registra durante la cirugía y se confirma con un clic; los estupefacientes requieren una firma digital adicional y, después, todas las cantidades se descuentan automáticamente del inventario.

¿Qué reveló la atribución de embudo completo?

Entre junio de 2025 y abril de 2026, 109 referencias generaron 13 cirugías pagadas y CHF 79'100 de facturación; la búsqueda orgánica convirtió mejor que la de pago, y las conversiones se devolvieron a Meta y Google mediante la Conversions API.

*Próximamente más secciones: URPA, gestión del inventario e informes de dirección.*