IFrame erstellen

Um einen Demo-Floating-IFrame zu erstellen, geben Sie diese Feldwerte ein. Dadurch wird ein Beispiel-IFrame mit einer Schaltfläche zum Erweitern und Reduzieren des Fensters erstellt. 

• Anwendungs-URL: https://app-bridge-example-app.herokuapp.com/
• Client-ID: 12345

Datenaustausch zwischen schwebendem IFrame und Chatbot

Dritte können mit Coupa über die Javascript Postmessage API kommunizieren.  In diesem Beispiel legt der Benutzer den Namen der Eigenschaft app_secret mit dem Wert 123456 fest.

Der untenstehende Code bietet dem Dritten Zugriff auf diese eingebettete App.

// A function to send a postmessage call from your chatbot to Coupa Core and get the property value

const getSecret = () => {

  const propertyName = "App_Secret";

  window.parent.postMessage(

    {

      action: "getSecret", // Nachrichtentyp.

      client_id: "Kunden-ID für den schwebenden Iframe",

      iframe_id: "Iframe-ID für den schwebenden Iframe",

      daten: {

        key: "app_secret" // Eigenschaftsname, den Sie in diesem Fall von Floating Iframe.app_secret abrufen möchten.

      }

    }, "*"

  );

}



// This is the listener event which will listen to the incomming postmessage events

// von Coupahost zu Ihrem Chatbot.

window.addEventListener("Nachricht", Funktion(Ereignis){

  var eventData = event.data;

  switch(eventData.action) {

    fall „returnSecret“:

      console.log(eventData.data) // Dadurch wird der Eigenschaftswert auf der Konsole des Browsers gedruckt

      pause;

  }

});



getSecret(); // Aufruf zum Auslösen des Postnachrichtenaufrufs, um das Geheimnis aus dem Coupa-Kern abzurufen.

Ändern der Größe eines schwebenden IFrame

Sie können die Größe von schwebenden IFrames mithilfe der JavaScript Postmessage-API ändern.  Beispiel:

// Eine Funktion zum Senden eines Postnachrichtenanrufs von Ihrem Chatbot an Coupa Core, um die Größe zu ändern.

funktion Größe ändern(Optionen = {}){

  window.parent.postMessage(

    {

      action: "Größe ändern",

      client_id: "Client-ID für den schwebenden iframe",

      iframe_id: "IFrame-ID für den schwebenden iframe",

      daten: {

        höhe: 300, // Höhe in px

        breite: 300, // Breite in px

        initial: options.initial // Setzen Sie dies zum Zeitpunkt des Ladens der Seite auf true, andernfalls auf false

      }

    }, "*" // ersetzen * durch die Coupahost-URL für mehr Sicherheit

  );

}



resize({ initial: true }) // Rufen Sie diese Funktion mit initial: true zum Zeitpunkt des Neuladens der Seite auf.

größenänderung({ initial: false }) // Rufen Sie diese Funktion mit initial: false zum Zeitpunkt des Tastenklicks auf, um die Größe zwangsweise zu ändern.

In diesem Beispiel sind die Parameter wie folgt definiert: 

• client_id: Wie die Client-ID, die als Floating-IFrame-Seite konfiguriert ist.
• Iframe_id: IFrame-ID des von Ihnen erstellten schwebenden IFrame. Diesen Wert erhalten Sie über die IFrame-URL.

Mit dem folgenden Code wird die ID der eingebetteten App für den Drittanbieter abgerufen:

// Auf Ihrer Chatbot-Seite hilft Ihnen der folgende Code, die Iframe-ID zu erhalten.

let urlParams = new URLSearchParams(document.location.search);

urlParams.get("floating_iframe_id") // erhält iframe id

urlParams.get("coupahost") // erhält Coupahost, der zur Verbesserung der Postnachrichtensicherheit verwendet werden kann

Parameter

• höhe: Höhe, die der IFrame in px haben soll.
• breite : Breite, die der IFrame in px haben soll.
• initial : Das anfängliche Flag kann entweder wahr oder falsch sein:
  • True: Um die neueste Größe Ihres IFrame zu speichern und anzuwenden, übergeben Sie initial: true. Wenn Ihr IFrame beispielsweise 300 x 300 beträgt und Sie die Seite neu laden, behält das System nach dem Neuladen der Seite die gleiche Größe des IFrame bei. Wenn es keine aktuelle Größe gibt und Ihr Chatbot zum ersten Mal geladen wird, übernimmt das System die übergebene Höhe und Breite für das Größenänderungsereignis.
  • False: Um die Größe eines IFrame beim Klicken auf die Schaltfläche zu ändern, übergeben Sie initial: false. Dadurch wird die Größe des IFrame unabhängig von der zuletzt gespeicherten IFrame-Größe zwangsweise an die übergebene Höhe und Breite angepasst.

Größenbeschränkungen

Es gibt ein Größenlimit, bis zu dem Sie die Größe Ihres IFrame ändern können.

Maximallimits

• MAX_IFRAME_HEIGHT = 600px
• MAX_IFRAME_WIDTH = 565px

Untergrenze

• MIN_IFRAME_HEIGHT = 20px
• MIN_IFRAME_WIDTH = 20px

Eingebettete IFrames

Embed IFrames anywhere Coupa unterstützt Panel-Apps und stellt spezifische Coupa-Attribute für Ihre IFrame-Callout-Abfrage bereit. Eingebettete Apps fügen bestimmten Seiten wie der Startseite, der Lieferantenseite, dem Warenkorb usw. Kontext hinzu.  

IFrame einbetten

Verfügbare Standorte

Coupa unterstützt die folgenden Standorte:

IFrame-App-Abfragezeichenfolgen

Da IFrame-Apps eine externe Website oder einen externen Dienst aufrufen, fügt Coupa der Anwendungs-URL einige Abfrageparameter hinzu. Sie können diese Felder verwenden, um den Benutzer zu identifizieren und ihm eine personalisierte Erfahrung zu bieten.

Überlegungen

• Für IFrame-Apps in Coupa wird nur das HTTPS-Protokoll unterstützt
• Der Kunde muss ein SSO oder angemessene Sicherheitseinschränkungen für seine IFrame-Anwendung einhalten
• Da ein IFrame einen Anwendungsdaten-/Inhaltsfluss eines Drittanbieters nutzt, kann er auf Coupa-Seite nicht gesteuert werden. Dies kann das Risiko erhöhen, eine potenzielle Schwachstelle in der Anwendung zu haben oder einfach mit einer schlechten Benutzererfahrung (wie einer automatischen Videowiedergabe) umgehen zu müssen. Es wird empfohlen, dass Kunden die IFrame-Funktionen auf die Bedürfnisse ihrer Benutzer beschränken.
• Nicht alle Anwendungen unterstützen die IFrame-Funktionen. Kunden müssen überprüfen, ob ihre Anwendung IFrames zulässt, um sie in Coupa zu verwenden
  • Kunden sollten auch sicherstellen, dass die von ihnen verwendeten Webbrowser IFrames unterstützen
• Das Laden der Kundenanwendungsseiten sollte nicht länger dauern, da dies die Benutzerleistung/-erfahrung beeinträchtigen kann
• Wenn eine Anwendung eines Drittanbieters eine "X-Frame-Optionen" sendet: SAMEORIGIN" Antwortheader, diese Option verhindert, dass der Webbrowser IFrames anzeigt, die nicht auf derselben Domain wie die übergeordnete Seite gehostet werden