How to Create a Webflow Popup with Popupsmart

Webflow logo
popupsmart favicon

Would you like to increase your sales, bring more leads, and maximize your conversions with a Webflow popup? Let us introduce you Popupsmart: An easy-to-use new generation popup builder.

Webflow is a web-based drag and drop tool for building responsive websites without any coding knowledge. In other words, it is an application that allows you accomplishment in all aspects of web development. This is why Webflow is so loved by lots of website owners!

Furthermore, Popupsmart's popup editor is easy-to-use, which means you do not need to be a designer in order to create conversion-driven popup campaigns for your e-business.

We also offer lots of advanced features, like different targeting options, for you to work with a better popup builder.

Lots of webmasters have already chosen Popupsmart to have high converting popups on their Webflow website. Guess what? They have maximized their digital conversions relatively. This could be you, too!

Why You Should Use Popupsmart for Webflow Website?

tick image
Customizable Popup Templates & Advanced Targeting Options

You can choose the most suitable popup design for your website out of 45 fully customizable popup templates.

Moreover, Popupsmart provides advanced targeting options at no cost.

In case you require more features, we offer advanced targeting and segmenting options such as geo-located targeting, scroll triggers, device-based targeting, exit-intent triggers, and more.

tick image
No Coding Requirement

Lack of coding knowledge is never an obstacle to create stunning popups with Popupsmart.

You can build popups in just a few minutes without coding.

The only code-related step is to add a one-line embed code to your website’s header sections. And your popups will be ready to increase engagement.

tick image
No Decrease in Website Speed

Most of the popup providers in the market decrease your website speed.

However, with Popupsmart, you can enjoy conversion-driven popups without any slowdown on your website loading time.

How do we guarantee that? Popupsmart is designed to operate on your website with a single JavaScript code which is only 97 KB in total.

tick image
No Need for Plugins or Extensions

You do not need to risk your website security and performance with the unreliable popup plugins in the market.

Start creating attractive popups with Popupsmart without installing any plugins or extensions.

tick image
SEO & GDPR Compatible Popup Templates

The popups of most popup services may lower your website’s SEO performance if they are considered as intrusive interstitials by Google.

This is not the case with us. Popupsmart’s SEO-friendly popups convert customers without affecting the SEO performance of your website.

Furthermore, for better SEO performance, you can add a cookie consent popup via Popupsmart and comply with GDPR, CCPA rules, and e-Privacy regulations.

tick image
Secure and Steadfast AWS Server

Popupsmart uses the steadfast AWS server (Amazon Web Server) as our operating system to provide you with the best popup experience.

With 99.9% uptime, we deliver a persistent popup service without any crashed server errors.

tick image
Contact in 5 minutes

You can contact our digital specialists in 5 minutes via live chat on our website.

Customer support requests are usually processed within 5 minutes during our working hours.

We will return to your contact request in 2-hour at most out of the working hours.

You may also get in touch with us via our email hello@popupsmart.com.

tick image
Start Your Free Trial Today

Try a better popup service for free until your website reaches 5.000 page-views.

Once your trial quota is full, you may select a suitable price plan for your business-specific needs.

Select an annual plan to save 2 months of a popup service fee!

Webflow Popup FAQ

1. Can I grow my website with a Webflow popup?
bottom arrow image

Popupsmart provides all the necessary features from new generation attractive designs to advanced targeting options for its users to successfully achieve their campaign goals. So, yes you can grow your website with a Webflow popup and increase visitor engagement.

2. How do I add a newsletter popup to my Webflow website?
bottom arrow image

Once you create your Popupsmart account for free, you can log in to the dashboard and select your campaign goal as “Grow Your Email List” to create a Webflow newsletter popup.

You can set up your Webflow popup in just 5 minutes and publish it to obtain new subscribers.

3. How to build a promotion code popup Webflow?
bottom arrow image

Select your business goal as “Promote Your Products” on your Popupsmart dashboard to access fully customizable promotion popup templates. When you complete its design, set up your popup’s advanced targeting settings. Then, you can publish it to drive conversions.

Do you want your promotion code popup to show up once the visitor signs up to your email list? You can create a success popup for that. Popupsmart has all the solutions you need.

4. How to make full screen popup appear on click in Webflow?
bottom arrow image

It’s easy. To make your full-screen popup appear on click in Webflow, you can use Popupsmart’s teaser popup option. A teaser popup is a popup that is displayed before or after the main popup. It is like a mini representation of your main popup. When the browsers click on it, the main popup shows up.

5. How to add a YouTube video popup to Webflow?
bottom arrow image

Just create your Popupsmart account for free and login to the dashboard to proceed. Then, once you select your business goal, you can find the video popup template among many others. Adjust its settings as you need, and your video popup will be ready to convert!

6. Can I create a Webflow footer popup with Popupsmart?
bottom arrow image

Yes, of course. You can select your popup type as floating bar popup and adjust its on-screen position as you wish. If you want your popup to show up once the browser scrolls down to the end of your webpage, you can set it so in the targeting settings.

7. How to add popup embed code in Webflow?
bottom arrow image

All you need to do to add the popup embed to your Webflow website is to copy and paste the provided one-line code to your website’s template file just before the closing of the <body> tags. No coding, no fuss, just simple popups.

1. Can I grow my website with a Webflow popup?

Popupsmart provides all the necessary features from new generation attractive designs to advanced targeting options for its users to successfully achieve their campaign goals. So, yes you can grow your website with a Webflow popup and increase visitor engagement.

2. How do I add a newsletter popup to my Webflow website?

Once you create your Popupsmart account for free, you can log in to the dashboard and select your campaign goal as “Grow Your Email List” to create a Webflow newsletter popup.

You can set up your Webflow popup in just 5 minutes and publish it to obtain new subscribers.

3. How to build a promotion code popup Webflow?

Select your business goal as “Promote Your Products” on your Popupsmart dashboard to access fully customizable promotion popup templates. When you complete its design, set up your popup’s advanced targeting settings. Then, you can publish it to drive conversions.

Do you want your promotion code popup to show up once the visitor signs up to your email list? You can create a success popup for that. Popupsmart has all the solutions you need.

4. How to make full screen popup appear on click in Webflow?

It’s easy. To make your full-screen popup appear on click in Webflow, you can use Popupsmart’s teaser popup option. A teaser popup is a popup that is displayed before or after the main popup. It is like a mini representation of your main popup. When the browsers click on it, the main popup shows up.

5. How to add a YouTube video popup to Webflow?

Just create your Popupsmart account for free and login to the dashboard to proceed. Then, once you select your business goal, you can find the video popup template among many others. Adjust its settings as you need, and your video popup will be ready to convert!

6. Can I create a Webflow footer popup with Popupsmart?

Yes, of course. You can select your popup type as floating bar popup and adjust its on-screen position as you wish. If you want your popup to show up once the browser scrolls down to the end of your webpage, you can set it so in the targeting settings.

7. How to add popup embed code in Webflow?

All you need to do to add the popup embed to your Webflow website is to copy and paste the provided one-line code to your website’s template file just before the closing of the <body> tags. No coding, no fuss, just simple popups.


How to Create a Webflow Popup with Popupsmart Let's have a look at how to create a smart popup in Webflow via Popupsmart's builder;

# 1. Sign up for Popupsmart

sign up

# 2. Log in to your Popupsmart account

log in

# 3. On your Popupsmart dashboard, hover over your account and click “Your Embed Code.” Copy the embed code. Your unique embed code must be pasted between the header tags of your websites

This is a one-time necessity and your embed code is unique to your account. Do not add the code more than once on your website.

Follow the steps below to embed the code on your Webflow site. Or use Google Tag Manager instead to install Popupsmart.

Google Tag Manager

# 4. Open a new tab and log in to your Webflow website admin panel

Webflow

# 5. On your Webflow Dashboard, select the project you want to edit. Click on the left-corner Webflow logo to open the menu. Click on Project Settings

Webflow Dashboard

# 6. On the Project Settings screen, click "Custom Code." Note that to add a custom code to your website, you need to have an existing paid site plan or switch to an upgraded account plan

Project Settings

your embed code

# 8. Then, click on "Save Changes."

# 9. Now that you’ve installed Popupsmart, you can verify your domain through your Popupsmart dashboard. To create your campaign. Click "Create a New Popup."

verify your domain

# 10. Select a business goal for your popup campaign. Design options may differ for creating an optimized popup design according to your business objective. After selecting a goal, give your campaign a name and choose a domain

business goals

# 11. Pick a popup template from the Layouts tab and set the position and type of your popup

popup template

# 12. Edit your Customize design's properties, such as form fields, font options, buttons, and display effects on the "Customize" tab

Customize popup

# 13. Go to the “Target” tab to determine when you want to show popups to visitors and which audience group you'd want to show your popup campaigns to. (Audience targeting settings)

Audience targeting

# 14. Connect your Popupsmart account with applications such as MailChimp and Zapier or with a webhook on the "Publish" tab by clicking "Integrations" and selecting an app. (See all integrations)

Integrations

# 15. Now you can either Save to publish your campaign later or set it live right now by clicking Save & Publish

publish your campaign

# 16. Observe the number of popup impressions, popup displays, actual conversions, and your campaign’s conversion rates instantly using the Analytics option on the top bar

analytics

Alternatively, you can access each of your campaign analytics on the dashboard as well.

campaign analytics

Now, it is time for you to grab a cup of coffee and enjoy maximizing your sales with Popupsmart's conversion-ready popups!

Note that to add a custom code to your website, you need to have an existent paid site plan or switch to an upgraded account plan.

How to Create a Webflow Popup with the Webflow Design Tab?

I would like you to have a look at how to create a popup in Webflow via the Design tab.

Well, it is a bit of a complicated process; therefore, the best approach is to recommend you a video so you can follow the each step carefully;

Creating a custom modal youtube video image

I hope this guide on how to make a popup in Webflow proves useful for you to create high converting popups and maximizing your sales!

In case you want to take a look at how to add popups using different website builders, check the articles below:

How to Create a Popup in Wix?

How to Add a Popup to Squarespace?