Guide d'implémentation du lecteur par code

Notre code HTML peut être implémenté dans tout CMS capable de gérer HTML/JavaScript. Chaque type de lecteur a des comportements et des configurations différents.

Il existe 2 façons de personnaliser les lecteurs : via les méthodes CSS classiques ou en ajoutant des attributs dans notre code widget. Pour les variables CSS, consultez cette page.

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. Placez le code dans le corps de la page concernée, ou dans l'en-tête si vous souhaitez l'afficher sur toutes les pages.

FAQ Lecteur flottant

Le lecteur en bas à gauche masque mon chat, mon coupon, etc. Puis-je changer l'emplacement ?

Oui ! Ajoutez l'attribut player_placement. Les options sont « top-left », « top-right », « bottom-right » ou « bottom-left ». Par exemple : player_placement="top-left".

Pour une position plus précise, vous pouvez modifier les marges via CSS.

• Ex : --fw-player-margin: 16px 24px 32px 12px;

Le lecteur est trop grand. Puis-je le réduire ?

Oui ! Utilisez les variables CSS :
--fw-player-height
--fw-player-width

Lorsque mes clients ferment le lecteur et reviennent sur la page, il réapparaît. Est-il possible de l'empêcher ?

Oui, c'est possible. Le concept consiste à surveiller notre événement puis d'utiliser des cookies pour décider de charger ou non le lecteur. Comme cela dépend du CMS, nous vous recommandons de contacter votre Customer Success Manager.

Story Block

L'avantage clé du Story Block est que l'utilisateur peut interagir avec les actions incluses sans passer en plein écran, et qu'il est optimisé pour le mobile.

Il existe 2 façons d'afficher un Story Block sur desktop : un conteneur étendu sur toute la largeur, ou un conteneur placé à un endroit spécifique.

Voici le Story Block sur mobile. Les options d'action spécifiques sont visibles sans être en plein écran.

FAQ Story Block

Je n'aime pas l'espace vide sur desktop. Comment le supprimer ?

Il vous suffit de configurer un conteneur qui ne s'étend pas sur toute la largeur de la page, puis d'y insérer notre code.

Je veux que le lecteur s'ancre après le Story Block. Est-ce possible ?

Oui. Ajoutez l'attribut dock=true dans le script.

Comment changer la couleur de fond du Story Block sur desktop ?

Variable CSS : --fw-player-background

Comment personnaliser la police du lecteur ?

Variable CSS : --fw-font-family

Carrousel

Le Carrousel est un excellent moyen d'exposer différentes vidéos et de permettre aux utilisateurs de faire défiler et de cliquer sur celle qu'ils souhaitent regarder. Sur mobile, l'utilisateur ne verra que 1 et ⅓ vidéos.

FAQ Carrousel

Comment personnaliser la police du lecteur ?

Variable CSS : --fw-font-family

Puis-je personnaliser la taille et les espaces des miniatures ?

Utilisez l'attribut size=medium dans le code (seulement 2 options : medium et large, la valeur par défaut étant large). Des personnalisations supplémentaires sont possibles via CSS.