Documentación — CH3TRIS Embed, Card y API

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:

CH3TRIS Embed — el reto completo, jugable dentro de tu web, con tus colores y tu logotipo. Pensado para webs, portales y medios que quieren hacer suyo el reto. Documentación del Embed.
CH3TRIS Card — la tarjeta gratuita que invita a jugar el reto de hoy. Se inserta en segundos en cualquier blog, web o newsletter. Documentación de la Card.

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

En la demo pública, pulsa «Generar Embed» bajo el configurador: obtienes un iframe de prueba con la configuración actual codificada en la URL. Cópialo para probarlo 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ámetro	Qué hace
`accent`	Color de acento (botones, detalles).
`bg` / `fg`	Color de fondo y de texto.
`sqdark` / `sqlight`	Color de las casillas oscuras y claras del tablero.
`logo`	URL https de tu logotipo (SVG o PNG recomendado).
`foot=0`	Oculta el pie del reto.
`date=0`	Oculta la fecha y el número del reto.
`cta` / `ctaLabel`	Enlace y texto del botón final propio en la pantalla de resultado.
`gate=1`	Activa el control del inicio: el reto espera la orden de tu página.
`partner`	Tu identificador de partner (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 partner. Si alguien inserta el código de demo fuera de ch3tris.com sin acuerdo, el embed lo detecta y muestra un sello «DEMO» semitransparente. Puedes ver cómo queda en el ejemplo fijo de la demo técnica.

Identificador de partner

Para la puesta en marcha real te enviamos un enlace privado del configurador, ya vinculado a tu identificador. Allí guardas la página HTTPS exacta donde publicarás el Embed; hasta hacerlo, el botón «Generar Embed» no entrega código de producción.

Después de guardar esa URL, el configurador genera una línea estable ligada a tu medio:

<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. Te enviaremos el enlace privado para revisar el diseño, declarar la instalación y copiar el código final sin tener que editar parámetros a mano.

Control del inicio (pre-roll, paywall)

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 pre-roll (un anuncio en vídeo antes de jugar), un paywall (acceso solo para tus suscriptores), un 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. Allí, un único botón Play/Pausa traduce la interfaz a los tres comandos del protocolo: el primer Play envía start, Pausa envía pause y el siguiente Play envía resume. «Volver al inicio» es solo una herramienta de demostración: recarga el ejemplo para devolverlo a la espera inicial y no añade un comando reset al protocolo.

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&page=https://tumedio.com/tu-articulo"
  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, attr=0 (ocultar la atribución) y page= (URL exacta del artículo donde pegas el iframe; indica la página real para que el dato de rendimiento quede desglosado por sección — sustituye https://tumedio.com/tu-articulo por la URL real).

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 partner (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 partner: con identificador de partner, 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

Mini-glosario

Los términos del sector que usamos en estas páginas, explicados en llano:

Partner — el medio o web que inserta el reto con su propio identificador (?partner=tumedio): su diseño queda fijado en nuestro servidor y solo sus dominios pueden usarlo.
Lead — un contacto de un lector interesado (por ejemplo, un registro con su email) que tu web consigue gracias al reto.
Paywall — el acceso reservado a suscriptores: contenido que solo se ve pagando o con cuenta. Con el control del inicio puedes poner el reto detrás del tuyo.
Pre-roll — un anuncio (normalmente en vídeo) que se muestra antes de empezar a jugar.
Control del inicio — el modo (gate=1) en el que el reto no empieza solo, sino cuando tu página da la orden: es lo que permite anteponer un pre-roll, un paywall o un registro.
Embed — el reto diario completo, jugable dentro de tu web con tu marca.
Card — la tarjeta gratuita que muestra la portada del reto de hoy e invita a jugarlo en ch3tris.com.

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. Te enviaremos un enlace privado para revisar el diseño, guardar la URL exacta de instalación y copiar el código final ligado a tu medio.

Contacto

¿Te ayudamos?

Para activar tu identificador de partner, 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»).