Envoyer l'action PostMessage
L'action Send PostMessage envoie un message de votre expérience Labvanced en cours à une cible externe, telle qu'une page web parente, une application personnalisée ou un cadre intégré, en utilisant l'API postMessage du navigateur.
Table des matières
Aperçu
Cette action est répertoriée sous API Actions dans le menu de sélection des actions.
Cas d'utilisation courants
- Notifier une application parente (par exemple, un LMS ou un portail institutionnel) lorsqu'un participant atteint un certain point ou termine une tâche.
- Transmettre une valeur de variable, telle qu'un score, une réponse ou une étiquette de condition, à un système externe en temps réel.
La configuration à deux côtés
Utiliser postMessage entre Labvanced et une page externe (telle qu'un iFrame ou une application parente) est un processus à deux côtés. Labvanced gère un côté : cette action envoie le message. L'autre côté est la page externe, qui doit être programmée pour le recevoir.
L'API postMessage est une fonctionnalité standard du navigateur. La page externe a besoin d'un window.addEventListener('message', handler) écouteur pour réceptionner les messages de Labvanced. Cet écouteur doit également filtrer par domaine, en vérifiant que l'origine du message est Labvanced, afin de ne répondre qu'aux messages provenant d'une source de confiance. Vous ou votre développeur devrez écrire ce code. Un outil de codage AI peut aider à le générer rapidement si nécessaire.
Comment ça fonctionne
Lorsque cette action est déclenchée, Labvanced envoie un postMessage à la fenêtre cible. Le message est livré à toute page au Destination Domain qui écoute avec un window.addEventListener('message', handler).
La charge utile du message contient le Value to send. Si un Key est défini, il est inclus dans la charge utile afin que le destinataire puisse identifier le type de message et le traiter en conséquence.
La page externe est responsable du traitement du message. Son écouteur doit vérifier l'origine du message avant d'agir, pour s'assurer qu'il ne répond qu'aux messages envoyés par Labvanced.
Lors de la sélection de Send PostMessage, la configuration suivante apparaîtra :
Options d'action
| Éléments de menu | Options de l'action Envoyer PostMessage |
|---|---|
Destination Domain | Spécifie l'origine cible qui doit recevoir le message. La valeur par défaut est *, qui envoie à n'importe quelle origine. Remplacez * par l'URL cible complète (par exemple, https://yoursite.com) lorsque la destination est connue. Il est recommandé de spécifier le domaine exact pour des raisons de sécurité. |
Key | Attache une clé d'identification au message sortant. Cela structure la charge utile du message comme Key: value, que le destinataire peut utiliser pour distinguer différents types de messages. Laissez vide si aucune clé n'est nécessaire. |
Value to send | Définit les données à inclure dans le message sortant. Cliquez sur l'icône de modification pour ouvrir le Value-Select Menu et spécifier quoi envoyer : une valeur constante, une variable Labvanced ou une expression. |
Note : Le système recevant le message (la page parente ou l'application externe) doit implémenter un window.addEventListener('message', ...) écouteur pour gérer le postMessage entrant de Labvanced.
Lectures supplémentaires et matériaux ouverts
- Déclencheur de message post reçu : le déclencheur associé pour écouter les postMessages entrants d'origine externe.
- Menu de sélection de valeur : comment définir quelle valeur envoyer en utilisant des variables, des constantes ou des expressions.
- Extension Labvanced Web Bridge : contexte sur la façon dont postMessage est utilisé pour la communication avec des sites web externes intégrés.
- Aperçu des événements : une introduction complète au système de logique déclencheur et d'action dans Labvanced.