Guía de implementación del reproductor por código
Esta guía tiene como objetivo ayudarte a implementar el tipo de reproductor, junto con preguntas frecuentes sobre los diferentes reproductores.
Nuestro código HTML puede implementarse en cualquier CMS que soporte HTML/JavaScript. Cada tipo de reproductor tiene diferentes comportamientos y configuraciones personalizables.
Hay 2 formas de personalizar los reproductores: mediante métodos CSS estándar o añadiendo atributos dentro de nuestro código de widget. Para las variables CSS, consulta esta página.
Reproductor flotante
El reproductor flotante es una de las implementaciones más fáciles porque no ocupa un lugar específico en el sitio. El código debe colocarse en el cuerpo de la página específica, o en el encabezado si deseas mostrarlo en todas las páginas.
FAQ Reproductor flotante
El reproductor en la parte inferior izquierda oculta mi chat, cupón, etc. ¿Puedo mover su posición?
¡Sí! Añade el atributo player_placement. Las opciones son «top-left», «top-right», «bottom-right» o «bottom-left». Ejemplo: player_placement="top-left".
Para mayor precisión, puedes modificar los márgenes mediante CSS.
- Ej:
--fw-player-margin: 16px 24px 32px 12px;
El reproductor es demasiado grande. ¿Puedo reducirlo?
¡Sí! Usa estas variables CSS:--fw-player-height--fw-player-width
Cuando mis clientes cierran el reproductor y vuelven a la página, vuelve a aparecer. ¿Hay alguna forma de evitarlo?
Sí, es posible. El concepto consiste en detectar nuestro evento y usar cookies para decidir si cargar el reproductor o no. Como depende del CMS, recomendamos contactar con tu Customer Success Manager.
Story Block
La ventaja clave del Story Block es que el usuario puede interactuar con las acciones sin necesidad de pantalla completa, y está optimizado para móvil.
Hay 2 formas de mostrar un Story Block en escritorio: un contenedor que ocupa todo el ancho de la página, o un contenedor en un punto específico del sitio.
Así se ve el Story Block en móvil. Las opciones de acción se muestran sin necesidad de pantalla completa.
FAQ Story Block
No me gusta el espacio vacío en la vista de escritorio. ¿Cómo eliminarlo?
Solo necesitas configurar un contenedor que no se extienda por toda la página y colocar nuestro código dentro.
¿Puedo mostrar el reproductor flotante después de que vean el Story Block?
Sí. Añade el atributo dock=true dentro del script.
¿Cómo cambiar el color de fondo del Story Block en escritorio?
Variable CSS: --fw-player-background
¿Cómo personalizar la fuente del reproductor?
Variable CSS: --fw-font-family
Carrusel
El Carrusel es una excelente manera de mostrar diferentes vídeos y permitir que los usuarios se desplacen y hagan clic en el que deseen ver. En móvil, el usuario solo verá 1 vídeo y un tercio.
FAQ Carrusel
¿Cómo personalizar la fuente del reproductor?
Variable CSS: --fw-font-family
¿Puedo personalizar el tamaño y los espacios de las miniaturas?
Usa el atributo size=medium en el código (solo 2 opciones: medium y large, siendo large el valor predeterminado). Se pueden hacer más personalizaciones mediante CSS.
