For Marketers
Add personalization to your projects, deliver a more customized experience.
Smart Content Router Component
What it is
Content Router is a dynamic component for Framer, created using Workshop, that intelligently displays different content based on various detection criteria including browser properties, URL parameters (UTMs), time of day, device type, and user preferences.
In a nutshell it automatically shows the right content to the right person based on your desired configuration and received data.
A few examples of what you can do:
Morning visitors see different content than afternoon, evening and night visitors. Personalization based on time of the day.
Show different designs based on UTMs received on the URL: Google Ads traffic sees different content than Facebook or other social media traffic.
And many more use cases…
The problem it solves
Personalization for Marketers
Display a specific design based on a given UTM Source Parameter
Custom Experience for Your Users
Customize the user experience based on multiple parameters from the User
Unique Problem Solving: Addresses the complex challenge of dynamic content routing in design tools where traditional conditional logic is limited.
Creative Approach: Combines multiple detection strategies (environmental, behavioral, and parametric) in a single unified interface, which isn't natively available in Framer.
Advanced Functionality: Provides sophisticated features like session-persistent randomization, real-time environment monitoring, and complex rule evaluation that typically require custom development or external services.
The component transforms static design workflows into dynamic, and personalized experiences while maintaining the simplicity of drag-and-drop component usage.
Why it is useful
Automated Personalization: Delivers tailored content without manual intervention
Performance Optimization: Shows only relevant content, reducing unnecessary renders
Design Testing: Enables content testing strategies
User Experience Enhancement: Provides contextually appropriate interfaces and personalization
Development Efficiency: Consolidates multiple conditional displays into one component
How it works
The component operates through four distinct modes:
Fixed Mode: Displays a predetermined component index (easy to turn it off without removing the setup)
Random Mode: Shows random content with session persistence, good to show and test different designs and wow users each time they visit your site
UTM Mode: Matches URL parameters against defined conditions, display specific messages and designs to specific user groups coming from your unique campaigns (personalized experience)
Smart Mode: Auto-detects browser environment and user preferences. Define changes based on user collected data
It continuously monitors browser characteristics including screen dimensions, dark mode preferences, device type, operating system, language, timezone, and time of day. Rules are evaluated in order with fallback mechanisms ensuring reliable content delivery.





Main features
Detection Capabilities:
Time-based routing (morning, afternoon, evening, night)
Device type detection (mobile, tablet, desktop)
Browser identification (Chrome, Firefox, Safari, Edge)
Operating system recognition (Windows, macOS, iOS, Android, Linux)
Dark mode preference detection
Language and timezone identification
Screen dimension analysis
Advanced Functionality:
Session-stable random selection
Complex UTM parameter parsing
Numeric comparison operators for screen sizes
Real-time environment monitoring with debounced updates
Component name extraction for better debugging
Performance-optimized re-renders using React transitions
Developer Experience:
Comprehensive debug mode with visual rule evaluation
Automatic component name detection
Extensive error handling and fallback mechanisms
Memory-efficient browser information caching
To help you fully setup and test your rules we've added a very cool debugger mode that can be activated to show you exactly which rules are being activated and what data is being received!


More use cases
For Marketing Teams & Growth Professionals
Problem: Running personalized campaigns across different channels requires creating multiple landing pages, tracking complex UTM parameters, and manually A/B testing variations.
Solution: One page that automatically shows different content based on traffic source. Google Ads visitors see ad-specific messaging, Facebook traffic sees social-proof focused content, email subscribers see personalized offers.
Problem: Seasonal or time-sensitive campaigns require manual updates and scheduling.
Solution: Content automatically switches based on time of day or can be programmed for specific periods without manual intervention.
For UX/UI Designers & Product Teams
Problem: Designing customized experiences often means creating separate pages, making updates tedious and inconsistent.
Solution: Single design that automatically adapts interface elements based on selected parameters. It also allows you to deliver a custom experience for your users.
For E-commerce & SaaS Companies
Problem: International audiences see irrelevant content due to language, timezone, or regional differences.
Solution: Automatically detects user language and timezone to show localized information and custom offers.
For Content Creators & Publishers
Problem: Different audience segments prefer different content formats but managing multiple versions is overwhelming.
Solution: Morning visitors might see news summaries, evening visitors see entertainment content, weekend traffic sees lifestyle articles.
Problem: Social media traffic has different engagement patterns than search traffic.
Solution: Social visitors see shareable, visual content while search visitors see detailed, informational content.
For Agencies & Freelancers
Problem: Clients want personalization but don't have budget for complex development or marketing automation tools.
Solution: Delivers enterprise-level personalization using just Framer, no additional tools or monthly subscriptions required.
Problem: Demonstrating ROI from design improvements is difficult without testing capabilities.
Solution: Built-in randomization and UTM tracking provide clear performance metrics for different design approaches.
The component essentially democratizes advanced personalization capabilities that previously required expensive marketing automation platforms, custom development, or complex tool integrations.
Solving a real problem
Content Router let's you dynamically show different designs and content based on UTMs and other parameters like time of the day and much more!
Framer X Contra Hackathon submission by Caio Calderari
2025 - Contra X Framer Hackaton
Made with love S2