Framer Update, Analytics

Framer Convert

Benjamin

5:42

13K views

Mar 9, 2026

About this lesson

Introducing Convert, a new add-on with advanced tools for analyzing, optimizing, and converting. Funnels, A/B Tests, and now Triggers, all grouped into a single package. Visualize user journeys with funnels, create A/B tests for any page, and add dynamic triggers to your Components and Overlays. With the new Triggers, you can show banners to people visiting from a specific page, update messaging only on specific dates, show overlays when people scroll a certain amount, and more. Learn more about Convert here: https://www.framer.com/convert/

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Yo, my name is Benjamin and this is 0:03[music] Framer Convert, a new way to 0:06trigger varants and overlays based on 0:10visitor interactions [music] and 0:12conditions. It's great for marketing and 0:15growth teams as a way to dynamically 0:17show unique content on your site. For 0:20example, here I have a variant of my 0:23navigation with an upvote reminder that 0:26I want to show to people coming from 0:29[music] Product Hunt. I've also ensured 0:32to set the variant transition to instant 0:35as I don't want this to animate. Cool.0:38So, my variant is set up. I just need a 0:41way to trigger it. And this is where 0:43we'll be using framer convert. All 0:46component instances now get this trigger 0:50property right below the variant one.0:53And here we can simply switch to any of 0:56the available variants given a few 0:59conditions and interactions. So I'll set 1:02the variant to the product hunt variant.1:05I'll also give it a unique tracking ID.1:09And then let's add a condition. I only 1:12want to show this variant when we visit 1:15using a specific parameter. The 1:18parameter is a ref and I want it to 1:21[music] equal ph. Then we can simply 1:24submit that URL to [music] product hunt.1:27So this is looking good. Let's go ahead 1:29and switch to the live site. So if we 1:33visit this without [music] any 1:35parameter, we get our default nav. Now,1:38if I visit using our parameter, I'll 1:42instantly see our new top bar with the 1:45product hunt badge. Next, let's look at 1:49overlays. [music]1:50You might have a newsletter or a form or 1:54want to offer people a discount, [music]1:56and these are commonly shown through 1:58overlays, kind of like this one right 2:01here. It's shown on click by the little 2:04sub label below our buttons right in the 2:06header. And now the show on property 2:10gets its own little section in our 2:12overlay panel. And it also supports 2:15unique triggers. For example, we could 2:18want this overlay to also appear when a 2:21user scrolls 50 or 40% of our page. So 2:26I'll click on interactions, select 2:28scroll, [music] and set it to 40%.2:32But we're not done just yet as we don't 2:36want this to show every single time,2:38right? If a user has already submitted 2:41the form, it shouldn't reappear on their 2:43next visit. So, we'll also add a form 2:47submit [music] condition. Here, we can 2:49select the form using its tracking ID.2:53And now, this is looking good. We only 2:56show the form when it hasn't been 2:57submitted yet and the user scrolls past 3:0040% of our page. And here you can see we 3:04already had the tracking ID set on the 3:07form itself. And I'll also add a close 3:11overlay interaction to the form. Just 3:14making sure that it closes when a user 3:16submits the form. So on form [music]3:20success 3:21and we should be good to go. Let's go to 3:24the life site and start [music]3:26scrolling. And as soon as we hit 40%,3:30our form gently animates into view.3:34When I submit it, it should go away.3:44And then [music] if we refresh and we 3:47scroll again, it should not reappear.3:55And there we go. It indeed does not 3:58reappear. [music]4:00As the third and final example of framer 4:03convert, I'd love to show you something 4:05related to a specific date [music] and 4:08time. So, it's almost Valentine's Day 4:11and let's say you want to have some 4:13unique copy or messaging or campaign 4:18live on your site only on that specific 4:21day and you want to kind of stage it up 4:24front with framework convert, you now 4:27can. So, we've prepared this simple 4:29button variant that kind of takes over 4:32the existing CTAs on our header as an 4:35example. and let's try only showing it 4:38on a specific date and time. Normally,4:41we would add both the start and end 4:44conditions, but for the sake of this 4:46demo, I'll only add start. [music] And 4:50instead of setting it to the actual 4:52Valentine's date, I'll trigger this 5 4:55minutes [music] from now. So, I'll jump 4:58ahead 4 minutes in time so that we can 5:01look at the last minute together. As you 5:04can see, we now have about a minute 5:06left, and we're still looking at our 5:09default CTAs. And I'll refresh the page 5:12as soon as the clock strikes 4.5:19And just like that, our CTAs are 5:22replaced with a single contextual button 5:25right on [music] time. So that's framer 5:28convert. automatically show varants and 5:31overlays based on a variety of triggers.5:34Now in framer. [music]

TeachesA/B Testing Component Variants

Also coversComponents Submit Actions Transitions & Easing

Watch on YouTube ↗

‹ Framer Convert: Understand, Test, and Optimize.

Ship websites with enterprise needs, at startup speeds ›