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>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)
