Developers
Lead Magnet Embedding
How does embedding work? We have three embedding options: inline, full page and popover. All of them are using iframes in different ways.
Inline
This is a simple iframe tag with an src attribute which renders the magnet’s content in your website. You can insert it into any container <div> and you can customize the size of the iframe with CSS or with the width and height attributes.
Full Page
This is similar to inline but we created a full page HTML for you if you would like to have a magnet on a dedicated URL, for example https://example.com/lead-magnet. To achieve this add the code to the index.html inside the chosen folder of your site.
The difference between this and the share via link approach is that you can use your own domain and URL structure with this embedding option.
Popover
This approach is using a script tag and a custom HTML element (<pulz-io-lead-magnet-popover>). To have a popover you need to add the script tag to your site’s <head> or <body> and the custom element to your site’s <body>. Once loaded it will create an icon in the bottom right corner which opens the magnet in a popover box when the visitor clicks on it. This popover box is using an iframe under the hood but you don’t need to take care about it, we handle everything with the script and the custom element.
Customizations
To customize the look and feel of the lead magnet you can change the font and the colors in the basic settings on the magnet’s edit page.
For the popover you can change the icon and the colors with the embed code. To do that, edit these parameters visually in the share dialog or manually by changing the HTML attributes of the <pulz-io-lead-magnet-popover> tag.
Security Considerations
Cookies: We don’t use cookies if you embed a lead magnet, neither in the iframe nor with the script.
Content Security Policy (CSP): If you are using CSP on your site (you should) where you would like to embed the lead magnet you need to add our domain to the CSP policy to be able to load our iframe. To implement it you should add https://app.pulz.io to the frame-src directive, something like this: frame-src https://app.pulz.io.
Your Pulz.io Success Hub. Get the Support You Need, When You Need It
Navigating AI-driven technology can be complex, but you’re not alone on this journey. Our Success Hub is equipped to guide you through every step, ensuring you maximize the benefits of Pulz.io with ease. Whether you have a question about setting up your AI-driven user journeys, need help optimizing your forms, or just want to learn more about how to make the most of our platform, we’re here to help.