Integrar playlists en tu sitio web

Puedes integrar una playlist de Firework en tu sitio web usando una simple etiqueta HTML. Esto te permite mostrar shoppable videos directamente en tu sitio. Sigue los pasos a continuación para comenzar y explorar las distintas opciones de diseño.

Cómo integrar una playlist

Paso n.°1

Inicia sesión en el portal de negocios de Firework.

Paso n.°2

Navega a la playlist que deseas integrar.

Paso n.°3

Haz clic en el botón «Añadir al sitio» junto a la playlist seleccionada.

Paso n.°4

Elige entre las diferentes opciones de diseño.

Paso n.°5

Haz clic en «Copiar código» para generar el HTML de integración.

Paso n.°6

Pega el código en tu página web donde deseas que aparezca la playlist.

Paso n.°7

Usa la sección de Vista previa para ver cómo se verá el diseño seleccionado antes de integrarlo.

Paso n.°8

Mostrar título – te permite añadir un título a tu widget. Una vez añadido, el título también se incluye en el código HTML.

Nota: Puedes ampliar player_captions para mostrar/ocultar el título del menú de integración. Ocultar player_captions también oculta el título del evento/vídeo en la vista del menú. Cuando player_captions = false, tanto los subtítulos como el título están ocultos.

Opciones de diseño de la playlist

Story Block

Un bloque de contenido estático que muestra un vídeo a la vez. Cuando un vídeo termina, el siguiente en la playlist se reproduce automáticamente.

• Desplazable y no flotante
• Aprende más sobre cómo personalizar un Story Block aquí — incluyendo opciones de fondo y ajustes de diseño.
• Para establecer un fondo transparente, añade una línea de código adicional a tu integración.

Reproductor flotante

Un pequeño reproductor de vídeo persistente que flota en la esquina de la pantalla mientras los usuarios se desplazan.

• Normalmente se coloca en el encabezado o cuerpo del sitio
• Compatible con el modo Picture-in-Picture para reproducción continua
• Ideal para mantener el contenido de vídeo visible sin interrumpir la experiencia de navegación

Cuadrícula

Muestra los vídeos en una disposición de cuadrícula. Los usuarios pueden hacer clic en cualquier vídeo para expandirlo en un reproductor más grande. El reproductor flota en la esquina de la pantalla cuando se minimiza.

• Desplázate a izquierda o derecha por la playlist en la vista expandida
• Elige la posición flotante (ej.: bottom-right)

Carrusel

Los vídeos fijos se desplazan de izquierda a derecha. Al seleccionar un vídeo se agrandará el reproductor. Cuando se minimiza, el reproductor flota hacia una esquina de la pantalla.

• Ajusta el tamaño con size="small" o size="medium"
• Seleccionar un vídeo activa una vista superpuesta
• Ideal para integraciones en página de inicio o páginas de categoría de productos

Carrusel de tamaño pequeño y mediano

Puedes ajustar el tamaño del carrusel a pequeño o mediano incorporando size="small" o size="medium" directamente en el código HTML.

<script async type="text/javascript" src="//asset.fwcdn3.com/js/embed-feed.js"></script>
<fw-embed-feed
channel="firework_depot"
playlist="oe8bX5"
mode="row"
open_in="default"
max_videos="0"
placement="middle"
size ="small"
player_placement="bottom-right"
></fw-embed-feed>

Soporte CTA ampliado

Al usar el diseño Carrusel o Cuadrícula con una interacción de botón, aparece un CTA ampliado sobre el póster del vídeo durante la reproducción automática, para impulsar el engagement y los clics. Enlace

Hero Unit

Un diseño audaz de pantalla completa usado principalmente para contenido de livestream. Coloca un Story Block a la izquierda y texto interactivo y CTAs a la derecha.

• Diseño de alto impacto para anuncios o campañas
• Ve cómo activar un Hero Unit aquí

Player Deck

Diseñado para el rendimiento y la conversión — este diseño muestra todos los vídeos de forma destacada y dirige rápidamente a los usuarios a las PDPs (Páginas de detalle del producto).

• Ideal para experiencias shoppable
• Integra el nuevo Player Deck en tu sitio web

Reproductor horizontal

Activa las visualizaciones horizontales. Permite 1 vídeo en un reproductor de vídeo horizontal como unidad hero o vídeo de ancho completo.

Carrusel horizontal

Este diseño muestra varios vídeos horizontales dispuestos en paralelo para facilitar la visualización. Ofrece una experiencia visual en pantalla ancha.

Carrusel dinámico

Un enfoque innovador para presentar una playlist en carrusel, este diseño permite mostrar tarjetas con las que se puede interactuar. Cada vídeo se muestra como un póster estático con opciones clicables.

Inserción de Stories circulares

Un diseño circular estilo Instagram Stories, ideal para el storytelling visual. Disponible en el CMS y la aplicación Shopify Embed.

Características principales:

• Miniaturas circulares con animación de pulso opcional.
• Soporte de reproducción automática: habilitar o deshabilitar la reproducción inicial (autoplay=true/false).
• Personalización de la animación de pulso:
  • Deshabilitar con pulse_animation=false
  • Personalizar color mediante CSS: --fw-thumbnail-pulse-animation-color
• Tamaños de miniatura: small, medium o large
• El espaciado se ajusta dinámicamente según el tamaño para evitar superposiciones.

Nota de accesibilidad: Los usuarios con «Reducir movimiento» habilitado en su dispositivo no verán la animación de pulso, aunque el espaciado se mantendrá intacto.

Inserción de Stories verticales

Un diseño apilado verticalmente con miniaturas rectangulares. La funcionalidad es idéntica a la inserción de Stories circulares, con la única diferencia de la orientación vertical y las miniaturas rectangulares.