Le widget embed
Intégrer votre chaîne PayLive, un replay ou une liste de replays directement sur votre propre site WordPress, Webflow ou HTML. Les 5 modes (automatique, live, replays, chat, programme TV), les paramètres de personnalisation, et les limites actuelles à connaître.
Étendre PayLive au-delà de votre chaîne publique
Jusqu'à présent, toute votre communication PayLive passe par votre page publique paylive.tv/@votre-slug. C'est le canal principal, et pour beaucoup de créateurs, c'est suffisant. Mais il existe un second canal, sous-exploité et pourtant puissant : l'intégration directe de votre chaîne, de vos replays ou de vos relives sur votre propre site web, via le widget embed.
Concrètement, avec quelques lignes de code à coller dans votre site WordPress, Webflow, Systeme.io ou HTML, vous pouvez afficher votre programmation PayLive, un lecteur vidéo, ou la grille complète de votre chaîne directement sur vos pages. Vos visiteurs consomment votre contenu PayLive sans jamais quitter votre site principal. C'est une technique particulièrement efficace pour les créateurs qui ont déjà une présence web établie et qui veulent ajouter PayLive comme brique de diffusion sans rediriger leur trafic vers une autre URL.
Les 5 modes du widget embed
PayLive propose cinq modes d'intégration, chacun adapté à un usage différent. Vous choisissez celui qui correspond à votre besoin, vous copiez le code correspondant, et vous le collez dans votre site. C'est tout.
Mode 1 — Channel (chaîne complète)
Le mode channel affiche votre chaîne PayLive dans son intégralité : lecteur vidéo en direct (ou replay en cours), chat actif, programmation à venir, boutons d'inscription. C'est comme si vous intégriez votre page publique paylive.tv/@votre-slug à l'intérieur d'un cadre sur votre propre site.
Quand l'utiliser : pour créer une page dédiée "Chaîne en direct" sur votre site principal, où vos visiteurs peuvent consommer tout votre contenu PayLive sans avoir besoin de changer d'URL. Typique pour les créateurs qui ont déjà un site vitrine et qui veulent y ajouter une section "Diffusions" qui pointe vers leur activité PayLive.
Mode 2 — Replay (un replay spécifique)
Le mode replay affiche uniquement un replay précis, identifié par son ID, sous la forme d'un simple lecteur vidéo intégré. Pas de chaîne autour, pas de programmation à côté : juste le replay, comme un player YouTube classique.
Quand l'utiliser : pour insérer une vidéo spécifique dans un article de blog, une page de vente, ou une page de témoignages. Typique si vous voulez illustrer un contenu de votre site avec une intervention PayLive précise, sans envoyer le visiteur vers votre chaîne complète.
Mode 3 — Replays (liste de replays)
Le mode replays affiche une grille ou une liste de plusieurs replays, sélectionnés selon vos critères (tous, par tag, par période). Le visiteur voit les miniatures, peut cliquer sur celle qui l'intéresse, et le lecteur s'ouvre en mode plein-écran dans le même widget.
Quand l'utiliser : pour créer une page "Bibliothèque" ou "Formations" sur votre site qui liste automatiquement tous vos replays PayLive disponibles. Quand vous ajoutez un nouveau replay dans votre dashboard, il apparaît automatiquement dans le widget sur votre site, sans que vous ayez à modifier quoi que ce soit. C'est parfait pour maintenir une bibliothèque vivante sans friction.
Mode 4 — Chat seul
Le mode chat affiche uniquement le fil de discussion public de votre live en cours, sans le lecteur vidéo. Utile si votre site dispose déjà de son propre player (YouTube Live, Zoom embed) et que vous souhaitez y adjoindre la capture d'emails et le chat PayLive — vous gardez la vidéo de votre côté, et vous intégrez l'engagement PayLive à côté.
Mode 5 — Programme TV
Le mode schedule affiche la grille de programmation de votre chaîne sur 7 jours glissants. Vos visiteurs voient les prochains lives, leurs titres et horaires, directement sur votre site. Idéal pour une section "Agenda" ou "Prochains lives" sur votre page d'accueil — la grille se met à jour automatiquement au fil de votre programmation dans le dashboard.
Intégrer le widget dans votre site
L'intégration se fait en deux étapes : récupérer le code embed depuis votre dashboard PayLive, et le coller dans votre site.
Étape 1 — Récupérer le code depuis PayLive
Allez dans Dashboard › Widget & API. Vous arrivez sur la page dédiée aux intégrations externes. Elle est divisée en trois sections, une pour chaque mode du widget.
Choisissez le mode qui vous convient, configurez les paramètres (slug de chaîne pour le mode channel, ID de replay pour le mode replay, filtre pour le mode replays), et le code HTML à coller apparaît dans un encadré. Un bouton "Copier" à côté du code vous permet de le copier en un clic dans votre presse-papier.
Étape 2 — Coller le code dans votre site
Le code généré est un simple bloc HTML qui ressemble à ceci :
<iframe src="https://paylive.tv/embed/channel/votre-slug"
width="100%" height="600"
frameborder="0"
allow="autoplay; fullscreen; camera; microphone">
</iframe>
Collez ce code là où vous voulez que le widget apparaisse. La méthode exacte dépend de votre plateforme :
- WordPress : dans un bloc HTML personnalisé (dans Gutenberg) ou dans un widget HTML (dans la barre latérale)
- Webflow : dans un élément Embed HTML
- Systeme.io : dans un élément HTML personnalisé de votre page
- HTML pur : n'importe où dans le body de votre page
- Notion, Carrd, Framer : dans un embed ou un bloc HTML selon la plateforme
Dès que le code est collé et que la page est publiée, le widget apparaît et commence à fonctionner immédiatement. Aucune configuration supplémentaire n'est nécessaire, pas de clé API à gérer, pas de backend à synchroniser.
Les paramètres de personnalisation
Le code embed accepte plusieurs paramètres qui permettent d'adapter l'affichage à votre site :
| Paramètre | Effet | Valeurs possibles |
|---|---|---|
| width | Largeur du widget | Pourcentage ou pixels (ex : 100% ou 800) |
| height | Hauteur du widget | Pixels (ex : 600) |
| theme | Thème visuel | dark, light, auto |
| chat | Afficher ou masquer le chat | on, off |
| autoplay | Démarrer automatiquement la lecture | true, false |
Par exemple, pour intégrer une chaîne en mode clair avec le chat caché et une hauteur fixe de 500 pixels :
<iframe src="https://paylive.tv/embed/channel/votre-slug?theme=light&chat=off"
width="100%" height="500"
frameborder="0">
</iframe>
Exemple fil rouge — Amélie et sa boutique de formations en langues
Imaginons Amélie, formatrice en langues étrangères qui vend des cours d'anglais, d'espagnol et d'italien via sa propre boutique WordPress. Elle utilise PayLive pour héberger ses contenus vidéo (lives hebdomadaires de conversation, replays de leçons thématiques), mais elle ne veut pas que ses clients quittent sa boutique pour les consommer.
Sur chaque page produit de sa boutique, Amélie intègre un widget PayLive en mode replay qui affiche un extrait de cours en aperçu. Quand un visiteur arrive sur la page "Cours d'anglais pour débutants", il voit directement dans le produit un lecteur vidéo PayLive qui joue un extrait de 3 minutes de ce cours (un replay dédié qu'Amélie a uploadé spécifiquement pour servir de teaser). Le visiteur peut juger immédiatement de la qualité pédagogique et de la voix du formateur, sans avoir à s'inscrire nulle part.
Sur sa page d'accueil, Amélie intègre un widget PayLive en mode channel qui affiche sa chaîne complète avec la programmation des prochains lives hebdomadaires. Les visiteurs voient immédiatement qu'elle est active, qu'elle anime des sessions en direct, et qu'il y a un prochain live dans 3 jours. Cette visibilité crée un sentiment de proximité et d'activité qui rassure et qui convertit.
Sur une page "Toutes nos formations", Amélie utilise le mode replays pour afficher automatiquement la grille de tous ses replays disponibles. Chaque fois qu'elle publie un nouveau cours dans son dashboard PayLive, il apparaît automatiquement sur cette page, sans qu'elle ait à mettre à jour le site WordPress manuellement. C'est un gain de temps considérable dans la gestion quotidienne de son catalogue.
Résultat pour Amélie : ses visiteurs consomment le contenu PayLive comme s'il faisait partie native de son site, le taux de conversion sur les pages produit a augmenté de 40% depuis l'intégration des aperçus vidéo, et elle n'a quasiment pas de charge de maintenance technique (le widget se met à jour tout seul quand elle ajoute des replays dans son dashboard).
Bonnes pratiques d'intégration
Le widget s'adapte automatiquement au responsive, mais testez toujours son comportement sur un vrai smartphone avant de publier. Certains thèmes WordPress mal conçus peuvent casser l'affichage du widget dans les petites largeurs. Un widget qui fonctionne parfaitement sur desktop mais qui est illisible sur mobile gâche la moitié de votre trafic.
Si vous intégrez le widget en mode channel, préférez une hauteur fixe (par exemple 600 pixels) plutôt qu'une hauteur en pourcentage. Le mode channel contient plusieurs sections (lecteur + chat + programmation) dont la hauteur totale peut varier, et une hauteur en pourcentage crée des bugs d'affichage sur certains navigateurs. Pour le mode replay qui est simplement un lecteur vidéo, une hauteur proportionnelle (aspect-ratio 16:9) fonctionne bien.
Quand vous intégrez le widget, pensez à ajouter des paramètres UTM à l'URL embed pour pouvoir tracker dans vos analytics les visiteurs qui viennent du widget vs ceux qui viennent directement de la page publique PayLive. Par exemple : paylive.tv/embed/channel/slug?utm_source=monsite&utm_medium=embed. Vous verrez ensuite dans vos statistiques combien de spectateurs arrivent via le widget, ce qui vous aide à calibrer l'importance de ce canal dans votre stratégie globale.
Les limites actuelles du widget
Pour être transparent, voici ce que le widget ne fait pas encore (et pourrait faire dans les prochaines versions) :
- Le paywall ne fonctionne pas dans le widget. Si vous intégrez un replay payant, les visiteurs qui arrivent via le widget voient un message "Ce contenu est réservé, rendez-vous sur paylive.tv" avec un lien pour basculer vers votre chaîne publique. Pour un cours premium, envoyez vos visiteurs directement sur votre page publique, le widget est adapté aux contenus gratuits ou aux teasers.
- La personnalisation avancée du thème (couleurs, polices, logo personnalisé) n'est pas encore disponible. Le widget utilise l'identité visuelle de votre chaîne PayLive telle qu'elle est configurée dans votre dashboard.
- Les événements du widget ne sont pas encore exposés en JavaScript. Vous ne pouvez pas, pour l'instant, déclencher une action sur votre site quand un visiteur démarre un replay ou pose une question dans le chat intégré.
Ces limites seront progressivement levées dans les prochaines mises à jour de PayLive. Pour l'instant, le widget reste parfaitement utilisable dans ses cinq modes principaux et couvre la grande majorité des besoins d'intégration des créateurs.
Pour aller plus loin
Vous savez maintenant comment étendre PayLive au-delà de votre page publique en l'intégrant sur votre propre site. Dans le dernier chapitre de ce guide, nous abordons les contacts et l'API : comment gérer la base de contacts que vous récupérez via les chats en mode Prénom+Email, comment l'exporter pour l'utiliser dans votre outil d'emailing externe, et comment la future API PayLive permettra d'automatiser votre chaîne depuis des outils comme Zapier ou Make.