Files
2026-06-09 18:40:21 +02:00

6.4 KiB


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
GitHub 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, 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é)

# 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é)

npx @usertour/cli init

Installation manuelle

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 :
    <script src="https://tour.example.com/sdk.js" data-token="VOTRE_TOKEN"></script>
    
    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

🔗 Pages Liées