Webview

La plateforme Messenger vous permet d’ouvrir une webview standard, grâce à laquelle vous pouvez charger des pages Web dans Messenger. Vous pouvez ainsi proposer des expériences et des fonctionnalités qu’il serait autrement difficile d’offrir avec des bulles de message, comme sélectionner des produits à acheter ou des places ou des dates à réserver.

Affichage de la Webview

Vous pouvez ouvrir la webview avec :

le menu fixe ;
un bouton d’URL au sein d’un message, y compris le modèle générique ;
un plugin de discussion.

Pour chacune de ces instances, vous pouvez indiquer à quoi la webview doit ressembler et comment elle doit fonctionner.

Si votre expérience utilise les extensions de Messenger décrites dans cette section, pensez à définir le paramètre messenger_extensions sur true dans l’élément de menu ou le bouton à partir duquel vous l’invoquez !

SDK Messenger Extensions : liste blanche obligatoire de domaines

Pour afficher une page web avec le SDK Messenger Extensions activé dans la webview Messenger, vous devez mettre le domaine sur liste blanche, sous-domaine inclus, dans la propriété whitelisted_domains du profil Messenger de votre bot. Ainsi, seuls les domaines de confiance auront accès aux informations utilisateur disponibles via les fonctions du SDK.

Pour en savoir plus sur les domaines en liste blanche, consultez la référence whitelisted_domains.

Définition du titre de la Webview

Comme avec n’importe quelle page Web, le tag <title> définit le texte qui apparaît dans la barre de titre pour la webview.

<html><head><title>Ma webview géniale</title></head> ... </html>

Fermeture de la webview

Il est recommandé de fermer la webview lorsqu’une transaction est terminée, en particulier si les actions effectuées par l’utilisateur ou l’utilisatrice se concluent par un message dans le fil de discussion. Vous pouvez pour cela utiliser le SDK Messenger Extensions ou une URL de redirection.

Fermeture avec le SDK Messenger Extensions

Pour fermer la webview en utilisant le SDK Messenger Extensions, appelez MessengerExtensions.requestCloseBrowser(). Il est également possible d’implémenter des fonctions de rappel de succès et d’erreur.

MessengerExtensions.requestCloseBrowser(function success() {
  // webview closed
}, function error(err) {
  // an error occurred
});

Fermeture avec une redirection

Vous pouvez également fermer la webview en redirigeant l’utilisateur ou l’utilisatrice vers une URL grâce au format suivant :

https://www.messenger.com/closeWindow/?image_url=<IMAGE_URL>&display_text=<DISPLAY_TEXT>

Les valeurs définies pour les paramètres display_text et image_url s’afficheront brièvement jusqu’à ce que la fenêtre se ferme. Notez que cette méthode ne fermera la webview que si vous effectuez la redirection depuis votre URL ou votre Page. L’ouverture directe de l’URL ne fermera pas le navigateur.

Cela fonctionne uniquement sur Android. Sur iOS, le texte et l’image s’affichent, mais le navigateur ne se ferme pas automatiquement.

SDK Messenger Extensions

Pour vous permettre d’intégrer des expériences dans la webview avec Messenger, nous avons également développé le SDK JS Messenger Extensions. Celui-ci permet d’accéder à d’autres fonctionnalités dans la webview, comme des informations sur le contexte du fil de discussion.

Pour en savoir plus, voir la page Ajout du SDK Messenger Extensions.

Recommandations

Utilisez-le pour des interactions plus longues (de plus de trois étapes) lorsque les utilisateurs et utilisatrices souhaitent modifier leurs entrées ou procéder selon un mode non linéaire.

Utilisez-le pour du contenu majoritairement visuel.

Utilisez-le pour les préférences utilisateur ou pour autoriser les modifications des sélections précédentes à la demande.

Utilisez-le en association avec des interactions plus conversationnelles.

Configurez la hauteur de votre webview en fonction de son contenu et de manière à préserver le contexte du fil de discussion en dessous.

Tirez profit des extensions webview de Messenger pour indiquer le contexte du fil de discussion dans la webview.

Ne vous limitez pas à la collecte de toutes les informations du formulaire en une fois. Vous pouvez les capturer, élément par élément, grâce à une conversation, puis utiliser un formulaire dans la webview pour les modifications ultérieures.

Mélangez les interactions conversationnelles et webview, et utilisez seulement des interactions courtes. Combinez les interactions webview et du fil de discussion pour une expérience « native à Messenger ».

Exemples d’utilisations

Une expérience de recherche de billets peut afficher un plan interactif du stade pour la sélection de sièges.
Une expérience de voyage peut fournir des préférences de voyage (couloir ou fenêtre, auberge ou hôtel, exigences alimentaires) accessibles depuis le menu fixe.
Une expérience de prise de rendez-vous chez le ou la dentiste peut afficher un calendrier interactif pour choisir une heure de rendez-vous.
Un éditeur d’actualités peut proposer une liste à sélection multiple de sujets auxquels souscrire.
Une marque peut proposer des préférences personnelles pour personnaliser les offres et les cadeaux gratuits.

Flux de conception recommandé

Il est possible d’accéder à votre expérience webview de deux manières : grâce à un bouton si elle fait partie d’un flux conversationnel plus grand, à partir d’un élément de menu pour un accès continu (par exemple, préférences) ou bien des deux manières.
Votre expérience apparaît comme une couche au-dessus du fil de discussion : plein écran, hauteur à 75 % ou à 50 % selon votre contenu et le cas d’utilisation.
Il est possible d’envoyer du contenu dans le fil de discussion pendant ou après une interaction webview.
Une fois la tâche terminée, les participants et participantes peuvent fermer la webview et retourner sur le fil de discussion. Vous pouvez également la fermer vous-même en fonction de leurs actions (par exemple, lorsqu’ils appuient sur le bouton Enregistrer).