How to Make a Popup in Webflow to Boost Conversions?

Webflow is a web-based drag and drop tool for building responsive websites without any coding knowledge. In other words, it is an application allowing you to accomplish all aspects of web development. It 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 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. Why not you?


Try for Free Now!

The following article with exhibitory images explains how to create a Webflow popup via Popupsmart or via the Webflow Panel.

How to Create a Webflow Popup with Popupsmart?

Now, let's have a look at how to create a smart popup in Webflow via Popupsmart's builder;

1. Sign up for Popupsmart.

how to sign up for popupsmart

2. Log in to your Popupsmart account.

how to sign in to your popupsmart account

3. To create your first popup, install the embed code between header tags of your websites. Moreover, you can have the embed code on your website easily via Google Tag Manager.

This is a one-time necessity, so you can use the same embed code for all your websites as well as all your future popup campaigns.

how to get your embed code before begin to start your first popup

4. Click on "Create a New Popup" on your Popupsmart account dashboard.

click create a new popup button to build your first popup with popupsmart

5. Select a business objective for your popup campaign. Design options may differ for creating an optimized popup design according to your business objective.

select your business objective of creating this popup campaign with popupsmart

6. Edit the properties of your popup design, such as form fields, font options, adding buttons, display effects, and display sounds via "Design Tab."

design your popup with popupsmart's smart popup builder

8. Through the "Display Tab", determine when you want to show popups to visitors and to which audience group you want to show your popup campaigns.

display tab on popup builder of popupsmart to decide on popup display options

9. Connect your Popupsmart account with applications such as MailChimp and Zapier or with a webhook on the "Integrations Tab."

popupsmart integration options zapier Mailchimp and webhook connection

10. Observe the number of popup impressions, popup displays, actual conversions, and your campaign’s conversion rates instantly via "Analytics" Tab. Additionally, you can easily measure the effectiveness of your popup campaign thanks to our Popup ROI Calculator.

popupsmart's analytic section measure your popup's effectiveness

11. After you have completed the editing process, go to "Publish Tab" and turn on Status toggle. Then, through the ‘Platform’ section, choose "Any Website" and copy the provided code to your clipboard.

where you can get your popupsmart popup embed code to publish tab

how to copy popup embed code for any websites popupsmart

12. Log in to your Webflow website admin panel.

log in to your webflow website admin panel

13. Click "Custom Code" on your dasboard's context menu.

how to add custom code from context menu of webflow

14. Paste the popup code on your clipboard on

code area to have your popup on the entire website.

Paste popupsmart popup code to header code area to have the popup on your entire website

15. Then, click on "Save Changes."

If you would like to add your popup to just one page, switch to Designer mode.

Switch to designer mode on Webflow

Click on "Pages" and write the name of the page that you wish to display your popup on.

select page that you want to add a custom code to

Scroll down and reach to "Inside Head Tag" under the "Custom Code" addition option.

inside head tag addition option under custom code for a single page

Lastly, save changes and control if the popup is appearing properly.

Then, 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 a paid site plan or upgrade your account plan.

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

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

Well, it is a bit complicated process; therefore, the best thing to do is recommend you a video so that 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 would be useful for you to create high converting popups and maximize your sales!

In case you may 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?

Show Comments