--- title: Usertour created: 2026-06-07 updated: 2026-06-07 type: app tags: [catalogue, development, onboarding, product, saas, react, analytics] confidence: high contested: false sources: [https://selfh.st/apps/?tag=Development, https://github.com/usertour/usertour] --- # 💻 Usertour > **L'extension de onboarding in-app open source** : créez des tours guidés, tooltips, checklists et surveys dans votre produit, à la manière de Pendo ou Userflow — mais en self-hosted. ## 📋 Informations Générales | Champ | Valeur | | :--- | :--- | | **Site web** | [usertour.io](https://www.usertour.io/) | | **GitHub** | [usertour/usertour](https://github.com/usertour/usertour) | | **License** | AGPL-3.0 (Community) + Commercial (Cloud) | | **Langage** | TypeScript (React + Node.js) | | **Étoiles GitHub** | 2k ⭐ | | **Dernière MAJ** | 2026-06-07 | | **Catégorie** | [[cat-development\|Development]], Product Onboarding / In-app | ## 📝 Description **Usertour** est une **plateforme d'onboarding in-app open source** conçue pour les **éditeurs de SaaS** qui veulent **guider leurs utilisateurs** dans la prise en main de leur produit, sans dépendre de solutions propriétaires type **Pendo**, **Userflow**, **Appcues** ou **Intercom Product Tours**. L'idée : embarquer un **SDK JavaScript léger** dans votre application web (React, Vue, Svelte, vanilla JS) qui permet d'**afficher des tours guidés contextuels** (tooltips, modals, checklists, hotspots, surveys) créés depuis une **interface visuelle d'administration**. Les flows sont **déclenchés** sur des événements utilisateurs, des pages, ou des conditions custom. Usertour se distingue des solutions commerciales par son **modèle open source AGPL** (auto-hébergement possible) et par sa **logique "développeur d'abord"** : SDK typé, API publique, webhooks. La société derrière (Usertour Inc.) propose une **version cloud** payante qui étend les features, mais la version community est **déjà très complète** pour 90% des usages. **Public cible** : **éditeurs SaaS, équipes produit, growth teams, startups** qui veulent self-host leur stack onboarding. ### Fonctionnalités principales - ✅ **Tours guidés** multi-étapes (tooltips, hotspots, modals) - ✅ **Checklists** d'onboarding (type "Setup wizard") - ✅ **Surveys in-app** : NPS, feedback qualitatif - ✅ **Segmentation utilisateurs** : déclencher par rôle, plan, événements - ✅ **Analytics** : taux de complétion, drop-off, heatmaps - ✅ **SDK JavaScript léger** : ~30kb gzip - ✅ **No-code builder** : éditeur visuel, prévisualisation - ✅ **Multi-langue** : contenu des tours localisable - ✅ **Throttling** : éviter le spam, fréquence max - ✅ **Webhooks** : notification sur événements onboarding - ✅ **Self-hosted** : données 100% chez vous ## 🚀 Installation ### Via Docker (recommandé) ```yaml # docker-compose.yml version: '3.8' services: usertour: image: usertour/usertour:latest container_name: usertour restart: unless-stopped ports: - "3000:3000" environment: DATABASE_URL: "postgresql://usertour:changez-moi@db:5432/usertour" REDIS_URL: "redis://redis:6379" SECRET_KEY: "changez-moi-en-production-50-chars-random" depends_on: - db - redis labels: - "traefik.enable=true" - "traefik.http.routers.usertour.rule=Host(`tour.example.com`)" - "traefik.http.routers.usertour.entrypoints=websecure" - "traefik.http.routers.usertour.tls.certresolver=letsencrypt" db: image: postgres:16-alpine container_name: usertour-db restart: unless-stopped environment: POSTGRES_USER: usertour POSTGRES_PASSWORD: changez-moi POSTGRES_DB: usertour volumes: - usertour_db:/var/lib/postgresql/data redis: image: redis:7-alpine container_name: usertour-redis restart: unless-stopped volumes: usertour_db: ``` ### Via npm (mode SaaS managé) ```bash npx @usertour/cli init ``` ### Installation manuelle ```bash git clone https://github.com/usertour/usertour.git cd usertour pnpm install pnpm build pnpm start ``` ## ⚙️ Configuration 1. **Accéder à l'admin** : `https://tour.example.com` (premier accès = signup) 2. **Récupérer le token SDK** : Settings > Projects > Token 3. **Intégrer le SDK** dans votre app : ```html ``` ```javascript import { Usertour } from '@usertour/sdk'; Usertour.init('VOTRE_TOKEN'); ``` 4. **Créer un tour** : dashboard > Tours > New > sélection des éléments DOM par sélecteur CSS 5. **Définir le déclencheur** : page, événement custom (`window.usertour.identify(userId)`), ou plan 6. **Configurer les événements** : webhooks vers votre backend, ou sync analytics 7. **Identifier les utilisateurs** : `usertour.identify(userId, { email, plan, role })` ## 🔗 Alternatives - **Pendo** — Leader du marché, propriétaire, cher ($$$), analytics avancées - **Userflow** — Concurrent direct, UI moderne, propriétaire - **Appcues** — Plateforme mature, propriétaire - **Intercom Product Tours** — Couplé à Intercom, propriétaire - **Driver.js** — Bibliothèque JS pure, pas de backend (à coder vous-même) - **Shepherd.js** — Tours guidés JS open source, bas niveau ## 🔒 Sécurité - **🔐 SECRET_KEY robuste** : `openssl rand -hex 64` - **🛡️ HTTPS obligatoire via [[app-traefik]]** : Usertour gère potentiellement des données comportementales (RGPD) - **🔒 Tokens SDK** : scope limité par environnement (dev/staging/prod) - **🛡️ RGPD** : Usertour collecte des événements utilisateur → configurer rétention, anonymisation - **🛡️ CSP** : autoriser le domaine Usertour dans la Content Security Policy - **🛡️ CORS** : whitelister les origines autorisées côté admin ## 📚 Ressources - [Site officiel](https://www.usertour.io/) - [Documentation](https://docs.usertour.io/) - [GitHub usertour/usertour](https://github.com/usertour/usertour) - [Démo en ligne](https://app.usertour.io/demo) - [SDK JavaScript](https://www.npmjs.com/package/@usertour/sdk) ## 🔗 Pages Liées - [[cat-development]] — Catégorie Development - [[app-posthog]] — Product analytics + feature flags (complémentaire) - [[app-plausible]] — Analytics web RGPD-friendly - [[app-traefik]] — Reverse proxy HTTPS - [[securisation-home-lab]] — Bonnes pratiques - [[recettes-docker-compose]] — Templates Docker