Morph DocsConnect Your Site
How Morph connects to your Framer site and injects the personalization runtime.
Morph needs a small script in your site's <head> to personalize content on the published page. This is handled automatically, but here's what's happening under the hood.
Automatic setup
When you first sign in to the Morph plugin, it:
- Creates a site in your Morph account (linked to your Framer project)
- Generates a unique site key — an identifier for your published site
- Injects the runtime snippet into your Framer project's custom code (
<head>section)
You can verify the connection in the plugin's Account tab. A green "Connected" indicator means the snippet is in place and the site key matches.
The runtime snippet
The injected code looks like this:
<script src="https://app.morph-app.com/api/runtime/YOUR_SITE_KEY" defer></script>This script is lightweight (~3-5 KB) and deferred, so it doesn't block page rendering. It:
- Reads the visitor's context (UTM parameters, device type, cookie for returning visitors)
- Evaluates your active rules against that context
- Swaps the matching variants into view using CSS
- Fires an impression event for analytics
Snippet status
The Account tab shows one of three states:
- Connected — snippet is present and the site key matches your account
- Key mismatch — a Morph snippet exists but with a different site key (happens if you've rotated your key or signed in with a different account). Use the Update Snippet button to fix this.
- Not connected — no Morph snippet found. Use the Add Snippet button to inject it.
Multiple sites
Each Framer project gets its own site in Morph. The number of sites you can have depends on your plan:
| Plan | Sites |
|---|---|
| Free | 1 |
| Pro | 3 |
| Business | 10 |
If you reach your site limit, you'll need to upgrade or remove an existing site before connecting a new project.
Publishing
After setting up your site and creating rules, publish your Framer project as usual. The Morph runtime script will be included automatically. Personalization is live as soon as your site is published — no additional deployment step needed.