Initial vault setup
This commit is contained in:
@@ -0,0 +1,165 @@
|
||||
---
|
||||
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
|
||||
<script src="https://tour.example.com/sdk.js" data-token="VOTRE_TOKEN"></script>
|
||||
```
|
||||
```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
|
||||
Reference in New Issue
Block a user