Okay, let's dive into how you can create popups for your Webflow website using Poper. I know that implementing popups can sometimes be a bit tricky, especially if you're trying to do it natively within Webflow.
But, don't worry, I'm here to guide you through both the easy way and, if you're curious, a bit about the harder way as well.
Creating Popups in Webflow with Poper
If your Webflow site is connected to a domain, you're all set to use Poper to display those engaging popups. Here's how we can do it:
1. Create Your Poper Account
First things first, you'll need a Poper account. This is where you'll create and manage all your popups. So go ahead and sign up for a Poper account. It's quick and easy.
2. Add Your Domain and Start a New Popup
Once you are in your Poper dashboard, add your website domain. After adding your website domain, let's jump right into creating a new popup. Click on the "New Popup" button.
3. Select a Template
You'll see an option to "Choose from templates." This is where the magic starts. You can pick from various pre-designed popup templates. There are tons of great options, from lead capture forms to announcement popups, and more.
Of course, if you're feeling creative, you can start with a blank canvas and build your own custom popup from the ground up. Many of our users find Poper super helpful for things like collecting leads from ad campaigns.
4. Customize Your Popup
Once you select a template (or start from scratch), you'll be in our popup editor. This is where you can let your creativity flow. Customize fonts, colors, images, and anything else to match your brand's look and feel. It's really simple to get your popup looking exactly how you want it.
5. Set Display Conditions
After you're happy with the design, click "Next" to move on to Display Conditions. Here’s where you decide how and when your popup should appear. You can set triggers like scroll depth, exit intent (when someone’s about to leave your page), or delay it to show up after a few seconds.
Plus, you can target specific pages or even certain demographics to make sure your popup is shown to the right audience.
6. Connect Your Integrations
Now, let's integrate the popup with your favourite marketing tools. In the “Integrations” section, you can connect with email marketing platforms like Campaign Monitor, and many other tools. Just follow the steps to connect your desired tools.
7. Save and Publish
Once you've set up everything, it’s time to save your work. Click "Save & Publish" and your popup is live!
8. Grab the Poper Code
Go back to your Poper Dashboard. In there you will find a section named "Code". Click on "Custom Code" and copy it. This code is what will connect your Poper popups to your Webflow site.
9. Paste the Code into Webflow
Now, let's switch back to Webflow. Go to your "Site Settings" and then to "Custom Code." Paste the code you copied from Poper into the "Head" section.
10. Save and Test
Save your changes in Webflow, and that’s it! Your Poper popups should now be working perfectly on your Webflow site. Take some time to test it out and make sure everything's running smoothly.
Conclusion
And there you have it! Using Poper, you can effortlessly create and manage popups on your Webflow site. It really does make things a lot easier, saving you from wrestling with complex coding. If you have any questions or need help at any step, feel free to reach out.
