Intégrez le widget au niveau organisation

Une intégration pour l'ensemble de vos campus

Par défaut, une intégration Magma est rattachée à une campagne. Si votre organisation regroupe plusieurs campus, vous pouvez installer l'intégration au niveau de l'organisation : le widget affiche alors les campagnes de l'ensemble de vos campus, sans déclarer chaque campagne une par une.

Pré-requis

• Accès au code source de votre site web (balises <head> et <body>)
• L'UUID de votre organisation
• L'integrationUuid de chaque intégration à installer (widget, galerie)

Étape 1 : Ajouter le script Magma

À la fin de la balise <head> (juste avant </head>), ajoutez le script d'initialisation. Il est identique à celui d'une intégration classique :

<script src="https://cdn.jsdelivr.net/gh/magma-app/magma-widget@latest/src/widget/initializer.js" async></script>

Étape 2 : Déclarer votre organisation

Au début ou à la fin de votre balise <body>, ajoutez le bloc suivant. Chaque objet du tableau correspond à une intégration : ici, le widget. Ajoutez une entrée par intégration à installer.

<script>
  window.magma_app = [
    { // WIDGET
      type: "organizationUuid",
      uuid: "xxxx",
      integrationUuid: "xxxx",
    },
  ];
</script>

Étape 3 : Remplacer les identifiants

Remplacez les "xxxx" par vos vrais identifiants. Si vous ajoutez plusieurs entrées, l'UUID de l'organisation reste le même, seul l'integrationUuid change :

<script>
  window.magma_app = [
    { // WIDGET
      type: "organizationUuid",
      uuid: "VOTRE_UUID_ORGANISATION",
      integrationUuid: "VOTRE_UUID_INTEGRATION_WIDGET",
    },
  ];
</script>

Étape 4 : Placer la galerie dans votre page (optionnelle)

Si vous installez la galerie ou les cartes de profils, placez le div à l'endroit de votre page ambassadeurs où vous souhaitez l'afficher :

<div id="magma-app_gallery"></div>

OU 

<div id="magma-app_block"></div>

Options de configuration (pour le widget)

Annuler l'ouverture du popup automatique

Pour désactiver l'ouverture automatique du widget lorsque vos visiteurs arrivent sur la page, ajoutez le paramètre autoPopup: false :

<script>
  window.magma_app = [
    {
      type: "organizationUuid",
      uuid: "VOTRE_UUID_ORGANISATION",
      integrationUuid: "VOTRE_UUID_INTEGRATION_WIDGET",
      autoPopup: false,
    },
  ];
</script>

Personnaliser le texte du bouton et la couleur de la bannière

Vous pouvez personnaliser l'apparence du widget depuis le code grâce à l'objet customStyles. Deux paramètres sont disponibles :

• brandBg : la couleur de fond de la bannière (code hexadécimal)
• buttonText : le texte affiché sur le bouton d'appel à l'action (CTA)

<script>
  window.magma_app = [
    {
      type: "organizationUuid",
      uuid: "VOTRE_UUID_ORGANISATION",
      integrationUuid: "VOTRE_UUID_INTEGRATION_WIDGET",
      customStyles: {
        brandBg: '#E395DC',
        buttonText: 'Echanger avec un étudiant',
      },
    },
  ];
</script>

Bonnes pratiques

• Testez l'affichage sur mobile et desktop après l'installation
• Vérifiez que les campagnes de tous vos campus apparaissent bien
• Vérifiez vos UUID : une erreur dans un identifiant empêchera l'intégration correspondante de s'afficher