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:

  1. Fixed Mode: Displays a predetermined component index (easy to turn it off without removing the setup)

  2. Random Mode: Shows random content with session persistence, good to show and test different designs and wow users each time they visit your site

  3. UTM Mode: Matches URL parameters against defined conditions, display specific messages and designs to specific user groups coming from your unique campaigns (personalized experience)

  4. 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

Create a free website with Framer, the website builder loved by startups, designers and agencies.