How to integrate with your current site

In this guide, we explain how to integrate Framer with an existing website using multiple domains or a single domain approach.

Option 1: multiple domains

The simplest way to integrate Framer with your existing site is by using multiple subdomains. For example:

  • Main site: example.com

  • Framer site: subdomain.example.com

Steps:

  1. Set your subdomain in the Framer project.

  2. Update your DNS servers to point the subdomain to your Framer site.

Learn more about setting up a custom domain here.

Table overview of how different subdomains work.

Option 2: single domain (advanced setup)

For complex websites, you can host multiple independent websites under a single domain using an advanced setup called “micro frontends”.

For example:

  • Main site: example.com

  • Framer section: example.com/framer-page

Requirements:

  • An Enterprise Plan is required.

  • Use a hosting provider that supports proxy hosting with rewrite rules (e.g., Vercel, Netlify, Cloudflare).

How to set it up:

  1. Choose a hosting provider that offers reverse proxy capabilities.

  2. Define rewrite rules to map paths (/framer-page) to their respective origins (your Framer site).

Here’s an example of rewrite rules:

[
  {
    "source": "/framer-page",
    "destination": "<https://your-framer-site.com>"
  }
]

Each hosting provider has specific configurations for rewrite rules. Refer to their documentation for implementation details.

Learn more about self-hosting using a reverse proxy here.

If you encounter any issues or need further assistance, feel free to contact Framer's support team through our contact page.