Guía de implementación del reproductor

Nuestro código HTML puede implementarse en cualquier CMS que admita HTML/Javascript. Cada tipo de reproductor tiene diferentes comportamientos y configuraciones que se pueden personalizar.

Tenemos 2 formas de personalizar los reproductores.

1. Una es a través de métodos CSS normales y la otra es añadiendo atributos dentro de nuestro código de widget. Los métodos CSS son los mismos que cualquier codificación web. Para obtener más información sobre cómo aplicar variables CSS a nuestro reproductor, consulta esta página. Hay muchas variables que se pueden cambiar y se mencionarán a lo largo de este artículo.
2. La otra forma es añadir atributos dentro de nuestro código. Uno de los usos más comunes es eliminar el mensaje “Made In Firework” de nuestro reproductor visible en el sitio. Para ello, deberás añadir “branding=false” dentro de nuestro script.

Reproductor Flotante

El reproductor flotante es una de las implementaciones más sencillas porque no ocupa una ubicación específica en el sitio. El código del reproductor flotante debe colocarse en el cuerpo de la página específica donde deseas implementarlo.

‍

Recomendamos colocarlos directamente en tu página de destino o PDP.

Preguntas Frecuentes del Reproductor Flotante

1. El reproductor en la parte inferior izquierda está bloqueando mi chat, cupón, etc. ¿Puedo cambiar la ubicación?
   • ¡Sí, puedes! Puedes cambiar la ubicación añadiendo el atributo player_placement. Las opciones disponibles son “top-left”, “top-right”, “bottom-right” o “bottom-left”. Lo colocarías dentro de nuestro script como player_placement=”top-left”.
   • Si deseas ser más específico en la ubicación del reproductor flotante, puedes utilizar el cambio de márgenes. Puedes hacerlo utilizando código CSS.
     • --fw-player-margin
     • EJ: --fw-player-margin: 16px 24px 32px 12px;
2. El reproductor es demasiado grande. ¿Puedo hacerlo más pequeño?
   1. ¡Sí, puedes! Puedes configurarlos usando las variables CSS a continuación:
      --fw-player-height
   2. --fw-player-width
3. Cuando mis clientes cierran el reproductor y luego regresan a la página o páginas con el reproductor flotante, este vuelve a aparecer. ¿Hay alguna forma de que, si un cliente cierra el reproductor flotante, este no se cargue de nuevo para ellos?
   1. Sí, tenemos la capacidad de hacer esto. El concepto es monitorear nuestro evento y luego usar cookies para revisar el evento y decidir si cargar el reproductor o no. Dado que esto es específico para diferentes CMS, recomendamos notificar a su Gerente de Éxito del Cliente que desea lograr esto. Trabajaremos con el equipo de desarrollo para implementarlo.

Bloque de Historias

El bloque de historias se puede implementar de varias maneras. El concepto importante a entender es cómo se comporta el bloque de historias. Un beneficio importante de utilizar el bloque de historias es que el usuario puede interactuar con la acción incluida sin pasar a pantalla completa. En todos los demás tipos de reproductores, el usuario tendrá que hacer clic primero en el video para luego tener la opción de acción (añadir producto al carrito, hacer clic en la llamada a la acción, unirse a la transmisión en vivo, etc.). El otro beneficio es que el bloque de historias está optimizado para la experiencia móvil. Para la mayoría de los clientes, la mayor parte de su tráfico web es móvil, por lo que este es un factor importante al decidir qué reproductores usar.

Hay 2 formas diferentes en que un bloque de historias puede verse en un escritorio. La primera imagen es un ejemplo de un bloque de historias donde el contenedor está configurado para el ancho de la página. La segunda imagen es un ejemplo de un contenedor que ocupa un lugar específico en el sitio.

‍

Así es como se ve el bloque de historias en dispositivos móviles. Observe que las opciones para las acciones específicas se muestran sin estar en pantalla completa.

‍

Recomendamos colocarlos directamente en la parte superior de su página de inicio o en las páginas de productos por categoría.

Preguntas Frecuentes sobre el Bloque de Historias

1. No me gusta el espacio vacío en la vista de escritorio. ¿Cómo puedo eliminar el espacio adicional?
   1. Como se muestra en los ejemplos anteriores, todo lo que necesita hacer es configurar un contenedor que no se extienda por toda la página. Puede controlar el tamaño del contenedor de forma normal y luego colocar nuestro código dentro de dicho contenedor.
2. Me gusta el reproductor flotante, pero no lo quiero de inmediato. Solo lo quiero después de que vean el bloque de historias. ¿Puedo hacer esto?
   1. Puede hacer que el reproductor se fije en la pantalla después de que el usuario se desplace más allá de él. Simplemente agregará el atributo dentro del script como dock=true
3. Quiero cambiar el color de fondo del bloque de historias en el escritorio. ¿Cómo lo hago?
   1. Esto se hará usando nuestra variable CSS. Aquí está la variable CSS para cambiar el color de fondo en un bloque de historia.
   2. --fw-player-background
4. Quiero personalizar la fuente del reproductor. ¿Cómo lo hago?
   1. Esto se hará usando nuestra variable CSS. Aquí está la variable CSS para personalizar las fuentes.
      --fw-font-family

Carrusel

Las unidades de carrusel son una excelente manera de mostrar diferentes videos y permitir a los usuarios desplazarse por ellos y hacer clic en el que desean ver. La diferencia clave entre un bloque de historia y un carrusel es que, para que el usuario acceda a la acción (unirse a una transmisión en vivo, hacer clic en un producto, hacer clic en una llamada a la acción, etc.), primero tendrá que hacer clic en el video y verlo en pantalla completa. Otra consideración es que en dispositivos móviles el usuario solo podrá ver 1 y ⅓ videos. El carrusel también es bastante sencillo de implementar en las páginas. Aquí hay un ejemplo de cómo se ve la unidad de carrusel predeterminada en dispositivos móviles y de escritorio.

‍

Recomendamos colocarlos en su página de inicio o en sus páginas de destino.

Preguntas frecuentes sobre el carrusel

• Quiero personalizar la fuente del reproductor. ¿Cómo lo hago?
  1. Esto se hará usando nuestra variable CSS. Aquí está la variable CSS para personalizar las fuentes.
     --fw-font-family
• Quiero personalizar el tamaño y los espacios entre las miniaturas. ¿Puedo hacerlo?
  1. Una forma de cambiar el tamaño de la miniatura es utilizando el atributo en el código size=medium (Solo hay 2 opciones: medium y large. El valor predeterminado es large.)
  2. Se pueden realizar más opciones de personalización utilizando código CSS. Aquí hay una tabla de los diferentes elementos que se pueden cambiar. Puede cambiar el tamaño de la miniatura, el espacio entre los videos y el radio del borde.
     

‍

Unidad Hero

El Hero Unit es un diseño de reproductor de pantalla completa diseñado para destacar un evento Livestream con elementos de video e interactivos. El Hero Unit ofrece un formato impactante e inmersivo, ideal para promocionar eventos de alto perfil directamente en una página de destino o de inicio.

El Hero Unit presenta un reproductor de video Story Block a la izquierda  y contenido interactivo a la derecha  lo que lo convierte en una forma atractiva de presentar Livestreams con llamadas a la acción de apoyo.

Ubicación:
El código del Hero Unit debe colocarse en el cuerpo de la página donde desea que aparezca la promoción del Livestream. Ocupa toda la pantalla y es ideal para páginas dedicadas a marketing o promoción de eventos.

¿Por qué utilizarlo?El Hero Unit es una extensión natural de nuestro probado formato Story Block, optimizado para la promoción de eventos. Combina medios enriquecidos con contenido accionable para impulsar la asistencia y la interacción.