## Webflow integration

Webflow is a visual web design and CMS platform that lets teams build and manage professional websites without writing code. Integrating Webflow with Frontegg allows your application to access and manage sites, CMS collections, pages, and webhooks on behalf of your users through OAuth 2.0 authentication.

Prerequisites
- A Webflow account with workspace admin access
- Access to the Webflow workspace dashboard


### Connect Webflow

#### Step 1: Open the App Development page

Log in to your [Webflow](https://webflow.com) account. In the left sidebar of your workspace dashboard, expand **Apps & Integrations** and click **Develop**.

On the App Development page, click the **+ Create an App** button in the top-right corner.

![Webflow App Development page](/assets/webflow-1.17c9f73e847471ad814cae328aa0eb511722ac235bd4138eb683346ae70eb14d.1ce25488.png)

#### Step 2: Fill in the application details

In the **Create App** dialog, fill in the following fields on the **App info** tab:

- **App name** -- Enter a descriptive name (e.g., "Frontegg Integration")
- **App description** -- Enter a brief description of the integration
- **App homepage URL** -- Enter your application URL


Click **Continue** to proceed to the next step.

![Webflow Create App form](/assets/webflow-2.5f232ac2c52a3be02711f1122febb0430df9d9705f686a6170e5252c062a344e.1ce25488.png)

#### Step 3: Enable the Data Client

On the **Building blocks** tab, enable the **Data client (REST API)** toggle. This enables OAuth-based API access to read and write site data.

After enabling the Data Client, a configuration section appears with the **Redirect URI** field and scope dropdowns.

Enter the following redirect URI:

`https://YOUR_MCP_GATEWAY_URL/integration-callback`

![Webflow Data Client enabled](/assets/webflow-3.07bd053586d76e054eddf121e3845fd62c56d00004f6067343e7b1dc2c391d8b.1ce25488.png)

#### Step 4: Configure OAuth scopes

In the scopes section below the Redirect URI, configure the following permissions using the dropdown menus:

| Scope | Access level |
|  --- | --- |
| **Sites** -- View and manage site data and publishing | Read and write |
| **CMS** -- View and manage CMS Collections and Items | Read and write |


Set both **Sites** and **CMS** to **Read and write**.

Minimum required scopes
For basic functionality, you need **Sites** set to at least **Read-only** and **CMS** set to at least **Read-only**. Set both to **Read and write** for full integration capabilities.

Click **Create App** to finalize the application.

![Webflow scopes configuration](/assets/webflow-4.07f0338b9c09d4c45d126b6387d7c1dbc6b461c7371ed8a84287dc3e7dee1560.1ce25488.png)

#### Step 5: Copy credentials

After creating the application, open the app settings by clicking the three-dot menu (**...**) next to your app and selecting **Edit App**. Navigate to the **Building blocks** tab.

In the **Data client (REST API)** section, you can find:

- **Client ID** -- Copy this value
- **Client Secret** -- Click the eye icon to reveal the secret, then copy it


Keep your credentials secure
Never share or commit your Client Secret to version control. If the secret is compromised, click **Reset client secret** to generate a new one.

![Webflow Client ID and Client Secret](/assets/webflow-5.5cb989d1e7e6f63127d315e3b1f85348a0b5855872c3339c7bd16dbe59f1b395.1ce25488.png)

### Configure the Frontegg portal

Once you have obtained your **Client ID** and **Client Secret** from the steps above, enter them in the integration configuration page of the Frontegg portal:

1. Open the **Frontegg portal** and navigate to [ENVIRONMENT] → Integrations → Webflow.
2. Enter the **Client ID** and **Client Secret** in the corresponding fields.
3. Select the required **scopes**.
4. Click **Save**.


### Additional resources

- [Webflow developer documentation](https://developers.webflow.com)
- [Webflow OAuth reference](https://developers.webflow.com/data/reference/oauth-app)
- [Register a Webflow app](https://developers.webflow.com/apps/data/docs/register-an-app)
- [How to get your Redirect URL](/agen-for-work/connectors/redirect-url)