Sign up
How to Add Popups to your Framer Website to Increase Conversions
Updated May 3rd, 2024
Are you considering a popup strategy for your Framer website? That's a great idea! Popups and banners are a great way to engage your site visitors with valuable offers and content, and improve your conversion rates.
A well-designed popup can be the difference between a visitor and a customer! So we're going to show you exactly how you can add a Pagecloud Popup to your Framer website to set your website goals in motion.
Get Started with a Popup Strategy
There are so many ways to utilize popups and banners to optimize your website for a great user experience. Popups that focus on delivering value to users, have calls-to-action (CTAs), and employ balanced design can engage your users and get them to convert.
So how can you get started with a popup strategy on your website? Well, it's important to define the goals for your web page and understand the needs of your audience. Ask yourself the following:
- What value can I offer to my site visitors? This includes free services, discount codes, and helpful content.
- What are my users looking for on my website? Never let your popup interfere with what your user is trying to accomplish on your web page.
- What are some goals I'm trying to achieve for my website? Whether you're building lists, getting more visibility on a new product or service, or directing your users to certain channel, a popup or banner can lead them to that action
Choose the right Popup for your needs
Once you understand what you're trying to achieve with your website, you can start to think of the type of popups you want to introduce on your page. Here are a few examples of popular ways to use popups on a web page.
Welcome popups: Welcome popups are a great way to deliver value to your customers when they first land on your page.
Exit intents: Exit intents are set to trigger when a user is leaving your page. Exit intents are meant to keep users on your site longer and attempt to convert them before they leave.
Banners: Sticky banners stay at the top of your web page while the user browses your site. They are less intrusive than a modal or full-screen popup.
Embed your Popup on your Framer Website
Step 1
Configure Pagecloud
When adding a Pagecloud popup or banner to your third-party hosted website there are a few steps that need to be completed. In this section we'll configure a Pagecloud banner and get it ready to be displayed on your Framer site.
- Configure your domain name
- Define the pages we want the banner to display on
- Copy the embed code to use on your site
Adding your Domain Name
1. Navigate to your Pagecloud dashboard
2. Select your project and click Banners and Popups in your left menu
3. Click Settings on your banner or popup
/web/images/image-bf7b4.png)
4. In Setup, make sure you've connected your domain name in the Where to display section
/web/images/image-u4fd4.png)
Selecting Pages
Once a domain name has been configured, you can specify the pages where the popup or embed will be displayed. You can choose to display on every page, or only a subset of pages.
It's recommended to use 'Include pages' which allows you to specify individual pages to show the popup without making additional updates to your website.
1. Select 'Include pages'
2. Click the '+ Add pages button'
3. Add the name of your page.
Note: You may also use wildcards in the form '/mypage*' which would match '/mypage' '/mypage2', etc.
/web/images/image-va0be.png)
Copy Embed Code
Find your embed code in your Pagecloud dashboard. This code is available in Setup at the bottom, or in your left toolbar.
Step 2
Configure Framer
Framer provides several options for adding an embed code to a webpage.
You can apply the embed code to a specific page or to all pages on your site. Note: adding the embed code to all pages allows you to configure the pages in your Pagecloud dashboard more easily. This approach would require no future changes if you decide you want a popup on a different page.
Use the custom code feature to add your Popup Embed code to all the pages on your project.
1. From the Framer dashboard click Settings -> General
2. Scroll down tot the Custom Code section
3. Paste your popup embed code into any of the blocks
4. Save.
/web/images/image-c99a4.png)
Adding popups to your Framer website can greatly enhance user engagement, drive conversions, and improve the overall user experience. By developing a well-thought-out popup strategy, understanding the needs of your audience, and designing visually appealing and relevant popups, you can effectively capture visitor attention and motivate them to take action.
Continuous testing and optimization are key to ensuring your popups deliver the desired results. With a strategic approach, popups can become a valuable component of your digital marketing efforts, helping you reach your business objectives and foster stronger connections with your customers. Start integrating popups into your Framer site today and see your engagement and conversion rates rise!
Get Started
/web/pagecloud-icon-black-l0e44.png){kind=icon}
Created by
Pagecloud Design Team