Messenger-Plattform

Webansicht

Du kannst eine Standard-Webansicht mit der Messenger-Plattform öffnen und dort Webseiten im Messenger laden. So kannst du Erlebnisse und Features anbieten, die sich nur schwer mit Nachrichten-Bubbles ermöglichen lassen, wie das Auswählen von zu kaufenden Produkten, zu buchenden Plätzen oder zu reservierenden Terminen.

Webansicht anzeigen

Du kannst die Webansicht wie folgt öffnen:

In jeder dieser Vorgehensweisen kannst du das Erscheinungsbild und Verhalten deiner Webansicht angeben.

Wenn dein Erlebnis die in diesem Abschnitt beschriebenen Messenger-Erweiterungen nutzt, denke daran, den messenger_extensions-Parameter des Menüelements oder Buttons, über das bzw. den du die Erweiterungen ausführen möchtest, auf true zu setzen.

SDK für Messenger-Erweiterungen – Domain auf Positivliste setzen erforderlich

Um eine Webseite mit aktiviertem SDK für Messenger-Erweiterungen in der Messenger-Webansicht anzuzeigen, musst du in der whitelisted_domains-Eigenschaft des Messenger-Profils deines Bots Domain-Whitelisting nutzen, einschließlich für die Subdomain. Dies sorgt dafür, dass nur vertrauenswürdige Domains Zugriff auf Nutzerinformationen haben, die über SDK-Funktionen verfügbar sind.

Weitere Informationen zu Domain-Whitelisting findest du in der whitelisted_domains-Referenz.

Titel der Webansicht festlegen

Wie bei jeder Webseite legt das <title>-Tag den Text fest, der in der Titelleiste für die Webansicht angezeigt wird.

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

Webansicht schließen

Du solltest die Webansicht nach Abschluss einer Transaktion schließen, ganz besonders, wenn Handlungen des*der Nutzer*in zu einer Nachricht im Thread führen. Dazu kannst du das SDK für Messenger-Erweiterungen oder eine Umleitungs-URL verwenden.

Schließen mit SDK für Messenger-Erweiterungen

Um die Webansicht mit dem SDK für Messenger-Erweiterungen zu schließen, rufe MessengerExtensions.requestCloseBrowser() auf. Du kannst optional auch Funktionen für Erfolgs- oder Fehlerrückrufe implementieren.

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

Mit Umleitung schließen

Du kannst die Webansicht auch schließen, indem du den*der Nutzer*in zu einer URL mit folgendem Format umleitest:

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

Bis das Fenster geschlossen wird, werden kurz die Werte angezeigt, die für die Parameter display_text und image_url angegeben sind. Beachte, dass diese Methode die Ansicht nur schließt, wenn die Umleitung von deiner URL/Seite erfolgt. Durch das direkte Öffnen der URL wird der Browser nicht geschlossen.

Dies funktioniert nur unter Android. Bei iOS werden der Text und das Bild zwar angezeigt, aber das Browserfenster wird nicht automatisch geschlossen.

SDK für Messenger-Erweiterungen

Damit du Erlebnisse eng in die Webansicht mit dem Messenger-Erlebnis integrieren kannst, steht dir auch das JS-SDK für Messenger-Erweiterungen zur Verfügung. Damit werden zusätzliche Funktionen in der Webansicht verfügbar wie Informationen zum Thread-Kontext.

Weitere Informationen dazu findest du unter Hinzufügen des SDK für Messenger-Erweiterungen.

Best Practices

Verwende dies bei längeren Interaktionen (mit mehr als drei Schritten), bei denen Personen ihre Eingabe eventuell bearbeiten oder andere nicht lineare Handlungen ausführen möchten.

Verwende dies bei besonders visuellen Inhalten.

Verwende dies für Nutzereinstellungen oder On-Demand-Änderungen an zuvor gewählten Optionen.

Verwende dies in Kombination mit Interaktionen, die eher auf Unterhaltungen basieren.

Passe die Höhe deiner Webansicht an ihren Inhalt an und behalte den Kontext des Threads darunter bei.

Nutze die Webansichtserweiterungen von Messenger, um den Kontext des Threads in die Webansicht zu übertragen.

Du musst nicht alle Formularinformationen gleichzeitig erfassen. Du kannst sie nach und nach in einer Unterhaltung erfassen und dann ein Formular in der Webansicht für spätere Änderungen verwenden.

Vermische unterhaltungsbasierte und Webansichts-Interaktionen. Achte dabei darauf, jede Interaktion kurz zu halten. Kombiniere Thread- und Webansichtsinteraktionen, um ein „Messenger-natives“ Erlebnis zu erschaffen.

Anwendungsbeispiele

  • Ein Erlebnis für die Ticketsuche kann einen interaktiven Sitzplan für das Stadium anzeigen, in dem der*die Nutzer*in einen Platz auswählen kann.
  • Ein Reiseerlebnis kann Reiseeinstellungen bereitstellen (Gang oder Fenster, Pension oder Hotel, spezielle Ernährungswünsche), die über das beständige Menü aufgerufen werden können.
  • Ein Erlebnis für Zahnarzttermine kann einen interaktiven Kalender für die Auswahl eines Termins anzeigen.
  • Ein Nachrichten-Herausgeber kann eine Mehrfachauswahl-Liste an Themen bereitstellen, die abonniert werden können.
  • Eine Marke kann persönliche Einstellungen anbieten, um Angebote und Geschenke zu personalisieren (siehe Demo unten).

Empfohlener Designablauf

  1. Nutzer*innen greifen mit einer von zwei Methoden auf dein Webansichtserlebnis zu: über einen Button, wenn dieser zu einem umfangreicheren Unterhaltungsablauf gehört, oder über einen Menüpunkt für den dauerhaften Zugriff (z. B. Einstellungen) – oder auch beides.
  2. Dein Erlebnis erscheint als Ebene über dem Thread – in Vollbildanzeige, mit einer Höhe von 75 % oder 50 % (je nach deinem Inhalt und dem Anwendungsfall).
  3. Du kannst Inhalte während oder nach der Webansichtsinteraktion an den Thread senden.
  4. Wenn sie fertig sind, können Personen die Webansicht schließen und zum Thread zurückkehren. Du kannst ihn aber auch selber als Reaktion auf bestimmte Handlungen (wie z. B. den Button „Speichern“) schließen.