Widget Gratuit pour Webmasters

Widget Tableau des Taux de Change pour Votre Site Web

Créez un tableau multi-devises personnalisé pour votre site ou blog. Choisissez votre devise de base, sélectionnez les devises à afficher, activez le calculateur intégré et copiez le code HTML.

1. Langue, Devise de Base et Montant

2. Devises Croisées et Options d’Affichage

3. Apparence et Thème

Code d’Intégration HTML

Copiez et collez cet extrait de code dans votre page web.

Widget Tableau des Taux de Change : Guide d’Intégration et d’Utilisation

Affichez un tableau des taux de change en direct et personnalisable sur votre site web. Le Widget des Taux de Change suit plus de 150 devises mondiales, les métaux précieux et le Bitcoin par rapport à la devise de base de votre choix, avec drapeaux des pays, indicateurs de tendance à la hausse/baisse et calculateur multi-devises intégré en option.

1. Démarrage Rapide : Intégrer le Widget

L’intégration du tableau des taux de change est simple. Insérez le script et la balise HTML personnalisée dans le corps (<body>) de votre page web à l’endroit où vous souhaitez afficher le widget :

<!-- Charger le moteur du widget -->
<script src="https://www.forexinvestors.com/widgets/exchange-rates/widget.js"></script>

<!-- Élément Tableau des Taux de Change -->
<currency-widget 
  lang="fr" 
  base="USD" 
  cross="AUD,CAD,CHF,EUR,GBP,INR,JPY" 
  display="code" 
  calc="off" 
  amount="1" 
  theme="default" 
  border-radius="5">
</currency-widget>

Astuce de performance : Le fichier JavaScript ne doit être importé qu’une seule fois par page, même si vous intégrez plusieurs tableaux avec des devises de base différentes sur la même page.

2. Attributs de Personnalisation

Configurez la devise de base, la liste des devises croisées, le mode calculateur et le style visuel en modifiant les attributs de l’élément <currency-widget> :

Attribut Type Défaut Description
lang Chaîne (String) en Définit la langue de l’interface pour les noms de devises traduits et le formatage de la date (en, ar, fr, es, ru).
base Chaîne (String) USD Code de la devise de base de référence affiché dans l’en-tête du tableau (ISO 4217, plus BTC, XAU, XAG, XPT ; ex. : USD, EUR, GBP, SAR).
cross Chaîne (String) USD,EUR,GBP,AUD,CHF,CAD,INR Liste de codes de devises cibles séparés par des virgules à afficher dans les lignes du tableau (ex. : EUR,GBP,JPY,CAD,AUD,CHF). Tout code identique à base est automatiquement omis.
display Chaîne (String) code Définit le libellé des devises dans chaque ligne : code pour les codes ISO (ex. : EUR) ou name pour les noms complets traduits.
calc Chaîne (String) off Active ou désactive le calculateur interactif intégré (on ou off). Lorsque on est activé, les cellules de taux deviennent des champs modifiables.
amount Nombre (Number) 1 Montant initial de la devise de base utilisé pour multiplier tous les taux affichés (tout nombre positif, ex. : 1, 10, 100).
theme Chaîne (String) default Sélectionne la palette de couleurs : default, blue, green, yellow, red, ocean, purple, teal, dark, rose ou custom.
border-radius Nombre (Number) 5 Rayon des coins en pixels pour le conteneur du widget (entier de 0 à 20 dans le configurateur, ex. : 0, 5, 12).

Attributs de Couleurs du Thème Personnalisé

Lorsque theme="custom" est défini, vous pouvez personnaliser chaque couleur du widget avec des codes hexadécimaux à 6 caractères (sans le préfixe #) :

Attribut Défaut Description
bg-color F6F6F6 Couleur d’arrière-plan du conteneur du widget et des lignes impaires du tableau.
border-color BCBCBC Couleur de bordure du conteneur et des champs modifiables du calculateur.
text-color 222222 Couleur principale du texte pour les libellés de devises, les taux et l’horodatage.
input-bg-color FFFFFF Couleur d’arrière-plan des lignes paires du tableau et des champs du calculateur.
bg-color-button 535353 Couleur d’arrière-plan des boutons d’action du pied de page (FI et +).
button-border-color 2E2E2E Couleur de bordure des boutons d’action du pied de page.
button-hover-color 8A8A8A Couleur d’arrière-plan de l’en-tête du tableau (<th>), du survol des lignes et du survol des boutons.

3. Fonctionnalités pour l’Utilisateur Final

Les visiteurs consultant le widget des taux de change sur votre site bénéficient des fonctionnalités intégrées suivantes :

  • Tableau multi-devises personnalisable : Suivez les taux de change en direct pour toute combinaison de plus de 150 devises mondiales, métaux précieux (XAU, XAG, XPT) et Bitcoin (BTC) par rapport à votre devise de base.
  • Indicateurs visuels de hausse et de baisse : Les taux indiquent automatiquement la variation quotidienne par rapport à la clôture précédente — en vert en cas de hausse et en rouge en cas de baisse.
  • Calculateur interactif multi-lignes (calc="on") : Lorsqu’il est activé, les visiteurs peuvent saisir un montant dans l’en-tête de la devise de base ou dans n’importe quelle ligne pour recalculer simultanément toutes les autres devises du tableau.
  • Affichage par code ou nom complet avec drapeaux : Choisissez des codes ISO compacts (EUR, GBP) pour les colonnes étroites ou les noms complets traduits, accompagnés des drapeaux et d’infobulles au survol.
  • Encapsulation Shadow DOM et contraste automatique : Rendu dans un Shadow DOM isolé afin que les styles de tableaux de votre site n’interfèrent jamais avec le widget, avec calcul automatique du contraste pour les en-têtes et boutons.
  • Données de marché horodatées : Affiche la date et l’heure de la dernière synchronisation des taux dans le pied de page, ainsi que des liens rapides vers la source des données (FI) et le configurateur (+).

4. Instructions d’Intégration CMS

WordPress / Gutenberg & Elementor

  1. Ajoutez un bloc HTML personnalisé à votre article, page ou barre latérale.
  2. Collez le script de chargement et la balise <currency-widget> générés ci-dessus.
  3. Mettez à jour ou publiez votre page.

Webflow, Wix & Shopify

  1. Insérez un élément Intégration / Code personnalisé (Embed / Custom Code) dans votre mise en page.
  2. Collez l’extrait de code d’intégration du widget.
  3. Assurez-vous que le conteneur parent conserve une largeur minimale de 240px à 340px (utilisez display="code" pour les colonnes étroites).

5. Foire Aux Questions (FAQ)

À quelle fréquence les taux de change sont-ils mis à jour dans le tableau ?

Les taux de change sont actualisés toutes les 5 minutes à partir des flux du marché des changes en direct. L’horodatage affiché au bas du widget indique l’heure exacte de la dernière mise à jour.

Que signifient les couleurs verte et rouge sur les taux ?

Le vert indique que le taux de change a augmenté par rapport au taux quotidien précédent, tandis que le rouge indique qu’il a baissé. Lorsque calc="on" est actif, les champs de saisie utilisent des arrière-plans vert tendre et rouge tendre pour préserver la lisibilité.

Puis-je placer plusieurs tableaux de taux de change sur la même page ?

Oui. Vous pouvez ajouter plusieurs éléments <currency-widget> avec des devises de base, des listes de devises ou des thèmes différents. La balise externe <script> ne doit être incluse qu’une seule fois par page.

Quelle est la différence entre <currency-widget> et <currency-converter> ?

<currency-widget> (chargé depuis /widgets/exchange-rates/widget.js) affiche un tableau multi-lignes de taux de change pour une devise de base, tandis que <currency-converter> affiche un convertisseur à deux devises avec menus déroulants.

Le widget nécessite-t-il une clé API ou un attribut data-endpoint ?

Aucune clé API n’est requise et vous n’avez pas besoin de spécifier d’attribut data-endpoint : le widget déduit automatiquement l’URL de ses données à partir de l’URL du script widget.js.

Widgets