Widget Gratuit pour Webmasters

Widget Convertisseur de Devises pour Votre Site Web

Ajoutez un convertisseur de devises bidirectionnel rapide à votre site ou barre latérale. Choisissez la langue, la paire de devises par défaut, le montant initial et le thème de couleur.

1. Langue et Montant Initial

2. Paire de Devises par Défaut

3. Apparence et Thème

Code d’Intégration HTML

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

Widget Convertisseur de Devises : Guide d’Intégration et d’Utilisation

Offrez aux visiteurs de votre site web des conversions de devises rapides et interactives. Le Widget Convertisseur de Devises prend en charge plus de 150 devises mondiales, les métaux précieux et le Bitcoin avec des calculs bidirectionnels instantanés, des menus déroulants avec recherche et drapeaux, et aucune maintenance.

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

L’intégration du convertisseur 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/currency-converter/widget.js"></script>

<!-- Élément Convertisseur de Devises -->
<currency-converter 
  lang="fr" 
  from="USD" 
  to="EUR" 
  amount="1" 
  theme="default" 
  border-radius="5">
</currency-converter>

Astuce de performance : Le fichier JavaScript ne doit être importé qu’une seule fois par page, même si vous intégrez plusieurs convertisseurs sur la même page.

2. Attributs de Personnalisation

Configurez l’apparence initiale et la paire de devises par défaut en modifiant les attributs de l’élément <currency-converter> :

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).
from Chaîne (String) EUR Code de la devise source initiale (ISO 4217, plus BTC, XAU, XAG, XPT ; ex. : USD, EUR, GBP, SAR).
to Chaîne (String) USD Code de la devise cible initiale (ISO 4217 ou BTC ; ex. : EUR, USD, JPY, AED, EGP).
amount Nombre (Number) 1 Montant numérique initial à convertir au chargement (tout nombre positif, ex. : 1, 100, 50.5).
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, jusqu’à 50 pris en charge, ex. : 0, 5, 12).
size Chaîne (String) normal Contrôle la hauteur et la taille de police des champs et des menus déroulants (normal ou large).
native-dropdown Chaîne (String) off Définir sur on pour utiliser les menus <select> natifs du navigateur au lieu du menu déroulant enrichi avec recherche et drapeaux.

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.
border-color BCBCBC Couleur de bordure du conteneur, des champs et des menus déroulants.
text-color 222222 Couleur principale du texte pour les champs, les libellés de devises et l’horodatage.
input-bg-color FFFFFF Couleur d’arrière-plan des champs de montant et des menus déroulants de devises.
bg-color-button 535353 Couleur d’arrière-plan du bouton d’inversion (⇆) et des boutons du pied de page.
button-border-color 2E2E2E Couleur de bordure du bouton d’inversion et des boutons du pied de page.
button-hover-color 8A8A8A Couleur de survol du bouton d’inversion et des boutons du pied de page.

3. Fonctionnalités pour l’Utilisateur Final

Les visiteurs interagissant avec le widget sur votre site bénéficient des fonctionnalités intégrées suivantes :

  • Calcul bidirectionnel instantané : Saisissez un montant dans le champ supérieur (source) ou inférieur (cible) pour calculer la conversion dans les deux sens immédiatement côté client, sans requête réseau supplémentaire.
  • Inversion des devises en un clic (⇆) : Inversez instantanément les devises source et cible grâce au bouton d’échange situé à côté du champ supérieur.
  • Plus de 150 devises, métaux et crypto : Convertissez entre les devises fiduciaires mondiales, le Bitcoin (BTC) et les métaux précieux (XAU, XAG, XPT), classés en Favoris (USD, EUR, GBP, CAD) et Toutes les devises.
  • Menus déroulants avec recherche et drapeaux : Trouvez rapidement n’importe quelle devise par code ou par nom avec les drapeaux des pays et un filtrage instantané.
  • Encapsulation Shadow DOM et contraste automatique : Rendu dans un Shadow DOM isolé afin que le CSS de votre site n’entre jamais en conflit avec le convertisseur, avec calcul automatique du contraste du texte des boutons.
  • Taux de change horodatés : 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-converter> 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 pour un affichage optimal.

5. Foire Aux Questions (FAQ)

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

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 de la dernière mise à jour.

Le changement de devise ou la saisie d’un montant génère-t-il des requêtes supplémentaires au serveur ?

Non. Le widget télécharge la table complète des taux une seule fois au chargement et effectue toutes les conversions, sélections et inversions instantanément dans le navigateur.

Puis-je placer plusieurs convertisseurs sur la même page ?

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

Le widget est-il adapté aux appareils mobiles ?

Oui. Le widget utilise une mise en page verticale réactive qui s’adapte automatiquement à la largeur de son conteneur parent sur smartphones, tablettes et barres latérales d’ordinateur.

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