Visualizzazione web

La piattaforma Messenger ti consente di aprire una visualizzazione web standard, in cui puoi caricare pagine web all'interno di Messenger. Questo ti consente di offrire esperienze e funzioni che potrebbe essere difficile garantire con i messaggi, come la selezione di prodotti da acquistare, posti da prenotare o date da riservare.

Apertura della visualizzazione web

Puoi aprire la visualizzazione web con uno dei metodi seguenti:

In ognuno di questi casi, puoi specificare l'aspetto e il comportamento della visualizzazione web.

Se la tua esperienza usa le estensioni Messenger descritte in questa sezione, ricorda di impostare il parametro messenger_extensions su true nella voce di menu o nel pulsante da cui lo richiami.

SDK per le estensioni di Messenger: autorizzazione del dominio richiesta

Per visualizzare una pagina web con l'SDK per le estensioni di Messenger abilitato nella visualizzazione web di Messenger, devi aggiungere alla whitelist il dominio, includendo il sottodominio nella proprietà whitelisted_domains del profilo Messenger del tuo bot. In questo modo, solo i domini affidabili possono accedere alle informazioni sull'utente disponibili attraverso le funzioni dell'SDK.

Per maggiori informazioni sull'aggiunta alla whitelist dei domini, consulta il riferimento whitelisted_domains.

Impostazione del titolo della visualizzazione web

Come con qualsiasi pagina web, il tag <title> definisce il testo visualizzato nella barra del titolo della visualizzazione web.

<html><head><title>My Awesome Webview</title></head>
   ...
</html>

Chiusura della visualizzazione web

È una buona idea chiudere la visualizzazione web al termine di una transazione, soprattutto se le azioni intraprese dall'utente determineranno un messaggio nella conversazione. Questa operazione può essere eseguita con l'SDK per le estensioni di Messenger oppure usando un URL di reindirizzamento.

Chiusura con l'SDK per le estensioni di Messenger

Per chiudere la visualizzazione web usando l'SDK per le estensioni di Messenger, chiama MessengerExtensions.requestCloseBrowser(). Inoltre, puoi implementare facoltativamente funzioni di callback in caso di azione eseguita correttamente o errore.

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

Chiusura con reindirizzamento

Puoi chiudere la visualizzazione web anche reindirizzando l'utente a un URL con il formato seguente:

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

I valori impostati per i parametri display_text e image_url vengono visualizzati brevemente fino alla chiusura della finestra. Questo metodo determinerà la chiusura solo se effettui il reindirizzamento dal tuo URL/dalla tua Pagina. L'apertura diretta dell'URL non chiuderà il browser.

Questo metodo funziona solo su Android. Su iOS, verranno visualizzati testo e immagine, ma il browser non si chiuderà automaticamente.

SDK per le estensioni di Messenger

Per darti la possibilità di integrare perfettamente le esperienze nella visualizzazione web con l'esperienza di Messenger, abbiamo anche reso disponibile l'SDK JS per le estensioni di Messenger, che rende accessibili funzionalità aggiuntive nella visualizzazione web, come le informazioni sul contesto della conversazione.

Per maggiori informazioni, consulta Aggiunta dell'SDK per le estensioni di Messenger.

Best practice

Usala per interazioni più lunghe (più di tre passaggi) in cui le persone potrebbero voler modificare il loro input o procedere in modo non lineare.

Usala per contenuti principalmente visivi.

Usala per le preferenze dell'utente o per consentire modifiche su richiesta alle selezioni precedenti.

Usala in combinazione con più interazioni conversazionali.

Configura l'altezza della visualizzazione web in modo che si adatti al contenuto e preserva il contesto della conversazione sottostante.

Sfrutta le estensioni della visualizzazione web di Messenger per portare il contesto della conversazione nella visualizzazione web.

Non devi necessariamente raccogliere tutte le informazioni del modulo in una sola volta. Puoi acquisirle volta per volta in modo conversazionale, per poi utilizzare un modulo nella visualizzazione web per le modifiche successive.

Mescola interazioni conversazionali e nella visualizzazione web e mantieni breve qualsiasi interazione. Combina le interazioni nella conversazione e nella visualizzazione web per un'esperienza "nativa di Messenger".

Esempi di utilizzo

  • In un'esperienza di ricerca dei biglietti può essere mostrata una mappa interattiva dei posti allo stadio per la scelta del posto.
  • In un'esperienza di viaggio possono essere presentate le preferenze di viaggio (corridoio o finestrino, pensione o hotel, esigenze alimentari) accessibili dal menu always-on.
  • In un'esperienza che consente di prendere appuntamento dal dentista può essere mostrato un calendario interattivo per la scelta della fascia oraria per l'appuntamento.
  • Un editore di notizie può fornire un elenco multi-selezione di argomenti su cui ricevere aggiornamenti.
  • Un brand può consentire di personalizzare offerte e omaggi nelle preferenze personali.

Flusso di configurazione consigliato

  1. Le persone accedono alla tua visualizzazione web in due modi: tramite un pulsante se la visualizzazione web fa parte di un flusso conversazionale più ampio oppure da una voce di menu per l'accesso continuo (ad es. preferenze) oppure usando entrambi questi metodi.
  2. La tua esperienza appare come un livello sopra la conversazione: a schermo intero, al 75% di altezza o al 50% di altezza, a seconda del contenuto e del caso d'uso.
  3. Potresti voler inviare contenuto alla conversazione durante o dopo l'interazione nella visualizzazione web.
  4. Al termine, le persone possono chiudere la visualizzazione web e tornare alla conversazione, oppure puoi chiuderla tu in risposta alle azioni intraprese dagli utenti (ad esempio, un pulsante Salva).