How to Add Smart Lead Magnet to Your Webflow Website
Note: You'll need administrative access to your Webflow account to complete these steps.
1. Log in to Your Webflow Account
- Go to Webflow and click on Log In.
- Enter your email and password to access your Webflow dashboard.
2. Open Your Project
- From your dashboard, select the project where you want to embed the Smart Lead Magnet.
3. Access the Designer
- Click on Designer to open the Webflow Designer for your project.
4. Navigate to the Desired Page
- In the Pages panel on the left, select the page where you want to add the Smart Lead Magnet.
5. Add an Embed Element to Your Page
- In the left toolbar, click on the Add Elements button (the + icon).
- Scroll down to the Components section.
- Drag the Embed component onto your page and place it where you want the Smart Lead Magnet to appear.
6. Insert the Smart Lead Magnet iFrame Code
-
Click on the Embed element you just added.
-
In the Embed Code Editor that appears, paste the following iFrame code:
<iframe src="https://smartleadmagnet.com/share/{{magentid}}" width="100%" height="600" style="border-radius:0.5rem; border:none; max-width: 100%; height: 70vh; /* Responsive height based on viewport height */ min-height: 500px;" loading="lazy" referrerpolicy="unsafe-url" allow="clipboard-read;clipboard-write" ></iframe>
Important: Replace {{magentid}} with your unique Smart Lead Magnet ID. For example:
<iframe src="https://smartleadmagnet.com/share/your-unique-id" width="100%"
height="600"
style="border-radius:0.5rem; border:none;
max-width: 100%;
height: 70vh; /* Responsive height based on viewport height */
min-height: 500px;"
loading="lazy"
referrerpolicy="unsafe-url"
allow="clipboard-read;clipboard-write"
></iframe>- Click Save & Close to apply the code.
7. Adjust the Embed Element Size (If Necessary)
- Ensure the Embed element is sized appropriately to display the Smart Lead Magnet without scrollbars.
- You can adjust the size by selecting the Embed element and modifying its width and height in the Style panel on the right.
8. Publish Your Website
- Click on the Publish button in the top right corner.
- Choose Publish to Selected Domains to make your changes live.
9. Test the Embedded Smart Lead Magnet
- Visit your live website to ensure the Smart Lead Magnet is displaying and functioning correctly.
- Interact with the embedded content to verify that it's capturing leads as expected.
Note: If the iframe doesn't display properly, ensure that your Webflow project settings allow for embedded code and that there are no security settings blocking external iframes.