Connect Webflow App with OttoKit

Overview

This guide walks through creating a Webflow Data Client App and generating the Client ID and Client Secret needed to authenticate OttoKit with Webflow.

Please create a developer workspace if you dont have one: link (for testing purpose)

Part 1: Create the Webflow App

Step 1: Open Webflow Workspace Settings

1. Log in to your Webflow account and go to your Dashboard.
2. Click your workspace from the left sidebar, then open Workspace settings.
3. In the left sidebar of Settings, click Apps & Integrations.

Step 2: Open App Development

4. Scroll down to the App Development section.
5. Click Create an App.

If you do not see this option, confirm that your role on the workspace is Admin. Members and limited roles cannot create apps.

Step 3: Fill in App Details

Provide the following information:

• App Name: A clear, descriptive name (for example, OttoKit).
• App Description: A short description of what the app does.
• App Icon: A square PNG image. Use the OttoKit logo.
• Homepage URL: https://ottokit.com

Step 4: Select the Building Block

Webflow offers three building blocks. For OttoKit, only Data Client is required.

• Data Client: Provides REST API access. This is what OttoKit needs.
• Designer Extension: Runs inside the Webflow Designer canvas. Not needed.
• Hybrid: Combines both. Not needed.

Select Data Client and continue.

Step 5: Configure the Redirect URI

In the OAuth section, paste the OttoKit OAuth Redirect URL exactly as shown in the OttoKit setup screen. This must be an exact match, including the protocol (https) and any trailing path. For OttoKit production, use:

https://api.ottokit.com/webflow/connection

You can register multiple redirect URIs if you also want to support staging or local development environments. Add each one on a separate line in the same field.

Step 6: Select OAuth Scopes

Enable each of the following scopes in the app’s OAuth configuration. Webflow will reject the authorization request with a 400 error if you request a scope that is not enabled on the app.

Scope	Purpose
sites:read	List sites and read site metadata.
sites:write	Publish sites and update site settings.
cms:read	Read CMS collections and items.
cms:write	Create, update, delete, and publish CMS items.
forms:read	Read form submissions.
ecommerce:read	Read products, orders, and inventory.
ecommerce:write	Update inventory and fulfill orders.
users:read	Read user accounts (Memberships).
users:write	Create and update user accounts.
assets:read	Read asset library and folders.
assets:write	Upload assets to the asset library.
authorized_user:read	Read the connecting user’s identity for connection labeling.

Step 7: Save the App

Review the configuration and click Create app to finalize registration. The app will now appear in the App Development section of your workspace.

Part 2: Generate the Client ID and Client Secret

Step 1: Open Your App

6. In Workspace settings, go back to Apps & Integrations.
7. Under App Development, find the app you just created and click on it.

Step 2: Copy the Client ID

The Client ID is visible on the app’s configuration screen. It is a public identifier and safe to copy directly. Copy this value and keep it ready for the OttoKit setup screen.

Step 3: Generate and Copy the Client Secret

8. Look for the Client Secret section.
9. Click Generate Secret (or the equivalent reveal control).
10. Copy the secret immediately and store it securely. Webflow will not show this value again. If you lose it, you will need to regenerate it, which invalidates any existing tokens issued by this app.

Important: Treat the Client Secret like a password. Do not commit it to source control, paste it into shared documents, or share it over chat. Store it in a secrets manager.

Part 3: Configure OttoKit

Once you have the Client ID and Client Secret, return to the OttoKit Webflow integration setup screen and complete the OAuth configuration by pasting the Client ID & Secret & once authenticated, the connection will be successful.