Support de Travail & Spécifications Produits (PRD)

Projet : SDK JavaScript d'Onboarding Interactif & Digital Adoption Platform (DAP) Sovereign Document de référence pour le développement

1. Vision Produit & Positionnement Stratégique

1.1 Proposition de Valeur

Un SDK JavaScript ultra-léger couplé à un éditeur No-Code via extension Chrome , permettant aux éditeurs SaaS et sites web de déployer des parcours d'onboarding interactifs (spotlights, infobulles, questions à choix multiples, guidage étape par étape) sans écrire une ligne de code frontend.

1.2 Différenciateurs Clés (Moat)
  1. Souveraineté & RGPD Native (EU-First) :
  1. Architecture Hydratée Frontend/Backend (Event-Driven) :
  1. Résilience du Sélectionneur DOM (Auto-Healing) :

2. Architecture Globale du Système

Le système repose sur 3 composants principaux interconnectés :

┌────────────────────────────────────────────────────────┐
│ 1. EXTENSION CHROME (Éditeur No-Code)                  │
│    - Inspection / Sélection d'éléments du DOM          │
│    - Overlay d'édition en direct sur le site hôte       │
│    - Configuration des étapes, textes & logiques       │
└──────────────────────────┬─────────────────────────────┘
                           │ 1. Sauvegarde des règles JSON
                           ▼
┌────────────────────────────────────────────────────────┐
│ 2. PLATEFORME BACKEND & DASHBOARD                      │
│    - API Gateway & CDN de distribution des scénarios   │
│    - Base de données des clients, clés API & parcours  │
│    - Engine d'Analytics (taux de complétion, churn)    │
└──────────────────────────┬─────────────────────────────┘
                           │ 2. Distribution CDN du SDK & des flux JSON
                           ▼
┌────────────────────────────────────────────────────────┐
│ 3. SDK JS CLIENT (Script à intégrer)                   │
│    - Téléchargement et exécution dans la page hôte     │
│    - Encapsulation CSS/UI dans un Shadow DOM           │
│    - Détection dynamique (MutationObserver)            │
└────────────────────────────────────────────────────────┘

3. Spécifications Techniques Détaillées

3.1 Le SDK JavaScript Client
Intégration par le client

Le client intègre une seule ligne dans le ou le de son application :

<script src="https://cdn.votre-saas.eu/v1/sdk.js" data-key="key_live_abc123" async defer></script>
Contraintes Techniques Strictes
Moteur d'Éléments Dynamiques & SPAs (React, Vue, Angular)
3.2 L'Extension Chrome (Éditeur No-Code)

L'extension permet au client de créer, modifier et tester ses scénarios directement sur sa propre application en environnement de dev, staging ou prod.

Fonctionnalités de l'Extension
  1. Mode Inspecteur visuel :
  1. Formulaire de Configuration d'Étape :
  1. Moteur d'Embranchements (Branching Engine / Questions) :
  1. Publication Directe :
3.3 Le Backend & Dashboard de Gestion
Structure des Données (Exemple de Charge JSON d'un Scénario)
{
  "tour_id": "tour_onboarding_v1",
  "name": "Onboarding Nouveaux Utilisateurs",
  "triggers": {
    "url_pattern": "/dashboard/*",
    "event": "first_login"
  },
  "steps": [
    {
      "step_id": "step_1",
      "type": "spotlight",
      "target": {
        "selector": "#create-project-btn",
        "fallback_text": "Créer un projet"
      },
      "content": {
        "title": "Bienvenue !",
        "body": "Cliquez ici pour démarrer votre premier projet."
      },
      "position": "bottom",
      "next_trigger": "element_click"
    },
    {
      "step_id": "step_2",
      "type": "question",
      "content": {
        "title": "Quelle est votre équipe ?",
        "options": [
          { "label": "Tech / Dev", "next_step": "step_3_dev" },
          { "label": "Sales / Marketing", "next_step": "step_3_sales" }
        ]
      }
    }
  ]
}
Modules du Dashboard Web

4. Workflows Opérationnels

4.1 Workflow de Déploiement par le Client
  1. Étape 1 : Le client s'inscrit sur la plateforme et récupère sa clé d'API (data-key).
  2. Étape 2 : Il ajoute le snippet JavaScript sur son application.
  3. Étape 3 : Il installe l'extension Chrome d'édition et se connecte à son compte.
  4. Étape 4 : Il navigue sur son site web, construit son scénario de guidage à l'écran et clique sur "Publier".
  5. Étape 5 : Le parcours est immédiatement actif pour l'ensemble des visiteurs finaux répondant aux critères de ciblage.
4.2 Workflow d'Exécution sur le Site de l'Utilisateur Final
  1. Initialisation : Le SDK s'exécute de façon asynchrone et effectue une requête GET légère vers le CDN pour récupérer la configuration active liée à la data-key.
  2. Evaluation des Règles : Le SDK vérifie si l'URL actuelle et le contexte de l'utilisateur remplissent les conditions de déclenchement d'un tour.
  3. Rendu de l'Overlay (Spotlight) :
  1. Rendu de l'Infobulle : Positionnement du tooltip avec flèche directionnelle pointant vers l'élément.
  2. Progression : Enregistrement des événements de progression en mémoire et envoi d'évènements d'analytics légers en arrière-plan (Beacon API).

5. Feuille de Route de Développement (Roadmap V1)