L'intégration iframe : le formulaire de matching directement dans votre page
L'intégration par iframe est la solution la plus immersive pour proposer la mise en relation à vos visiteurs. Contrairement au widget (bouton flottant) ou à la bannière, le formulaire est directement embarqué dans le corps de votre page. Idéal pour les pages dédiées "Rencontrer nos étudiants" ou "Parler à un ambassadeur".
Faire se rencontrer vos prospects et vos ambassadeurs depuis votre site
Découvrez comment intégrer directement un formulaire de mise en relation dans vos pages web. Pour ce faire, vous devez avoir accès au code de vos pages web et être capable de le modifier.
Ensuite, nous utiliserons la balise HTML : iframe (documentation MDN) qui représente un contexte de navigation imbriqué. Cette balise permet d'afficher une page web à l'intérieur d'une autre page web. Vous devrez fournir l'URL du formulaire de correspondance, ainsi que spécifier la largeur et la hauteur désirées de l'iframe pour garantir un affichage optimal sur votre site web.
Créer votre <iframe> tag et intégrez le
Vous aurez besoin de votre formulaire de campagne dédié aux personnes aidées. Vous pouvez le trouver dans la section 4 - Intégration de votre panneau d'édition de campagne. Sous "Lien simple" → Lien pour s'inscrire à la campagne.
Par exemple ici : https://dashboard.magma.app/helpee-signup/f46a5492-7f0b-4c24-8d3b-cb394de1dc5c
Une fois que vous l'avez, vous pouvez commencer à construire votre balise iframe. Pour ce faire, vous devrez copier l'URL du formulaire de mise en relation et la coller dans l'attribut "src" de la balise iframe. De plus, vous devrez spécifier la largeur et la hauteur de l'iframe pour garantir un affichage optimal sur votre site web. Par exemple, votre balise iframe pourrait ressembler à ceci :
<iframe src="https://dashboard.magma.app/helpee-signup/f46a5492-7f0b-4c24-8d3b-cb394de1dc5c" width="800" height="600"></iframe>Une fois que vous avez créé votre balise iframe, vous pouvez simplement la copier et la coller dans le code HTML de votre page web à l'endroit où vous souhaitez que le formulaire de mise en relation apparaisse.
Personnalisez votre iframe
La largeur fait référence à la taille horizontale de l'iframe en pixels, tandis que la hauteur fait référence à la taille verticale de l'iframe en pixels. Vous pouvez ajuster ces valeurs pour correspondre aux dimensions de votre site web et vous assurer que l'iframe s'affiche correctement.
De plus, vous pouvez ajuster le style de l'iframe en ajoutant des éléments de style avec tout le CSS dont vous avez besoin. Comme dans l'exemple ci-dessous :
Par exemple, vous pouvez changer la couleur de fond de l'iframe en utilisant le code suivant :
<iframe src="https://dashboard.magma.app/helpee-signup/f46a5492-7f0b-4c24-8d3b-cb394de1dc5c" style="width: 100%; height: 100%; border: none; background-color: #ffffff"></iframe>Vous pouvez également ajuster d'autres propriétés CSS telles que la taille de la police, le style de bordure, et plus encore pour mieux correspondre au style de votre site web.
N'oubliez pas de tester l'iframe sur différents appareils et tailles d'écran pour vous assurer qu'il s'affiche correctement et que le formulaire est entièrement fonctionnel.
Pour centrer un iframe au centre de l'écran, vous pouvez ajouter du code CSS à votre balise iframe. Ajoutez le code suivant à l'attribut "style" de votre balise iframe :
display: block;
margin: 0 auto;Voici un exemple
Voici le code de l'exemple:
<iframe src="https://dashboard.magma.app/helpee-signup/f46a5492-7f0b-4c24-8d3b-cb394de1dc5c" style="display: block; margin: 0 auto; width: 90%; height: 850px; border: none; background-color: #ffffff"></iframe>
