Intégrer un podcast Podhoc sur votre site — Documentation du widget iframe
Intégrez n’importe quel podcast public Podhoc sur votre blog, votre rédaction ou votre page de cours avec une seule iframe. 50 Ko gzip, lazy-loaded, les lectures ne consomment pas vos crédits. Gratuit pour vos lecteurs, sans compte.
Intégrez votre podcast Podhoc sur n’importe quel site en quelques secondes
Vous publiez un podcast dans Podhoc. Vous le voulez sur votre blog, dans un module de cours, dans un article de votre rédaction ou dans le wiki de votre équipe. L’embed Podhoc tient en une seule iframe — vous la collez, votre lecteur appuie sur play, et l’audio diffuse depuis podhoc.com sans quitter votre page.
Les permis d’intégration sont réservés à l’auteur. Seul l’auteur du podcast peut générer un snippet d’intégration pour ce podcast — le bouton Embed est contrôlé côté serveur contre l’owner_id du podcast et masqué sur les fiches Découvrir des podcasts dont vous n’êtes pas l’auteur. Cela garde l’attribution propre et donne le contrôle des retraits au véritable auteur.
Aucun compte requis côté auditeur. Les lecteurs anonymes entendent un aperçu gratuit de 30 secondes sans créer de compte ; appuyer sur “Écouter sur Podhoc” ouvre la page source où ils peuvent se connecter pour écouter l’épisode complet (les crédits sont appliqués selon la matrice de crédits du Découvrir). Les lectures d’aperçu sont absorbées par Podhoc — elles ne consomment pas votre solde de crédits. Le lecteur pèse 50 Ko gzip, se charge en lazy à l’entrée dans le viewport et affiche un espace “indisponible” plutôt qu’un frame cassé si vous dépubliez le podcast source.
Comment récupérer votre code embed
1. Ouvrez VOTRE podcast dans Découvrir Podhoc
Allez sur app.podhoc.com/discover et ouvrez un de vos podcasts publiés. Le bouton Embed n’apparaît que sur les podcasts dont vous êtes l’auteur, car les permis d’intégration sont liés à l’auteur ; sur les fiches Découvrir des podcasts dont vous n’êtes pas l’auteur, le bouton Embed est masqué.
2. Cliquez sur Embed et copiez l’iframe
Sur la fiche du podcast, cliquez sur Embed. Un modal affiche le HTML de l’iframe pré-rempli avec le slug canonique et l’identifiant unique du permis d’intégration. Copiez l’ensemble du fragment. L’identifiant du permis est ce que Podhoc utilise pour attribuer les lectures d’embed à votre compte et pour gérer les retraits ; ne le retirez pas du fragment.
3. Collez l’iframe dans votre site
Posez le fragment dans n’importe quel bloc HTML — un widget HTML personnalisé WordPress, une carte embed Ghost, un /embed Notion, une page MDX Docusaurus, ou de l’<iframe> brut sur un site statique. Le lecteur s’exécute depuis podhoc.com, se charge en lazy à l’entrée dans le viewport et ajoute 50 Ko gzip au poids de votre page.
Exemple : embed en live
Voici le fragment canonique, pointant vers un podcast d’exemple de Découvrir. Remplacez le slug ?podcast=example par celui de votre podcast après l’étape 2.
<iframe
src="https://app.podhoc.com/embed?podcast=example"
width="100%"
height="240"
loading="lazy"
frameborder="0"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture"
title="Lecteur Podhoc"
></iframe>
L’attribut loading="lazy" n’est pas négociable — il maintient l’embed hors du chemin réseau critique jusqu’à ce que le lecteur l’amène dans le viewport, ce qui protège votre score de page-speed.
Options de personnalisation
En v1, l’iframe est livrée visuellement figée à 100 % de largeur × 240 px de hauteur, avec la palette de marque Podhoc. Les leviers ci-dessous sont sur la feuille de route et seront documentés ici dès leur arrivée :
- À venir : width — un query param
?w=pour surcharger la largeur par défaut. - À venir : height — un query param
?h=pour les layouts compacts / étendus. - À venir : theme —
?theme=light|dark|autopour s’accorder à votre site.
En attendant, l’embed est volontairement simple — un fragment, sans réglage, identique partout.
Performance
- Taille du bundle : 50 Ko gzip pour le premier embed d’une page. Les embeds suivants sur la même page n’ajoutent que les métadonnées du podcast (~2 Ko chacun), pas l’ensemble du code lecteur.
- Lazy-loading : l’iframe pose
loading="lazy"par défaut. Le navigateur retarde la requête réseau jusqu’à ce que le lecteur fasse défiler le lecteur dans le viewport — un embed sous la ligne de flottaison coûte donc zéro octet tant qu’il n’est pas affiché. - Streaming : l’audio est servi depuis la même distribution CloudFront qu’
app.podhoc.com, avec des requêtes byte-range pour un scrubbing instantané. - Impact page-speed : dans nos audits Lighthouse internes, une page avec un embed Podhoc reste à 1 point de la même page sans embed dès que le fragment se trouve sous la ligne de flottaison.
Anti-abus — 100 lectures / jour / hôte
Pour garder le streaming public viable sans le facturer à celui qui intègre, Podhoc applique une limite douce de 100 lectures par jour et par hôte. La limite porte sur le domaine intégrant, pas sur le podcast — si vous hébergez dix embeds sur monblog.example, tout le domaine partage le budget de 100 lectures par jour.
En pratique :
- Les 100 premières lectures de la journée passent normalement.
- Au-delà, le lecteur continue de se charger et d’afficher les métadonnées du podcast, mais présente un message amical : “Limite quotidienne atteinte — réessayez demain ou ouvrez dans Podhoc”.
- Le compteur se réinitialise à minuit UTC.
Si vous avez un besoin légitime d’une limite plus haute (une rédaction très visitée, une plateforme de cours à fort trafic), écrivez-nous via la page de support — nous tenons une allowlist pour les intégrateurs de confiance.
Foire aux questions
Le bloc FAQ ci-dessous reflète la liste faqs: du front-matter de la page, que Hugo émet en données structurées pour les moteurs de recherche et les aperçus IA.
Voir aussi
- Tarifs — packs de crédits et abonnements (les lectures d’embed ne consomment pas vos crédits).
- Confidentialité — ce que nous loguons quand un lecteur appuie sur play sur un embed.
- Mentions légales — règles d’usage acceptable du widget embed.
- Découvrir — parcourez les podcasts publics et récupérez les codes embed.
Questions fréquentes
- Puis-je intégrer n'importe quel podcast Podhoc sur mon site ?
- Non — vous ne pouvez intégrer que des podcasts dont vous êtes l’auteur. Le bouton Embed est contrôlé côté serveur contre l’
owner_iddu podcast ; sur les fiches Découvrir des podcasts dont vous n’êtes pas l’auteur, le bouton Embed est masqué. Cela garde le permis d’intégration attaché à l’auteur pour les analyses, retraits et attribution de revenus. - Mon lecteur a-t-il besoin d’un compte Podhoc pour lire l’embed ?
- Non. L’embed sert la surface publique de Découvrir — les lecteurs anonymes entendent un aperçu gratuit de 30 secondes sans créer de compte. Pour écouter l’épisode complet, ils doivent appuyer sur le CTA “Écouter sur Podhoc” dans le lecteur, qui ouvre la page source où ils peuvent se connecter et où les crédits sont appliqués. L’aperçu est toujours gratuit pour l’auditeur.
- Les lectures depuis l’embed consomment-elles MES crédits ?
- Non. Les lectures d’aperçu sur votre embed sont absorbées par Podhoc — votre solde de crédits ne bouge pas, qu’un lecteur ou mille écoutent. La limite de 100 lectures/jour/hôte (plus bas) est une protection contre le hot-linking abusif, pas un quota par podcast.
- Puis-je intégrer plusieurs podcasts sur la même page ?
- Oui. Chaque iframe est indépendante — posez-en autant que vous voulez. Elles partagent le même code de lecteur léger, donc le deuxième embed et les suivants n’ajoutent que les métadonnées du podcast (~2 Ko chacun), pas l’ensemble des 50 Ko.
- Quelles analyses ai-je ?
- En v1, aucune côté embed. Les lectures sont comptées au niveau Découvrir (un tableau des tracks les plus écoutés pour l’auteur publiant est sur la feuille de route). Votre propre plateforme d’analytique (GA4, Plausible, Fathom) peut suivre les clics et la visibilité sur le conteneur de l’iframe.
- Comment retirer un embed si je change d’avis ?
- Deux options. Soit vous supprimez l’iframe de votre page — le lecteur disparaît instantanément — soit vous dépubliez le podcast depuis Découvrir Podhoc. Un podcast dépublié rend un espace “indisponible” dans les embeds déjà en place plutôt qu’une 404, pour offrir aux lecteurs un message élégant.
- L’autoplay est-il supporté ?
- Non. Les navigateurs bloquent l’autoplay sur les iframes cross-origin par défaut, et Podhoc respecte ce comportement. Les lecteurs doivent appuyer sur play. L’embed honore les autres contrôles standards : scrub, vitesse, bascule transcription.
- Quelle est la taille par défaut de l’iframe et puis-je la personnaliser ?
- Le fragment par défaut fait 100 % de largeur × 240 px de hauteur — assez fin pour les barres latérales, assez large pour les corps de billet. Largeur, hauteur et un thème à venir (clair / sombre / auto) sont sur la roadmap ; en v1, le fragment est responsive par défaut mais visuellement figé.
- Puis-je personnaliser les couleurs pour les accorder à ma marque ?
- Pas encore. Les commandes de thème (clair / sombre / auto, couleur d’accent) sont documentées dans la section “Options de personnalisation” en “À venir”. L’embed v1 utilise la palette de marque Podhoc pour garder l’attribution d’auteur claire.