Widget embarquable : intégrer la carte des trains de nuit sur n'importe quel site

Après avoir construit la carte interactive des trains de nuit en Europe , la question suivante s’est posée naturellement : comment rendre cet outil utile au-delà de mon propre blog ?

La réponse : un widget embarquable que n’importe quel blogueur voyage peut intégrer sur son site en quelques secondes, avec un lien retour automatique vers Nomade sur Rails .

La stratégie : widgets gratuits contre backlinks

Le principe est simple. Je mets à disposition un widget gratuit, personnalisable et sans tracking. En échange, un lien “Nomade sur Rails” reste toujours visible. Le blogueur obtient un contenu interactif de qualité pour ses lecteurs, et moi je gagne un backlink SEO sur chaque site qui l’intègre.

Deux modes d’intégration sont proposés :

Iframe — le blogueur copie une ligne de HTML et c’est tout. Universel, fonctionne partout.
Script JS — un <script> qui crée l’iframe ET injecte un lien directement dans le DOM de la page hôte. C’est ce mode qui génère un vrai backlink indexable par Google, contrairement à l’iframe seul dont les liens internes ne transmettent pas de “link juice”.

Architecture : tout dans le même projet SvelteKit

Plutôt que de créer un projet séparé, j’ai ajouté deux routes au site SvelteKit existant :

src/routes/
├── (app)/                    # Groupe de routes pour l'app principale
│   ├── +layout.svelte        # Header, footer, navigation
│   └── +page.svelte          # Carte interactive complète
├── embed/                    # Widget embarquable
│   ├── +layout.svelte        # Layout bare (pas de header/footer)
│   └── +page.svelte          # Lecture des query params
├── widget/                   # Configurateur self-service
│   ├── +layout.svelte        # Layout minimal (logo + retour)
│   └── +page.svelte          # Formulaire + preview live
└── +layout.svelte            # Root layout (juste app.css)

Le point clé : les route groups SvelteKit. Le groupe (app) isole le layout principal (header/footer/nav) de la carte. Les routes /embed et /widget ont chacune leur propre layout indépendant. Cela permet d’avoir trois expériences différentes sous le même domaine sans dupliquer le code.

La route /embed

C’est le widget lui-même. Un composant EmbedMap.svelte simplifié par rapport à la carte complète : pas de barre de recherche, pas de filtres interactifs, pas de routes supprimées. Juste la carte Leaflet avec les lignes colorées et un bandeau “Powered by Nomade sur Rails” en bas.

Le widget est paramétrable via query strings :

Paramètre	Exemple	Effet
`city`	`Paris`	Filtre les routes depuis/vers cette ville
`operator`	`nightjet`	Filtre par opérateur
`theme`	`dark`	Thème sombre
`color`	`ff6600`	Couleur d’accent personnalisée
`list`	`true`	Affiche la liste des routes sous la carte

Un point technique important : la page est pré-rendue statiquement par SvelteKit. Les query params ne sont pas disponibles au moment du prerender. La lecture des paramètres se fait côté client via $effect avec un guard browser :

import { browser } from '$app/environment';

let city = $state(null);
let ready = $state(false);

$effect(() => {
  if (browser) {
    const params = new URLSearchParams(window.location.search);
    city = params.get('city') || null;
    ready = true;
  }
});

Le script widget.js

C’est un fichier de 46 lignes, moins de 2 Ko, sans aucune dépendance. Un IIFE qui :

Lit les attributs data-* du div cible
Crée un iframe pointant vers /embed avec les bons paramètres
Injecte un <a> en dehors de l’iframe, directement dans le DOM de la page hôte

C’est le troisième point qui fait toute la différence pour le SEO. Un lien à l’intérieur d’un iframe n’est pas suivi par les crawlers. Un lien dans le DOM de la page hôte, oui. L’anchor text est riche en mots-clés : “Carte des trains de nuit en Europe — Nomade sur Rails”.

Une page self-service où le blogueur personnalise son widget et copie le code. Le panneau gauche contient le formulaire (filtrage, apparence, dimensions, mode d’intégration), le panneau droit affiche un aperçu en temps réel via un iframe local.

Le mode “Script JS” est mis en avant comme recommandé, avec une explication sur le bénéfice SEO.

Intégration dans les articles du blog

J’ai intégré le widget dans cinq articles existants sur nomadesurrails.fr pour montrer l’exemple :

L’article sur Nox Mobility affiche la carte complète
L’article sur le Paris-Berlin filtre sur Paris
L’article sur European Sleeper filtre par opérateur

Chaque widget est adapté au contexte de l’article, ce qui le rend pertinent pour le lecteur plutôt que décoratif.

Ce que j’en retiens

Techniquement, ce projet montre comment SvelteKit gère élégamment les layouts multiples grâce aux route groups. Un même build statique produit trois expériences (app complète, widget embarquable, configurateur) sans duplication de code ni de données.

Côté stratégie, les widgets embarquables sont un levier SEO sous-exploité. Le coût de développement est faible quand l’application existe déjà, et chaque intégration externe génère un backlink naturel et durable.

Le configurateur est accessible sur nomadesurrails.fr/trainsdenuit/widget/ .