¿Se puede personalizar el widget en el plan gratuito?

No. En el plan Free, el widget se muestra con el estilo estándar de tikento y con marca de agua. La personalización mediante variables CSS está disponible a partir del plan Pro.

¿Por qué mis estilos CSS del sitio no afectan al widget?

El widget se renderiza dentro de Shadow DOM -- un entorno aislado que no hereda los estilos de la página anfitriona. Para estilizarlo, usa las variables CSS de tikento.

¿Dónde puedo ver el resultado de la personalización antes de publicar?

En el panel del evento, abre Registro -> Widget -> Personalización. A la derecha se muestra una vista previa del formulario con tu configuración en tiempo real.

Personalización del widget

Principio de funcionamiento

El widget de tikento se renderiza en Shadow DOM -- un área aislada a la que no llegan los estilos de tu sitio. Esto garantiza que el formulario siempre se vea correctamente. La otra cara: las reglas CSS normales de tu sitio no pueden afectar al widget directamente.

Para el branding se utilizan CSS custom properties (variables CSS). Se transmiten a través del límite del Shadow DOM y permiten controlar colores, fuentes y bordes redondeados.

Variables CSS disponibles

Define las variables en el CSS de tu sitio o directamente en el atributo style del contenedor:

:root {
  /* Color principal (botones, enlaces, acentos) */
  --tikento-primary: #4F46E5;

  /* Color del texto en los botones */
  --tikento-primary-foreground: #FFFFFF;

  /* Fondo del formulario */
  --tikento-bg: #FFFFFF;

  /* Color principal del texto */
  --tikento-text: #18181B;

  /* Color del texto secundario */
  --tikento-text-muted: #71717A;

  /* Color de los bordes de los campos de entrada */
  --tikento-border: #E4E4E7;

  /* Radio de borde (botones, campos, tarjetas) */
  --tikento-radius: 8px;

  /* Fuente */
  --tikento-font: 'Inter', sans-serif;

  /* Color de errores de validación */
  --tikento-error: #EF4444;

  /* Color de estados exitosos */
  --tikento-success: #22C55E;
}

Todas las variables son opcionales. Si no defines alguna, el widget usará el valor por defecto.

Configuración desde el panel

Método sin código -- configura todo desde la interfaz de tikento:

Abre el evento en el panel.
Ve a la pestaña Registro -> sección Widget para sitio web.
Haz clic en Personalización.
Selecciona colores, fuente y bordes redondeados mediante controles visuales.
A la derecha se muestra una vista previa -- el formulario se actualiza en tiempo real.
Haz clic en Guardar -- los cambios se aplicarán a todos los widgets insertados de este evento.

El panel genera código CSS listo para usar, que también puedes copiar y pegar en tu sitio manualmente.

Configuración mediante código

Si necesitas un control más detallado, define las variables CSS directamente en la página:

Opción 1: Globalmente mediante :root

:root {
  --tikento-primary: #0D9488;
  --tikento-radius: 12px;
  --tikento-font: 'Montserrat', sans-serif;
}

<div
  data-tikento-widget="TU_EVENT_ID"
  style="--tikento-primary: #0D9488; --tikento-radius: 12px;"
></div>

La segunda opción es conveniente si hay varios widgets en la página o no quieres afectar los estilos globales.

Opción 3: Conexión de fuente

Si usas una fuente no estándar, conéctala en la página anfitriona mediante <link> o @font-face, luego especifícala en la variable:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">

:root {
  --tikento-font: 'Montserrat', sans-serif;
}

Shadow DOM hereda las variables CSS de la página anfitriona, pero la fuente debe estar cargada a nivel del documento.

Shadow DOM: qué está aislado y qué no

Atraviesa el Shadow DOM	No atraviesa
CSS custom properties (`--tikento-*`)	Reglas CSS normales (`.class`, `#id`)
Fuentes cargadas (`@font-face`)	Selectores por etiquetas (`input`, `button`)
`color-scheme`, `direction`	Clases de Tailwind, estilos de Bootstrap

Esto significa que los estilos de tu sitio nunca romperán el widget, y el widget no afectará a los estilos de tu sitio.

Limitaciones por plan

Plan	Personalización	Marca de agua
Free	No disponible. Estilo estándar de tikento	Siempre visible
Pro	Personalización completa de variables CSS	Eliminada
Business	Personalización completa + soporte prioritario	Eliminada
Enterprise	Personalización completa + white-label	Eliminada

Más sobre la marca de agua -- Marca de agua «Powered by tikento».

Consejos

Verifica el contraste: el color del botón (--tikento-primary) debe dar un contraste de al menos 4.5:1 con el color del texto sobre él (--tikento-primary-foreground).
Prueba el formulario en el modo oscuro del navegador si tu sitio soporta el modo oscuro.
Especifica una fuente de respaldo en --tikento-font en caso de que la fuente web no se cargue.
Después de guardar la personalización en el panel, la caché Redis del widget (widget:config:{eventId}) se invalida automáticamente -- los cambios surten efecto en unos segundos.