Guía de instalación · Player

Guía de instalación — Shopify

Cómo incrustar un embed de Treisa Player en una página de tu tienda Shopify (página estándar, home, producto o landing) usando la sección Custom Liquid del editor de temas. EMBED_KEY es la key de tu embed (Player → Embeds); el host https://player.treisaflow.com es el por defecto (el snippet del panel trae el real).

1. Antes de empezar

Dominio registrado en Player → Dominios: el dominio de la tienda — tu dominio custom o el tutienda.myshopify.com con el que publiques la página. Sin https://.
Flag del workspace activo (treisa_player_external_embed_enabled).
El video debe estar publicado y en estado ready.

2. Paso a paso

El snippet que vas a pegar es exactamente este (de Player → Embeds → Copiar snippet, variante Script v2):

<!-- Treisa Player — embed -->
<div data-treisa-player="EMBED_KEY"></div>
<script async src="https://player.treisaflow.com/v2/player.js"></script>

En el admin de Shopify ve a Online Store → Themes.
En tu tema activo pulsa Customize para abrir el editor de temas.
Arriba, en el selector de plantillas, elige la página donde va el video (por ejemplo Pages → home, o la plantilla de una página concreta).
En el lienzo, al final del contenido, pulsa Add section y busca Custom Liquid. Dentro de una sección existente también puedes pulsar Add block → Custom Liquid si tu tema lo ofrece.
En el campo Custom Liquid de la sección pega el snippet del inicio de esta sección, con tu EMBED_KEY real. El snippet no contiene llaves Liquid ({{ }} / {% %}), así que se pega sin ajustes.
Pulsa Save y abre la página publicada de la tienda para verificar.

Nota: dentro del editor de temas la vista previa puede mostrar la sección vacía o comportarse distinto — Shopify inyecta las secciones después de la carga inicial y re-ejecuta su código al editarlas. Lo que cuenta es la tienda publicada.

3. Variante iframe plano

Si no quieres scripts externos en el tema, el mismo campo Custom Liquid acepta la variante iframe:

<iframe
  src="https://player.treisaflow.com/e/EMBED_KEY"
  title="Treisa Player"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  allowfullscreen
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-presentation"
  style="width:100%;aspect-ratio:16/9;border:0"></iframe>

4. CSP

Las tiendas Shopify no publican una CSP restrictiva por defecto: el snippet funciona sin configurar nada.
Si tú o una app añadís cabeceras CSP al storefront, incluye script-src https://player.treisaflow.com (variante script) y frame-src https://player.treisaflow.com (siempre).
El checkout de Shopify es aparte y no permite este tipo de código; el embed va en páginas del storefront.

5. Troubleshooting

Síntoma	Causa probable	Qué revisar
Se ve la sección vacía en el editor de temas	normal en la vista previa del editor	verifica en la tienda publicada
Se ve el código como texto en la tienda	pegado en un campo de texto rico (page.body)	usa la sección Custom Liquid, no el editor de contenido de la página
El video no aparece en la tienda publicada	script bloqueado por CSP de una app o del tema	pestaña Network/console de la página
Error `EMBED_DOMAIN_NOT_ALLOWED`	dominio de la tienda no registrado	registra `tutienda.myshopify.com` o tu dominio custom en Player → Dominios
Error `EMBED_UNPUBLISHED` / `EMBED_NOT_READY`	video despublicado o procesándose	publica / espera `ready` en Treisa Flow

Códigos completos en la sección 6 del SDK.