Documentation du widget
Guide complet pour intégrer et personnaliser le widget convertisseur de devises Currency.Wiki sur votre site.
Table des matières
1 Premiers pas
Ajouter un widget convertisseur de devises à votre site est facile. Suivez ces étapes simples :
- Allez sur la page Créateur de widget et personnalisez l'apparence
- Sélectionnez le style, les devises et le thème souhaités
- Copiez le code d'intégration généré (Script ou Iframe)
- Collez le code dans le HTML de votre site à l'endroit souhaité
Astuce : Utilisez les préréglages rapides dans le Créateur de widget pour démarrer rapidement avec un widget préconfiguré.
2 Méthodes d'intégration
Intégration Script (Recommandé)
La méthode script injecte le widget directement dans votre page. Les menus déroulants s'affichent devant le contenu environnant pour une sélection facile.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Les menus déroulants s'affichent hors du conteneur du widget
- Idéal pour la sélection interactive des devises
- Intégration transparente à votre page
Intégration Iframe
La méthode iframe crée un conteneur isolé pour le widget. Cette méthode est sécurisée et fonctionne dans des environnements avec des politiques de contenu strictes.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Totalement isolé des styles de votre page
- Fonctionne avec des politiques de sécurité strictes
- Implémentation simple et sécurisée
Note : Utilisez l'intégration Script pour une interactivité totale (menus déroulants sur le contenu). Utilisez Iframe si vous avez besoin d'isolation ou de restrictions CSP.
3 Styles du widget
Choisissez parmi 11 styles de widget différents pour s'adapter au design de votre site. Chaque style est optimisé pour des usages et tailles d'affichage variés.
mini
250x140px
Convertisseur compact sur une ligne. Parfait pour les en-têtes ou espaces réduits.
square
250x250px
Widget au format 1:1 avec bouton d'inversion. Idéal pour les barres latérales.
compact
300x180px
Convertisseur à faible encombrement avec toutes les fonctionnalités essentielles.
inline
480x56px
Disposition horizontale. Idéal pour intégrer dans le contenu ou la navigation.
tall
200x280px
Disposition verticale avec libellés classiques.
mini-chart
250x260px
Convertisseur compact avec graphique d'historique des taux.
multi-expandable
300x320px
Convertisseur multi-devises. Les utilisateurs peuvent ajouter/supprimer des devises.
multi-fixed
300x300px
Liste fixe de taux de change. Idéal pour afficher des taux spécifiques.
rates-compact
250x320px
Liste condensée des taux avec heure de mise à jour.
rates-viewer
300x500px
Vue graphique complète avec détails sur les taux.
rates-viewer-compact
300x400px
Version compacte du visualiseur de taux avec graphiques.
4 Paramètres d'URL
Personnalisez votre widget à l'aide de paramètres d'URL. Ces paramètres fonctionnent avec les méthodes Script et Iframe.
| Paramètre | Par défaut | Description |
|---|---|---|
| style | compact | Style du widget (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Thème de couleur (clair, sombre ou auto) |
| from | USD | Code devise source (ex : USD, EUR, GBP) |
| to | EUR | Code devise cible (ex : EUR, USD, JPY) |
| amount | 1000 | Montant par défaut pour la conversion |
| accent | #2563eb | Couleur d'accent en hexadécimal (sans #) |
| lang | en | Code langue du widget (ex : en, es, fr, de) |
| flags | 1 | Afficher les drapeaux (1=afficher, 0=masquer) |
| display | iso | Format d'affichage des devises (iso=USD, symbol=$) |
| lock | 0 | Verrouiller les devises (1=verrouillé, 0=non verrouillé) |
| currencies | EUR,GBP,JPY | Liste de devises séparées par des virgules pour les widgets multi-devises |
| dropdown | all | Devises dans le menu déroulant (all, top10, top20 ou liste personnalisée) |
| branding | 1 | Afficher la marque (1=afficher, 0=masquer) |
| brandinglink | 1 | Rendre la marque cliquable (1=lien, 0=texte seul) |
| format | auto | Format des nombres (auto, us, eu, french, indian) |
| decimals | 2 | Nombre de décimales (0-6) |
| chart | 0 | Activer le graphique (1=activé, 0=désactivé) |
| chartperiod | 7d | Période du graphique (7d, 14d, 30d, 90d) |
Exemples
Convertisseur compact thème sombre :
?style=compact&theme=dark&from=USD&to=EUR
Taux de change multi-devises :
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Mini convertisseur avec graphique sur 30 jours :
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Afficher les symboles monétaires au lieu des codes :
?style=compact&display=symbol&from=USD&to=EUR
Devises verrouillées avec montant personnalisé :
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Options de personnalisation
Options de thème
- light - Fond clair avec texte foncé
- dark - Fond sombre avec texte clair
- auto - S'adapte automatiquement à la préférence système de l'utilisateur
Format d'affichage des devises
- iso - Affiche les codes ISO comme USD, EUR, GBP
- symbol - Affiche les symboles monétaires comme $, €, £
Formats de nombres
- auto - Détecte automatiquement les paramètres du navigateur du visiteur
- us - Format US : 1,234.56
- eu - Format européen : 1.234,56
- french - Format français : 1 234,56
- indian - Format indien : 1,23,456.78
Options du menu déroulant des devises
- all - Toutes les 170+ devises prises en charge
- top10 - Top 10 des devises les plus populaires
- top20 - Top 20 des devises par volume d'échange
- USD,EUR,GBP,... - Liste personnalisée de devises spécifiques
Astuce : Utilisez le Créateur de widget pour configurer visuellement toutes ces options et générer automatiquement le code d'intégration.
6 Dépannage
Widget non affiché
Assurez-vous que le code d'intégration est correctement placé dans votre HTML. Pour l'intégration script, vérifiez que la div conteneur existe avec le bon ID. Consultez la console du navigateur pour d'éventuelles erreurs JavaScript.
Menu déroulant non fonctionnel
Si vous utilisez l'intégration iframe, les menus déroulants défileront à l'intérieur du widget. Pour une fonctionnalité complète avec superposition, utilisez la méthode script.
Conflits de style
Si le CSS de votre site affecte l'apparence du widget, essayez l'intégration iframe qui isole les styles du widget.
Problèmes de politique de sécurité de contenu
Si vous avez une CSP stricte, ajoutez currency.wiki à vos directives autorisées script-src et frame-src. Exemple : script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Besoin d'aide ?
Vous ne trouvez pas ce que vous cherchez ? Notre équipe support est là pour vous aider.
