Morph DocsIntroduction
Morph lets you personalize your Framer site for every visitor — show different content based on UTM parameters, device type, and visitor behavior.
Morph is a Framer plugin that brings dynamic content personalization to your published site. Instead of showing the same page to every visitor, you can create rules that swap headlines, images, CTAs, or entire sections based on who's visiting and where they came from.
How it works
Morph connects your Framer canvas to a lightweight runtime script. You design your variants directly in Framer, set conditions in the plugin, and publish. Visitors see the version that matches their context — no code, no external tools.
The flow is straightforward:
- Install the Morph plugin in Framer
- Select a component you want to personalize
- Create variants with different content
- Set conditions (UTM source, device type, new vs. returning visitor)
- Publish your site — Morph handles the rest
What you can personalize
Any named Framer component can be personalized. Common use cases include:
- Landing page headlines — match the headline to the ad campaign that brought the visitor
- CTAs — show "Start free trial" to new visitors, "Welcome back" to returning ones
- Hero sections — swap the entire hero based on UTM source (Google vs. LinkedIn vs. email)
- Device-specific layouts — show a simplified version on mobile
Conditions
Morph evaluates conditions on page load. The available condition types depend on your plan:
| Condition | Free | Pro | Business |
|---|---|---|---|
| UTM Source | Yes | Yes | Yes |
| Device | Yes | Yes | Yes |
| Visitor Type | Yes | Yes | Yes |
| UTM Medium | — | Yes | Yes |
| UTM Campaign | — | Yes | Yes |
| UTM Term | — | Yes | Yes |
| UTM Content | — | Yes | Yes |
When a variant has multiple conditions, all must match (AND logic). If no variant matches, the default is shown.
Architecture
Morph has three parts:
- Plugin — runs inside Framer's canvas. You use it to create rules, add variants, and set conditions.
- Dashboard — web app at app.morph-app.com for managing sites, viewing analytics, and handling billing.
- Runtime — a small JavaScript file (~3-5 KB) injected into your published site's
<head>. It evaluates conditions and swaps content before the page renders.
Next steps
Ready to get started? Create your account to begin personalizing your Framer site.