Guide d'implémentation du lecteur

Notre code HTML peut être implémenté dans n'importe quel CMS capable de gérer le HTML/Javascript. Chaque type de lecteur possède des comportements et des configurations différents qui peuvent être personnalisés.

Nous avons 2 façons de personnaliser les lecteurs.

1. L'une se fait par des méthodes CSS normales et l'autre en ajoutant des attributs à l'intérieur de notre code de widget. Les méthodes CSS sont les mêmes que pour tout codage web. Pour plus d'informations sur l'application des variables CSS à notre lecteur, veuillez consulter cette page. De nombreuses variables peuvent être modifiées et elles seront mentionnées tout au long de cet article.
2. L'autre façon est d'ajouter des attributs à l'intérieur de notre code. L'une des utilisations les plus courantes est de supprimer la mention « Made In Firework » de notre lecteur visible sur le site. Pour cela, vous devrez ajouter « branding=false » à l'intérieur de notre script.

Lecteur Flottant

Le lecteur flottant est l'une des implémentations les plus simples car il ne prend pas de placement spécifique sur le site. Le code du lecteur flottant doit être placé dans le corps de la page spécifique sur laquelle vous souhaitez l'implémenter.

‍

Nous recommandons de les placer directement sur votre page de destination ou votre PDP.

FAQ du Lecteur Flottant

1. Le lecteur en bas à gauche bloque mon chat, mon coupon, etc. Puis-je déplacer son emplacement ?
   • Oui, vous le pouvez ! Vous pouvez déplacer l'emplacement en ajoutant l'attribut player_placement. Les options disponibles sont « top-left », « top-right », « bottom-right » ou « bottom-left ». Vous l'inséreriez dans notre script comme player_placement=”top-left”.
   • Si vous souhaitez être plus précis quant à l'emplacement du lecteur flottant, vous pouvez modifier les marges. Vous pouvez le faire en utilisant du code CSS.
     • --fw-player-margin
     • EX: --fw-player-margin: 16px 24px 32px 12px;
2. Le lecteur est trop grand. Puis-je le rendre plus petit ?
   1. Oui, vous le pouvez ! Vous pouvez les définir en utilisant les variables CSS ci-dessous :
      --fw-player-height
   2. --fw-player-width
3. Lorsque mes clients ferment le lecteur puis reviennent sur la page ou les pages contenant le lecteur flottant, celui-ci réapparaît. Y a-t-il un moyen pour que si un client ferme le lecteur flottant, il ne se charge plus pour lui ?
   1. Oui, nous avons la capacité de le faire. Le concept consiste à surveiller notre événement, puis à utiliser des cookies pour examiner l'événement et décider de charger ou non le lecteur. Comme cela est spécifique à différents CMS, nous vous recommandons d'informer votre Responsable Succès Client que vous souhaitez réaliser cela. Nous travaillerons avec l'équipe de développement pour le mettre en œuvre.

Bloc Story

Le bloc Story peut être réalisé de différentes manières. Le concept important à comprendre est le comportement du bloc Story. Un avantage important de l'utilisation du bloc Story est que l'utilisateur peut interagir avec l'action incluse sans passer en plein écran. Sur tous les autres types de lecteurs, l'utilisateur devra d'abord cliquer sur la vidéo, puis aura l'option actionnable (ajouter un produit au panier, cliquer sur un appel à l'action, rejoindre un livestream, etc.). L'autre avantage est que le bloc Story est optimisé pour l'expérience mobile. Pour la plupart des clients, la majorité de leur trafic web est mobile, c'est donc un facteur important lors du choix des lecteurs à utiliser.

Il existe 2 façons différentes pour un bloc Story d'apparaître sur un ordinateur de bureau. La première image est un exemple de bloc Story où le conteneur est défini sur la largeur de la page. La deuxième image est un exemple de conteneur qui occupe un emplacement spécifique sur le site.

‍

Voici à quoi ressemble le bloc Story sur mobile. Notez que les options pour les actions spécifiques sont affichées sans être en plein écran.

‍

Nous vous recommandons de les placer directement en haut de votre page d'accueil ou de vos pages de produits par catégorie.

FAQ sur le Bloc Story

1. Je n'aime pas l'espace vide sur la vue bureau. Comment puis-je supprimer cet espace supplémentaire ?
   1. Comme le montrent les exemples ci-dessus, il vous suffit de configurer un conteneur qui ne s'étend pas sur toute la largeur de la page. Vous pouvez contrôler la taille du conteneur normalement, puis insérer notre code à l'intérieur de ce conteneur.
2. J'aime le lecteur flottant mais je ne le veux pas tout de suite. Je ne le veux qu'après qu'ils aient vu le bloc Story. Est-ce possible ?
   1. Vous pouvez faire en sorte que le lecteur s'épingle à l'écran après que l'utilisateur ait fait défiler la page au-delà du lecteur. Il vous suffira d'ajouter l'attribut dans le script comme suit : dock=true
3. Je souhaite changer la couleur de fond du bloc Story sur le bureau. Comment faire ?
   1. Cela se fera en utilisant notre variable CSS. Voici la variable CSS pour changer la couleur de fond dans un bloc d'histoire.
   2. --fw-player-background
4. Je veux personnaliser la police du lecteur. Comment faire ?
   1. Cela se fera en utilisant notre variable CSS. Voici la variable CSS pour personnaliser les polices.
      --fw-font-family

Carrousel

Les unités de carrousel sont un excellent moyen de présenter différentes vidéos et de permettre aux utilisateurs de faire défiler les vidéos et de cliquer sur celle qu'ils souhaitent regarder. La principale différence entre un bloc d'histoire et un carrousel est que pour que l'utilisateur soit exposé à l'action (rejoindre un live stream, cliquer sur un produit, cliquer sur un appel à l'action, etc.), il devra d'abord cliquer sur la vidéo et passer en plein écran. L'autre point à noter est que sur mobile, l'utilisateur ne pourra voir que 1 et ⅓ vidéos. Le carrousel est également assez simple à implémenter sur les pages. Voici un exemple de ce à quoi ressemble l'unité de carrousel par défaut sur mobile et sur ordinateur.

‍

Nous vous recommandons de les placer sur votre page d'accueil ou vos pages de destination.

FAQ Carrousel

• Je veux personnaliser la police du lecteur. Comment faire ?
  1. Cela se fera en utilisant notre variable CSS. Voici la variable CSS pour personnaliser les polices.
     --fw-font-family
• Je veux personnaliser la taille et les espacements des vignettes. Est-ce possible ?
  1. Une façon de modifier la taille de la vignette est d'utiliser l'attribut dans le code size=medium (Il n'y a que 2 options : moyenne et grande. La valeur par défaut est grande.)
  2. D'autres options de personnalisation peuvent être réalisées en utilisant du code CSS. Voici un tableau des différents éléments qui peuvent être modifiés. Vous pouvez modifier la taille de la vignette, l'espacement entre les vidéos et le rayon de la bordure.
     

‍

Unité Héro

Le Hero Unit est une mise en page de lecteur plein écran conçue pour mettre en avant un événement en direct. Avec ses éléments vidéo et interactifs, la Hero Unit offre un format saisissant et immersif, idéal pour promouvoir des événements de grande envergure directement sur une page de destination ou une page d'accueil.

La Hero Unit présente un lecteur vidéo Story Block sur la gauche  et du contenu interactif sur la droite  ce qui en fait un moyen attrayant de présenter des diffusions en direct avec des appels à l'action complémentaires.

Où la placer :
Le code de la Hero Unit doit être placé dans le corps de la page où vous souhaitez que la promotion de la diffusion en direct apparaisse. Elle occupe tout l'écran et est idéalement adaptée aux pages dédiées au marketing ou à la promotion d'événements.

Pourquoi l'utiliser ?La Hero Unit est une extension naturelle de notre format Story Block éprouvé, optimisée pour la promotion d'événements. Elle combine des médias riches avec du contenu exploitable pour stimuler la participation et l'engagement.