Widgets

1. Widget intégré via <iframe>

Les services comme YouTube ou Google Maps fournissent souvent un code <iframe> prêt à coller.

Exemple : vidéo YouTube

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    allowfullscreen>
</iframe>

2. Widget intégré via un script externe

Certains widgets se chargent automatiquement grâce à un script fourni par le service.

Exemple : bouton de partage Twitter

<a href="https://twitter.com/intent/tweet?text=Bonjour" class="twitter-share-button">
    Tweet
</a>

<script async src="https://platform.twitter.com/widgets.js"></script>

3. Widget intégré via un conteneur HTML + JavaScript

Certains widgets nécessitent un conteneur HTML dans lequel un script va injecter le contenu.

Exemple : widget météo (fictif)

<div id="meteo-widget"></div>

<script src="https://exemple.com/widget-meteo.js"></script>
<script>
    MeteoWidget.init({
        container: "#meteo-widget",
        city: "Bruxelles",
        theme: "light"
    });
</script>

Résumé

• <iframe> : simple, isolé, idéal pour vidéos, cartes, formulaires.
• Script externe : le widget se génère automatiquement (boutons, chatbots…).
• HTML + JS : permet des widgets configurables (météo, calendrier…).

Comment trouver des widgets à intégrer dans une page web

Voici la méthode complète pour trouver facilement des widgets adaptés à ton site ou à ton projet.

1) Identifier le type de widget dont tu as besoin

Avant de chercher, définis ce que tu veux intégrer :

• vidéo
• carte
• calendrier
• chatbot
• formulaire
• fil d’actualité
• météo, horloge, compteur…

2) Chercher “widget + service” sur Google

Exemples de recherches efficaces :

• “widget météo embed”
• “widget calendrier HTML”
• “Google Maps embed code”
• “Twitter share button code”
• “chatbot widget javascript”

Les bons widgets viennent souvent de :

• plateformes officielles (Google, YouTube, Twitter…)
• services spécialisés (Calendly, Disqus, Tockify…)

3) Vérifier le mode d’intégration proposé

Un widget fiable propose généralement :

✔️ Code <iframe>

Le plus simple à intégrer.

✔️ Script externe <script src=\"...\">

Le widget se génère automatiquement.

✔️ Conteneur HTML + JavaScript

Permet des widgets configurables.

4) Vérifier la fiabilité du service

• site connu
• documentation claire
• widget maintenu
• gratuit ou freemium
• pas trop intrusif en données

5) Tester le widget dans une page HTML simple

Si ça fonctionne ici, ça fonctionnera dans ton vrai site.

Résumé rapide

• Définir le type de widget
• Rechercher “widget + nom du service”
• Choisir iframe / script / conteneur
• Vérifier la fiabilité
• Tester dans une page simple