Après le widget embarquable pour les trains de nuit , j’ai appliqué la même stratégie à un autre outil de Nomade sur Rails : la carte interactive des forfaits mobiles français et leur couverture mondiale.
L’article source — Quel forfait mobile choisir pour voyager ? — contient une carte SVG du monde qui colore les pays couverts selon l’opérateur et le forfait sélectionné. C’est un outil que les blogueurs voyage pourraient vouloir intégrer sur leur propre site.
Un widget 100% HTML/CSS/JS
Contrairement au widget des trains de nuit qui s’appuie sur SvelteKit et Leaflet, celui-ci est entièrement autonome : un seul fichier HTML qui contient le CSS, le SVG de la carte monde, et le JavaScript. Zéro dépendance externe, zéro framework, zéro requête réseau (à part le chargement initial).
La carte SVG contient plus de 200 pays identifiés par leur code ISO à deux lettres. Le JavaScript associe chaque forfait à une liste de codes pays. Quand l’utilisateur sélectionne un opérateur puis un forfait, les paths SVG correspondants passent en vert via une simple manipulation de classes CSS :
coveredCodes.forEach(function(code) {
var el = svg.getElementById(code);
if (el) el.classList.add('nmw-covered');
});
L’animation est gérée par une transition CSS de 0.4s sur le fill, ce qui donne un effet fluide quand on change de forfait.
Architecture : fichiers statiques dans /outils/
Plutôt que de passer par WordPress ou un framework, j’ai créé un dossier /outils/ à la racine du site pour héberger des fichiers HTML statiques. C’est un choix délibéré : performance maximale, indépendance vis-à-vis du CMS, et facilité de maintenance.
outils/forfaits-mobile/
├── embed/index.html # Widget embarquable
├── index.html # Configurateur self-service
└── widget.js # Script JS d'intégration
Ce pattern est réutilisable pour d’autres widgets à l’avenir — chaque outil aura son propre sous-dossier.
Le configurateur self-service
Accessible sur nomadesurrails.fr/outils/forfaits-mobile/ , il reprend le layout deux colonnes du configurateur des trains : formulaire à gauche, aperçu live à droite.
Le blogueur choisit l’opérateur, le forfait, le thème (clair/sombre), et la couleur d’accent. Le code d’intégration se met à jour en temps réel. Deux modes sont proposés : iframe (universel) et script JS (recommandé, plus léger).
Paramètres du widget
Le widget accepte des query strings pour la personnalisation :
| Paramètre | Exemple | Effet |
|---|---|---|
op | free | Pré-sélectionne un opérateur |
plan | free-max | Pré-sélectionne un forfait |
theme | dark | Thème sombre |
color | ff6600 | Couleur d’accent |
Le mode sombre inverse les couleurs de fond et ajuste les teintes du SVG pour un bon contraste. La détection se fait côté client via URLSearchParams, ce qui permet un chargement statique sans serveur dynamique.
Le script widget.js
Même principe que pour les trains : un IIFE de 1,5 Ko qui lit les attributs data-* d’un div cible, crée un iframe vers /outils/forfaits-mobile/embed/, et injecte un lien directement dans le DOM de la page hôte.
<div id="nomade-forfaits-widget"
data-op="free" data-plan="free-max">
</div>
<script src="https://nomadesurrails.fr/outils/forfaits-mobile/widget.js" async></script>
Tracking des intégrations
Pour savoir quels sites intègrent le widget, un système de tracking léger enregistre le domaine au moment où le blogueur copie le code depuis le configurateur. Un ping PHP sauvegarde le domaine dans un fichier JSON et envoie une notification Slack.
Pas de tracking côté visiteur, pas de cookies, pas de requête à chaque pageview. Le ping ne part qu’une fois, au moment de l’installation.
Monitoring automatique
Les données des forfaits changent régulièrement : nouveaux forfaits (comme le Free Max lancé le 31 mars 2026), modifications de prix, ajout de pays. Un script Python tourne chaque lundi et scrape les pages des cinq opérateurs pour détecter les changements. Si quelque chose bouge, une notification Slack arrive avec le détail.
Ce que j’en retiens
Ce projet illustre qu’on n’a pas besoin d’un framework pour construire un widget embarquable performant. Le SVG inline offre une interactivité riche (hover, animation, coloration par pays) sans aucune dépendance cartographique externe.
Le pattern /outils/ avec des fichiers statiques purs est un bon compromis entre la simplicité de maintenance et la performance. Et la stratégie de backlinks via widgets gratuits continue de fonctionner : chaque intégration externe génère un lien naturel vers l’article source.
Le configurateur est accessible sur nomadesurrails.fr/outils/forfaits-mobile/ .