Le saviez-vous ? En 2025, 62 % des Américains déclarent détenir des actions — un taux qui se maintient depuis 2023, selon Gallup. Cela représente un large public qui se soucie de l’endroit où se situent les marchés.
Vous souhaitez des chiffres de marché en direct sur votre site — une liste de surveillance sur un blog financier, les cours de crypto sur une page de projet, quelques tickers en-tête — et les solutions habituelles restent insuffisantes. Les embeds gratuits des grands portails financiers sont pré-marqués et difficiles à personnaliser ; les iframes copiées-collées dégradent votre mise en page, et créer votre propre solution implique de gérer une API et une bibliothèque de graphiques.
L’option la plus simple est le widget Elfsight Stocks, un outil sans code qui affiche les actions, les paires de devises et les crypto-monnaies sous forme de ticker défilant, de cartes, d’un tableau ou d’une liste. Les valeurs se mettent à jour automatiquement sans rechargement de page, l’apparence est personnalisable et l’intégration fonctionne sur n’importe quel site qui accepte un bloc HTML personnalisé.
- La solution sans code la plus rapide pour intégrer un ticker boursier
- Comment les méthodes disponibles se comparent en termes d’effort, de contrôle et de coût
- Lequel des cinq agencements convient à votre site ?
- Conseils d’installation et d’optimisation qui vont au-delà de l’évidence
Meilleures méthodes pour afficher un ticker d’actions sur votre site
Si vous voulez simplement le mettre en ligne sans les raisons derrière chaque choix, ces quatre étapes vous y amènent.
- Ouvrez l’Éditeur de widget d’Actions et choisissez un modèle.
- Ajoutez les éléments que vous souhaitez afficher.
- Cliquez sur “Ajouter au site gratuitement” pour générer votre code d’intégration.
- Collez le code dans un bloc HTML personnalisé sur votre site et publiez-le.
Construisez votre ticker boursier dans l’éditeur interactif ci-dessous ↓
Vous pouvez afficher un catalogue trié de plus de 100 actifs répartis en trois catégories : Actions, Devises et Crypto. Vous les ajoutez depuis une liste consultable et vous pouvez mélanger les types dans un seul widget — par exemple, quelques actions aux côtés de Bitcoin et d’une paire de devises. Le catalogue n’inclut pas tous les symboles de toutes les bourses, alors recherchez les tickers spécifiques dont vous avez besoin avant de bâtir votre liste de surveillance autour d’eux.
Avant de vous engager sur une seule option, voyez comment les choix réalistes se comparent — car la meilleure configuration de ticker dépend entièrement du niveau de contrôle et de maintenance que vous êtes prêt à assurer.
| Méthode | Difficulté | Personnalisation | Mises à jour automatiques | Coût |
|---|---|---|---|---|
| Widget Stocks d’Elfsight | Sans code | Élevée (mise en page, couleurs, polices, CSS) | Oui | Plan gratuit / offres payantes |
| Widget intégrable provenant d’un portail de données financières | Copier-coller | Bas (modèles du fournisseur) | Oui | Généralement gratuit |
| Iframe manuel / API de données de marché | Développeur | Complet (à construire vous-même) | Tout dépend de votre code | API gratuite et payante |
Le widget Elfsight s’adresse à tous ceux qui veulent maîtriser le design sans toucher au code. Un widget gratuit et prêt à être intégré depuis un portail de données financières est l’option la plus rapide, à condition d’accepter le branding et les limites de style du fournisseur.
Disposition et placement : où intégrer un ticker de cotations
Choisir une mise en page n’est pas vraiment une question de design — c’est une question de placement stratégique. L’emplacement du ticker boursier sur votre site détermine laquelle des cinq mises en page fonctionnera réellement, il vaut donc mieux le décider dès le départ.
Ajustez la mise en page à son emplacement
Chaque mise en page a son emplacement naturel. Réfléchissez d’abord à l’endroit sur la page, avant de penser au style.
| Disposition | Meilleur emplacement | Pourquoi il convient |
|---|---|---|
| Ticker (mode Topbar) | Bannière globale en haut de chaque page | Une bande constante de « pulsation du marché », comme le fil d’actualités d’un site d’information. |
| Ticker (Mode en ligne) | Dans un article ou une section | Une ligne défilante qui s’intègre au contenu plutôt que d’être épinglée en haut |
| Grille de cartes / Empilement de cartes | Bloc en vedette sur la page d’accueil ou un article | Des cartes plus grandes avec des mini-graphes qui attirent l’œil; les balayages s’enchaînent une à une sur les écrans étroits |
| Tableau | Une page dédiée « Marchés » | Colonnes triables et un champ Volume pour une comparaison côte à côte |
| Liste | Une barre latérale ou colonne étroite | Lignes verticales compactes qui s’adaptent à une largeur de 300–500 px |
Deux remarques pratiques. Premièrement, tout ce qui est au‑dessus de l’écran concurrence votre message principal — un ticker en barre supérieure sur une page d’atterrissage peut détourner l’attention de votre appel à l’action, réservez-le donc pour du contenu où les données de marché sont l’enjeu. Deuxièmement, les mises en page Ticker et Liste gèrent mieux les petites largeurs mobiles; les grilles et tableaux multi‑colonnes se réorganisent sur les écrans plus larges, mais testez-les sur un téléphone avant de publier.
Est-ce le bon outil pour votre site ?
Il vaut mieux être franc sur l’adéquation : le widget fait bien certaines choses et d’autres, pas du tout.
Idéal pour : une liste de surveillance soigneusement sélectionnée, le contexte du marché sur un blog financier, les cours des cryptomonnaies sur le site d’un projet, les paires de forex sur un site de voyage ou de transfert d’argent, ou un élément de crédibilité montrant que vous êtes à jour.
Non conçu pour : un tableau de bord de trading, un outil de décision en temps réel ou un terminal de fondamentaux et de filtrage.
Les cotations sont mises à jour régulièrement mais ne sont pas garanties en temps réel ; le catalogue d’actifs est une sélection d’une centaine de titres (100+) plutôt que tous les symboles sur toutes les bourses, et les champs de données se limitent au prix, au changement, au volume et à un mini graphique — pas de capitalisation boursière, de P/E ou de données sur les résultats.
Configurer votre widget de cotations depuis zéro
Une fois le placement défini, voici le parcours complet — le même déroulé, que vous visiez WordPress, Shopify ou un site web codé sur mesure.
Étape 1 : Choisissez un modèle de démarrage
Ouvrez l’éditeur et vous arriverez sur une galerie de modèles — plus de 20 points de départ prêts à l’emploi. Commencez par choisir celui qui se rapproche le plus de votre objectif final, afin d’être en mode ajustement plutôt que de tout construire à partir de zéro.
Options populaires
- Stocks Light Theme / Stock Dark Theme — des points de départ neutres qui s’adaptent à la plupart des sites web.
- Ticker des actions tech américaines / Ticker Tape — bandes déroulantes préconstruites pour une bannière d’en-tête.
- Principales cryptomonnaies — grille dédiée à la crypto si c’est votre audience.
Les modèles définissent uniquement vos paramètres par défaut — chaque couleur, mise en page et élément est modifiable ensuite, alors ne réfléchissez pas trop à ce choix. Cliquez sur “Continuer avec ce modèle” pour passer à l’étape suivante.
Étape 2 : Ajoutez vos actifs
Ensuite, ouvrez l’onglet Actifs. C’est ici que vous constituez votre liste de surveillance. Cliquez sur Ajouter un actif pour ouvrir le panneau de recherche, où vous pouvez filtrer par Tous, Actions, Forex ou Crypto et parcourir le catalogue par ordre alphabétique.
Vous pouvez mélanger librement les types d’actifs dans un seul widget — quelques actions technologiques aux côtés de Bitcoin et d’une paire de devises, c’est tout à fait possible.
Étape 3 : Choisissez votre mise en page
Passez ensuite à l’onglet Layout et choisissez comment les éléments sont disposés. C’est l’étape la plus longue — prenez votre temps, car la mise en page détermine tout ce que le widget affiche sur la page.
Cinq mises en page disponibles
- Grille de cartes — une grille à plusieurs colonnes de cartes d’actifs avec prix, variation et un mini graphique.
- Pile de cartes — une carte à la fois dans un carrousel glissant avec des points de pagination.
- Ticker — un bandeau défilant, en mode d’affichage Inline ou Topbar et avec un curseur de vitesse de défilement.
- Tableau — colonnes triables, dont une colonne Volume, idéal pour une page dédiée aux marchés.
- Liste — rangées verticales compactes adaptées à une barre latérale
Si vous n’êtes pas sûr, la mise en page Ticker convient à environ 80 % des en-têtes de site — elle est compacte, attire l’œil par le mouvement et se dégrade gracieusement sur mobile. Utilisez le mode Tableau uniquement lorsque l’objectif est la comparaison, car il nécessite de l’espace horizontal pour respirer.
Étape 4 : Définir vos options d’affichage
Une fois la mise en page choisie, affinez ce que chaque actif affiche. Les contrôles communs — Afficher l’icône d’actif, Afficher le mini graphique et Format du changement de prix (Valeur, Pourcentage, ou les deux) — apparaissent pour chaque mise en page. La mise en page Ticker ajoute un curseur de vitesse de défilement et l’option Barre supérieure ; la mise en page Tableau permet de basculer des colonnes individuelles.
Colonnes du tableau
- Prix — la cotation actuelle.
- Variation (Absolu) — le mouvement en dollars.
- Variation (%) — La variation en pourcentage.
- Volume — le volume des échanges, le champ de données en plus au-delà du prix et de la variation.
- Mini Chart — le mini graphique en ligne.
Voici l’ensemble complet des champs de données proposés par le widget. Il n’inclut pas la capitalisation boursière, le ratio P/E ni la plage du jour — si vous prévoyiez d’afficher les fondamentaux, c’est le moment d’ajuster vos attentes.
Étape 5 : Styliser le thème
Ouvrez l’onglet Thème et cliquez sur Personnaliser le thème pour harmoniser le widget avec votre identité visuelle.
Éléments personnalisables
- Couleurs de fond et de trait
- Augmenter/diminuer les paramètres de prix
- Taille et couleur du titre du widget
- Arrondi des coins
- Police et couleur du texte
Des champs CSS personnalisé et JS personnalisé sont également disponibles, si vous êtes à l’aise avec le code et que vous souhaitez un contrôle plus précis.
Étape 6 : Ajuster la langue et les paramètres
Dans l’onglet Paramètres, vous pouvez définir l’Langue de l’interface, utiliser Éditer les textes pour reformuler les chaînes de l’interface, et ouvrir les éditeurs CSS personnalisés ou JS personnalisés.
Étape 7 : Obtenez le code et ajoutez-le à votre site
Lorsque le widget est prêt, cliquez sur « Ajouter au site gratuitement » pour générer votre code d’installation, puis collez cet extrait où vous souhaitez que le ticker apparaisse. Le code fonctionne sur n’importe quelle plateforme qui accepte un bloc HTML personnalisé, y compris WordPress, Shopify, Wix, Squarespace, et Webflow. Les étapes d’installation varient légèrement selon la plateforme — suivez les liens pour le tutoriel CMS spécifique.
Sous WordPress, la destination la plus courante : ouvrez votre page dans l’éditeur de blocs, ajoutez un bloc HTML personnalisé, collez le code et publiez. Et voilà : l’installation est terminée.
Vérification rapide du dépannage
- Le widget n’apparaît pas : Vérifiez que le code a été inséré dans un bloc HTML personnalisé, et non dans un bloc Paragraphe ou Texte standard.
- N’apparaît qu’après actualisation : Sur les thèmes avec navigation AJAX, le script de la plateforme peut devoir se charger dans la page <head>.
- L’ancienne version s’affiche encore : Videz le cache de votre plugin de mise en cache ou du CDN après l’avoir collé.
- Barres de défilement à l’intérieur du widget : Le conteneur d’intégration est trop étroit — agrandissez le bloc HTML jusqu’à ce qu’elles disparaissent.
Autres façons d’ajouter un ticker boursier à votre site
Ce n’est pas la seule solution ; selon vos besoins, une autre méthode pourrait mieux vous convenir.
Widget intégrable issu d’un portail de données financières
Plusieurs sites de données de marché proposent des widgets de cours gratuits que vous pouvez copier-coller et déposer sur une page.
- Ouvrez le constructeur de widgets du portail de données et sélectionnez un widget ticker ou une liste de symboles.
- Sélectionnez les symboles et une palette de couleurs de base.
- Copiez l’extrait d’intégration généré.
- Collez-le dans un bloc HTML personnalisé sur votre page.
Iframe manuel ou API de données de marché
Si vous disposez de ressources de développement, vous pouvez créer votre propre ticker. Certaines personnes recherchent des codes de ticker gratuits pour une utilisation sur site et les assemblent à partir d’une API de données de marché et d’une bibliothèque de graphiques.
- Inscrivez-vous à une API de données de marché et obtenez une clé API.
- Écrivez le code pour récupérer les cotations et gérer l’intervalle de rafraîchissement.
- Affichez les valeurs avec une bibliothèque de graphiques ou votre propre balisage.
- Intégrez le résultat via un iframe ou script en ligne.
Conseils d’optimisation pour votre ticker boursier
Votre widget est opérationnel — ce sont ces ajustements qui le distinguent d’un simple widget qui tourne et de celui qui mérite sa place sur la page.
- Gardez la liste de surveillance concise. Cinq à dix actifs pertinents se lisent bien mieux qu’un mur de cinquante. Une liste ciblée témoigne d’un jugement éditorial; une liste exhaustive donne l’impression que vous avez ajouté chaque symbole possible.
- Ajoutez une mention de données retardées à proximité. Une phrase courte telle que « Les cotations peuvent être retardées et ne sont fournies qu’à titre informatif » vous protège en tant qu’éditeur et fixe des attentes honnêtes, car le widget n’est pas un flux de trading en temps réel.
- Vérifiez vos actifs périodiquement. Les tickers peuvent être renommés ou retirés — surtout les cryptos — alors jetez un coup d’œil au widget de temps en temps pour confirmer qu’il affiche toujours ce que vous aviez prévu.
- Ajustez la largeur au conteneur. Un ticker de 1200 px doit être placé dans une bande pleine largeur ; le placer dans une barre latérale provoquera un débordement ou des barres de défilement. Dimensionnez-le selon l’espace qu’il occupe.
Foire aux questions
Puis-je ajouter un ticker boursier à n’importe quel constructeur de sites ?
Le ticker boursier s’affichera-t-il correctement sur mobile ?
À quel point les données boursières sont-elles actuelles ?
Quels actifs peut afficher le widget de cotations pour site web ?
Puis-je personnaliser l’apparence du ticker boursier ?
Conclusion
Ajouter un ticker boursier à votre site se résume à trois choix : où il s’affiche, lequel des cinq agencements convient à cet emplacement, et quels actifs intègrent votre liste de surveillance. Une fois ces éléments définis, l’intégration se fait en flux sans code : choisissez un modèle, ajoutez vos actifs, personnalisez le style et collez un seul extrait de code. Le widget couvre les actions, le forex et les crypto-monnaies via un catalogue soigneusement sélectionné, se met à jour automatiquement et reste dans des limites claires : un contexte de marché pour la crédibilité, pas un terminal de trading.
Si vous avez planifié votre emplacement et vos éléments, la prochaine étape est d’ouvrir l’éditeur du Stocks widget et de le construire — ou parcourez la liste complète des fonctionnalités en premier lieu pour confirmer que cela convient.
