Découvrir les méthodes et événements Metaframe

Objet window.metaframe

Une fois le script chargé, l’objet metaframe devient accessible dans l’objet global window de votre application. Cet objet metaframe contient une série de méthodes essentielles pour gérer Metaframe dans votre application Web.

Méthode window.metaframe.create

Signature de la méthode :

window.metaframe.create: (parameters: {
 loginProjectId: string,
 merchantId?: number,
 projectId?: number,
 orbsApiHostId?: string,
 isMobile?: boolean,
 isCollapsed?: boolean,
 layoutSettings?: {
     desktop: {
       widgetMarginTop?: number,
     },
     mobile: {
       widgetMarginTop?: number,
     },
   },
}) => void;

Initialise Metaframe dans votre application Web.

Méthode window.metaframe.setIsMobile

Signature de la méthode :

window.metaframe.setIsMobile(isMobile: boolean)

Bascule Metaframe de la version bureau à la version mobile ou vice versa.

Objet window.metaframe.partnerActions

L’objet contient des méthodes permettant de déclencher des actions dans Metaframe.

Avant d’utiliser les méthodes de cet objet, vérifiez que Metaframe est entièrement chargé. Pour cela, souscrivez à l’événement de chargement de Metaframe. Une fois l’événement traité, les méthodes de l’objet deviennent disponibles.

Exemple d’implémentation d’un écouteur pour l’événement de chargement de Metaframe :

window.addEventListener("@metaframe-partner-events:app-loaded", () => {

 //Here you can use partner actions

});

Méthode window.metaframe.partnerActions.openBackpackItemPage

Signature de la méthode :

openBackpackItemPage: (itemId: string) => void;

Ouvre la page de l’objet spécifié dans la sectionBackpack.

Pour que la méthode fonctionne correctement, les conditions suivantes doivent être remplies :

• La fonction Backpack est activée dans le Compte éditeur.
• L’utilisateur est authentifié dans Metaframe.

Méthode window.metaframe.partnerActions.openLogin

Signature de la méthode :

openLogin: () => void;

Ouvre le formulaire d’autorisation de l’utilisateur. Si l’utilisateur est déjà autorisé, une erreur s’affiche dans la console du navigateur.

Méthode window.metaframe.partnerActions.openProfile

Signature de la méthode :

openProfile: () => void;

Ouvre la section Profile pour l’utilisateur actuel. Si l’utilisateur n’est pas autorisé, une erreur s’affiche dans la console du navigateur.

Méthodes window.metaframe.partnerActions.openWallet

Signature de la méthode :

openWallet: () => void;

Ouvre la section Wallet pour l’utilisateur actuel. Si l’utilisateur n’est pas autorisé, une erreur s’affiche dans la console du navigateur.

Méthode window.metaframe.partnerActions.openBackpack

Signature de la méthode :

openBackpack: () => void;

Ouvre la section Backpack pour l’utilisateur actuel. Si l’utilisateur n’est pas autorisé, une erreur s’affiche dans la console du navigateur.

Méthode window.metaframe.partnerActions.openCustomMiniApp

Signature de la méthode :

openCustomMiniApp: (params: {miniAppName: string}) => void;

Ouvre la section personnalisée spécifiée avec le type Iframe si l’une des conditions suivantes est remplie :

• Si la bascule Show this app before user login est activée dans les paramètres de la section personnalisée, et l’utilisateur actuel n’est pas connecté ;
• Si la basculeShow this app after user login est activée dans les paramètres de la section personnalisée, et l’utilisateur actuel est connecté.

Si les conditions ne sont pas remplies, une erreur s’affiche dans la console du navigateur.

Méthodes window.metaframe.partnerActions.pushNotification

Signature de la méthode :

pushNotification: (params: {
  type: string; // use “success”, “warning”, “error” or “info”
  text: string;
  button?: {
    text: string;
    onClick: () => void;
  };
  durationInMs?: number;
}) => void;

Envoie une nouvelle notification dans la pile des notifications.

Méthode window.metaframe.partnerActions.setIsCustomMiniAppVisible

Signature de la méthode :

setIsCustomMiniAppVisible: (params: {
  miniAppName: string;
  isVisible: boolean;
}) => void;

Affiche ou masque la section personnalisée spécifiée.

Événements du widget

Vous pouvez vous abonner aux événements Metaframe suivants :

Suivi des événements des sections personnalisées

Vous pouvez ajouter une section personnalisée de type Action au Metaframe. Cette section apparaît sous forme de bouton et exécute une action, comme ouvrir un site Web, lorsque l’utilisateur clique dessus.

Pour suivre l’événement du clic sur une section personnalisée, vous devez vous abonner à l’événement @metaframe:custom-action:<ACTION_ID>, où <ACTION_ID> est l’ID de l’action généré dans le Compte éditeur lors de la configuration de la section personnalisée.

Exemple configuration d’un écouteur pour un événement de clic de section personnalisé :

document.addEventListener("@metaframe:custom-action:00000000-0000-0000-0000-000000000000", () => {

 // Your code here...

})