Visites guidées et « Montrez-moi »

Montrer plutôt qu’expliquer : une visite guidée accompagne vos visiteurs étape par étape sur votre page. La page est légèrement assombrie, un anneau met en évidence l’élément concerné et une bulle à côté affiche votre texte ainsi que les boutons Zurück (retour), Weiter (suivant) et Beenden (terminer).

Créer des visites guidées

Sous /app/projects/{id}, dans l’onglet Textes et formulaires, section Visites guidées du produit, saisissez vos visites en JSON. Laisser le champ vide et enregistrer supprime toutes les visites.

[
  {
    "id": "erste-schritte",
    "name": "First steps",
    "steps": [
      { "selector": "#konto", "title": "Your account", "text": "Change your details here." },
      { "selector": ".rechnung", "text": "And the invoices are here.", "placement": "top" }
    ]
  }
]

Une visite possède :

• id – obligatoire, unique. Lettres minuscules, chiffres, - et _, commence par une lettre ou un chiffre, 48 caractères maximum. Vous l’utilisez pour démarrer la visite.
• name – un nom pour vous.
• steps – de 1 à 30 étapes.

Une étape possède :

• selector – obligatoire. Un sélecteur CSS de l’élément sur votre page, 300 caractères maximum.
• text – obligatoire. Le texte de la bulle.
• title – facultatif, un titre.
• placement – bottom (par défaut) ou top. C’est une préférence, pas une garantie : si la bulle ne tient pas au-dessus, elle passe en dessous.
• i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende – libellés personnalisés facultatifs des boutons Suivant, Retour, Terminé et Terminer.

Limites : 20 visites maximum par projet et 32 KB au total. À l’enregistrement, votre compte vérifie le JSON et indique l’erreur éventuelle.

Démarrer une visite

Démarrez les visites depuis votre code, par exemple via un bouton « Démarrer la visite » ou après la première connexion :

ReactiveChat('tour', 'erste-schritte');

L’appel renvoie true si la visite démarre, sinon false. Vous pouvez la terminer avec :

ReactiveChat('tourStop');

Le visiteur termine une visite avec Beenden, à la dernière étape avec Fertig (terminé), ou avec la touche Échap. Un compteur indique l’étape actuelle.

Si un élément manque

Si le widget ne trouve pas l’élément d’une étape, par exemple parce qu’il n’existe pas sur cette page ou est masqué, il saute l’étape. Si tous les éléments manquent, la visite ne démarre pas et l’appel renvoie false. Vérifiez donc vos sélecteurs sur la page exacte où vous démarrez la visite.

Design

Les visites ont un design fixe et neutre, indépendant de vos couleurs de marque et de votre CSS personnalisé. La bulle mesure au maximum 320 px de large. Sans libellés personnalisés, les boutons s’appellent « Beenden », « Zurück », « Weiter » et « Fertig » dans toutes les langues. Pour les visites sur des pages anglaises ou polonaises, définissez donc les champs i18n_* à chaque étape.

« Montrez-moi »

Dans sa réponse, l’assistant IA peut pointer vers une commande de votre page, par exemple le bouton « Ajouter au panier ». Pour cela, après la première ouverture du chat, le widget lit les commandes visibles de la page actuelle.

• Si l’élément est clairement visible, un anneau le met en évidence avec la première phrase de la réponse à côté. La fenêtre du chat reste ouverte.
• S’il est recouvert ou si le visiteur utilise un téléphone, un bouton Montrez-moi apparaît sur le message. Seul un clic sur ce bouton affiche l’élément.
• Tout toucher, la touche Échap ou un défilement qui éloigne l’élément met fin à l’affichage.

Le chat ne se ferme jamais de lui-même pour cela.

Vous pouvez désactiver la lecture de la page, et donc « Montrez-moi », dans le code d’intégration :

data-rc-dom-spiegel="false"

Excluez des zones individuelles en les marquant avec data-rc-private ou data-rc-ignore. Plus de détails dans Connaissances et sources.