Créer un IFrame

Les IFrames vous permettent d'intégrer du contenu provenant d'un tiers dans votre instance Coupa. Il existe deux types d'applications IFrame : 

• IFrames flottantes : L'IFrame est persistant et se trouve à droite du botton ou à la page vers laquelle l'utilisateur navigue. Lors de la configuration d'une IFrame, l'emplacement est défini sur Flottant. Voir IFrames flottantes ci-dessous. 

• IFrames intégrées : IFrame est incorporé dans une page désignée. Lors de la configuration d'une IFrame, l'emplacement est défini sur une page spécifique.

IFrames flottants

Les IFrames incluent un type d'IFrame flottant qui apparaît sur chaque page dans Coupa Core. Avec les IFrames flottantes, les administrateurs Coupa peuvent désormais ajouter leurs outils tiers tels que le chat ou d'autres widgets d'aide pour chaque page de Coupa à laquelle leurs utilisateurs peuvent accéder. Les utilisateurs n'ont pas besoin de quitter Coupa pendant qu'ils reçoivent de l'aide de votre équipe informatique ou de support.

Coupa place un petit onglet IFrame flottant en bas à droite de l'interface utilisateur Web principale. L'onglet ne colle pas à une page, mais suit l'utilisateur partout où il va dans Coupa. Les données de l'onglet suivent également l'utilisateur et ne perdent aucune information si l'utilisateur clique. Lorsque l'utilisateur clique sur le petit onglet, l'onglet s'ouvre pour révéler le client de chat ou le widget d'aide que l'administrateur a configuré. Les IFrames flottantes qui permettent d'agrandir et de réduire comprennent un bouton interactif pour agrandir et réduire la fenêtre.

Créer un IFrame flottant

Créez un IFrame flottant en suivant ces étapes. Les administrateurs peuvent créer jusqu'à trois IFrames flottantes qui s'affichent les unes à côté des autres en bas à droite de la fenêtre, en se déplaçant vers la gauche à chaque nouvel onglet. 

1. Accédez à Configuration > IFrames et Panels et cliquez sur Create.
2. Définissez l'emplacement sur Flottant et remplissez l'URL.
3. Définissez le champ Identifiant du client . Il s'agit d'un identifiant unique utilisé par le tiers pour s'assurer qu'il communique avec la bonne application Coupa Embedded. Il peut s'agir de n'importe quelle chaîne unique. Les IFrames flottantes ne peuvent pas avoir le même ID client.
4. Remplissez le champ Descripteur. Il s'agit de données JSON qui comprennent des paramètres et des données à partager avec le tiers. Par exemple :

   {
   
      "properties" : {
   
         "app_key" : {
   
            "type" : "string"
   
         },
   
         "app_secret" : {
   
            "type" : "string"
   
         }
   
      }
   
   }

   Dans l'exemple ci-dessus, il existe deux propriétés personnalisées,app_key etapp_secret, toutes deux de type string. Une fois ajoutées au champ Descripteur, les propriétés que vous créez sont ajoutées à la section Propriétés de l'application.

5. Définir l'URL de l'application. Il s'agit de l'URL du tiers à afficher dans l'application intégrée.
6. Cliquez sur Sauvegarder Lorsque vous rouvrez l'enregistrement IFrame, vous pouvez ajouter des valeurs aux propriétés que vous avez ajoutées à la section Propriétés de l'application. 

Pour créer une IFrame flottante de démonstration, entrez ces valeurs de champ. Cela crée un exemple d'IFrame avec un bouton pour développer et réduire la fenêtre. 

• URL de l'application : https://app-bridge-example-app.herokuapp.com/
• ID du client : 12345

Échange de données entre IFrame flottant et chatbot

Les tiers peuvent communiquer avec Coupa à l'aide de l'API Javascript Postmessage.  Dans cet exemple, l'utilisateur définit le nom de la propriété app_secret avec la valeur 123456.

Le code ci-dessous permet au tiers d'accéder à cette application intégrée.

// Une fonction pour envoyer un appel post-message de votre chatbot à Coupa Core et obtenir la valeur de la propriété

const getSecret = () => {

  const propertyName = "app_secret" ;

  window.parent.postMessage(

    {

      action : "getSecret", //Type de message.

      client_id : "Identifiant client pour l'Iframe flottant",

      iframe_id : "ID Iframe pour l'Iframe flottant",

      data : {

        key : "app_secret" //Nom de la propriété que vous souhaitez obtenir à partir de Floating Iframe. app_secret dans ce cas.

      }

    }, "*"

  );

}



// Il s'agit de l'événement d'écoute qui écoutera les événements post-messages incomming

// de Coupahost à votre chatbot.

window.addEventListener("message", fonction(événement){

  var eventData = event.data ;

  switch(eventData.action) {

    case "returnSecret" :

      console.log(eventData.data) // Cela imprimera la valeur de la propriété sur la console du navigateur

      pause ;

  }

});



getSecret() ; // Appel pour déclencher l'appel post-message pour récupérer le secret à partir du noyau Coupa.

Redimensionner un IFrame flottant

Vous pouvez redimensionner des IFrames flottantes à l'aide de l'API Javascript Postmessage.  Par exemple :

// Une fonction pour envoyer un appel post-message de votre chatbot à Coupa Core pour le redimensionner.

redimensionnement de la fonction (options = {}){

  window.parent.postMessage(

    {

      action : "redimensionner",

      client_id : "ID client pour l'iframe flottant",

      iframe_id : "ID IFrame pour l'iframe flottant",

      data : {

        hauteur : 300, // hauteur en px

        largeur : 300, // largeur en px

        initial : options.initial // Définissez ceci sur true au moment du chargement de la page, false sinon

      }

    }, "*" // remplacez * par l'URL coupahost pour une sécurité renforcée

  );

}



redimensionner({ initial : true }) // Appelez cette fonction avec initial : true au moment du rechargement de la page.

redimensionner({ initial : false }) // Appelez cette fonction avec initial : false au moment du clic sur le bouton pour redimensionner avec force.

Dans cet exemple, les paramètres sont définis comme suit : 

• client_id : Identique à l'ID client configuré comme côté IFrame flottant.
• Iframe_id : ID IFrame de l'IFrame flottante que vous avez créée. Vous pouvez obtenir cette valeur à partir de l'URL IFrame.

Le code ci-dessous récupère l'ID de l'application intégrée pour le tiers :

// Du côté de votre chatbot, le code ci-dessous vous aidera à obtenir l'ID Iframe.

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

urlParams.get("floating_iframe_id") // obtient l'identifiant iframe

urlParams.get("coupahost") // obtient coupahost qui peut être utilisé pour améliorer la sécurité des messages postaux

Paramètres

• hauteur : Hauteur à laquelle vous souhaitez que l'IFrame soit en px.
• largeur : Largeur que vous souhaitez que l'IFrame soit en px.
• initial : L'indicateur initial peut être soit vrai/faux :
  • Vrai : Pour enregistrer et appliquer la taille la plus récente de votre IFrame, passez initial : true. Par exemple, si votre IFrame est de 300 x 300 et que vous rechargez la page, le système conserve la même taille de l'IFrame après le rechargement de la page. S'il n'y a pas de taille récente et que votre chatbot est chargé pour la première fois, le système prend la hauteur et la largeur passées pour l'événement de redimensionnement.
  • Faux : Pour redimensionner une IFrame en cliquant sur le bouton, passez initial : false. Cela redimensionne avec force l'IFrame à la hauteur et à la largeur passées, quelle que soit la dernière taille enregistrée de l'IFrame.

Limites de taille

Il existe une limite de taille jusqu'à laquelle vous pouvez redimensionner votre IFrame.

Limites maximales

• MAX_IFRAME_HEIGHT = 600px
• MAX_IFRAME_WIDTH = 565px

Limites minimales

• MIN_IFRAME_HEIGHT = 20px
• MIN_IFRAME_WIDTH = 20px

IFrames intégrés

Intégrez IFrames partout où Coupa prend en charge les applications de panneau et fournissez des attributs Coupa spécifiques à votre requête IFrame. Les applications intégrées ajoutent du contexte à des pages spécifiques comme la page d'accueil, la page fournisseur, le panier d'achat, etc.  

Intégrer un IFrame

1. Accédez à Configurer les applications > installées de > la plate-forme.
2. Cliquez sur Créer et choisissez Créer une application IFrame  
3. Dans le menu déroulant Emplacement, spécifiez l'emplacement de l'application. Si vous laissez le champ d'emplacement vide, il n'apparaîtra sur aucune page spécifique et vous devrez créer un élément de menu pour l'application IFrame, comme auparavant. Si vous choisissez un emplacement, l'option Ouvrir dans une nouvelle fenêtre disparaît.

Emplacements disponibles

Coupa prend en charge les emplacements suivants :

Chaînes de requête de l'application IFrame

Parce que les applications IFrame appellent un site Web ou un service externe, Coupa ajoute des paramètres de requête à l'URL de l'application. Vous pouvez utiliser ces champs pour identifier l'utilisateur et lui offrir une expérience personnalisée.

Considérations

• Seul le protocole HTTPS est pris en charge pour les applications IFrame dans Coupa
• Le client doit maintenir une SSO ou des contraintes de sécurité appropriées pour son application IFrame
• Étant donné qu'un IFrame tire parti d'un flux de données/contenu d'application tiers, il ne peut pas être contrôlé du côté de Coupa. Cela peut augmenter le risque d'avoir une vulnérabilité potentielle dans l'application ou simplement d'avoir à faire face à une mauvaise expérience utilisateur (comme une lecture automatique vidéo). Il est recommandé que les clients limitent les capacités IFrame aux besoins de leurs utilisateurs.
• Toutes les applications ne prennent pas en charge les capacités IFrame, les clients doivent vérifier pour s'assurer que leur application autorise IFrames afin de l'utiliser dans Coupa
  • Les clients doivent également s'assurer que les navigateurs Web qu'ils utilisent prennent en charge les IFrames
• Les pages d'application client ne devraient pas prendre plus de temps à charger car cela peut affecter les performances/l'expérience de l'utilisateur
• Si une application tierce envoie une « X-Frame-Options : En-tête de réponse SAMEORIGIN, cette option empêche le navigateur web d'afficher des IFrames qui ne sont pas hébergées sur le même domaine que la page parent