Widget Gratuit pour Webmasters

Widget Calculateur d’Or et d’Argent pour Votre Site

Personnalisez un calculateur interactif de métaux précieux pour votre site ou blog. Vos visiteurs peuvent calculer la valeur de l’or (24K–8K) et de l’argent par gramme, once troy ou tola dans plus de 150 devises.

1. Langue et Devise par Défaut

2. Apparence et Thème

3. En-tête du Widget

Code d’Intégration HTML

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

Widget Calculateur d’Or : Guide d’Intégration et d’Utilisation

Offrez à vos visiteurs des calculs précis et interactifs pour les métaux précieux. Le Widget Calculateur d’Or permet d’évaluer instantanément l’or et l’argent selon plusieurs puretés, unités de poids et 150 devises internationales, sans aucune maintenance.

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

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

<!-- Élément Calculateur d’Or -->
<gold-calculator-widget 
  lang="fr" 
  currency="USD" 
  show-header="on" 
  header-text="Calculateur d'Or" 
  theme="default" 
  border-radius="5">
</gold-calculator-widget>

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

2. Attributs de Personnalisation

Configurez l’apparence initiale et les valeurs par défaut en modifiant les attributs de l’élément <gold-calculator-widget> :

Attribut Type Défaut Description
lang Chaîne (String) en Définit la langue de l’interface et le formatage des nombres (en, ar, fr, es, ru). Active automatiquement la disposition RTL pour les langues s’écrivant de droite à gauche comme l’arabe (ar).
currency Chaîne (String) USD Code de la devise par défaut initiale (ISO 4217, ex. : USD, EUR, GBP, SAR, AED, EGP, INR).
show-header Chaîne (String) on Contrôle l’affichage de la barre d’en-tête du widget (on ou off).
header-text Chaîne (String) Gold Calculator 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) https://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) 5 Rayon des coins en pixels pour le conteneur et les champs (entier de 0 à 20 dans le configurateur, jusqu’à 50 pris en charge, 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.
border-color BCBCBC Couleur de bordure du conteneur et des champs de formulaire.
text-color 222222 Couleur principale du texte pour les libellés, les champs et l’horodatage.
input-bg-color FFFFFF Couleur d’arrière-plan des champs de saisie, des menus déroulants et du résultat.
bg-color-button 535353 Couleur d’arrière-plan des boutons d’action du pied de page.
button-border-color 2E2E2E Couleur de bordure des boutons d’action du pied de page.
button-hover-color 8A8A8A Couleur de survol des boutons du pied de page et des options du menu des devises.

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 :

  • Prise en charge de l’Or et de l’Argent : Basculez instantanément entre l’Or et l’Argent, avec mise à jour automatique des options de pureté.
  • Sélection complète de puretés et de titres :
    • Carats d’or : 24K (.999), 23K (.965), 22K (.916), 21K (.875), 18K (.750), 14K (.585), 12K (.500), 10K (.417), 9K (.375) et 8K (.333).
    • Titres d’argent : 999 (Argent pur), 958 (Britannia), 925 (Argent Sterling), 900 (Argent monétaire) et 800 (Argent bijouterie).
  • Flexibilité des poids et unités : Saisissez n’importe quel poids personnalisé et choisissez parmi les unités standard : Once (once troy), Gramme et Tola.
  • Sélecteur de devises avec recherche et drapeaux : Parcourez 150 devises mondiales classées en Favoris (USD, EUR, GBP, CAD, AUD, JPY, CHF, INR, AED, SAR) et Toutes les devises, avec drapeaux, filtrage instantané et navigation au clavier.
  • Encapsulation Shadow DOM : Rendu dans un Shadow DOM isolé afin que les feuilles de style de votre site n’interfèrent jamais avec la mise en page du calculateur.
  • Cotations 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 et le configurateur du widget (+).

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-calculator-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 280px à 360px pour un alignement optimal sur deux colonnes.

5. Foire Aux Questions (FAQ)

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

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

Ce widget ralentira-t-il la vitesse de chargement de mon site web ?

Non. Le script Web Component est léger, récupère les données de manière asynchrone et s’exécute dans un Shadow DOM isolé sans bloquer le rendu de votre page.

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

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

Le widget est-il adapté aux mobiles et compatible RTL ?

Oui. Le widget utilise une mise en page flexible et réactive qui s’adapte à la largeur de son conteneur parent sur smartphones, tablettes et ordinateurs, et passe automatiquement en affichage de droite à gauche (RTL) lorsque lang="ar" est sélectionné.

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