El widget no carga o los estilos fallan

Diagnóstico rápido

Antes de analizar problemas específicos, realiza una verificación básica:

1. Abre la página con el widget.
2. Pulsa F12 (o Cmd+Option+I en Mac) -> pestaña Console.
3. Busca errores relacionados con tikento, widget.js, CSP o CORS.
4. Revisa la pestaña Network -- busca la solicitud a tikento.com/widget.js y asegúrate de que el estado sea 200.

Problema: el widget no carga en absoluto

Causa 1: Content Security Policy (CSP) bloquea el script

Síntomas:

• El formulario no aparece.
• En la consola: Refused to load the script 'https://tikento.com/widget.js' because it violates the following Content Security Policy directive: "script-src ...".

Solución:

Añade tikento.com a la directiva script-src de tu política CSP:

script-src 'self' https://tikento.com;

Si usas meta-tag:

<meta http-equiv="Content-Security-Policy"
  content="script-src 'self' https://tikento.com;">

También puede ser necesario añadir connect-src https://tikento.com para las solicitudes API del widget y style-src 'unsafe-inline' https://tikento.com para los estilos.

Causa 2: eventId incorrecto

Síntomas:

• El script se carga (200 en Network), pero el formulario no se renderiza.
• En la consola: [tikento] Event not found o [tikento] Invalid eventId format.

Solución:

1. Abre el evento en el panel de tikento.
2. Ve a la pestaña Registro -> Widget para sitio web.
3. Copia el UUID correcto del campo o del código listo del widget.
4. Asegúrate de que el atributo data-tikento-widget contenga exactamente el UUID sin espacios ni caracteres extra.

<!-- Correcto -->
<div data-tikento-widget="550e8400-e29b-41d4-a716-446655440000"></div>

<!-- Incorrecto -->
<div data-tikento-widget="TU_EVENT_ID"></div>

Causa 3: El script no está conectado o está conectado dos veces

Síntomas:

• El contenedor div está en la página, pero el formulario no aparece.
• No hay errores en la consola, no hay solicitud a widget.js en Network.

Solución:

Asegúrate de que la etiqueta <script> esté presente en la página y se cargue exactamente una vez:

<script src="https://tikento.com/widget.js" async defer></script>

Algunos constructores de sitios (Tilda, Wix) requieren añadir scripts en bloques especiales. Ver Instalación en Tilda, Webflow, Wix.

Problema: errores CORS

Síntomas:

• El formulario comienza a cargarse, pero los datos (campos, entradas) no se cargan.
• En la consola: Access to fetch at 'https://tikento.com/api/...' from origin 'https://your-site.com' has been blocked by CORS policy.

Solución:

En los planes Pro y superiores es necesario añadir el dominio de tu sitio a la lista de orígenes permitidos:

1. En el panel: evento -> Registro -> Widget -> Dominios permitidos.
2. Añade el dominio de tu sitio (por ejemplo, example.com o *.example.com).
3. Haz clic en Guardar.

Los cambios surten efecto en menos de un minuto (después de la invalidación de la caché widget:origins:{eventId}).

En el plan Free no se aplican restricciones CORS -- el widget funciona en cualquier dominio.

Más detalles -- Configuración de CORS.

Problema: los estilos del widget fallan

Propiedades CSS heredables

Shadow DOM aísla la mayoría de los estilos, pero algunas propiedades CSS se heredan a través del límite del Shadow DOM:

• font-family, font-size, line-height
• color
• direction, text-align
• visibility

Si tu CSS reset establece valores agresivos en body o *, esto puede afectar al widget.

Solución:

Define las variables CSS del widget explícitamente para sobrescribir los valores heredados:

:root {
  --tikento-font: 'Inter', sans-serif;
  --tikento-text: #18181B;
}

El contenedor del widget está comprimido o invisible

Síntomas:

• El widget se muestra con altura 0 o ancho 0.
• El formulario está cortado.

Solución:

Verifica que el elemento padre del contenedor data-tikento-widget no tenga:

• overflow: hidden con altura fija
• display: none o visibility: hidden
• max-height: 0 o height: 0
• position: fixed / absolute sin dimensiones definidas

El contenedor del widget necesita un ancho libre mínimo de 320px.

Problema: se muestra una versión antigua del formulario

Síntomas:

• Actualizaste los campos o entradas en el constructor, pero en el widget del sitio se ve la versión antigua.

Solución:

1. Caché del navegador. Pulsa Ctrl+Shift+R (o Cmd+Shift+R en Mac) para una recarga forzada.
2. Caché de CDN / hosting. Si tu sitio está detrás de Cloudflare o un CDN similar, limpia la caché de la página con el widget.
3. Caché Redis de tikento. La configuración del widget se almacena en caché con TTL de 300 segundos (5 minutos). Si han pasado más de 5 minutos y los cambios no aparecen -- contacta con soporte.

El script widget.js se carga con el encabezado Cache-Control: no-cache -- siempre está actualizado. Pero la configuración del formulario (campos, entradas, opciones) se almacena en caché del lado de tikento.

Problema: el widget no funciona en modo popup

Síntomas:

• El botón con data-tikento-popup no abre el formulario al hacer clic.

Solución:

1. Asegúrate de que el script widget.js esté cargado en la página.
2. Verifica que el atributo data-tikento-popup contenga un UUID de evento correcto.
3. Si el botón se añade dinámicamente (mediante un framework JS), asegúrate de que esté presente en el DOM en el momento de la inicialización del widget, o llama a window.tikento?.refresh() después de añadirlo.

Errores en la consola: referencia

Sigue sin funcionar

Si después de todas las verificaciones el problema persiste:

1. Haz una captura de pantalla de los errores en la consola (pestaña Console).
2. Copia la URL de la página donde está instalado el widget.
3. Indica el navegador y su versión.
4. Envía todo al soporte a través del panel (Ayuda -> Escribir a soporte) o a support@tikento.com.