Ajoutez du guidage sans maintenir de sélecteurs.

Les visites codées en dur transforment chaque changement d'interface en travail d'ingénierie. Adoption Layer est un widget intégrable qui lit la structure du DOM et relie l'intention de l'utilisateur à l'interface en direct, sans carte de sélecteurs.

Les visites basées sur des sélecteurs vieillissent mal

Chaque nouveau layout ou composant casse une visite basée sur des sélecteurs, et la réparer vous éloigne de votre vrai travail. Vous ne devriez pas maintenir une machine à états juste pour montrer où cliquer.

Une situation fréquente

« Le PM met à jour la documentation d'onboarding. Plus besoin de demander à l'équipe technique de modifier les infobulles React et la logique des sélecteurs : le widget applique les nouvelles instructions à la structure réelle de la page. La logique de guidage ne vit plus dans votre code front. »

Un widget conçu pour des interfaces qui bougent

01

Correspondance dynamique par IA

Le widget analyse la structure du DOM et utilise un LLM pour relier l'intention aux éléments. Les changements d'interface cassent moins, car le guidage n'est pas lié à une carte de sélecteurs figée.

02

Données sensibles isolées

L'aperçu du DOM décrit la structure, jamais les valeurs des formulaires. Chaque projet peut également déclarer des sélecteurs à masquer dans les zones sensibles.

03

Performance maîtrisée

Écrit en ES6 vanilla et bundlé avec esbuild, le widget reste assez léger pour être testé sereinement avant un déploiement large.

04

Machine à états

Nous gérons la logique d'état complexe (`INIT` → `START_GUIDANCE` → `LOADING` → `[TOOL_STATE]` → `FINISH`) à l'intérieur du widget.

Ce qui change

Les bibliothèques de visites open source demandent beaucoup de maintenance, se cassent à chaque évolution d'interface et doivent se brancher sur l'état React. Adoption Layer établit les correspondances dynamiquement par IA, depuis une simple balise script.

Comment Adoption Layer s'intègre au rythme de l'équipe

Parcours concernés

  • Installation directe par balise `<script>` ou via NPM
  • Personnalisation du thème et des déclencheurs
  • Prise en charge des parcours SPA multi-étapes
  • Suivi des sessions de guidage et de leurs notes

Ce que vous pouvez attendre

Vous sortez l'essentiel des mises à jour de guidage du code applicatif. Les PM et les rédacteurs techniques mettent à jour la documentation qui alimente le guidage, pendant que l'équipe technique garde la main sur l'installation, la confidentialité et la performance.

Installation et confidentialité

Ajoutez la balise script, initialisez le widget avec votre clé API et personnalisez le thème si nécessaire. Il fonctionne avec les applications web modernes, SPA comprises. L'analyse se limite aux identifiants structurels et les sélecteurs masqués protègent vos zones sensibles.

Questions fréquentes

Est-ce que ça va ralentir mon application React ou Vue ?

Non. Le widget utilise une analyse du DOM optimisée et délègue les traitements lourds à notre API.

Comment trouve-t-il les éléments si je ne fournis pas de sélecteurs CSS ?

Le service utilise un modèle de langage via OpenRouter pour interpréter la structure du DOM et relier l'intention de l'utilisateur au bon élément.

Le widget est-il personnalisable ?

Oui. Vous personnalisez les couleurs, la position et l'icône du déclencheur pour coller à votre marque.

Comment gérez-vous la confidentialité ?

L'analyse se concentre sur les identifiants structurels. Chaque projet peut aussi déclarer des sélecteurs à masquer pour exclure les zones sensibles du contexte de guidage.

Prêt à guider vos utilisateurs dans votre produit ?