CH3TRIS Embed · Demo técnica

El control editorial del reto,
visto desde tu web

Cada bloque muestra una pieza del embed: el diseño, el control de inicio y pausa, los anchos responsive y los eventos que recibe tu página. Todos los ejemplos comparten el mismo tablero neutro en blanco y negro y varían solo el color de acento y la funcionalidad, como harías al adaptarlo a tu medio.

Demo desconectada del reto diario mundial. Los retos de esta página son rejugables y no cuentan para nadie. Cuando alguien los inserta fuera de ch3tris.com sin acuerdo, llevan un sello «DEMO» visible.

1

Tu diseño con control del inicio

Si has guardado un diseño en el configurador, este bloque lo muestra tal cual (se recuerda en tu navegador); si no, se ve un diseño de ejemplo. Con el control del inicio activado (gate=1), el juego espera la orden {source:'host', cmd:'start'} de tu página.

Controles de prueba · afectan a los ejemplos

«Volver al inicio» solo recarga estos ejemplos para recuperar la espera inicial; no es un comando de la API.

1b

Flujo completo: control → pre-roll → jugar → pantalla final → botón del medio

Demo (sin partner) con ?gate=1&cta=…&ctaLabel=…: así se antepone al reto un pre-roll (un anuncio en vídeo antes de jugar) o cualquier otro paso. Usa los botones de arriba para «start»: el mismo control gobierna todos los retos de la página.

★

Sello DEMO: lo que ve quien lo inserta sin acuerdo

Dentro de ch3tris.com los embeds de demo se ven sin sello, para que puedas diseñar con comodidad. Pero si alguien copia el código de demo y lo pega en su web sin ser socio, el embed reconoce que está fuera de nuestro dominio y muestra esto:

2

Ajustes por URL — tres anchos responsive

Iframe puro con ?accent=…&foot=0…. El mismo embed se adapta al hueco: 340 px (compacto), 680 px (completo) y 1100 px o más (página dedicada).

340px — compacto

680px — completo

1100px+ — página dedicada

2b

CH3TRIS Card por script (autoservicio) — con y sin atribución

<div data-ch3tris-card data-lang="es"> montada por ch3tris-embed.js; la altura se autoajusta sola por postMessage. A la derecha, la misma Card con data-attr="0" (sin pie de atribución).

Card (atribución visible)

Card con data-attr="0"

Si tu gestor de contenidos no admite scripts, usa el formato iframe. Indica la URL exacta del artículo con &page= para saber cómo rinde el reto en cada sección de tu web:
<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>

3

Partner desconocido (respaldo)

Con un identificador de partner que no existe, el embed no se rompe: carga con el diseño neutro de CH3TRIS.

·

Eventos que recibe tu página

Todo lo que el embed comunica por postMessage (source:'ch3tris'): carga, altura, inicio, resultado… Es lo que tu web puede escuchar para integrarse.

Consola de eventos