Step-by-Step Tutorial for Creating a Lead-Generating Popup with Draftly

Draftly Team
D
Draftly Team
August 22, 2026
8 min read
Tutorials

Summary

Learn how to create a high-converting lead-generating popup with Draftly. This step-by-step guide covers customization, targeting, and integrations.

Step-by-Step Tutorial for Creating a Lead-Generating Popup with Draftly

Step-by-Step Tutorial for Creating a Lead-Generating Popup with Draftly

Capturing leads on your website doesn’t have to be complicated. With Draftly's AI-powered tools, you can design and deploy a high-converting lead-generating popup in minutes. This tutorial will walk you through each step, from setup to advanced customization, ensuring your popup not only looks great but performs exceptionally.

Why Use Lead-Generating Popups?

Popups are a proven tool for capturing visitor attention and growing your email list. According to Sumo, the average popup conversion rate is 3.1%, but top-performing popups can achieve rates as high as 9.28%. By using Draftly's dynamic 3D website builder, you can create visually compelling, interactive popups that engage visitors and drive conversions.

!stepbystep tutorial for creating a leadgenerating popup with draftly, tutorials

  • Drive engagement: Popups help you capture a visitor’s attention before they leave your site.
  • Grow your email list: Collect subscribers for newsletters, promotions, or updates.
  • Boost conversions: Offer targeted discounts or lead magnets to convert visitors into customers.

Step 1: Launch Draftly’s Popup Builder

To get started, log in to your Draftly account and navigate to the Popup Builder tool. If you're new to Draftly, you might want to check out our guide on how to customize your website design with Draftly.

  • From the dashboard, click on Add Element in your website editor.
  • Select Popup from the list of available widgets.
  • Choose a pre-designed template or start with a blank canvas if you have a specific design in mind.

Step 2: Customize Your Popup

The key to a successful lead-generating popup is customization. Draftly’s intuitive editor allows you to tweak every element to match your branding and goals.

  • Header text: Write an attention-grabbing headline, such as “Get 10% Off Your First Purchase!”
  • Body copy: Add a clear and concise value proposition. For example, “Sign up for our newsletter to receive exclusive offers and updates.”
  • Colors and fonts: Use your brand colors and typography. Learn more about customizing fonts and colors in Draftly.
  • Images or animations: Add a 3D animation or image to make your popup visually engaging. Draftly's AI can generate these assets for you.

Pro Tip: Use Contrasting Colors

Ensure your call-to-action (CTA) button stands out by using a contrasting color. For instance, if your popup background is white, a bright orange or green button can draw attention.

Step 3: Set Up Targeting Rules

Not all website visitors are the same. With Draftly, you can create targeted popups to reach the right audience at the right time.

  • Trigger options: Choose how and when your popup appears:
- Time on page - Exit intent - Scroll percentage - Click on a specific element
  • Audience segmentation: Target based on location, device type, or referral source. For example, show a unique message to mobile users.
  • Exclude repeat visitors: Avoid annoying returning users by setting a frequency cap, such as “Show once per week.”

Step 4: Integrate with Email Marketing Tools

What happens after a user submits their email? Draftly makes it easy to connect your popup to tools like Mailchimp, HubSpot, or Google Sheets for seamless lead management.

  • Navigate to the Integrations tab in the popup settings.
  • Choose your preferred email marketing platform and authenticate your account.
  • Map the form fields (e.g., name and email) to the corresponding fields in your email tool.
  • Test the connection to ensure leads are being captured correctly.

Step 5: Preview and Publish

Before going live, review your popup design and settings to ensure everything looks and works as expected.

  • Preview mode: Use Draftly’s live preview feature to see how your popup will appear on desktop and mobile devices.
  • A/B testing: Test multiple versions of the popup to identify which design or copy performs better.
  • Publish: Once satisfied, click “Publish” to make the popup live on your site.

Example Use Case: Discount Popup for E-commerce

Imagine you run an online store selling eco-friendly fashion. You could set up a popup offering “15% Off Your First Order” to new visitors. By targeting users who scroll more than 50% of the page, you engage those already interested in your content. For more inspiration, check out how 3D AI websites are helping Indian eco-friendly fashion startups.

Tips for Maximizing Popup Success

  • Keep it simple: Avoid overwhelming users with too many fields.
  • Use urgency: Add phrases like “Limited Time Offer” to create a sense of urgency.
  • Optimize for mobile: Ensure your popup is responsive and doesn’t disrupt the mobile browsing experience.

Frequently Asked Questions

What is a lead-generating popup?

A lead-generating popup is a small window on a website designed to collect visitor information like email addresses to grow email lists or promote offers.

Can I A/B test popups in Draftly?

Yes, Draftly supports A/B testing for popups, enabling you to compare different designs and optimize for the best performance.

How do I ensure my popup doesn’t annoy visitors?

Set targeting rules like timing, frequency, and audience segmentation to show popups only when they are most relevant and least intrusive.

Can I integrate Draftly popups with my CRM?

Yes, Draftly popups integrate seamlessly with CRMs like HubSpot and Salesforce, making it easy to manage leads.

Are lead-generating popups mobile-friendly?

Yes, popups created with Draftly are fully responsive, ensuring a smooth experience on both desktop and mobile devices.

Related Articles

More in Tutorials →