Intégrer des playlists sur votre site web

Vous pouvez intégrer une playlist Firework sur votre site web à l'aide d'une simple balise HTML. Cela vous permet de présenter des shoppable videos directement sur votre site. Suivez les étapes ci-dessous pour commencer et explorer les différentes options de mise en page.

Comment intégrer une playlist

Étape n°1

Connectez-vous au portail Firework Business.

Étape n°2

Naviguez vers la playlist que vous souhaitez intégrer.

Étape n°3

Cliquez sur le bouton « Ajouter au site » à côté de la playlist sélectionnée.

Étape n°4

Choisissez parmi les différentes options de mise en page.

Étape n°5

Cliquez sur « Copier le code » pour générer le HTML d'intégration.

Étape n°6

Collez le code dans votre page web où vous souhaitez que la playlist apparaïsse.

Étape n°7

Utilisez la section Aperçu pour voir comment votre mise en page sélectionnée apparaîtra avant l'intégration.

Étape n°8

Afficher le titre – vous permet d'ajouter un titre à votre widget. Une fois ajouté, le titre est également inclus dans le code HTML.

Remarque : Vous pouvez étendre player_captions pour afficher/masquer le titre du menu d'intégration. Masquer player_captions masque également le titre de l'événement/vidéo dans la vue du menu. Lorsque player_captions = false, les sous-titres et le titre sont tous deux masqués.

Options de mise en page de la playlist

Story Block

Un bloc de contenu statique qui affiche une vidéo à la fois. Lorsqu'une vidéo se termine, la suivante dans la playlist se lance automatiquement.

• Défilable et non flottant
• En savoir plus sur la personnalisation d'un Story Block ici — y compris les options d'arrière-plan et les ajustements de mise en page.
• Pour définir un arrière-plan transparent, ajoutez une ligne de code supplémentaire à votre intégration.

Lecteur flottant

Un petit lecteur vidéo persistant qui flotte dans le coin de l'écran lorsque les utilisateurs font défiler.

• Généralement placé dans l'en-tête ou le corps du site
• Prend en charge le mode Picture-in-Picture pour une lecture continue
• Idéal pour maintenir le contenu vidéo visible sans perturber l'expérience de navigation

Grille

Affiche les vidéos dans une mise en page en grille. Les utilisateurs peuvent cliquer sur n'importe quelle vidéo pour l'agrandir dans un lecteur plus grand. Le lecteur flottera dans le coin de l'écran lorsqu'il est réduit.

• Faites défiler à gauche ou à droite dans la playlist dans la vue agrandie
• Choisissez la position flottante (ex. : bottom-right)

Carrousel

Les vidéos fixes défilent de gauche à droite. La sélection d'une vidéo agrandit le lecteur. Lorsqu'il est réduit, le lecteur flotte vers un coin de l'écran.

• Ajustez la taille avec size="small" ou size="medium"
• La sélection d'une vidéo déclenche une vue en overlay
• Idéal pour les intégrations en page d'accueil ou les pages de catégories de produits

Carrousel de taille petite et moyenne

Vous pouvez ajuster la taille du carrousel en petite ou moyenne en incorporant size="small" ou size="medium" directement dans le code 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>

Support CTA agrandi

Lors de l'utilisation du layout Carrousel ou Grille avec une interaction de bouton, un CTA agrandi apparaît sur le poster de la vidéo pendant la lecture automatique — pour stimuler l'engagement et les clics. Lien

Hero Unit

Une mise en page plein écran percutante utilisée principalement pour le contenu de livestream. Elle place un Story Block à gauche et du texte interactif et des CTA à droite.

• Design à fort impact pour les annonces ou campagnes
• Voir comment activer un Hero Unit ici

Player Deck

Conçu pour la performance et la conversion — cette mise en page affiche toutes les vidéos de manière prominéente et dirige rapidement les utilisateurs vers les PDPs (Pages de détail produit).

• Idéal pour les expériences shoppable
• Nouveau Player Deck à intégrer sur votre site web

Lecteur horizontal

Activez les affichages horizontaux. Permettez 1 vidéo dans un lecteur vidéo horizontal comme unité hero ou vidéo pleine largeur.

Carrousel horizontal

Cette mise en page affiche plusieurs vidéos horizontales côte à côte pour une visualisation facile. Offre une expérience visuelle en grand format.

Carrousel dynamique

Une approche innovante pour présenter une playlist en carrousel, ce layout permet l'affichage de cartes interactives. Chaque vidéo est présentée comme un poster statique offrant des options cliquables.

Intégration de Stories circulaires

Une mise en page circulaire style Instagram Stories, idéale pour le storytelling visuel. Disponible dans le CMS et l'application Shopify Embed.

Fonctionnalités clés :

• Miniatures circulaires avec animation de pulsation optionnelle.
• Support de lecture automatique : activer ou désactiver la lecture initiale (autoplay=true/false).
• Personnalisation de l'animation de pulsation :
  • Désactiver avec pulse_animation=false
  • Personnaliser la couleur via CSS : --fw-thumbnail-pulse-animation-color
• Tailles de miniatures : small, medium ou large
• L'espacement s'ajuste dynamiquement selon la taille pour éviter les chevauchements.

Note d'accessibilité : Les utilisateurs ayant activé « Réduire les animations » sur leur appareil ne verront pas l'animation de pulsation, mais l'espacement restera intact.

Intégration de Stories verticales

Une mise en page empilée verticalement avec des miniatures rectangulaires. La fonctionnalité est identique à l'intégration de Stories circulaires, les seules différences étant l'orientation verticale et les miniatures rectangulaires.