Le widget : l'intégration la plus simple et la plus populaire
Le widget Magma est un bouton flottant qui apparaît sur vos pages web. Au clic, il ouvre le formulaire de matching et permet à vos visiteurs d'être mis en relation avec un ambassadeur en quelques secondes. C'est l'intégration idéale pour rendre Magma accessible sur l'ensemble de votre site sans modifier profondément votre mise en page.
Pré-requis
- Accès au code source de votre site web (balises
<head>et<body>) - Votre
campaignUuidet votreintegrationUuid(disponibles dans la section 4 - Intégration de votre campagne)
Étape 1 : Ajouter le script Magma
À la fin de la balise <head> (juste avant </head>), ajoutez le script d'initialisation :
<script src="https://cdn.jsdelivr.net/gh/magma-app/magma-widget@latest/src/widget/initializer.js" async></script>Étape 2 : Déclarer votre campagne
Au début ou à la fin de votre balise <body>, ajoutez le bloc suivant :
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
},
];
</script>Étape 3 : Remplacer les identifiants
Remplacez les "xxxx" par les vrais identifiants de votre campagne :
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "VOTRE_UUID_CAMPAGNE",
integrationUuid: "VOTRE_UUID_INTEGRATION",
},
];
</script>Options de configuration
Annuler l’ouverture du popup automatique
Vous pouvez ajouter un paramètre au script pour désactiver le comportement d’ouverture automatique du widget lorsque vos visiteurs arrivent sur la page.
Pour cela il faut ajouter un paramètre : autoPopup: false
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "VOTRE_UUID_CAMPAGNE",
integrationUuid: "VOTRE_UUID_INTEGRATION",
autoPopup: false,
},
];
</script>Personnaliser le texte du bouton et la couleur de la bannière
Vous pouvez personnaliser l'apparence du widget directement 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: "campaignUuid",
uuid: "VOTRE_UUID_CAMPAGNE",
integrationUuid: "VOTRE_UUID_INTEGRATION",
customStyles: {
brandBg: '#E395DC',
buttonText: 'Echanger avec un étudiant',
},
},
];
</script>Bonnes pratiques
- Testez l'affichage sur mobile et desktop après l'installation
- Le widget est non-intrusif : il n'impacte pas la vitesse de chargement de votre page
- Vous pouvez personnaliser l'apparence du widget depuis votre tableau de bord Magma (couleurs, position, texte d'accroche)
