CH3TRIS para tu web · Documentación

Documentación

Todo lo necesario para ofrecer el Daily CH3TRIS en tu web, portal o medio: el CH3TRIS Embed (el reto jugable con tu marca), la CH3TRIS Card gratuita y la API de integración para tu equipo técnico.

Empezar

Introducción

El Daily CH3TRIS es el reto diario mundial de CH3TRIS: un único puzzle al día, el mismo para todo el mundo, con un intento y un minuto de juego. Puedes ofrecerlo a tus lectores de dos maneras:

Todo lo que hay en las páginas comerciales es libre de probar: los retos de demo son rejugables y no gastan el Daily de nadie. La demo técnica muestra cada pieza en vivo.

Producto

CH3TRIS Embed

El Embed lleva el reto diario a tu web con tu identidad: colores, logotipo, tablero y pantalla final adaptados a tu marca. Es un iframe estándar servido desde ch3tris.com, sin cookies de terceros, que funciona en cualquier gestor de contenidos.

Diseño con el configurador

Entra en el configurador y elige cómo se verá el reto en tu web. La vista previa se regenera al instante con cada ajuste: lo que ves ahí es exactamente lo que verán tus lectores.

  • Diseño: parte del diseño CH3TRIS (original) o de Personalizado y edita cada campo a tu gusto.
  • Colores: acento, fondo y texto con selectores de color. La casilla «Aplicar Acento a Tablero» lleva tu color de acento también a las casillas oscuras del tablero.
  • Tu logotipo: pega la URL https de tu logo (idealmente SVG o PNG con fondo transparente). Se muestra en una franja superior propia sobre el reto y en la pantalla final.

Generación desde tu URL

Lo más rápido: pega la URL de tu web (por ejemplo https://tumedio.com) y pulsa ✦ Analizar. Leemos tu portada y te proponemos tu logotipo y tu color de acento automáticamente. Todo sigue siendo editable después.

Si tu web bloquea lectores automáticos o tu logotipo solo existe incrustado en la página, el configurador lo indica; siempre puedes fijar el logo y los colores a mano.

Interruptores y pie

En Visualización decides qué elementos se muestran:

  • Logo — la franja superior con tu logotipo.
  • Pie — el pie del reto. Al activarlo aparece el grupo Pie, donde puedes definir un botón final propio (texto y enlace) que se muestra en la pantalla final del reto y lleva a tus lectores donde tú quieras: tu sección de pasatiempos, una suscripción, otra noticia…
  • Fecha — la fecha y el número del reto del día.

Código de inserción y parámetros

Pulsa «Generar Embed» bajo el configurador: obtienes un iframe con tu configuración actual codificada en la URL. Cópialo y pégalo donde quieras que aparezca el reto (una noticia, tu sección de pasatiempos, la portada…).

<iframe src="https://ch3tris.com/embed/daily?accent=%23346EB7&bg=%23FFFFFF&fg=%23121212&logo=https%3A%2F%2Ftumedio.com%2Flogo.svg" width="100%" height="560" style="border:0" scrolling="no" title="CH3TRIS — Reto diario"></iframe>

Parámetros de diseño y comportamiento que admite /embed/daily (todos opcionales; los colores van en hexadecimal codificado, %23 = #):

ParámetroQué hace
accentColor de acento (botones, detalles).
bg / fgColor de fondo y de texto.
sqdark / sqlightColor de las casillas oscuras y claras del tablero.
logoURL https de tu logotipo (SVG o PNG recomendado).
foot=0Oculta el pie del reto.
date=0Oculta la fecha y el número del reto.
cta / ctaLabelEnlace y texto del botón final propio en la pantalla de resultado.
gate=1Activa el control del inicio: el reto espera la orden de tu página.
partnerTu identificador de socio (sustituye a todos los anteriores).

El código con parámetros en la URL es una demo funcional: rejugable y desconectada del reto diario mundial. El Daily real se activa con tu identificador de socio.

Identificador de socio

Para la puesta en marcha real te preparamos un identificador propio. Tu código de inserción queda reducido a una línea estable:

<iframe src="https://ch3tris.com/embed/daily?partner=tumedio" width="100%" height="560" style="border:0" scrolling="no" title="CH3TRIS — Reto diario"></iframe>
  • Configuración fijada en el servidor: tu diseño (colores, logo, interruptores, botón final) queda guardado con tu identificador; cualquier ajuste posterior se aplica sin tocar tu web.
  • Dominios autorizados: solo tus dominios pueden insertar el reto con tu identificador.
  • Daily oficial: tus lectores juegan el reto diario real — uno al día, el mismo en todo el mundo.

Para activarlo, escríbenos a partners@ch3tris.com con tu diseño listo: te devolvemos tu identificador y el código final en el día.

Control del inicio (pre-roll, muro de registro)

Con gate=1, el reto no empieza solo: se queda esperando la orden de tu página. Así puedes poner delante lo que necesites — un vídeo pre-roll, un muro de registro, una cuenta atrás — y dar la orden de empezar cuando tú decidas.

Tu página da la orden por postMessage:

// arrancar el reto cuando tu página lo decida iframe.contentWindow.postMessage({ source: 'host', cmd: 'start' }, 'https://ch3tris.com'); // pausar y reanudar (por ejemplo, si el lector abre otra capa) iframe.contentWindow.postMessage({ source: 'host', cmd: 'pause' }, 'https://ch3tris.com'); iframe.contentWindow.postMessage({ source: 'host', cmd: 'resume' }, 'https://ch3tris.com');

Puedes probar el flujo completo (control → pre-roll → jugar → pantalla final → botón del medio) en la demo técnica, con botones start/pause/resume en vivo.

Producto

CH3TRIS Card

La Card es la tarjeta gratuita del Daily CH3TRIS: invita a tus lectores a jugar el reto de hoy y se inserta en segundos en cualquier blog, web o newsletter. Sin cuentas, sin registro y sin mantenimiento: cada día muestra el nuevo reto automáticamente.

En la página de la Card tienes el configurador con las dos opciones disponibles:

  • Idioma — español o inglés.
  • Atribución — mostrar u ocultar la línea «Juega gratis en ch3tris.com».

Y dos formatos de código:

Formato script (recomendado): un pequeño script crea el iframe y ajusta su altura solo.

<div data-ch3tris-card data-lang="es"></div> <script src="https://ch3tris.com/ch3tris-embed.js" async></script>

Atributos del div: data-lang="es|en" (idioma) y data-attr="0" (ocultar la atribución).

Formato iframe: una etiqueta fija, para gestores de contenido que no admiten scripts.

<iframe src="https://ch3tris.com/card/daily?lang=es" width="340" height="560" style="border:0;max-width:100%;border-radius:16px" title="CH3TRIS — Reto diario" loading="lazy"></iframe>

Parámetros de /card/daily: lang=es|en y attr=0 (ocultar la atribución).

Técnico

API e integración

Tanto el Embed como la Card son iframes servidos desde ch3tris.com, sin cookies de terceros. El embed se comunica con tu página por postMessage, siempre con source: 'ch3tris' en el mensaje.

Eventos que recibe tu página

Escucha los mensajes del iframe para integrarte con tu web (analítica propia, desbloquear contenido al terminar, ajustar la maqueta…):

window.addEventListener('message', function (e) { var d = e.data; if (!d || d.source !== 'ch3tris') return; // d.event: 'ready' | 'resize' | 'game_start' | 'game_end' | 'share_click' // d.partner: identificador del socio (o 'demo') });
  • ready — el reto ha cargado y está listo.
  • resize — la altura del contenido ha cambiado (height en píxeles). El formato script de la Card ya la aplica solo.
  • game_start — el lector ha empezado a jugar (day: número del reto).
  • game_end — el reto ha terminado (result: resultado, moves: movimientos usados, optimal: movimientos óptimos, day).
  • share_click — el lector ha pulsado el botón de compartir.

La demo técnica incluye una consola en vivo con todos los eventos según juegas.

Órdenes de tu página al reto

Con el control del inicio activado (gate=1), tu página gobierna el reto enviando mensajes con source: 'host': start, pause y resume.

Especificaciones

  • Formato: iframe estándar HTTPS servido desde ch3tris.com; funciona en cualquier CMS.
  • Responsive: el mismo embed se adapta al hueco — compacto (340 px), completo (680 px) o página dedicada (1100 px o más).
  • Privacidad: sin cookies de terceros ni rastreadores en la web del medio.
  • Seguridad con socio: con identificador de socio, solo los dominios autorizados pueden insertar el reto.
  • Respaldo: con un identificador desconocido el embed no se rompe: carga con el diseño neutro de CH3TRIS.

El resumen comercial de especificaciones está también en la página del Embed.

Ayuda

Preguntas frecuentes

¿Cuesta algo probarlo?

No. Todo lo que hay en las páginas del Embed y la Card es libre: diseña, juega y copia los códigos de demo sin compromiso. La Card, además, es gratuita también en producción.

¿Qué necesita mi equipo técnico?

Nada especial: es un iframe estándar servido desde ch3tris.com, sin cookies de terceros. Esta página y la demo técnica cubren el control del inicio, los formatos y los eventos que recibe tu página.

¿El reto es el mismo que en la app?

Sí: el Daily CH3TRIS es el mismo puzzle para todo el mundo cada día, también en tu web.

¿Cómo activamos la versión definitiva del Embed?

Escríbenos a partners@ch3tris.com con tu diseño ya listo y te devolvemos tu identificador de medio y el código final en el día.

Contacto

¿Te ayudamos?

Para activar tu identificador de socio, resolver dudas de integración o cualquier otra cosa: partners@ch3tris.com.

No hay resultados para esa búsqueda. Prueba con otra palabra (por ejemplo: «logo», «gate», «card», «postMessage»).