Your First Rule

Let's create a simple rule that shows a different headline to visitors coming from Google ads versus everyone else.

Step 1 — Select a component

1. Open the Morph plugin in Framer
2. Go to the Rules tab
3. Click Create Rule
4. On your canvas, click the component you want to personalize (e.g., your hero headline)
5. Give the rule a name — something descriptive like "Hero — Google Ads"

Step 2 — Add a variant

1. Click Add Variant in the rule editor
2. Morph duplicates the selected component on your canvas
3. Edit the duplicated component directly in Framer — change the text, image, or any property
4. Name the variant (e.g., "Google Variant")

Step 3 — Set conditions

1. Click your new variant to expand it
2. Click Add Condition
3. Select UTM Source from the dropdown
4. Set the value to google

This means: when a visitor arrives with ?utm_source=google in the URL, they'll see this variant instead of the default.

Step 4 — Activate and publish

1. Toggle the rule status to Active
2. Click Save (or use the keyboard shortcut)
3. Publish your Framer site

Test it

Open your published site with the UTM parameter appended:

https://yoursite.com?utm_source=google

You should see the Google variant. Open the same URL without the parameter and you'll see the default.

What's next

• Learn about all available conditions
• Add multiple variants to a single rule
• View analytics for your rules