# Framer Convert

Source: https://www.youtube.com/watch?v=lndUEhSwXyc
Recap page: https://rapidrecap.app/video/lndUEhSwXyc
Generated: 2026-03-09T16:07:32.087+00:00

---
## Quick Overview

The video demonstrates how to use Framer Convert to dynamically show different component variants and overlays based on visitor interactions, conditions, or tracking parameters, such as displaying a Product Hunt banner on first visit or a Valentine's Day CTA only on February 14th.

**Key Points:**
- Framer Convert allows triggering variants and overlays based on visitor interactions, conditions, or tracking parameters, like showing content to first-time visitors or during specific dates.
- A Product Hunt upvote reminder banner variant was created and triggered based on the tracking parameter 'producthunt' having a value of 'ph'.
- An overlay (newsletter signup form) was set to show only if the 'newsletter-form' condition was not met (i.e., the form had not been submitted) and the user had scrolled 50% or more down the page.
- The overlay is configured to close upon form submission success, ensuring it does not reappear for that user.
- A second variant for a CTA button was set to trigger only on the specific date of Valentine's Day (February 14th) by setting the trigger condition to 'Date' between '02/14/2024' and '02/14/2024'.
- The demonstration concludes by showing that after setting the date condition and refreshing the live site, the Valentine's Day CTA appears only on that specific day, and the newsletter overlay is hidden if the form was previously submitted.

![Screenshot at 00:04: The Framer editor interface showing the 'Ship & dip.' hero section and the initial setup for converting a component, highlighting the navigation to the 'Layers' tab where dynamic elements are managed.](https://ss.rapidrecap.app/screens/lndUEhSwXyc/00-00-04.jpg)

**Context:** The video features Benjamin demonstrating advanced conditional logic capabilities within Framer Convert, a tool designed to turn design ideas into dynamic websites. The core focus is on utilizing variants and overlays that react to specific user behaviors (like scrolling or form submission) or external data (like tracking IDs or dates) to personalize the on-site experience.

## Detailed Analysis

Benjamin walks through using Framer Convert to implement dynamic content changes based on user state and time. First, he configures a top banner variant named 'Product Hunt' to appear only when a visitor has a specific tracking parameter: the URL parameter 'producthunt' must equal 'ph'. Next, he sets up an overlay for a newsletter signup form. This overlay is triggered by a 'Scroll' interaction when the user scrolls 50% down the page, but only if the 'newsletter-form' condition (which tracks form submission) is set to 'No' (meaning it hasn't been submitted). Crucially, the overlay is set to close upon 'Form Submit' success, preventing repeat showings. Finally, he demonstrates date-based variation by selecting a CTA button variant named 'Valentines' and setting its trigger condition to 'Date' between '02/14/2024' and '02/14/2024'. After refreshing the live site, he verifies that the Product Hunt banner appears when the tracking ID is present, the newsletter form appears only on the first visit until submission, and the Valentine's Day CTA appears only on February 14th, showcasing the flexibility of conditional triggers in Framer.

### Dynamic Variants (Product Hunt Banner)

- Setting trigger based on URL parameter 'producthunt' equal to 'ph'
- Using 'Product Hunt' variant when condition is met
- Ensuring default variant shows otherwise

### Conditional Overlay (Newsletter Form)

- Triggering overlay on 50% scroll
- Adding 'Newsletter-Form' condition set to 'No' (not submitted)
- Setting 'Form Submit' interaction to close the overlay upon success

### Date-Based Variant (Valentine's CTA)

- Selecting the 'Valentines' button variant
- Setting trigger condition to 'Date' between '02/14/2024' and '02/14/2024'
- Confirming the variant only appears live on that specific day

![Screenshot at 00:13: A banner component selected in the Framer canvas, showing the 'Product \| Updates \| Pricing' navigation, ready for variant configuration.](https://ss.rapidrecap.app/screens/lndUEhSwXyc/00-00-13.jpg)
![Screenshot at 00:22: The interaction panel open for a component variant, showing the 'Trigger' set to 'Condition' and parameters being defined for the Product Hunt upvote reminder.](https://ss.rapidrecap.app/screens/lndUEhSwXyc/00-00-22.jpg)
![Screenshot at 01:54: The 'Show On' panel for an Overlay element, where the trigger is set to 'Custom' and conditions like 'Form Submit' are configured to control visibility.](https://ss.rapidrecap.app/screens/lndUEhSwXyc/00-01-54.jpg)
![Screenshot at 04:32: The CTA component's trigger settings showing the 'Date' condition being configured to restrict visibility to February 14th.](https://ss.rapidrecap.app/screens/lndUEhSwXyc/00-04-32.jpg)