How to Add a Video Popup to Framer (Step-by-Step)
A visitor lands on your Framer site, skims the page, and leaves without ever scrolling down to your demo video. A video popup puts that video right in front of them instead of hoping they find it.
Framer doesn’t have a native video popup feature, but connecting a tool like WiserNotify adds one in a few minutes, no coding required. If you’re comparing platforms or want the general approach first, see our full guide on how to add a video popup to any website.
This guide covers connecting WiserNotify to your Framer site, building the popup, and the best practices that keep it useful instead of annoying.
How to Add a Video Popup to Framer
Watch the full walkthrough below, or follow the written steps underneath.
Step 1: Get Your WiserNotify Pixel Code
- Sign up for WiserNotify. Create a free account at wisernotify.com, or log in if you already have one, then go to the Install Pixel page and click Copy Code.
Step 2: Add the Pixel Code to Framer
- Log in to Framer and open your project.
- Go to Settings > Custom Code, paste the pixel code into the End of <head> tag box, and click Save.
See the full Framer integration guide for more detail on this step.
Step 3: Verify the Install
- Visit your Framer site once, then go back to the WiserNotify pixel page and click Verify pixel installation. You should see a “pixel code has been detected successfully” message.
Step 4: Create the Video Popup Widget
- In WiserNotify, go to the Widgets section, select Video popup from the widget options, and click Add. WiserNotify’s video popup widget guide covers every option in this editor in more depth.
- Customize the design. Add your video, edit the popup text (dynamic placeholders like
{Name}or{Product}are supported), set up a clickable CTA button with its own link and styling, and choose the position, animation, and color style for both mobile and desktop.
- Set the timing and configure display settings. Under Timing Control, set an initial delay before the popup appears and how long it stays visible. Choose which pages it should appear on, add any advanced targeting you need, then click Save and Publish.
- Test it on your live site. Visit your Framer site in a private or incognito window to confirm the popup appears the way you configured it.
Troubleshooting: Popup Not Showing Up?
A couple of Framer-specific gotchas cause most setup issues:
- Wrong tag field: Framer’s Custom Code section has separate boxes for the head and body tags. Make sure you pasted the pixel into the head box, not the body one.
- Site not republished: saving the custom code doesn’t always push it live immediately. Republish your Framer site, then check again.
- Browser cache: always check your result in a private or incognito window, since a cached page can hide the popup even after a correct install.
Still stuck? The full Framer integration guide has more troubleshooting steps, or reach WiserNotify’s live chat support from your dashboard.
Best Practices for Creating an Engaging Video Popup
Follow these to keep your video popup helpful instead of annoying:
1. Keep Videos Short and Focused
Why: A short, focused video is more likely to get watched all the way through.
- Keep videos under 60 seconds.
- Stick to one clear message or call to action.
2. Trigger Popups Strategically
Why: A popup that shows up too soon annoys people and pushes them away.
- Trigger popups after a user scrolls, spends time on a page, or clicks a specific element.
- Use exit-intent popups to re-engage visitors about to leave.
3. Optimize for Mobile Users
Why: Plenty of visitors will see this on a phone.
- Test your video popup on various screen sizes to confirm it looks right.
- Use compressed video files to reduce loading times.
4. Provide Clear Dismiss Options
Why: Visitors want to feel in control, not trapped by a popup.
- Include a visible close button.
- Allow visitors to dismiss the popup by clicking outside of it.
5. Limit Popup Frequency
Why: Too many popups wear visitors down and drive them off the page.
- Display popups sparingly, such as once per session or only on high-value pages.
6. Match Branding
Why: A popup that matches your site’s look feels like part of the page, not an ad bolted on.
- Align popup colors, fonts, and styling with your site’s branding.
7. Test and Optimize
Why: Testing regularly shows you what’s genuinely working.
- Run A/B tests on different designs, triggers, and video content.
8. Add Value Through Content
Why: Visitors stick around for content that genuinely helps them. Adding Facebook reviews to Framer reinforces the same trust signal alongside a video, and a countdown timer on Framer pairs well when the video promotes a limited-time offer.
- Use popups for tutorials, product demos, or testimonials.
- Make sure the content is something people can genuinely use.
Common Mistakes to Avoid
- Autoplaying with sound on load: a video that blasts audio the moment someone lands on the page is one of the fastest ways to make them leave. Keep it muted by default.
- Firing the popup instantly: showing it before a visitor has seen any content feels like an ambush. Give them a few seconds first.
- No mobile testing: a popup that looks fine on desktop can easily cover the whole screen or break on a phone. Always check both.
- Skipping the close button: a popup a visitor can’t easily dismiss creates frustration that outweighs whatever the video was trying to sell.
- Using a huge, uncompressed video file: this slows the whole page down, not just the popup. Host it externally on YouTube or Vimeo instead of uploading it directly.
How to Measure Video Popup Performance
Framer’s own Site Analytics shows page views and visitor counts, so pair it with your WiserNotify numbers instead of guessing.
- Popup views and CTA clicks: both in your WiserNotify dashboard, together they show whether the offer is landing.
- Close-without-interaction rate: a high number here points to timing, not the video.
- Conversion rate in Framer’s Site Analytics: compare pages with the popup against pages without it over a week or two.
- Page speed: a quick before-and-after test rules out the video slowing down your site.
Change one variable at a time, timing, video, or targeting, so you know what moved the number.
Conclusion
Adding a video popup to your Framer site is a simple way to get your message in front of visitors and turn more of them into customers.
Connecting WiserNotify takes a few minutes, and once it’s set up, you can build and manage the popup entirely from the dashboard without touching code.
Follow the best practices above, keep it short, well-timed, and easy to dismiss, and your video popup will add to the experience instead of getting in the way.
Related Posts:
Frequently Asked Questions
How can I add a video popup to my Framer website?
Install the WiserNotify pixel via Framer’s Settings > Custom Code, then create a Video popup widget from your WiserNotify dashboard. No custom code needed beyond pasting the pixel once.
Can I autoplay a video in the popup?
Yes, WiserNotify’s widget editor has an autoplay option you can turn on when you set up your video, no code required.
Can I customize the popup design?
Yes, the widget editor lets you set the popup’s position, animation, colors, and style so it matches your site’s branding.
Can I control when and where the video popup appears?
Yes, the widget editor lets you choose the trigger, an initial delay, scroll depth, or exit intent, along with which pages the popup runs on.
Will adding a video popup affect my site's performance?
Minimal impact if you host your video on YouTube or Vimeo rather than uploading it directly, since the pixel script itself is lightweight and loads asynchronously.
Krunal Vaghasiya is a marketing tech expert who boosts e-commerce conversion rates with automated social proof and FOMO strategies. He loves to keep posting insightful posts on online marketing software, marketing automations, and improving conversion rates.
Capterra