Web Component Gratuit & Léger

Ajoutez le Prix de l’Or Aujourd’hui sur Votre Site Web

Personnalisez votre tableau des cours de l’or en direct ci-dessous — devise par défaut, thème de couleurs et en-tête — puis copiez le code d’intégration sur votre site.

1. Devise & Mode Interactif

2. Thème & Apparence

3. Barre d’En-tête

Code d’Intégration HTML

Collez cet extrait dans le code HTML de votre page ou bloc CMS :

Widget Prix de l’Or Aujourd’hui : Guide d’Intégration et d’Utilisation

Affichez les cours de l’or en direct directement sur votre site web. Le Widget Prix de l’Or Aujourd’hui fournit une répartition instantanée du prix de l’or au comptant par once troy et par gramme selon les principaux carats (24K, 22K, 21K, 18K et 14K) dans 150 devises mondiales, sans aucune maintenance.

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

L’intégration du tableau des prix de l’or 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/gold-price-today/widget.js"></script>

<!-- Élément Prix de l’Or Aujourd’hui -->
<gold-price-widget 
  lang="fr" 
  currency="USD" 
  change-currency="on" 
  show-header="on" 
  header-text="Prix de l'Or Aujourd'hui" 
  theme="default" 
  border-radius="5">
</gold-price-widget>

Astuce de performance : Le fichier JavaScript ne doit être importé qu’une seule fois par page, même si vous intégrez plusieurs widgets de prix de l’or pour différentes devises sur la même page.

2. Attributs de Personnalisation

Configurez la devise initiale, le sélecteur de devise, la barre d’en-tête et le style visuel en modifiant les attributs de l’élément <gold-price-widget> :

Attribut Type Défaut Description
lang Chaîne (String) en Définit la langue de l’interface pour les libellés d’unités/carats, les noms de pays et le formatage de la date (en, ar, fr, es, ru).
currency Chaîne (String) USD Code de la devise initiale affichée au chargement (ISO 4217, ex. : USD, EUR, GBP, SAR, AED, EGP, INR).
change-currency Chaîne (String) on Définit si les visiteurs peuvent changer de devise via le menu déroulant (on ou off). Réglez sur off pour verrouiller le widget sur une seule devise.
show-header Chaîne (String) on Contrôle l’affichage de la barre de titre supérieure du widget (on ou off).
header-text Chaîne (String) Gold Price Today Texte personnalisé affiché dans l’en-tête lorsque show-header="on" (par défaut, le titre traduit selon la langue lang).
header-link Chaîne (String) http://www.goldpricedata.com/ URL de destination facultative (http ou https) pour le lien du titre de l’en-tête.
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) 0 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).
native-dropdown Chaîne (String) off Définir sur on pour utiliser un menu <select> natif du navigateur au lieu du menu déroulant enrichi avec recherche et drapeaux lorsque change-currency="on".

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, du séparateur d’en-tête du pays et du sélecteur de devise.
text-color 222222 Couleur principale du texte pour les libellés de carats, les prix de l’or et l’horodatage.
input-bg-color FFFFFF Couleur d’arrière-plan des lignes paires du tableau et du menu déroulant des devises.
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 de survol des lignes du tableau et des boutons d’action du pied de page.

3. Fonctionnalités pour l’Utilisateur Final

Les visiteurs consultant le widget Prix de l’Or Aujourd’hui sur votre site bénéficient des fonctionnalités intégrées suivantes :

  • Répartition complète des prix de l’or : Affiche les cours de l’or en direct dans un tableau clair de 6 lignes couvrant l’Once (once troy) et les prix au gramme pour les Carats 24, 22, 21, 18 et 14.
  • Barre d’en-tête Pays et Devise : Met en valeur le drapeau de la devise active, le nom du pays (lié à sa page détaillée des cours de l’or), le code ISO et le symbole monétaire.
  • Mode devise interactif ou fixe : Permettez aux visiteurs de basculer entre 150 devises via un menu déroulant avec recherche et drapeaux (change-currency="on"), ou verrouillez le tableau sur une seule devise locale (change-currency="off").
  • 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 tableau des prix, avec calcul automatique du contraste du texte des boutons.
  • Cotations de marché horodatées : Affiche la date et l’heure de la dernière synchronisation des cours 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 <gold-price-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 pour un alignement optimal du tableau.

5. Foire Aux Questions (FAQ)

À quelle fréquence les prix de l’or sont-ils mis à jour dans le widget ?

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

Puis-je verrouiller le widget sur une seule devise pour empêcher les visiteurs de la modifier ?

Oui. Définissez change-currency="off" sur l’élément <gold-price-widget> (ou sélectionnez « Non » sous l’option de changement de devise dans le configurateur ci-dessus). Cela masque le menu déroulant et allège la requête réseau.

Puis-je placer plusieurs widgets de prix de l’or sur la même page ?

Oui. Vous pouvez ajouter plusieurs éléments <gold-price-widget> avec des devises, des langues ou des thèmes différents sur la même page. La balise externe <script> ne doit être incluse qu’une seule fois.

Le widget est-il adapté aux appareils mobiles ?

Oui. Le widget 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