The iFrame integration: the matching form directly in your page
The iFrame integration is the most immersive solution to offer matching to your visitors. Unlike the widget (floating button) or banner, the form is directly embedded in the body of your page. Ideal for dedicated "Meet our students" or "Talk to an ambassador" pages.
💡 The iFrame requires access to your pages' HTML code. If you use a CMS (WordPress, Webflow…), check that you can insert custom HTML code in your pages.
Make your prospects and ambassadors meet from your site
Discover how to integrate a matching form directly into your web pages. To do this, you need access to your web pages' code and the ability to modify it.
We'll use the HTML <iframe> tag, which represents a nested browsing context. This tag allows you to display a web page inside another web page. You'll need to provide the matching form URL, as well as specify the desired width and height of the iFrame for optimal display.
Create your iFrame tag and embed it
You'll need your campaign form URL for the people being helped. You can find it in section 4 - Integration of your campaign editor panel, under "Simple link" → Link to sign up for the campaign.
For example: https://dashboard.magma.app/helpee-signup/f46a5492-7f0b-4c24-8d3b-cb394de1dc5c
Once you have it, build your iFrame tag by pasting the form URL into the src attribute and specifying width and height:
<iframe src="https://dashboard.magma.app/helpee-signup/YOUR_CAMPAIGN_UUID" width="800" height="600"></iframe>Customise your iFrame
Width is the horizontal size in pixels, height the vertical size. Adjust these values to match your site's dimensions. You can also add CSS styling:
<iframe src="https://dashboard.magma.app/helpee-signup/YOUR_CAMPAIGN_UUID" style="width: 100%; height: 100%; border: none; background-color: #ffffff"></iframe>To centre the iFrame on screen, add these CSS properties to the style attribute:
display: block;
margin: 0 auto;Example
<iframe src="https://dashboard.magma.app/helpee-signup/YOUR_CAMPAIGN_UUID" style="display: block; margin: 0 auto; width: 90%; height: 850px; border: none; background-color: #ffffff"></iframe>Remember to test the iFrame on different devices and screen sizes to ensure it displays correctly and the form is fully functional.
