# Webflow

> Documentation for Webflow

---

# Webflow Documentation

Source: https://developers.webflow.com/llms-full.txt

---

---

# Introduction

> Your reference for building successful integrations with the Webflow Data API.

The Webflow Data API provides an extensive set of RESTful endpoints to help you create advanced tools and applications for Webflow users. This documentation is your guide to building successful integrations.

## Make your first API call

<div class="my-6">
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 items-center">
    <div class="prose dark:prose-invert">
      To get started, click the "Try it" button on the Get Sites endpoint to make your first API call. Clicking it will open an interactive API explorer where you can authenticate and send a live request to see a list of your sites.

      Once you authenticate, you can navigate to other endpoints to see the different resources and actions you can perform.
    </div>

    <ApiEndpoint method="GET" endpoint="/v2/sites" link="/data/reference/sites/list?explorer=true" returnPath="/data/reference/rest-introduction" />
  </div>
</div>

## Core concepts

Get familiar with the core concepts of the Webflow Data API.

<CardGroup>
  <Card
    title="Authentication"
    href="/data/reference/authentication"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/SecurityCertified.svg"
          alt=""
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/SecurityCertified.svg"
          alt=""
          className="block dark:hidden"
        />
      </>
    }
  >
    Learn how to authenticate your requests to the Webflow Data API.
  </Card>

  <Card
    title="Rate Limiting"
    href="/data/reference/rate-limits"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/TimeTurner.svg"
          alt=""
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/TimeTurner.svg"
          alt=""
          className="block dark:hidden"
        />
      </>
    }
  >
    Understand the rate limits for the Webflow Data API.
  </Card>

  <Card
    title="Versioning"
    href="/data/reference/versioning"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/BranchMerge.svg"
          alt=""
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/BranchMerge.svg"
          alt=""
          className="block dark:hidden"
        />
      </>
    }
  >
    Learn how to work with API versions.
  </Card>

  <Card
    title="Error Handling"
    href="/data/reference/error-handling"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Support.svg"
          alt=""
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Support.svg"
          alt=""
          className="block dark:hidden"
        />
      </>
    }
  >
    Understand how to handle errors returned by the API.
  </Card>
</CardGroup>

<br />

## API structure

Webflow's API follows a resource model, providing a clear hierarchy for accessing and manipulating data. The diagram below illustrates the main resources and their relationships. Lear more about the response objects for each resource in the [API structure](/data/reference/structure-1) documentation.

<div>
  <iframe src="https://webflow-api-diagram.netlify.app" width="100%" height="800px" />
</div>

## Next steps

Now that you've made your first API call, you're ready to dive deeper.

<CardGroup cols={2}>
  <Card
    title="Developer Guides"
    href="/data/docs/data-clients"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Docs.svg"
          alt=""
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Docs.svg"
          alt=""
          className="block dark:hidden"
        />
      </>
    }
  >
    Follow our guides to build common integrations and workflows.
  </Card>

  <Card
    title="SDKs"
    href="/data/reference/sdks"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Code.svg"
          alt=""
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Code.svg"
          alt=""
          className="block dark:hidden"
        />
      </>
    }
  >
    Explore our official SDKs to accelerate your development.
  </Card>
</CardGroup>

<br />

<Note title="Need to work directly in the Designer?">
  If you're looking to build apps that create and enhance designs within
  Webflow, the [Designer APIs](/designer/reference/introduction) are the right
  tools for the job. These APIs enable you to add and modify elements, styles,
  assets, and more on your design canvas.

  <br />

  <br />

  <a href="/designer/reference/introduction">
    <button class="cc-primary">
      Explore the Designer APIs
    </button>
  </a>
</Note>

<br />

---

# Getting Started

> A quick guide to help you set up an App and start making request to Webflow's REST API

In this guide, you'll create your first Data Client app to authorize with Webflow and make your first request to the Webflow REST API.

#### Before you start

To successfully follow along with this guide, make sure you have the following:

* A Webflow site for development and testing
  -[A registered app on your Workspace](/data/docs/register-an-app) with the `sites:read` scope enabled
* An IDE of your choice
* Node.js installed on your machine.

<br />

## Quick Start (5 minutes)

This quick start will get you up and running with a data client app

<Steps>
  ### Clone the starter app

  ```bash
  git clone https://github.com/Webflow-Examples/webflow-app-starter-v2
  cd webflow-app-starter-v2
  npm install
  ```

  ### Add your credentials to `.env`

  Navigate to your Workspace settings in the Webflow dashboard and find your Client ID and Secret in the Apps & Integrations -> App Development section. Replace the placeholder values in the `.env.example` file with your own Client ID and Secret. Then save the file as `.env`.

  ```env
  WEBFLOW_CLIENT_ID=your_client_id
  WEBFLOW_SECRET=your_client_secret
  ```

  ### Start the server

  ```bash
  npm run dev
  ```

  ### Update your redirect URI

  In your workspace settings, navigate to the app development section and your app's details, update the redirect URI to `http://localhost:3000/auth`

  <Frame>
    ![Redirect URI](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/69e85591af4d8656da1d69e8c57622c2ef69bd6d1e70a235a7e89d803df62671/products/data/pages/Apps/data-clients/getting-started-data-clients/redirect-uri.png)
  </Frame>

  ### Visit your app

  Visit `http://localhost:3000` (or the port of your choice)and click "Connect with Webflow" to see your Webflow sites!
  <Frame>![Webflow App Example](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/b6bdd02fce8f20d398ead866ebee2aa4cdc6779393013cedff5ff2bef9ec74bf/products/data/pages/Apps/data-clients/getting-started-data-clients/new-user.png)</Frame>
</Steps>

## Understanding the example

[This example](https://github.com/Webflow-Examples/webflow-app-starter-v2) is a simple Node.js app that handles authorization and makes a single request to the Webflow REST API.

Review the code in `server.js`to understand how the App works.

<Accordion title="Installation and configuration">
  The app uses [Fastify](https://www.fastify.io/) to create a lightweight server, [Level](https://github.com/Level/level) as a database, and the [Webflow JavaScript SDK](https://www.npmjs.com/package/webflow-api) to make authenticated requests to the Webflow REST API. To keep things simple, the frontend of the app is built with vanilla JavaScript and CSS, with a simple HTML file served from the `public` directory.

  In the beginning of `server.js`, imports the necessary dependencies, loads environment variables, and initializes the Fastify server. Here, security headers are added to the server to protect against common web vulnerabilities. Also, it initializes the database for storing access tokens.

  ```javascript title="server.js" maxLines=10
  import { WebflowClient } from "webflow-api";
  import Fastify from "fastify";
  import fastifyStatic from "@fastify/static";
  import path from "path";
  import url from "url";
  import { Level } from "level";
  import fs from "fs/promises";

  // Load environment variables from .env file
  const {
  WEBFLOW_CLIENT_ID,
  WEBFLOW_SECRET,
  PORT
  NODE_ENV = "development",
  } = process.env;

  // Validate required environment variables
  if (!WEBFLOW_CLIENT_ID || !WEBFLOW_SECRET) {
  console.error(
     "Missing required environment variables. Please check your .env file:"
  );
  console.error("WEBFLOW_CLIENT_ID and WEBFLOW_SECRET are required");
  process.exit(1);
  }

  // Initialize our server with basic security headers
  const server = Fastify({
  logger: true,
  trustProxy: true, // Required for secure cookies behind a proxy
  });

  // Add security headers
  server.addHook("onSend", async (request, reply) => {
  reply.headers({
     "X-Content-Type-Options": "nosniff", // Prevent MIME type sniffing
     "X-Frame-Options": "DENY", // Prevent clickjacking
     "Strict-Transport-Security": "max-age=31536000; includeSubDomains", // Enforce HTTPS
  });
  });

  // Initialize the database (Note: Use a proper database in production)
  const db = new Level("data", { valueEncoding: "json" });
  await db.open();
  ```
</Accordion>

<Accordion title="OAuth Authentication">
  The App implements OAuth 2.0 authentication through a dedicated `/auth` route that handles both initiating the authorization flow and processing Webflow's callback response. When a user clicks "Connect with Webflow", this route first redirects them to Webflow's authorization page. After the user grants permission, Webflow redirects back to this route with an authorization code that the App exchanges for an access token.

  For a comprehensive walkthrough of implementing OAuth 2.0 authentication in your App, refer to the detailed [OAuth 2.0 guide](/data/reference/oauth-app).

  #### Start the OAuth 2.0 authorization flow

  This route will check for a `code` query parameter. If the code isn't present, Webflow will redirect the user to the Webflow OAuth 2.0 authorization page using the `authorizeURL` method of the Webflow JavaScript SDK.

  ```javascript server.js
  // OAuth 2.0 authentication endpoint
  server.get("/auth", async (req, reply) => {
    const { code, error, error_description } = req.query;

    // If no code is provided, redirect to the authorization URL
    if (!code) {
      const installUrl = WebflowClient.authorizeURL({
        scope: scopes,
        clientId: WEBFLOW_CLIENT_ID,
        // Optional: Add state parameter for CSRF protection
        state: Math.random().toString(36).substring(7),
      });
      return reply.redirect(installUrl);
    }
  });
  ```

  #### Request an access token

  If the `code` query parameter is present, we'll use it to request an access token from Webflow using the `getAccessToken` method of the Webflow JavaScript SDK. We'll also store the access token in the database and redirect the user to the root URL of the App.

  ```javascript server.js
  // OAuth 2.0 authentication endpoint
  server.get("/auth", async (req, reply) => {

  // Previous Code //

    try {
      // Exchange the code for an access token
      const token = await WebflowClient.getAccessToken({
        clientId: WEBFLOW_CLIENT_ID,
        clientSecret: WEBFLOW_SECRET,
        code: code,
      });

      // Store the token in the database
      await db.put("token", token);

      if (NODE_ENV === "development") {
        console.log("\nAccess Token Received:", token, "\n");
      }

      return reply.redirect("/?authorized=true");
    } catch (error) {
      console.error("Auth Error:", error);
      return reply.code(500).send({
        error: "Authentication failed",
        message: error.message,
      });
    }
  });
  ```

  <Warning>
    The example App stores and retrieves a single access token directly in the Level database. In a production app, you'll want to implement proper user management and token storage, including:

    * Storing tokens securely per user/workspace
    * Encrypting sensitive data
    * Using secure session management

    Consider using dedicated auth services or implementing these security measures using libraries like Passport.js, JWT tokens, and proper database encryption.
  </Warning>
</Accordion>

<Accordion title="Making requests to the REST API">
  After the user has authorized the App, it can make requests to the REST API using the `WebflowClient` object. Here, the `/sites` route makes a request to the "[List Sites](https://developers.webflow.com/data/reference/sites/list)" endpoint.

  Before calling the API, the App retrieves the access token from the database and creates a new, authenticated `WebflowClient` object.

  ```javascript server.js
  // Example API endpoint
  server.get("/sites", async (req, reply) => {
    try {
      const accessToken = await db.get("token");

      const webflow = new WebflowClient({ accessToken });

      const sites = await webflow.sites.list();
      return sites;

    } catch (error) {
      console.error("API Error:", error);

      // Handle different types of errors
      if (error.response?.status === 401) {
        return reply.code(401).send({
          error: "Invalid token",
          message: "Please authenticate again",
        });
      }

      return reply.code(500).send({
        error: "Server error",
        message: "Failed to fetch sites",
      });
    }
  });
  ```
</Accordion>

## Next Steps

Now that you have a working app, you can:

{/* <!-- vale off --> */}

1. **Add more API endpoints**: Explore the [API Reference](/data/reference) and the [Data Client Guides](/data/docs/data-clients) to add functionality
2. **Add Designer Extension capabilities**: Learn how to [add Designer Extension capabilities](/designer/docs/getting-started-designer-extensions) to your App.
3. **Authenticate a Hybrid App**: [Learn how to implement authentication](/apps/docs/authenticating-users-with-id-tokens) for Apps using Data Client and Designer Extension capabilities.
4. **Prepare your Marketplace app**: Learn how to [prepare your App for submission to the Webflow Marketplace](/apps/docs/marketplace/submitting-your-app)

{/* <!-- vale on --> */}

### FAQs

<Accordion title="Why can't other users install my app on their sites?">
  Only apps published to the Webflow Marketplace, either [publicly](/apps/docs/marketplace/submitting-your-app) or [privately](/apps/docs/private-apps), can be installed by other users. Submit your app for review to make it available for installation.

  **Want to test with a few users before publishing?**\
  Email [developers@webflow.com](mailto:developers@webflow.com) with up to **5** Webflow user emails. Our team can add them to a test group so they can install and use your app with the [install URL](/apps/docs/marketplace/submitting-your-app#installation-configuration).
</Accordion>

---

# Structure

Webflow's API follows a well-structured resource model, providing a clear hierarchy for accessing and manipulating data within a Webflow project. Each resource represents a distinct aspect of a Webflow project, which Apps can access to perform specific operations and retrieve relevant data.

<div>
  <iframe src="https://webflow-api-diagram.netlify.app" width="100%" height="1300px" />
</div>

---

# Authentication

> Learn how to authenticate with the Webflow API to securely access and manage your Webflow projects. Follow our guide for seamless integration and API token management.

This guide covers the options for authenticating requests to the Webflow API, including the different methods available and how to choose the best approach for your needs.

## Getting a token

To access the Webflow API, you need to authenticate your requests using a bearer token, which must be included in the authorization header of each API request. There are types of bearer tokens you can create: [Site Tokens](/data/reference/site-token) and [OAuth tokens](/data/reference/oauth-app). Each method is suited to different use cases, and choosing the right one depends on your specific needs.

<CardGroup>
  <Card
    title="Site Token"
    href="/data/reference/site-token"
    iconSize="12"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/KPIs.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/KPIs.svg" alt="" className="block dark:hidden" />
        </>
    }
  >
    Site Tokens provide a simple way to authenticate API requests for a specific Webflow site.

    <br />

    **When to use**<br />
    Best suited for internal tools and single-site integrations where you control the environment.

    <br />

    <a href="/data/reference/site-token">
      <button class="button cc-secondary">Get a Site Token</button>
    </a>
  </Card>

  <Card
    title="OAuth"
    href="/data/reference/oauth-app"
    iconSize="12"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/App.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/App.svg" alt="" className="block dark:hidden" />
        </>
    }
  >
    OAuth Tokens are used for complex integrations that span multiple sites or require user-specific access.

    <br />

    **When to use**<br />
    Ideal for public integrations, Apps in the Webflow Marketplace, or any scenario requiring secure, user-specific access.

    <br />

    <a href="/data/reference/oauth-app">
      <button class="button cc-secondary">Get OAuth Token</button>
    </a>
  </Card>
</CardGroup>

<Note title="Quickstart Tip">
  If you're eager to explore the API without setting up full authentication, use our API playground available in the [API reference. ](/data/reference/sites/list)Authenticate once and make requests directly from the documentation.
</Note>

## Sending a request

Sending a request to the Webflow API v2 is straightforward. Include your bearer token in the Authorization header:

```curl cURL
curl --request GET \
     --url https://api.webflow.com/v2/sites \
     --header 'accept: application/json' \
     --header 'authorization: Bearer YOUR_TOKEN'
```

Replace `YOUR_TOKEN` with your actual API token. This setup authenticates your request, allowing access to Webflow resources.

## Revoking a token

To maintain the security of your integration, it's important to revoke access tokens when they're no longer needed or if you suspect they have been compromised. Revoking a token immediately invalidates it, ensuring that it can no longer be used to access the Webflow API.

You can revoke tokens programmatically through the Webflow API or manage them directly within the Webflow dashboard.

<Tabs>
  <Tab title="Site Token">
    Webflow users can remove Site Tokens from the Site Settings. This ensures that unused tokens are securely revoked.

    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/4b37c5fcf7a8b5678a6908078260d3ac50402765a6dd0935149d0c2ac9ad16c9/assets/images/2457dbd-Screenshot_2024-07-31_at_6.13.34_PM.png" alt="Site Token Removal" />
  </Tab>

  <Tab title="OAuth Token">
    You can programmatically revoke an access token obtained through the OAuth 2.0 flow by making a call to the API. For detailed instructions, see our OAuth Authorization Docs.

    <br />

    <br />

    <button class="button cc-primary" onclick="window.location.href='https://developers.webflow.com/data/reference/oauth-app#revoke-an-access-token'">
      View OAuth docs
    </button>
  </Tab>
</Tabs>

## Securing and storing your API tokens

When working with the Webflow API, safeguarding your API tokens is critical to maintaining the security and integrity of your application. API tokens are like passwords for your application—they provide access to sensitive data and actions. Protecting them is essential to prevent unauthorized use and potential security breaches.

### Best practices for token security

1. **Use environment variables**\
   Store API tokens in environment variables rather than in your source code. This reduces the risk of accidentally exposing tokens, especially if your code is shared or made public.
2. **Regular token rotation and revocation**\
   Regularly rotate your API tokens to minimize risk. If you suspect a token has been compromised, revoke it immediately and generate a new one.

## Troubleshooting

Despite best efforts, issues with API tokens can still occur. Here are common pitfalls and tips to resolve them:

<Accordion title="Expired or invalid tokens">
  * Implement a system to refresh tokens automatically before they expire, or prompt users to re-authenticate.
  * Check token validity and handle expired tokens gracefully in your application.
</Accordion>

<Accordion title="Scope and permission errors">
  * Ensure your tokens include the correct scopes for the actions you intend to perform. Review the Webflow API documentation for an API endpoint  to verify required scopes.
</Accordion>

#### Debugging tips

* Log and review error messages to identify where the authentication process is breaking down.
* Start with minimal scopes to test and gradually increase permissions as needed.
* Verify that your requests include the authorization header with the token.

---

# OAuth

This tutorial guides you through setting up an [OAuth 2.0](https://oauth.net/2/) authentication flow. This flow allows users to grant limited permissions to your App and enables your App to request an access token to perform actions on behalf of the user.

By the end of this tutorial, your Webflow App will be able to obtain an access token on behalf of a user using the [Authorization Code Grant flow.](https://developer.okta.com/blog/2018/04/10/oauth-authorization-code-grant-type)

<Card
  title="Quickstart"
  icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Apps.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Apps.svg" alt="" className="block dark:hidden" />
        </>
    }
  iconSize={12}
  iconPosition="left"
  href="https://github.com/Webflow-Examples/cms-examples"
>
  Our example Apps come with the OAuth 2.0 flow already set up for you. Start building your Webflow App quickly by using one of our pre-configured example apps. <br /><br />

  <a href="https://github.com/Webflow-Examples/cms-examples">
    <button class="button cc-primary">
      CMS Explorer
    </button>
  </a>
</Card>

### Authorization Code Grant Flow

Webflow uses the [Authorization Code Grant flow](https://developer.okta.com/blog/2018/04/10/oauth-authorization-code-grant-type) to provide access tokens to Apps. This flow involves a series of interactions between Webflow's authorization server and your web app. Here’s how the process works when a user visits your site for the first time:

1. **User sign-up/Login**: A user signs up or logs in to your App. At some point, they may need to perform an action that requires using the Webflow API.
2. **Authorization request**: To make requests to the Webflow API on the user’s behalf, your App redirects the user to an authorization screen. Here, they can review the permissions your App is requesting and authorize access to specific Webflow Sites or a Workspace.
3. **User authorization**: Once the user grants authorization, Webflow redirects them back to your App via a redirect URI specified during the app setup, adding a `code` parameter to the query string.
4. **Token Request**: Your app uses the `code` to make a secure request to Webflow's authorization server to obtain an access token. If the request is valid, Webflow responds with an access token.
5. **API Requests**: Your app can now use this access token to make requests to the Webflow API on behalf of the user.

<br />

<br />

---

# Get an access token

#### Requirements

Before you begin, ensure you have the following:

* A Webflow App created with the "Data Client" building block. [Learn more here](https://developers.webflow.com/data/docs/getting-started-apps)
* Your app's client credentials: `client_id` and `client_secret.`<br />\
  **Note:** Only workspace administrators are authorized to view a client secret. If you're not a site administrator, please contact one to get the secret for you.

<br />

<Accordion title="1. Set up your server">
  Before you can request an access token, you'll need to set up your server to handle the OAuth 2.0 flow. We recommend using JavaScript or Python, as we provide SDKs for these languages that can help simplify the authentication process.

  Follow the below examples in Node.js or Python to help you create a server that can accept requests and communicate with the Webflow authorization server.

  <Tabs>
    <Tab title="Node.js">
      1. **Install the necessary packages**

         Ensure all required libraries and dependencies are installed.

         ```bash
         npm install express dotenv webflow-api
         ```

      2. **Store environment variables**

         Create a `.env` file to store your sensitive information like the `CLIENT_ID` and `CLIENT_SECRET`.

         ```txt .env
         CLIENT_ID=your_client_id
         CLIENT_SECRET=your_client_secret
         REDIRECT_URI=your_redirect_uri #optional
         STATE=your_unique_state #optional
         ```

      3. **Initialize server**

         Set up the server to listen on a specific port.

         ```javascript server.js
         require('dotenv').config();
         const express = require('express');
         const { WebflowClient } = require('webflow-api');
          
         const app = express();
         const port = 3000;
          
         /*
           We'll add the necessary endpoints here in the steps below.
         */
          
         app.listen(port, () => {
             console.log(`Server is running at http://localhost:${port}`);
         });
         ```
    </Tab>

    <Tab title="Python">
      1. **Install the necessary packages**

         Ensure all required libraries and dependencies are installed.

         ```bash
         pip install flask requests python-dotenv >webflow
         ```

      2. **Store environment variables**

         Create a `.env` file to store your sensitive information like the `CLIENT_ID` and `CLIENT_SECRET`.

         ```txt .env
         CLIENT_ID=your_client_id
         CLIENT_SECRET=your_client_secret
         REDIRECT_URI=your_redirect_uri #optional
         STATE=your_unique_state #optional
         ```

      3. **Initialize server**

         Set up the server to listen on a specific port.

         ```python server.py
         from flask import Flask, request, redirect
           import requests
           from webflow import WebflowClient
           from dotenv import load_dotenv
           import os
           
           load_dotenv()
           
           app = Flask(__name__)
           
           client_id = os.getenv('CLIENT_ID')
           client_secret = os.getenv('CLIENT_SECRET')
           redirect_uri = os.getenv('REDIRECT_URI')
           state = os.getenv('STATE')
           
           # We'll add the necessary endpoints here in the steps below
           
           if __name__ == '__main__':
               app.run(port=3000)
         ```
    </Tab>
  </Tabs>
</Accordion>

<Accordion title="2. Create an authorization link">
  To enable users to install your App, you need to create an authorization link. This link directs users to a Webflow authorization screen where they can grant your App permission to access their Webflow data.

  <Note title="Where do I put this link?">
    **App Marketplace Submission:** Supply this link in your application to the App marketplace. Users will use it to install your App from the marketplace.

    **Your Site:** Place this link on your site to direct users to try out or install your App.
  </Note>

  You can create the authorization link using various methods, with the recommended approach being through our JavaScript and Python SDKs.

  ### Request Parameters

  To create the authorization link, you will need the following information:

  {/* <!-- vale off --> */}

  <ParamField path="client_id" type="string" required={true}>
    Unique ID for your application. Can be found in the dashboard.
  </ParamField>

  <ParamField path="response_type" type="string" required={true}>
    This value should always be "code".
  </ParamField>

  <ParamField path="redirect_uri" type="string" required={true}>
    The URI to redirect the user once they've granted authorization. This must match what's used in your App settings.
  </ParamField>

  <ParamField path="state" type="string" required={false}>
    A token value provided by your application to prevent [CSRF attacks.](https://owasp.org/www-community/attacks/csrf#:~:text=CSRF%20attacks%20target%20functionality%20that,the%20response%2C%20the%20victim%20does.) If passed, the authorization server should respond with this parameter.
  </ParamField>

  {/* <!-- vale on --> */}

  ### Constructing the authorization link

  <Note title="Scopes on the OAuth URL">
    Verify that the scopes requested in this Install/OAuth URL are equal to or a subset of the scopes configured for your app in the app settings. If there's a mismatch where the Install URL requests scopes beyond what's configured in the app settings, users won't be able to install your app and an error will be displayed.
  </Note>

  #### Using the SDK

  To simplify the process of creating authorization links and handling OAuth flows, you can use the provided JavaScript and Python SDKs. These SDKs offer convenient methods to generate the authorization URL with the required parameters.

  <Tabs>
    <Tab title="Node.js">
      <CodeBlocks>
        ```javascript server.js
        require('dotenv').config();
        const express = require('express');
        const { WebflowClient } = require('webflow-api');

        const app = express();
        const port = 3000;

        // Endpoint to redirect to the authorization link
        app.get('/auth', (req, res) => {
            const authorizeUrl = WebflowClient.authorizeURL({
                state: process.env.STATE,
                scope: 'sites:read',
                clientId: process.env.CLIENT_ID,
                redirectUri: process.env.REDIRECT_URI,
            });

            res.redirect(authorizeUrl);
        });

        app.listen(port, () => {
            console.log(`Server is running at http://localhost:${port}`);
        });
        ```
      </CodeBlocks>
    </Tab>

    <Tab title="Python">
      ```python server.py
      from flask import Flask, request, redirect
      import requests
      from webflow import WebflowClient
      from dotenv import load_dotenv
      import os

      load_dotenv()

      app = Flask(__name__)

      client_id = os.getenv('CLIENT_ID')
      client_secret = os.getenv('CLIENT_SECRET')
      redirect_uri = os.getenv('REDIRECT_URI')
      state = os.getenv('STATE')

      # Endpoint to redirect to the authorization link
      @app.route('/auth')
      def auth():
          authorize_url = WebflowClient.authorize_url(
              client_id=client_id,
              redirect_uri=redirect_uri,
              scope='sites:read',
              state=state
          )
          return redirect(authorize_url)

      if __name__ == '__main__':
          app.run(port=3000)
      ```
    </Tab>
  </Tabs>

  <Accordion title="Manually create the authorization link">
    If you prefer not to use the SDKs, you can manually construct the authorization link by adding the necessary query parameters to the authorization URL:

    ```
    https://webflow.com/oauth/authorize
    ```

    Construct the authorization URL using the gathered parameters:

    ```
    https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=assets%3Aread%20assets%3Awrite%20authorized_user%3Aread%20cms%3Aread%20cms%3Awrite%20custom_code%3Aread%20custom_code%3Awrite%20forms%3Aread%20forms%3Awrite%20pages%3Aread%20pages%3Awrite%20sites%3Aread%20sites%3Awrite
    ```

    * When URL encoding multiple scopes, they should be connected by a space (`%20`).
    * Scopes are written in the format `scope:action`, so the colon (`:`) should be encoded as `%3A`.

    For example passing the following scopes: `sites:read`, `sites:write`, and `pages:read` should look like `sites%3Aread%20sites%3Awrite%20pages%3Aread`
  </Accordion>

  <Accordion title="Copy the link from the Dashboard">
    Additionally, you can copy an auto-generated installation link from your App's settings.

    In your Workspace Dashboard:

    1. Select to "Apps and Integrations" in the left-hand menu
    2. Scroll to the "App Development" section and find your App
    3. Copy the link from the "Install" button

    ![](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/03ea4397a4842151aa904b64c714b8346c130b6bbd63a58bc5869ebf99079626/assets/images/390600a-Screenshot_2024-08-01_at_4.13.54_PM.png)
  </Accordion>
</Accordion>

<Accordion title="3. Handle redirect to the callback URI">
  When users click on the authorization link, they will be taken to a screen where they can review and grant the necessary permissions for your App.

  ![](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/c8c5a4f13b061633a6de470024eff5a7873e0b7bf876aaa4f0935d191ee23824/assets/images/bcd2d30-image.png)

  After the user authorizes the App, Webflow redirects them to your server using the redirect URI specified in your App settings. This `GET` request to your server includes the following query parameters:

  * `code` - A single-use authorization code that you'll exchange for an access token. This code is only valid for 15 minutes.
  * `state` : *optional* - The unique state value you provided in the initial request. Ensure this value matches the original to protect against CSRF attacks.

  ***

  Let's set up an endpoint to handle the callback request and store these parameters, as you'll need them in the next step to request an access token from Webflow.

  See the example below for details on completing the following steps:

  1. **Setup the callback endpoint**\
     Create a route to handle the redirect from Webflow
  2. **Verify `state` parameter**\
     Optionally, check that the state parameter matches the one sent in the authorization request.
  3. **Extract authorization code**\
     Retrieve the code from the query parameters.

  #### Example

  <Tabs>
    <Tab title="Node.js">
      ```javascript server.js
      require('dotenv').config();
      const express = require('express');
      const { WebflowClient } = require('webflow-api');

      const app = express();
      const port = 3000;

      // Endpoint to redirect to the authorization link
      app.get('/auth', (req, res) => {
          const authorizeUrl = WebflowClient.authorizeURL({
              state: process.env.STATE,
              scope: 'sites:read',
              clientId: process.env.CLIENT_ID,
              redirectUri: process.env.REDIRECT_URI,
          });

          res.redirect(authorizeUrl);
      });

      // Endpoint to receive info from the callback URL
      app.get('/callback', async (req, res) => {
          const { code, state } = req.query; // Store code and state parameters as variables

          if (state !== process.env.STATE) {
              return res.status(400).send('State does not match');
          }
      });

      app.listen(port, () => {
          console.log(`Server is running at http://localhost:${port}`);
      });
      ```
    </Tab>

    <Tab title="Python">
      ```python server.py
      from flask import Flask, request, redirect
      import requests
      from webflow import WebflowClient
      from dotenv import load_dotenv
      import os

      load_dotenv()

      app = Flask(__name__)

      client_id = os.getenv('CLIENT_ID')
      client_secret = os.getenv('CLIENT_SECRET')
      redirect_uri = os.getenv('REDIRECT_URI')
      state = os.getenv('STATE')

      # Endpoint to redirect to the authorization link
      @app.route('/auth')
      def auth():
          authorize_url = WebflowClient.authorize_url(
              client_id=client_id,
              redirect_uri=redirect_uri,
              scope='sites:read',
              state=state
          )
          return redirect(authorize_url)

      # Endpoint to receive info from the callback URL
      @app.route('/callback')
      def callback():
          authorization_code = request.args.get('code') // Store parameters
          state_received = request.args.get('state') // Store parameters

          if state_received != state:
              return 'State does not match', 400

          
      if __name__ == '__main__':
          app.run(port=3000)
      ```
    </Tab>
  </Tabs>
</Accordion>

<Accordion title="4. Request an access token">
  Now that you have the authorization code you can exchange it for an access token. The access token request should be made as soon as possible after authorization as an unconfirmed authorization code is only valid for 15 minutes.

  Let's walk through the steps to create a smooth flow for a user:

  1. **Request an access token from Webflow's authorization server**

     In the same endpoint we just set up, create a request to Webflow with the following parameters. Webflow requires these parameters to ensure that the entity requesting the access token is the same entity that received the authorization code.

     #### Authorization server endpoint

     `POST https://api.webflow.com/oauth/access_token`

     #### Request parameters

  {/* <!-- vale off --> */}

  <ParamField path="client_id" type="string" required={true}>
    Unique ID for your application. Can be found in the dashboard.
  </ParamField>

  <ParamField path="client_secret" type="string" required={true}>
    Private value unique to your application. Can be found in the dashboard.
  </ParamField>

  <ParamField path="code" type="string" required={true}>
    Authorization code used to retrieve an `access_token` for the user. Can only be used once.
  </ParamField>

  {/* <!-- vale on --> */}

  2. **Store the access token securely**

     For demonstration purposes, we're storing the access token in a variable and printing it to the terminal. However, this approach isn't secure for production. You should store the access token securely in a database or environment variables. For comprehensive guidance on securely storing tokens, please refer to our example apps on [GitHub](https://github.com/Webflow-Examples).

  3. **Redirect the user within your App**

     After successfully obtaining the access token, redirect the user to an appropriate location within your app. This could be a dashboard, a welcome page, or any other relevant section. Ensure that the user experience is smooth and they're informed about the successful authentication.

  #### Example

  <Tabs>
    <Tab title="Node.js">
      ```javascript server.js
      require('dotenv').config();
        const express = require('express');
        const { WebflowClient } = require('webflow-api');
        
        const app = express();
        const port = 3000;
        
        // Endpoint to redirect to the authorization link
        app.get( '/auth', (req, res) => {
            const authorizeUrl = WebflowClient.authorizeURL({
                state: process.env.STATE,
                scope: 'sites:read',
                clientId: process.env.CLIENT_ID, 
                redirectUri: process.env.REDIRECT_URI, // If the redirect URI is included in the auth link, it must also be included in the request for an access token
            });
        
            res.redirect(authorizeUrl);
        });
        
        // Endpoint to receive info from the callback URL
        app.get('/callback', async (req, res) => {
            const { code, state } = req.query;
        
            if (state !== process.env.STATE) {
                return res.status(400).send('State does not match');
            }
        
            try {
              // Request an access token
             const accessToken = await WebflowClient.getAccessToken({
                  clientId: process.env.CLIENT_ID,
                  clientSecret: process.env.CLIENT_SECRET,
                  code: code,
                  redirect_uri: process.env.REDIRECT_URI,
              });
        
              // Store the access token securely, e.g., in a database or session (not shown here for brevity)
            console.log(accessToken)

            // Redirect the user to your App
            res.redirect('/dashboard')

              
          } catch (error) {
              console.error('Error during OAuth process:', error);
              res.status(500).send('Internal Server Error');
          }
        
        });

          // Dashboard route for demonstraton purposes
          app.get('/dashboard', async (req, res) => {
              res.send('Welcome to your dashboard!')
          });
        
        app.listen(port, () => {
            console.log(`Server is running at http://localhost:${port}`);
        });
        
      ```
    </Tab>

    <Tab title="Python">
      ```python server.py
      from flask import Flask, request, redirect
        import requests
        from webflow import WebflowClient
        from dotenv import load_dotenv
        import os
        
        load_dotenv()
        
        app = Flask(__name__)
        
        client_id = os.getenv('CLIENT_ID')
        client_secret = os.getenv('CLIENT_SECRET')
        redirect_uri = os.getenv('REDIRECT_URI')
        state = os.getenv('STATE')
        
        # Endpoint to redirect to authorization link
        @app.route('/auth')
        def auth():
            authorize_url = WebflowClient.authorize_url(
                client_id=client_id,
                redirect_uri=redirect_uri,
                scope='sites:read',
                state=state
            )
            return redirect(authorize_url)
        
        # Endpoint to recieve info from the callback URI
        @app.route('/callback')
        def callback():
            authorization_code = request.args.get('code')
            state_received = request.args.get('state')
        
            if state_received != state:
                return 'State does not match', 400
        
            # Request an access token
            try:
                access_token = WebflowClient().get_access_token(
                    client_id=client_id,
                    client_secret=client_secret,
                    code=authorization_code,
                    redirect_uri=redirect_uri,
                )
        
                # Store the access token securely, e.g., in a database or session (not shown here for brevity)
             print(access_token)
                
                # Redirect the user to the dashboard
                return redirect('/dashboard')
        
            except Exception as e:
                print('Error during OAuth process:', e)
                return 'Internal Server Error', 500
        
        
          # Dashboard route for demonstration purposes
          @app.route('/dashboard')
          def dashboard():
              return 'Welcome to your dashboard'
        
          if __name__ == '__main__':
            app.run(port=3000)
      ```
    </Tab>
  </Tabs>
</Accordion>

<Accordion title="5. Start your server and test the authentication flow">
  You're ready to test your newly created authentication flow! In this step, we'll start our server, navigate to the authorization screen, and get an access token from Webflow.

  1. **Create a secure tunnel using [ngrok](https://ngrok.com/) *(OPTIONAL)***

     <Accordion title="using ngrok">
       ngrok can be used to create a secure tunnel to your localhost, providing you with an HTTPS link that can be used as a valid redirect URI.

       1. **Install ngrok**
          Download and install ngrok using a package manager or [directly from their website](https://developers.webflow.com/data/reference/oauth-app).

       <Tabs>
         <Tab title="Homebrew">
           ```shell
           brew install ngrok/ngrok/ngrok
           ```
         </Tab>

         <Tab title="Choco">
           ```shell
           choco install ngrok
           ```
         </Tab>
       </Tabs>

       2. **Authorize the ngrok agent**
          [Copy your authentication token](https://ngrok.com/blog-post/authentication-with-ngrok) from ngrok, and enter the following command in your terminal.

       ```
       ngrok config add-authtoken $YOUR_AUTHTOKEN
       ```

       3. **Create a secure tunnel**
          In a new terminal window, run the following command to create a tunnel to your local server:

       ```
       ngrok http 3000
       ```

       Ngrok will provide you with a public HTTPS URL that forwards to your local server running on port 3000. It should look something like this:

       ```
       https://your-ngrok-url.ngrok.io
       ```

       4. **Update your redirect URI in your App's settings**

       5. In your workspace settings, navigate to Apps & Integrations > App Development

       6. Find your App and click the "Edit App" button

       7. Navigate to the "Building Blocks" menu

       8. Update the Redirect URI with your Ngrok URL, ensuring that you include the correct endpoint. For example, if your endpoint is `/callback`, your Redirect URI should look something like `https://your-ngrok-url.ngrok.io/callback`.

       9. **Update the redirect URI in your `.env` file**
          Be sure to also update your redirect URI in your `.env` file if you're passing your callback URI when creating an authorization link.

       ```
       REDIRECT_URI=https://your-ngrok-url.ngrok.io/callback
       ```
     </Accordion>

  2. **Start your server**
     Enter the following command into your terminal to start your server.

     <Tabs>
       <Tab title="Node.js">
         ```
         node server.js
         ```
       </Tab>

       <Tab title="Python">
         ```
         python app.py
         ```
       </Tab>
     </Tabs>

  3. **Start the authorization flow**
     1. **Start the authentication process**
        Open your browser and go to `http://localhost:3000/auth`. You will be redirected to Webflow's authorization screen for your App.
     2. **Authorize your app**
        Select the workspace or sites you want your app to access, and click the "Authorize" button.
     3. **Redirect to your app**
        Upon successful authorization, you will be redirected to your app's dashboard.
     4. **Verify the access token**
        Check your terminal to see the access token printed out.

  Didn't see what you expected? [Read the troubleshooting guide below](https://developers.webflow.com/data/reference/oauth-app#troubleshooting).
</Accordion>

---

# Revoke an access token

To revoke an access token that has been issued to your application, make a POST request to the following endpoint with the below parameters:

```
https://webflow.com/oauth/revoke_authorization
```

### Request Parameters

<ParamField path="client_id" type="string" required={true}>
  The unique identifier for your OAuth application.
</ParamField>

<ParamField path="client_secret" type="string" required={true}>
  The secret key associated with your OAuth application.
</ParamField>

<ParamField path="access_token" type="string" required={true}>
  The access token that you wish to revoke.
</ParamField>

### Example Request

```curl cURL
curl -X POST https://webflow.com/oauth/revoke_authorization \
  -H "Content-Type: application/json" \
  -d '{
        "client_id": "2ccc1b455c782fd60093590c83ee5e315b36bd6640507bb48570e5d0265c2854",
        "client_secret": "d26ec60528020e1caf426db1a20dceaf5f4e3581bb29bc659b2886d46a7160ed",
        "access_token": "53db404efe82daea0c65c635a49bc9388e470146b4d800f559cb9a7f3daf83f1"
      }'
```

### Response

If the request is successful, the access token will be revoked, and the response will return an HTTP status code of `200` OK with the following response body:

```json
{
    "did_revoke": true
}
```

### Possible Errors

| Error Type        | Description                                                                              |
| :---------------- | :--------------------------------------------------------------------------------------- |
| `invalid_client`  | The `client_id` or `client_secret` is invalid or doesn't match the provided credentials. |
| `invalid_token`   | The `access_token` provided doesn't exist or has already been revoked.                   |
| `invalid_request` | The request is missing one or more required parameters, or is otherwise malformed.       |

<br />

<br />

---

# Troubleshooting

<Accordion title="My authorization link shows 400 Bad Request">
  If your authorization link returns a 400 Bad Request error, ensure the following:<ul>  <li>The `client_id` is correct and matches the one provided in your app's settings.</li>  <li>The scopes you are requesting are registered and valid for your app in the dashboard.</li>  <li>If you are including the `redirect_uri` parameter, verify that it matches the one registered for your app in the dashboard.</li>  <li>Ensure that the URL is properly constructed and encoded if you are creating it manually.</li></ul>
</Accordion>

<Accordion title="My server responds with an invalid_grant error">
  <ul>
      

    <li>If you included a `redirect_uri` in your authorization link, you must also include it in your request for an access token.</li>

      

    <li>Ensure your environment variables are loading, and you're sending the correct `client_id` and `client_secret`.</li>

      

    <li>Make sure you have a fresh `code` value, these tokens are single-use and can not be used again. Also, the token is only valid for 15 minutes after it has been granted.</li>
  </ul>
</Accordion>

<br />

---

# Site Token

> Create an API token to access site-specific resources via the Webflow Data API.

Site tokens provide access to site-specific [resources](/data/reference/structure-1) via the Webflow Data API.

Site tokens are required to authenticate requests to the Webflow Data API. Each token acts as a unique identifier and password, allowing Webflow to verify:

* **Who** is making the request
* **What** they're allowed to do through [scopes and permissions](https://developers.webflow.com/data/reference/scopes)
* **Which** sites and workspaces they're accessing

You'll need to include your site token in the "Authorization" header of every API request. You'll see how to do this in the examples below.

<br />

## Creating a site token

<Note title="Site administrator access required">
  Only site administrators are authorized to create a site token. If you're not a site administrator, please contact one to create the token for you.
</Note>

{/* <!-- vale off --> */}

1. In your workspace, find the site you want to create a token for and click the <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/24px/Settings.svg" /> gear icon to open the site settings.

2. In the left sidebar of your site's settings, select **Apps & integrations**. Scroll to the bottom of the page to the **API access** section.
   <Frame>
     ![](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/8aac678edff413faac25dca4875c2f5b55af9b9a76b9354794191c95e15c5573/assets/images/d504f6c-image.png)
   </Frame>

3. Click Generate API token.

4. Enter a name for your token, and choose the [scopes](/data/reference/scopes) needed for your use case.
   {/* <!-- vale off --> */}
   <div>
     <Frame>
       ![](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/4214985a35cb0f9fa2cc64b81aad2086bb4138a0312c47a1cb2cd9f242281969/assets/images/67976fe-image.png)
     </Frame>
   </div>
   {/* <!-- vale on --> */}

5. Click "Generate token."

6. Copy the generated token to your clipboard and save it in a secure location.

<br />

{/* <!-- vale on --> */}

### Limitations

* **API tokens expire after 365 consecutive days of inactivity.** Any API call made with the token before expiry will reset the inactivity period.
* **Site tokens are created per site.** If you're looking to build an integration that works across multiple sites, [consider creating a Webflow App.](/data/docs/getting-started-apps)
* **Each site can have up to 5 tokens.** This limit ensures manageable token access and security.
* **Site tokens don't grant access to the following endpoints:**
  <br />
  * Authorization endpoints
  * Custom code endpoints
  * Workspace Activity log endpoints

<br />

## Using a site token

Now that you have your site token, you can start making requests to the Webflow Data APIs.

<Tabs>
  <Tab title="cURL">
    **Example**

    ```bash request
    curl --request GET \
      --url https://api.webflow.com/v2/sites \
      --header 'accept: application/json' \
      --header 'authorization: Bearer YOUR_API_TOKEN'
    ```

    This command retrieves a list of sites associated with your Webflow account. Replace `YOUR_API_TOKEN` with the site token you generated.
  </Tab>

  <Tab title="JavaScript">
    If you prefer working with JavaScript, you can use the Webflow JavaScript SDK. The SDK simplifies interacting with the Webflow API and handling requests.

    First, install the Webflow SDK using npm:

    ```bash
    npm install webflow-api
    ```

    **Example**

    ```javascript request
    import { WebflowClient } from 'webflow-api';

    const token = 'YOUR_API_TOKEN';
    const webflow = new WebflowClient({ accessToken: token });

    (async () => {
    try {
       const sites = await webflow.sites.list();
       console.log(sites);
    } catch (error) {
       console.error('Error fetching sites:', error);
    }
    })();
    ```

    This command retrieves a list of sites associated with your Webflow account. Replace `YOUR_API_TOKEN` with the site token you generated.
  </Tab>

  <Tab title="Python">
    To make requests to the Webflow API using Python, you'll need to install the Webflow package and use it to interact with the API.

    First, install the Webflow package using pip:

    ```bash
    pip install webflow
    ```

    **Example**

    ```python request
    from webflow.client import Webflow

    # Initialize the Webflow client with your access token
    client = Webflow(access_token="YOUR_ACCESS_TOKEN")

    # Fetch the list of sites
    sites = client.sites.list()

    # Print the list of sites
    print(sites)
    ```

    This command retrieves a list of sites associated with your Webflow account. Replace `YOUR_API_TOKEN` with the site token you generated.
  </Tab>
</Tabs>

### Example API response

Here's an example of what a response from the Webflow API might look like:

{/* <!-- vale off --> */}

<CodeBlocks>
  ```json Response
  {
     "id": "42e98c9a982ac9b8b742",
     "workspaceId": "42e63e98c9a982ac9b8b742",
     "displayName": "The Hitchhiker's Guide to the Galaxy",
     "shortName": "hitchhikers-guide",
     "previewUrl": "https://screenshots.webflow.com/sites/6258612d1ee792848f805dcf/20231219211811_d5990556c743f33b7071300a03bf67e6.png",
     "timeZone": "Magrathea/FactoryFloor",
     "createdOn": "1979-10-12T12:00:00.000Z",
     "lastUpdated": "2023-04-02T12:42:00.000Z",
     "lastPublished": "2023-04-02T12:42:00.000Z",
     "parentFolderId": "1as2d3f4g5h6j7k8l9z0x1c2v3b4n5m6",
     "customDomains": [
        {
           "id": "589a331aa51e760df7ccb89d",
           "url": "hitchhikersguide.galaxy"
        },
        {
           "id": "589a331aa51e760df7ccb89e",
           "url": "heartofgold.spaceship"
        }
     ],
     "locales": {
        "value": {
           "primary": {
              "id": "653fd9af6a07fc9cfd7a5e57",
              "cmsLocaleId": "653ad57de882f528b32e810e",
              "enabled": false,
              "displayName": "English (United States)",
              "displayImageId": null,
              "redirect": true,
              "subdirectory": "",
              "tag": "en-US"
           },
           "secondary": [
              {
                 "id": "653fd9af6a07fc9cfd7a5e56",
                 "cmsLocaleId": "653fd9af6a07fc9cfd7a5e5d",
                 "enabled": true,
                 "displayName": "French (France)",
                 "displayImageId": null,
                 "subdirectory": "fr-fr",
                 "tag": "fr-FR"
              },
              {
                 "id": "654112a3a525b2739d97664c",
                 "cmsLocaleId": "654112a3a525b2739d97664f",
                 "enabled": true,
                 "displayName": "Spanish (Mexico)",
                 "displayImageId": null,
                 "subdirectory": "es-mx",
                 "tag": "es-MX"
              }
           ]
        }
     }
  }
  ```
</CodeBlocks>

{/* <!-- vale on --> */}

<br />

## Revoking a site token

To revoke a site token:

1. Go to Site settings > Apps & integrations > API access.
2. Find your site token
3. Select the "revoke" button

<Frame>
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/59b3df60ea1946f9b4c1b9832cc5e6a5ce21d578374cc94b83a0665edaa3d8cf/assets/images/4d03d0a-image.png" alt="Revoke site token" />
</Frame>

Revoking a site token is an additional security measure for your Webflow site. This process disables the token, preventing any further access or use. You should consider revoking a site token in the following situations:

* **Security Concerns:** If there's a potential security issue, revoke the token immediately.
* **Administrator Changes:** If an administrator leaves or their role changes, revoke their token to maintain security.
* **Token Management:** Regularly review and revoke tokens that are no longer needed.

<br />

### Best practices

* **Mint tokens for each use case**: Instead of reusing tokens, generate a new token for each specific use case to maintain better security and control.
* **Rotate tokens periodically**: Regularly update and revoke old tokens to maintain security.
* **Be Descriptive**: Name your tokens something descriptive and meaningful to easily identify their purpose.
* **Minimal Scopes**: Generate tokens with the minimal scopes needed for your use case. Mint a new one if you need to add new scopes. This limits the potential impact if a token is compromised.

<br />

## Troubleshooting and FAQs

<Accordion title="How long is a site token valid?">
  Site tokens are valid until they're manually revoked or after 365 days of inactivity.
</Accordion>

<Accordion title="Can I regenerate a site token?">
  Yes, you can generate a new token at any time from the API access section in your site settings.
</Accordion>

<Accordion title="What happens if I lose my site token?">
  You will need to generate a new one and update any integrations using the old token.
</Accordion>

---

# Workspace Token

> Create an API token to access workspace-specific resources via the Webflow Data API.

Workspace tokens provide access to workspace-specific resources via the Webflow Data API.

These tokens are useful for workspace administrators that need access to workspace-level information and [audit logs](/data/reference/enterprise/workspace-audit-logs/get). For access to site data, use a [site token](/data/reference/site-token) instead.

<Warning title="Enterprise only">
  Workspace tokens are only available for Enterprise workspaces.
</Warning>

<br />

## Scopes and endpoints

Create workspace tokens with the following scopes and endpoints.

| Scope                      | Endpoints                                                                         |
| -------------------------- | --------------------------------------------------------------------------------- |
| `workspace_activity: read` | [`GET` Workspace Audit Logs](/data/reference/enterprise/workspace-audit-logs/get) |

Workspace tokens use separate [scopes](/data/reference/scopes) and [resources](/data/reference/structure-1) than site tokens. For example, workspace tokens don't have access to the `site` scope, therefore they can't access site-specific endpoints like [Get Site Information](/data/reference/sites/get). To ensure you're using the correct token for your use case, please refer to the [scopes](/data/reference/scopes) and [resources](/data/reference/structure-1) documentation.

<br />

## Creating a workspace token

<Note title="Workspace administrator access required">
  Only workspace administrators can create a workspace token.
</Note>

1. In the left sidebar of your Workspace, select **Apps & integrations** > **Manage**. Scroll to the bottom of the page to the **Workspace API access** section.
   <Frame background="subtle">
     <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/a71332126e298a724fb4b0058bcb5ebcdc80f7a89fcdbe5b9445e1228538e3c3/products/data/pages/Data API/rest-introduction/authentication/assets/workspace-api-access.png" alt="Workspace API access" />
   </Frame>

2. Click "Generate API token".

3. Enter a name for your API token.

4. Choose the permissions you want the API token to have for each [scope](/data/reference/scopes).\
   (e.g., no access or read-only).
   {/* <!-- vale off --> */}
   <div>
     <Frame background="subtle">
       <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/b27ab24ded563dfa6b306e6ac97f9d58439f2637fddeab4a235775705b226d81/products/data/pages/Data API/rest-introduction/authentication/assets/create-token-2.png" alt="Create token" />
     </Frame>
   </div>
   {/* <!-- vale on --> */}

5. Click Generate token.

6. Copy the generated token to your clipboard and save it in a secure location.

<br />

### Limitations

* **Enterprise only.** Workspace tokens are only available for Enterprise workspaces.
* **API tokens expire after 365 consecutive days of inactivity.** Any API call made with the token before expiry will reset the inactivity period.
* **Each workspace can have up to 5 tokens.** This limit ensures manageable token access and security.
* **Limited endpoints.** Workspace tokens are designed with different scopes than site tokens. For example, workspace tokens don't have access to the `site` scope, therefore they can't be used to access site-specific endpoints. Please refer to the [scopes](/data/reference/scopes) documentation for more information.

<br />

## Using a workspace token

Now that you have your workspace token, you can start making requests to the Webflow Data APIs that require a workspace token.

<Tabs>
  <Tab title="cURL">
    The simplest way to make a request is by using cURL

    **Example**

    ```bash request
    curl --request GET \
      --url https://api.webflow.com/v2/workspaces/:workspace_id_or_slug/audit_logs \
      --header 'accept: application/json' \
      --header 'authorization: Bearer YOUR_API_TOKEN'
    ```

    This command retrieves a list of activity across your workspace. Replace `YOUR_API_TOKEN` with the workspace token you generated.
  </Tab>

  <Tab title="JavaScript">
    If you prefer working with JavaScript, you can use the Webflow JavaScript SDK. The SDK simplifies interacting with the Webflow API and handling requests.

    First, install the Webflow SDK using npm:

    ```shell
    npm install webflow-api
    ```

    **Example**

    ```javascript request
    import { WebflowClient } from 'webflow-api';

    const token = 'YOUR_API_TOKEN';
    const webflow = new WebflowClient({ accessToken: token });

    (async () => {
    try {
       const auditLogs = await webflow.workspaces.auditLogs.getWorkspaceAuditLogs('workspace_id_or_slug', {
          from: "2024-04-22T16:00:31Z",
          to: "2024-04-22T16:00:31Z"
       });
       console.log(auditLogs);
    } catch (error) {
       console.error('Error fetching audit logs:', error);
    }
    })();
    ```

    This command retrieves a list of activity across your workspace. Replace `YOUR_API_TOKEN` with the workspace token you generated.
  </Tab>

  <Tab title="Python">
    To make requests to the Webflow API using Python, you'll need to install the Webflow package and use it to interact with the API.

    First, install the Webflow package using pip:

    ```bash
    pip install webflow
    ```

    **Example**

    ```python request
    from webflow.client import Webflow

    # Initialize the Webflow client with your access token
    client = Webflow(access_token="YOUR_ACCESS_TOKEN")

    # Fetch the list of activity across your workspace
    client.workspaces.audit_logs.get_workspace_audit_logs(
     workspace_id_or_slug="hitchhikers-workspace",
     from_=datetime.datetime.fromisoformat(
         "2024-04-22 16:00:31+00:00",
     ),
     to=datetime.datetime.fromisoformat(
         "2024-04-22 16:00:31+00:00",
     ),
    )

    # Print the audit logs
    print(audit_logs)
    ```

    This command retrieves a list of activity across your workspace. Replace `YOUR_API_TOKEN` with the workspace token you generated.
  </Tab>
</Tabs>

### Example API response

Here's an example of what a response from the Webflow API might look like:

{/* <!-- vale off --> */}

<CodeBlocks>
  ```json Response
    {
    "items": [
        {
        "eventType": "user_access",
        "eventSubType": "login",
        "payload": {
            "method": "dashboard",
            "location": "Ashburn US",
            "ipAddress": "54.165.18.93"
        }
        },
        {
        "eventType": "user_access",
        "eventSubType": "login",
        "payload": {
            "method": "sso"
        }
        },
        {
        "eventType": "user_access",
        "eventSubType": "login",
        "payload": {
            "method": "dashboard"
        }
        }
    ],
    "pagination": {
        "limit": 10,
        "offset": 0,
        "total": 3
    }
    }
  ```
</CodeBlocks>

{/* <!-- vale on --> */}

<br />

### Best practices

* **Mint tokens for each use case**: Instead of reusing tokens, generate a new token for each specific use case to maintain better security and control.
* **Rotate tokens periodically**: Regularly update and revoke old tokens to maintain security.
* **Be Descriptive**: Name your tokens something descriptive and meaningful to easily identify their purpose.
* **Minimal Scopes**: Generate tokens with the minimal scopes needed for your use case. Mint a new one if you need to add new scopes. This limits the potential impact if a token is compromised.

<br />

<br />

## Revoking a workspace token

To revoke a workspace token:

1. In the left sidebar of your Workspace, select **Apps & integrations** > **Manage**. Scroll to the bottom of the page to the **Workspace API access** section.
2. Find your workspace token
3. Click the "Revoke" button

<Frame background="subtle">
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/3071b481425bdd6601d5263a53b358716840d3f4a10f929dd0c80f0360bea4d0/products/data/pages/Data API/rest-introduction/authentication/assets/revoke-token.png" alt="Revoke token" />
</Frame>

Revoking a site token is an additional security measure for your Webflow site. This process disables the token, preventing any further access or use. You should consider revoking a site token in the following situations:

* **Security Concerns:** If there's a potential security issue, revoke the token immediately.
* **Administrator Changes:** If an administrator leaves or their role changes, revoke their token to maintain security.
* **Token Management:** Regularly review and revoke tokens that are no longer needed.

<br />

## Troubleshooting and FAQs

<Accordion title="How long is a workspace token valid?">
  Workspace tokens are valid until they're manually revoked or after 365 days of inactivity.
</Accordion>

<Accordion title="Can I regenerate a workspace token?">
  You can not regenerate an existing token. However you can generate a new token at any time from the API access section in your workspace settings.
</Accordion>

<Accordion title="What happens if I lose my workspace token?">
  You will need to generate a new workspace token and update any integrations using the old token.
</Accordion>

---

# Scopes

## Available scopes

Available scopes are determined by the type of token you're creating. For [Data Client apps](/data/reference/oauth-app) and [site tokens](/data/reference/site-token), refer to the site-level scopes. For [workspace tokens](/data/reference/authentication/workspace-token), refer to the workspace-level scopes.

<Tabs>
  <Tab title="Site-level">
    | Resource           | Scopes                                  | Endpoints                                                                     |
    | :----------------- | :-------------------------------------- | :---------------------------------------------------------------------------- |
    | Assets             | `assets:read`, `assets:write`           | → [API Docs](/data/reference/assets/assets/list)                              |
    | Authorized User    | `authorized_user:read`                  | → [API Docs](/data/reference/token/authorized-by)                             |
    | Authorization info | None required                           | → [API Docs](/data/reference/token/introspect)                                |
    | CMS                | `cms:read`, `cms:write`                 | → [API Docs](/data/reference/cms/collections/list)                            |
    | Comments           | `comments:read`, `comments:write`       | → [API Docs](/data/reference/comments/list-comment-threads)                   |
    | Components         | `components:read`, `components:write`   | → [API Docs](/data/reference/pages-and-components/components/list)            |
    | Custom Code        | `custom_code:read`, `custom_code:write` | → [API Docs](/data/reference/custom-code/custom-code/list)                    |
    | Ecommerce          | `ecommerce:read`, `ecommerce:write`     | → [API Docs](/data/reference/ecommerce/products/list)                         |
    | Forms              | `forms:read`, `forms:write`             | → [API Docs](/data/reference/forms/list)                                      |
    | Pages              | `pages:read`, `pages:write`             | → [API Docs](/data/reference/pages-and-components/pages/list)                 |
    | Sites              | `sites:read`, `sites:write`             | → [API Docs](/data/reference/sites/list)                                      |
    | Site Activity      | `site_activity:read`                    | → [API Docs](/data/reference/enterprise/site-activity/list)                   |
    | Site Configuration | `site_config:read`, `site_config:write` | → [API Docs](/data/reference/enterprise/site-configuration/url-redirects/get) |
    | Users              | `users:read`, `users:write`             | → [API Docs](/data/reference/users/users/list)                                |
    | Webhooks           | Depends on `trigger_type`               | → [API Docs](/data/reference/webhooks/list)                                   |
    | Workspace          | `workspace:read`, `workspace:write`     | → [API Docs](/data/reference/enterprise/workspace-management/create)          |
  </Tab>

  <Tab title="Workspace-level">
    | Resource           | Scopes                    | Endpoints                                                         |
    | :----------------- | :------------------------ | :---------------------------------------------------------------- |
    | Workspace Activity | `workspace_activity:read` | → [API Docs](/data/reference/enterprise/workspace-audit-logs/get) |
  </Tab>
</Tabs>

<Note title="Quick tip: Finding required scopes">
  Each API endpoint lists its required scopes in the description. When planning your integration, check the endpoints you'll use to determine which scopes to request.
</Note>

## Understanding scopes

Scopes are permissions that control what data your app can access. Think of them like permissions on your phone - an app might request access to your camera, photos, or contacts. In Webflow's API:

* Each scope gives access to specific [resources](/data/reference/structure-1)
* Scopes usually come in pairs: `:read` for viewing data, `:write` for modifying data
* Users will see and approve these permissions when connecting to your app

<Note title="Best practice">
  Only request scopes your app actually needs. Requesting unnecessary scopes can make users hesitant to approve your app.
</Note>

## Adding scopes

When creating a Data Client App or an API token, you'll first register your required scopes:

<Tabs>
  <Tab title="Data Client App">
    During [app registration](/data/docs/register-an-app), select the scopes that match your app's required functionality. These scopes define what data your app can access.

    <Frame caption="Scope Registration">
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/35db7e8252baa175397b1e7569bda4ead5ab50d15ac0be3c42d512d529a72719/assets/images/28e0ad2-Large_GIF_1064x696.gif" alt="Scope Registration" />
    </Frame>

    <Note title="Using scopes in OAuth">
      After registration, you'll use these same scopes in your [Authorization URL](/data/reference/oauth-app#constructing-the-authorization-link) during the OAuth flow. This shows users an authorization page where they can review and approve your requested permissions.

      See our [authorization guide](/data/reference/oauth-app) for step-by-step OAuth implementation.
    </Note>
  </Tab>

  <Tab title="API Token">
    When creating a [site](/data/reference/site-token) or [workspace](/data/reference/authentication/workspace-token) token, select the scopes that match your integration's required functionality. These scopes define what data your token can access.

    <Frame caption="Scope Registration">
      <div>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/4214985a35cb0f9fa2cc64b81aad2086bb4138a0312c47a1cb2cd9f242281969/products/data/pages/Data API/rest-introduction/assets/scopes.png" alt="Scope Registration" />
      </div>
    </Frame>
  </Tab>
</Tabs>

---

# Rate Limits

To ensure consistent performance and fair access to all users, Webflow enforces rate limits on its Data API. These limits vary based on your [site subscription plan](https://www.webflow.com/pricing) and are essential for maintaining the stability of the services.

Your Webflow site plan determines your rate limit:

| Plan                         | Request Per Minute |
| :--------------------------- | :----------------- |
| Starter and Basic            | 60                 |
| CMS, eCommerce, and Business | 120                |
| Enterprise                   | Custom             |

If you exceed your rate limit, Webflow’s API will return an HTTP `429` Too Many Requests error. Along with this response, the `Retry-After` header will tell you how long to wait before attempting new requests—typically, this reset time is 60 seconds.

<Note>
  If your App or integration requires a higher limit, consider [exploring the enterprise options](https://webflow.com/pricing) to request increased access.
</Note>

<br />

### Endpoint-specific limits

While the general rate limits apply to most API requests, some endpoints have additional constraints. For example, [Site Publish](/data/reference/webhooks/events/site-publish) operations are limited to **one successful publish per minute.** Any endpoint-specific rate limits will be identified within the endpoint's documentation.

<br />

## Caching and rate limits

For cached requests to the [content delivery API](/data/docs/working-with-the-cms/content-delivery), there are effectively no rate limits. However, uncached requests to the origin server count against your plan's rate limits. To learn more about serving live CMS content from a CDN, see the [multi-channel content delivery documentation](/data/docs/working-with-the-cms/content-delivery).

## How rate limits apply to Webflow APIs

Rate limits are applied on a per API key basis. This means that each API key is subject to its own rate limit, independent of any other keys you may be using. Whether you’re running multiple applications or integrating various services, each API key’s usage is tracked.

<br />

## Tracking your API usage

To help you monitor and manage your API usage, Webflow provides three key HTTP response headers with every API request:

| HTTP Response Header  | Description                                                               |
| :-------------------- | :------------------------------------------------------------------------ |
| X-RateLimit-Remaining | Contains the number of available requests remaining in the current minute |
| X-RateLimit-Limit     | Contains your current overall rate limit per minute                       |
| Retry-After           | Contains the time to wait before attempting new requests                  |

<br />

### Example Request

To illustrate how these headers work, here's an example using cURL to make a request to the Webflow Data API:

<CodeBlocks>
  ```curl cURL Request
  curl --request GET \
      --url https://api.webflow.com/v2/token/authorized_by \
      --header 'accept: application/json' \
      --header 'authorization: Bearer YOUR_API_TOKEN'
  ```
</CodeBlocks>

<br />

### Example response headers

```
HTTP/1.1 200 OK
Date: Sat, 14 May 2022 09:00:00 GMT
Status: 200 OK
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 59
Retry-After: 60
```

<br />

## Exceeding rate limits

If your application exceeds the rate limit and encounters a `429 Too Many Requests` error, it’s important to handle retries. [The Webflow SDK](https://developers.webflow.com/data/reference/sdks) includes built-in exponential backoff, automatically adjusting the wait time between retries to minimize further errors. If you’re not using the SDK, it's recommended to implement your own retry logic that respects the `Retry-After` header to keep your application running.

<br />

### Example error

```json
{
    "message": "Too Many Requests",
    "code": "too_many_requests",
    "externalReference": null,
    "details": []
}
```

If you are seeing these errors, you should ensure your application is built to limit the rate of requests it's performing. It could, for example, be triggered by polling aggressively when waiting for resources to be created or making a large number of highly concurrent API calls.

<br />

### Optimizing API usage with webhooks

Frequent polling of the API can lead to rate limit issues, especially if your application is waiting for specific changes or updates. To mitigate this, Webflow offers [Webhooks](https://developers.webflow.com/data/docs/working-with-webhooks), which allow your application to receive real-time updates without the need for continuous API calls. [Implementing webhooks](https://developers.webflow.com/data/docs/working-with-webhooks) is a highly effective way to stay within your rate limits while still maintaining responsive applications.

---

# Error handling

The Webflow Data API uses standard HTTP status codes to indicate the success or failure of an API request. In general, codes in the `2xx` range indicate success, codes in the `4xx` range indicate a client-side error (e.g., a problem with the request), and codes in the `5xx` range indicate a server-side error.

## Error response body

When an error occurs, the API will return a JSON object with the following properties:

| Property            | Type     | Description                                 |
| :------------------ | :------- | :------------------------------------------ |
| `code`              | `string` | A machine-readable error code.              |
| `message`           | `string` | A human-readable error message.             |
| `externalReference` | `string` | A link to more information about the error. |
| `details`           | `array`  | An array of additional error details.       |

**Example error response body:**

```json
{
  "message": "Requested resource not found: The site cannot be found",
  "code": "resource_not_found",
  "externalReference": null,
  "details": []
}
```

## Handling rate limit errors

If your application exceeds the rate limit, you will receive a `429 Too Many Requests` error. When this happens, you should check the `Retry-After` header to see how long you should wait before making another request.

The [official Webflow SDKs](/data/reference/sdks) have built-in exponential backoff, which will automatically handle these retries for you. If you are not using one of our SDKs, you should implement your own retry logic.

For more information, see the [rate limits documentation](/data/reference/rate-limits).

## Common error codes

| Status Code | Code                 | Description                                                                                  |
| :---------- | :------------------- | :------------------------------------------------------------------------------------------- |
| `400`       | `bad_request`        | The request was malformed.                                                                   |
| `401`       | `not_authorized`     | The request lacks valid authentication credentials.                                          |
| `403`       | `forbidden`          | The authenticated user does not have permissions to perform the requested action.            |
| `404`       | `resource_not_found` | The requested resource was not found.                                                        |
| `409`       | `conflict`           | The request could not be completed due to a conflict with the current state of the resource. |
| `429`       | `too_many_requests`  | The user has sent too many requests in a given amount of time.                               |
| `500`       | `internal_error`     | An unexpected error occurred on our end.                                                     |

---

# Versioning

API v2 versioning is **explicit** as part of the API endpoint URI.

## Versions

API v2 is composed of two version namespaces:

| Namespace | Description                                          |
| :-------- | :--------------------------------------------------- |
| `/beta/`  | A monolithic version that houses all new APIs.       |
| `/v2/`    | A subset of v2 APIs that are considered "production" |

Auth tokens will be compatible across the v2 beta and v2 production namespaces

## URL

An example of an API request to v2 beta:

<CodeBlocks>
  ```curl cURL
  curl --request GET \
       --url https://api.webflow.com/beta/token/authorized_by \
       --header 'accept: application/json'
  ```
</CodeBlocks>

## Webflow SDK

Currently, the Webflow SDK doesn't support requests to beta endpoints. For access to these endpoints, please refer to the Webflow API documentation and make requests directly through an HTTP client or your preferred API tool.

---

# Migrating to v2

<Warning title="Webflow API v1 is deprecated.">
  For more details about this deprecation, timeline, and its implications, please refer to the [Webflow API v1 deprecation notice](/data/docs/webflow-v1-api-deprecation-notice).
</Warning>

## v2 Apps and APIs

Webflow's new v2 Apps and APIs enhance security, efficiency, and developer experience. With [scopes](/data/reference/scopes) and an expanded [resources](/data/reference/structure-1), both developers and users gain more control and clarity over their Webflow data. Follow the sections below to migrate from v1 Apps, site tokens, webhooks, or APIs.

## Migrating to API v2 for site owners

Did you receive a notification that your site may be using v1 APIs? Read the below section for instructions on how to transition to using v2 APIs by the deprecation date.

<Accordion title="Migrating to v2 site tokens, webhooks, and v2 Apps">
  <Tabs>
    <Tab title="Site Tokens">
      <Note>
        <b>Action Item:</b> Create a new v2 site token.

        <ul>
          <li>
            <b>Site tokens with third-party integrations</b>

             \- Reach out to the external integration provider for guidance on how to use the v2 API Site Token with their Webflow integrations
          </li>

          <li>
            <b>Site tokens for custom integrations</b>

             \- Replace v1 Site Token with the new v2 Site Token and 

            [update v1 API calls](/data/changelog/webflow-api-changed-endpoints)

             to 

            [v2 APIs](/data/reference/token/authorized-by)
          </li>
        </ul>
      </Note>

      ### Third-party integrations

      If you're using v1 site tokens with third-party tools — for example, integrations or chrome extensions that have asked for your API Key — you'll want to replace them with a new [v2 API site token](/data/reference/site-token) to persist any critical workflows you have in place. These new tokens are more secure and can be used to call v2 Webflow APIs.

      To check for v1 API Site Tokens, go to <b>Apps & Integrations -> API access</b> in your site settings. v1 tokens will show a warning about using the legacy API.

      <Frame background="subtle">
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/d15b0e4360ec40076d41196823f0481e70c74071657402b3a8f8e2100669df61/products/data/pages/Resources/migrating-to-v2/v1-site-token-warning.png" alt="v1 Site Token warning" />
      </Frame>

      First, check to see if the token is still needed by seeing if the "Last used" date is recent. If it is, you'll want to generate a new v2 API token. To persist existing, active workflows, [generate a new v2 API token](https://help.webflow.com/hc/en-us/articles/33961356296723-Intro-to-Webflow-s-APIs) and update your integration to use the new token.

      When generating a new API token, you'll have the option to select the needed [permissions](/data/reference/scopes) for the token. If you're not sure which permissions to set, reach out to the integration provider for guidance.

      ### Third-party tools that don't support v2 site tokens

      If your third-party tool doesn't accept v2 site tokens, contact their support team for guidance. You can also email [developers@webflow.com](mailto:developers@webflow.com) to let us know which tool you're using so we can help ensure they add v2 support.

      ## Custom integrations

      If your team built and/or owns a custom integration that uses a v1 site token, in addition to switching to use a v2 API site token, you'll need to update the requests your integration is making from v1 APIs to v2 APIs.

      You can find more information about the changes from v1 to v2 in the [changelog](/data/changelog/webflow-api-changed-endpoints), and explore the new [v2 API structure and resources in the v2 API reference docs](/data/reference/structure-1).

      For more details on site tokens and how to use them for calling Webflow APIs, see the [site token guide](/data/reference/site-token).
    </Tab>

    <Tab title="Webhooks">
      <Note>
        <b>
          Action Item:
        </b>

        * **Create a new API V2 webhook** in the **Apps & Integrations -> Webhooks** section of your site settings
        * **Delete the old v1 Webhook** once you've confirmed your workflows still persist as expected
      </Note>

      If you're using v1 webhooks to recieve notifications about your site, you'll need to create new v2 webhooks to persist existing data workflows.

      To check for v1 webhooks, navigate to the <b>Apps & Integrations -> Webhooks</b> section of your site's settings to see a list of webhooks. Each webhook will show the event type, as well as the API version of the webhook.

      <Frame background="subtle">
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/f30472cc8b9c525a8c8f46cf2a6347d7b917c2cba3024808656ed55791ad4e28/products/data/pages/Resources/migrating-to-v2/webhook.png" alt="v1 webhook" />
      </Frame>

      To replace any active v1 webhooks, create an equivalent v2 webhook with the same even type to match functionality. You can do this by clicking the "Add webhook" button to create a v2 Webhook for the relevant event. Once you have equivalent v2 webhooks established alongside your v1 webhooks and tested that automations work with the new webhook, feel free to remove the v1 Webhook.

      ### Webhooks created by third-party Webflow Apps

      If a third-party Webflow App created the v1 webhook (i.e. Zapier),  migrate your workflow by using the newest version of the Webflow App.
    </Tab>

    <Tab title="Apps">
      <Note>
        <b>Action Item:</b> Re-authorize any v1 Apps with their updated v2 App in the [App Marketplace](https://webflow.com/apps).

        One way to note if an App is a v2 App if it lists Permissions on the App Listing (see screenshot below)

        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/c19db51ae33caaaaad73264364427656ed9defd377cecdd9c465e2b1d8577a32/assets/images/migration-to-v2-permissions.png" alt="v2 App Listing with permissions" />
      </Note>

      If you're using Webflow Apps to help manage your Webflow data, make sure you're using the v2 version of the App if it exists.

      To check if you're using the latest version of the App, navigate to the <b>Apps & Integrations -> Connected Apps</b> section of your site and/or workspace settings. There, you'll see a list of all the Apps connected to your site and/or workspace. Each App will have a "View details" button. Clicking this will show you more information about the App, including the permissions it requests.

      <Tabs>
        <Tab title="v1 App indicator">
          v1 authorizations do not list the permissions the App requires on install. See below for an example of a v1 App authorization

          <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/d2585390b410446679722881e656f098dc9d4027254f0b65c053c67b3d558ddd/assets/images/migration-to-v2-v1-app-auth.png" alt="v1 App indicator example" />
        </Tab>

        <Tab title="v2 App indicator">
          In contrast, v2 App authorizations list the permissions the App requires on install. See below for an example of a v2 App authorization

          <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/4512b25d974ed975bfa16b5afb8dd3a15e436047d2ccaa8cb586370c6c4bacb8/assets/images/migration-to-v2-v2-app-auth.png" alt="v2 App indicator example" />
        </Tab>
      </Tabs>

      ### Third-party Apps that don't support v2

      If you cannot find a v2 version of the App in the marketplace, please reach out to that App developer for more support on how to migrate existing workflows to use v2 APIs. Additionally, you can search in the App Marketplace for other v2 Apps that are compatible with your use case.
    </Tab>
  </Tabs>
</Accordion>

## Migrating to API v2 for App developers

Are you a developer using v1 APIs and need guidance on implementing v2 APIs for a new v2 App? Read this section below.

<Accordion title="Building v2 Apps">
  We know migrating APIs can be challenging, but we're excited to help you upgrade to v2. The new version brings powerful capabilities that will let you build even better experiences for your users. Let's walk through how to migrate your existing v1 App:

  <Steps>
    ### Register a new v2 App

    To use the v2 API, you'll need to create a brand new App with a new Client ID and secret. Additionally, you'll need to add permissions to your App to align with the [v2 API scopes](/data/reference/scopes). Please use this [App registraton guide to help create a new v2 App.](/data/docs/register-an-app)

    ### Update your App's OAuth flow

    Update your App's [OAuth flow](/data/reference/oauth-app) to use your new client ID and secret. Additionally, you will need to use the new [v2 API scopes](/data/reference/scopes) in your App's Authorization URI. For a full guide on how to update your App's OAuth flow, see the [OAuth flow guide](/data/reference/oauth-app).

    ### Update your App to use v2 APIs

    Update the logic in your App to make requests to the new [v2 resources and endpoints.](/data/reference/structure-1) Additionally, you can use the updated [JavaScript or Python SDKs](/data/reference/sdks) to make requests to the new v2 APIs.

    ### Submit your v2 App to the Marketplace

    Once you've updated your App to use scopes and v2 endpoints, you can share these updates by [submitting your new App to the Marketplace](https://developers.webflow.com/submit). Before submitting your App, please refer to Webflow's [guidance on Marketplace submissions and listings](/apps/docs/marketplace-guidelines) to make sure your App is compliant with Webflow's guidelines.

    <Note title="Avoiding disruption">
      To avoid disrupting any existing workflows for users on the v1 App version, you'll want to support both v1 and v2 Apps in production until you've migrated all users to the v2 App.
    </Note>

    ### Instruct users to migrate to your v2 App

    Webflow won't automatically migrate or notify users of your new v2 App. Instead, **users must create a new authorization for the v2 App**. It's recommended that you reach out to existing v1 App users with migration instructions on how to safely migrate their existing workflows to your approved, v2 Marketplace App. This could include:

    * Notifications in your v1 App that tell users about the upcoming deprecation and the need to migrate to the v2 App
    * A link to your new v2 App Authorization page and/or a link to your v2 App in the Webflow App Marketplace
    * A migration tool in your v1 App that automatically replaces existing v1 integrations with v2 integrations
    * A blog post or migration guide on how to migrate from v1 to v2
  </Steps>

  ## v2 Apps and API changes

  * **v1 Apps are now named ‘Data Clients’**\
    The v2 equivalent of v1 Apps are named [‘Data Clients’](/data/docs/data-clients). This is a change from the previous naming convention of ‘Apps’. Here's a quick rundown of what that means:
    * Data Clients access site data, spanning from the [CMS](/data/reference/cms/collection-items/staged-items/get-item) to [Ecommerce](/data/reference/ecommerce/settings/get-settings), as well as new resources like [assets](/data/reference/assets/assets/list), [pages](/data/reference/pages/list), and [custom code](/data/reference/custom-code). For an overview of the v2 API resources, see the [v2 API reference docs](/data/reference/structure-1).
    * Data Clients leverage Webflow's REST APIs to fetch this information.
    * For use cases that require real-time updates, Data Clients can send event notifications through [webhooks.](/data/reference/webhooks/list)

  * **Data API changes**\
    The v2 API includes significant changes to Webflow's REST APIs, including updates, additions, and removals to key endpoints. For a thorough overview of what's changed, visit the changelog of:
    * [Changed Endpoints](/data/changelog/webflow-api-changed-endpoints)
    * [New Endpoints](/data/changelog/webflow-api-new-endpoints)
    * [Removed Endpoints](/data/changelog/webflow-api-removed-endpoints)
    To explore the current v2 API offerings, check out the [reference docs](https://developers.webflow.com/data/reference/token/authorized-by).

  * **Introduction of scopes**\
    The new version of the API incorporates [scopes](/data/reference/scopes) into the authorization process. Scopes specify an App's permissions, ensuring that users have clearer control over the data an App can access and act upon. It's a step towards more transparency and security. For a granular approach to permissions, make sure you're aligned with [Webflow's guidance on scopes.](/data/reference/scopes)

  * **Updates to the JavaScript SDK**\
    We're currently revamping the JavaScript SDK to provide robust support for the v2 APIs. In the meantime, if you're using the [JavaScript SDK](https://github.com/webflow/js-webflow-api), please:

    * Update to the most recent SDK version.
    * Use TypeScript/Intellisense in your code editor to guide API usage after instantiating a client. You may also find SDK snippets in the API reference docs examples. Here's a brief example on usage:

    <CodeBlocks>
      ```javascript JavaScript
         import { WebflowClient } from "webflow-api";

         const webflow = new WebflowClient({ accessToken });

         // Env. variables
         // in format of string, e.g.: "639656400769508adc12fe42"
         const siteId = process.env.SITE_ID;
         const customDomainId1 = process.env.CUSTOM_DOMAIN_ID_1;
         const customDomainId2 = process.env.CUSTOM_DOMAIN_ID_2;

         // Sites

         // List Sites
         const sites = await webflow.sites.list();

         // Get Site
         const site = await webflow.sites.get(siteId);

         // Get Custom Domains
         const customDomains = await webflow.sites.getCustomDomain(siteId);

         // Publish Site
         const site = await webflow.sites.publish(siteId, {
            customDomains: [customDomainId1, customDomainId2],
            publishToWebflowSubdomain: true,
         });
      ```
    </CodeBlocks>
</Accordion>

---

# Webflow v1 API Deprecation Notice

As part of Webflow's ongoing commitment to enhancing your developer experience, we're transitioning from the v1 APIs to the more advanced v2 APIs. This document outlines the deprecation timeline for v1 Apps, APIs, and Webhooks, and provides guidance on managing a smooth transition to v2. We recommend starting your migration as soon as possible to ensure uninterrupted service for your integrations.

## Key changes

1. **API Site Tokens:**
   * **Webflow has discontinued creation of v1 API Site Tokens.**<br />
     For new integrations or updates, developers should use v2 API Site Tokens.

     <Note>
       API Tokens are distinct from [auth tokens](/data/reference/oauth-app) generated via Webflow Apps.
     </Note>

   * See the [v2 migration guide](/data/docs/migrating-to-v2#migrating-to-v2-site-tokens-webhooks-and-v2-apps) for more on migrating to v2 API Site Tokens

2. **Webhooks:**
   * **Webflow will no longer support manual creation of v1 Webhooks.**<br />
     To continue receiving real-time notifications via webhooks, [register v2 webhooks](/data/docs/working-with-webhooks).
   * See the [v2 migration guide](/data/docs/migrating-to-v2#migrating-to-v2-site-tokens-webhooks-and-v2-apps) for more on migrating to v2 Webhooks

3. **App Registrations:**
   * **Webflow no longer accepts App submissions for new v1 Apps.**<br />
     To create new applications or update your existing v1 Apps to v2, use the [v2 App registration process](/data/docs/migrating-to-v2#building-v2-apps).
   * **Integrations/automations created by v1 Apps will stop receiving maintenance and support after <span>March 31, 2025</span>.**<br />
     See the [v2 migration guide](/data/docs/migrating-to-v2#migrating-to-v2-site-tokens-webhooks-and-v2-apps) for more on migrating to v2 Apps

## Important dates

* **<span>August 1, 2024</span>**: De-listing of Marketplace Apps that are still reliant on v1 (non-scoped) authorization.
* **<span>March 31, 2025</span>**: Deprecation date for the v1 API. While the v1 API may continue to function after this date, it will no longer receive maintenance, updates, or support. We recommend completing your migration to v2 before this date to ensure uninterrupted service.

Transitioning to the v2 API ensures that developers have access to the latest features, enhanced security, and improved performance. We understand the challenges that come with such transitions, and are committed to supporting the Webflow developer community every step of the way.

For any queries or support migrating to v2 APIs, Apps, and Webhooks, reach out to [developers@webflow.com](mailto:developers@webflow.com). For other support matters, please reach out to Webflow's [support team](https://support.webflow.com/).

---

# SDKs

Our SDKs provide comprehensive tools and libraries tailored for efficient and easy integration with our suite of APIs, enabling developers to quickly build and scale applications across various platforms.

<div class="card-grid">
    

  <div class="card">    <div class="card-header">      <svg xmlns="http://www.w3.org/2000/svg" aria-label="JavaScript" role="img" viewBox="0 0 512 512" width="64px" height="64px">        <rect width="512" height="512" rx="15%" fill="#f7df1e" />        <path d="M324 370c10 17 24 29 47 29c20 0 33-10 33 -24c0-16 -13 -22 -35 -32l-12-5c-35-15 -58 -33 -58 -72c0-36 27 -64 70 -64c31 0 53 11 68 39l-37 24c-8-15 -17 -21 -31 -21c-14 0-23 9 -23 21c0 14 9 20 30 29l12 5c41 18 64 35 64 76c0 43-34 67 -80 67c-45 0-74 -21 -88 -49zm-170 4c8 13 14 25 31 25c16 0 26-6 26 -30V203h48v164c0 50-29 72 -72 72c-39 0-61 -20 -72 -44z" />      </svg>      <h3>JavaScript</h3>    </div>    <div class="card-body">      <p>Leverage the Webflow JavaScript SDK for intuitive integration within Node.js environments.</p><br />      <a href="https://www.npmjs.com/package/webflow-api"><button class="button cc-secondary">View          SDK</button></a>    </div>  </div>

    

  <div class="card">    <div class="card-header">      <svg width="70px" height="70px" viewBox="0 0 70 70" aria-label="Python" fill="none" xmlns="http://www.w3.org/2000/svg">        <path d="M31.885 16c-8.124 0-7.617 3.523-7.617 3.523l.01 3.65h7.752v1.095H21.197S16 23.678 16 31.876c0 8.196 4.537 7.906 4.537 7.906h2.708v-3.804s-.146-4.537 4.465-4.537h7.688s4.32.07 4.32-4.175v-7.019S40.374 16 31.885 16zm-4.275 2.454c.771 0 1.395.624 1.395 1.395s-.624 1.395-1.395 1.395a1.393 1.393 0 0 1-1.395-1.395c0-.771.624-1.395 1.395-1.395z" fill="url(#a)" />        <path d="M32.115 47.833c8.124 0 7.617-3.523 7.617-3.523l-.01-3.65H31.97v-1.095h10.832S48 40.155 48 31.958c0-8.197-4.537-7.906-4.537-7.906h-2.708v3.803s.146 4.537-4.465 4.537h-7.688s-4.32-.07-4.32 4.175v7.019s-.656 4.247 7.833 4.247zm4.275-2.454a1.393 1.393 0 0 1-1.395-1.395c0-.77.624-1.394 1.395-1.394s1.395.623 1.395 1.394c0 .772-.624 1.395-1.395 1.395z" fill="url(#b)" />        <defs>          <linearGradient id="a" x1="19.075" y1="18.782" x2="34.898" y2="34.658" gradientUnits="userSpaceOnUse">            <stop stop-color="#387EB8" />            <stop offset="1" stop-color="#366994" />          </linearGradient>          <linearGradient id="b" x1="28.809" y1="28.882" x2="45.803" y2="45.163" gradientUnits="userSpaceOnUse">            <stop stop-color="#FFE052" />            <stop offset="1" stop-color="#FFC331" />          </linearGradient>        </defs>      </svg>      <h3>Python</h3>    </div>    <div class="card-body">      <p>Use the Webflow Python SDK to seamlessly incorporate Webflow functionalities into your Python projects.</p>      <br />      <a href="https://pypi.org/project/webflow/"><button class="button cc-secondary">View          SDK</button></a>    </div>  </div>
</div>

<br />

---

# Get Authorization User Info

GET https://api.webflow.com/v2/token/authorized_by

Information about the Authorized User

Required Scope | `authorized_user:read`


Reference: https://developers.webflow.com/data/reference/token/authorized-by

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Authorization User Info
  version: endpoint_token.authorized-by
paths:
  /token/authorized_by:
    get:
      operationId: authorized-by
      summary: Get Authorization User Info
      description: |
        Information about the Authorized User

        Required Scope | `authorized_user:read`
      tags:
        - - subpackage_token
      parameters:
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/token_authorized-by_Response_200'
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
components:
  schemas:
    token_authorized-by_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: The unique ID of the user
        email:
          type: string
          format: email
          description: The user's email address
        firstName:
          type: string
          description: The user's first name
        lastName:
          type: string
          description: The user's last name

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.token.authorized_by()

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.token.authorizedBy();

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/token/authorized_by"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/token/authorized_by")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/token/authorized_by")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/token/authorized_by', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/token/authorized_by");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/token/authorized_by")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Authorization Info

GET https://api.webflow.com/v2/token/introspect

Information about the authorization token

<Note>Access to this endpoint requires a bearer token from a [Data Client App](/data/docs/getting-started-data-clients).</Note>


Reference: https://developers.webflow.com/data/reference/token/introspect

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Authorization Info
  version: endpoint_token.introspect
paths:
  /token/introspect:
    get:
      operationId: introspect
      summary: Get Authorization Info
      description: >
        Information about the authorization token


        <Note>Access to this endpoint requires a bearer token from a [Data
        Client App](/data/docs/getting-started-data-clients).</Note>
      tags:
        - - subpackage_token
      parameters:
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/token_introspect_Response_200'
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
components:
  schemas:
    TokenIntrospectGetResponsesContentApplicationJsonSchemaAuthorizationAuthorizedTo:
      type: object
      properties:
        siteIds:
          type: array
          items:
            description: Any type
          description: Array of Sites this app is authorized to
        workspaceIds:
          type: array
          items:
            description: Any type
          description: Array of Workspaces this app is authorized to
        userIds:
          type: array
          items:
            description: Any type
          description: Array of Users this app is authorized to
    TokenIntrospectGetResponsesContentApplicationJsonSchemaAuthorization:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: The unique ID of the Authorization instance
        createdOn:
          type: string
          format: date-time
          description: The date the Authorization was created
        lastUsed:
          type: string
          format: date-time
          description: The date the Authorization was last used
        grantType:
          type: string
          description: The grant type of the Authorization
        rateLimit:
          type: integer
          description: The default rate limit for the Authorization (requests/min)
        scope:
          type: string
          description: >-
            Comma separted list of OAuth scopes corresponding to the
            Authorization
        authorizedTo:
          $ref: >-
            #/components/schemas/TokenIntrospectGetResponsesContentApplicationJsonSchemaAuthorizationAuthorizedTo
    TokenIntrospectGetResponsesContentApplicationJsonSchemaApplication:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Application
        description:
          type: string
          description: Application description provided by the developer
        homepage:
          type: string
          format: uri
          description: Application homepage URL provided by the developer
        displayName:
          type: string
          description: Application name provided by the developer
    token_introspect_Response_200:
      type: object
      properties:
        authorization:
          $ref: >-
            #/components/schemas/TokenIntrospectGetResponsesContentApplicationJsonSchemaAuthorization
          description: The Authorization object
        application:
          $ref: >-
            #/components/schemas/TokenIntrospectGetResponsesContentApplicationJsonSchemaApplication

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.token.introspect()

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.token.introspect();

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/token/introspect"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/token/introspect")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/token/introspect")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/token/introspect', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/token/introspect");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/token/introspect")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Sites

GET https://api.webflow.com/v2/sites

List of all sites the provided access token is able to access.

Required scope | `sites:read`


Reference: https://developers.webflow.com/data/reference/sites/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Sites
  version: endpoint_sites.list
paths:
  /sites:
    get:
      operationId: list
      summary: List Sites
      description: |
        List of all sites the provided access token is able to access.

        Required scope | `sites:read`
      tags:
        - - subpackage_sites
      parameters:
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_list_Response_200'
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
components:
  schemas:
    SitesGetResponsesContentApplicationJsonSchemaSitesItemsCustomDomainsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Domain
        url:
          type: string
          description: The registered Domain name
        lastPublished:
          type:
            - string
            - 'null'
          format: date-time
          description: The date the custom domain was last published to
      required:
        - id
    SitesGetResponsesContentApplicationJsonSchemaSitesItemsLocalesPrimary:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the locale.
        cmsLocaleId:
          type: string
          description: A CMS-specific identifier for the locale.
        enabled:
          type: boolean
          description: Indicates if the locale is enabled.
        displayName:
          type: string
          description: The display name of the locale, typically in English.
        displayImageId:
          type:
            - string
            - 'null'
          description: An optional ID for an image associated with the locale, nullable.
        redirect:
          type: boolean
          description: Determines if requests should redirect to the locale's subdirectory.
        subdirectory:
          type: string
          description: The subdirectory path for the locale, used in URLs.
        tag:
          type: string
          description: >-
            A tag or code representing the locale, often following a standard
            format like 'en-US'.
    SitesGetResponsesContentApplicationJsonSchemaSitesItemsLocalesSecondaryItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the locale.
        cmsLocaleId:
          type: string
          description: A CMS-specific identifier for the locale.
        enabled:
          type: boolean
          description: Indicates if the locale is enabled.
        displayName:
          type: string
          description: The display name of the locale, typically in English.
        displayImageId:
          type:
            - string
            - 'null'
          description: An optional ID for an image associated with the locale, nullable.
        redirect:
          type: boolean
          description: Determines if requests should redirect to the locale's subdirectory.
        subdirectory:
          type: string
          description: The subdirectory path for the locale, used in URLs.
        tag:
          type: string
          description: >-
            A tag or code representing the locale, often following a standard
            format like 'en-US'.
    SitesGetResponsesContentApplicationJsonSchemaSitesItemsLocales:
      type: object
      properties:
        primary:
          $ref: >-
            #/components/schemas/SitesGetResponsesContentApplicationJsonSchemaSitesItemsLocalesPrimary
          description: The primary locale for the site or application.
        secondary:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesGetResponsesContentApplicationJsonSchemaSitesItemsLocalesSecondaryItems
          description: A list of secondary locales available for the site or application.
    SitesGetResponsesContentApplicationJsonSchemaSitesItemsDataCollectionType:
      type: string
      enum:
        - value: always
        - value: optOut
        - value: disabled
    SitesGetResponsesContentApplicationJsonSchemaSitesItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Site
        workspaceId:
          type: string
          format: objectid
          description: Unique identifier for the Workspace
        createdOn:
          type: string
          format: date-time
          description: Date the Site was created
        displayName:
          type: string
          description: Name given to Site
        shortName:
          type: string
          description: Slugified version of name
        lastPublished:
          type: string
          format: date-time
          description: Date the Site was last published
        lastUpdated:
          type: string
          format: date-time
          description: Date the Site was last updated
        previewUrl:
          type: string
          format: uri
          description: URL of a generated image for the given Site
        timeZone:
          type: string
          description: Site timezone set under Site Settings
        parentFolderId:
          type:
            - string
            - 'null'
          format: objectid
          description: The ID of the parent folder the Site exists in
        customDomains:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesGetResponsesContentApplicationJsonSchemaSitesItemsCustomDomainsItems
        locales:
          $ref: >-
            #/components/schemas/SitesGetResponsesContentApplicationJsonSchemaSitesItemsLocales
        dataCollectionEnabled:
          type: boolean
          description: Indicates if data collection is enabled for the site.
        dataCollectionType:
          $ref: >-
            #/components/schemas/SitesGetResponsesContentApplicationJsonSchemaSitesItemsDataCollectionType
          description: The type of data collection enabled for the site.
      required:
        - id
    sites_list_Response_200:
      type: object
      properties:
        sites:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesGetResponsesContentApplicationJsonSchemaSitesItems

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.list()

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.list();

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Site

GET https://api.webflow.com/v2/sites/{site_id}

Get details of a site.

Required scope | `sites:read`


Reference: https://developers.webflow.com/data/reference/sites/get

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Site
  version: endpoint_sites.get
paths:
  /sites/{site_id}:
    get:
      operationId: get
      summary: Get Site
      description: |
        Get details of a site.

        Required scope | `sites:read`
      tags:
        - - subpackage_sites
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_get_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdGetResponsesContentApplicationJsonSchemaCustomDomainsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Domain
        url:
          type: string
          description: The registered Domain name
        lastPublished:
          type:
            - string
            - 'null'
          format: date-time
          description: The date the custom domain was last published to
      required:
        - id
    SitesSiteIdGetResponsesContentApplicationJsonSchemaLocalesPrimary:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the locale.
        cmsLocaleId:
          type: string
          description: A CMS-specific identifier for the locale.
        enabled:
          type: boolean
          description: Indicates if the locale is enabled.
        displayName:
          type: string
          description: The display name of the locale, typically in English.
        displayImageId:
          type:
            - string
            - 'null'
          description: An optional ID for an image associated with the locale, nullable.
        redirect:
          type: boolean
          description: Determines if requests should redirect to the locale's subdirectory.
        subdirectory:
          type: string
          description: The subdirectory path for the locale, used in URLs.
        tag:
          type: string
          description: >-
            A tag or code representing the locale, often following a standard
            format like 'en-US'.
    SitesSiteIdGetResponsesContentApplicationJsonSchemaLocalesSecondaryItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the locale.
        cmsLocaleId:
          type: string
          description: A CMS-specific identifier for the locale.
        enabled:
          type: boolean
          description: Indicates if the locale is enabled.
        displayName:
          type: string
          description: The display name of the locale, typically in English.
        displayImageId:
          type:
            - string
            - 'null'
          description: An optional ID for an image associated with the locale, nullable.
        redirect:
          type: boolean
          description: Determines if requests should redirect to the locale's subdirectory.
        subdirectory:
          type: string
          description: The subdirectory path for the locale, used in URLs.
        tag:
          type: string
          description: >-
            A tag or code representing the locale, often following a standard
            format like 'en-US'.
    SitesSiteIdGetResponsesContentApplicationJsonSchemaLocales:
      type: object
      properties:
        primary:
          $ref: >-
            #/components/schemas/SitesSiteIdGetResponsesContentApplicationJsonSchemaLocalesPrimary
          description: The primary locale for the site or application.
        secondary:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdGetResponsesContentApplicationJsonSchemaLocalesSecondaryItems
          description: A list of secondary locales available for the site or application.
    SitesSiteIdGetResponsesContentApplicationJsonSchemaDataCollectionType:
      type: string
      enum:
        - value: always
        - value: optOut
        - value: disabled
    sites_get_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Site
        workspaceId:
          type: string
          format: objectid
          description: Unique identifier for the Workspace
        createdOn:
          type: string
          format: date-time
          description: Date the Site was created
        displayName:
          type: string
          description: Name given to Site
        shortName:
          type: string
          description: Slugified version of name
        lastPublished:
          type: string
          format: date-time
          description: Date the Site was last published
        lastUpdated:
          type: string
          format: date-time
          description: Date the Site was last updated
        previewUrl:
          type: string
          format: uri
          description: URL of a generated image for the given Site
        timeZone:
          type: string
          description: Site timezone set under Site Settings
        parentFolderId:
          type:
            - string
            - 'null'
          format: objectid
          description: The ID of the parent folder the Site exists in
        customDomains:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdGetResponsesContentApplicationJsonSchemaCustomDomainsItems
        locales:
          $ref: >-
            #/components/schemas/SitesSiteIdGetResponsesContentApplicationJsonSchemaLocales
        dataCollectionEnabled:
          type: boolean
          description: Indicates if data collection is enabled for the site.
        dataCollectionType:
          $ref: >-
            #/components/schemas/SitesSiteIdGetResponsesContentApplicationJsonSchemaDataCollectionType
          description: The type of data collection enabled for the site.
      required:
        - id

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.get(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.get("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Custom Domains

GET https://api.webflow.com/v2/sites/{site_id}/custom_domains

Get a list of all custom domains related to site.

Required scope | `sites:read`


Reference: https://developers.webflow.com/data/reference/sites/get-custom-domain

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Custom Domains
  version: endpoint_sites.get-custom-domain
paths:
  /sites/{site_id}/custom_domains:
    get:
      operationId: get-custom-domain
      summary: Get Custom Domains
      description: |
        Get a list of all custom domains related to site.

        Required scope | `sites:read`
      tags:
        - - subpackage_sites
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_get-custom-domain_Response_200'
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdCustomDomainsGetResponsesContentApplicationJsonSchemaCustomDomainsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Domain
        url:
          type: string
          description: The registered Domain name
        lastPublished:
          type:
            - string
            - 'null'
          format: date-time
          description: The date the custom domain was last published to
      required:
        - id
    sites_get-custom-domain_Response_200:
      type: object
      properties:
        customDomains:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCustomDomainsGetResponsesContentApplicationJsonSchemaCustomDomainsItems

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.get_custom_domain(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.getCustomDomain("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_domains"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_domains")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_domains")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_domains', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_domains");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_domains")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Publish Site

POST https://api.webflow.com/v2/sites/{site_id}/publish
Content-Type: application/json

Publishes a site to one or more more domains. 

To publish to a specific custom domain, use the domain IDs from the [Get Custom Domains](/data/reference/sites/get-custom-domain) endpoint.

<Note title="Rate limit: 1 publish per minute">This endpoint has a specific rate limit of one successful publish queue per minute.</Note>

Required scope | `sites:write`


Reference: https://developers.webflow.com/data/reference/sites/publish

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Publish Site
  version: endpoint_sites.publish
paths:
  /sites/{site_id}/publish:
    post:
      operationId: publish
      summary: Publish Site
      description: >
        Publishes a site to one or more more domains. 


        To publish to a specific custom domain, use the domain IDs from the [Get
        Custom Domains](/data/reference/sites/get-custom-domain) endpoint.


        <Note title="Rate limit: 1 publish per minute">This endpoint has a
        specific rate limit of one successful publish queue per minute.</Note>


        Required scope | `sites:write`
      tags:
        - - subpackage_sites
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '202':
          description: Request accepted
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_publish_Response_202'
        '400':
          description: Bad Request
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                customDomains:
                  type: array
                  items:
                    type: string
                  description: Array of Custom Domain IDs to publish
                publishToWebflowSubdomain:
                  type: boolean
                  default: false
                  description: >-
                    Choice of whether to publish to the default Webflow
                    Subdomain
components:
  schemas:
    SitesSiteIdPublishPostResponsesContentApplicationJsonSchemaCustomDomainsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Domain
        url:
          type: string
          description: The registered Domain name
        lastPublished:
          type:
            - string
            - 'null'
          format: date-time
          description: The date the custom domain was last published to
      required:
        - id
    sites_publish_Response_202:
      type: object
      properties:
        customDomains:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdPublishPostResponsesContentApplicationJsonSchemaCustomDomainsItems
          description: Array of domains objects
        publishToWebflowSubdomain:
          type: boolean
          default: false
          description: Flag for publishing to webflow.io subdomain

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.publish(
    site_id="580e63e98c9a982ac9b8b741",
    custom_domains=["660c6449dd97ebc7346ac629", "660c6449dd97ebc7346ac62f"],
    publish_to_webflow_subdomain=False,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.publish("580e63e98c9a982ac9b8b741", {
    customDomains: ["660c6449dd97ebc7346ac629", "660c6449dd97ebc7346ac62f"],
    publishToWebflowSubdomain: false
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/publish"

	payload := strings.NewReader("{\n  \"customDomains\": [\n    \"660c6449dd97ebc7346ac629\",\n    \"660c6449dd97ebc7346ac62f\"\n  ],\n  \"publishToWebflowSubdomain\": false\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/publish")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"customDomains\": [\n    \"660c6449dd97ebc7346ac629\",\n    \"660c6449dd97ebc7346ac62f\"\n  ],\n  \"publishToWebflowSubdomain\": false\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/publish")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"customDomains\": [\n    \"660c6449dd97ebc7346ac629\",\n    \"660c6449dd97ebc7346ac62f\"\n  ],\n  \"publishToWebflowSubdomain\": false\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/publish', [
  'body' => '{
  "customDomains": [
    "660c6449dd97ebc7346ac629",
    "660c6449dd97ebc7346ac62f"
  ],
  "publishToWebflowSubdomain": false
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/publish");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"customDomains\": [\n    \"660c6449dd97ebc7346ac629\",\n    \"660c6449dd97ebc7346ac62f\"\n  ],\n  \"publishToWebflowSubdomain\": false\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "customDomains": ["660c6449dd97ebc7346ac629", "660c6449dd97ebc7346ac62f"],
  "publishToWebflowSubdomain": false
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/publish")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Pages

GET https://api.webflow.com/v2/sites/{site_id}/pages

List of all pages for a site.

Required scope | `pages:read`


Reference: https://developers.webflow.com/data/reference/pages-and-components/pages/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Pages
  version: endpoint_pages.list
paths:
  /sites/{site_id}/pages:
    get:
      operationId: list
      summary: List Pages
      description: |
        List of all pages for a site.

        Required scope | `pages:read`
      tags:
        - - subpackage_pages
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Lear more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/pages_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdPagesGetResponsesContentApplicationJsonSchemaPagesItemsSeo:
      type: object
      properties:
        title:
          type: string
          description: The Page title shown in search engine results
        description:
          type: string
          description: The Page description shown in search engine results
    SitesSiteIdPagesGetResponsesContentApplicationJsonSchemaPagesItemsOpenGraph:
      type: object
      properties:
        title:
          type: string
          description: The title supplied to Open Graph annotations
        titleCopied:
          type: boolean
          default: true
          description: Indicates the Open Graph title was copied from the SEO title
        description:
          type: string
          description: The description supplied to Open Graph annotations
        descriptionCopied:
          type: boolean
          default: true
          description: >-
            Indicates the Open Graph description was copied from the SEO
            description
    SitesSiteIdPagesGetResponsesContentApplicationJsonSchemaPagesItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Page
        siteId:
          type: string
          format: objectid
          description: Unique identifier for the Site
        title:
          type: string
          description: Title of the Page
        slug:
          type: string
          description: slug of the Page (derived from title)
        parentId:
          type: string
          format: objectid
          description: Identifier of the parent folder
        collectionId:
          type: string
          format: objectid
          description: >-
            Unique identifier for a linked Collection, value will be null if the
            Page is not part of a Collection.
        createdOn:
          type: string
          format: date-time
          description: The date the Page was created
        lastUpdated:
          type: string
          format: date-time
          description: The date the Page was most recently updated
        archived:
          type: boolean
          default: false
          description: Whether the Page has been archived
        draft:
          type: boolean
          default: false
          description: Whether the Page is a draft
        canBranch:
          type: boolean
          default: false
          description: >-
            Indicates whether the Page supports [Page
            Branching](https://university.webflow.com/lesson/page-branching).
            Pages that are already branches cannot be branched again.
        isBranch:
          type: boolean
          default: false
          description: >-
            Indicates whether the Page is a Branch of another Page [Page
            Branching](https://university.webflow.com/lesson/page-branching)
        branchId:
          type:
            - string
            - 'null'
          format: objectid
          description: >-
            If the Page is a Branch of another Page, this is the ID of the
            Branch
        seo:
          $ref: >-
            #/components/schemas/SitesSiteIdPagesGetResponsesContentApplicationJsonSchemaPagesItemsSeo
          description: SEO-related fields for the Page
        openGraph:
          $ref: >-
            #/components/schemas/SitesSiteIdPagesGetResponsesContentApplicationJsonSchemaPagesItemsOpenGraph
          description: Open Graph fields for the Page
        localeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Unique ID of the page locale
        publishedPath:
          type: string
          description: Relative path of the published page URL
      required:
        - id
    SitesSiteIdPagesGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    pages_list_Response_200:
      type: object
      properties:
        pages:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdPagesGetResponsesContentApplicationJsonSchemaPagesItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdPagesGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.pages.list(
    site_id="580e63e98c9a982ac9b8b741",
    locale_id="65427cf400e02b306eaa04a0",
    limit=1,
    offset=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.pages.list("580e63e98c9a982ac9b8b741", {
    localeId: "65427cf400e02b306eaa04a0",
    limit: 1,
    offset: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/pages?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/pages?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/pages?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/pages?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/pages?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/pages?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Page Metadata

GET https://api.webflow.com/v2/pages/{page_id}

Get metadata information for a single page.

Required scope | `pages:read`


Reference: https://developers.webflow.com/data/reference/pages-and-components/pages/get-metadata

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Page Metadata
  version: endpoint_pages.get-metadata
paths:
  /pages/{page_id}:
    get:
      operationId: get-metadata
      summary: Get Page Metadata
      description: |
        Get metadata information for a single page.

        Required scope | `pages:read`
      tags:
        - - subpackage_pages
      parameters:
        - name: page_id
          in: path
          description: Unique identifier for a Page
          required: true
          schema:
            type: string
            format: objectid
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Lear more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/pages_get-metadata_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    PagesPageIdGetResponsesContentApplicationJsonSchemaSeo:
      type: object
      properties:
        title:
          type: string
          description: The Page title shown in search engine results
        description:
          type: string
          description: The Page description shown in search engine results
    PagesPageIdGetResponsesContentApplicationJsonSchemaOpenGraph:
      type: object
      properties:
        title:
          type: string
          description: The title supplied to Open Graph annotations
        titleCopied:
          type: boolean
          default: true
          description: Indicates the Open Graph title was copied from the SEO title
        description:
          type: string
          description: The description supplied to Open Graph annotations
        descriptionCopied:
          type: boolean
          default: true
          description: >-
            Indicates the Open Graph description was copied from the SEO
            description
    pages_get-metadata_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Page
        siteId:
          type: string
          format: objectid
          description: Unique identifier for the Site
        title:
          type: string
          description: Title of the Page
        slug:
          type: string
          description: slug of the Page (derived from title)
        parentId:
          type: string
          format: objectid
          description: Identifier of the parent folder
        collectionId:
          type: string
          format: objectid
          description: >-
            Unique identifier for a linked Collection, value will be null if the
            Page is not part of a Collection.
        createdOn:
          type: string
          format: date-time
          description: The date the Page was created
        lastUpdated:
          type: string
          format: date-time
          description: The date the Page was most recently updated
        archived:
          type: boolean
          default: false
          description: Whether the Page has been archived
        draft:
          type: boolean
          default: false
          description: Whether the Page is a draft
        canBranch:
          type: boolean
          default: false
          description: >-
            Indicates whether the Page supports [Page
            Branching](https://university.webflow.com/lesson/page-branching).
            Pages that are already branches cannot be branched again.
        isBranch:
          type: boolean
          default: false
          description: >-
            Indicates whether the Page is a Branch of another Page [Page
            Branching](https://university.webflow.com/lesson/page-branching)
        branchId:
          type:
            - string
            - 'null'
          format: objectid
          description: >-
            If the Page is a Branch of another Page, this is the ID of the
            Branch
        seo:
          $ref: >-
            #/components/schemas/PagesPageIdGetResponsesContentApplicationJsonSchemaSeo
          description: SEO-related fields for the Page
        openGraph:
          $ref: >-
            #/components/schemas/PagesPageIdGetResponsesContentApplicationJsonSchemaOpenGraph
          description: Open Graph fields for the Page
        localeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Unique ID of the page locale
        publishedPath:
          type: string
          description: Relative path of the published page URL
      required:
        - id

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.pages.get_metadata(
    page_id="63c720f9347c2139b248e552",
    locale_id="65427cf400e02b306eaa04a0",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.pages.getMetadata("63c720f9347c2139b248e552", {
    localeId: "65427cf400e02b306eaa04a0"
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Page Metadata

PUT https://api.webflow.com/v2/pages/{page_id}
Content-Type: application/json

Update Page-level metadata, including SEO and Open Graph fields.

Required scope | `pages:write`


Reference: https://developers.webflow.com/data/reference/pages-and-components/pages/update-page-settings

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Page Metadata
  version: endpoint_pages.update-page-settings
paths:
  /pages/{page_id}:
    put:
      operationId: update-page-settings
      summary: Update Page Metadata
      description: |
        Update Page-level metadata, including SEO and Open Graph fields.

        Required scope | `pages:write`
      tags:
        - - subpackage_pages
      parameters:
        - name: page_id
          in: path
          description: Unique identifier for a Page
          required: true
          schema:
            type: string
            format: objectid
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Lear more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Pages_update-page-settings_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                title:
                  type: string
                  description: Title for the page
                slug:
                  type: string
                  description: >
                    Slug for the page. 



                    **Note:** Updating slugs in secondary locales is only
                    supported in <a
                    href="https://webflow.com/localization">Advanced and
                    Enterprise localization add-on plans.</a>
                seo:
                  $ref: >-
                    #/components/schemas/PagesPageIdPutRequestBodyContentApplicationJsonSchemaSeo
                  description: SEO-related fields for the Page
                openGraph:
                  $ref: >-
                    #/components/schemas/PagesPageIdPutRequestBodyContentApplicationJsonSchemaOpenGraph
                  description: Open Graph fields for the Page
components:
  schemas:
    PagesPageIdPutRequestBodyContentApplicationJsonSchemaSeo:
      type: object
      properties:
        title:
          type: string
          description: The Page title shown in search engine results
        description:
          type: string
          description: The Page description shown in search engine results
    PagesPageIdPutRequestBodyContentApplicationJsonSchemaOpenGraph:
      type: object
      properties:
        title:
          type: string
          description: The title supplied to Open Graph annotations
        titleCopied:
          type: boolean
          description: Indicates the Open Graph title was copied from the SEO title
        description:
          type: string
          description: The description supplied to Open Graph annotations
        descriptionCopied:
          type: boolean
          description: >-
            Indicates the Open Graph description was copied from the SEO
            description
    PagesPageIdPutResponsesContentApplicationJsonSchemaSeo:
      type: object
      properties:
        title:
          type: string
          description: The Page title shown in search engine results
        description:
          type: string
          description: The Page description shown in search engine results
    PagesPageIdPutResponsesContentApplicationJsonSchemaOpenGraph:
      type: object
      properties:
        title:
          type: string
          description: The title supplied to Open Graph annotations
        titleCopied:
          type: boolean
          default: true
          description: Indicates the Open Graph title was copied from the SEO title
        description:
          type: string
          description: The description supplied to Open Graph annotations
        descriptionCopied:
          type: boolean
          default: true
          description: >-
            Indicates the Open Graph description was copied from the SEO
            description
    Pages_update-page-settings_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Page
        siteId:
          type: string
          format: objectid
          description: Unique identifier for the Site
        title:
          type: string
          description: Title of the Page
        slug:
          type: string
          description: slug of the Page (derived from title)
        parentId:
          type: string
          format: objectid
          description: Identifier of the parent folder
        collectionId:
          type: string
          format: objectid
          description: >-
            Unique identifier for a linked Collection, value will be null if the
            Page is not part of a Collection.
        createdOn:
          type: string
          format: date-time
          description: The date the Page was created
        lastUpdated:
          type: string
          format: date-time
          description: The date the Page was most recently updated
        archived:
          type: boolean
          default: false
          description: Whether the Page has been archived
        draft:
          type: boolean
          default: false
          description: Whether the Page is a draft
        canBranch:
          type: boolean
          default: false
          description: >-
            Indicates whether the Page supports [Page
            Branching](https://university.webflow.com/lesson/page-branching).
            Pages that are already branches cannot be branched again.
        isBranch:
          type: boolean
          default: false
          description: >-
            Indicates whether the Page is a Branch of another Page [Page
            Branching](https://university.webflow.com/lesson/page-branching)
        branchId:
          type:
            - string
            - 'null'
          format: objectid
          description: >-
            If the Page is a Branch of another Page, this is the ID of the
            Branch
        seo:
          $ref: >-
            #/components/schemas/PagesPageIdPutResponsesContentApplicationJsonSchemaSeo
          description: SEO-related fields for the Page
        openGraph:
          $ref: >-
            #/components/schemas/PagesPageIdPutResponsesContentApplicationJsonSchemaOpenGraph
          description: Open Graph fields for the Page
        localeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Unique ID of the page locale
        publishedPath:
          type: string
          description: Relative path of the published page URL
      required:
        - id

```

## SDK Code Examples

```python
from webflow import Webflow
from webflow.resources.pages import (
    PageMetadataWriteOpenGraph,
    PageMetadataWriteSeo,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.pages.update_page_settings(
    page_id="63c720f9347c2139b248e552",
    locale_id="65427cf400e02b306eaa04a0",
    title="Guide to the Galaxy",
    slug="guide-to-the-galaxy",
    seo=PageMetadataWriteSeo(
        title="The Ultimate Hitchhiker's Guide to the Galaxy",
        description="Everything you need to know about the galaxy, from avoiding Vogon poetry to the importance of towels.",
    ),
    open_graph=PageMetadataWriteOpenGraph(
        title="Explore the Cosmos with The Ultimate Guide",
        title_copied=False,
        description="Dive deep into the mysteries of the universe with your guide to everything galactic.",
        description_copied=False,
    ),
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.pages.updatePageSettings("63c720f9347c2139b248e552", {
    localeId: "65427cf400e02b306eaa04a0",
    title: "Guide to the Galaxy",
    slug: "guide-to-the-galaxy",
    seo: {
        title: "The Ultimate Hitchhiker's Guide to the Galaxy",
        description: "Everything you need to know about the galaxy, from avoiding Vogon poetry to the importance of towels."
    },
    openGraph: {
        title: "Explore the Cosmos with The Ultimate Guide",
        titleCopied: false,
        description: "Dive deep into the mysteries of the universe with your guide to everything galactic.",
        descriptionCopied: false
    }
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0"

	payload := strings.NewReader("{\n  \"title\": \"Guide to the Galaxy\",\n  \"slug\": \"guide-to-the-galaxy\",\n  \"seo\": {\n    \"title\": \"The Ultimate Hitchhiker's Guide to the Galaxy\",\n    \"description\": \"Everything you need to know about the galaxy, from avoiding Vogon poetry to the importance of towels.\"\n  },\n  \"openGraph\": {\n    \"title\": \"Explore the Cosmos with The Ultimate Guide\",\n    \"titleCopied\": false,\n    \"description\": \"Dive deep into the mysteries of the universe with your guide to everything galactic.\",\n    \"descriptionCopied\": false\n  }\n}")

	req, _ := http.NewRequest("PUT", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Put.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"title\": \"Guide to the Galaxy\",\n  \"slug\": \"guide-to-the-galaxy\",\n  \"seo\": {\n    \"title\": \"The Ultimate Hitchhiker's Guide to the Galaxy\",\n    \"description\": \"Everything you need to know about the galaxy, from avoiding Vogon poetry to the importance of towels.\"\n  },\n  \"openGraph\": {\n    \"title\": \"Explore the Cosmos with The Ultimate Guide\",\n    \"titleCopied\": false,\n    \"description\": \"Dive deep into the mysteries of the universe with your guide to everything galactic.\",\n    \"descriptionCopied\": false\n  }\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.put("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"title\": \"Guide to the Galaxy\",\n  \"slug\": \"guide-to-the-galaxy\",\n  \"seo\": {\n    \"title\": \"The Ultimate Hitchhiker's Guide to the Galaxy\",\n    \"description\": \"Everything you need to know about the galaxy, from avoiding Vogon poetry to the importance of towels.\"\n  },\n  \"openGraph\": {\n    \"title\": \"Explore the Cosmos with The Ultimate Guide\",\n    \"titleCopied\": false,\n    \"description\": \"Dive deep into the mysteries of the universe with your guide to everything galactic.\",\n    \"descriptionCopied\": false\n  }\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PUT', 'https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0', [
  'body' => '{
  "title": "Guide to the Galaxy",
  "slug": "guide-to-the-galaxy",
  "seo": {
    "title": "The Ultimate Hitchhiker\'s Guide to the Galaxy",
    "description": "Everything you need to know about the galaxy, from avoiding Vogon poetry to the importance of towels."
  },
  "openGraph": {
    "title": "Explore the Cosmos with The Ultimate Guide",
    "titleCopied": false,
    "description": "Dive deep into the mysteries of the universe with your guide to everything galactic.",
    "descriptionCopied": false
  }
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0");
var request = new RestRequest(Method.PUT);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"title\": \"Guide to the Galaxy\",\n  \"slug\": \"guide-to-the-galaxy\",\n  \"seo\": {\n    \"title\": \"The Ultimate Hitchhiker's Guide to the Galaxy\",\n    \"description\": \"Everything you need to know about the galaxy, from avoiding Vogon poetry to the importance of towels.\"\n  },\n  \"openGraph\": {\n    \"title\": \"Explore the Cosmos with The Ultimate Guide\",\n    \"titleCopied\": false,\n    \"description\": \"Dive deep into the mysteries of the universe with your guide to everything galactic.\",\n    \"descriptionCopied\": false\n  }\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "title": "Guide to the Galaxy",
  "slug": "guide-to-the-galaxy",
  "seo": [
    "title": "The Ultimate Hitchhiker's Guide to the Galaxy",
    "description": "Everything you need to know about the galaxy, from avoiding Vogon poetry to the importance of towels."
  ],
  "openGraph": [
    "title": "Explore the Cosmos with The Ultimate Guide",
    "titleCopied": false,
    "description": "Dive deep into the mysteries of the universe with your guide to everything galactic.",
    "descriptionCopied": false
  ]
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552?localeId=65427cf400e02b306eaa04a0")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PUT"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Page Content

GET https://api.webflow.com/v2/pages/{page_id}/dom

Get text and component instance content from a static page.

<Badge intent="info">Localization</Badge> 

Required scope | `pages:read`


Reference: https://developers.webflow.com/data/reference/pages-and-components/pages/get-content

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Page Content
  version: endpoint_pages.get-content
paths:
  /pages/{page_id}/dom:
    get:
      operationId: get-content
      summary: Get Page Content
      description: |
        Get text and component instance content from a static page.

        <Badge intent="info">Localization</Badge> 

        Required scope | `pages:read`
      tags:
        - - subpackage_pages
      parameters:
        - name: page_id
          in: path
          description: Unique identifier for a Page
          required: true
          schema:
            type: string
            format: objectid
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Lear more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/pages_get-content_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Type:
      type: string
      enum:
        - value: text
      default: text
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Text:
      type: object
      properties:
        html:
          type:
            - string
            - 'null'
          description: The HTML content of the text node.
        text:
          type:
            - string
            - 'null'
          description: The raw text content of the text node.
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems0:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Type
          description: The type of the node
        text:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Text
          description: The text content of the node
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - text
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Type:
      type: string
      enum:
        - value: image
      default: image
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Image:
      type: object
      properties:
        alt:
          type:
            - string
            - 'null'
        assetId:
          type: string
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems1:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Type
          description: The type of the node
        image:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Image
          description: The image details of the node
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - image
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2Type:
      type: string
      enum:
        - value: component-instance
      default: component-instance
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsType:
      type: string
      enum:
        - value: Plain Text
        - value: Rich Text
        - value: Alt Text
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsText:
      type: object
      properties:
        html:
          type:
            - string
            - 'null'
          description: The HTML content of the text node.
        text:
          type:
            - string
            - 'null'
          description: The raw text content of the text node.
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItems:
      type: object
      properties:
        propertyId:
          type: string
          description: The ID of the property.
        type:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsType
          description: The type of the property.
        label:
          type: string
          description: The label of the property in the UI.
        text:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsText
          description: >-
            Represents text content within the DOM. It contains both the raw
            text and its HTML representation.
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems2:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier of the component instance node
        type:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2Type
          description: The type of the node
        componentId:
          type: string
          description: The unique identifier of the component
        propertyOverrides:
          type: array
          items:
            $ref: >-
              #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItems
          description: >-
            List of component properties with overrides for a component
            instance.
      required:
        - id
        - type
        - componentId
        - propertyOverrides
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf3Type:
      type: string
      enum:
        - value: text-input
      default: text-input
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems3:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf3Type
          description: The type of the node
        placeholder:
          type: string
          description: The placeholder text of the input node
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - placeholder
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4Type:
      type: string
      enum:
        - value: select
      default: select
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4ChoicesItems:
      type: object
      properties:
        value:
          type: string
          description: The value of the choice when selected.
        text:
          type: string
          description: The text to display for the choice.
      required:
        - value
        - text
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems4:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4Type
          description: The type of the node
        choices:
          type: array
          items:
            $ref: >-
              #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4ChoicesItems
          description: The list of choices in this select node.
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - choices
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf5Type:
      type: string
      enum:
        - value: submit-button
      default: submit-button
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems5:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf5Type
          description: The type of the node
        value:
          type: string
          description: The text content of the submit button.
        waitingText:
          type: string
          description: The text to show while the form is submitting.
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - value
        - waitingText
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf6Type:
      type: string
      enum:
        - value: search-button
      default: search-button
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems6:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf6Type
          description: The type of the node
        value:
          type: string
          description: The text content of the search button.
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - value
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems:
      oneOf:
        - $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems0
        - $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems1
        - $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems2
        - $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems3
        - $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems4
        - $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems5
        - $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems6
    PagesPageIdDomGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    pages_get-content_Response_200:
      type: object
      properties:
        pageId:
          type: string
          description: Page ID
        branchId:
          type:
            - string
            - 'null'
          format: objectid
          description: >-
            The unique identifier of a [specific page
            branch.](https://help.webflow.com/hc/en-us/articles/33961355506195-Page-branching)
        nodes:
          type: array
          items:
            $ref: >-
              #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaNodesItems
        pagination:
          $ref: >-
            #/components/schemas/PagesPageIdDomGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object
        lastUpdated:
          type:
            - string
            - 'null'
          format: date-time
          description: The date the page dom was most recently updated

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.pages.get_content(
    page_id="63c720f9347c2139b248e552",
    locale_id="65427cf400e02b306eaa04a0",
    limit=1,
    offset=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.pages.getContent("63c720f9347c2139b248e552", {
    localeId: "65427cf400e02b306eaa04a0",
    limit: 1,
    offset: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=65427cf400e02b306eaa04a0&limit=100&offset=0")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Page Content

POST https://api.webflow.com/v2/pages/{page_id}/dom
Content-Type: application/json

This endpoint updates content on a static page in **secondary locales**. It supports updating up to 1000 nodes in a single request.

Before making updates:
1. Use the [get page content](/data/reference/pages-and-components/pages/get-content) endpoint to identify available content nodes and their types.
2. If the page has component instances, retrieve the component's properties that you'll override using the [get component properties](/data/reference/pages-and-components/components/get-properties) endpoint.
3. DOM elements may include a `data-w-id` attribute. This attribute is used by Webflow to maintain custom attributes and links across locales. Always include the original `data-w-id` value in your update requests to ensure consistent behavior across all locales.

<Note>
  This endpoint is specifically for localized pages. Ensure that the specified `localeId` is a valid **secondary locale** for the site otherwise the request will fail.
</Note>

Required scope | `pages:write`


Reference: https://developers.webflow.com/data/reference/pages-and-components/pages/update-static-content

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Page Content
  version: endpoint_pages.update-static-content
paths:
  /pages/{page_id}/dom:
    post:
      operationId: update-static-content
      summary: Update Page Content
      description: >
        This endpoint updates content on a static page in **secondary locales**.
        It supports updating up to 1000 nodes in a single request.


        Before making updates:

        1. Use the [get page
        content](/data/reference/pages-and-components/pages/get-content)
        endpoint to identify available content nodes and their types.

        2. If the page has component instances, retrieve the component's
        properties that you'll override using the [get component
        properties](/data/reference/pages-and-components/components/get-properties)
        endpoint.

        3. DOM elements may include a `data-w-id` attribute. This attribute is
        used by Webflow to maintain custom attributes and links across locales.
        Always include the original `data-w-id` value in your update requests to
        ensure consistent behavior across all locales.


        <Note>
          This endpoint is specifically for localized pages. Ensure that the specified `localeId` is a valid **secondary locale** for the site otherwise the request will fail.
        </Note>


        Required scope | `pages:write`
      tags:
        - - subpackage_pages
      parameters:
        - name: page_id
          in: path
          description: Unique identifier for a Page
          required: true
          schema:
            type: string
            format: objectid
        - name: localeId
          in: query
          description: The locale identifier.
          required: true
          schema:
            type: string
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Pages_update-static-content_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                nodes:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems
                  description: >-
                    List of DOM Nodes with the new content that will be updated
                    in each node.
              required:
                - nodes
components:
  schemas:
    PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems0:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        text:
          type: string
          description: >-
            HTML content of the node, including the HTML tag. The HTML tags must
            be the same as what's returned from the Get Content endpoint.
      required:
        - nodeId
        - text
    PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItemsOneOf1PropertyOverridesItems:
      type: object
      properties:
        propertyId:
          type: string
          description: The ID of the property.
        text:
          type: string
          description: >
            The new string or HTML value used to override the component instance
            property value. 

            The provided value must be compatible with the type of the component
            instance property. 

            For example, attempting to override a single-line plain-text
            property with a multi-line 

            value will result in an error.
      required:
        - propertyId
        - text
    PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems1:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        propertyOverrides:
          type: array
          items:
            $ref: >-
              #/components/schemas/PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItemsOneOf1PropertyOverridesItems
          description: >-
            A list of component instance properties to override within the
            specified secondary locale.
      required:
        - nodeId
        - propertyOverrides
    PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItemsOneOf2ChoicesItems:
      type: object
      properties:
        value:
          type: string
          description: The value of the choice when selected.
        text:
          type: string
          description: The text to display for the choice.
      required:
        - value
        - text
    PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems2:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        choices:
          type: array
          items:
            $ref: >-
              #/components/schemas/PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItemsOneOf2ChoicesItems
          description: The list of choices to set on the select node.
      required:
        - nodeId
        - choices
    PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems3:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        placeholder:
          type: string
          description: The placeholder text of the input node
      required:
        - nodeId
        - placeholder
    PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems4:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        value:
          type: string
          description: The text content of the submit button.
        waitingText:
          type: string
          description: The text to show while the form is submitting.
      required:
        - nodeId
    PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems5:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        value:
          type: string
          description: The text content of the search button.
      required:
        - nodeId
        - value
    PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems:
      oneOf:
        - $ref: >-
            #/components/schemas/PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems0
        - $ref: >-
            #/components/schemas/PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems1
        - $ref: >-
            #/components/schemas/PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems2
        - $ref: >-
            #/components/schemas/PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems3
        - $ref: >-
            #/components/schemas/PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems4
        - $ref: >-
            #/components/schemas/PagesPageIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems5
    Pages_update-static-content_Response_200:
      type: object
      properties:
        errors:
          type: array
          items:
            type: string
          description: A list of error messages, if any.
      required:
        - errors

```

## SDK Code Examples

```python
from webflow import (
    ComponentInstanceNodePropertyOverridesWrite,
    ComponentInstanceNodePropertyOverridesWritePropertyOverridesItem,
    Select,
    SelectNodeWriteChoicesItem,
    SubmitButtonNodeWrite,
    TextInputNodeWrite,
    TextNodeWrite,
    Webflow,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.pages.update_static_content(
    page_id="63c720f9347c2139b248e552",
    locale_id="localeId",
    nodes=[
        TextNodeWrite(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad623",
            text="<h1>The Hitchhiker's Guide to the Galaxy</h1>",
        ),
        TextNodeWrite(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad627",
            text="<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>",
        ),
        Select(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad635",
            choices=[
                SelectNodeWriteChoicesItem(
                    value="choice-1",
                    text="First choice",
                ),
                SelectNodeWriteChoicesItem(
                    value="choice-2",
                    text="Second choice",
                ),
            ],
        ),
        TextInputNodeWrite(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad642",
            placeholder="Enter something here...",
        ),
        SubmitButtonNodeWrite(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad671",
            value="Submit",
            waiting_text="Submitting...",
        ),
        ComponentInstanceNodePropertyOverridesWrite(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad629",
            property_overrides=[
                ComponentInstanceNodePropertyOverridesWritePropertyOverridesItem(
                    property_id="7dd14c08-2e96-8d3d-2b19-b5c03642a0f0",
                    text="<div><h1>Time is an <em>illusion</em></h1></div>",
                ),
                ComponentInstanceNodePropertyOverridesWritePropertyOverridesItem(
                    property_id="7dd14c08-2e96-8d3d-2b19-b5c03642a0f1",
                    text="Life, the Universe and Everything",
                ),
            ],
        ),
    ],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.pages.updateStaticContent("63c720f9347c2139b248e552", {
    localeId: "localeId",
    nodes: [{
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad623",
            text: "<h1>The Hitchhiker's Guide to the Galaxy</h1>"
        }, {
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad627",
            text: "<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>"
        }, {
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad635",
            choices: [{
                    value: "choice-1",
                    text: "First choice"
                }, {
                    value: "choice-2",
                    text: "Second choice"
                }]
        }, {
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad642",
            placeholder: "Enter something here..."
        }, {
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad671",
            value: "Submit",
            waitingText: "Submitting..."
        }, {
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad629",
            propertyOverrides: [{
                    propertyId: "7dd14c08-2e96-8d3d-2b19-b5c03642a0f0",
                    text: "<div><h1>Time is an <em>illusion</em></h1></div>"
                }, {
                    propertyId: "7dd14c08-2e96-8d3d-2b19-b5c03642a0f1",
                    text: "Life, the Universe and Everything"
                }]
        }]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=localeId"

	payload := strings.NewReader("{\n  \"nodes\": [\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"<h1>The Hitchhiker's Guide to the Galaxy</h1>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad635\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"choices\": [\n        {\n          \"value\": \"choice-1\",\n          \"text\": \"First choice\"\n        },\n        {\n          \"value\": \"choice-2\",\n          \"text\": \"Second choice\"\n        }\n      ]\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad642\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"placeholder\": \"Enter something here...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad671\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"value\": \"Submit\",\n      \"waitingText\": \"Submitting...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad629\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"propertyOverrides\": [\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f0\",\n          \"text\": \"<div><h1>Time is an <em>illusion</em></h1></div>\"\n        },\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f1\",\n          \"text\": \"Life, the Universe and Everything\"\n        }\n      ]\n    }\n  ]\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=localeId")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"nodes\": [\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"<h1>The Hitchhiker's Guide to the Galaxy</h1>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad635\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"choices\": [\n        {\n          \"value\": \"choice-1\",\n          \"text\": \"First choice\"\n        },\n        {\n          \"value\": \"choice-2\",\n          \"text\": \"Second choice\"\n        }\n      ]\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad642\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"placeholder\": \"Enter something here...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad671\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"value\": \"Submit\",\n      \"waitingText\": \"Submitting...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad629\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"propertyOverrides\": [\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f0\",\n          \"text\": \"<div><h1>Time is an <em>illusion</em></h1></div>\"\n        },\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f1\",\n          \"text\": \"Life, the Universe and Everything\"\n        }\n      ]\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=localeId")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"nodes\": [\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"<h1>The Hitchhiker's Guide to the Galaxy</h1>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad635\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"choices\": [\n        {\n          \"value\": \"choice-1\",\n          \"text\": \"First choice\"\n        },\n        {\n          \"value\": \"choice-2\",\n          \"text\": \"Second choice\"\n        }\n      ]\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad642\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"placeholder\": \"Enter something here...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad671\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"value\": \"Submit\",\n      \"waitingText\": \"Submitting...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad629\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"propertyOverrides\": [\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f0\",\n          \"text\": \"<div><h1>Time is an <em>illusion</em></h1></div>\"\n        },\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f1\",\n          \"text\": \"Life, the Universe and Everything\"\n        }\n      ]\n    }\n  ]\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=localeId', [
  'body' => '{
  "nodes": [
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
      "text": "<h1>The Hitchhiker\'s Guide to the Galaxy</h1>"
    },
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
      "text": "<div><h3>Don\'t Panic!</h3><p>Always know where your towel is.</p></div>"
    },
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
      "text": "<h1>Hello world</h1>",
      "choices": [
        {
          "value": "choice-1",
          "text": "First choice"
        },
        {
          "value": "choice-2",
          "text": "Second choice"
        }
      ]
    },
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad642",
      "text": "<h1>Hello world</h1>",
      "placeholder": "Enter something here..."
    },
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad671",
      "text": "<h1>Hello world</h1>",
      "value": "Submit",
      "waitingText": "Submitting..."
    },
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad629",
      "text": "<h1>Hello world</h1>",
      "propertyOverrides": [
        {
          "propertyId": "7dd14c08-2e96-8d3d-2b19-b5c03642a0f0",
          "text": "<div><h1>Time is an <em>illusion</em></h1></div>"
        },
        {
          "propertyId": "7dd14c08-2e96-8d3d-2b19-b5c03642a0f1",
          "text": "Life, the Universe and Everything"
        }
      ]
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=localeId");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"nodes\": [\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"<h1>The Hitchhiker's Guide to the Galaxy</h1>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad635\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"choices\": [\n        {\n          \"value\": \"choice-1\",\n          \"text\": \"First choice\"\n        },\n        {\n          \"value\": \"choice-2\",\n          \"text\": \"Second choice\"\n        }\n      ]\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad642\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"placeholder\": \"Enter something here...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad671\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"value\": \"Submit\",\n      \"waitingText\": \"Submitting...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad629\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"propertyOverrides\": [\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f0\",\n          \"text\": \"<div><h1>Time is an <em>illusion</em></h1></div>\"\n        },\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f1\",\n          \"text\": \"Life, the Universe and Everything\"\n        }\n      ]\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["nodes": [
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
      "text": "<h1>The Hitchhiker's Guide to the Galaxy</h1>"
    ],
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
      "text": "<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>"
    ],
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
      "text": "<h1>Hello world</h1>",
      "choices": [
        [
          "value": "choice-1",
          "text": "First choice"
        ],
        [
          "value": "choice-2",
          "text": "Second choice"
        ]
      ]
    ],
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad642",
      "text": "<h1>Hello world</h1>",
      "placeholder": "Enter something here..."
    ],
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad671",
      "text": "<h1>Hello world</h1>",
      "value": "Submit",
      "waitingText": "Submitting..."
    ],
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad629",
      "text": "<h1>Hello world</h1>",
      "propertyOverrides": [
        [
          "propertyId": "7dd14c08-2e96-8d3d-2b19-b5c03642a0f0",
          "text": "<div><h1>Time is an <em>illusion</em></h1></div>"
        ],
        [
          "propertyId": "7dd14c08-2e96-8d3d-2b19-b5c03642a0f1",
          "text": "Life, the Universe and Everything"
        ]
      ]
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/dom?localeId=localeId")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Components

GET https://api.webflow.com/v2/sites/{site_id}/components

List of all components for a site.

Required scope | `components:read`


Reference: https://developers.webflow.com/data/reference/pages-and-components/components/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Components
  version: endpoint_components.list
paths:
  /sites/{site_id}/components:
    get:
      operationId: list
      summary: List Components
      description: |
        List of all components for a site.

        Required scope | `components:read`
      tags:
        - - subpackage_components
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: branchId
          in: query
          description: Scope the operation to work on a specific branch.
          required: false
          schema:
            type: string
            format: objectid
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/components_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaComponentsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Component
        name:
          type: string
          description: Component Name
        group:
          type: string
          description: The group that the component belongs to
        description:
          type: string
          description: Component Description
        readonly:
          type: boolean
          description: >-
            Indicates whether the component is read-only. Components that cannot
            be updated within this Site are set to readonly. Workspace Libraries
            are a good example.
      required:
        - id
    SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    components_list_Response_200:
      type: object
      properties:
        components:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaComponentsItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.components.list(
    site_id="580e63e98c9a982ac9b8b741",
    branch_id="68026fa68ef6dc744c75b833",
    limit=1,
    offset=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.components.list("580e63e98c9a982ac9b8b741", {
    branchId: "68026fa68ef6dc744c75b833",
    limit: 1,
    offset: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components?branchId=68026fa68ef6dc744c75b833&limit=100&offset=0"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components?branchId=68026fa68ef6dc744c75b833&limit=100&offset=0")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components?branchId=68026fa68ef6dc744c75b833&limit=100&offset=0")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components?branchId=68026fa68ef6dc744c75b833&limit=100&offset=0', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components?branchId=68026fa68ef6dc744c75b833&limit=100&offset=0");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components?branchId=68026fa68ef6dc744c75b833&limit=100&offset=0")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Component Content

GET https://api.webflow.com/v2/sites/{site_id}/components/{component_id}/dom

Get static content from a component definition. This includes text nodes, image nodes, select nodes, text input nodes, submit button nodes, and nested component instances.
To retrieve dynamic content set by component properties, use the [get component properties](/data/reference/pages-and-components/components/get-properties) endpoint.

<Note>If you do not provide a Locale ID in your request, the response will return any content that can be localized from the Primary locale.</Note>

Required scope | `components:read`


Reference: https://developers.webflow.com/data/reference/pages-and-components/components/get-content

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Component Content
  version: endpoint_components.get-content
paths:
  /sites/{site_id}/components/{component_id}/dom:
    get:
      operationId: get-content
      summary: Get Component Content
      description: >
        Get static content from a component definition. This includes text
        nodes, image nodes, select nodes, text input nodes, submit button nodes,
        and nested component instances.

        To retrieve dynamic content set by component properties, use the [get
        component
        properties](/data/reference/pages-and-components/components/get-properties)
        endpoint.


        <Note>If you do not provide a Locale ID in your request, the response
        will return any content that can be localized from the Primary
        locale.</Note>


        Required scope | `components:read`
      tags:
        - - subpackage_components
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: component_id
          in: path
          description: Unique identifier for a Component
          required: true
          schema:
            type: string
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Lear more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: branchId
          in: query
          description: Scope the operation to work on a specific branch.
          required: false
          schema:
            type: string
            format: objectid
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/components_get-content_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Type:
      type: string
      enum:
        - value: text
      default: text
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Text:
      type: object
      properties:
        html:
          type:
            - string
            - 'null'
          description: The HTML content of the text node.
        text:
          type:
            - string
            - 'null'
          description: The raw text content of the text node.
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems0:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Type
          description: The type of the node
        text:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf0Text
          description: The text content of the node
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - text
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Type:
      type: string
      enum:
        - value: image
      default: image
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Image:
      type: object
      properties:
        alt:
          type:
            - string
            - 'null'
        assetId:
          type: string
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems1:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Type
          description: The type of the node
        image:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf1Image
          description: The image details of the node
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - image
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2Type:
      type: string
      enum:
        - value: component-instance
      default: component-instance
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsType:
      type: string
      enum:
        - value: Plain Text
        - value: Rich Text
        - value: Alt Text
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsText:
      type: object
      properties:
        html:
          type:
            - string
            - 'null'
          description: The HTML content of the text node.
        text:
          type:
            - string
            - 'null'
          description: The raw text content of the text node.
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItems:
      type: object
      properties:
        propertyId:
          type: string
          description: The ID of the property.
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsType
          description: The type of the property.
        label:
          type: string
          description: The label of the property in the UI.
        text:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItemsText
          description: >-
            Represents text content within the DOM. It contains both the raw
            text and its HTML representation.
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems2:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier of the component instance node
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2Type
          description: The type of the node
        componentId:
          type: string
          description: The unique identifier of the component
        propertyOverrides:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf2PropertyOverridesItems
          description: >-
            List of component properties with overrides for a component
            instance.
      required:
        - id
        - type
        - componentId
        - propertyOverrides
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf3Type:
      type: string
      enum:
        - value: text-input
      default: text-input
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems3:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf3Type
          description: The type of the node
        placeholder:
          type: string
          description: The placeholder text of the input node
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - placeholder
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4Type:
      type: string
      enum:
        - value: select
      default: select
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4ChoicesItems:
      type: object
      properties:
        value:
          type: string
          description: The value of the choice when selected.
        text:
          type: string
          description: The text to display for the choice.
      required:
        - value
        - text
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems4:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4Type
          description: The type of the node
        choices:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf4ChoicesItems
          description: The list of choices in this select node.
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - choices
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf5Type:
      type: string
      enum:
        - value: submit-button
      default: submit-button
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems5:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf5Type
          description: The type of the node
        value:
          type: string
          description: The text content of the submit button.
        waitingText:
          type: string
          description: The text to show while the form is submitting.
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - value
        - waitingText
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf6Type:
      type: string
      enum:
        - value: search-button
      default: search-button
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems6:
      type: object
      properties:
        id:
          type: string
          description: Node UUID
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItemsOneOf6Type
          description: The type of the node
        value:
          type: string
          description: The text content of the search button.
        attributes:
          type: object
          additionalProperties:
            type: string
          description: The custom attributes of the node
      required:
        - id
        - type
        - value
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems:
      oneOf:
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems0
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems1
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems2
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems3
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems4
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems5
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems6
    SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    components_get-content_Response_200:
      type: object
      properties:
        componentId:
          type: string
          description: Component ID
        nodes:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaNodesItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.components.get_content(
    site_id="580e63e98c9a982ac9b8b741",
    component_id="8505ba55-ef72-629e-f85c-33e4b703d48b",
    locale_id="65427cf400e02b306eaa04a0",
    branch_id="68026fa68ef6dc744c75b833",
    limit=1,
    offset=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.components.getContent("580e63e98c9a982ac9b8b741", "8505ba55-ef72-629e-f85c-33e4b703d48b", {
    localeId: "65427cf400e02b306eaa04a0",
    branchId: "68026fa68ef6dc744c75b833",
    limit: 1,
    offset: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Component Content

POST https://api.webflow.com/v2/sites/{site_id}/components/{component_id}/dom
Content-Type: application/json

This endpoint updates content within a component defintion for **secondary locales**. It supports updating up to 1000 nodes in a single request.

Before making updates:
1. Use the [get component content](/data/reference/pages-and-components/components/get-content) endpoint to identify available content nodes and their types.
2. If your component definition has a component instance nested within it, retrieve the nested component instance's properties that you'll override using the [get component properties](/data/reference/pages-and-components/components/get-properties) endpoint.
3. DOM elements may include a `data-w-id` attribute. This attribute is used by Webflow to maintain custom attributes and links across locales. Always include the original `data-w-id` value in your update requests to ensure consistent behavior across all locales.

<Note>
  This endpoint is specifically for localizing component definitions. Ensure that the specified `localeId` is a valid **secondary locale** for the site otherwise the request will fail.
</Note>

Required scope | `components:write`


Reference: https://developers.webflow.com/data/reference/pages-and-components/components/update-content

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Component Content
  version: endpoint_components.update-content
paths:
  /sites/{site_id}/components/{component_id}/dom:
    post:
      operationId: update-content
      summary: Update Component Content
      description: >
        This endpoint updates content within a component defintion for
        **secondary locales**. It supports updating up to 1000 nodes in a single
        request.


        Before making updates:

        1. Use the [get component
        content](/data/reference/pages-and-components/components/get-content)
        endpoint to identify available content nodes and their types.

        2. If your component definition has a component instance nested within
        it, retrieve the nested component instance's properties that you'll
        override using the [get component
        properties](/data/reference/pages-and-components/components/get-properties)
        endpoint.

        3. DOM elements may include a `data-w-id` attribute. This attribute is
        used by Webflow to maintain custom attributes and links across locales.
        Always include the original `data-w-id` value in your update requests to
        ensure consistent behavior across all locales.


        <Note>
          This endpoint is specifically for localizing component definitions. Ensure that the specified `localeId` is a valid **secondary locale** for the site otherwise the request will fail.
        </Note>


        Required scope | `components:write`
      tags:
        - - subpackage_components
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: component_id
          in: path
          description: Unique identifier for a Component
          required: true
          schema:
            type: string
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Lear more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: branchId
          in: query
          description: Scope the operation to work on a specific branch.
          required: false
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/components_update-content_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                nodes:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems
                  description: >-
                    List of DOM Nodes with the new content that will be updated
                    in each node.
              required:
                - nodes
components:
  schemas:
    SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems0:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        text:
          type: string
          description: >-
            HTML content of the node, including the HTML tag. The HTML tags must
            be the same as what's returned from the Get Content endpoint.
      required:
        - nodeId
        - text
    SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItemsOneOf1PropertyOverridesItems:
      type: object
      properties:
        propertyId:
          type: string
          description: The ID of the property.
        text:
          type: string
          description: >
            The new string or HTML value used to override the component instance
            property value. 

            The provided value must be compatible with the type of the component
            instance property. 

            For example, attempting to override a single-line plain-text
            property with a multi-line 

            value will result in an error.
      required:
        - propertyId
        - text
    SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems1:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        propertyOverrides:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItemsOneOf1PropertyOverridesItems
          description: >-
            A list of component instance properties to override within the
            specified secondary locale.
      required:
        - nodeId
        - propertyOverrides
    SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItemsOneOf2ChoicesItems:
      type: object
      properties:
        value:
          type: string
          description: The value of the choice when selected.
        text:
          type: string
          description: The text to display for the choice.
      required:
        - value
        - text
    SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems2:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        choices:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItemsOneOf2ChoicesItems
          description: The list of choices to set on the select node.
      required:
        - nodeId
        - choices
    SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems3:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        placeholder:
          type: string
          description: The placeholder text of the input node
      required:
        - nodeId
        - placeholder
    SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems4:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        value:
          type: string
          description: The text content of the submit button.
        waitingText:
          type: string
          description: The text to show while the form is submitting.
      required:
        - nodeId
    SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems5:
      type: object
      properties:
        nodeId:
          type: string
          description: Node UUID
        value:
          type: string
          description: The text content of the search button.
      required:
        - nodeId
        - value
    SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems:
      oneOf:
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems0
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems1
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems2
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems3
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems4
        - $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdDomPostRequestBodyContentApplicationJsonSchemaNodesItems5
    components_update-content_Response_200:
      type: object
      properties:
        errors:
          type: array
          items:
            type: string
          description: A list of error messages, if any.
      required:
        - errors

```

## SDK Code Examples

```python
from webflow import (
    ComponentInstanceNodePropertyOverridesWrite,
    ComponentInstanceNodePropertyOverridesWritePropertyOverridesItem,
    Select,
    SelectNodeWriteChoicesItem,
    SubmitButtonNodeWrite,
    TextInputNodeWrite,
    TextNodeWrite,
    Webflow,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.components.update_content(
    site_id="580e63e98c9a982ac9b8b741",
    component_id="8505ba55-ef72-629e-f85c-33e4b703d48b",
    locale_id="65427cf400e02b306eaa04a0",
    branch_id="68026fa68ef6dc744c75b833",
    nodes=[
        TextNodeWrite(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad623",
            text="<h1>The Hitchhiker's Guide to the Galaxy</h1>",
        ),
        TextNodeWrite(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad627",
            text="<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>",
        ),
        Select(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad635",
            choices=[
                SelectNodeWriteChoicesItem(
                    value="choice-1",
                    text="First choice",
                ),
                SelectNodeWriteChoicesItem(
                    value="choice-2",
                    text="Second choice",
                ),
            ],
        ),
        TextInputNodeWrite(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad642",
            placeholder="Enter something here...",
        ),
        SubmitButtonNodeWrite(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad671",
            value="Submit",
            waiting_text="Submitting...",
        ),
        ComponentInstanceNodePropertyOverridesWrite(
            node_id="a245c12d-995b-55ee-5ec7-aa36a6cad629",
            property_overrides=[
                ComponentInstanceNodePropertyOverridesWritePropertyOverridesItem(
                    property_id="7dd14c08-2e96-8d3d-2b19-b5c03642a0f0",
                    text="<div><h1>Time is an <em>illusion</em></h1></div>",
                ),
                ComponentInstanceNodePropertyOverridesWritePropertyOverridesItem(
                    property_id="7dd14c08-2e96-8d3d-2b19-b5c03642a0f1",
                    text="Life, the Universe and Everything",
                ),
            ],
        ),
    ],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.components.updateContent("580e63e98c9a982ac9b8b741", "8505ba55-ef72-629e-f85c-33e4b703d48b", {
    localeId: "65427cf400e02b306eaa04a0",
    branchId: "68026fa68ef6dc744c75b833",
    nodes: [{
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad623",
            text: "<h1>The Hitchhiker's Guide to the Galaxy</h1>"
        }, {
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad627",
            text: "<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>"
        }, {
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad635",
            choices: [{
                    value: "choice-1",
                    text: "First choice"
                }, {
                    value: "choice-2",
                    text: "Second choice"
                }]
        }, {
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad642",
            placeholder: "Enter something here..."
        }, {
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad671",
            value: "Submit",
            waitingText: "Submitting..."
        }, {
            nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad629",
            propertyOverrides: [{
                    propertyId: "7dd14c08-2e96-8d3d-2b19-b5c03642a0f0",
                    text: "<div><h1>Time is an <em>illusion</em></h1></div>"
                }, {
                    propertyId: "7dd14c08-2e96-8d3d-2b19-b5c03642a0f1",
                    text: "Life, the Universe and Everything"
                }]
        }]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833"

	payload := strings.NewReader("{\n  \"nodes\": [\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"<h1>The Hitchhiker's Guide to the Galaxy</h1>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad635\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"choices\": [\n        {\n          \"value\": \"choice-1\",\n          \"text\": \"First choice\"\n        },\n        {\n          \"value\": \"choice-2\",\n          \"text\": \"Second choice\"\n        }\n      ]\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad642\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"placeholder\": \"Enter something here...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad671\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"value\": \"Submit\",\n      \"waitingText\": \"Submitting...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad629\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"propertyOverrides\": [\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f0\",\n          \"text\": \"<div><h1>Time is an <em>illusion</em></h1></div>\"\n        },\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f1\",\n          \"text\": \"Life, the Universe and Everything\"\n        }\n      ]\n    }\n  ]\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"nodes\": [\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"<h1>The Hitchhiker's Guide to the Galaxy</h1>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad635\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"choices\": [\n        {\n          \"value\": \"choice-1\",\n          \"text\": \"First choice\"\n        },\n        {\n          \"value\": \"choice-2\",\n          \"text\": \"Second choice\"\n        }\n      ]\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad642\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"placeholder\": \"Enter something here...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad671\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"value\": \"Submit\",\n      \"waitingText\": \"Submitting...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad629\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"propertyOverrides\": [\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f0\",\n          \"text\": \"<div><h1>Time is an <em>illusion</em></h1></div>\"\n        },\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f1\",\n          \"text\": \"Life, the Universe and Everything\"\n        }\n      ]\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"nodes\": [\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"<h1>The Hitchhiker's Guide to the Galaxy</h1>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad635\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"choices\": [\n        {\n          \"value\": \"choice-1\",\n          \"text\": \"First choice\"\n        },\n        {\n          \"value\": \"choice-2\",\n          \"text\": \"Second choice\"\n        }\n      ]\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad642\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"placeholder\": \"Enter something here...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad671\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"value\": \"Submit\",\n      \"waitingText\": \"Submitting...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad629\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"propertyOverrides\": [\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f0\",\n          \"text\": \"<div><h1>Time is an <em>illusion</em></h1></div>\"\n        },\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f1\",\n          \"text\": \"Life, the Universe and Everything\"\n        }\n      ]\n    }\n  ]\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833', [
  'body' => '{
  "nodes": [
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
      "text": "<h1>The Hitchhiker\'s Guide to the Galaxy</h1>"
    },
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
      "text": "<div><h3>Don\'t Panic!</h3><p>Always know where your towel is.</p></div>"
    },
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
      "text": "<h1>Hello world</h1>",
      "choices": [
        {
          "value": "choice-1",
          "text": "First choice"
        },
        {
          "value": "choice-2",
          "text": "Second choice"
        }
      ]
    },
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad642",
      "text": "<h1>Hello world</h1>",
      "placeholder": "Enter something here..."
    },
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad671",
      "text": "<h1>Hello world</h1>",
      "value": "Submit",
      "waitingText": "Submitting..."
    },
    {
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad629",
      "text": "<h1>Hello world</h1>",
      "propertyOverrides": [
        {
          "propertyId": "7dd14c08-2e96-8d3d-2b19-b5c03642a0f0",
          "text": "<div><h1>Time is an <em>illusion</em></h1></div>"
        },
        {
          "propertyId": "7dd14c08-2e96-8d3d-2b19-b5c03642a0f1",
          "text": "Life, the Universe and Everything"
        }
      ]
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"nodes\": [\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"<h1>The Hitchhiker's Guide to the Galaxy</h1>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad635\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"choices\": [\n        {\n          \"value\": \"choice-1\",\n          \"text\": \"First choice\"\n        },\n        {\n          \"value\": \"choice-2\",\n          \"text\": \"Second choice\"\n        }\n      ]\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad642\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"placeholder\": \"Enter something here...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad671\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"value\": \"Submit\",\n      \"waitingText\": \"Submitting...\"\n    },\n    {\n      \"nodeId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad629\",\n      \"text\": \"<h1>Hello world</h1>\",\n      \"propertyOverrides\": [\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f0\",\n          \"text\": \"<div><h1>Time is an <em>illusion</em></h1></div>\"\n        },\n        {\n          \"propertyId\": \"7dd14c08-2e96-8d3d-2b19-b5c03642a0f1\",\n          \"text\": \"Life, the Universe and Everything\"\n        }\n      ]\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["nodes": [
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
      "text": "<h1>The Hitchhiker's Guide to the Galaxy</h1>"
    ],
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
      "text": "<div><h3>Don't Panic!</h3><p>Always know where your towel is.</p></div>"
    ],
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
      "text": "<h1>Hello world</h1>",
      "choices": [
        [
          "value": "choice-1",
          "text": "First choice"
        ],
        [
          "value": "choice-2",
          "text": "Second choice"
        ]
      ]
    ],
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad642",
      "text": "<h1>Hello world</h1>",
      "placeholder": "Enter something here..."
    ],
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad671",
      "text": "<h1>Hello world</h1>",
      "value": "Submit",
      "waitingText": "Submitting..."
    ],
    [
      "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad629",
      "text": "<h1>Hello world</h1>",
      "propertyOverrides": [
        [
          "propertyId": "7dd14c08-2e96-8d3d-2b19-b5c03642a0f0",
          "text": "<div><h1>Time is an <em>illusion</em></h1></div>"
        ],
        [
          "propertyId": "7dd14c08-2e96-8d3d-2b19-b5c03642a0f1",
          "text": "Life, the Universe and Everything"
        ]
      ]
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/dom?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Component Properties

GET https://api.webflow.com/v2/sites/{site_id}/components/{component_id}/properties

Get the default property values of a component definition.

<Note>If you do not include a `localeId` in your request, the response will return any properties that can be localized from the Primary locale.</Note>

Required scope | `components:read`


Reference: https://developers.webflow.com/data/reference/pages-and-components/components/get-properties

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Component Properties
  version: endpoint_components.get-properties
paths:
  /sites/{site_id}/components/{component_id}/properties:
    get:
      operationId: get-properties
      summary: Get Component Properties
      description: >
        Get the default property values of a component definition.


        <Note>If you do not include a `localeId` in your request, the response
        will return any properties that can be localized from the Primary
        locale.</Note>


        Required scope | `components:read`
      tags:
        - - subpackage_components
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: component_id
          in: path
          description: Unique identifier for a Component
          required: true
          schema:
            type: string
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Lear more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: branchId
          in: query
          description: Scope the operation to work on a specific branch.
          required: false
          schema:
            type: string
            format: objectid
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/components_get-properties_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItemsType:
      type: string
      enum:
        - value: Plain Text
        - value: Rich Text
        - value: Alt Text
    SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItemsText:
      type: object
      properties:
        html:
          type:
            - string
            - 'null'
          description: The HTML content of the text node.
        text:
          type:
            - string
            - 'null'
          description: The raw text content of the text node.
    SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItems:
      type: object
      properties:
        propertyId:
          type: string
          description: The ID of the property.
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItemsType
          description: The type of the property.
        label:
          type: string
          description: The label of the property in the UI.
        text:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItemsText
          description: >-
            Represents text content within the DOM. It contains both the raw
            text and its HTML representation.
    SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    components_get-properties_Response_200:
      type: object
      properties:
        componentId:
          type: string
          description: Component ID
        properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.components.get_properties(
    site_id="580e63e98c9a982ac9b8b741",
    component_id="8505ba55-ef72-629e-f85c-33e4b703d48b",
    locale_id="65427cf400e02b306eaa04a0",
    branch_id="68026fa68ef6dc744c75b833",
    limit=1,
    offset=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.components.getProperties("580e63e98c9a982ac9b8b741", "8505ba55-ef72-629e-f85c-33e4b703d48b", {
    localeId: "65427cf400e02b306eaa04a0",
    branchId: "68026fa68ef6dc744c75b833",
    limit: 1,
    offset: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833&limit=100&offset=0")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Component Properties

POST https://api.webflow.com/v2/sites/{site_id}/components/{component_id}/properties
Content-Type: application/json

Update the default property values of a component definition in a specificed locale.

Before making updates:
1. Use the [get component properties](/data/reference/pages-and-components/components/get-properties) endpoint to identify properties that can be updated in a secondary locale.
2. Rich Text properties may include a `data-w-id` attribute. This attribute is used by Webflow to maintain links across locales. Always include the original `data-w-id` value in your update requests to ensure consistent behavior across all locales.

<Note>The request requires a secondary locale ID. If a `localeId` is missing, the request will not be processed and will result in an error.</Note>

Required scope | `components:write`


Reference: https://developers.webflow.com/data/reference/pages-and-components/components/update-properties

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Component Properties
  version: endpoint_components.update-properties
paths:
  /sites/{site_id}/components/{component_id}/properties:
    post:
      operationId: update-properties
      summary: Update Component Properties
      description: >
        Update the default property values of a component definition in a
        specificed locale.


        Before making updates:

        1. Use the [get component
        properties](/data/reference/pages-and-components/components/get-properties)
        endpoint to identify properties that can be updated in a secondary
        locale.

        2. Rich Text properties may include a `data-w-id` attribute. This
        attribute is used by Webflow to maintain links across locales. Always
        include the original `data-w-id` value in your update requests to ensure
        consistent behavior across all locales.


        <Note>The request requires a secondary locale ID. If a `localeId` is
        missing, the request will not be processed and will result in an
        error.</Note>


        Required scope | `components:write`
      tags:
        - - subpackage_components
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: component_id
          in: path
          description: Unique identifier for a Component
          required: true
          schema:
            type: string
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Lear more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: branchId
          in: query
          description: Scope the operation to work on a specific branch.
          required: false
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/components_update-properties_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                properties:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/SitesSiteIdComponentsComponentIdPropertiesPostRequestBodyContentApplicationJsonSchemaItems
                  description: >-
                    A list of component properties to update within the
                    specified secondary locale.
              required:
                - properties
components:
  schemas:
    SitesSiteIdComponentsComponentIdPropertiesPostRequestBodyContentApplicationJsonSchemaItems:
      type: object
      properties:
        propertyId:
          type: string
          description: The ID of the property.
        text:
          type: string
          description: >
            The new string or HTML value used to update the component property
            in the secondary locale.


            The provided value must be compatible with the type of the component
            property.


            For example, attempting to update a single-line plain-text property
            with a multi-line 

            value will result in an error.
      required:
        - propertyId
        - text
    components_update-properties_Response_200:
      type: object
      properties:
        errors:
          type: array
          items:
            type: string
          description: A list of error messages, if any.
      required:
        - errors

```

## SDK Code Examples

```python
from webflow import Webflow
from webflow.resources.components import ComponentPropertiesWritePropertiesItem

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.components.update_properties(
    site_id="580e63e98c9a982ac9b8b741",
    component_id="8505ba55-ef72-629e-f85c-33e4b703d48b",
    locale_id="65427cf400e02b306eaa04a0",
    branch_id="68026fa68ef6dc744c75b833",
    properties=[
        ComponentPropertiesWritePropertiesItem(
            property_id="a245c12d-995b-55ee-5ec7-aa36a6cad623",
            text="The Hitchhiker’s Guide to the Galaxy",
        ),
        ComponentPropertiesWritePropertiesItem(
            property_id="a245c12d-995b-55ee-5ec7-aa36a6cad627",
            text="<div><h3>Dont Panic!</h3><p>Always know where your towel is.</p></div>",
        ),
    ],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.components.updateProperties("580e63e98c9a982ac9b8b741", "8505ba55-ef72-629e-f85c-33e4b703d48b", {
    localeId: "65427cf400e02b306eaa04a0",
    branchId: "68026fa68ef6dc744c75b833",
    properties: [{
            propertyId: "a245c12d-995b-55ee-5ec7-aa36a6cad623",
            text: "The Hitchhiker\u2019s Guide to the Galaxy"
        }, {
            propertyId: "a245c12d-995b-55ee-5ec7-aa36a6cad627",
            text: "<div><h3>Dont Panic!</h3><p>Always know where your towel is.</p></div>"
        }]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833"

	payload := strings.NewReader("{\n  \"properties\": [\n    {\n      \"propertyId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"The Hitchhiker’s Guide to the Galaxy\"\n    },\n    {\n      \"propertyId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Dont Panic!</h3><p>Always know where your towel is.</p></div>\"\n    }\n  ]\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"properties\": [\n    {\n      \"propertyId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"The Hitchhiker’s Guide to the Galaxy\"\n    },\n    {\n      \"propertyId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Dont Panic!</h3><p>Always know where your towel is.</p></div>\"\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"properties\": [\n    {\n      \"propertyId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"The Hitchhiker’s Guide to the Galaxy\"\n    },\n    {\n      \"propertyId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Dont Panic!</h3><p>Always know where your towel is.</p></div>\"\n    }\n  ]\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833', [
  'body' => '{
  "properties": [
    {
      "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
      "text": "The Hitchhiker’s Guide to the Galaxy"
    },
    {
      "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
      "text": "<div><h3>Dont Panic!</h3><p>Always know where your towel is.</p></div>"
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"properties\": [\n    {\n      \"propertyId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad623\",\n      \"text\": \"The Hitchhiker’s Guide to the Galaxy\"\n    },\n    {\n      \"propertyId\": \"a245c12d-995b-55ee-5ec7-aa36a6cad627\",\n      \"text\": \"<div><h3>Dont Panic!</h3><p>Always know where your towel is.</p></div>\"\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["properties": [
    [
      "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
      "text": "The Hitchhiker’s Guide to the Galaxy"
    ],
    [
      "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
      "text": "<div><h3>Dont Panic!</h3><p>Always know where your towel is.</p></div>"
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/components/8505ba55-ef72-629e-f85c-33e4b703d48b/properties?localeId=65427cf400e02b306eaa04a0&branchId=68026fa68ef6dc744c75b833")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Webflow CMS API

> Learn how to interact with the Webflow CMS using the Data API.

Webflow's CMS API lets you programmatically create, manage, and publish content. Use it to build custom workflows, integrate with external systems, and automate content management. For general information on the Webflow CMS, see the [help center documentation](https://help.webflow.com/hc/en-us/articles/33961307099027-Intro-to-the-Webflow-CMS).

## Overview

Use the Data API to manage three core components of the Webflow CMS:

<CardGroup cols={3}>
  <Card title="Collections" href="#collections">
    Database-like containers that define content structure and fields.
  </Card>

  <Card title="Fields" href="#collection-fields">
    Individual data fields that define content types within a collection.
  </Card>

  <Card title="Items" href="#collection-items">
    Content records stored within a collection.
  </Card>
</CardGroup>

The API supports both **staged** and **live** content, giving you precise control over your [publishing workflow](/data/docs/working-with-the-cms/publishing). You can create content programmatically, perform bulk updates, and manage multi-locale content.

***

## Workflows

There are a few workflows that are particularly helpful to understand when working with the CMS API.

<CardGroup cols={2} id="workflow-cards">
  <Card
    title="Collection Management"
    href="/data/docs/working-with-the-cms/manage-collections-and-items"
    iconPosition="left"
    iconSize="12"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    Learn how to create, manage, and publish collections and items.
  </Card>

  <Card
    title="Publishing"
    href="/data/docs/working-with-the-cms/publishing"
    data-path="publishing"
    iconPosition="left"
    iconSize="12"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/PublishDesigner.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/PublishDesigner.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    Learn how items are published, updated, and unpublished.
  </Card>

  <Card
    title="Localization"
    href="/data/docs/working-with-the-cms/localization"
    data-path="cms-localization"
    iconPosition="left"
    iconSize="12"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Localization.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Localization.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    Learn how to create and manage linked CMS items across multiple locales.
  </Card>

  <Card
    title="Content Delivery"
    href="/data/docs/working-with-the-cms/content-delivery"
    data-path="cms-cdn"
    iconPosition="left"
    iconSize="12"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/GlobalCDN.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/GlobalCDN.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    Learn how to deliver cached content to external applications.
  </Card>
</CardGroup>

***

## Key concepts

<Accordion title="Collections">
  Collections are structured containers for dynamic content, similar to database tables. Each collection defines a content type, like blog posts, team members, or testimonials, by specifying a set of fields.

  Collections can contain various [field types](/data/reference/field-types-item-values), including text, rich text, images, dates, numbers, and references to other collections.

  Each collection has a unique ID used to manage its details, fields, and items.

  ### Collections endpoints

  | Endpoint                                                                                                                                                                                  | Description                                                |
  | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
  | <span data-badge-type="http-method" data-http-method="GET" class="fern-docs-badge small green subtle shrink-0">GET</span> [List collections](/data/reference/cms/collections/list)        | Retrieve all collections for a site.                       |
  | <span data-badge-type="http-method" data-http-method="GET" class="fern-docs-badge small green subtle shrink-0">GET</span> [Get collection](/data/reference/cms/collections/get)           | Retrieve the schema and details for a specific collection. |
  | <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge small blue subtle shrink-0">POST</span> [Create collection](/data/reference/cms/collections/create)    | Create a new collection.                                   |
  | <span data-badge-type="http-method" data-http-method="DELETE" class="fern-docs-badge small red subtle shrink-0">DELETE</span> [Delete collection](/data/reference/cms/collections/delete) | Remove a collection and all of its items.                  |

  <br />
</Accordion>

<Accordion title="Collection fields">
  Fields define the structure and data type for content in a collection. Each field has a unique ID used to manage its details and item data. Each field's type determines the kind of content it can store. See the [field types reference](/data/reference/field-types-item-values) for a full list of types and their properties.

  ### Collection fields endpoints

  | Endpoint                                                                                                                                                                                    | Description                         |
  | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
  | <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge small blue subtle shrink-0">POST</span> [Create field](/data/reference/cms/collection-fields/create)     | Create a new field in a collection. |
  | <span data-badge-type="http-method" data-http-method="PATCH" class="fern-docs-badge small orange subtle shrink-0">PATCH</span> [Update field](/data/reference/cms/collection-fields/update) | Modify an existing field.           |
  | <span data-badge-type="http-method" data-http-method="DELETE" class="fern-docs-badge small red subtle shrink-0">DELETE</span> [Delete field](/data/reference/cms/collection-fields/delete)  | Remove a field from a collection.   |

  <Note title="List fields">
    To list fields, retrieve collection details using the [get collection](/data/reference/cms/collections/get) endpoint.
  </Note>
</Accordion>

<Accordion title="Collection items">
  Items are individual records within a collection. Each item has a unique ID and contains data for the fields defined in that collection.

  ### Collection Item states

  Items exist in two main states:

  <CardGroup>
    <Card title="Staged">
      Draft content not visible on your live site.
    </Card>

    <Card title="Live">
      Published content that appears on your website.
    </Card>
  </CardGroup>

  This dual-state system lets you prepare content changes without affecting your live site. You can create, edit, and preview staged content before publishing. For more details, see the [CMS publishing guide](/data/docs/working-with-the-cms/publishing).

  ### Collection items endpoints

  <Tabs>
    <Tab title="Staged">
      Manage staged items on a site. These endpoints also work with live items. Updating a live item automatically updates its staged version. Creating a new item with these endpoints always creates a draft.

      | Endpoint                                                                                                                                                                                                    | Description                                                               |
      | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
      | <span data-badge-type="http-method" data-http-method="GET" class="fern-docs-badge small green subtle shrink-0">GET</span> [List items](/data/reference/cms/collection-items/staged-items/list-items)        | Retrieve a list of all items in a collection.                             |
      | <span data-badge-type="http-method" data-http-method="GET" class="fern-docs-badge small green subtle shrink-0">GET</span> [Get item](/data/reference/cms/collection-items/staged-items/get-item)            | Retrieve a specific item.                                                 |
      | <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge small blue subtle shrink-0">POST</span> [Create item(s)](/data/reference/cms/collection-items/staged-items/create-items) | Create items. Use `cmsLocaleIds` to create items across multiple locales. |
      | <span data-badge-type="http-method" data-http-method="PUT" class="fern-docs-badge small orange subtle shrink-0">PATCH</span> [Update items](/data/reference/cms/collection-items/staged-items/update-items) | Modify one or more items.                                                 |
      | <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge small red subtle shrink-0">DELETE</span> [Delete items](/data/reference/cms/collection-items/staged-items/delete-items)  | Delete one or more items.                                                 |
      | <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge small blue subtle shrink-0">POST</span> [Publish item](/data/reference/cms/collection-items/staged-items/publish-item)   | Publish one or more items.                                                |

      <Note title="Unpublish items">
        Use the [unpublish live item endpoint](/data/reference/cms/collection-items/live-items/delete-items-live) to unpublish a live item.
      </Note>
    </Tab>

    <Tab title="Live">
      Manage live items on a site. These endpoints only work for live items.

      | Endpoint                                                                                                                                                                                                         | Description                                        |
      | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
      | <span data-badge-type="http-method" data-http-method="GET" class="fern-docs-badge small green subtle shrink-0">GET</span> [List live items](/data/reference/cms/collection-items/live-items/list-items-live)     | Retrieve a list of all live items in a collection. |
      | <span data-badge-type="http-method" data-http-method="GET" class="fern-docs-badge small green subtle shrink-0">GET</span> [Get live item](/data/reference/cms/collection-items/live-items/get-item-live)         | Retrieve a specific live item.                     |
      | <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge small blue subtle shrink-0">POST</span> [Create items](/data/reference/cms/collection-items/live-items/create-item-live)      | Create new live items.                             |
      | <span data-badge-type="http-method" data-http-method="PUT" class="fern-docs-badge small orange subtle shrink-0">PATCH</span> [Update items](/data/reference/cms/collection-items/live-items/update-items-live)   | Modify one or more live items.                     |
      | <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge small red subtle shrink-0">DELETE</span> [Unpublish items](/data/reference/cms/collection-items/live-items/delete-items-live) | Unpublish one or more live items.                  |
      | <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge small blue subtle shrink-0">POST</span> [Publish item](/data/reference/cms/collection-items/staged-items/publish-item)        | Publish one or more live items.                    |
    </Tab>
  </Tabs>
</Accordion>

***

## Start working with the CMS API

Below is an interactive tutorial that will walk you through the basic steps of getting a collection, listing a collection schema, listing collection items, and creating a collection item.

<iframe src="https://my-astro-app.victoria-l-plummer.workers.dev" />

## Bulk operations

For most CMS operations, the API provides both single-item and bulk endpoints. Bulk endpoints allow you to perform `CRUD` operations (Create, Read, Update, Delete) on multiple items in a single API call, which is more efficient for managing content at scale.

<Note>
  To keep the sidebar clean, we've hidden most single-item endpoints. However, they are fully functional and not deprecated. The tables below show both the visible and hidden endpoints for staged and live collection items.
</Note>

<Accordion title="Staged Items">
  | Operation   | Single Item Endpoint                                                                                                          | Bulk Endpoint                                                                                                                                         |
  | ----------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
  | **List**    | [`GET /collections/{collection_id}/items`](/data/v2.0.0/reference/cms/collection-items/staged-items/list-items)               | N/A                                                                                                                                                   |
  | **Get**     | [`GET /collections/{collection_id}/items/{item_id}`](/data/v2.0.0/reference/cms/collection-items/staged-items/get-item)       | N/A                                                                                                                                                   |
  | **Create**  | [`POST /collections/{collection_id}/items`](/data/v2.0.0/reference/cms/collection-items/staged-items/create-item)             | [`POST /collections/{collection_id}/items/bulk`](https://developers.webflow.com/data/v2.0.0/reference/cms/collection-items/staged-items/create-items) |
  | **Update**  | [`PATCH /collections/{collection_id}/items/{item_id}`](/data/v2.0.0/reference/cms/collection-items/staged-items/update-item)  | [`PATCH /collections/{collection_id}/items`](/data/v2.0.0/reference/cms/collection-items/staged-items/update-items)                                   |
  | **Delete**  | [`DELETE /collections/{collection_id}/items/{item_id}`](/data/v2.0.0/reference/cms/collection-items/staged-items/delete-item) | [`DELETE /collections/{collection_id}/items`](/data/v2.0.0/reference/cms/collection-items/staged-items/delete-items)                                  |
  | **Publish** | N/A                                                                                                                           | [`POST /collections/{collection_id}/items/publish`](/data/v2.0.0/reference/cms/collection-items/staged-items/publish-item)                            |
</Accordion>

<Accordion title="Live Items">
  | Operation     | Single Item Endpoint                                                                                                                                                 | Bulk Endpoint                                                                                                                |
  | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
  | **List**      | [`GET /collections/{collection_id}/items/live`](/data/v2.0.0/reference/cms/collection-items/live-items/list-items-live)                                              | N/A                                                                                                                          |
  | **Get**       | [`GET /collections/{collection_id}/items/{item_id}/live`](/data/v2.0.0/reference/cms/collection-items/live-items/get-item-live)                                      | N/A                                                                                                                          |
  | **Create**    | [`POST /collections/{collection_id}/items/live`](/data/v2.0.0/reference/cms/collection-items/live-items/create-item-live)                                            | N/A                                                                                                                          |
  | **Update**    | [`PATCH /collections/{collection_id}/items/{item_id}/live`](data/v2.0.0/reference/cms/collection-items/live-items/update-item-live)                                  | [`PATCH /collections/{collection_id}/items/live`](/data/v2.0.0/reference/cms/collection-items/live-items/update-items-live)  |
  | **Unpublish** | [`DELETE /collections/{collection_id}/items/{item_id}/live`](/https://developers.webflow.com/data/v2.0.0/reference/cms/collection-items/live-items/delete-item-live) | [`DELETE /collections/{collection_id}/items/live`](/data/v2.0.0/reference/cms/collection-items/live-items/delete-items-live) |
</Accordion>

## Webhooks

Use webhooks to receive real-time notifications about changes to your content. This enables automated workflows and integrations with other systems.

### Webhook events

[Create a webhook](/data/reference/webhooks/create) and subscribe to the following events for a given collection:

* [Collection item created](/data/reference/webhooks/events/collection-item-created)
* [Collection item updated](/data/reference/webhooks/events/collection-item-changed)
* [Collection item deleted](/data/reference/webhooks/events/collection-item-deleted)
* [Collection item published](/data/reference/webhooks/events/collection-item-published)
* [Collection item un-published](/data/reference/webhooks/events/collection-item-unpublished)

## Next Steps

<CardGroup cols={2}>
  <Card title="Getting started" href="/data/docs/working-with-the-cms/manage-collections-and-items">
    Create a collection, add fields, and create items. Includes pagination examples.
  </Card>

  <Card title="Working with webhooks" href="/data/docs/working-with-webhooks">
    Set up real-time notifications for content changes to build automated workflows.
  </Card>
</CardGroup>

---

# List Collections

GET https://api.webflow.com/v2/sites/{site_id}/collections

List of all Collections within a Site.

Required scope | `cms:read`


Reference: https://developers.webflow.com/data/reference/cms/collections/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Collections
  version: endpoint_collections.list
paths:
  /sites/{site_id}/collections:
    get:
      operationId: list
      summary: List Collections
      description: |
        List of all Collections within a Site.

        Required scope | `cms:read`
      tags:
        - - subpackage_collections
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/collections_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdCollectionsGetResponsesContentApplicationJsonSchemaCollectionsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Collection
        displayName:
          type: string
          description: Name given to the Collection
        singularName:
          type: string
          description: >-
            The name of one Item in Collection (e.g. ”Blog Post” if the
            Collection is called “Blog Posts”)
        slug:
          type: string
          description: Slug of Collection in Site URL structure
        createdOn:
          type: string
          format: date-time
          description: The date the collection was created
        lastUpdated:
          type: string
          format: date-time
          description: The date the collection was last updated
      required:
        - id
    collections_list_Response_200:
      type: object
      properties:
        collections:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCollectionsGetResponsesContentApplicationJsonSchemaCollectionsItems
          description: An array of Collections

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.list(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.list("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Collection Details

GET https://api.webflow.com/v2/collections/{collection_id}

Get the full details of a collection from its ID.

Required scope | `cms:read`


Reference: https://developers.webflow.com/data/reference/cms/collections/get

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Collection Details
  version: endpoint_collections.get
paths:
  /collections/{collection_id}:
    get:
      operationId: get
      summary: Get Collection Details
      description: |
        Get the full details of a collection from its ID.

        Required scope | `cms:read`
      tags:
        - - subpackage_collections
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/collections_get_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    CollectionsCollectionIdGetResponsesContentApplicationJsonSchemaFieldsItemsType:
      type: string
      enum:
        - value: Color
        - value: DateTime
        - value: Email
        - value: ExtFileRef
        - value: File
        - value: Image
        - value: Link
        - value: MultiImage
        - value: MultiReference
        - value: Number
        - value: Option
        - value: Phone
        - value: PlainText
        - value: Reference
        - value: RichText
        - value: Switch
        - value: VideoLink
    CollectionsCollectionIdGetResponsesContentApplicationJsonSchemaFieldsItemsValidationsAdditionalProperties:
      oneOf:
        - type: string
        - type: number
          format: double
        - type: boolean
        - type: integer
        - type: object
          additionalProperties:
            description: Any type
    CollectionsCollectionIdGetResponsesContentApplicationJsonSchemaFieldsItemsValidations:
      type: object
      properties:
        additionalProperties:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdGetResponsesContentApplicationJsonSchemaFieldsItemsValidationsAdditionalProperties
    CollectionsCollectionIdGetResponsesContentApplicationJsonSchemaFieldsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        isEditable:
          type: boolean
          description: Define whether the field is editable
        type:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdGetResponsesContentApplicationJsonSchemaFieldsItemsType
          description: Choose these appropriate field type for your collection data
        slug:
          type: string
          description: >-
            Slug of Field in Site URL structure. Slugs should be all lowercase
            with no spaces. Any spaces will be converted to "-."
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
        validations:
          oneOf:
            - $ref: >-
                #/components/schemas/CollectionsCollectionIdGetResponsesContentApplicationJsonSchemaFieldsItemsValidations
            - type: 'null'
          description: The validations for the field
      required:
        - id
        - isRequired
        - type
        - displayName
    collections_get_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Collection
        displayName:
          type: string
          description: Name given to the Collection
        singularName:
          type: string
          description: >-
            The name of one Item in Collection (e.g. ”Blog Post” if the
            Collection is called “Blog Posts”)
        slug:
          type: string
          description: Slug of Collection in Site URL structure
        createdOn:
          type: string
          format: date-time
          description: The date the collection was created
        lastUpdated:
          type: string
          format: date-time
          description: The date the collection was last updated
        fields:
          type: array
          items:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdGetResponsesContentApplicationJsonSchemaFieldsItems
          description: The list of fields in the Collection
      required:
        - id
        - displayName
        - singularName
        - fields

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.get(
    collection_id="580e63fc8c9a982ac9b8b745",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.get("580e63fc8c9a982ac9b8b745");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Create Collection

POST https://api.webflow.com/v2/sites/{site_id}/collections
Content-Type: application/json

Create a Collection for a site with collection fields.

Each collection includes the required _name_ and _slug_ fields, which are generated automatically. You can update the `displayName` of these fields, but the slug for them cannot be changed. Fields slugs are automatically converted to lowercase. Spaces in slugs are replaced with hyphens.

Required scope | `cms:write`


Reference: https://developers.webflow.com/data/reference/cms/collections/create

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Create Collection
  version: endpoint_collections.create
paths:
  /sites/{site_id}/collections:
    post:
      operationId: create
      summary: Create Collection
      description: >
        Create a Collection for a site with collection fields.


        Each collection includes the required _name_ and _slug_ fields, which
        are generated automatically. You can update the `displayName` of these
        fields, but the slug for them cannot be changed. Fields slugs are
        automatically converted to lowercase. Spaces in slugs are replaced with
        hyphens.


        Required scope | `cms:write`
      tags:
        - - subpackage_collections
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/collections_create_Response_200'
        '400':
          description: Validation failure
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: Collection already exists
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: >-
          Pass the Name of the collection, as well as the singular name of each
          item in the collection.
        content:
          application/json:
            schema:
              type: object
              properties:
                displayName:
                  type: string
                  description: >-
                    Name of the collection. Each collection name must be
                    distinct.
                singularName:
                  type: string
                  description: Singular name of each item.
                slug:
                  type: string
                  description: Part of a URL that identifier
                fields:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItems
                  description: An array of custom fields to add to the collection
              required:
                - displayName
                - singularName
components:
  schemas:
    SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf0Type:
      type: string
      enum:
        - value: Color
        - value: DateTime
        - value: Email
        - value: File
        - value: Image
        - value: Link
        - value: MultiImage
        - value: Number
        - value: Phone
        - value: PlainText
        - value: RichText
        - value: Switch
        - value: VideoLink
    SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItems0:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isEditable:
          type: boolean
          description: Define whether the field is editable
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf0Type
          description: Choose these appropriate field type for your collection data
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
      required:
        - type
        - displayName
    SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf1Type:
      type: string
      enum:
        - value: Option
    SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf1MetadataOptionsItems:
      type: object
      properties:
        name:
          type: string
          description: The name of the option
        id:
          type: string
          description: The unique identifier of the option
      required:
        - name
    SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf1Metadata:
      type: object
      properties:
        options:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf1MetadataOptionsItems
          description: The option values for the Option field.
      required:
        - options
    SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItems1:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isEditable:
          type: boolean
          description: Define whether the field is editable
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf1Type
          description: >-
            The [Option field
            type](/data/reference/field-types-item-values#option)
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
        metadata:
          $ref: >-
            #/components/schemas/SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf1Metadata
          description: The metadata for the Option field.
      required:
        - type
        - displayName
        - metadata
    SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf2Type:
      type: string
      enum:
        - value: MultiReference
        - value: Reference
    SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf2Metadata:
      type: object
      properties:
        collectionId:
          type: string
          description: The unique identifier of the collection
      required:
        - collectionId
    SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItems2:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isEditable:
          type: boolean
          description: Define whether the field is editable
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf2Type
          description: Choose these appropriate field type for your collection data
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
        metadata:
          $ref: >-
            #/components/schemas/SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItemsOneOf2Metadata
          description: >-
            The collectionId for the referenced collection. Only applicable for
            Reference and MultiReference fields.
      required:
        - type
        - displayName
        - metadata
    SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItems:
      oneOf:
        - $ref: >-
            #/components/schemas/SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItems0
        - $ref: >-
            #/components/schemas/SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItems1
        - $ref: >-
            #/components/schemas/SitesSiteIdCollectionsPostRequestBodyContentApplicationJsonSchemaFieldsItems2
    SitesSiteIdCollectionsPostResponsesContentApplicationJsonSchemaFieldsItemsType:
      type: string
      enum:
        - value: Color
        - value: DateTime
        - value: Email
        - value: ExtFileRef
        - value: File
        - value: Image
        - value: Link
        - value: MultiImage
        - value: MultiReference
        - value: Number
        - value: Option
        - value: Phone
        - value: PlainText
        - value: Reference
        - value: RichText
        - value: Switch
        - value: VideoLink
    SitesSiteIdCollectionsPostResponsesContentApplicationJsonSchemaFieldsItemsValidationsAdditionalProperties:
      oneOf:
        - type: string
        - type: number
          format: double
        - type: boolean
        - type: integer
        - type: object
          additionalProperties:
            description: Any type
    SitesSiteIdCollectionsPostResponsesContentApplicationJsonSchemaFieldsItemsValidations:
      type: object
      properties:
        additionalProperties:
          $ref: >-
            #/components/schemas/SitesSiteIdCollectionsPostResponsesContentApplicationJsonSchemaFieldsItemsValidationsAdditionalProperties
    SitesSiteIdCollectionsPostResponsesContentApplicationJsonSchemaFieldsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        isEditable:
          type: boolean
          description: Define whether the field is editable
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdCollectionsPostResponsesContentApplicationJsonSchemaFieldsItemsType
          description: Choose these appropriate field type for your collection data
        slug:
          type: string
          description: >-
            Slug of Field in Site URL structure. Slugs should be all lowercase
            with no spaces. Any spaces will be converted to "-."
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
        validations:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdCollectionsPostResponsesContentApplicationJsonSchemaFieldsItemsValidations
            - type: 'null'
          description: The validations for the field
      required:
        - id
        - isRequired
        - type
        - displayName
    collections_create_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Collection
        displayName:
          type: string
          description: Name given to the Collection
        singularName:
          type: string
          description: >-
            The name of one Item in Collection (e.g. ”Blog Post” if the
            Collection is called “Blog Posts”)
        slug:
          type: string
          description: Slug of Collection in Site URL structure
        createdOn:
          type: string
          format: date-time
          description: The date the collection was created
        lastUpdated:
          type: string
          format: date-time
          description: The date the collection was last updated
        fields:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCollectionsPostResponsesContentApplicationJsonSchemaFieldsItems
          description: The list of fields in the Collection
      required:
        - id
        - displayName
        - singularName
        - fields

```

## SDK Code Examples

```python
from webflow import ReferenceField, ReferenceFieldMetadata, StaticField, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.create(
    site_id="580e63e98c9a982ac9b8b741",
    display_name="Blog Posts",
    singular_name="Blog Post",
    slug="posts",
    fields=[
        StaticField(
            is_required=True,
            type="PlainText",
            display_name="Title",
            help_text="The title of the blog post",
        ),
        StaticField(
            is_required=True,
            type="RichText",
            display_name="Content",
            help_text="The content of the blog post",
        ),
        ReferenceField(
            is_required=True,
            type="Reference",
            display_name="Author",
            help_text="The author of the blog post",
            metadata=ReferenceFieldMetadata(
                collection_id="23cc2d952d4e4631ffd4345d2743db4e",
            ),
        ),
    ],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.create("580e63e98c9a982ac9b8b741", {
    displayName: "Blog Posts",
    singularName: "Blog Post",
    slug: "posts",
    fields: [{
            isRequired: true,
            type: "PlainText",
            displayName: "Title",
            helpText: "The title of the blog post"
        }, {
            isRequired: true,
            type: "RichText",
            displayName: "Content",
            helpText: "The content of the blog post"
        }, {
            isRequired: true,
            type: "Reference",
            displayName: "Author",
            helpText: "The author of the blog post",
            metadata: {
                collectionId: "23cc2d952d4e4631ffd4345d2743db4e"
            }
        }]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections"

	payload := strings.NewReader("{\n  \"displayName\": \"Blog Posts\",\n  \"singularName\": \"Blog Post\",\n  \"slug\": \"posts\",\n  \"fields\": [\n    {\n      \"isRequired\": true,\n      \"type\": \"PlainText\",\n      \"displayName\": \"Title\",\n      \"helpText\": \"The title of the blog post\",\n      \"slug\": \"title\"\n    },\n    {\n      \"isRequired\": true,\n      \"type\": \"RichText\",\n      \"displayName\": \"Content\",\n      \"helpText\": \"The content of the blog post\",\n      \"slug\": \"content\"\n    },\n    {\n      \"isRequired\": true,\n      \"type\": \"Reference\",\n      \"displayName\": \"Author\",\n      \"helpText\": \"The author of the blog post\",\n      \"metadata\": {\n        \"collectionId\": \"23cc2d952d4e4631ffd4345d2743db4e\"\n      },\n      \"slug\": \"author\"\n    }\n  ]\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"displayName\": \"Blog Posts\",\n  \"singularName\": \"Blog Post\",\n  \"slug\": \"posts\",\n  \"fields\": [\n    {\n      \"isRequired\": true,\n      \"type\": \"PlainText\",\n      \"displayName\": \"Title\",\n      \"helpText\": \"The title of the blog post\",\n      \"slug\": \"title\"\n    },\n    {\n      \"isRequired\": true,\n      \"type\": \"RichText\",\n      \"displayName\": \"Content\",\n      \"helpText\": \"The content of the blog post\",\n      \"slug\": \"content\"\n    },\n    {\n      \"isRequired\": true,\n      \"type\": \"Reference\",\n      \"displayName\": \"Author\",\n      \"helpText\": \"The author of the blog post\",\n      \"metadata\": {\n        \"collectionId\": \"23cc2d952d4e4631ffd4345d2743db4e\"\n      },\n      \"slug\": \"author\"\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"displayName\": \"Blog Posts\",\n  \"singularName\": \"Blog Post\",\n  \"slug\": \"posts\",\n  \"fields\": [\n    {\n      \"isRequired\": true,\n      \"type\": \"PlainText\",\n      \"displayName\": \"Title\",\n      \"helpText\": \"The title of the blog post\",\n      \"slug\": \"title\"\n    },\n    {\n      \"isRequired\": true,\n      \"type\": \"RichText\",\n      \"displayName\": \"Content\",\n      \"helpText\": \"The content of the blog post\",\n      \"slug\": \"content\"\n    },\n    {\n      \"isRequired\": true,\n      \"type\": \"Reference\",\n      \"displayName\": \"Author\",\n      \"helpText\": \"The author of the blog post\",\n      \"metadata\": {\n        \"collectionId\": \"23cc2d952d4e4631ffd4345d2743db4e\"\n      },\n      \"slug\": \"author\"\n    }\n  ]\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections', [
  'body' => '{
  "displayName": "Blog Posts",
  "singularName": "Blog Post",
  "slug": "posts",
  "fields": [
    {
      "isRequired": true,
      "type": "PlainText",
      "displayName": "Title",
      "helpText": "The title of the blog post",
      "slug": "title"
    },
    {
      "isRequired": true,
      "type": "RichText",
      "displayName": "Content",
      "helpText": "The content of the blog post",
      "slug": "content"
    },
    {
      "isRequired": true,
      "type": "Reference",
      "displayName": "Author",
      "helpText": "The author of the blog post",
      "metadata": {
        "collectionId": "23cc2d952d4e4631ffd4345d2743db4e"
      },
      "slug": "author"
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"displayName\": \"Blog Posts\",\n  \"singularName\": \"Blog Post\",\n  \"slug\": \"posts\",\n  \"fields\": [\n    {\n      \"isRequired\": true,\n      \"type\": \"PlainText\",\n      \"displayName\": \"Title\",\n      \"helpText\": \"The title of the blog post\",\n      \"slug\": \"title\"\n    },\n    {\n      \"isRequired\": true,\n      \"type\": \"RichText\",\n      \"displayName\": \"Content\",\n      \"helpText\": \"The content of the blog post\",\n      \"slug\": \"content\"\n    },\n    {\n      \"isRequired\": true,\n      \"type\": \"Reference\",\n      \"displayName\": \"Author\",\n      \"helpText\": \"The author of the blog post\",\n      \"metadata\": {\n        \"collectionId\": \"23cc2d952d4e4631ffd4345d2743db4e\"\n      },\n      \"slug\": \"author\"\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "displayName": "Blog Posts",
  "singularName": "Blog Post",
  "slug": "posts",
  "fields": [
    [
      "isRequired": true,
      "type": "PlainText",
      "displayName": "Title",
      "helpText": "The title of the blog post",
      "slug": "title"
    ],
    [
      "isRequired": true,
      "type": "RichText",
      "displayName": "Content",
      "helpText": "The content of the blog post",
      "slug": "content"
    ],
    [
      "isRequired": true,
      "type": "Reference",
      "displayName": "Author",
      "helpText": "The author of the blog post",
      "metadata": ["collectionId": "23cc2d952d4e4631ffd4345d2743db4e"],
      "slug": "author"
    ]
  ]
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/collections")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete Collection

DELETE https://api.webflow.com/v2/collections/{collection_id}

Delete a collection using its ID.

Required scope | `cms:write`


Reference: https://developers.webflow.com/data/reference/cms/collections/delete

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete Collection
  version: endpoint_collections.delete
paths:
  /collections/{collection_id}:
    delete:
      operationId: delete
      summary: Delete Collection
      description: |
        Delete a collection using its ID.

        Required scope | `cms:write`
      tags:
        - - subpackage_collections
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Request was successful. No Content is returned.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/collections_delete_Response_204'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    collections_delete_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.delete(
    collection_id="580e63fc8c9a982ac9b8b745",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.delete("580e63fc8c9a982ac9b8b745");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745"

	req, _ := http.NewRequest("DELETE", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Create field

POST https://api.webflow.com/v2/collections/{collection_id}/fields
Content-Type: application/json

Create a custom field in a collection.

Field validation is currently not available through the API.

Bulk creation of fields is not supported with this endpoint. To add multiple fields at once, include them when you [create the collection.](/data/v2.0.0/reference/cms/collections/create)

Required scope | `cms:write`


Reference: https://developers.webflow.com/data/reference/cms/collection-fields/create

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Create Collection Field
  version: endpoint_collections/fields.create
paths:
  /collections/{collection_id}/fields:
    post:
      operationId: create
      summary: Create Collection Field
      description: >
        Create a custom field in a collection.


        Field validation is currently not available through the API.


        Bulk creation of fields is not supported with this endpoint. To add
        multiple fields at once, include them when you [create the
        collection.](/data/v2.0.0/reference/cms/collections/create)


        Required scope | `cms:write`
      tags:
        - - subpackage_collections
          - subpackage_collections/fields
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/collections_fields_create_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: Collection already exists
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: The field to create
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/collections_fields_create_Request'
components:
  schemas:
    CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf0Type:
      type: string
      enum:
        - value: Color
        - value: DateTime
        - value: Email
        - value: File
        - value: Image
        - value: Link
        - value: MultiImage
        - value: Number
        - value: Phone
        - value: PlainText
        - value: RichText
        - value: Switch
        - value: VideoLink
    CollectionsFieldsCreateRequest0:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isEditable:
          type: boolean
          description: Define whether the field is editable
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        type:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf0Type
          description: Choose these appropriate field type for your collection data
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
      required:
        - type
        - displayName
    CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf1Type:
      type: string
      enum:
        - value: Option
    CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf1MetadataOptionsItems:
      type: object
      properties:
        name:
          type: string
          description: The name of the option
        id:
          type: string
          description: The unique identifier of the option
      required:
        - name
    CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf1Metadata:
      type: object
      properties:
        options:
          type: array
          items:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf1MetadataOptionsItems
          description: The option values for the Option field.
      required:
        - options
    CollectionsFieldsCreateRequest1:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isEditable:
          type: boolean
          description: Define whether the field is editable
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        type:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf1Type
          description: >-
            The [Option field
            type](/data/reference/field-types-item-values#option)
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
        metadata:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf1Metadata
          description: The metadata for the Option field.
      required:
        - type
        - displayName
        - metadata
    CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf2Type:
      type: string
      enum:
        - value: MultiReference
        - value: Reference
    CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf2Metadata:
      type: object
      properties:
        collectionId:
          type: string
          description: The unique identifier of the collection
      required:
        - collectionId
    CollectionsFieldsCreateRequest2:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isEditable:
          type: boolean
          description: Define whether the field is editable
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        type:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf2Type
          description: Choose these appropriate field type for your collection data
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
        metadata:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsPostRequestBodyContentApplicationJsonSchemaOneOf2Metadata
          description: >-
            The collectionId for the referenced collection. Only applicable for
            Reference and MultiReference fields.
      required:
        - type
        - displayName
        - metadata
    collections_fields_create_Request:
      oneOf:
        - $ref: '#/components/schemas/CollectionsFieldsCreateRequest0'
        - $ref: '#/components/schemas/CollectionsFieldsCreateRequest1'
        - $ref: '#/components/schemas/CollectionsFieldsCreateRequest2'
    CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf0Type:
      type: string
      enum:
        - value: Color
        - value: DateTime
        - value: Email
        - value: File
        - value: Image
        - value: Link
        - value: MultiImage
        - value: Number
        - value: Phone
        - value: PlainText
        - value: RichText
        - value: Switch
        - value: VideoLink
    CollectionsFieldsCreateResponse2000:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isEditable:
          type: boolean
          description: Define whether the field is editable
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        type:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf0Type
          description: Choose these appropriate field type for your collection data
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
      required:
        - type
        - displayName
    CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf1Type:
      type: string
      enum:
        - value: Option
    CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf1MetadataOptionsItems:
      type: object
      properties:
        name:
          type: string
          description: The name of the option
        id:
          type: string
          description: The unique identifier of the option
      required:
        - name
    CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf1Metadata:
      type: object
      properties:
        options:
          type: array
          items:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf1MetadataOptionsItems
          description: The option values for the Option field.
      required:
        - options
    CollectionsFieldsCreateResponse2001:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isEditable:
          type: boolean
          description: Define whether the field is editable
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        type:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf1Type
          description: >-
            The [Option field
            type](/data/reference/field-types-item-values#option)
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
        metadata:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf1Metadata
          description: The metadata for the Option field.
      required:
        - type
        - displayName
        - metadata
    CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf2Type:
      type: string
      enum:
        - value: MultiReference
        - value: Reference
    CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf2Metadata:
      type: object
      properties:
        collectionId:
          type: string
          description: The unique identifier of the collection
      required:
        - collectionId
    CollectionsFieldsCreateResponse2002:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isEditable:
          type: boolean
          description: Define whether the field is editable
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        type:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf2Type
          description: Choose these appropriate field type for your collection data
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
        metadata:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsPostResponsesContentApplicationJsonSchemaOneOf2Metadata
          description: >-
            The collectionId for the referenced collection. Only applicable for
            Reference and MultiReference fields.
      required:
        - type
        - displayName
        - metadata
    collections_fields_create_Response_200:
      oneOf:
        - $ref: '#/components/schemas/CollectionsFieldsCreateResponse2000'
        - $ref: '#/components/schemas/CollectionsFieldsCreateResponse2001'
        - $ref: '#/components/schemas/CollectionsFieldsCreateResponse2002'

```

## SDK Code Examples

```python StaticField
from webflow import StaticField, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.fields.create(
    collection_id="580e63fc8c9a982ac9b8b745",
    request=StaticField(
        id="562ac0395358780a1f5e6fbc",
        is_editable=True,
        is_required=False,
        type="RichText",
        display_name="Post Body",
        help_text="Add the body of your post here",
    ),
)

```

```typescript StaticField
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.fields.create("580e63fc8c9a982ac9b8b745", {
    id: "562ac0395358780a1f5e6fbc",
    isEditable: true,
    isRequired: false,
    type: "RichText",
    displayName: "Post Body",
    helpText: "Add the body of your post here"
});

```

```go StaticField
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields"

	payload := strings.NewReader("{\n  \"isRequired\": false,\n  \"type\": \"RichText\",\n  \"displayName\": \"Post Body\",\n  \"helpText\": \"Add the body of your post here\",\n  \"id\": \"562ac0395358780a1f5e6fbc\",\n  \"isEditable\": true\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby StaticField
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"isRequired\": false,\n  \"type\": \"RichText\",\n  \"displayName\": \"Post Body\",\n  \"helpText\": \"Add the body of your post here\",\n  \"id\": \"562ac0395358780a1f5e6fbc\",\n  \"isEditable\": true\n}"

response = http.request(request)
puts response.read_body
```

```java StaticField
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"isRequired\": false,\n  \"type\": \"RichText\",\n  \"displayName\": \"Post Body\",\n  \"helpText\": \"Add the body of your post here\",\n  \"id\": \"562ac0395358780a1f5e6fbc\",\n  \"isEditable\": true\n}")
  .asString();
```

```php StaticField
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields', [
  'body' => '{
  "isRequired": false,
  "type": "RichText",
  "displayName": "Post Body",
  "helpText": "Add the body of your post here",
  "id": "562ac0395358780a1f5e6fbc",
  "isEditable": true
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp StaticField
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"isRequired\": false,\n  \"type\": \"RichText\",\n  \"displayName\": \"Post Body\",\n  \"helpText\": \"Add the body of your post here\",\n  \"id\": \"562ac0395358780a1f5e6fbc\",\n  \"isEditable\": true\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift StaticField
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "isRequired": false,
  "type": "RichText",
  "displayName": "Post Body",
  "helpText": "Add the body of your post here",
  "id": "562ac0395358780a1f5e6fbc",
  "isEditable": true
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python OptionField
from webflow import Metadata, MetadataOptionsItem, OptionField, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.fields.create(
    collection_id="580e63fc8c9a982ac9b8b745",
    request=OptionField(
        id="562ac0395358780a1f5e6fbc",
        is_editable=True,
        is_required=False,
        display_name="Post Type",
        help_text="Add the body of your post here",
        metadata=Metadata(
            options=[
                MetadataOptionsItem(
                    name="Feature",
                ),
                MetadataOptionsItem(
                    name="News",
                ),
                MetadataOptionsItem(
                    name="Product Highlight",
                ),
            ],
        ),
    ),
)

```

```typescript OptionField
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.fields.create("580e63fc8c9a982ac9b8b745", {
    id: "562ac0395358780a1f5e6fbc",
    isEditable: true,
    isRequired: false,
    type: "Option",
    displayName: "Post Type",
    helpText: "Add the body of your post here",
    metadata: {
        options: [{
                name: "Feature"
            }, {
                name: "News"
            }, {
                name: "Product Highlight"
            }]
    }
});

```

```go OptionField
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields"

	payload := strings.NewReader("{\n  \"isRequired\": false,\n  \"type\": \"Option\",\n  \"displayName\": \"Post Type\",\n  \"helpText\": \"Add the body of your post here\",\n  \"metadata\": {\n    \"options\": [\n      {\n        \"name\": \"Feature\"\n      },\n      {\n        \"name\": \"News\"\n      },\n      {\n        \"name\": \"Product Highlight\"\n      }\n    ]\n  },\n  \"id\": \"562ac0395358780a1f5e6fbc\",\n  \"isEditable\": true\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby OptionField
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"isRequired\": false,\n  \"type\": \"Option\",\n  \"displayName\": \"Post Type\",\n  \"helpText\": \"Add the body of your post here\",\n  \"metadata\": {\n    \"options\": [\n      {\n        \"name\": \"Feature\"\n      },\n      {\n        \"name\": \"News\"\n      },\n      {\n        \"name\": \"Product Highlight\"\n      }\n    ]\n  },\n  \"id\": \"562ac0395358780a1f5e6fbc\",\n  \"isEditable\": true\n}"

response = http.request(request)
puts response.read_body
```

```java OptionField
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"isRequired\": false,\n  \"type\": \"Option\",\n  \"displayName\": \"Post Type\",\n  \"helpText\": \"Add the body of your post here\",\n  \"metadata\": {\n    \"options\": [\n      {\n        \"name\": \"Feature\"\n      },\n      {\n        \"name\": \"News\"\n      },\n      {\n        \"name\": \"Product Highlight\"\n      }\n    ]\n  },\n  \"id\": \"562ac0395358780a1f5e6fbc\",\n  \"isEditable\": true\n}")
  .asString();
```

```php OptionField
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields', [
  'body' => '{
  "isRequired": false,
  "type": "Option",
  "displayName": "Post Type",
  "helpText": "Add the body of your post here",
  "metadata": {
    "options": [
      {
        "name": "Feature"
      },
      {
        "name": "News"
      },
      {
        "name": "Product Highlight"
      }
    ]
  },
  "id": "562ac0395358780a1f5e6fbc",
  "isEditable": true
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp OptionField
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"isRequired\": false,\n  \"type\": \"Option\",\n  \"displayName\": \"Post Type\",\n  \"helpText\": \"Add the body of your post here\",\n  \"metadata\": {\n    \"options\": [\n      {\n        \"name\": \"Feature\"\n      },\n      {\n        \"name\": \"News\"\n      },\n      {\n        \"name\": \"Product Highlight\"\n      }\n    ]\n  },\n  \"id\": \"562ac0395358780a1f5e6fbc\",\n  \"isEditable\": true\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift OptionField
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "isRequired": false,
  "type": "Option",
  "displayName": "Post Type",
  "helpText": "Add the body of your post here",
  "metadata": ["options": [["name": "Feature"], ["name": "News"], ["name": "Product Highlight"]]],
  "id": "562ac0395358780a1f5e6fbc",
  "isEditable": true
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python ReferenceField
from webflow import ReferenceField, ReferenceFieldMetadata, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.fields.create(
    collection_id="580e63fc8c9a982ac9b8b745",
    request=ReferenceField(
        id="562ac0395358780a1f5e6fbd",
        is_editable=True,
        is_required=False,
        type="Reference",
        display_name="Author",
        help_text="Add the post author here",
        metadata=ReferenceFieldMetadata(
            collection_id="63692ab61fb2852f582ba8f5",
        ),
    ),
)

```

```typescript ReferenceField
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.fields.create("580e63fc8c9a982ac9b8b745", {
    id: "562ac0395358780a1f5e6fbd",
    isEditable: true,
    isRequired: false,
    type: "Reference",
    displayName: "Author",
    helpText: "Add the post author here",
    metadata: {
        collectionId: "63692ab61fb2852f582ba8f5"
    }
});

```

```go ReferenceField
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields"

	payload := strings.NewReader("{\n  \"isRequired\": false,\n  \"type\": \"Reference\",\n  \"displayName\": \"Author\",\n  \"helpText\": \"Add the post author here\",\n  \"metadata\": {\n    \"collectionId\": \"63692ab61fb2852f582ba8f5\"\n  },\n  \"id\": \"562ac0395358780a1f5e6fbd\",\n  \"isEditable\": true\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby ReferenceField
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"isRequired\": false,\n  \"type\": \"Reference\",\n  \"displayName\": \"Author\",\n  \"helpText\": \"Add the post author here\",\n  \"metadata\": {\n    \"collectionId\": \"63692ab61fb2852f582ba8f5\"\n  },\n  \"id\": \"562ac0395358780a1f5e6fbd\",\n  \"isEditable\": true\n}"

response = http.request(request)
puts response.read_body
```

```java ReferenceField
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"isRequired\": false,\n  \"type\": \"Reference\",\n  \"displayName\": \"Author\",\n  \"helpText\": \"Add the post author here\",\n  \"metadata\": {\n    \"collectionId\": \"63692ab61fb2852f582ba8f5\"\n  },\n  \"id\": \"562ac0395358780a1f5e6fbd\",\n  \"isEditable\": true\n}")
  .asString();
```

```php ReferenceField
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields', [
  'body' => '{
  "isRequired": false,
  "type": "Reference",
  "displayName": "Author",
  "helpText": "Add the post author here",
  "metadata": {
    "collectionId": "63692ab61fb2852f582ba8f5"
  },
  "id": "562ac0395358780a1f5e6fbd",
  "isEditable": true
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp ReferenceField
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"isRequired\": false,\n  \"type\": \"Reference\",\n  \"displayName\": \"Author\",\n  \"helpText\": \"Add the post author here\",\n  \"metadata\": {\n    \"collectionId\": \"63692ab61fb2852f582ba8f5\"\n  },\n  \"id\": \"562ac0395358780a1f5e6fbd\",\n  \"isEditable\": true\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift ReferenceField
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "isRequired": false,
  "type": "Reference",
  "displayName": "Author",
  "helpText": "Add the post author here",
  "metadata": ["collectionId": "63692ab61fb2852f582ba8f5"],
  "id": "562ac0395358780a1f5e6fbd",
  "isEditable": true
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update field

PATCH https://api.webflow.com/v2/collections/{collection_id}/fields/{field_id}
Content-Type: application/json

Update a custom field in a collection.

Required scope | `cms:write`


Reference: https://developers.webflow.com/data/reference/cms/collection-fields/update

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Collection Field
  version: endpoint_collections/fields.update
paths:
  /collections/{collection_id}/fields/{field_id}:
    patch:
      operationId: update
      summary: Update Collection Field
      description: |
        Update a custom field in a collection.

        Required scope | `cms:write`
      tags:
        - - subpackage_collections
          - subpackage_collections/fields
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: field_id
          in: path
          description: Unique identifier for a Field in a collection
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/collections_fields_update_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: The field details to update
        content:
          application/json:
            schema:
              type: object
              properties:
                isRequired:
                  type: boolean
                  description: Define whether a field is required in a collection
                displayName:
                  type: string
                  description: The name of a field
                helpText:
                  type: string
                  description: Additional text to help anyone filling out this field
components:
  schemas:
    CollectionsCollectionIdFieldsFieldIdPatchResponsesContentApplicationJsonSchemaType:
      type: string
      enum:
        - value: Color
        - value: DateTime
        - value: Email
        - value: ExtFileRef
        - value: File
        - value: Image
        - value: Link
        - value: MultiImage
        - value: MultiReference
        - value: Number
        - value: Option
        - value: Phone
        - value: PlainText
        - value: Reference
        - value: RichText
        - value: Switch
        - value: VideoLink
    CollectionsCollectionIdFieldsFieldIdPatchResponsesContentApplicationJsonSchemaValidationsAdditionalProperties:
      oneOf:
        - type: string
        - type: number
          format: double
        - type: boolean
        - type: integer
        - type: object
          additionalProperties:
            description: Any type
    CollectionsCollectionIdFieldsFieldIdPatchResponsesContentApplicationJsonSchemaValidations:
      type: object
      properties:
        additionalProperties:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsFieldIdPatchResponsesContentApplicationJsonSchemaValidationsAdditionalProperties
    collections_fields_update_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a Field
        isRequired:
          type: boolean
          description: define whether a field is required in a collection
        isEditable:
          type: boolean
          description: Define whether the field is editable
        type:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdFieldsFieldIdPatchResponsesContentApplicationJsonSchemaType
          description: Choose these appropriate field type for your collection data
        slug:
          type: string
          description: >-
            Slug of Field in Site URL structure. Slugs should be all lowercase
            with no spaces. Any spaces will be converted to "-."
        displayName:
          type: string
          description: The name of a field
        helpText:
          type: string
          description: Additional text to help anyone filling out this field
        validations:
          oneOf:
            - $ref: >-
                #/components/schemas/CollectionsCollectionIdFieldsFieldIdPatchResponsesContentApplicationJsonSchemaValidations
            - type: 'null'
          description: The validations for the field
      required:
        - id
        - isRequired
        - type
        - displayName

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.fields.update(
    collection_id="580e63fc8c9a982ac9b8b745",
    field_id="580e63fc8c9a982ac9b8b745",
    is_required=False,
    display_name="Post Body",
    help_text="Add the body of your post here",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.fields.update("580e63fc8c9a982ac9b8b745", "580e63fc8c9a982ac9b8b745", {
    isRequired: false,
    displayName: "Post Body",
    helpText: "Add the body of your post here"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745"

	payload := strings.NewReader("{\n  \"isRequired\": false,\n  \"displayName\": \"Post Body\",\n  \"helpText\": \"Add the body of your post here\"\n}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"isRequired\": false,\n  \"displayName\": \"Post Body\",\n  \"helpText\": \"Add the body of your post here\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"isRequired\": false,\n  \"displayName\": \"Post Body\",\n  \"helpText\": \"Add the body of your post here\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745', [
  'body' => '{
  "isRequired": false,
  "displayName": "Post Body",
  "helpText": "Add the body of your post here"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"isRequired\": false,\n  \"displayName\": \"Post Body\",\n  \"helpText\": \"Add the body of your post here\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "isRequired": false,
  "displayName": "Post Body",
  "helpText": "Add the body of your post here"
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete field

DELETE https://api.webflow.com/v2/collections/{collection_id}/fields/{field_id}

Delete a custom field in a collection. This endpoint does not currently support bulk deletion.

Required scope | `cms:write`


Reference: https://developers.webflow.com/data/reference/cms/collection-fields/delete

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete Collection Field
  version: endpoint_collections/fields.delete
paths:
  /collections/{collection_id}/fields/{field_id}:
    delete:
      operationId: delete
      summary: Delete Collection Field
      description: >
        Delete a custom field in a collection. This endpoint does not currently
        support bulk deletion.


        Required scope | `cms:write`
      tags:
        - - subpackage_collections
          - subpackage_collections/fields
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: field_id
          in: path
          description: Unique identifier for a Field in a collection
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Request was successful. No Content is returned.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/collections_fields_delete_Response_204'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    collections_fields_delete_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.fields.delete(
    collection_id="580e63fc8c9a982ac9b8b745",
    field_id="580e63fc8c9a982ac9b8b745",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.fields.delete("580e63fc8c9a982ac9b8b745", "580e63fc8c9a982ac9b8b745");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745"

	req, _ := http.NewRequest("DELETE", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/fields/580e63fc8c9a982ac9b8b745")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Field Types & Item Values

> A reference for all Webflow CMS field types and the value formats they accept.

This page is a reference for all Webflow CMS field types and the value formats they accept. Use it to:

* Understand each field type’s purpose and behavior
* Learn how to format values when creating or updating items via the API

To retrieve the specific fields used in a collection, call the [Get Collection](/data/reference/cms/collections/get) endpoint.

<Note title="Field Type Names">
  Some field types may use slightly different names in the Webflow UI. This document uses the API name for each field type.
</Note>

## [Plain Text](https://university.webflow.com/lesson/plain-text-field)

Stores text without formatting.

<Tabs>
  <Tab title="Value Format">
    ```
    string
    ```
  </Tab>

  <Tab title="Example">
    ```
    "Always know where your towel is."
    ```
  </Tab>
</Tabs>

## [Rich Text](https://university.webflow.com/lesson/rich-text-field)

Stores long-form text with HTML formatting.

<Tabs>
  <Tab title="Value Format">
    ```
    string
    ```
  </Tab>

  <Tab title="Example">
    ```html
    "<p>A small, blue-green planet orbiting an unregarded yellow sun in the uncharted backwaters of the Galaxy's western spiral arm.</p>
    <h3>Notable features</h3>
    <blockquote>It has a population of humans, who are mostly harmless. They have developed digital watches and are known for their ability to make tea.</blockquote>"
    ```
  </Tab>
</Tabs>

<Warning title="Code Blocks in Rich Text Fields">
  The API doesn't currently support code blocks in Rich Text fields. Passing code blocks will result in an empty string.
</Warning>

## [ImageRef / Image](https://university.webflow.com/lesson/image-field)

Stores a single image. Images must be hosted on a publicly accessible URL to be uploaded via the API. The maximum file size for images is 4MB.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Read Value">
    <CodeBlocks>
      ```javascript Format
      {
        "fileId": "string",
        "url": "string",
        "alt": "string" (optional)
      }
      ```

      ```javascript Example
      {
        "fileId": "6390ba25bfe63b0cca1dd136",
        "url": "https://.../image.jpg",
        "alt": "Marvin the Paranoid Android"
      }
      ```
    </CodeBlocks>
  </Tab>

  <Tab title="Write Value">
    To upload a new image, provide an object containing a `url`.

    <CodeBlocks>
      ```javascript title="New Upload"
      {
        "myImageField": {
          "url": "https://.../image.png",
          "alt": "Finn and Jake fist bumping"
        }
      }
      ```
    </CodeBlocks>
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

## [Multi-Image](https://university.webflow.com/lesson/multi-image-field-overview)

Stores multiple images. Images must be hosted on a publicly accessible URL to be uploaded via the API. The maximum file size for each image is 4MB.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Read Value">
    <CodeBlocks>
      ```javascript Format
      [
        {
          "fileId": "string",
          "url": "string",
          "alt": "string" (optional)
        }
      ]
      ```

      ```json Example
      {
        "myImageField": [
          {
            "fileId": "6390ba25bfe63b0cca1dd136",
            "url": "https://.../image1.jpeg",
            "alt": "Marvin the Paranoid Android"
          },
          {
            "fileId": "6390ba25bfe63b0cca1dd137",
            "url": "https://.../image2.jpeg",
            "alt": "Vogon Poetry"
          }
        ]
      }
      ```
    </CodeBlocks>
  </Tab>

  <Tab title="Write Value">
    To upload new images, provide an array of objects, each containing a `url`.

    <CodeBlocks>
      ```javascript title="New Uploads"
      {
        "myImageField": [
          {
            "url": "https://.../image1.png",
            "alt": "Finn and Jake fist bumping"
          },
          {
            "url": "https://.../image2.png",
            "alt": "Finn and Jake hugging"
          }
        ]
      }
      ```
    </CodeBlocks>
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

## VideoLink

Accepts a URL string for videos hosted on platforms like YouTube or Vimeo.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Value Format">
    ```
    string
    ```
  </Tab>

  <Tab title="Example">
    ```json
    {
      "myVideoLink": "https://www.youtube.com/watch?v=jfKfPfyJRdk"
    }
    ```
  </Tab>
</Tabs>

## [Link](https://university.webflow.com/lesson/link-field)

Stores a URL.

<Tabs>
  <Tab title="Value Format">
    ```
    string
    ```
  </Tab>

  <Tab title="Example">
    ```json
    {
      "myLink": "https://www.webflow.com"
    }
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

## [Email](https://university.webflow.com/lesson/email-field)

Stores an email address.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Value Format">
    ```
    string
    ```
  </Tab>

  <Tab title="Example">
    ```json
    {
      "myEmail": "hello@webflow.com"
    }
    ```
  </Tab>
</Tabs>

## [Phone](https://university.webflow.com/lesson/phone-field)

Stores a phone number.

<Tabs>
  <Tab title="Value Format">
    ```
    string
    ```
  </Tab>

  <Tab title="Example">
    ```json
    {
      "myPhone": "2024561111"
    }
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

## [Number](https://university.webflow.com/lesson/number-field)

Stores an integer or a decimal number.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Value Format">
    ```
    number
    ```
  </Tab>

  <Tab title="Example">
    ```json
    {
      "myNumber": 42
    }
    ```
  </Tab>
</Tabs>

## [Date/Time](https://university.webflow.com/lesson/date-time-field)

Stores a date and time.

<Tabs>
  <Tab title="Read Value Format">
    ```
    string (ISO 8601)
    ```
  </Tab>

  <Tab title="Write Value Format">
    ```
    Date | string (ISO 8601)
    ```
  </Tab>

  <Tab title="Example">
    ```json
    {
      "myDateTime": "2022-11-18T00:00:00.000Z"
    }
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

## [Switch](https://university.webflow.com/lesson/switch-field)

Stores a boolean value (`true` or `false`).

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Value Format">
    ```
    boolean
    ```
  </Tab>

  <Tab title="Example">
    ```json
    {
      "mostly-harmless": true
    }
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

## [Color](https://university.webflow.com/lesson/color-field-overview)

Stores a color value. Accepts HEX, RGB, HSL, and named color formats.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Value Format">
    ```
    string
    ```
  </Tab>

  <Tab title="Example">
    ```json
    {
      "bulldozer": "#FFFF00"
    }
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

Accepted formats include:

* `#RGB`
* `#RGBA`
* `#RRGGBB`
* `#RRGGBBAA`
* `rgb(red,green,blue)`
* `rgba(red,green,blue,alpha)`
* `hsl(hue,saturation,lightness)`
* `hsla(hue,saturation,lightness,alpha)`
* `orchid`, `aqua`, `black`, etc.
* `transparent`

## [Option](https://university.webflow.com/lesson/option-field)

Creates a predefined list of choices for an item.

### Create an Option Field

To create an Option field, send a `POST` request to the [Create Field](/data/reference/cms/collection-fields/create) endpoint. The request body must include `"type": "Option"` and a `metadata` object containing an `options` array. Each object in the array defines a choice with a `name`.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Create Field Request">
    ```javascript
    {
      "type": "Option",
      "displayName": "milliways-drink-menu",
      "metadata": {
        "options": [
          {"name": "pan-galactic gargle blaster"},
          {"name": "waturi punch"},
          {"name": "gnab gib"}
        ]
      }
    }
    ```
  </Tab>

  <Tab title="Read Field Definition">
    ```javascript
    {
      "type": "Option",
      "validations": {
        "options": [
          {
            "name": "pan-galactic gargle blaster",
            "id": "a1b2c3d4"
          },
          // ...
        ]
      }
    }
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

### Write an option value

To set an option for an item, get the option `id` of the desired option and pass it as a string. You can get the option `id` by calling the [Get Collection Details](/data/reference/cms/collections/get) endpoint and then searching for the option field and it's metadata in the `fields` array.

<Tabs>
  <Tab title="Value Format">
    ```
    string (Option ID)
    ```
  </Tab>

  <Tab title="Example">
    ```json
    {
      "milliways-drink-menu": "a1b2c3d4"
    }
    ```
  </Tab>
</Tabs>

## File

Stores a file reference. You can upload a new file from a public URL or use an existing file by referencing its `fileId`.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Read Value">
    ```javascript
    {
      "fileId": "string",
      "url": "string",
      "alt"?: "string"
    }
    ```
  </Tab>

  <Tab title="Write Value">
    ```javascript
    {
      "url": "https://data.wa.gov/api/views/f6w7-q2d2/rows.csv"
      alt"?: "Electric Vehicle Data"
    }
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

## [ItemRef / Reference](https://university.webflow.com/lesson/reference-field)

Links an item to another item in the same or a different collection.

### Create a reference field

To create a Reference field, send a `POST` request to the [Create Field](/data/reference/cms/collection-fields/create) endpoint. The request body must include `"type": "Reference"` and a `metadata` object containing the `collectionId` of the collection you want to reference.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Create Field Request">
    ```javascript
    // Include the metadata property in the request body
    {
      "type": "Reference",
      "displayName": "Author",
      "helpText": "Add the post author here",
      "metadata": {
        "collectionId": "63692ab61fb2852f582ba8f5"
      }
    }
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

### Write a reference value

To set a reference for an item, get the item `id` of the referenced item and pass it as a string. You can get the item `id` by calling the [Get Items](/data/reference/cms/collection-items/staged-items/list-items) endpoint for the referenced collection.

<Tabs>
  <Tab title="Value Format">
    ```
    string (Item ID)
    ```
  </Tab>

  <Tab title="Example">
    ```json
    {
      "author": "63764ec7981aa0138e99abc"
    }
    ```
  </Tab>
</Tabs>

## [Multi-Reference](https://university.webflow.com/lesson/multi-reference-field)

Links an item to multiple items in the same or a different collection.

### Create a multi-reference field

To create a Multi-Reference field, send a `POST` request to the [Create Field](/data/reference/cms/collection-fields/create) endpoint. The request body must include `"type": "MultiReference"` and a `metadata` object containing the `collectionId` of the collection you want to reference.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Create Field Request">
    ```javascript
    // Include the metadata property in the request body
    {
      "type": "MultiReference",
      "displayName": "Authors",
      "helpText": "Add post authors here",
      "metadata": {
        "collectionId": "63692ab61fb2852f582ba8f5"
      }
    }
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

### Write a multi-reference value

To set multiple references for an item, pass an array of item `id` strings.

<Tabs>
  <Tab title="Value Format">
    ```
    [string, string] (Item IDs)
    ```
  </Tab>

  <Tab title="Example">
    ```json
    {
      "authors": [
        "63764ec7981aa0138e99abc",
        "63764ec7981aa0138e99abd"
      ]
    }
    ```
  </Tab>
</Tabs>

## User

A read-only field containing the unique ID of a Webflow user. This field is used for the "created-by" and "updated-by" properties on an item.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Value Format">
    ```
    string
    ```
  </Tab>

  <Tab title="Example">
    ```
    "Person_63209baeac0b804b455624ce"
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

---

# List Items

GET https://api.webflow.com/v2/collections/{collection_id}/items

List of all Items within a Collection.

Required scope | `CMS:read`


Reference: https://developers.webflow.com/data/reference/cms/collection-items/staged-items/list-items

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Collection Items
  version: endpoint_collections/items.list-items
paths:
  /collections/{collection_id}/items:
    get:
      operationId: list-items
      summary: List Collection Items
      description: |
        List of all Items within a Collection.

        Required scope | `CMS:read`
      tags:
        - - subpackage_collections
          - subpackage_collections/items
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: cmsLocaleId
          in: query
          description: >-
            Unique identifier for a CMS Locale. This UID is different from the
            Site locale identifier and is listed as `cmsLocaleId` in the Sites
            response. To query multiple locales, input a comma separated string.
          required: false
          schema:
            type: string
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: name
          in: query
          description: Filter by the exact name of the item(s)
          required: false
          schema:
            type: string
        - name: slug
          in: query
          description: Filter by the exact slug of the item
          required: false
          schema:
            type: string
        - name: lastPublished
          in: query
          description: Filter by the last published date of the item(s)
          required: false
          schema:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsGetParametersLastPublished
        - name: sortBy
          in: query
          description: Sort results by the provided value
          required: false
          schema:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsGetParametersSortBy
        - name: sortOrder
          in: query
          description: Sorts the results by asc or desc
          required: false
          schema:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsGetParametersSortOrder
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/collections_items_list-items_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    CollectionsCollectionIdItemsGetParametersLastPublished:
      type: object
      properties:
        lte:
          type: string
          format: date-time
          description: Filter items last published before this date
        gte:
          type: string
          format: date-time
          description: Filter items last published after this date
    CollectionsCollectionIdItemsGetParametersSortBy:
      type: string
      enum:
        - value: lastPublished
        - value: name
        - value: slug
    CollectionsCollectionIdItemsGetParametersSortOrder:
      type: string
      enum:
        - value: asc
        - value: desc
    CollectionsCollectionIdItemsGetResponsesContentApplicationJsonSchemaItemsItemsFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
      required:
        - name
        - slug
    CollectionsCollectionIdItemsGetResponsesContentApplicationJsonSchemaItemsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsGetResponsesContentApplicationJsonSchemaItemsItemsFieldData
      required:
        - id
        - lastPublished
        - lastUpdated
        - createdOn
        - fieldData
    CollectionsCollectionIdItemsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          default: 100
          description: The limit specified in the request
        offset:
          type: number
          format: double
          default: 0
          description: The offset specified for pagination
        total:
          type: number
          format: double
          description: Total number of items in the collection
    collections_items_list-items_Response_200:
      type: object
      properties:
        items:
          type: array
          items:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsGetResponsesContentApplicationJsonSchemaItemsItems
          description: List of Items within the collection
        pagination:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsGetResponsesContentApplicationJsonSchemaPagination
      required:
        - items
        - pagination

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.list_items(
    collection_id="580e63fc8c9a982ac9b8b745",
    cms_locale_id="cmsLocaleId",
    offset=1,
    limit=1,
    name="name",
    slug="slug",
    sort_by="lastPublished",
    sort_order="asc",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.listItems("580e63fc8c9a982ac9b8b745", {
    cmsLocaleId: "cmsLocaleId",
    offset: 1,
    limit: 1,
    name: "name",
    slug: "slug",
    sortBy: "lastPublished",
    sortOrder: "asc"
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?offset=0&limit=100"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?offset=0&limit=100")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?offset=0&limit=100")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?offset=0&limit=100', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?offset=0&limit=100");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?offset=0&limit=100")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Item

GET https://api.webflow.com/v2/collections/{collection_id}/items/{item_id}

Get details of a selected Collection Item.

Required scope | `CMS:read`


Reference: https://developers.webflow.com/data/reference/cms/collection-items/staged-items/get-item

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Collection Item
  version: endpoint_collections/items.get-item
paths:
  /collections/{collection_id}/items/{item_id}:
    get:
      operationId: get-item
      summary: Get Collection Item
      description: |
        Get details of a selected Collection Item.

        Required scope | `CMS:read`
      tags:
        - - subpackage_collections
          - subpackage_collections/items
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: item_id
          in: path
          description: Unique identifier for an Item
          required: true
          schema:
            type: string
            format: objectid
        - name: cmsLocaleId
          in: query
          description: >-
            Unique identifier for a CMS Locale. This UID is different from the
            Site locale identifier and is listed as `cmsLocaleId` in the Sites
            response. To query multiple locales, input a comma separated string.
          required: false
          schema:
            type: string
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/collections_items_get-item_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    CollectionsCollectionIdItemsItemIdGetResponsesContentApplicationJsonSchemaFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
      required:
        - name
        - slug
    collections_items_get-item_Response_200:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsItemIdGetResponsesContentApplicationJsonSchemaFieldData
      required:
        - id
        - lastPublished
        - lastUpdated
        - createdOn
        - isArchived
        - isDraft
        - fieldData

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.get_item(
    collection_id="580e63fc8c9a982ac9b8b745",
    item_id="580e64008c9a982ac9b8b754",
    cms_locale_id="cmsLocaleId",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.getItem("580e63fc8c9a982ac9b8b745", "580e64008c9a982ac9b8b754", {
    cmsLocaleId: "cmsLocaleId"
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Create Items

POST https://api.webflow.com/v2/collections/{collection_id}/items/bulk
Content-Type: application/json

Create an item or multiple items in a CMS Collection across multiple corresponding locales.

<Note>
  - This endpoint can create up to 100 items in a request.
  - If the `cmsLocaleIds` parameter is not included in the request, an item will only be created in the primary locale.
</Note>

Required scope | `CMS:write`


Reference: https://developers.webflow.com/data/reference/cms/collection-items/staged-items/create-item

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Create Collection Items
  version: endpoint_collections/items.create-items
paths:
  /collections/{collection_id}/items/bulk:
    post:
      operationId: create-items
      summary: Create Collection Items
      description: >
        Create an item or multiple items in a CMS Collection across multiple
        corresponding locales.


        <Note>
          - This endpoint can create up to 100 items in a request.
          - If the `cmsLocaleIds` parameter is not included in the request, an item will only be created in the primary locale.
        </Note>


        Required scope | `CMS:write`
      tags:
        - - subpackage_collections
          - subpackage_collections/items
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: skipInvalidFiles
          in: query
          description: >-
            When true, invalid files are skipped and processing continues. When
            false, the entire request fails if any file is invalid.
          required: false
          schema:
            type: boolean
            default: true
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '202':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/collections_items_create-items_Response_202
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                cmsLocaleIds:
                  type: array
                  items:
                    type: string
                  description: >-
                    Array of identifiers for the locales where the item will be
                    created
                lastPublished:
                  type: string
                  format: date-string
                  description: The date and time when the item was last published.
                lastUpdated:
                  type: string
                  format: date-string
                  description: The date and time when the item was last updated.
                createdOn:
                  type: string
                  format: date-string
                  description: The date and time when the item was created.
                isArchived:
                  type: boolean
                  default: false
                  description: Indicates whether the item is archived.
                isDraft:
                  type: boolean
                  default: true
                  description: Indicates whether the item is in draft state.
                fieldData:
                  $ref: >-
                    #/components/schemas/CollectionsCollectionIdItemsBulkPostRequestBodyContentApplicationJsonSchemaFieldData
              required:
                - fieldData
components:
  schemas:
    CollectionsCollectionIdItemsBulkPostRequestBodyContentApplicationJsonSchemaFieldData0:
      type: object
      properties:
        name:
          type: string
          description: The name of the item.
        slug:
          type: string
          description: >-
            URL slug for the item in your site. 

            Note: Updating the item slug will break all links referencing the
            old slug.
      required:
        - name
        - slug
    CollectionsCollectionIdItemsBulkPostRequestBodyContentApplicationJsonSchemaFieldDataOneOf1Items:
      type: object
      properties:
        name:
          type: string
          description: The name of the item.
        slug:
          type: string
          description: >-
            URL slug for the item in your site. 

            Note: Updating the item slug will break all links referencing the
            old slug.
      required:
        - name
        - slug
    CollectionsCollectionIdItemsBulkPostRequestBodyContentApplicationJsonSchemaFieldData1:
      type: array
      items:
        $ref: >-
          #/components/schemas/CollectionsCollectionIdItemsBulkPostRequestBodyContentApplicationJsonSchemaFieldDataOneOf1Items
    CollectionsCollectionIdItemsBulkPostRequestBodyContentApplicationJsonSchemaFieldData:
      oneOf:
        - $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsBulkPostRequestBodyContentApplicationJsonSchemaFieldData0
        - $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsBulkPostRequestBodyContentApplicationJsonSchemaFieldData1
    CollectionsCollectionIdItemsBulkPostResponsesContentApplicationJsonSchemaFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
    collections_items_create-items_Response_202:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleIds:
          type: array
          items:
            type: string
          description: Array of identifiers for the locales where the item will be created
        lastPublished:
          type:
            - string
            - 'null'
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsBulkPostResponsesContentApplicationJsonSchemaFieldData
      required:
        - id
        - cmsLocaleIds
        - lastPublished
        - lastUpdated
        - createdOn
        - isArchived
        - isDraft
        - fieldData

```

## SDK Code Examples

```python Single item created across multiple locales
from webflow import Webflow
from webflow.resources.collections.resources.items import SingleCmsItem

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.create_items(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    cms_locale_ids=[
        "66f6e966c9e1dc700a857ca3",
        "66f6e966c9e1dc700a857ca4",
        "66f6e966c9e1dc700a857ca5",
    ],
    is_archived=False,
    is_draft=False,
    field_data=SingleCmsItem(
        name="Don’t Panic",
        slug="dont-panic",
    ),
)

```

```typescript Single item created across multiple locales
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.createItems("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    cmsLocaleIds: ["66f6e966c9e1dc700a857ca3", "66f6e966c9e1dc700a857ca4", "66f6e966c9e1dc700a857ca5"],
    isArchived: false,
    isDraft: false,
    fieldData: {
        name: "Don\u2019t Panic",
        slug: "dont-panic"
    }
});

```

```go Single item created across multiple locales
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true"

	req, _ := http.NewRequest("POST", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby Single item created across multiple locales
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'

response = http.request(request)
puts response.read_body
```

```java Single item created across multiple locales
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .asString();
```

```php Single item created across multiple locales
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp Single item created across multiple locales
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
IRestResponse response = client.Execute(request);
```

```swift Single item created across multiple locales
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python Multiple items created across multiple locales
from webflow import Webflow
from webflow.resources.collections.resources.items import SingleCmsItem

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.create_items(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    cms_locale_ids=[
        "66f6e966c9e1dc700a857ca3",
        "66f6e966c9e1dc700a857ca4",
        "66f6e966c9e1dc700a857ca5",
    ],
    is_archived=False,
    is_draft=False,
    field_data=SingleCmsItem(
        name="Don’t Panic",
        slug="dont-panic",
    ),
)

```

```typescript Multiple items created across multiple locales
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.createItems("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    cmsLocaleIds: ["66f6e966c9e1dc700a857ca3", "66f6e966c9e1dc700a857ca4", "66f6e966c9e1dc700a857ca5"],
    isArchived: false,
    isDraft: false,
    fieldData: {
        name: "Don\u2019t Panic",
        slug: "dont-panic"
    }
});

```

```go Multiple items created across multiple locales
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true"

	req, _ := http.NewRequest("POST", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby Multiple items created across multiple locales
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'

response = http.request(request)
puts response.read_body
```

```java Multiple items created across multiple locales
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .asString();
```

```php Multiple items created across multiple locales
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp Multiple items created across multiple locales
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
IRestResponse response = client.Execute(request);
```

```swift Multiple items created across multiple locales
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python Create a single item across multiple locales
from webflow import Webflow
from webflow.resources.collections.resources.items import SingleCmsItem

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.create_items(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    cms_locale_ids=[
        "66f6e966c9e1dc700a857ca3",
        "66f6e966c9e1dc700a857ca4",
        "66f6e966c9e1dc700a857ca5",
    ],
    is_archived=False,
    is_draft=False,
    field_data=SingleCmsItem(
        name="Don’t Panic",
        slug="dont-panic",
    ),
)

```

```typescript Create a single item across multiple locales
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.createItems("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    cmsLocaleIds: ["66f6e966c9e1dc700a857ca3", "66f6e966c9e1dc700a857ca4", "66f6e966c9e1dc700a857ca5"],
    isArchived: false,
    isDraft: false,
    fieldData: {
        name: "Don\u2019t Panic",
        slug: "dont-panic"
    }
});

```

```go Create a single item across multiple locales
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true"

	payload := strings.NewReader("{\n  \"fieldData\": {\n    \"name\": \"Don’t Panic\",\n    \"slug\": \"dont-panic\"\n  },\n  \"cmsLocaleIds\": [\n    \"66f6e966c9e1dc700a857ca3\",\n    \"66f6e966c9e1dc700a857ca4\",\n    \"66f6e966c9e1dc700a857ca5\"\n  ],\n  \"isArchived\": false,\n  \"isDraft\": false\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby Create a single item across multiple locales
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"fieldData\": {\n    \"name\": \"Don’t Panic\",\n    \"slug\": \"dont-panic\"\n  },\n  \"cmsLocaleIds\": [\n    \"66f6e966c9e1dc700a857ca3\",\n    \"66f6e966c9e1dc700a857ca4\",\n    \"66f6e966c9e1dc700a857ca5\"\n  ],\n  \"isArchived\": false,\n  \"isDraft\": false\n}"

response = http.request(request)
puts response.read_body
```

```java Create a single item across multiple locales
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"fieldData\": {\n    \"name\": \"Don’t Panic\",\n    \"slug\": \"dont-panic\"\n  },\n  \"cmsLocaleIds\": [\n    \"66f6e966c9e1dc700a857ca3\",\n    \"66f6e966c9e1dc700a857ca4\",\n    \"66f6e966c9e1dc700a857ca5\"\n  ],\n  \"isArchived\": false,\n  \"isDraft\": false\n}")
  .asString();
```

```php Create a single item across multiple locales
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true', [
  'body' => '{
  "fieldData": {
    "name": "Don’t Panic",
    "slug": "dont-panic"
  },
  "cmsLocaleIds": [
    "66f6e966c9e1dc700a857ca3",
    "66f6e966c9e1dc700a857ca4",
    "66f6e966c9e1dc700a857ca5"
  ],
  "isArchived": false,
  "isDraft": false
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp Create a single item across multiple locales
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"fieldData\": {\n    \"name\": \"Don’t Panic\",\n    \"slug\": \"dont-panic\"\n  },\n  \"cmsLocaleIds\": [\n    \"66f6e966c9e1dc700a857ca3\",\n    \"66f6e966c9e1dc700a857ca4\",\n    \"66f6e966c9e1dc700a857ca5\"\n  ],\n  \"isArchived\": false,\n  \"isDraft\": false\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift Create a single item across multiple locales
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "fieldData": [
    "name": "Don’t Panic",
    "slug": "dont-panic"
  ],
  "cmsLocaleIds": ["66f6e966c9e1dc700a857ca3", "66f6e966c9e1dc700a857ca4", "66f6e966c9e1dc700a857ca5"],
  "isArchived": false,
  "isDraft": false
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python Create multiple items across multiple locales
from webflow import Webflow
from webflow.resources.collections.resources.items import (
    CreateBulkCollectionItemRequestBodyFieldDataItem,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.create_items(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    cms_locale_ids=["66f6e966c9e1dc700a857ca3", "66f6e966c9e1dc700a857ca4"],
    is_archived=False,
    is_draft=False,
    field_data=[
        CreateBulkCollectionItemRequestBodyFieldDataItem(
            name="Don’t Panic",
            slug="dont-panic",
        ),
        CreateBulkCollectionItemRequestBodyFieldDataItem(
            name="So Long and Thanks for All the Fish",
            slug="so-long-and-thanks",
        ),
    ],
)

```

```typescript Create multiple items across multiple locales
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.createItems("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    cmsLocaleIds: ["66f6e966c9e1dc700a857ca3", "66f6e966c9e1dc700a857ca4"],
    isArchived: false,
    isDraft: false,
    fieldData: [{
            name: "Don\u2019t Panic",
            slug: "dont-panic"
        }, {
            name: "So Long and Thanks for All the Fish",
            slug: "so-long-and-thanks"
        }]
});

```

```go Create multiple items across multiple locales
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true"

	payload := strings.NewReader("{\n  \"fieldData\": [\n    {\n      \"name\": \"Don’t Panic\",\n      \"slug\": \"dont-panic\"\n    },\n    {\n      \"name\": \"So Long and Thanks for All the Fish\",\n      \"slug\": \"so-long-and-thanks\"\n    }\n  ],\n  \"cmsLocaleIds\": [\n    \"66f6e966c9e1dc700a857ca3\",\n    \"66f6e966c9e1dc700a857ca4\"\n  ],\n  \"isArchived\": false,\n  \"isDraft\": false\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby Create multiple items across multiple locales
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"fieldData\": [\n    {\n      \"name\": \"Don’t Panic\",\n      \"slug\": \"dont-panic\"\n    },\n    {\n      \"name\": \"So Long and Thanks for All the Fish\",\n      \"slug\": \"so-long-and-thanks\"\n    }\n  ],\n  \"cmsLocaleIds\": [\n    \"66f6e966c9e1dc700a857ca3\",\n    \"66f6e966c9e1dc700a857ca4\"\n  ],\n  \"isArchived\": false,\n  \"isDraft\": false\n}"

response = http.request(request)
puts response.read_body
```

```java Create multiple items across multiple locales
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"fieldData\": [\n    {\n      \"name\": \"Don’t Panic\",\n      \"slug\": \"dont-panic\"\n    },\n    {\n      \"name\": \"So Long and Thanks for All the Fish\",\n      \"slug\": \"so-long-and-thanks\"\n    }\n  ],\n  \"cmsLocaleIds\": [\n    \"66f6e966c9e1dc700a857ca3\",\n    \"66f6e966c9e1dc700a857ca4\"\n  ],\n  \"isArchived\": false,\n  \"isDraft\": false\n}")
  .asString();
```

```php Create multiple items across multiple locales
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true', [
  'body' => '{
  "fieldData": [
    {
      "name": "Don’t Panic",
      "slug": "dont-panic"
    },
    {
      "name": "So Long and Thanks for All the Fish",
      "slug": "so-long-and-thanks"
    }
  ],
  "cmsLocaleIds": [
    "66f6e966c9e1dc700a857ca3",
    "66f6e966c9e1dc700a857ca4"
  ],
  "isArchived": false,
  "isDraft": false
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp Create multiple items across multiple locales
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"fieldData\": [\n    {\n      \"name\": \"Don’t Panic\",\n      \"slug\": \"dont-panic\"\n    },\n    {\n      \"name\": \"So Long and Thanks for All the Fish\",\n      \"slug\": \"so-long-and-thanks\"\n    }\n  ],\n  \"cmsLocaleIds\": [\n    \"66f6e966c9e1dc700a857ca3\",\n    \"66f6e966c9e1dc700a857ca4\"\n  ],\n  \"isArchived\": false,\n  \"isDraft\": false\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift Create multiple items across multiple locales
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "fieldData": [
    [
      "name": "Don’t Panic",
      "slug": "dont-panic"
    ],
    [
      "name": "So Long and Thanks for All the Fish",
      "slug": "so-long-and-thanks"
    ]
  ],
  "cmsLocaleIds": ["66f6e966c9e1dc700a857ca3", "66f6e966c9e1dc700a857ca4"],
  "isArchived": false,
  "isDraft": false
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/bulk?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Items

PATCH https://api.webflow.com/v2/collections/{collection_id}/items
Content-Type: application/json

Update a single item or multiple items in a Collection.

The limit for this endpoint is 100 items.

<Tip title="Localization Tip">Items will only be updated in the primary locale, unless a `cmsLocaleId` is included in the request.</Tip>

Required scope | `CMS:write`


Reference: https://developers.webflow.com/data/reference/cms/collection-items/staged-items/update-items

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Collection Items
  version: endpoint_collections/items.update-items
paths:
  /collections/{collection_id}/items:
    patch:
      operationId: update-items
      summary: Update Collection Items
      description: >
        Update a single item or multiple items in a Collection.


        The limit for this endpoint is 100 items.


        <Tip title="Localization Tip">Items will only be updated in the primary
        locale, unless a `cmsLocaleId` is included in the request.</Tip>


        Required scope | `CMS:write`
      tags:
        - - subpackage_collections
          - subpackage_collections/items
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: skipInvalidFiles
          in: query
          description: >-
            When true, invalid files are skipped and processing continues. When
            false, the entire request fails if any file is invalid.
          required: false
          schema:
            type: boolean
            default: true
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/collections_items_update-items_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: Details of the item to update
        content:
          application/json:
            schema:
              type: object
              properties:
                items:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/CollectionsCollectionIdItemsPatchRequestBodyContentApplicationJsonSchemaItemsItems
components:
  schemas:
    CollectionsCollectionIdItemsPatchRequestBodyContentApplicationJsonSchemaItemsItemsFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
    CollectionsCollectionIdItemsPatchRequestBodyContentApplicationJsonSchemaItemsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsPatchRequestBodyContentApplicationJsonSchemaItemsItemsFieldData
      required:
        - id
    CollectionsCollectionIdItemsPatchResponsesContentApplicationJsonSchemaOneOf0FieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
      required:
        - name
        - slug
    CollectionsItemsUpdateItemsResponse2000:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsPatchResponsesContentApplicationJsonSchemaOneOf0FieldData
      required:
        - id
        - lastPublished
        - lastUpdated
        - createdOn
        - fieldData
    CollectionsCollectionIdItemsPatchResponsesContentApplicationJsonSchemaOneOf1ItemsItemsFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
      required:
        - name
        - slug
    CollectionsCollectionIdItemsPatchResponsesContentApplicationJsonSchemaOneOf1ItemsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsPatchResponsesContentApplicationJsonSchemaOneOf1ItemsItemsFieldData
      required:
        - id
        - lastPublished
        - lastUpdated
        - createdOn
        - fieldData
    CollectionsCollectionIdItemsPatchResponsesContentApplicationJsonSchemaOneOf1Pagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          default: 100
          description: The limit specified in the request
        offset:
          type: number
          format: double
          default: 0
          description: The offset specified for pagination
        total:
          type: number
          format: double
          description: Total number of items in the collection
    CollectionsItemsUpdateItemsResponse2001:
      type: object
      properties:
        items:
          type: array
          items:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsPatchResponsesContentApplicationJsonSchemaOneOf1ItemsItems
          description: List of Items within the collection
        pagination:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsPatchResponsesContentApplicationJsonSchemaOneOf1Pagination
    collections_items_update-items_Response_200:
      oneOf:
        - $ref: '#/components/schemas/CollectionsItemsUpdateItemsResponse2000'
        - $ref: '#/components/schemas/CollectionsItemsUpdateItemsResponse2001'

```

## SDK Code Examples

```python LocalizedItems
from webflow import (
    CollectionItemWithIdInput,
    CollectionItemWithIdInputFieldData,
    Webflow,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.update_items(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    items=[
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5ea6",
            cms_locale_id="66f6e966c9e1dc700a857ca5",
            field_data=CollectionItemWithIdInputFieldData(
                name="Ne Paniquez Pas",
                slug="ne-paniquez-pas",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5ea6",
            cms_locale_id="66f6e966c9e1dc700a857ca4",
            field_data=CollectionItemWithIdInputFieldData(
                name="No Entrar en Pánico",
                slug="no-entrar-en-panico",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5eaa",
            cms_locale_id="66f6e966c9e1dc700a857ca5",
            field_data=CollectionItemWithIdInputFieldData(
                name="Au Revoir et Merci pour Tous les Poissons",
                slug="au-revoir-et-merci",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5eaa",
            cms_locale_id="66f6e966c9e1dc700a857ca4",
            field_data=CollectionItemWithIdInputFieldData(
                name="Hasta Luego y Gracias por Todo el Pescado",
                slug="hasta-luego-y-gracias",
            ),
        ),
    ],
)

```

```typescript LocalizedItems
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.updateItems("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    items: [{
            id: "66f6ed9576ddacf3149d5ea6",
            cmsLocaleId: "66f6e966c9e1dc700a857ca5",
            fieldData: {
                name: "Ne Paniquez Pas",
                slug: "ne-paniquez-pas"
            }
        }, {
            id: "66f6ed9576ddacf3149d5ea6",
            cmsLocaleId: "66f6e966c9e1dc700a857ca4",
            fieldData: {
                name: "No Entrar en P\u00E1nico",
                slug: "no-entrar-en-panico"
            }
        }, {
            id: "66f6ed9576ddacf3149d5eaa",
            cmsLocaleId: "66f6e966c9e1dc700a857ca5",
            fieldData: {
                name: "Au Revoir et Merci pour Tous les Poissons",
                slug: "au-revoir-et-merci"
            }
        }, {
            id: "66f6ed9576ddacf3149d5eaa",
            cmsLocaleId: "66f6e966c9e1dc700a857ca4",
            fieldData: {
                name: "Hasta Luego y Gracias por Todo el Pescado",
                slug: "hasta-luego-y-gracias"
            }
        }]
});

```

```go LocalizedItems
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true"

	payload := strings.NewReader("{\n  \"items\": [\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Ne Paniquez Pas\",\n        \"slug\": \"ne-paniquez-pas\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"No Entrar en Pánico\",\n        \"slug\": \"no-entrar-en-panico\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Au Revoir et Merci pour Tous les Poissons\",\n        \"slug\": \"au-revoir-et-merci\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"Hasta Luego y Gracias por Todo el Pescado\",\n        \"slug\": \"hasta-luego-y-gracias\",\n        \"featured\": false\n      }\n    }\n  ]\n}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby LocalizedItems
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"items\": [\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Ne Paniquez Pas\",\n        \"slug\": \"ne-paniquez-pas\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"No Entrar en Pánico\",\n        \"slug\": \"no-entrar-en-panico\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Au Revoir et Merci pour Tous les Poissons\",\n        \"slug\": \"au-revoir-et-merci\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"Hasta Luego y Gracias por Todo el Pescado\",\n        \"slug\": \"hasta-luego-y-gracias\",\n        \"featured\": false\n      }\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java LocalizedItems
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"items\": [\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Ne Paniquez Pas\",\n        \"slug\": \"ne-paniquez-pas\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"No Entrar en Pánico\",\n        \"slug\": \"no-entrar-en-panico\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Au Revoir et Merci pour Tous les Poissons\",\n        \"slug\": \"au-revoir-et-merci\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"Hasta Luego y Gracias por Todo el Pescado\",\n        \"slug\": \"hasta-luego-y-gracias\",\n        \"featured\": false\n      }\n    }\n  ]\n}")
  .asString();
```

```php LocalizedItems
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true', [
  'body' => '{
  "items": [
    {
      "id": "66f6ed9576ddacf3149d5ea6",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca5",
      "fieldData": {
        "name": "Ne Paniquez Pas",
        "slug": "ne-paniquez-pas",
        "featured": false
      }
    },
    {
      "id": "66f6ed9576ddacf3149d5ea6",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca4",
      "fieldData": {
        "name": "No Entrar en Pánico",
        "slug": "no-entrar-en-panico",
        "featured": false
      }
    },
    {
      "id": "66f6ed9576ddacf3149d5eaa",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca5",
      "fieldData": {
        "name": "Au Revoir et Merci pour Tous les Poissons",
        "slug": "au-revoir-et-merci",
        "featured": false
      }
    },
    {
      "id": "66f6ed9576ddacf3149d5eaa",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca4",
      "fieldData": {
        "name": "Hasta Luego y Gracias por Todo el Pescado",
        "slug": "hasta-luego-y-gracias",
        "featured": false
      }
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp LocalizedItems
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"items\": [\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Ne Paniquez Pas\",\n        \"slug\": \"ne-paniquez-pas\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"No Entrar en Pánico\",\n        \"slug\": \"no-entrar-en-panico\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Au Revoir et Merci pour Tous les Poissons\",\n        \"slug\": \"au-revoir-et-merci\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"Hasta Luego y Gracias por Todo el Pescado\",\n        \"slug\": \"hasta-luego-y-gracias\",\n        \"featured\": false\n      }\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift LocalizedItems
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["items": [
    [
      "id": "66f6ed9576ddacf3149d5ea6",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca5",
      "fieldData": [
        "name": "Ne Paniquez Pas",
        "slug": "ne-paniquez-pas",
        "featured": false
      ]
    ],
    [
      "id": "66f6ed9576ddacf3149d5ea6",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca4",
      "fieldData": [
        "name": "No Entrar en Pánico",
        "slug": "no-entrar-en-panico",
        "featured": false
      ]
    ],
    [
      "id": "66f6ed9576ddacf3149d5eaa",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca5",
      "fieldData": [
        "name": "Au Revoir et Merci pour Tous les Poissons",
        "slug": "au-revoir-et-merci",
        "featured": false
      ]
    ],
    [
      "id": "66f6ed9576ddacf3149d5eaa",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca4",
      "fieldData": [
        "name": "Hasta Luego y Gracias por Todo el Pescado",
        "slug": "hasta-luego-y-gracias",
        "featured": false
      ]
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python MultipleItems
from webflow import (
    CollectionItemWithIdInput,
    CollectionItemWithIdInputFieldData,
    Webflow,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.update_items(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    items=[
        CollectionItemWithIdInput(
            id="580e64008c9a982ac9b8b754",
            is_archived=False,
            is_draft=False,
            field_data=CollectionItemWithIdInputFieldData(
                name="Senior Data Analyst",
                slug="senior-data-analyst",
            ),
        ),
        CollectionItemWithIdInput(
            id="580e64008c9a982ac9b8b754",
            is_archived=False,
            is_draft=False,
            field_data=CollectionItemWithIdInputFieldData(
                name="Product Manager",
                slug="product-manager",
            ),
        ),
    ],
)

```

```typescript MultipleItems
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.updateItems("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    items: [{
            id: "580e64008c9a982ac9b8b754",
            isArchived: false,
            isDraft: false,
            fieldData: {
                name: "Senior Data Analyst",
                slug: "senior-data-analyst"
            }
        }, {
            id: "580e64008c9a982ac9b8b754",
            isArchived: false,
            isDraft: false,
            fieldData: {
                name: "Product Manager",
                slug: "product-manager"
            }
        }]
});

```

```go MultipleItems
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true"

	payload := strings.NewReader("{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby MultipleItems
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java MultipleItems
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}")
  .asString();
```

```php MultipleItems
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true', [
  'body' => '{
  "items": [
    {
      "id": "580e64008c9a982ac9b8b754",
      "isArchived": false,
      "isDraft": false,
      "fieldData": {
        "name": "Senior Data Analyst",
        "slug": "senior-data-analyst",
        "url": "https://boards.greenhouse.io/webflow/jobs/26567701",
        "department": "Data"
      }
    },
    {
      "id": "580e64008c9a982ac9b8b754",
      "isArchived": false,
      "isDraft": false,
      "fieldData": {
        "name": "Product Manager",
        "slug": "product-manager",
        "url": "https://boards.greenhouse.io/webflow/jobs/31234567",
        "department": "Product"
      }
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp MultipleItems
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift MultipleItems
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["items": [
    [
      "id": "580e64008c9a982ac9b8b754",
      "isArchived": false,
      "isDraft": false,
      "fieldData": [
        "name": "Senior Data Analyst",
        "slug": "senior-data-analyst",
        "url": "https://boards.greenhouse.io/webflow/jobs/26567701",
        "department": "Data"
      ]
    ],
    [
      "id": "580e64008c9a982ac9b8b754",
      "isArchived": false,
      "isDraft": false,
      "fieldData": [
        "name": "Product Manager",
        "slug": "product-manager",
        "url": "https://boards.greenhouse.io/webflow/jobs/31234567",
        "department": "Product"
      ]
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete Items

DELETE https://api.webflow.com/v2/collections/{collection_id}/items
Content-Type: application/json

Delete Items from a Collection.

<Tip title="Localization Tip">Items will only be deleted in the primary locale unless a `cmsLocaleId` is included in the request.</Tip>

Required scope | `CMS:write`


Reference: https://developers.webflow.com/data/reference/cms/collection-items/staged-items/delete-items

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete Collection Items
  version: endpoint_collections/items.delete-items
paths:
  /collections/{collection_id}/items:
    delete:
      operationId: delete-items
      summary: Delete Collection Items
      description: >
        Delete Items from a Collection.


        <Tip title="Localization Tip">Items will only be deleted in the primary
        locale unless a `cmsLocaleId` is included in the request.</Tip>


        Required scope | `CMS:write`
      tags:
        - - subpackage_collections
          - subpackage_collections/items
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/collections_items_delete-items_Response_204
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: Site is published to multiple domains at different times
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: Details of the items to delete
        content:
          application/json:
            schema:
              type: object
              properties:
                items:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/CollectionsCollectionIdItemsDeleteRequestBodyContentApplicationJsonSchemaItemsItems
              required:
                - items
components:
  schemas:
    CollectionsCollectionIdItemsDeleteRequestBodyContentApplicationJsonSchemaItemsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleIds:
          type: array
          items:
            type: string
          description: Array of identifiers for the locales where the item will be created
      required:
        - id
    collections_items_delete-items_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow
from webflow.resources.collections.resources.items import (
    ItemsDeleteItemsRequestItemsItem,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.delete_items(
    collection_id="580e63fc8c9a982ac9b8b745",
    items=[
        ItemsDeleteItemsRequestItemsItem(
            id="580e64008c9a982ac9b8b754",
        )
    ],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.deleteItems("580e63fc8c9a982ac9b8b745", {
    items: [{
            id: "580e64008c9a982ac9b8b754"
        }]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items"

	payload := strings.NewReader("{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\"\n    }\n  ]\n}")

	req, _ := http.NewRequest("DELETE", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\"\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\"\n    }\n  ]\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items', [
  'body' => '{
  "items": [
    {
      "id": "580e64008c9a982ac9b8b754"
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\"\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["items": [["id": "580e64008c9a982ac9b8b754"]]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Publish Items

POST https://api.webflow.com/v2/collections/{collection_id}/items/publish
Content-Type: application/json

Publish an item or multiple items.

Required scope | `cms:write`


Reference: https://developers.webflow.com/data/reference/cms/collection-items/staged-items/publish-item

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Publish Collection Item
  version: endpoint_collections/items.publish-item
paths:
  /collections/{collection_id}/items/publish:
    post:
      operationId: publish-item
      summary: Publish Collection Item
      description: |
        Publish an item or multiple items.

        Required scope | `cms:write`
      tags:
        - - subpackage_collections
          - subpackage_collections/items
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '202':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/collections_items_publish-item_Response_202
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: Site is published to multiple domains at different times
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: An array of Item IDs
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/collections_items_publish-item_Request'
components:
  schemas:
    CollectionsItemsPublishItemRequest0:
      type: object
      properties:
        itemIds:
          type: array
          items:
            type: string
            format: objectid
    CollectionsCollectionIdItemsPublishPostRequestBodyContentApplicationJsonSchemaOneOf1ItemsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: The ID of the CMS item
        cmsLocaleIds:
          type: array
          items:
            type: string
          description: >-
            Array of identifiers for the locales where the item will be
            published
      required:
        - id
    CollectionsItemsPublishItemRequest1:
      type: object
      properties:
        items:
          type: array
          items:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsPublishPostRequestBodyContentApplicationJsonSchemaOneOf1ItemsItems
    collections_items_publish-item_Request:
      oneOf:
        - $ref: '#/components/schemas/CollectionsItemsPublishItemRequest0'
        - $ref: '#/components/schemas/CollectionsItemsPublishItemRequest1'
    collections_items_publish-item_Response_202:
      type: object
      properties:
        publishedItemIds:
          type: array
          items:
            type: string
        errors:
          type: array
          items:
            type: string

```

## SDK Code Examples

```python collections_items_publish-item_example
from webflow import Webflow
from webflow.resources.collections.resources.items import ItemIDs

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.publish_item(
    collection_id="580e63fc8c9a982ac9b8b745",
    request=ItemIDs(
        item_ids=[
            "643fd856d66b6528195ee2ca",
            "643fd856d66b6528195ee2cb",
            "643fd856d66b6528195ee2cc",
        ],
    ),
)

```

```typescript collections_items_publish-item_example
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.publishItem("580e63fc8c9a982ac9b8b745", {
    items: [{
            id: "643fd856d66b6528195ee2ca",
            cmsLocaleIds: ["653ad57de882f528b32e810e"]
        }, {
            id: "643fd856d66b6528195ee2cb",
            cmsLocaleIds: ["653ad57de882f528b32e810e"]
        }, {
            id: "643fd856d66b6528195ee2cc",
            cmsLocaleIds: ["653ad57de882f528b32e810e"]
        }]
});

```

```go collections_items_publish-item_example
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish"

	req, _ := http.NewRequest("POST", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby collections_items_publish-item_example
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'

response = http.request(request)
puts response.read_body
```

```java collections_items_publish-item_example
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .asString();
```

```php collections_items_publish-item_example
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp collections_items_publish-item_example
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
IRestResponse response = client.Execute(request);
```

```swift collections_items_publish-item_example
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python PrimaryLocale
from webflow import Webflow
from webflow.resources.collections.resources.items import ItemIDs

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.publish_item(
    collection_id="580e63fc8c9a982ac9b8b745",
    request=ItemIDs(
        item_ids=[
            "643fd856d66b6528195ee2ca",
            "643fd856d66b6528195ee2cb",
            "643fd856d66b6528195ee2cc",
        ],
    ),
)

```

```typescript PrimaryLocale
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.publishItem("580e63fc8c9a982ac9b8b745", {
    itemIds: ["643fd856d66b6528195ee2ca", "643fd856d66b6528195ee2cb", "643fd856d66b6528195ee2cc"]
});

```

```go PrimaryLocale
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish"

	payload := strings.NewReader("{\n  \"itemIds\": [\n    \"643fd856d66b6528195ee2ca\",\n    \"643fd856d66b6528195ee2cb\",\n    \"643fd856d66b6528195ee2cc\"\n  ]\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby PrimaryLocale
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"itemIds\": [\n    \"643fd856d66b6528195ee2ca\",\n    \"643fd856d66b6528195ee2cb\",\n    \"643fd856d66b6528195ee2cc\"\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java PrimaryLocale
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"itemIds\": [\n    \"643fd856d66b6528195ee2ca\",\n    \"643fd856d66b6528195ee2cb\",\n    \"643fd856d66b6528195ee2cc\"\n  ]\n}")
  .asString();
```

```php PrimaryLocale
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish', [
  'body' => '{
  "itemIds": [
    "643fd856d66b6528195ee2ca",
    "643fd856d66b6528195ee2cb",
    "643fd856d66b6528195ee2cc"
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp PrimaryLocale
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"itemIds\": [\n    \"643fd856d66b6528195ee2ca\",\n    \"643fd856d66b6528195ee2cb\",\n    \"643fd856d66b6528195ee2cc\"\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift PrimaryLocale
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["itemIds": ["643fd856d66b6528195ee2ca", "643fd856d66b6528195ee2cb", "643fd856d66b6528195ee2cc"]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python SecondaryLocale
from webflow import Webflow
from webflow.resources.collections.resources.items import (
    ItemIDsWithLocales,
    ItemsPublishItemRequestItemsItemsItem,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.publish_item(
    collection_id="580e63fc8c9a982ac9b8b745",
    request=ItemIDsWithLocales(
        items=[
            ItemsPublishItemRequestItemsItemsItem(
                id="643fd856d66b6528195ee2ca",
                cms_locale_ids=["653ad57de882f528b32e810e"],
            ),
            ItemsPublishItemRequestItemsItemsItem(
                id="643fd856d66b6528195ee2cb",
                cms_locale_ids=["653ad57de882f528b32e810e"],
            ),
            ItemsPublishItemRequestItemsItemsItem(
                id="643fd856d66b6528195ee2cc",
                cms_locale_ids=["653ad57de882f528b32e810e"],
            ),
        ],
    ),
)

```

```typescript SecondaryLocale
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.publishItem("580e63fc8c9a982ac9b8b745", {
    items: [{
            id: "643fd856d66b6528195ee2ca",
            cmsLocaleIds: ["653ad57de882f528b32e810e"]
        }, {
            id: "643fd856d66b6528195ee2cb",
            cmsLocaleIds: ["653ad57de882f528b32e810e"]
        }, {
            id: "643fd856d66b6528195ee2cc",
            cmsLocaleIds: ["653ad57de882f528b32e810e"]
        }]
});

```

```go SecondaryLocale
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish"

	payload := strings.NewReader("{\n  \"items\": [\n    {\n      \"id\": \"643fd856d66b6528195ee2ca\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    },\n    {\n      \"id\": \"643fd856d66b6528195ee2cb\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    },\n    {\n      \"id\": \"643fd856d66b6528195ee2cc\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    }\n  ]\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby SecondaryLocale
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"items\": [\n    {\n      \"id\": \"643fd856d66b6528195ee2ca\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    },\n    {\n      \"id\": \"643fd856d66b6528195ee2cb\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    },\n    {\n      \"id\": \"643fd856d66b6528195ee2cc\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java SecondaryLocale
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"items\": [\n    {\n      \"id\": \"643fd856d66b6528195ee2ca\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    },\n    {\n      \"id\": \"643fd856d66b6528195ee2cb\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    },\n    {\n      \"id\": \"643fd856d66b6528195ee2cc\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    }\n  ]\n}")
  .asString();
```

```php SecondaryLocale
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish', [
  'body' => '{
  "items": [
    {
      "id": "643fd856d66b6528195ee2ca",
      "cmsLocaleIds": [
        "653ad57de882f528b32e810e"
      ]
    },
    {
      "id": "643fd856d66b6528195ee2cb",
      "cmsLocaleIds": [
        "653ad57de882f528b32e810e"
      ]
    },
    {
      "id": "643fd856d66b6528195ee2cc",
      "cmsLocaleIds": [
        "653ad57de882f528b32e810e"
      ]
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp SecondaryLocale
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"items\": [\n    {\n      \"id\": \"643fd856d66b6528195ee2ca\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    },\n    {\n      \"id\": \"643fd856d66b6528195ee2cb\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    },\n    {\n      \"id\": \"643fd856d66b6528195ee2cc\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\"\n      ]\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift SecondaryLocale
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["items": [
    [
      "id": "643fd856d66b6528195ee2ca",
      "cmsLocaleIds": ["653ad57de882f528b32e810e"]
    ],
    [
      "id": "643fd856d66b6528195ee2cb",
      "cmsLocaleIds": ["653ad57de882f528b32e810e"]
    ],
    [
      "id": "643fd856d66b6528195ee2cc",
      "cmsLocaleIds": ["653ad57de882f528b32e810e"]
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python MultipleLocales
from webflow import Webflow
from webflow.resources.collections.resources.items import (
    ItemIDsWithLocales,
    ItemsPublishItemRequestItemsItemsItem,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.publish_item(
    collection_id="580e63fc8c9a982ac9b8b745",
    request=ItemIDsWithLocales(
        items=[
            ItemsPublishItemRequestItemsItemsItem(
                id="643fd856d66b6528195ee2ca",
                cms_locale_ids=[
                    "653ad57de882f528b32e810e",
                    "6514390aea353fc691d69827",
                    "65143930ea353fc691d69cd8",
                ],
            )
        ],
    ),
)

```

```typescript MultipleLocales
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.publishItem("580e63fc8c9a982ac9b8b745", {
    items: [{
            id: "643fd856d66b6528195ee2ca",
            cmsLocaleIds: ["653ad57de882f528b32e810e", "6514390aea353fc691d69827", "65143930ea353fc691d69cd8"]
        }]
});

```

```go MultipleLocales
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish"

	payload := strings.NewReader("{\n  \"items\": [\n    {\n      \"id\": \"643fd856d66b6528195ee2ca\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\",\n        \"6514390aea353fc691d69827\",\n        \"65143930ea353fc691d69cd8\"\n      ]\n    }\n  ]\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby MultipleLocales
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"items\": [\n    {\n      \"id\": \"643fd856d66b6528195ee2ca\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\",\n        \"6514390aea353fc691d69827\",\n        \"65143930ea353fc691d69cd8\"\n      ]\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java MultipleLocales
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"items\": [\n    {\n      \"id\": \"643fd856d66b6528195ee2ca\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\",\n        \"6514390aea353fc691d69827\",\n        \"65143930ea353fc691d69cd8\"\n      ]\n    }\n  ]\n}")
  .asString();
```

```php MultipleLocales
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish', [
  'body' => '{
  "items": [
    {
      "id": "643fd856d66b6528195ee2ca",
      "cmsLocaleIds": [
        "653ad57de882f528b32e810e",
        "6514390aea353fc691d69827",
        "65143930ea353fc691d69cd8"
      ]
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp MultipleLocales
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"items\": [\n    {\n      \"id\": \"643fd856d66b6528195ee2ca\",\n      \"cmsLocaleIds\": [\n        \"653ad57de882f528b32e810e\",\n        \"6514390aea353fc691d69827\",\n        \"65143930ea353fc691d69cd8\"\n      ]\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift MultipleLocales
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["items": [
    [
      "id": "643fd856d66b6528195ee2ca",
      "cmsLocaleIds": ["653ad57de882f528b32e810e", "6514390aea353fc691d69827", "65143930ea353fc691d69cd8"]
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/publish")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Live Items

GET https://api.webflow.com/v2/collections/{collection_id}/items/live

List all published items in a collection.

<Tip title="Serve data with the Content Delivery API">
  Serving data to applications in real-time? Use the Content Delivery API at `api-cdn.webflow.com` for better performance. The CDN-backed endpoint is optimized for high-volume reads, while the Data API is designed for writes and management operations.
</Tip>

Required scope | `CMS:read`


Reference: https://developers.webflow.com/data/reference/cms/collection-items/live-items/list-items-live

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Live Collection Items
  version: endpoint_collections/items.list-items-live
paths:
  /collections/{collection_id}/items/live:
    get:
      operationId: list-items-live
      summary: List Live Collection Items
      description: |
        List all published items in a collection.

        <Tip title="Serve data with the Content Delivery API">
          Serving data to applications in real-time? Use the Content Delivery API at `api-cdn.webflow.com` for better performance. The CDN-backed endpoint is optimized for high-volume reads, while the Data API is designed for writes and management operations.
        </Tip>

        Required scope | `CMS:read`
      tags:
        - - subpackage_collections
          - subpackage_collections/items
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: cmsLocaleId
          in: query
          description: >-
            Unique identifier for a CMS Locale. This UID is different from the
            Site locale identifier and is listed as `cmsLocaleId` in the Sites
            response. To query multiple locales, input a comma separated string.
          required: false
          schema:
            type: string
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: name
          in: query
          description: Filter by the exact name of the item(s)
          required: false
          schema:
            type: string
        - name: slug
          in: query
          description: Filter by the exact slug of the item
          required: false
          schema:
            type: string
        - name: lastPublished
          in: query
          description: Filter by the last published date of the item(s)
          required: false
          schema:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsLiveGetParametersLastPublished
        - name: sortBy
          in: query
          description: Sort results by the provided value
          required: false
          schema:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsLiveGetParametersSortBy
        - name: sortOrder
          in: query
          description: Sorts the results by asc or desc
          required: false
          schema:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsLiveGetParametersSortOrder
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/collections_items_list-items-live_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    CollectionsCollectionIdItemsLiveGetParametersLastPublished:
      type: object
      properties:
        lte:
          type: string
          format: date-time
          description: Filter items last published before this date
        gte:
          type: string
          format: date-time
          description: Filter items last published after this date
    CollectionsCollectionIdItemsLiveGetParametersSortBy:
      type: string
      enum:
        - value: lastPublished
        - value: name
        - value: slug
    CollectionsCollectionIdItemsLiveGetParametersSortOrder:
      type: string
      enum:
        - value: asc
        - value: desc
    CollectionsCollectionIdItemsLiveGetResponsesContentApplicationJsonSchemaItemsItemsFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
      required:
        - name
        - slug
    CollectionsCollectionIdItemsLiveGetResponsesContentApplicationJsonSchemaItemsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsLiveGetResponsesContentApplicationJsonSchemaItemsItemsFieldData
      required:
        - id
        - lastPublished
        - lastUpdated
        - createdOn
        - fieldData
    CollectionsCollectionIdItemsLiveGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          default: 100
          description: The limit specified in the request
        offset:
          type: number
          format: double
          default: 0
          description: The offset specified for pagination
        total:
          type: number
          format: double
          description: Total number of items in the collection
    collections_items_list-items-live_Response_200:
      type: object
      properties:
        items:
          type: array
          items:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsLiveGetResponsesContentApplicationJsonSchemaItemsItems
          description: List of Items within the collection
        pagination:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsLiveGetResponsesContentApplicationJsonSchemaPagination
      required:
        - items
        - pagination

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.list_items_live(
    collection_id="580e63fc8c9a982ac9b8b745",
    cms_locale_id="cmsLocaleId",
    offset=1,
    limit=1,
    name="name",
    slug="slug",
    sort_by="lastPublished",
    sort_order="asc",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.listItemsLive("580e63fc8c9a982ac9b8b745", {
    cmsLocaleId: "cmsLocaleId",
    offset: 1,
    limit: 1,
    name: "name",
    slug: "slug",
    sortBy: "lastPublished",
    sortOrder: "asc"
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?offset=0&limit=100"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?offset=0&limit=100")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?offset=0&limit=100")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?offset=0&limit=100', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?offset=0&limit=100");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?offset=0&limit=100")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Live Item

GET https://api.webflow.com/v2/collections/{collection_id}/items/{item_id}/live

Get details of a selected Collection live Item.

<Tip title="Serve data with the Content Delivery API">
  Serving data to applications in real-time? Use the Content Delivery API at `api-cdn.webflow.com` for better performance. The CDN-backed endpoint is optimized for high-volume reads, while the Data API is designed for writes and management operations.
</Tip>

Required scope | `CMS:read`


Reference: https://developers.webflow.com/data/reference/cms/collection-items/live-items/get-item-live

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Live Collection Item
  version: endpoint_collections/items.get-item-live
paths:
  /collections/{collection_id}/items/{item_id}/live:
    get:
      operationId: get-item-live
      summary: Get Live Collection Item
      description: |
        Get details of a selected Collection live Item.

        <Tip title="Serve data with the Content Delivery API">
          Serving data to applications in real-time? Use the Content Delivery API at `api-cdn.webflow.com` for better performance. The CDN-backed endpoint is optimized for high-volume reads, while the Data API is designed for writes and management operations.
        </Tip>

        Required scope | `CMS:read`
      tags:
        - - subpackage_collections
          - subpackage_collections/items
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: item_id
          in: path
          description: Unique identifier for an Item
          required: true
          schema:
            type: string
            format: objectid
        - name: cmsLocaleId
          in: query
          description: >-
            Unique identifier for a CMS Locale. This UID is different from the
            Site locale identifier and is listed as `cmsLocaleId` in the Sites
            response. To query multiple locales, input a comma separated string.
          required: false
          schema:
            type: string
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/collections_items_get-item-live_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    CollectionsCollectionIdItemsItemIdLiveGetResponsesContentApplicationJsonSchemaFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
      required:
        - name
        - slug
    collections_items_get-item-live_Response_200:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsItemIdLiveGetResponsesContentApplicationJsonSchemaFieldData
      required:
        - id
        - lastPublished
        - lastUpdated
        - createdOn
        - isArchived
        - isDraft
        - fieldData

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.get_item_live(
    collection_id="580e63fc8c9a982ac9b8b745",
    item_id="580e64008c9a982ac9b8b754",
    cms_locale_id="cmsLocaleId",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.getItemLive("580e63fc8c9a982ac9b8b745", "580e64008c9a982ac9b8b754", {
    cmsLocaleId: "cmsLocaleId"
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754/live"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754/live")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754/live")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754/live', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754/live");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/580e64008c9a982ac9b8b754/live")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Create Live Items

POST https://api.webflow.com/v2/collections/{collection_id}/items/live
Content-Type: application/json

Create item(s) in a collection that will be immediately published to the live site.


To create items across multiple locales, [please use this endpoint.](/data/reference/cms/collection-items/staged-items/create-items)


Required scope | `CMS:write`


Reference: https://developers.webflow.com/data/reference/cms/collection-items/live-items/create-item-live

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Create Live Collection Item(s)
  version: endpoint_collections/items.create-item-live
paths:
  /collections/{collection_id}/items/live:
    post:
      operationId: create-item-live
      summary: Create Live Collection Item(s)
      description: >
        Create item(s) in a collection that will be immediately published to the
        live site.



        To create items across multiple locales, [please use this
        endpoint.](/data/reference/cms/collection-items/staged-items/create-items)



        Required scope | `CMS:write`
      tags:
        - - subpackage_collections
          - subpackage_collections/items
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: skipInvalidFiles
          in: query
          description: >-
            When true, invalid files are skipped and processing continues. When
            false, the entire request fails if any file is invalid.
          required: false
          schema:
            type: boolean
            default: true
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '202':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/collections_items_create-item-live_Response_202
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: Details of the item(s) to create
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/collections_items_create-item-live_Request'
components:
  schemas:
    CollectionsCollectionIdItemsLivePostRequestBodyContentApplicationJsonSchemaOneOf0FieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
      required:
        - name
        - slug
    CollectionsItemsCreateItemLiveRequest0:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsLivePostRequestBodyContentApplicationJsonSchemaOneOf0FieldData
      required:
        - id
        - lastPublished
        - lastUpdated
        - createdOn
        - fieldData
    CollectionsCollectionIdItemsLivePostRequestBodyContentApplicationJsonSchemaOneOf1ItemsItemsFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
      required:
        - name
        - slug
    CollectionsCollectionIdItemsLivePostRequestBodyContentApplicationJsonSchemaOneOf1ItemsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsLivePostRequestBodyContentApplicationJsonSchemaOneOf1ItemsItemsFieldData
      required:
        - id
        - lastPublished
        - lastUpdated
        - createdOn
        - fieldData
    CollectionsItemsCreateItemLiveRequest1:
      type: object
      properties:
        items:
          type: array
          items:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsLivePostRequestBodyContentApplicationJsonSchemaOneOf1ItemsItems
          description: List of collection items to create
    collections_items_create-item-live_Request:
      oneOf:
        - $ref: '#/components/schemas/CollectionsItemsCreateItemLiveRequest0'
        - $ref: '#/components/schemas/CollectionsItemsCreateItemLiveRequest1'
    CollectionsCollectionIdItemsLivePostResponsesContentApplicationJsonSchemaFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
      required:
        - name
        - slug
    collections_items_create-item-live_Response_202:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsLivePostResponsesContentApplicationJsonSchemaFieldData
      required:
        - id
        - lastPublished
        - lastUpdated
        - createdOn
        - isArchived
        - isDraft
        - fieldData

```

## SDK Code Examples

```python
from webflow import CollectionItem, CollectionItemFieldData, Webflow
from webflow.resources.collections.resources.items import MultipleLiveItems

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.create_item_live(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    request=MultipleLiveItems(
        items=[
            CollectionItem(
                is_archived=False,
                is_draft=False,
                field_data=CollectionItemFieldData(
                    name="Senior Data Analyst",
                    slug="senior-data-analyst",
                ),
            ),
            CollectionItem(
                is_archived=False,
                is_draft=False,
                field_data=CollectionItemFieldData(
                    name="Product Manager",
                    slug="product-manager",
                ),
            ),
        ],
    ),
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.createItemLive("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    body: {
        isArchived: false,
        isDraft: false,
        fieldData: {
            name: "The Hitchhiker's Guide to the Galaxy",
            slug: "hitchhikers-guide-to-the-galaxy"
        }
    }
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true"

	payload := strings.NewReader("{\n  \"fieldData\": {\n    \"name\": \"My new item\",\n    \"slug\": \"my-new-item\",\n    \"date\": \"2022-11-18T00:00:00.000Z\",\n    \"featured\": false,\n    \"color\": \"#db4b68\"\n  },\n  \"items\": [\n    {\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"fieldData\": {\n    \"name\": \"My new item\",\n    \"slug\": \"my-new-item\",\n    \"date\": \"2022-11-18T00:00:00.000Z\",\n    \"featured\": false,\n    \"color\": \"#db4b68\"\n  },\n  \"items\": [\n    {\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"fieldData\": {\n    \"name\": \"My new item\",\n    \"slug\": \"my-new-item\",\n    \"date\": \"2022-11-18T00:00:00.000Z\",\n    \"featured\": false,\n    \"color\": \"#db4b68\"\n  },\n  \"items\": [\n    {\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true', [
  'body' => '{
  "fieldData": {
    "name": "My new item",
    "slug": "my-new-item",
    "date": "2022-11-18T00:00:00.000Z",
    "featured": false,
    "color": "#db4b68"
  },
  "items": [
    {
      "isArchived": false,
      "isDraft": false,
      "fieldData": {
        "name": "Senior Data Analyst",
        "slug": "senior-data-analyst",
        "url": "https://boards.greenhouse.io/webflow/jobs/26567701",
        "department": "Data"
      }
    },
    {
      "isArchived": false,
      "isDraft": false,
      "fieldData": {
        "name": "Product Manager",
        "slug": "product-manager",
        "url": "https://boards.greenhouse.io/webflow/jobs/31234567",
        "department": "Product"
      }
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"fieldData\": {\n    \"name\": \"My new item\",\n    \"slug\": \"my-new-item\",\n    \"date\": \"2022-11-18T00:00:00.000Z\",\n    \"featured\": false,\n    \"color\": \"#db4b68\"\n  },\n  \"items\": [\n    {\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "fieldData": [
    "name": "My new item",
    "slug": "my-new-item",
    "date": "2022-11-18T00:00:00.000Z",
    "featured": false,
    "color": "#db4b68"
  ],
  "items": [
    [
      "isArchived": false,
      "isDraft": false,
      "fieldData": [
        "name": "Senior Data Analyst",
        "slug": "senior-data-analyst",
        "url": "https://boards.greenhouse.io/webflow/jobs/26567701",
        "department": "Data"
      ]
    ],
    [
      "isArchived": false,
      "isDraft": false,
      "fieldData": [
        "name": "Product Manager",
        "slug": "product-manager",
        "url": "https://boards.greenhouse.io/webflow/jobs/31234567",
        "department": "Product"
      ]
    ]
  ]
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python
from webflow import CollectionItem, CollectionItemFieldData, Webflow
from webflow.resources.collections.resources.items import MultipleLiveItems

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.create_item_live(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    request=MultipleLiveItems(
        items=[
            CollectionItem(
                is_archived=False,
                is_draft=False,
                field_data=CollectionItemFieldData(
                    name="Senior Data Analyst",
                    slug="senior-data-analyst",
                ),
            ),
            CollectionItem(
                is_archived=False,
                is_draft=False,
                field_data=CollectionItemFieldData(
                    name="Product Manager",
                    slug="product-manager",
                ),
            ),
        ],
    ),
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.createItemLive("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    body: {
        isArchived: false,
        isDraft: false,
        fieldData: {
            name: "The Hitchhiker's Guide to the Galaxy",
            slug: "hitchhikers-guide-to-the-galaxy"
        }
    }
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true"

	payload := strings.NewReader("{\n  \"isArchived\": false,\n  \"isDraft\": false,\n  \"fieldData\": {\n    \"name\": \"The Hitchhiker's Guide to the Galaxy\",\n    \"slug\": \"hitchhikers-guide-to-the-galaxy\",\n    \"plain-text\": \"Don't Panic.\",\n    \"rich-text\": \"<h3>A Guide to Interstellar Travel</h3><p>A towel is about the most massively useful thing an interstellar hitchhiker can have. <strong>Don't forget yours!</strong></p>\",\n    \"main-image\": {\n      \"fileId\": \"62b720ef280c7a7a3be8cabe\",\n      \"url\": \"/files/62b720ef280c7a7a3be8cabe_image.png\"\n    },\n    \"image-gallery\": [\n      {\n        \"fileId\": \"62b720ef280c7a7a3be8cabd\",\n        \"url\": \"/files/62b720ef280c7a7a3be8cabd_image.png\"\n      },\n      {\n        \"fileId\": \"62b720ef280c7a7a3be8cabe\",\n        \"url\": \"/files/62b720ef280c7a7a3be8cabe_image.png\"\n      }\n    ],\n    \"intro-video\": \"https://www.youtube.com/watch?v=aJ83KAggd-4\",\n    \"official-site\": \"https://hitchhikers.fandom.com/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy\",\n    \"contact-email\": \"zaphod.beeblebrox@heartofgold.gov\",\n    \"support-phone\": \"424-242-4242\",\n    \"answer-to-everything\": 42,\n    \"release-date\": \"1979-10-12T00:00:00.000Z\",\n    \"is-featured\": true,\n    \"brand-color\": \"#000000\",\n    \"category\": \"62b720ef280c7a7a3be8cabf\",\n    \"author\": \"62b720ef280c7a7a3be8cab0\",\n    \"tags\": [\n      \"62b720ef280c7a7a3be8cab1\",\n      \"62b720ef280c7a7a3be8cab2\"\n    ],\n    \"downloadable-asset\": {\n      \"fileId\": \"62b720ef280c7a7a3be8cab3\",\n      \"url\": \"/files/62b720ef280c7a7a3be8cab3_document.pdf\"\n    }\n  }\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"isArchived\": false,\n  \"isDraft\": false,\n  \"fieldData\": {\n    \"name\": \"The Hitchhiker's Guide to the Galaxy\",\n    \"slug\": \"hitchhikers-guide-to-the-galaxy\",\n    \"plain-text\": \"Don't Panic.\",\n    \"rich-text\": \"<h3>A Guide to Interstellar Travel</h3><p>A towel is about the most massively useful thing an interstellar hitchhiker can have. <strong>Don't forget yours!</strong></p>\",\n    \"main-image\": {\n      \"fileId\": \"62b720ef280c7a7a3be8cabe\",\n      \"url\": \"/files/62b720ef280c7a7a3be8cabe_image.png\"\n    },\n    \"image-gallery\": [\n      {\n        \"fileId\": \"62b720ef280c7a7a3be8cabd\",\n        \"url\": \"/files/62b720ef280c7a7a3be8cabd_image.png\"\n      },\n      {\n        \"fileId\": \"62b720ef280c7a7a3be8cabe\",\n        \"url\": \"/files/62b720ef280c7a7a3be8cabe_image.png\"\n      }\n    ],\n    \"intro-video\": \"https://www.youtube.com/watch?v=aJ83KAggd-4\",\n    \"official-site\": \"https://hitchhikers.fandom.com/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy\",\n    \"contact-email\": \"zaphod.beeblebrox@heartofgold.gov\",\n    \"support-phone\": \"424-242-4242\",\n    \"answer-to-everything\": 42,\n    \"release-date\": \"1979-10-12T00:00:00.000Z\",\n    \"is-featured\": true,\n    \"brand-color\": \"#000000\",\n    \"category\": \"62b720ef280c7a7a3be8cabf\",\n    \"author\": \"62b720ef280c7a7a3be8cab0\",\n    \"tags\": [\n      \"62b720ef280c7a7a3be8cab1\",\n      \"62b720ef280c7a7a3be8cab2\"\n    ],\n    \"downloadable-asset\": {\n      \"fileId\": \"62b720ef280c7a7a3be8cab3\",\n      \"url\": \"/files/62b720ef280c7a7a3be8cab3_document.pdf\"\n    }\n  }\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"isArchived\": false,\n  \"isDraft\": false,\n  \"fieldData\": {\n    \"name\": \"The Hitchhiker's Guide to the Galaxy\",\n    \"slug\": \"hitchhikers-guide-to-the-galaxy\",\n    \"plain-text\": \"Don't Panic.\",\n    \"rich-text\": \"<h3>A Guide to Interstellar Travel</h3><p>A towel is about the most massively useful thing an interstellar hitchhiker can have. <strong>Don't forget yours!</strong></p>\",\n    \"main-image\": {\n      \"fileId\": \"62b720ef280c7a7a3be8cabe\",\n      \"url\": \"/files/62b720ef280c7a7a3be8cabe_image.png\"\n    },\n    \"image-gallery\": [\n      {\n        \"fileId\": \"62b720ef280c7a7a3be8cabd\",\n        \"url\": \"/files/62b720ef280c7a7a3be8cabd_image.png\"\n      },\n      {\n        \"fileId\": \"62b720ef280c7a7a3be8cabe\",\n        \"url\": \"/files/62b720ef280c7a7a3be8cabe_image.png\"\n      }\n    ],\n    \"intro-video\": \"https://www.youtube.com/watch?v=aJ83KAggd-4\",\n    \"official-site\": \"https://hitchhikers.fandom.com/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy\",\n    \"contact-email\": \"zaphod.beeblebrox@heartofgold.gov\",\n    \"support-phone\": \"424-242-4242\",\n    \"answer-to-everything\": 42,\n    \"release-date\": \"1979-10-12T00:00:00.000Z\",\n    \"is-featured\": true,\n    \"brand-color\": \"#000000\",\n    \"category\": \"62b720ef280c7a7a3be8cabf\",\n    \"author\": \"62b720ef280c7a7a3be8cab0\",\n    \"tags\": [\n      \"62b720ef280c7a7a3be8cab1\",\n      \"62b720ef280c7a7a3be8cab2\"\n    ],\n    \"downloadable-asset\": {\n      \"fileId\": \"62b720ef280c7a7a3be8cab3\",\n      \"url\": \"/files/62b720ef280c7a7a3be8cab3_document.pdf\"\n    }\n  }\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true', [
  'body' => '{
  "isArchived": false,
  "isDraft": false,
  "fieldData": {
    "name": "The Hitchhiker\'s Guide to the Galaxy",
    "slug": "hitchhikers-guide-to-the-galaxy",
    "plain-text": "Don\'t Panic.",
    "rich-text": "<h3>A Guide to Interstellar Travel</h3><p>A towel is about the most massively useful thing an interstellar hitchhiker can have. <strong>Don\'t forget yours!</strong></p>",
    "main-image": {
      "fileId": "62b720ef280c7a7a3be8cabe",
      "url": "/files/62b720ef280c7a7a3be8cabe_image.png"
    },
    "image-gallery": [
      {
        "fileId": "62b720ef280c7a7a3be8cabd",
        "url": "/files/62b720ef280c7a7a3be8cabd_image.png"
      },
      {
        "fileId": "62b720ef280c7a7a3be8cabe",
        "url": "/files/62b720ef280c7a7a3be8cabe_image.png"
      }
    ],
    "intro-video": "https://www.youtube.com/watch?v=aJ83KAggd-4",
    "official-site": "https://hitchhikers.fandom.com/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy",
    "contact-email": "zaphod.beeblebrox@heartofgold.gov",
    "support-phone": "424-242-4242",
    "answer-to-everything": 42,
    "release-date": "1979-10-12T00:00:00.000Z",
    "is-featured": true,
    "brand-color": "#000000",
    "category": "62b720ef280c7a7a3be8cabf",
    "author": "62b720ef280c7a7a3be8cab0",
    "tags": [
      "62b720ef280c7a7a3be8cab1",
      "62b720ef280c7a7a3be8cab2"
    ],
    "downloadable-asset": {
      "fileId": "62b720ef280c7a7a3be8cab3",
      "url": "/files/62b720ef280c7a7a3be8cab3_document.pdf"
    }
  }
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"isArchived\": false,\n  \"isDraft\": false,\n  \"fieldData\": {\n    \"name\": \"The Hitchhiker's Guide to the Galaxy\",\n    \"slug\": \"hitchhikers-guide-to-the-galaxy\",\n    \"plain-text\": \"Don't Panic.\",\n    \"rich-text\": \"<h3>A Guide to Interstellar Travel</h3><p>A towel is about the most massively useful thing an interstellar hitchhiker can have. <strong>Don't forget yours!</strong></p>\",\n    \"main-image\": {\n      \"fileId\": \"62b720ef280c7a7a3be8cabe\",\n      \"url\": \"/files/62b720ef280c7a7a3be8cabe_image.png\"\n    },\n    \"image-gallery\": [\n      {\n        \"fileId\": \"62b720ef280c7a7a3be8cabd\",\n        \"url\": \"/files/62b720ef280c7a7a3be8cabd_image.png\"\n      },\n      {\n        \"fileId\": \"62b720ef280c7a7a3be8cabe\",\n        \"url\": \"/files/62b720ef280c7a7a3be8cabe_image.png\"\n      }\n    ],\n    \"intro-video\": \"https://www.youtube.com/watch?v=aJ83KAggd-4\",\n    \"official-site\": \"https://hitchhikers.fandom.com/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy\",\n    \"contact-email\": \"zaphod.beeblebrox@heartofgold.gov\",\n    \"support-phone\": \"424-242-4242\",\n    \"answer-to-everything\": 42,\n    \"release-date\": \"1979-10-12T00:00:00.000Z\",\n    \"is-featured\": true,\n    \"brand-color\": \"#000000\",\n    \"category\": \"62b720ef280c7a7a3be8cabf\",\n    \"author\": \"62b720ef280c7a7a3be8cab0\",\n    \"tags\": [\n      \"62b720ef280c7a7a3be8cab1\",\n      \"62b720ef280c7a7a3be8cab2\"\n    ],\n    \"downloadable-asset\": {\n      \"fileId\": \"62b720ef280c7a7a3be8cab3\",\n      \"url\": \"/files/62b720ef280c7a7a3be8cab3_document.pdf\"\n    }\n  }\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "isArchived": false,
  "isDraft": false,
  "fieldData": [
    "name": "The Hitchhiker's Guide to the Galaxy",
    "slug": "hitchhikers-guide-to-the-galaxy",
    "plain-text": "Don't Panic.",
    "rich-text": "<h3>A Guide to Interstellar Travel</h3><p>A towel is about the most massively useful thing an interstellar hitchhiker can have. <strong>Don't forget yours!</strong></p>",
    "main-image": [
      "fileId": "62b720ef280c7a7a3be8cabe",
      "url": "/files/62b720ef280c7a7a3be8cabe_image.png"
    ],
    "image-gallery": [
      [
        "fileId": "62b720ef280c7a7a3be8cabd",
        "url": "/files/62b720ef280c7a7a3be8cabd_image.png"
      ],
      [
        "fileId": "62b720ef280c7a7a3be8cabe",
        "url": "/files/62b720ef280c7a7a3be8cabe_image.png"
      ]
    ],
    "intro-video": "https://www.youtube.com/watch?v=aJ83KAggd-4",
    "official-site": "https://hitchhikers.fandom.com/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy",
    "contact-email": "zaphod.beeblebrox@heartofgold.gov",
    "support-phone": "424-242-4242",
    "answer-to-everything": 42,
    "release-date": "1979-10-12T00:00:00.000Z",
    "is-featured": true,
    "brand-color": "#000000",
    "category": "62b720ef280c7a7a3be8cabf",
    "author": "62b720ef280c7a7a3be8cab0",
    "tags": ["62b720ef280c7a7a3be8cab1", "62b720ef280c7a7a3be8cab2"],
    "downloadable-asset": [
      "fileId": "62b720ef280c7a7a3be8cab3",
      "url": "/files/62b720ef280c7a7a3be8cab3_document.pdf"
    ]
  ]
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Live Items

PATCH https://api.webflow.com/v2/collections/{collection_id}/items/live
Content-Type: application/json

Update a single published item or multiple published items (up to 100) in a Collection

<Tip title="Localization Tip">Items will only be updated in the primary locale, unless a `cmsLocaleId` is included in the request.</Tip>

Required scope | `CMS:write`


Reference: https://developers.webflow.com/data/reference/cms/collection-items/live-items/update-items-live

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Live Collection Items
  version: endpoint_collections/items.update-items-live
paths:
  /collections/{collection_id}/items/live:
    patch:
      operationId: update-items-live
      summary: Update Live Collection Items
      description: >
        Update a single published item or multiple published items (up to 100)
        in a Collection


        <Tip title="Localization Tip">Items will only be updated in the primary
        locale, unless a `cmsLocaleId` is included in the request.</Tip>


        Required scope | `CMS:write`
      tags:
        - - subpackage_collections
          - subpackage_collections/items
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: skipInvalidFiles
          in: query
          description: >-
            When true, invalid files are skipped and processing continues. When
            false, the entire request fails if any file is invalid.
          required: false
          schema:
            type: boolean
            default: true
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/collections_items_update-items-live_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: Conflict with server data. Item not published
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: Details of the live items to update
        content:
          application/json:
            schema:
              type: object
              properties:
                items:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/CollectionsCollectionIdItemsLivePatchRequestBodyContentApplicationJsonSchemaItemsItems
components:
  schemas:
    CollectionsCollectionIdItemsLivePatchRequestBodyContentApplicationJsonSchemaItemsItemsFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
    CollectionsCollectionIdItemsLivePatchRequestBodyContentApplicationJsonSchemaItemsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsLivePatchRequestBodyContentApplicationJsonSchemaItemsItemsFieldData
      required:
        - id
    CollectionsCollectionIdItemsLivePatchResponsesContentApplicationJsonSchemaItemsItemsFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Item
        slug:
          type: string
          description: >-
            URL structure of the Item in your site. Note: Updates to an item
            slug will break all links referencing the old slug.
      required:
        - name
        - slug
    CollectionsCollectionIdItemsLivePatchResponsesContentApplicationJsonSchemaItemsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-string
          description: The date the item was last published
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Item is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/CollectionsCollectionIdItemsLivePatchResponsesContentApplicationJsonSchemaItemsItemsFieldData
      required:
        - id
        - lastPublished
        - lastUpdated
        - createdOn
        - fieldData
    collections_items_update-items-live_Response_200:
      type: object
      properties:
        items:
          type: array
          items:
            $ref: >-
              #/components/schemas/CollectionsCollectionIdItemsLivePatchResponsesContentApplicationJsonSchemaItemsItems
          description: List of Items within the collection

```

## SDK Code Examples

```python Multiple items updated across multiple locales
from webflow import (
    CollectionItemWithIdInput,
    CollectionItemWithIdInputFieldData,
    Webflow,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.update_items_live(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    items=[
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5ea6",
            cms_locale_id="66f6e966c9e1dc700a857ca5",
            field_data=CollectionItemWithIdInputFieldData(
                name="Ne Paniquez Pas",
                slug="ne-paniquez-pas",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5ea6",
            cms_locale_id="66f6e966c9e1dc700a857ca4",
            field_data=CollectionItemWithIdInputFieldData(
                name="No Entrar en Pánico",
                slug="no-entrar-en-panico",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5eaa",
            cms_locale_id="66f6e966c9e1dc700a857ca5",
            field_data=CollectionItemWithIdInputFieldData(
                name="Au Revoir et Merci pour Tous les Poissons",
                slug="au-revoir-et-merci",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5eaa",
            cms_locale_id="66f6e966c9e1dc700a857ca4",
            field_data=CollectionItemWithIdInputFieldData(
                name="Hasta Luego y Gracias por Todo el Pescado",
                slug="hasta-luego-y-gracias",
            ),
        ),
    ],
)

```

```typescript Multiple items updated across multiple locales
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.updateItemsLive("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    items: [{
            id: "66f6ed9576ddacf3149d5ea6",
            cmsLocaleId: "66f6e966c9e1dc700a857ca5",
            fieldData: {
                name: "Ne Paniquez Pas",
                slug: "ne-paniquez-pas"
            }
        }, {
            id: "66f6ed9576ddacf3149d5ea6",
            cmsLocaleId: "66f6e966c9e1dc700a857ca4",
            fieldData: {
                name: "No Entrar en P\u00E1nico",
                slug: "no-entrar-en-panico"
            }
        }, {
            id: "66f6ed9576ddacf3149d5eaa",
            cmsLocaleId: "66f6e966c9e1dc700a857ca5",
            fieldData: {
                name: "Au Revoir et Merci pour Tous les Poissons",
                slug: "au-revoir-et-merci"
            }
        }, {
            id: "66f6ed9576ddacf3149d5eaa",
            cmsLocaleId: "66f6e966c9e1dc700a857ca4",
            fieldData: {
                name: "Hasta Luego y Gracias por Todo el Pescado",
                slug: "hasta-luego-y-gracias"
            }
        }]
});

```

```go Multiple items updated across multiple locales
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true"

	req, _ := http.NewRequest("PATCH", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby Multiple items updated across multiple locales
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'

response = http.request(request)
puts response.read_body
```

```java Multiple items updated across multiple locales
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .asString();
```

```php Multiple items updated across multiple locales
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp Multiple items updated across multiple locales
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
IRestResponse response = client.Execute(request);
```

```swift Multiple items updated across multiple locales
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python Multiple items updated in a single locale
from webflow import (
    CollectionItemWithIdInput,
    CollectionItemWithIdInputFieldData,
    Webflow,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.update_items_live(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    items=[
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5ea6",
            cms_locale_id="66f6e966c9e1dc700a857ca5",
            field_data=CollectionItemWithIdInputFieldData(
                name="Ne Paniquez Pas",
                slug="ne-paniquez-pas",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5ea6",
            cms_locale_id="66f6e966c9e1dc700a857ca4",
            field_data=CollectionItemWithIdInputFieldData(
                name="No Entrar en Pánico",
                slug="no-entrar-en-panico",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5eaa",
            cms_locale_id="66f6e966c9e1dc700a857ca5",
            field_data=CollectionItemWithIdInputFieldData(
                name="Au Revoir et Merci pour Tous les Poissons",
                slug="au-revoir-et-merci",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5eaa",
            cms_locale_id="66f6e966c9e1dc700a857ca4",
            field_data=CollectionItemWithIdInputFieldData(
                name="Hasta Luego y Gracias por Todo el Pescado",
                slug="hasta-luego-y-gracias",
            ),
        ),
    ],
)

```

```typescript Multiple items updated in a single locale
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.updateItemsLive("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    items: [{
            id: "66f6ed9576ddacf3149d5ea6",
            cmsLocaleId: "66f6e966c9e1dc700a857ca5",
            fieldData: {
                name: "Ne Paniquez Pas",
                slug: "ne-paniquez-pas"
            }
        }, {
            id: "66f6ed9576ddacf3149d5ea6",
            cmsLocaleId: "66f6e966c9e1dc700a857ca4",
            fieldData: {
                name: "No Entrar en P\u00E1nico",
                slug: "no-entrar-en-panico"
            }
        }, {
            id: "66f6ed9576ddacf3149d5eaa",
            cmsLocaleId: "66f6e966c9e1dc700a857ca5",
            fieldData: {
                name: "Au Revoir et Merci pour Tous les Poissons",
                slug: "au-revoir-et-merci"
            }
        }, {
            id: "66f6ed9576ddacf3149d5eaa",
            cmsLocaleId: "66f6e966c9e1dc700a857ca4",
            fieldData: {
                name: "Hasta Luego y Gracias por Todo el Pescado",
                slug: "hasta-luego-y-gracias"
            }
        }]
});

```

```go Multiple items updated in a single locale
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true"

	req, _ := http.NewRequest("PATCH", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby Multiple items updated in a single locale
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'

response = http.request(request)
puts response.read_body
```

```java Multiple items updated in a single locale
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .asString();
```

```php Multiple items updated in a single locale
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp Multiple items updated in a single locale
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
IRestResponse response = client.Execute(request);
```

```swift Multiple items updated in a single locale
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python LocalizedItems
from webflow import (
    CollectionItemWithIdInput,
    CollectionItemWithIdInputFieldData,
    Webflow,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.update_items_live(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    items=[
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5ea6",
            cms_locale_id="66f6e966c9e1dc700a857ca5",
            field_data=CollectionItemWithIdInputFieldData(
                name="Ne Paniquez Pas",
                slug="ne-paniquez-pas",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5ea6",
            cms_locale_id="66f6e966c9e1dc700a857ca4",
            field_data=CollectionItemWithIdInputFieldData(
                name="No Entrar en Pánico",
                slug="no-entrar-en-panico",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5eaa",
            cms_locale_id="66f6e966c9e1dc700a857ca5",
            field_data=CollectionItemWithIdInputFieldData(
                name="Au Revoir et Merci pour Tous les Poissons",
                slug="au-revoir-et-merci",
            ),
        ),
        CollectionItemWithIdInput(
            id="66f6ed9576ddacf3149d5eaa",
            cms_locale_id="66f6e966c9e1dc700a857ca4",
            field_data=CollectionItemWithIdInputFieldData(
                name="Hasta Luego y Gracias por Todo el Pescado",
                slug="hasta-luego-y-gracias",
            ),
        ),
    ],
)

```

```typescript LocalizedItems
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.updateItemsLive("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    items: [{
            id: "66f6ed9576ddacf3149d5ea6",
            cmsLocaleId: "66f6e966c9e1dc700a857ca5",
            fieldData: {
                name: "Ne Paniquez Pas",
                slug: "ne-paniquez-pas"
            }
        }, {
            id: "66f6ed9576ddacf3149d5ea6",
            cmsLocaleId: "66f6e966c9e1dc700a857ca4",
            fieldData: {
                name: "No Entrar en P\u00E1nico",
                slug: "no-entrar-en-panico"
            }
        }, {
            id: "66f6ed9576ddacf3149d5eaa",
            cmsLocaleId: "66f6e966c9e1dc700a857ca5",
            fieldData: {
                name: "Au Revoir et Merci pour Tous les Poissons",
                slug: "au-revoir-et-merci"
            }
        }, {
            id: "66f6ed9576ddacf3149d5eaa",
            cmsLocaleId: "66f6e966c9e1dc700a857ca4",
            fieldData: {
                name: "Hasta Luego y Gracias por Todo el Pescado",
                slug: "hasta-luego-y-gracias"
            }
        }]
});

```

```go LocalizedItems
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true"

	payload := strings.NewReader("{\n  \"items\": [\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Ne Paniquez Pas\",\n        \"slug\": \"ne-paniquez-pas\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"No Entrar en Pánico\",\n        \"slug\": \"no-entrar-en-panico\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Au Revoir et Merci pour Tous les Poissons\",\n        \"slug\": \"au-revoir-et-merci\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"Hasta Luego y Gracias por Todo el Pescado\",\n        \"slug\": \"hasta-luego-y-gracias\",\n        \"featured\": false\n      }\n    }\n  ]\n}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby LocalizedItems
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"items\": [\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Ne Paniquez Pas\",\n        \"slug\": \"ne-paniquez-pas\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"No Entrar en Pánico\",\n        \"slug\": \"no-entrar-en-panico\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Au Revoir et Merci pour Tous les Poissons\",\n        \"slug\": \"au-revoir-et-merci\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"Hasta Luego y Gracias por Todo el Pescado\",\n        \"slug\": \"hasta-luego-y-gracias\",\n        \"featured\": false\n      }\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java LocalizedItems
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"items\": [\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Ne Paniquez Pas\",\n        \"slug\": \"ne-paniquez-pas\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"No Entrar en Pánico\",\n        \"slug\": \"no-entrar-en-panico\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Au Revoir et Merci pour Tous les Poissons\",\n        \"slug\": \"au-revoir-et-merci\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"Hasta Luego y Gracias por Todo el Pescado\",\n        \"slug\": \"hasta-luego-y-gracias\",\n        \"featured\": false\n      }\n    }\n  ]\n}")
  .asString();
```

```php LocalizedItems
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true', [
  'body' => '{
  "items": [
    {
      "id": "66f6ed9576ddacf3149d5ea6",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca5",
      "fieldData": {
        "name": "Ne Paniquez Pas",
        "slug": "ne-paniquez-pas",
        "featured": false
      }
    },
    {
      "id": "66f6ed9576ddacf3149d5ea6",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca4",
      "fieldData": {
        "name": "No Entrar en Pánico",
        "slug": "no-entrar-en-panico",
        "featured": false
      }
    },
    {
      "id": "66f6ed9576ddacf3149d5eaa",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca5",
      "fieldData": {
        "name": "Au Revoir et Merci pour Tous les Poissons",
        "slug": "au-revoir-et-merci",
        "featured": false
      }
    },
    {
      "id": "66f6ed9576ddacf3149d5eaa",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca4",
      "fieldData": {
        "name": "Hasta Luego y Gracias por Todo el Pescado",
        "slug": "hasta-luego-y-gracias",
        "featured": false
      }
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp LocalizedItems
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"items\": [\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Ne Paniquez Pas\",\n        \"slug\": \"ne-paniquez-pas\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5ea6\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"No Entrar en Pánico\",\n        \"slug\": \"no-entrar-en-panico\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca5\",\n      \"fieldData\": {\n        \"name\": \"Au Revoir et Merci pour Tous les Poissons\",\n        \"slug\": \"au-revoir-et-merci\",\n        \"featured\": false\n      }\n    },\n    {\n      \"id\": \"66f6ed9576ddacf3149d5eaa\",\n      \"cmsLocaleId\": \"66f6e966c9e1dc700a857ca4\",\n      \"fieldData\": {\n        \"name\": \"Hasta Luego y Gracias por Todo el Pescado\",\n        \"slug\": \"hasta-luego-y-gracias\",\n        \"featured\": false\n      }\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift LocalizedItems
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["items": [
    [
      "id": "66f6ed9576ddacf3149d5ea6",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca5",
      "fieldData": [
        "name": "Ne Paniquez Pas",
        "slug": "ne-paniquez-pas",
        "featured": false
      ]
    ],
    [
      "id": "66f6ed9576ddacf3149d5ea6",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca4",
      "fieldData": [
        "name": "No Entrar en Pánico",
        "slug": "no-entrar-en-panico",
        "featured": false
      ]
    ],
    [
      "id": "66f6ed9576ddacf3149d5eaa",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca5",
      "fieldData": [
        "name": "Au Revoir et Merci pour Tous les Poissons",
        "slug": "au-revoir-et-merci",
        "featured": false
      ]
    ],
    [
      "id": "66f6ed9576ddacf3149d5eaa",
      "cmsLocaleId": "66f6e966c9e1dc700a857ca4",
      "fieldData": [
        "name": "Hasta Luego y Gracias por Todo el Pescado",
        "slug": "hasta-luego-y-gracias",
        "featured": false
      ]
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

```python MultipleItems
from webflow import (
    CollectionItemWithIdInput,
    CollectionItemWithIdInputFieldData,
    Webflow,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.update_items_live(
    collection_id="580e63fc8c9a982ac9b8b745",
    skip_invalid_files=True,
    items=[
        CollectionItemWithIdInput(
            id="580e64008c9a982ac9b8b754",
            is_archived=False,
            is_draft=False,
            field_data=CollectionItemWithIdInputFieldData(
                name="Senior Data Analyst",
                slug="senior-data-analyst",
            ),
        ),
        CollectionItemWithIdInput(
            id="580e64008c9a982ac9b8b754",
            is_archived=False,
            is_draft=False,
            field_data=CollectionItemWithIdInputFieldData(
                name="Product Manager",
                slug="product-manager",
            ),
        ),
    ],
)

```

```typescript MultipleItems
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.updateItemsLive("580e63fc8c9a982ac9b8b745", {
    skipInvalidFiles: true,
    items: [{
            id: "580e64008c9a982ac9b8b754",
            isArchived: false,
            isDraft: false,
            fieldData: {
                name: "Senior Data Analyst",
                slug: "senior-data-analyst"
            }
        }, {
            id: "580e64008c9a982ac9b8b754",
            isArchived: false,
            isDraft: false,
            fieldData: {
                name: "Product Manager",
                slug: "product-manager"
            }
        }]
});

```

```go MultipleItems
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true"

	payload := strings.NewReader("{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby MultipleItems
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java MultipleItems
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}")
  .asString();
```

```php MultipleItems
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true', [
  'body' => '{
  "items": [
    {
      "id": "580e64008c9a982ac9b8b754",
      "isArchived": false,
      "isDraft": false,
      "fieldData": {
        "name": "Senior Data Analyst",
        "slug": "senior-data-analyst",
        "url": "https://boards.greenhouse.io/webflow/jobs/26567701",
        "department": "Data"
      }
    },
    {
      "id": "580e64008c9a982ac9b8b754",
      "isArchived": false,
      "isDraft": false,
      "fieldData": {
        "name": "Product Manager",
        "slug": "product-manager",
        "url": "https://boards.greenhouse.io/webflow/jobs/31234567",
        "department": "Product"
      }
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp MultipleItems
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Senior Data Analyst\",\n        \"slug\": \"senior-data-analyst\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/26567701\",\n        \"department\": \"Data\"\n      }\n    },\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\",\n      \"isArchived\": false,\n      \"isDraft\": false,\n      \"fieldData\": {\n        \"name\": \"Product Manager\",\n        \"slug\": \"product-manager\",\n        \"url\": \"https://boards.greenhouse.io/webflow/jobs/31234567\",\n        \"department\": \"Product\"\n      }\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift MultipleItems
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["items": [
    [
      "id": "580e64008c9a982ac9b8b754",
      "isArchived": false,
      "isDraft": false,
      "fieldData": [
        "name": "Senior Data Analyst",
        "slug": "senior-data-analyst",
        "url": "https://boards.greenhouse.io/webflow/jobs/26567701",
        "department": "Data"
      ]
    ],
    [
      "id": "580e64008c9a982ac9b8b754",
      "isArchived": false,
      "isDraft": false,
      "fieldData": [
        "name": "Product Manager",
        "slug": "product-manager",
        "url": "https://boards.greenhouse.io/webflow/jobs/31234567",
        "department": "Product"
      ]
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live?skipInvalidFiles=true")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Unpublish Live Items

DELETE https://api.webflow.com/v2/collections/{collection_id}/items/live
Content-Type: application/json

Unpublish up to 100 items from the live site and set the `isDraft` property to `true`. 

<Tip title="Localization Tip">Items will only be unpublished in the primary locale unless a `cmsLocaleId` is included in the request.</Tip>

Required scope | `CMS:write`


Reference: https://developers.webflow.com/data/reference/cms/collection-items/live-items/delete-items-live

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Unpublish Live Collection Items
  version: endpoint_collections/items.delete-items-live
paths:
  /collections/{collection_id}/items/live:
    delete:
      operationId: delete-items-live
      summary: Unpublish Live Collection Items
      description: >
        Unpublish up to 100 items from the live site and set the `isDraft`
        property to `true`. 


        <Tip title="Localization Tip">Items will only be unpublished in the
        primary locale unless a `cmsLocaleId` is included in the request.</Tip>


        Required scope | `CMS:write`
      tags:
        - - subpackage_collections
          - subpackage_collections/items
      parameters:
        - name: collection_id
          in: path
          description: Unique identifier for a Collection
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/collections_items_delete-items-live_Response_204
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: Details of the live items to delete
        content:
          application/json:
            schema:
              type: object
              properties:
                items:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/CollectionsCollectionIdItemsLiveDeleteRequestBodyContentApplicationJsonSchemaItemsItems
              required:
                - items
components:
  schemas:
    CollectionsCollectionIdItemsLiveDeleteRequestBodyContentApplicationJsonSchemaItemsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Item
        cmsLocaleIds:
          type: array
          items:
            type: string
          description: Array of identifiers for the locales where the item will be created
      required:
        - id
    collections_items_delete-items-live_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow
from webflow.resources.collections.resources.items import (
    ItemsDeleteItemsLiveRequestItemsItem,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.collections.items.delete_items_live(
    collection_id="580e63fc8c9a982ac9b8b745",
    items=[
        ItemsDeleteItemsLiveRequestItemsItem(
            id="580e64008c9a982ac9b8b754",
        )
    ],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.collections.items.deleteItemsLive("580e63fc8c9a982ac9b8b745", {
    items: [{
            id: "580e64008c9a982ac9b8b754"
        }]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live"

	payload := strings.NewReader("{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\"\n    }\n  ]\n}")

	req, _ := http.NewRequest("DELETE", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\"\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\"\n    }\n  ]\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live', [
  'body' => '{
  "items": [
    {
      "id": "580e64008c9a982ac9b8b754"
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"items\": [\n    {\n      \"id\": \"580e64008c9a982ac9b8b754\"\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["items": [["id": "580e64008c9a982ac9b8b754"]]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/580e63fc8c9a982ac9b8b745/items/live")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Forms

GET https://api.webflow.com/v2/sites/{site_id}/forms

List forms for a given site.

Required scope | `forms:read`


Reference: https://developers.webflow.com/data/reference/forms/forms/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Forms
  version: endpoint_forms.list
paths:
  /sites/{site_id}/forms:
    get:
      operationId: list
      summary: List Forms
      description: |
        List forms for a given site.

        Required scope | `forms:read`
      tags:
        - - subpackage_forms
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/forms_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: To access this feature, the site needs to be republished.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdFormsGetResponsesContentApplicationJsonSchemaFormsItemsFieldsType:
      type: string
      enum:
        - value: Plain
        - value: Email
        - value: Password
        - value: Phone
        - value: Number
    SitesSiteIdFormsGetResponsesContentApplicationJsonSchemaFormsItemsFields:
      type: object
      properties:
        displayName:
          type: string
          description: The field name displayed on the site
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdFormsGetResponsesContentApplicationJsonSchemaFormsItemsFieldsType
          description: The field type
        placeholder:
          type:
            - string
            - 'null'
          description: The placeholder text for the field
        userVisible:
          type: boolean
          description: Whether the field is visible to the user
    SitesSiteIdFormsGetResponsesContentApplicationJsonSchemaFormsItemsResponseSettings:
      type: object
      properties:
        redirectUrl:
          type: string
          description: The url or path to redirect the user to after form submission
        redirectMethod:
          type:
            - string
            - 'null'
          description: The HTTP request method to use for the redirectUrl (eg. POST or GET)
        redirectAction:
          type:
            - string
            - 'null'
          description: The action to take after form submission
        sendEmailConfirmation:
          type: boolean
          description: Whether to send an email confirmation to the user
    SitesSiteIdFormsGetResponsesContentApplicationJsonSchemaFormsItems:
      type: object
      properties:
        displayName:
          type: string
          description: The Form name displayed on the site
        createdOn:
          type: string
          format: date-time
          description: Date that the Form was created on
        lastUpdated:
          type: string
          format: date-time
          description: Date that the Form was last updated on
        fields:
          type: object
          additionalProperties:
            $ref: >-
              #/components/schemas/SitesSiteIdFormsGetResponsesContentApplicationJsonSchemaFormsItemsFields
          description: A collection of form field objects
        responseSettings:
          $ref: >-
            #/components/schemas/SitesSiteIdFormsGetResponsesContentApplicationJsonSchemaFormsItemsResponseSettings
          description: Settings for form responses
        id:
          type: string
          format: objectid
          description: The unique ID for the Form
        siteId:
          type: string
          format: objectid
          description: The unique ID of the Site the Form belongs to
        siteDomainId:
          type: string
          format: objectid
          description: The unique ID corresponding to the site's Domain name
        pageId:
          type: string
          format: objectid
          description: The unique ID for the Page on which the Form is placed
        pageName:
          type: string
          description: The user-visible name of the Page where the Form is placed
        formElementId:
          type:
            - string
            - 'null'
          description: The unique ID of the Form element
        workspaceId:
          type: string
          format: objectid
          description: The unique ID of the Workspace the Site belongs to
    SitesSiteIdFormsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    forms_list_Response_200:
      type: object
      properties:
        forms:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdFormsGetResponsesContentApplicationJsonSchemaFormsItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdFormsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object
      required:
        - forms
        - pagination

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.forms.list(
    site_id="580e63e98c9a982ac9b8b741",
    limit=1,
    offset=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.forms.list("580e63e98c9a982ac9b8b741", {
    limit: 1,
    offset: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms?limit=100&offset=0"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms?limit=100&offset=0")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms?limit=100&offset=0")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms?limit=100&offset=0', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms?limit=100&offset=0");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms?limit=100&offset=0")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Form Schema

GET https://api.webflow.com/v2/forms/{form_id}

Get information about a given form.

Required scope | `forms:read`


Reference: https://developers.webflow.com/data/reference/forms/forms/get

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Form Schema
  version: endpoint_forms.get
paths:
  /forms/{form_id}:
    get:
      operationId: get
      summary: Get Form Schema
      description: |
        Get information about a given form.

        Required scope | `forms:read`
      tags:
        - - subpackage_forms
      parameters:
        - name: form_id
          in: path
          description: Unique identifier for a Form
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/forms_get_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    FormsFormIdGetResponsesContentApplicationJsonSchemaFieldsType:
      type: string
      enum:
        - value: Plain
        - value: Email
        - value: Password
        - value: Phone
        - value: Number
    FormsFormIdGetResponsesContentApplicationJsonSchemaFields:
      type: object
      properties:
        displayName:
          type: string
          description: The field name displayed on the site
        type:
          $ref: >-
            #/components/schemas/FormsFormIdGetResponsesContentApplicationJsonSchemaFieldsType
          description: The field type
        placeholder:
          type:
            - string
            - 'null'
          description: The placeholder text for the field
        userVisible:
          type: boolean
          description: Whether the field is visible to the user
    FormsFormIdGetResponsesContentApplicationJsonSchemaResponseSettings:
      type: object
      properties:
        redirectUrl:
          type: string
          description: The url or path to redirect the user to after form submission
        redirectMethod:
          type:
            - string
            - 'null'
          description: The HTTP request method to use for the redirectUrl (eg. POST or GET)
        redirectAction:
          type:
            - string
            - 'null'
          description: The action to take after form submission
        sendEmailConfirmation:
          type: boolean
          description: Whether to send an email confirmation to the user
    forms_get_Response_200:
      type: object
      properties:
        displayName:
          type: string
          description: The Form name displayed on the site
        createdOn:
          type: string
          format: date-time
          description: Date that the Form was created on
        lastUpdated:
          type: string
          format: date-time
          description: Date that the Form was last updated on
        fields:
          type: object
          additionalProperties:
            $ref: >-
              #/components/schemas/FormsFormIdGetResponsesContentApplicationJsonSchemaFields
          description: A collection of form field objects
        responseSettings:
          $ref: >-
            #/components/schemas/FormsFormIdGetResponsesContentApplicationJsonSchemaResponseSettings
          description: Settings for form responses
        id:
          type: string
          format: objectid
          description: The unique ID for the Form
        siteId:
          type: string
          format: objectid
          description: The unique ID of the Site the Form belongs to
        siteDomainId:
          type: string
          format: objectid
          description: The unique ID corresponding to the site's Domain name
        pageId:
          type: string
          format: objectid
          description: The unique ID for the Page on which the Form is placed
        pageName:
          type: string
          description: The user-visible name of the Page where the Form is placed
        formElementId:
          type:
            - string
            - 'null'
          description: The unique ID of the Form element
        workspaceId:
          type: string
          format: objectid
          description: The unique ID of the Workspace the Site belongs to

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.forms.get(
    form_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.forms.get("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/forms/580e63e98c9a982ac9b8b741"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/forms/580e63e98c9a982ac9b8b741")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/forms/580e63e98c9a982ac9b8b741")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/forms/580e63e98c9a982ac9b8b741', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/forms/580e63e98c9a982ac9b8b741");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/forms/580e63e98c9a982ac9b8b741")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Form Submissions

GET https://api.webflow.com/v2/sites/{site_id}/forms/{form_id}/submissions

List form submissions for a given form ID within a specific site. 

Use the [List Form Submissions by Site endpoint](/data/reference/forms/form-submissions/list-submissions-by-site) to list form submissions for a given site with the ability to filter by a `formElementId`.

Required scope | `forms:read`


Reference: https://developers.webflow.com/data/reference/forms/form-submissions/list-submissions

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Form Submissions
  version: endpoint_sites/forms.list-submissions
paths:
  /sites/{site_id}/forms/{form_id}/submissions:
    get:
      operationId: list-submissions
      summary: List Form Submissions
      description: >
        List form submissions for a given form ID within a specific site. 


        Use the [List Form Submissions by Site
        endpoint](/data/reference/forms/form-submissions/list-submissions-by-site)
        to list form submissions for a given site with the ability to filter by
        a `formElementId`.


        Required scope | `forms:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/forms
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: form_id
          in: path
          description: Unique identifier for a Form
          required: true
          schema:
            type: string
            format: objectid
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_forms_list-submissions_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdFormsFormIdSubmissionsGetResponsesContentApplicationJsonSchemaFormSubmissionsItemsFormResponse:
      type: object
      properties: {}
    SitesSiteIdFormsFormIdSubmissionsGetResponsesContentApplicationJsonSchemaFormSubmissionsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: The unique ID of the Form submission
        displayName:
          type: string
          description: The Form name displayed on the site
        siteId:
          type: string
          format: objectid
          description: The unique ID of the Site the Form belongs to
        workspaceId:
          type: string
          format: objectid
          description: The unique ID of the Workspace the Site belongs to
        dateSubmitted:
          type: string
          format: date-time
          description: Date that the Form was submitted on
        formResponse:
          $ref: >-
            #/components/schemas/SitesSiteIdFormsFormIdSubmissionsGetResponsesContentApplicationJsonSchemaFormSubmissionsItemsFormResponse
          description: The data submitted in the Form
    SitesSiteIdFormsFormIdSubmissionsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    sites_forms_list-submissions_Response_200:
      type: object
      properties:
        formSubmissions:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdFormsFormIdSubmissionsGetResponsesContentApplicationJsonSchemaFormSubmissionsItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdFormsFormIdSubmissionsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.forms.list_submissions(
    site_id="580e63e98c9a982ac9b8b741",
    form_id="580e63e98c9a982ac9b8b741",
    offset=1,
    limit=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.forms.listSubmissions("580e63e98c9a982ac9b8b741", "580e63e98c9a982ac9b8b741", {
    offset: 1,
    limit: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms/580e63e98c9a982ac9b8b741/submissions?offset=0&limit=100"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms/580e63e98c9a982ac9b8b741/submissions?offset=0&limit=100")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms/580e63e98c9a982ac9b8b741/submissions?offset=0&limit=100")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms/580e63e98c9a982ac9b8b741/submissions?offset=0&limit=100', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms/580e63e98c9a982ac9b8b741/submissions?offset=0&limit=100");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/forms/580e63e98c9a982ac9b8b741/submissions?offset=0&limit=100")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Form Submissions by Site

GET https://api.webflow.com/v2/sites/{site_id}/form_submissions

List all form submissions for a given site with the ability to filter submissions by a centralized `elementId`.

Add `elementId` when you want to filter form submissions to a specific form in a site. You can get the `elementId` from the [List forms endpoint](/data/reference/forms/forms/list) (displayed as `formElementId` in the response). 

<Note title="Forms in components">
When a form is used in a Webflow component definition, each instance of the component will yield a unique form. Adding the `elementId` in this request ensures this API response includes all submissions from that core form, wherever that form is used in instantiated components.
</Note>

Use the [List Form Submissions endpoint](/data/reference/forms/form-submissions/list-submissions) to list form submissions for a given form ID.

Required scope | `forms:read`


Reference: https://developers.webflow.com/data/reference/forms/form-submissions/list-submissions-by-site

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Form Submissions by Site
  version: endpoint_sites/forms.list-submissions-by-site
paths:
  /sites/{site_id}/form_submissions:
    get:
      operationId: list-submissions-by-site
      summary: List Form Submissions by Site
      description: >
        List all form submissions for a given site with the ability to filter
        submissions by a centralized `elementId`.


        Add `elementId` when you want to filter form submissions to a specific
        form in a site. You can get the `elementId` from the [List forms
        endpoint](/data/reference/forms/forms/list) (displayed as
        `formElementId` in the response). 


        <Note title="Forms in components">

        When a form is used in a Webflow component definition, each instance of
        the component will yield a unique form. Adding the `elementId` in this
        request ensures this API response includes all submissions from that
        core form, wherever that form is used in instantiated components.

        </Note>


        Use the [List Form Submissions
        endpoint](/data/reference/forms/form-submissions/list-submissions) to
        list form submissions for a given form ID.


        Required scope | `forms:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/forms
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: elementId
          in: query
          description: Identifier for an element
          required: false
          schema:
            type: string
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/sites_forms_list-submissions-by-site_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdFormSubmissionsGetResponsesContentApplicationJsonSchemaFormSubmissionsItemsFormResponse:
      type: object
      properties: {}
    SitesSiteIdFormSubmissionsGetResponsesContentApplicationJsonSchemaFormSubmissionsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: The unique ID of the Form submission
        displayName:
          type: string
          description: The Form name displayed on the site
        siteId:
          type: string
          format: objectid
          description: The unique ID of the Site the Form belongs to
        workspaceId:
          type: string
          format: objectid
          description: The unique ID of the Workspace the Site belongs to
        dateSubmitted:
          type: string
          format: date-time
          description: Date that the Form was submitted on
        formResponse:
          $ref: >-
            #/components/schemas/SitesSiteIdFormSubmissionsGetResponsesContentApplicationJsonSchemaFormSubmissionsItemsFormResponse
          description: The data submitted in the Form
    SitesSiteIdFormSubmissionsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    sites_forms_list-submissions-by-site_Response_200:
      type: object
      properties:
        formSubmissions:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdFormSubmissionsGetResponsesContentApplicationJsonSchemaFormSubmissionsItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdFormSubmissionsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.forms.list_submissions_by_site(
    site_id="580e63e98c9a982ac9b8b741",
    element_id="18259716-3e5a-646a-5f41-5dc4b9405aa0",
    offset=1,
    limit=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.forms.listSubmissionsBySite("580e63e98c9a982ac9b8b741", {
    elementId: "18259716-3e5a-646a-5f41-5dc4b9405aa0",
    offset: 1,
    limit: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions?elementId=18259716-3e5a-646a-5f41-5dc4b9405aa0&offset=0&limit=100"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions?elementId=18259716-3e5a-646a-5f41-5dc4b9405aa0&offset=0&limit=100")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions?elementId=18259716-3e5a-646a-5f41-5dc4b9405aa0&offset=0&limit=100")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions?elementId=18259716-3e5a-646a-5f41-5dc4b9405aa0&offset=0&limit=100', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions?elementId=18259716-3e5a-646a-5f41-5dc4b9405aa0&offset=0&limit=100");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions?elementId=18259716-3e5a-646a-5f41-5dc4b9405aa0&offset=0&limit=100")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Form Submission

GET https://api.webflow.com/v2/sites/{site_id}/form_submissions/{form_submission_id}

Get information about a form submission within a specific site.

Required scope | `forms:read`


Reference: https://developers.webflow.com/data/reference/forms/form-submissions/get-submission

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Form Submission by Site
  version: endpoint_sites/forms.get-submission
paths:
  /sites/{site_id}/form_submissions/{form_submission_id}:
    get:
      operationId: get-submission
      summary: Get Form Submission by Site
      description: |
        Get information about a form submission within a specific site.

        Required scope | `forms:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/forms
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: form_submission_id
          in: path
          description: Unique identifier for a Form Submission
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_forms_get-submission_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdFormSubmissionsFormSubmissionIdGetResponsesContentApplicationJsonSchemaFormResponse:
      type: object
      properties: {}
    sites_forms_get-submission_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: The unique ID of the Form submission
        displayName:
          type: string
          description: The Form name displayed on the site
        siteId:
          type: string
          format: objectid
          description: The unique ID of the Site the Form belongs to
        workspaceId:
          type: string
          format: objectid
          description: The unique ID of the Workspace the Site belongs to
        dateSubmitted:
          type: string
          format: date-time
          description: Date that the Form was submitted on
        formResponse:
          $ref: >-
            #/components/schemas/SitesSiteIdFormSubmissionsFormSubmissionIdGetResponsesContentApplicationJsonSchemaFormResponse
          description: The data submitted in the Form

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.forms.get_submission(
    site_id="580e63e98c9a982ac9b8b741",
    form_submission_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.forms.getSubmission("580e63e98c9a982ac9b8b741", "580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Form Submission

PATCH https://api.webflow.com/v2/sites/{site_id}/form_submissions/{form_submission_id}
Content-Type: application/json

Update hidden fields on a form submission within a specific site.

Required scope | `forms:write`


Reference: https://developers.webflow.com/data/reference/forms/form-submissions/update-submission

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Modify Form Submission by Site
  version: endpoint_sites/forms.update-submission
paths:
  /sites/{site_id}/form_submissions/{form_submission_id}:
    patch:
      operationId: update-submission
      summary: Modify Form Submission by Site
      description: |
        Update hidden fields on a form submission within a specific site.

        Required scope | `forms:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/forms
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: form_submission_id
          in: path
          description: Unique identifier for a Form Submission
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/sites_forms_update-submission_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: To access this feature, the site needs to be republished.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                formSubmissionData:
                  $ref: >-
                    #/components/schemas/SitesSiteIdFormSubmissionsFormSubmissionIdPatchRequestBodyContentApplicationJsonSchemaFormSubmissionData
                  description: >-
                    An existing **hidden field** defined on the form schema, and
                    the corresponding value to set
components:
  schemas:
    SitesSiteIdFormSubmissionsFormSubmissionIdPatchRequestBodyContentApplicationJsonSchemaFormSubmissionData:
      type: object
      properties: {}
    SitesSiteIdFormSubmissionsFormSubmissionIdPatchResponsesContentApplicationJsonSchemaFormResponse:
      type: object
      properties: {}
    sites_forms_update-submission_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: The unique ID of the Form submission
        displayName:
          type: string
          description: The Form name displayed on the site
        siteId:
          type: string
          format: objectid
          description: The unique ID of the Site the Form belongs to
        workspaceId:
          type: string
          format: objectid
          description: The unique ID of the Workspace the Site belongs to
        dateSubmitted:
          type: string
          format: date-time
          description: Date that the Form was submitted on
        formResponse:
          $ref: >-
            #/components/schemas/SitesSiteIdFormSubmissionsFormSubmissionIdPatchResponsesContentApplicationJsonSchemaFormResponse
          description: The data submitted in the Form

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.forms.update_submission(
    site_id="580e63e98c9a982ac9b8b741",
    form_submission_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.forms.updateSubmission("580e63e98c9a982ac9b8b741", "580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741"

	payload := strings.NewReader("{}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741', [
  'body' => '{}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete Form Submission

DELETE https://api.webflow.com/v2/sites/{site_id}/form_submissions/{form_submission_id}

Delete a form submission within a specific site.

Required scope | `forms:write`


Reference: https://developers.webflow.com/data/reference/forms/form-submissions/delete-submission

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete Form Submission by Site
  version: endpoint_sites/forms.delete-submission
paths:
  /sites/{site_id}/form_submissions/{form_submission_id}:
    delete:
      operationId: delete-submission
      summary: Delete Form Submission by Site
      description: |
        Delete a form submission within a specific site.

        Required scope | `forms:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/forms
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: form_submission_id
          in: path
          description: Unique identifier for a Form Submission
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Form Submission successfully deleted
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/sites_forms_delete-submission_Response_204
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: To access this feature, the site needs to be republished.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    sites_forms_delete-submission_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.forms.delete_submission(
    site_id="580e63e98c9a982ac9b8b741",
    form_submission_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.forms.deleteSubmission("580e63e98c9a982ac9b8b741", "580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741"

	req, _ := http.NewRequest("DELETE", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/form_submissions/580e63e98c9a982ac9b8b741")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Registered Scripts

GET https://api.webflow.com/v2/sites/{site_id}/registered_scripts

Get a list of scripts that have been registered to a site. A site can have a maximum of 800 registered scripts.

<Note title="Script Registration">
  To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
</Note>

Required scope | `custom_code:read`


Reference: https://developers.webflow.com/data/reference/custom-code/custom-code/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Registered Scripts
  version: endpoint_scripts.list
paths:
  /sites/{site_id}/registered_scripts:
    get:
      operationId: list
      summary: Get Registered Scripts
      description: >
        Get a list of scripts that have been registered to a site. A site can
        have a maximum of 800 registered scripts.


        <Note title="Script Registration">
          To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
        </Note>


        Required scope | `custom_code:read`
      tags:
        - - subpackage_scripts
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/scripts_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdRegisteredScriptsGetResponsesContentApplicationJsonSchemaRegisteredScriptsItems:
      type: object
      properties:
        id:
          type: string
          description: Human readable id, derived from the user-specified display name
        canCopy:
          type: boolean
          default: false
          description: >-
            Define whether the script can be copied on site duplication and
            transfer
        displayName:
          type: string
          description: >-
            User-facing name for the script. Must be between 1 and 50
            alphanumeric characters
        hostedLocation:
          type: string
          description: URI for an externally hosted script location
        integrityHash:
          type: string
          format: hash
          description: >-
            Sub-Resource Integrity Hash. Only required for externally hosted
            scripts (passed via hostedLocation)
        createdOn:
          type: string
          format: date-string
          description: Timestamp when the script version was created
        lastUpdated:
          type: string
          format: date-string
          description: Timestamp when the script version was last updated
        version:
          type: string
          description: >-
            A Semantic Version (SemVer) string, denoting the version of the
            script
    SitesSiteIdRegisteredScriptsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    scripts_list_Response_200:
      type: object
      properties:
        registeredScripts:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdRegisteredScriptsGetResponsesContentApplicationJsonSchemaRegisteredScriptsItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdRegisteredScriptsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.scripts.list(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.scripts.list("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Register Script - Hosted

POST https://api.webflow.com/v2/sites/{site_id}/registered_scripts/hosted
Content-Type: application/json

Register a hosted script to a site.

<Note title="Script Registration">
  To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
</Note>

Required scope | `custom_code:write`


Reference: https://developers.webflow.com/data/reference/custom-code/custom-code/register-hosted

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Register Script - Hosted
  version: endpoint_scripts.register-hosted
paths:
  /sites/{site_id}/registered_scripts/hosted:
    post:
      operationId: register-hosted
      summary: Register Script - Hosted
      description: |
        Register a hosted script to a site.

        <Note title="Script Registration">
          To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
        </Note>

        Required scope | `custom_code:write`
      tags:
        - - subpackage_scripts
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '201':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/scripts_register-hosted_Response_201'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                hostedLocation:
                  type: string
                  description: URI for an externally hosted script location
                integrityHash:
                  type: string
                  format: hash
                  description: Sub-Resource Integrity Hash
                canCopy:
                  type: boolean
                  default: false
                  description: >-
                    Define whether the script can be copied on site duplication
                    and transfer
                version:
                  type: string
                  description: >-
                    A Semantic Version (SemVer) string, denoting the version of
                    the script
                displayName:
                  type: string
                  description: >-
                    User-facing name for the script. Must be between 1 and 50
                    alphanumeric characters
              required:
                - hostedLocation
                - integrityHash
                - version
                - displayName
components:
  schemas:
    scripts_register-hosted_Response_201:
      type: object
      properties:
        id:
          type: string
          description: Human readable id, derived from the user-specified display name
        canCopy:
          type: boolean
          default: false
          description: >-
            Define whether the script can be copied on site duplication and
            transfer
        displayName:
          type: string
          description: >-
            User-facing name for the script. Must be between 1 and 50
            alphanumeric characters
        hostedLocation:
          type: string
          description: URI for an externally hosted script location
        integrityHash:
          type: string
          format: hash
          description: >-
            Sub-Resource Integrity Hash. Only required for externally hosted
            scripts (passed via hostedLocation)
        createdOn:
          type: string
          format: date-string
          description: Timestamp when the script version was created
        lastUpdated:
          type: string
          format: date-string
          description: Timestamp when the script version was last updated
        version:
          type: string
          description: >-
            A Semantic Version (SemVer) string, denoting the version of the
            script

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.scripts.register_hosted(
    site_id="580e63e98c9a982ac9b8b741",
    hosted_location="hostedLocation",
    integrity_hash="integrityHash",
    version="version",
    display_name="displayName",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.scripts.registerHosted("580e63e98c9a982ac9b8b741", {
    hostedLocation: "hostedLocation",
    integrityHash: "integrityHash",
    version: "version",
    displayName: "displayName"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/hosted"

	payload := strings.NewReader("{\n  \"hostedLocation\": \"https://cdn.jsdelivr.net/.../cmsslider.js\",\n  \"integrityHash\": \"sha384-J+YlJ8v0gpaRoKH7SbFbEmxOZlAxLiwNjfSsBhDooGa5roXlPPpXbEevck4J7YZ+\",\n  \"version\": \"1.0.0\",\n  \"displayName\": \"CMS Slider\",\n  \"canCopy\": true\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/hosted")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"hostedLocation\": \"https://cdn.jsdelivr.net/.../cmsslider.js\",\n  \"integrityHash\": \"sha384-J+YlJ8v0gpaRoKH7SbFbEmxOZlAxLiwNjfSsBhDooGa5roXlPPpXbEevck4J7YZ+\",\n  \"version\": \"1.0.0\",\n  \"displayName\": \"CMS Slider\",\n  \"canCopy\": true\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/hosted")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"hostedLocation\": \"https://cdn.jsdelivr.net/.../cmsslider.js\",\n  \"integrityHash\": \"sha384-J+YlJ8v0gpaRoKH7SbFbEmxOZlAxLiwNjfSsBhDooGa5roXlPPpXbEevck4J7YZ+\",\n  \"version\": \"1.0.0\",\n  \"displayName\": \"CMS Slider\",\n  \"canCopy\": true\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/hosted', [
  'body' => '{
  "hostedLocation": "https://cdn.jsdelivr.net/.../cmsslider.js",
  "integrityHash": "sha384-J+YlJ8v0gpaRoKH7SbFbEmxOZlAxLiwNjfSsBhDooGa5roXlPPpXbEevck4J7YZ+",
  "version": "1.0.0",
  "displayName": "CMS Slider",
  "canCopy": true
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/hosted");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"hostedLocation\": \"https://cdn.jsdelivr.net/.../cmsslider.js\",\n  \"integrityHash\": \"sha384-J+YlJ8v0gpaRoKH7SbFbEmxOZlAxLiwNjfSsBhDooGa5roXlPPpXbEevck4J7YZ+\",\n  \"version\": \"1.0.0\",\n  \"displayName\": \"CMS Slider\",\n  \"canCopy\": true\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "hostedLocation": "https://cdn.jsdelivr.net/.../cmsslider.js",
  "integrityHash": "sha384-J+YlJ8v0gpaRoKH7SbFbEmxOZlAxLiwNjfSsBhDooGa5roXlPPpXbEevck4J7YZ+",
  "version": "1.0.0",
  "displayName": "CMS Slider",
  "canCopy": true
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/hosted")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Register Script - Inline

POST https://api.webflow.com/v2/sites/{site_id}/registered_scripts/inline
Content-Type: application/json

Register an inline script to a site. Inline scripts are limited to 2000 characters.

<Note title="Script Registration">
  To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
</Note>

Required scope | `custom_code:write`


Reference: https://developers.webflow.com/data/reference/custom-code/custom-code/register-inline

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Register Script - Inline
  version: endpoint_scripts.register-inline
paths:
  /sites/{site_id}/registered_scripts/inline:
    post:
      operationId: register-inline
      summary: Register Script - Inline
      description: >
        Register an inline script to a site. Inline scripts are limited to 2000
        characters.


        <Note title="Script Registration">
          To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
        </Note>


        Required scope | `custom_code:write`
      tags:
        - - subpackage_scripts
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '201':
          description: Created
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/scripts_register-inline_Response_201'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                sourceCode:
                  type: string
                  description: The code to be added to the site (to be hosted by Webflow).
                integrityHash:
                  type: string
                  format: hash
                  description: >-
                    Sub-Resource Integrity Hash. Only required for externally
                    hosted scripts (passed via hostedLocation)
                canCopy:
                  type: boolean
                  default: false
                  description: >-
                    Define whether the script can be copied on site duplication
                    and transfer
                version:
                  type: string
                  description: >-
                    A Semantic Version (SemVer) string, denoting the version of
                    the script
                displayName:
                  type: string
                  description: >-
                    User-facing name for the script. Must be between 1 and 50
                    alphanumeric characters
              required:
                - sourceCode
                - version
                - displayName
components:
  schemas:
    scripts_register-inline_Response_201:
      type: object
      properties:
        id:
          type: string
          description: Human readable id, derived from the user-specified display name
        canCopy:
          type: boolean
          default: false
          description: >-
            Define whether the script can be copied on site duplication and
            transfer
        displayName:
          type: string
          description: >-
            User-facing name for the script. Must be between 1 and 50
            alphanumeric characters
        hostedLocation:
          type: string
          description: URI for an externally hosted script location
        integrityHash:
          type: string
          format: hash
          description: >-
            Sub-Resource Integrity Hash. Only required for externally hosted
            scripts (passed via hostedLocation)
        createdOn:
          type: string
          format: date-string
          description: Timestamp when the script version was created
        lastUpdated:
          type: string
          format: date-string
          description: Timestamp when the script version was last updated
        version:
          type: string
          description: >-
            A Semantic Version (SemVer) string, denoting the version of the
            script

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.scripts.register_inline(
    site_id="580e63e98c9a982ac9b8b741",
    source_code="alert('hello world');",
    version="0.0.1",
    display_name="Alert",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.scripts.registerInline("580e63e98c9a982ac9b8b741", {
    sourceCode: "alert('hello world');",
    version: "0.0.1",
    displayName: "Alert"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/inline"

	payload := strings.NewReader("{\n  \"sourceCode\": \"alert('hello world');\",\n  \"version\": \"0.0.1\",\n  \"displayName\": \"Alert\"\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/inline")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"sourceCode\": \"alert('hello world');\",\n  \"version\": \"0.0.1\",\n  \"displayName\": \"Alert\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/inline")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"sourceCode\": \"alert('hello world');\",\n  \"version\": \"0.0.1\",\n  \"displayName\": \"Alert\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/inline', [
  'body' => '{
  "sourceCode": "alert(\'hello world\');",
  "version": "0.0.1",
  "displayName": "Alert"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/inline");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"sourceCode\": \"alert('hello world');\",\n  \"version\": \"0.0.1\",\n  \"displayName\": \"Alert\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "sourceCode": "alert('hello world');",
  "version": "0.0.1",
  "displayName": "Alert"
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/registered_scripts/inline")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Custom Code Blocks

GET https://api.webflow.com/v2/sites/{site_id}/custom_code/blocks

Get a list of scripts that have been applied to a site and/or individual pages. 

<Note title="Script Registration">
  To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. 
  
  See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
</Note>

Required scope | `custom_code:read`


Reference: https://developers.webflow.com/data/reference/custom-code/custom-code/list-custom-code-blocks

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Custom Code Blocks
  version: endpoint_sites/scripts.list-custom-code-blocks
paths:
  /sites/{site_id}/custom_code/blocks:
    get:
      operationId: list-custom-code-blocks
      summary: List Custom Code Blocks
      description: >
        Get a list of scripts that have been applied to a site and/or individual
        pages. 


        <Note title="Script Registration">
          To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. 
          
          See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
        </Note>


        Required scope | `custom_code:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/scripts
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/sites_scripts_list-custom-code-blocks_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaBlocksItemsType:
      type: string
      enum:
        - value: page
        - value: site
    SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaBlocksItemsScriptsItemsLocation:
      type: string
      enum:
        - value: header
        - value: footer
      default: header
    SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaBlocksItemsScriptsItemsAttributes:
      type: object
      properties: {}
    SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaBlocksItemsScriptsItems:
      type: object
      properties:
        id:
          type: string
          format: objectId
          description: ID of the registered custom code script
        location:
          $ref: >-
            #/components/schemas/SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaBlocksItemsScriptsItemsLocation
          description: >-
            Location of the script, either in the header or footer of the
            published site
        version:
          type: string
          description: Semantic Version String for the registered script *e.g. 0.0.1*
        attributes:
          $ref: >-
            #/components/schemas/SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaBlocksItemsScriptsItemsAttributes
          description: >-
            Developer-specified key/value pairs to be applied as attributes to
            the script
      required:
        - id
        - location
        - version
    SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaBlocksItems:
      type: object
      properties:
        siteId:
          type: string
          description: The Site ID where the custom code was applied
        pageId:
          type:
            - string
            - 'null'
          description: The Page ID (if applied at Page-level)
        type:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaBlocksItemsType
            - type: 'null'
          description: >-
            Whether the Custom Code script is applied at the Site-level or
            Page-level
        scripts:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaBlocksItemsScriptsItems
          description: A list of scripts applied to a Site or a Page
        createdOn:
          type: string
          format: date-time
          description: The date the Block was created
        lastUpdated:
          type: string
          format: date-time
          description: The date the Block was most recently updated
    SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    sites_scripts_list-custom-code-blocks_Response_200:
      type: object
      properties:
        blocks:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaBlocksItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdCustomCodeBlocksGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.scripts.list_custom_code_blocks(
    site_id="580e63e98c9a982ac9b8b741",
    offset=1,
    limit=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.scripts.listCustomCodeBlocks("580e63e98c9a982ac9b8b741", {
    offset: 1,
    limit: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code/blocks?offset=0&limit=100"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code/blocks?offset=0&limit=100")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code/blocks?offset=0&limit=100")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code/blocks?offset=0&limit=100', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code/blocks?offset=0&limit=100");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code/blocks?offset=0&limit=100")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Custom Code

GET https://api.webflow.com/v2/sites/{site_id}/custom_code

Get all scripts applied to a site by the App. 

<Note title="Script Registration">
  To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
</Note> 

Required scope | `custom_code:read`


Reference: https://developers.webflow.com/data/reference/custom-code/custom-code-sites/get-custom-code

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Custom Code
  version: endpoint_sites/scripts.get-custom-code
paths:
  /sites/{site_id}/custom_code:
    get:
      operationId: get-custom-code
      summary: Get Custom Code
      description: |
        Get all scripts applied to a site by the App. 

        <Note title="Script Registration">
          To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
        </Note> 

        Required scope | `custom_code:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/scripts
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/sites_scripts_get-custom-code_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItemsLocation:
      type: string
      enum:
        - value: header
        - value: footer
      default: header
    SitesSiteIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItemsAttributes:
      type: object
      properties: {}
    SitesSiteIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItems:
      type: object
      properties:
        id:
          type: string
          format: objectId
          description: ID of the registered custom code script
        location:
          $ref: >-
            #/components/schemas/SitesSiteIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItemsLocation
          description: >-
            Location of the script, either in the header or footer of the
            published site
        version:
          type: string
          description: Semantic Version String for the registered script *e.g. 0.0.1*
        attributes:
          $ref: >-
            #/components/schemas/SitesSiteIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItemsAttributes
          description: >-
            Developer-specified key/value pairs to be applied as attributes to
            the script
      required:
        - id
        - location
        - version
    sites_scripts_get-custom-code_Response_200:
      type: object
      properties:
        scripts:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItems
          description: A list of scripts applied to a Site or a Page
        lastUpdated:
          type: string
          format: date-string
          description: Date when the Site's scripts were last updated
        createdOn:
          type: string
          format: date-string
          description: Date when the Site's scripts were created

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.scripts.get_custom_code(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.scripts.getCustomCode("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Add/Update Custom Code

PUT https://api.webflow.com/v2/sites/{site_id}/custom_code
Content-Type: application/json

Apply registered scripts to a site. If you have multiple scripts your App needs to apply or maintain on a site, ensure they are always included in the request body for this endpoint. To remove individual scripts, simply call this endpoint without the script in the request body.

<Note title="Script Registration">
  To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
</Note>

Required scope | `custom_code:write`


Reference: https://developers.webflow.com/data/reference/custom-code/custom-code-sites/upsert-custom-code

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Add/Update Custom Code
  version: endpoint_sites/scripts.upsert-custom-code
paths:
  /sites/{site_id}/custom_code:
    put:
      operationId: upsert-custom-code
      summary: Add/Update Custom Code
      description: >
        Apply registered scripts to a site. If you have multiple scripts your
        App needs to apply or maintain on a site, ensure they are always
        included in the request body for this endpoint. To remove individual
        scripts, simply call this endpoint without the script in the request
        body.


        <Note title="Script Registration">
          To apply a script to a site or page, the script must first be registered to a site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
        </Note>


        Required scope | `custom_code:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/scripts
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/sites_scripts_upsert-custom-code_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                scripts:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/SitesSiteIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItems
                  description: A list of scripts applied to a Site or a Page
                lastUpdated:
                  type: string
                  format: date-string
                  description: Date when the Site's scripts were last updated
                createdOn:
                  type: string
                  format: date-string
                  description: Date when the Site's scripts were created
components:
  schemas:
    SitesSiteIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItemsLocation:
      type: string
      enum:
        - value: header
        - value: footer
      default: header
    SitesSiteIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItemsAttributes:
      type: object
      properties: {}
    SitesSiteIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItems:
      type: object
      properties:
        id:
          type: string
          format: objectId
          description: ID of the registered custom code script
        location:
          $ref: >-
            #/components/schemas/SitesSiteIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItemsLocation
          description: >-
            Location of the script, either in the header or footer of the
            published site
        version:
          type: string
          description: Semantic Version String for the registered script *e.g. 0.0.1*
        attributes:
          $ref: >-
            #/components/schemas/SitesSiteIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItemsAttributes
          description: >-
            Developer-specified key/value pairs to be applied as attributes to
            the script
      required:
        - id
        - location
        - version
    SitesSiteIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItemsLocation:
      type: string
      enum:
        - value: header
        - value: footer
      default: header
    SitesSiteIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItemsAttributes:
      type: object
      properties: {}
    SitesSiteIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItems:
      type: object
      properties:
        id:
          type: string
          format: objectId
          description: ID of the registered custom code script
        location:
          $ref: >-
            #/components/schemas/SitesSiteIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItemsLocation
          description: >-
            Location of the script, either in the header or footer of the
            published site
        version:
          type: string
          description: Semantic Version String for the registered script *e.g. 0.0.1*
        attributes:
          $ref: >-
            #/components/schemas/SitesSiteIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItemsAttributes
          description: >-
            Developer-specified key/value pairs to be applied as attributes to
            the script
      required:
        - id
        - location
        - version
    sites_scripts_upsert-custom-code_Response_200:
      type: object
      properties:
        scripts:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItems
          description: A list of scripts applied to a Site or a Page
        lastUpdated:
          type: string
          format: date-string
          description: Date when the Site's scripts were last updated
        createdOn:
          type: string
          format: date-string
          description: Date when the Site's scripts were created

```

## SDK Code Examples

```python
from webflow import ScriptApply, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.scripts.upsert_custom_code(
    site_id="580e63e98c9a982ac9b8b741",
    scripts=[
        ScriptApply(
            id="cms_slider",
            location="header",
            version="1.0.0",
            attributes={"my-attribute": "some-value"},
        ),
        ScriptApply(
            id="alert",
            location="header",
            version="0.0.1",
        ),
    ],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.scripts.upsertCustomCode("580e63e98c9a982ac9b8b741", {
    scripts: [{
            id: "cms_slider",
            location: "header",
            version: "1.0.0",
            attributes: {
                "my-attribute": "some-value"
            }
        }, {
            id: "alert",
            location: "header",
            version: "0.0.1"
        }]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code"

	payload := strings.NewReader("{\n  \"scripts\": [\n    {\n      \"id\": \"cms_slider\",\n      \"location\": \"header\",\n      \"version\": \"1.0.0\",\n      \"attributes\": {\n        \"my-attribute\": \"some-value\"\n      }\n    },\n    {\n      \"id\": \"alert\",\n      \"location\": \"header\",\n      \"version\": \"0.0.1\"\n    }\n  ]\n}")

	req, _ := http.NewRequest("PUT", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Put.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"scripts\": [\n    {\n      \"id\": \"cms_slider\",\n      \"location\": \"header\",\n      \"version\": \"1.0.0\",\n      \"attributes\": {\n        \"my-attribute\": \"some-value\"\n      }\n    },\n    {\n      \"id\": \"alert\",\n      \"location\": \"header\",\n      \"version\": \"0.0.1\"\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.put("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"scripts\": [\n    {\n      \"id\": \"cms_slider\",\n      \"location\": \"header\",\n      \"version\": \"1.0.0\",\n      \"attributes\": {\n        \"my-attribute\": \"some-value\"\n      }\n    },\n    {\n      \"id\": \"alert\",\n      \"location\": \"header\",\n      \"version\": \"0.0.1\"\n    }\n  ]\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PUT', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code', [
  'body' => '{
  "scripts": [
    {
      "id": "cms_slider",
      "location": "header",
      "version": "1.0.0",
      "attributes": {
        "my-attribute": "some-value"
      }
    },
    {
      "id": "alert",
      "location": "header",
      "version": "0.0.1"
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code");
var request = new RestRequest(Method.PUT);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"scripts\": [\n    {\n      \"id\": \"cms_slider\",\n      \"location\": \"header\",\n      \"version\": \"1.0.0\",\n      \"attributes\": {\n        \"my-attribute\": \"some-value\"\n      }\n    },\n    {\n      \"id\": \"alert\",\n      \"location\": \"header\",\n      \"version\": \"0.0.1\"\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["scripts": [
    [
      "id": "cms_slider",
      "location": "header",
      "version": "1.0.0",
      "attributes": ["my-attribute": "some-value"]
    ],
    [
      "id": "alert",
      "location": "header",
      "version": "0.0.1"
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PUT"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete Custom Code

DELETE https://api.webflow.com/v2/sites/{site_id}/custom_code

Remove all scripts from a site applied by the App. This endpoint will not remove scripts from the site's registered scripts.

To remove individual scripts applied by the App, use the [Add/Update Custom Code](/data/reference/custom-code/custom-code-sites/upsert-custom-code) endpoint.

<Note>Access to this endpoint requires a bearer token obtained from an [OAuth Code Grant Flow](/data/reference/oauth-app).</Note>

Required scope | `custom_code:write`


Reference: https://developers.webflow.com/data/reference/custom-code/custom-code-sites/delete-custom-code

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete Custom Code
  version: endpoint_sites/scripts.delete-custom-code
paths:
  /sites/{site_id}/custom_code:
    delete:
      operationId: delete-custom-code
      summary: Delete Custom Code
      description: >
        Remove all scripts from a site applied by the App. This endpoint will
        not remove scripts from the site's registered scripts.


        To remove individual scripts applied by the App, use the [Add/Update
        Custom
        Code](/data/reference/custom-code/custom-code-sites/upsert-custom-code)
        endpoint.


        <Note>Access to this endpoint requires a bearer token obtained from an
        [OAuth Code Grant Flow](/data/reference/oauth-app).</Note>


        Required scope | `custom_code:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/scripts
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Request was successful. No Content is returned.
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/sites_scripts_delete-custom-code_Response_204
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    sites_scripts_delete-custom-code_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.scripts.delete_custom_code(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.scripts.deleteCustomCode("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code"

	req, _ := http.NewRequest("DELETE", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/custom_code")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Custom Code

GET https://api.webflow.com/v2/pages/{page_id}/custom_code

Get all scripts applied to a page. 

Required scope | `custom_code:read`


Reference: https://developers.webflow.com/data/reference/custom-code/custom-code-pages/get-custom-code

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Custom Code
  version: endpoint_pages/scripts.get-custom-code
paths:
  /pages/{page_id}/custom_code:
    get:
      operationId: get-custom-code
      summary: Get Custom Code
      description: |
        Get all scripts applied to a page. 

        Required scope | `custom_code:read`
      tags:
        - - subpackage_pages
          - subpackage_pages/scripts
      parameters:
        - name: page_id
          in: path
          description: Unique identifier for a Page
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/pages_scripts_get-custom-code_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    PagesPageIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItemsLocation:
      type: string
      enum:
        - value: header
        - value: footer
      default: header
    PagesPageIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItemsAttributes:
      type: object
      properties: {}
    PagesPageIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItems:
      type: object
      properties:
        id:
          type: string
          format: objectId
          description: ID of the registered custom code script
        location:
          $ref: >-
            #/components/schemas/PagesPageIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItemsLocation
          description: >-
            Location of the script, either in the header or footer of the
            published site
        version:
          type: string
          description: Semantic Version String for the registered script *e.g. 0.0.1*
        attributes:
          $ref: >-
            #/components/schemas/PagesPageIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItemsAttributes
          description: >-
            Developer-specified key/value pairs to be applied as attributes to
            the script
      required:
        - id
        - location
        - version
    pages_scripts_get-custom-code_Response_200:
      type: object
      properties:
        scripts:
          type: array
          items:
            $ref: >-
              #/components/schemas/PagesPageIdCustomCodeGetResponsesContentApplicationJsonSchemaScriptsItems
          description: A list of scripts applied to a Site or a Page
        lastUpdated:
          type: string
          format: date-string
          description: Date when the Site's scripts were last updated
        createdOn:
          type: string
          format: date-string
          description: Date when the Site's scripts were created

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.pages.scripts.get_custom_code(
    page_id="63c720f9347c2139b248e552",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.pages.scripts.getCustomCode("63c720f9347c2139b248e552");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Add/Update Custom Code

PUT https://api.webflow.com/v2/pages/{page_id}/custom_code
Content-Type: application/json

Apply registered scripts to a page. If you have multiple scripts your App needs to apply or maintain on a page, ensure they are always included in the request body for this endpoint. To remove individual scripts, simply call this endpoint without the script in the request body.

<Note title="Script Registration">
  To apply a script to a page, the script must first be registered to a Site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
</Note>

Required scope | `custom_code:write`


Reference: https://developers.webflow.com/data/reference/custom-code/custom-code-pages/upsert-custom-code

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Add/Update Custom Code
  version: endpoint_pages/scripts.upsert-custom-code
paths:
  /pages/{page_id}/custom_code:
    put:
      operationId: upsert-custom-code
      summary: Add/Update Custom Code
      description: >
        Apply registered scripts to a page. If you have multiple scripts your
        App needs to apply or maintain on a page, ensure they are always
        included in the request body for this endpoint. To remove individual
        scripts, simply call this endpoint without the script in the request
        body.


        <Note title="Script Registration">
          To apply a script to a page, the script must first be registered to a Site via the [Register Script](/data/reference/custom-code/custom-code/register-hosted) endpoints. Once registered, the script can be applied to a Site or Page using the appropriate endpoints. See the documentation on [working with Custom Code](/data/docs/custom-code) for more information.
        </Note>


        Required scope | `custom_code:write`
      tags:
        - - subpackage_pages
          - subpackage_pages/scripts
      parameters:
        - name: page_id
          in: path
          description: Unique identifier for a Page
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/pages_scripts_upsert-custom-code_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The maximum number of registered scripts has been reached.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                scripts:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/PagesPageIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItems
                  description: A list of scripts applied to a Site or a Page
                lastUpdated:
                  type: string
                  format: date-string
                  description: Date when the Site's scripts were last updated
                createdOn:
                  type: string
                  format: date-string
                  description: Date when the Site's scripts were created
components:
  schemas:
    PagesPageIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItemsLocation:
      type: string
      enum:
        - value: header
        - value: footer
      default: header
    PagesPageIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItemsAttributes:
      type: object
      properties: {}
    PagesPageIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItems:
      type: object
      properties:
        id:
          type: string
          format: objectId
          description: ID of the registered custom code script
        location:
          $ref: >-
            #/components/schemas/PagesPageIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItemsLocation
          description: >-
            Location of the script, either in the header or footer of the
            published site
        version:
          type: string
          description: Semantic Version String for the registered script *e.g. 0.0.1*
        attributes:
          $ref: >-
            #/components/schemas/PagesPageIdCustomCodePutRequestBodyContentApplicationJsonSchemaScriptsItemsAttributes
          description: >-
            Developer-specified key/value pairs to be applied as attributes to
            the script
      required:
        - id
        - location
        - version
    PagesPageIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItemsLocation:
      type: string
      enum:
        - value: header
        - value: footer
      default: header
    PagesPageIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItemsAttributes:
      type: object
      properties: {}
    PagesPageIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItems:
      type: object
      properties:
        id:
          type: string
          format: objectId
          description: ID of the registered custom code script
        location:
          $ref: >-
            #/components/schemas/PagesPageIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItemsLocation
          description: >-
            Location of the script, either in the header or footer of the
            published site
        version:
          type: string
          description: Semantic Version String for the registered script *e.g. 0.0.1*
        attributes:
          $ref: >-
            #/components/schemas/PagesPageIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItemsAttributes
          description: >-
            Developer-specified key/value pairs to be applied as attributes to
            the script
      required:
        - id
        - location
        - version
    pages_scripts_upsert-custom-code_Response_200:
      type: object
      properties:
        scripts:
          type: array
          items:
            $ref: >-
              #/components/schemas/PagesPageIdCustomCodePutResponsesContentApplicationJsonSchemaScriptsItems
          description: A list of scripts applied to a Site or a Page
        lastUpdated:
          type: string
          format: date-string
          description: Date when the Site's scripts were last updated
        createdOn:
          type: string
          format: date-string
          description: Date when the Site's scripts were created

```

## SDK Code Examples

```python
from webflow import ScriptApply, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.pages.scripts.upsert_custom_code(
    page_id="63c720f9347c2139b248e552",
    scripts=[
        ScriptApply(
            id="cms_slider",
            location="header",
            version="1.0.0",
            attributes={"my-attribute": "some-value"},
        ),
        ScriptApply(
            id="alert",
            location="header",
            version="0.0.1",
        ),
    ],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.pages.scripts.upsertCustomCode("63c720f9347c2139b248e552", {
    scripts: [{
            id: "cms_slider",
            location: "header",
            version: "1.0.0",
            attributes: {
                "my-attribute": "some-value"
            }
        }, {
            id: "alert",
            location: "header",
            version: "0.0.1"
        }]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code"

	payload := strings.NewReader("{\n  \"scripts\": [\n    {\n      \"id\": \"cms_slider\",\n      \"location\": \"header\",\n      \"version\": \"1.0.0\",\n      \"attributes\": {\n        \"my-attribute\": \"some-value\"\n      }\n    },\n    {\n      \"id\": \"alert\",\n      \"location\": \"header\",\n      \"version\": \"0.0.1\"\n    }\n  ]\n}")

	req, _ := http.NewRequest("PUT", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Put.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"scripts\": [\n    {\n      \"id\": \"cms_slider\",\n      \"location\": \"header\",\n      \"version\": \"1.0.0\",\n      \"attributes\": {\n        \"my-attribute\": \"some-value\"\n      }\n    },\n    {\n      \"id\": \"alert\",\n      \"location\": \"header\",\n      \"version\": \"0.0.1\"\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.put("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"scripts\": [\n    {\n      \"id\": \"cms_slider\",\n      \"location\": \"header\",\n      \"version\": \"1.0.0\",\n      \"attributes\": {\n        \"my-attribute\": \"some-value\"\n      }\n    },\n    {\n      \"id\": \"alert\",\n      \"location\": \"header\",\n      \"version\": \"0.0.1\"\n    }\n  ]\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PUT', 'https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code', [
  'body' => '{
  "scripts": [
    {
      "id": "cms_slider",
      "location": "header",
      "version": "1.0.0",
      "attributes": {
        "my-attribute": "some-value"
      }
    },
    {
      "id": "alert",
      "location": "header",
      "version": "0.0.1"
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code");
var request = new RestRequest(Method.PUT);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"scripts\": [\n    {\n      \"id\": \"cms_slider\",\n      \"location\": \"header\",\n      \"version\": \"1.0.0\",\n      \"attributes\": {\n        \"my-attribute\": \"some-value\"\n      }\n    },\n    {\n      \"id\": \"alert\",\n      \"location\": \"header\",\n      \"version\": \"0.0.1\"\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["scripts": [
    [
      "id": "cms_slider",
      "location": "header",
      "version": "1.0.0",
      "attributes": ["my-attribute": "some-value"]
    ],
    [
      "id": "alert",
      "location": "header",
      "version": "0.0.1"
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PUT"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete Custom Code

DELETE https://api.webflow.com/v2/pages/{page_id}/custom_code

Remove all scripts from a page applied by the App. This endpoint will not remove scripts from the site's registered scripts.

To remove individual scripts applied by the App, use the [Add/Update Custom Code](/data/reference/custom-code/custom-code-pages/upsert-custom-code) endpoint.

<Note>Access to this endpoint requires a bearer token obtained from an [OAuth Code Grant Flow](/data/reference/oauth-app).</Note>

Required scope | `custom_code:write`


Reference: https://developers.webflow.com/data/reference/custom-code/custom-code-pages/delete-custom-code

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete Custom Code
  version: endpoint_pages/scripts.delete-custom-code
paths:
  /pages/{page_id}/custom_code:
    delete:
      operationId: delete-custom-code
      summary: Delete Custom Code
      description: >
        Remove all scripts from a page applied by the App. This endpoint will
        not remove scripts from the site's registered scripts.


        To remove individual scripts applied by the App, use the [Add/Update
        Custom
        Code](/data/reference/custom-code/custom-code-pages/upsert-custom-code)
        endpoint.


        <Note>Access to this endpoint requires a bearer token obtained from an
        [OAuth Code Grant Flow](/data/reference/oauth-app).</Note>


        Required scope | `custom_code:write`
      tags:
        - - subpackage_pages
          - subpackage_pages/scripts
      parameters:
        - name: page_id
          in: path
          description: Unique identifier for a Page
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Request was successful. No Content is returned.
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/pages_scripts_delete-custom-code_Response_204
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    pages_scripts_delete-custom-code_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.pages.scripts.delete_custom_code(
    page_id="63c720f9347c2139b248e552",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.pages.scripts.deleteCustomCode("63c720f9347c2139b248e552");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code"

	req, _ := http.NewRequest("DELETE", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/pages/63c720f9347c2139b248e552/custom_code")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Assets

GET https://api.webflow.com/v2/sites/{site_id}/assets

List of assets uploaded to a site

Required scope | `assets:read`


Reference: https://developers.webflow.com/data/reference/assets/assets/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Assets
  version: endpoint_assets.list
paths:
  /sites/{site_id}/assets:
    get:
      operationId: list
      summary: List Assets
      description: |
        List of assets uploaded to a site

        Required scope | `assets:read`
      tags:
        - - subpackage_assets
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/assets_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdAssetsGetResponsesContentApplicationJsonSchemaAssetsItemsVariantsItems:
      type: object
      properties:
        hostedUrl:
          type: string
          format: uri
          description: URL of where the asset variant is hosted
        originalFileName:
          type: string
          description: Original file name of the variant
        displayName:
          type: string
          description: Display name of the variant
        format:
          type: string
          description: format of the variant
        width:
          type: integer
          description: Width in pixels
        height:
          type:
            - integer
            - 'null'
          description: Height in pixels
        quality:
          type: integer
          description: Value between 0 and 100 representing the image quality
        error:
          type:
            - string
            - 'null'
          description: Any associated validation errors
      required:
        - hostedUrl
        - originalFileName
        - displayName
        - format
        - width
        - height
        - quality
    SitesSiteIdAssetsGetResponsesContentApplicationJsonSchemaAssetsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for this asset
        contentType:
          type: string
          format: mime-type
          description: File format type
        size:
          type: integer
          description: size in bytes
        siteId:
          type: string
          format: objectid
          description: Unique identifier for the site that hosts this asset
        hostedUrl:
          type: string
          format: uri
          description: Link to the asset
        originalFileName:
          type: string
          description: Original file name at the time of upload
        displayName:
          type: string
          description: Display name of the asset
        lastUpdated:
          type: string
          format: date-time
          description: Date the asset metadata was last updated
        createdOn:
          type: string
          format: date-time
          description: Date the asset metadata was created
        variants:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdAssetsGetResponsesContentApplicationJsonSchemaAssetsItemsVariantsItems
          description: >-
            A list of [asset
            variants](https://help.webflow.com/hc/en-us/articles/33961378697107-Responsive-images)
            created by Webflow to serve your site responsively.
        altText:
          type:
            - string
            - 'null'
          description: The visual description of the asset
      required:
        - id
        - contentType
        - size
        - siteId
        - hostedUrl
        - originalFileName
        - displayName
        - lastUpdated
        - createdOn
        - variants
        - altText
    SitesSiteIdAssetsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    assets_list_Response_200:
      type: object
      properties:
        assets:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdAssetsGetResponsesContentApplicationJsonSchemaAssetsItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdAssetsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object
      required:
        - assets
        - pagination

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.assets.list(
    site_id="580e63e98c9a982ac9b8b741",
    offset=1,
    limit=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.assets.list("580e63e98c9a982ac9b8b741", {
    offset: 1,
    limit: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets?offset=0&limit=100"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets?offset=0&limit=100")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets?offset=0&limit=100")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets?offset=0&limit=100', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets?offset=0&limit=100");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets?offset=0&limit=100")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Asset

GET https://api.webflow.com/v2/assets/{asset_id}

Get details about an asset

Required scope | `assets:read`


Reference: https://developers.webflow.com/data/reference/assets/assets/get

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Asset
  version: endpoint_assets.get
paths:
  /assets/{asset_id}:
    get:
      operationId: get
      summary: Get Asset
      description: |
        Get details about an asset

        Required scope | `assets:read`
      tags:
        - - subpackage_assets
      parameters:
        - name: asset_id
          in: path
          description: Unique identifier for an Asset on a site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/assets_get_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    AssetsAssetIdGetResponsesContentApplicationJsonSchemaVariantsItems:
      type: object
      properties:
        hostedUrl:
          type: string
          format: uri
          description: URL of where the asset variant is hosted
        originalFileName:
          type: string
          description: Original file name of the variant
        displayName:
          type: string
          description: Display name of the variant
        format:
          type: string
          description: format of the variant
        width:
          type: integer
          description: Width in pixels
        height:
          type:
            - integer
            - 'null'
          description: Height in pixels
        quality:
          type: integer
          description: Value between 0 and 100 representing the image quality
        error:
          type:
            - string
            - 'null'
          description: Any associated validation errors
      required:
        - hostedUrl
        - originalFileName
        - displayName
        - format
        - width
        - height
        - quality
    assets_get_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for this asset
        contentType:
          type: string
          format: mime-type
          description: File format type
        size:
          type: integer
          description: size in bytes
        siteId:
          type: string
          format: objectid
          description: Unique identifier for the site that hosts this asset
        hostedUrl:
          type: string
          format: uri
          description: Link to the asset
        originalFileName:
          type: string
          description: Original file name at the time of upload
        displayName:
          type: string
          description: Display name of the asset
        lastUpdated:
          type: string
          format: date-time
          description: Date the asset metadata was last updated
        createdOn:
          type: string
          format: date-time
          description: Date the asset metadata was created
        variants:
          type: array
          items:
            $ref: >-
              #/components/schemas/AssetsAssetIdGetResponsesContentApplicationJsonSchemaVariantsItems
          description: >-
            A list of [asset
            variants](https://help.webflow.com/hc/en-us/articles/33961378697107-Responsive-images)
            created by Webflow to serve your site responsively.
        altText:
          type:
            - string
            - 'null'
          description: The visual description of the asset
      required:
        - id
        - contentType
        - size
        - siteId
        - hostedUrl
        - originalFileName
        - displayName
        - lastUpdated
        - createdOn
        - variants
        - altText

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.assets.get(
    asset_id="580e63fc8c9a982ac9b8b745",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.assets.get("580e63fc8c9a982ac9b8b745");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Upload Asset

POST https://api.webflow.com/v2/sites/{site_id}/assets
Content-Type: application/json

The first step in uploading an asset to a site. 


This endpoint generates a response with the following information: `uploadUrl` and `uploadDetails`.


Use these properties in the header of a [POST request to Amazson s3](https://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPOST.html) to complete the upload.


To learn more about how to upload assets to Webflow, see our [assets guide](/data/docs/working-with-assets).
  
 Required scope | `assets:write`


Reference: https://developers.webflow.com/data/reference/assets/assets/create

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Upload Asset
  version: endpoint_assets.create
paths:
  /sites/{site_id}/assets:
    post:
      operationId: create
      summary: Upload Asset
      description: >
        The first step in uploading an asset to a site. 



        This endpoint generates a response with the following information:
        `uploadUrl` and `uploadDetails`.



        Use these properties in the header of a [POST request to Amazson
        s3](https://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPOST.html)
        to complete the upload.



        To learn more about how to upload assets to Webflow, see our [assets
        guide](/data/docs/working-with-assets).
          
         Required scope | `assets:write`
      tags:
        - - subpackage_assets
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/assets_create_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: Information about the asset to create
        content:
          application/json:
            schema:
              type: object
              properties:
                fileName:
                  type: string
                  description: >-
                    File name including file extension. File names must be less
                    than 100 characters.
                fileHash:
                  type: string
                  description: MD5 hash of the file
                parentFolder:
                  type: string
                  description: ID of the Asset folder (optional)
              required:
                - fileName
                - fileHash
components:
  schemas:
    SitesSiteIdAssetsPostResponsesContentApplicationJsonSchemaUploadDetails:
      type: object
      properties:
        acl:
          type: string
        bucket:
          type: string
        X-Amz-Algorithm:
          type: string
        X-Amz-Credential:
          type: string
        X-Amz-Date:
          type: string
        key:
          type: string
        Policy:
          type: string
        X-Amz-Signature:
          type: string
        success_action_status:
          type: string
        content-type:
          type: string
          format: mime-type
        Cache-Control:
          type: string
    assets_create_Response_200:
      type: object
      properties:
        uploadDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdAssetsPostResponsesContentApplicationJsonSchemaUploadDetails
          description: Metadata for uploading the asset binary
        contentType:
          type: string
        id:
          type: string
          format: objectid
        parentFolder:
          type: string
          format: objectid
          description: Parent folder for the asset
        uploadUrl:
          type: string
          format: uri
        assetUrl:
          type: string
          format: uri
          description: S3 link to the asset
        hostedUrl:
          type: string
          format: uri
          description: Represents the link to the asset
        originalFileName:
          type: string
          description: >-
            Original file name when uploaded. If not specified at time of
            upload, it may be extracted from the raw file name
        createdOn:
          type: string
          format: date-time
          description: Date the asset metadata was created
        lastUpdated:
          type: string
          format: date-time
          description: Date the asset metadata was last updated

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.assets.create(
    site_id="580e63e98c9a982ac9b8b741",
    file_name="file.png",
    file_hash="3c7d87c9575702bc3b1e991f4d3c638e",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.assets.create("580e63e98c9a982ac9b8b741", {
    fileName: "file.png",
    fileHash: "3c7d87c9575702bc3b1e991f4d3c638e"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets"

	payload := strings.NewReader("{\n  \"fileName\": \"file.png\",\n  \"fileHash\": \"3c7d87c9575702bc3b1e991f4d3c638e\"\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"fileName\": \"file.png\",\n  \"fileHash\": \"3c7d87c9575702bc3b1e991f4d3c638e\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"fileName\": \"file.png\",\n  \"fileHash\": \"3c7d87c9575702bc3b1e991f4d3c638e\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets', [
  'body' => '{
  "fileName": "file.png",
  "fileHash": "3c7d87c9575702bc3b1e991f4d3c638e"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"fileName\": \"file.png\",\n  \"fileHash\": \"3c7d87c9575702bc3b1e991f4d3c638e\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "fileName": "file.png",
  "fileHash": "3c7d87c9575702bc3b1e991f4d3c638e"
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/assets")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Asset

PATCH https://api.webflow.com/v2/assets/{asset_id}
Content-Type: application/json

Update details of an Asset.

Required scope | `assets:write`


Reference: https://developers.webflow.com/data/reference/assets/assets/update

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Asset
  version: endpoint_assets.update
paths:
  /assets/{asset_id}:
    patch:
      operationId: update
      summary: Update Asset
      description: |
        Update details of an Asset.

        Required scope | `assets:write`
      tags:
        - - subpackage_assets
      parameters:
        - name: asset_id
          in: path
          description: Unique identifier for an Asset on a site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/assets_update_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: Information about the asset to update
        content:
          application/json:
            schema:
              type: object
              properties:
                localeId:
                  type: string
                  description: >-
                    Unique identifier for a specific locale. Applicable, when
                    using localization.
                displayName:
                  type: string
                  description: A human readable name for the asset
components:
  schemas:
    AssetsAssetIdPatchResponsesContentApplicationJsonSchemaVariantsItems:
      type: object
      properties:
        hostedUrl:
          type: string
          format: uri
          description: URL of where the asset variant is hosted
        originalFileName:
          type: string
          description: Original file name of the variant
        displayName:
          type: string
          description: Display name of the variant
        format:
          type: string
          description: format of the variant
        width:
          type: integer
          description: Width in pixels
        height:
          type:
            - integer
            - 'null'
          description: Height in pixels
        quality:
          type: integer
          description: Value between 0 and 100 representing the image quality
        error:
          type:
            - string
            - 'null'
          description: Any associated validation errors
      required:
        - hostedUrl
        - originalFileName
        - displayName
        - format
        - width
        - height
        - quality
    assets_update_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for this asset
        contentType:
          type: string
          format: mime-type
          description: File format type
        size:
          type: integer
          description: size in bytes
        siteId:
          type: string
          format: objectid
          description: Unique identifier for the site that hosts this asset
        hostedUrl:
          type: string
          format: uri
          description: Link to the asset
        originalFileName:
          type: string
          description: Original file name at the time of upload
        displayName:
          type: string
          description: Display name of the asset
        lastUpdated:
          type: string
          format: date-time
          description: Date the asset metadata was last updated
        createdOn:
          type: string
          format: date-time
          description: Date the asset metadata was created
        variants:
          type: array
          items:
            $ref: >-
              #/components/schemas/AssetsAssetIdPatchResponsesContentApplicationJsonSchemaVariantsItems
          description: >-
            A list of [asset
            variants](https://help.webflow.com/hc/en-us/articles/33961378697107-Responsive-images)
            created by Webflow to serve your site responsively.
        altText:
          type:
            - string
            - 'null'
          description: The visual description of the asset
      required:
        - id
        - contentType
        - size
        - siteId
        - hostedUrl
        - originalFileName
        - displayName
        - lastUpdated
        - createdOn
        - variants
        - altText

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.assets.update(
    asset_id="580e63fc8c9a982ac9b8b745",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.assets.update("580e63fc8c9a982ac9b8b745");

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745"

	payload := strings.NewReader("{}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745', [
  'body' => '{}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete Asset

DELETE https://api.webflow.com/v2/assets/{asset_id}

Delete an Asset

Required Scope: `assets: write`


Reference: https://developers.webflow.com/data/reference/assets/assets/delete

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete Asset
  version: endpoint_assets.delete
paths:
  /assets/{asset_id}:
    delete:
      operationId: delete
      summary: Delete Asset
      description: |
        Delete an Asset

        Required Scope: `assets: write`
      tags:
        - - subpackage_assets
      parameters:
        - name: asset_id
          in: path
          description: Unique identifier for an Asset on a site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Request was successful. No Content is returned.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/assets_delete_Response_204'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    assets_delete_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.assets.delete(
    asset_id="580e63fc8c9a982ac9b8b745",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.assets.delete("580e63fc8c9a982ac9b8b745");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745"

	req, _ := http.NewRequest("DELETE", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/assets/580e63fc8c9a982ac9b8b745")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Asset Folders

GET https://api.webflow.com/v2/sites/{site_id}/asset_folders

List Asset Folders within a given site

Required scope | `assets:read`


Reference: https://developers.webflow.com/data/reference/assets/asset-folders/list-folders

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Asset Folders
  version: endpoint_assets.list-folders
paths:
  /sites/{site_id}/asset_folders:
    get:
      operationId: list-folders
      summary: List Asset Folders
      description: |
        List Asset Folders within a given site

        Required scope | `assets:read`
      tags:
        - - subpackage_assets
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/assets_list-folders_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdAssetFoldersGetResponsesContentApplicationJsonSchemaAssetFoldersItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Asset Folder
        displayName:
          type: string
          description: User visible name for the Asset Folder
        parentFolder:
          type: string
          description: Pointer to parent Asset Folder (or null if root)
        assets:
          type: array
          items:
            type: string
            format: objectid
          description: Array of Asset instances in the folder
        siteId:
          type: string
          format: objectid
          description: The unique ID of the site the Asset Folder belongs to
        createdOn:
          type: string
          format: date-time
          description: Date that the Asset Folder was created on
        lastUpdated:
          type: string
          format: date-time
          description: Date that the Asset Folder was last updated on
    SitesSiteIdAssetFoldersGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    assets_list-folders_Response_200:
      type: object
      properties:
        assetFolders:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdAssetFoldersGetResponsesContentApplicationJsonSchemaAssetFoldersItems
          description: A list of Asset folders
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdAssetFoldersGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.assets.list_folders(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.assets.listFolders("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Asset Folder

GET https://api.webflow.com/v2/asset_folders/{asset_folder_id}

Get details about a specific Asset Folder

Required scope | `assets:read`


Reference: https://developers.webflow.com/data/reference/assets/asset-folders/get-folder

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Asset Folder
  version: endpoint_assets.get-folder
paths:
  /asset_folders/{asset_folder_id}:
    get:
      operationId: get-folder
      summary: Get Asset Folder
      description: |
        Get details about a specific Asset Folder

        Required scope | `assets:read`
      tags:
        - - subpackage_assets
      parameters:
        - name: asset_folder_id
          in: path
          description: Unique identifier for an Asset Folder
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/assets_get-folder_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    assets_get-folder_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Asset Folder
        displayName:
          type: string
          description: User visible name for the Asset Folder
        parentFolder:
          type: string
          description: Pointer to parent Asset Folder (or null if root)
        assets:
          type: array
          items:
            type: string
            format: objectid
          description: Array of Asset instances in the folder
        siteId:
          type: string
          format: objectid
          description: The unique ID of the site the Asset Folder belongs to
        createdOn:
          type: string
          format: date-time
          description: Date that the Asset Folder was created on
        lastUpdated:
          type: string
          format: date-time
          description: Date that the Asset Folder was last updated on

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.assets.get_folder(
    asset_folder_id="6390c49774a71f0e3c1a08ee",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.assets.getFolder("6390c49774a71f0e3c1a08ee");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/asset_folders/6390c49774a71f0e3c1a08ee"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/asset_folders/6390c49774a71f0e3c1a08ee")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/asset_folders/6390c49774a71f0e3c1a08ee")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/asset_folders/6390c49774a71f0e3c1a08ee', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/asset_folders/6390c49774a71f0e3c1a08ee");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/asset_folders/6390c49774a71f0e3c1a08ee")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Create Asset Folder

POST https://api.webflow.com/v2/sites/{site_id}/asset_folders
Content-Type: application/json

Create an Asset Folder within a given site

Required scope | `assets:write`


Reference: https://developers.webflow.com/data/reference/assets/asset-folders/create-folder

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Create Asset Folder
  version: endpoint_assets.create-folder
paths:
  /sites/{site_id}/asset_folders:
    post:
      operationId: create-folder
      summary: Create Asset Folder
      description: |
        Create an Asset Folder within a given site

        Required scope | `assets:write`
      tags:
        - - subpackage_assets
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/assets_create-folder_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                displayName:
                  type: string
                  description: A human readable name for the Asset Folder
                parentFolder:
                  type: string
                  description: >-
                    An (optional) pointer to a parent Asset Folder (or null for
                    root)
              required:
                - displayName
components:
  schemas:
    assets_create-folder_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Asset Folder
        displayName:
          type: string
          description: User visible name for the Asset Folder
        parentFolder:
          type: string
          description: Pointer to parent Asset Folder (or null if root)
        assets:
          type: array
          items:
            type: string
            format: objectid
          description: Array of Asset instances in the folder
        siteId:
          type: string
          format: objectid
          description: The unique ID of the site the Asset Folder belongs to
        createdOn:
          type: string
          format: date-time
          description: Date that the Asset Folder was created on
        lastUpdated:
          type: string
          format: date-time
          description: Date that the Asset Folder was last updated on

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.assets.create_folder(
    site_id="580e63e98c9a982ac9b8b741",
    display_name="my asset folder",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.assets.createFolder("580e63e98c9a982ac9b8b741", {
    displayName: "my asset folder"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders"

	payload := strings.NewReader("{\n  \"displayName\": \"my asset folder\"\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"displayName\": \"my asset folder\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"displayName\": \"my asset folder\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders', [
  'body' => '{
  "displayName": "my asset folder"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"displayName\": \"my asset folder\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["displayName": "my asset folder"] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/asset_folders")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Comment Threads

GET https://api.webflow.com/v2/sites/{site_id}/comments

List all comment threads for a site.

<Note title="Timing of comment threads">
  There may be a delay of up to 5 minutes before new comments appear in the system.
</Note>

Required scope | `comments:read`


Reference: https://developers.webflow.com/data/reference/comments/list-comment-threads

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Comment Threads
  version: endpoint_sites/comments.list-comment-threads
paths:
  /sites/{site_id}/comments:
    get:
      operationId: list-comment-threads
      summary: List Comment Threads
      description: |
        List all comment threads for a site.

        <Note title="Timing of comment threads">
          There may be a delay of up to 5 minutes before new comments appear in the system.
        </Note>

        Required scope | `comments:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/comments
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Lear more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: sortBy
          in: query
          description: >-
            Sort results by the provided value. Only allowed when sortOrder is
            provided.
          required: false
          schema:
            $ref: '#/components/schemas/SitesSiteIdCommentsGetParametersSortBy'
        - name: sortOrder
          in: query
          description: Sorts the results by asc or desc
          required: false
          schema:
            $ref: '#/components/schemas/SitesSiteIdCommentsGetParametersSortOrder'
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/sites_comments_list-comment-threads_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdCommentsGetParametersSortBy:
      type: string
      enum:
        - value: createdOn
        - value: lastUpdated
    SitesSiteIdCommentsGetParametersSortOrder:
      type: string
      enum:
        - value: asc
        - value: desc
    SitesSiteIdCommentsGetResponsesContentApplicationJsonSchemaCommentsItemsAuthor:
      type: object
      properties:
        userId:
          type: string
          description: The unique identifier of the author
        email:
          type: string
          description: Email of the author
        name:
          type: string
          description: Name of the author
      required:
        - userId
        - email
        - name
    SitesSiteIdCommentsGetResponsesContentApplicationJsonSchemaCommentsItemsMentionedUsersItems:
      type: object
      properties:
        userId:
          type: string
          description: The unique identifier of the mentioned user
        email:
          type: string
          description: Email of the user
        name:
          type: string
          description: Name of the  User
      required:
        - userId
        - email
        - name
    SitesSiteIdCommentsGetResponsesContentApplicationJsonSchemaCommentsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the comment thread
        siteId:
          type: string
          description: The site unique identifier
        pageId:
          type: string
          description: The page unique identifier
        localeId:
          type:
            - string
            - 'null'
          description: The locale unique identifier
        itemId:
          type:
            - string
            - 'null'
          description: The item unique identifier
        breakpoint:
          type: string
          description: The breakpoint the comment was left on
        url:
          type: string
          description: The URL of the page the comment was left on
        content:
          type: string
          description: The content of the comment reply
        isResolved:
          type: boolean
          default: false
          description: Boolean determining if the comment thread is resolved
        author:
          $ref: >-
            #/components/schemas/SitesSiteIdCommentsGetResponsesContentApplicationJsonSchemaCommentsItemsAuthor
        mentionedUsers:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCommentsGetResponsesContentApplicationJsonSchemaCommentsItemsMentionedUsersItems
          description: >-
            List of mentioned users. This is an empty array until email
            notifications are sent, which can take up to 5 minutes after the
            comment is created.
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
      required:
        - id
        - siteId
        - pageId
        - localeId
        - itemId
        - breakpoint
        - url
        - content
        - isResolved
        - author
        - mentionedUsers
        - createdOn
        - lastUpdated
    SitesSiteIdCommentsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          default: 100
          description: The limit specified in the request (default 100)
        offset:
          type: number
          format: double
          default: 0
          description: The offset specified for pagination
        total:
          type: number
          format: double
          description: Total number of comment threads
      required:
        - limit
        - offset
        - total
    sites_comments_list-comment-threads_Response_200:
      type: object
      properties:
        comments:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCommentsGetResponsesContentApplicationJsonSchemaCommentsItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdCommentsGetResponsesContentApplicationJsonSchemaPagination
      required:
        - comments
        - pagination

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.comments.list_comment_threads(
    site_id="580e63e98c9a982ac9b8b741",
    locale_id="65427cf400e02b306eaa04a0",
    offset=1,
    limit=1,
    sort_by="createdOn",
    sort_order="asc",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.comments.listCommentThreads("580e63e98c9a982ac9b8b741", {
    localeId: "65427cf400e02b306eaa04a0",
    offset: 1,
    limit: 1,
    sortBy: "createdOn",
    sortOrder: "asc"
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Comment Thread

GET https://api.webflow.com/v2/sites/{site_id}/comments/{comment_thread_id}

Get details of a specific comment thread.

  <Note title="Timing of comment threads">
    There may be a delay of up to 5 minutes before new comments appear in the system.
  </Note>

Required scope | `comments:read`


Reference: https://developers.webflow.com/data/reference/comments/get-comment-thread

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Comment Thread
  version: endpoint_sites/comments.get-comment-thread
paths:
  /sites/{site_id}/comments/{comment_thread_id}:
    get:
      operationId: get-comment-thread
      summary: Get Comment Thread
      description: |
        Get details of a specific comment thread.

          <Note title="Timing of comment threads">
            There may be a delay of up to 5 minutes before new comments appear in the system.
          </Note>

        Required scope | `comments:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/comments
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: comment_thread_id
          in: path
          description: Unique identifier for a Comment Thread
          required: true
          schema:
            type: string
            format: objectid
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Lear more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: sortBy
          in: query
          description: >-
            Sort results by the provided value. Only allowed when sortOrder is
            provided.
          required: false
          schema:
            $ref: >-
              #/components/schemas/SitesSiteIdCommentsCommentThreadIdGetParametersSortBy
        - name: sortOrder
          in: query
          description: Sorts the results by asc or desc
          required: false
          schema:
            $ref: >-
              #/components/schemas/SitesSiteIdCommentsCommentThreadIdGetParametersSortOrder
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/sites_comments_get-comment-thread_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdCommentsCommentThreadIdGetParametersSortBy:
      type: string
      enum:
        - value: createdOn
        - value: lastUpdated
    SitesSiteIdCommentsCommentThreadIdGetParametersSortOrder:
      type: string
      enum:
        - value: asc
        - value: desc
    SitesSiteIdCommentsCommentThreadIdGetResponsesContentApplicationJsonSchemaAuthor:
      type: object
      properties:
        userId:
          type: string
          description: The unique identifier of the author
        email:
          type: string
          description: Email of the author
        name:
          type: string
          description: Name of the author
      required:
        - userId
        - email
        - name
    SitesSiteIdCommentsCommentThreadIdGetResponsesContentApplicationJsonSchemaMentionedUsersItems:
      type: object
      properties:
        userId:
          type: string
          description: The unique identifier of the mentioned user
        email:
          type: string
          description: Email of the user
        name:
          type: string
          description: Name of the  User
      required:
        - userId
        - email
        - name
    sites_comments_get-comment-thread_Response_200:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the comment thread
        siteId:
          type: string
          description: The site unique identifier
        pageId:
          type: string
          description: The page unique identifier
        localeId:
          type:
            - string
            - 'null'
          description: The locale unique identifier
        itemId:
          type:
            - string
            - 'null'
          description: The item unique identifier
        breakpoint:
          type: string
          description: The breakpoint the comment was left on
        url:
          type: string
          description: The URL of the page the comment was left on
        content:
          type: string
          description: The content of the comment reply
        isResolved:
          type: boolean
          default: false
          description: Boolean determining if the comment thread is resolved
        author:
          $ref: >-
            #/components/schemas/SitesSiteIdCommentsCommentThreadIdGetResponsesContentApplicationJsonSchemaAuthor
        mentionedUsers:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCommentsCommentThreadIdGetResponsesContentApplicationJsonSchemaMentionedUsersItems
          description: >-
            List of mentioned users. This is an empty array until email
            notifications are sent, which can take up to 5 minutes after the
            comment is created.
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
      required:
        - id
        - siteId
        - pageId
        - localeId
        - itemId
        - breakpoint
        - url
        - content
        - isResolved
        - author
        - mentionedUsers
        - createdOn
        - lastUpdated

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.comments.get_comment_thread(
    site_id="580e63e98c9a982ac9b8b741",
    comment_thread_id="580e63e98c9a982ac9b8b741",
    locale_id="65427cf400e02b306eaa04a0",
    offset=1,
    limit=1,
    sort_by="createdOn",
    sort_order="asc",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.comments.getCommentThread("580e63e98c9a982ac9b8b741", "580e63e98c9a982ac9b8b741", {
    localeId: "65427cf400e02b306eaa04a0",
    offset: 1,
    limit: 1,
    sortBy: "createdOn",
    sortOrder: "asc"
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Comment Replies

GET https://api.webflow.com/v2/sites/{site_id}/comments/{comment_thread_id}/replies

List all replies to a specific comment thread.

<Note title="Timing of comment threads">
  There may be a delay of up to 5 minutes before new comments appear in the system.
</Note>

Required scope | `comments:read`


Reference: https://developers.webflow.com/data/reference/comments/list-comment-replies

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Comment Replies
  version: endpoint_sites/comments.list-comment-replies
paths:
  /sites/{site_id}/comments/{comment_thread_id}/replies:
    get:
      operationId: list-comment-replies
      summary: List Comment Replies
      description: |
        List all replies to a specific comment thread.

        <Note title="Timing of comment threads">
          There may be a delay of up to 5 minutes before new comments appear in the system.
        </Note>

        Required scope | `comments:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/comments
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: comment_thread_id
          in: path
          description: Unique identifier for a Comment Thread
          required: true
          schema:
            type: string
            format: objectid
        - name: localeId
          in: query
          description: >
            Unique identifier for a specific Locale.


            [Lear more about
            localization.](/data/v2.0.0/docs/working-with-localization)
          required: false
          schema:
            type: string
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: sortBy
          in: query
          description: >-
            Sort results by the provided value. Only allowed when sortOrder is
            provided.
          required: false
          schema:
            $ref: >-
              #/components/schemas/SitesSiteIdCommentsCommentThreadIdRepliesGetParametersSortBy
        - name: sortOrder
          in: query
          description: Sorts the results by asc or desc
          required: false
          schema:
            $ref: >-
              #/components/schemas/SitesSiteIdCommentsCommentThreadIdRepliesGetParametersSortOrder
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/sites_comments_list-comment-replies_Response_200
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdCommentsCommentThreadIdRepliesGetParametersSortBy:
      type: string
      enum:
        - value: createdOn
        - value: lastUpdated
    SitesSiteIdCommentsCommentThreadIdRepliesGetParametersSortOrder:
      type: string
      enum:
        - value: asc
        - value: desc
    SitesSiteIdCommentsCommentThreadIdRepliesGetResponsesContentApplicationJsonSchemaCommentsItemsAuthor:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier of the author
        email:
          type: string
          description: Email of the author
        name:
          type: string
          description: Name of the author
      required:
        - id
        - email
        - name
    SitesSiteIdCommentsCommentThreadIdRepliesGetResponsesContentApplicationJsonSchemaCommentsItemsMentionedUsersItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier of the mentioned user
        email:
          type: string
          description: Email of the user
        name:
          type: string
          description: Name of the  User
      required:
        - id
        - email
        - name
    SitesSiteIdCommentsCommentThreadIdRepliesGetResponsesContentApplicationJsonSchemaCommentsItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the comment thread
        commentId:
          type: string
          description: The comment reply unique identifier
        siteId:
          type: string
          description: The site unique identifier
        pageId:
          type: string
          description: The page unique identifier
        localeId:
          type: string
          description: The locale unique identifier
        breakpoint:
          type: string
          description: The breakpoint the comment was left on
        content:
          type: string
          description: The content of the comment reply
        isResolved:
          type: boolean
          default: false
          description: Boolean determining if the comment thread is resolved
        author:
          $ref: >-
            #/components/schemas/SitesSiteIdCommentsCommentThreadIdRepliesGetResponsesContentApplicationJsonSchemaCommentsItemsAuthor
        mentionedUsers:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCommentsCommentThreadIdRepliesGetResponsesContentApplicationJsonSchemaCommentsItemsMentionedUsersItems
          description: >-
            List of mentioned users is an empty array until email notifications
            are sent.
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
      required:
        - id
        - commentId
        - siteId
        - pageId
        - breakpoint
        - content
        - isResolved
        - author
        - lastUpdated
        - createdOn
    SitesSiteIdCommentsCommentThreadIdRepliesGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          default: 100
          description: The limit specified in the request (default 100)
        offset:
          type: number
          format: double
          default: 0
          description: The offset specified for pagination
        total:
          type: number
          format: double
          description: Total number of comment replies
      required:
        - limit
        - offset
        - total
    sites_comments_list-comment-replies_Response_200:
      type: object
      properties:
        comments:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdCommentsCommentThreadIdRepliesGetResponsesContentApplicationJsonSchemaCommentsItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdCommentsCommentThreadIdRepliesGetResponsesContentApplicationJsonSchemaPagination
      required:
        - comments
        - pagination

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.comments.list_comment_replies(
    site_id="580e63e98c9a982ac9b8b741",
    comment_thread_id="580e63e98c9a982ac9b8b741",
    locale_id="65427cf400e02b306eaa04a0",
    offset=1,
    limit=1,
    sort_by="createdOn",
    sort_order="asc",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.comments.listCommentReplies("580e63e98c9a982ac9b8b741", "580e63e98c9a982ac9b8b741", {
    localeId: "65427cf400e02b306eaa04a0",
    offset: 1,
    limit: 1,
    sortBy: "createdOn",
    sortOrder: "asc"
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741/replies?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741/replies?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741/replies?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741/replies?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741/replies?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/comments/580e63e98c9a982ac9b8b741/replies?localeId=65427cf400e02b306eaa04a0&offset=0&limit=100")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Users

GET https://api.webflow.com/v2/sites/{site_id}/users

Get a list of users for a site

Required scope | `users:read`


Reference: https://developers.webflow.com/data/reference/users/users/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Users
  version: endpoint_users.list
paths:
  /sites/{site_id}/users:
    get:
      operationId: list
      summary: List Users
      description: |
        Get a list of users for a site

        Required scope | `users:read`
      tags:
        - - subpackage_users
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: sort
          in: query
          description: |
            Sort string to use when ordering users

            Example(`CreatedOn`, `Email`, `Status`, `LastLogin`, `UpdatedOn`).

            Can be prefixed with a `-` to reverse the sort (ex. `-CreatedOn`)
          required: false
          schema:
            $ref: '#/components/schemas/SitesSiteIdUsersGetParametersSort'
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/users_list_Response_200'
        '400':
          description: Validation failure
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdUsersGetParametersSort:
      type: string
      enum:
        - description: Sorts users in ascending order based on their created date
          value: CreatedOn
        - description: Sorts users in descending order based on their created date
          value: '-CreatedOn'
        - description: Sorts users in ascending order based on their email
          value: Email
        - description: Sorts users in descending order based on their email
          value: '-Email'
        - description: Sorts users in ascending order based on their status
          value: Status
        - description: Sorts users in descending order based on their status
          value: '-Status'
        - description: Sorts users in ascending order based on their last login date
          value: LastLogin
        - description: Sorts users in descending order based on their last login date
          value: '-LastLogin'
        - description: Sorts users in ascending order based on their update date
          value: UpdatedOn
        - description: Sorts users in descending order based on their update date
          value: '-UpdatedOn'
    SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItemsStatus:
      type: string
      enum:
        - value: invited
        - value: verified
        - value: unverified
    SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItemsAccessGroupsItemsType:
      type: string
      enum:
        - value: admin
        - value: ecommerce
    SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItemsAccessGroupsItems:
      type: object
      properties:
        slug:
          type: string
          description: Access group identifier for APIs
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItemsAccessGroupsItemsType
          description: |
            The type of access group based on how it was assigned to the user.
            * `admin` - Assigned to the user via API or in the designer
            * `ecommerce` - Assigned to the user via an ecommerce purchase
    SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItemsDataData:
      type: object
      properties:
        name:
          type: string
          description: |
            The name of the user
        email:
          type: string
          description: |
            The email address of the user
        accept-privacy:
          type: boolean
          description: |
            Boolean indicating if the user has accepted the privacy policy
        accept-communications:
          type: boolean
          description: >
            Boolean indicating if the user has accepted to receive
            communications
        additionalProperties:
          type: string
          description: Custom user attributes
    SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItemsData:
      type: object
      properties:
        data:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItemsDataData
    SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the User
        isEmailVerified:
          type: boolean
          description: Shows whether the user has verified their email address
        lastUpdated:
          type: string
          format: date-time
          description: The timestamp the user was updated
        invitedOn:
          type: string
          format: date-time
          description: The timestamp the user was invited
        createdOn:
          type: string
          format: date-time
          description: The timestamp the user was created
        lastLogin:
          type: string
          format: date-time
          description: The timestamp the user was logged in
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItemsStatus
          description: The status of the user
        accessGroups:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItemsAccessGroupsItems
          description: Access groups the user belongs to
        data:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItemsData
          description: An object containing the User's basic info and custom fields
    users_list_Response_200:
      type: object
      properties:
        count:
          type: number
          format: double
          description: Number of users returned
        limit:
          type: number
          format: double
          default: 10
          description: The limit specified in the request
        offset:
          type: number
          format: double
          default: 0
          description: The offset specified for pagination
        total:
          type: number
          format: double
          description: Total number of users in the collection
        users:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdUsersGetResponsesContentApplicationJsonSchemaUsersItems
          description: List of Users for a Site

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.users.list(
    site_id="580e63e98c9a982ac9b8b741",
    offset=1,
    limit=1,
    sort="CreatedOn",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.users.list("580e63e98c9a982ac9b8b741", {
    offset: 1,
    limit: 1,
    sort: "CreatedOn"
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users?offset=0&limit=100&sort=CreatedOn"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users?offset=0&limit=100&sort=CreatedOn")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users?offset=0&limit=100&sort=CreatedOn")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users?offset=0&limit=100&sort=CreatedOn', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users?offset=0&limit=100&sort=CreatedOn");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users?offset=0&limit=100&sort=CreatedOn")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get User

GET https://api.webflow.com/v2/sites/{site_id}/users/{user_id}

Get a User by ID

Required scope | `users:read`


Reference: https://developers.webflow.com/data/reference/users/users/get

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get User
  version: endpoint_users.get
paths:
  /sites/{site_id}/users/{user_id}:
    get:
      operationId: get
      summary: Get User
      description: |
        Get a User by ID

        Required scope | `users:read`
      tags:
        - - subpackage_users
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: user_id
          in: path
          description: Unique identifier for a User
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/users_get_Response_200'
        '400':
          description: Validation failure
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdUsersUserIdGetResponsesContentApplicationJsonSchemaStatus:
      type: string
      enum:
        - value: invited
        - value: verified
        - value: unverified
    SitesSiteIdUsersUserIdGetResponsesContentApplicationJsonSchemaAccessGroupsItemsType:
      type: string
      enum:
        - value: admin
        - value: ecommerce
    SitesSiteIdUsersUserIdGetResponsesContentApplicationJsonSchemaAccessGroupsItems:
      type: object
      properties:
        slug:
          type: string
          description: Access group identifier for APIs
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersUserIdGetResponsesContentApplicationJsonSchemaAccessGroupsItemsType
          description: |
            The type of access group based on how it was assigned to the user.
            * `admin` - Assigned to the user via API or in the designer
            * `ecommerce` - Assigned to the user via an ecommerce purchase
    SitesSiteIdUsersUserIdGetResponsesContentApplicationJsonSchemaDataData:
      type: object
      properties:
        name:
          type: string
          description: |
            The name of the user
        email:
          type: string
          description: |
            The email address of the user
        accept-privacy:
          type: boolean
          description: |
            Boolean indicating if the user has accepted the privacy policy
        accept-communications:
          type: boolean
          description: >
            Boolean indicating if the user has accepted to receive
            communications
        additionalProperties:
          type: string
          description: Custom user attributes
    SitesSiteIdUsersUserIdGetResponsesContentApplicationJsonSchemaData:
      type: object
      properties:
        data:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersUserIdGetResponsesContentApplicationJsonSchemaDataData
    users_get_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the User
        isEmailVerified:
          type: boolean
          description: Shows whether the user has verified their email address
        lastUpdated:
          type: string
          format: date-time
          description: The timestamp the user was updated
        invitedOn:
          type: string
          format: date-time
          description: The timestamp the user was invited
        createdOn:
          type: string
          format: date-time
          description: The timestamp the user was created
        lastLogin:
          type: string
          format: date-time
          description: The timestamp the user was logged in
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersUserIdGetResponsesContentApplicationJsonSchemaStatus
          description: The status of the user
        accessGroups:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdUsersUserIdGetResponsesContentApplicationJsonSchemaAccessGroupsItems
          description: Access groups the user belongs to
        data:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersUserIdGetResponsesContentApplicationJsonSchemaData
          description: An object containing the User's basic info and custom fields

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.users.get(
    site_id="580e63e98c9a982ac9b8b741",
    user_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.users.get("580e63e98c9a982ac9b8b741", "580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete User

DELETE https://api.webflow.com/v2/sites/{site_id}/users/{user_id}

Delete a User by ID

Required scope | `users:write`


Reference: https://developers.webflow.com/data/reference/users/users/delete

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete User
  version: endpoint_users.delete
paths:
  /sites/{site_id}/users/{user_id}:
    delete:
      operationId: delete
      summary: Delete User
      description: |
        Delete a User by ID

        Required scope | `users:write`
      tags:
        - - subpackage_users
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: user_id
          in: path
          description: Unique identifier for a User
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Request was successful. No Content is returned.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/users_delete_Response_204'
        '400':
          description: Validation failure
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    users_delete_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.users.delete(
    site_id="580e63e98c9a982ac9b8b741",
    user_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.users.delete("580e63e98c9a982ac9b8b741", "580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741"

	req, _ := http.NewRequest("DELETE", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update User

PATCH https://api.webflow.com/v2/sites/{site_id}/users/{user_id}
Content-Type: application/json

Update a User by ID 

  Required scope | `users:write`

<Note class="notice">The <code>email</code> and <code>password</code>
fields cannot be updated using this endpoint</Note>


Reference: https://developers.webflow.com/data/reference/users/users/update

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update User
  version: endpoint_users.update
paths:
  /sites/{site_id}/users/{user_id}:
    patch:
      operationId: update
      summary: Update User
      description: |
        Update a User by ID 

          Required scope | `users:write`

        <Note class="notice">The <code>email</code> and <code>password</code>
        fields cannot be updated using this endpoint</Note>
      tags:
        - - subpackage_users
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: user_id
          in: path
          description: Unique identifier for a User
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/users_update_Response_200'
        '400':
          description: Validation failure
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                id:
                  type: string
                  format: objectid
                  description: Unique identifier for the User
                isEmailVerified:
                  type: boolean
                  description: Shows whether the user has verified their email address
                lastUpdated:
                  type: string
                  format: date-time
                  description: The timestamp the user was updated
                invitedOn:
                  type: string
                  format: date-time
                  description: The timestamp the user was invited
                createdOn:
                  type: string
                  format: date-time
                  description: The timestamp the user was created
                lastLogin:
                  type: string
                  format: date-time
                  description: The timestamp the user was logged in
                status:
                  $ref: >-
                    #/components/schemas/SitesSiteIdUsersUserIdPatchRequestBodyContentApplicationJsonSchemaStatus
                  description: The status of the user
                accessGroups:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/SitesSiteIdUsersUserIdPatchRequestBodyContentApplicationJsonSchemaAccessGroupsItems
                  description: Access groups the user belongs to
                data:
                  $ref: >-
                    #/components/schemas/SitesSiteIdUsersUserIdPatchRequestBodyContentApplicationJsonSchemaData
                  description: An object containing the User's basic info and custom fields
components:
  schemas:
    SitesSiteIdUsersUserIdPatchRequestBodyContentApplicationJsonSchemaStatus:
      type: string
      enum:
        - value: invited
        - value: verified
        - value: unverified
    SitesSiteIdUsersUserIdPatchRequestBodyContentApplicationJsonSchemaAccessGroupsItemsType:
      type: string
      enum:
        - value: admin
        - value: ecommerce
    SitesSiteIdUsersUserIdPatchRequestBodyContentApplicationJsonSchemaAccessGroupsItems:
      type: object
      properties:
        slug:
          type: string
          description: Access group identifier for APIs
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersUserIdPatchRequestBodyContentApplicationJsonSchemaAccessGroupsItemsType
          description: |
            The type of access group based on how it was assigned to the user.
            * `admin` - Assigned to the user via API or in the designer
            * `ecommerce` - Assigned to the user via an ecommerce purchase
    SitesSiteIdUsersUserIdPatchRequestBodyContentApplicationJsonSchemaDataData:
      type: object
      properties:
        name:
          type: string
          description: |
            The name of the user
        email:
          type: string
          description: |
            The email address of the user
        accept-privacy:
          type: boolean
          description: |
            Boolean indicating if the user has accepted the privacy policy
        accept-communications:
          type: boolean
          description: >
            Boolean indicating if the user has accepted to receive
            communications
        additionalProperties:
          type: string
          description: Custom user attributes
    SitesSiteIdUsersUserIdPatchRequestBodyContentApplicationJsonSchemaData:
      type: object
      properties:
        data:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersUserIdPatchRequestBodyContentApplicationJsonSchemaDataData
    SitesSiteIdUsersUserIdPatchResponsesContentApplicationJsonSchemaStatus:
      type: string
      enum:
        - value: invited
        - value: verified
        - value: unverified
    SitesSiteIdUsersUserIdPatchResponsesContentApplicationJsonSchemaAccessGroupsItemsType:
      type: string
      enum:
        - value: admin
        - value: ecommerce
    SitesSiteIdUsersUserIdPatchResponsesContentApplicationJsonSchemaAccessGroupsItems:
      type: object
      properties:
        slug:
          type: string
          description: Access group identifier for APIs
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersUserIdPatchResponsesContentApplicationJsonSchemaAccessGroupsItemsType
          description: |
            The type of access group based on how it was assigned to the user.
            * `admin` - Assigned to the user via API or in the designer
            * `ecommerce` - Assigned to the user via an ecommerce purchase
    SitesSiteIdUsersUserIdPatchResponsesContentApplicationJsonSchemaDataData:
      type: object
      properties:
        name:
          type: string
          description: |
            The name of the user
        email:
          type: string
          description: |
            The email address of the user
        accept-privacy:
          type: boolean
          description: |
            Boolean indicating if the user has accepted the privacy policy
        accept-communications:
          type: boolean
          description: >
            Boolean indicating if the user has accepted to receive
            communications
        additionalProperties:
          type: string
          description: Custom user attributes
    SitesSiteIdUsersUserIdPatchResponsesContentApplicationJsonSchemaData:
      type: object
      properties:
        data:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersUserIdPatchResponsesContentApplicationJsonSchemaDataData
    users_update_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the User
        isEmailVerified:
          type: boolean
          description: Shows whether the user has verified their email address
        lastUpdated:
          type: string
          format: date-time
          description: The timestamp the user was updated
        invitedOn:
          type: string
          format: date-time
          description: The timestamp the user was invited
        createdOn:
          type: string
          format: date-time
          description: The timestamp the user was created
        lastLogin:
          type: string
          format: date-time
          description: The timestamp the user was logged in
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersUserIdPatchResponsesContentApplicationJsonSchemaStatus
          description: The status of the user
        accessGroups:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdUsersUserIdPatchResponsesContentApplicationJsonSchemaAccessGroupsItems
          description: Access groups the user belongs to
        data:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersUserIdPatchResponsesContentApplicationJsonSchemaData
          description: An object containing the User's basic info and custom fields

```

## SDK Code Examples

```python
import datetime

from webflow import UserAccessGroupsItem, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.users.update(
    site_id="580e63e98c9a982ac9b8b741",
    user_id="580e63e98c9a982ac9b8b741",
    id="6287ec36a841b25637c663df",
    is_email_verified=True,
    last_updated=datetime.datetime.fromisoformat(
        "2022-05-20 13:46:12+00:00",
    ),
    invited_on=datetime.datetime.fromisoformat(
        "2022-05-20 13:46:12+00:00",
    ),
    created_on=datetime.datetime.fromisoformat(
        "2022-05-20 13:46:12+00:00",
    ),
    last_login=datetime.datetime.fromisoformat(
        "2022-05-20 13:46:12+00:00",
    ),
    status="verified",
    access_groups=[
        UserAccessGroupsItem(
            slug="webflowers",
            type="admin",
        )
    ],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.users.update("580e63e98c9a982ac9b8b741", "580e63e98c9a982ac9b8b741", {
    id: "6287ec36a841b25637c663df",
    isEmailVerified: true,
    lastUpdated: new Date("2022-05-20T13:46:12.000Z"),
    invitedOn: new Date("2022-05-20T13:46:12.000Z"),
    createdOn: new Date("2022-05-20T13:46:12.000Z"),
    lastLogin: new Date("2022-05-20T13:46:12.000Z"),
    status: "verified",
    accessGroups: [{
            slug: "webflowers",
            type: "admin"
        }]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741"

	payload := strings.NewReader("{\n  \"id\": \"6287ec36a841b25637c663df\",\n  \"isEmailVerified\": true,\n  \"lastUpdated\": \"2022-05-20T13:46:12.093Z\",\n  \"invitedOn\": \"2022-05-20T13:46:12.093Z\",\n  \"createdOn\": \"2022-05-20T13:46:12.093Z\",\n  \"lastLogin\": \"2022-05-20T13:46:12.093Z\",\n  \"status\": \"verified\",\n  \"accessGroups\": [\n    {\n      \"slug\": \"webflowers\",\n      \"type\": \"admin\"\n    }\n  ],\n  \"data\": {\n    \"name\": \"Arthur Dent\",\n    \"email\": \"arthur.dent@mostlyharmless.com\",\n    \"accept-privacy\": true,\n    \"accept-communications\": true,\n    \"favoriteDrink\": \"Tea\",\n    \"currentPlanet\": \"Somewhere in the vicinity of Betelgeuse\"\n  }\n}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"id\": \"6287ec36a841b25637c663df\",\n  \"isEmailVerified\": true,\n  \"lastUpdated\": \"2022-05-20T13:46:12.093Z\",\n  \"invitedOn\": \"2022-05-20T13:46:12.093Z\",\n  \"createdOn\": \"2022-05-20T13:46:12.093Z\",\n  \"lastLogin\": \"2022-05-20T13:46:12.093Z\",\n  \"status\": \"verified\",\n  \"accessGroups\": [\n    {\n      \"slug\": \"webflowers\",\n      \"type\": \"admin\"\n    }\n  ],\n  \"data\": {\n    \"name\": \"Arthur Dent\",\n    \"email\": \"arthur.dent@mostlyharmless.com\",\n    \"accept-privacy\": true,\n    \"accept-communications\": true,\n    \"favoriteDrink\": \"Tea\",\n    \"currentPlanet\": \"Somewhere in the vicinity of Betelgeuse\"\n  }\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"id\": \"6287ec36a841b25637c663df\",\n  \"isEmailVerified\": true,\n  \"lastUpdated\": \"2022-05-20T13:46:12.093Z\",\n  \"invitedOn\": \"2022-05-20T13:46:12.093Z\",\n  \"createdOn\": \"2022-05-20T13:46:12.093Z\",\n  \"lastLogin\": \"2022-05-20T13:46:12.093Z\",\n  \"status\": \"verified\",\n  \"accessGroups\": [\n    {\n      \"slug\": \"webflowers\",\n      \"type\": \"admin\"\n    }\n  ],\n  \"data\": {\n    \"name\": \"Arthur Dent\",\n    \"email\": \"arthur.dent@mostlyharmless.com\",\n    \"accept-privacy\": true,\n    \"accept-communications\": true,\n    \"favoriteDrink\": \"Tea\",\n    \"currentPlanet\": \"Somewhere in the vicinity of Betelgeuse\"\n  }\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741', [
  'body' => '{
  "id": "6287ec36a841b25637c663df",
  "isEmailVerified": true,
  "lastUpdated": "2022-05-20T13:46:12.093Z",
  "invitedOn": "2022-05-20T13:46:12.093Z",
  "createdOn": "2022-05-20T13:46:12.093Z",
  "lastLogin": "2022-05-20T13:46:12.093Z",
  "status": "verified",
  "accessGroups": [
    {
      "slug": "webflowers",
      "type": "admin"
    }
  ],
  "data": {
    "name": "Arthur Dent",
    "email": "arthur.dent@mostlyharmless.com",
    "accept-privacy": true,
    "accept-communications": true,
    "favoriteDrink": "Tea",
    "currentPlanet": "Somewhere in the vicinity of Betelgeuse"
  }
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"id\": \"6287ec36a841b25637c663df\",\n  \"isEmailVerified\": true,\n  \"lastUpdated\": \"2022-05-20T13:46:12.093Z\",\n  \"invitedOn\": \"2022-05-20T13:46:12.093Z\",\n  \"createdOn\": \"2022-05-20T13:46:12.093Z\",\n  \"lastLogin\": \"2022-05-20T13:46:12.093Z\",\n  \"status\": \"verified\",\n  \"accessGroups\": [\n    {\n      \"slug\": \"webflowers\",\n      \"type\": \"admin\"\n    }\n  ],\n  \"data\": {\n    \"name\": \"Arthur Dent\",\n    \"email\": \"arthur.dent@mostlyharmless.com\",\n    \"accept-privacy\": true,\n    \"accept-communications\": true,\n    \"favoriteDrink\": \"Tea\",\n    \"currentPlanet\": \"Somewhere in the vicinity of Betelgeuse\"\n  }\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "id": "6287ec36a841b25637c663df",
  "isEmailVerified": true,
  "lastUpdated": "2022-05-20T13:46:12.093Z",
  "invitedOn": "2022-05-20T13:46:12.093Z",
  "createdOn": "2022-05-20T13:46:12.093Z",
  "lastLogin": "2022-05-20T13:46:12.093Z",
  "status": "verified",
  "accessGroups": [
    [
      "slug": "webflowers",
      "type": "admin"
    ]
  ],
  "data": [
    "name": "Arthur Dent",
    "email": "arthur.dent@mostlyharmless.com",
    "accept-privacy": true,
    "accept-communications": true,
    "favoriteDrink": "Tea",
    "currentPlanet": "Somewhere in the vicinity of Betelgeuse"
  ]
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/580e63e98c9a982ac9b8b741")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Create and Invite a User

POST https://api.webflow.com/v2/sites/{site_id}/users/invite
Content-Type: application/json

Create and invite a user with an email address. 

The user will be sent and invite via email, which they will need to accept in order to join paid any paid access group. 

Required scope | `users:write`


Reference: https://developers.webflow.com/data/reference/users/users/invite

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Create and Invite a User
  version: endpoint_users.invite
paths:
  /sites/{site_id}/users/invite:
    post:
      operationId: invite
      summary: Create and Invite a User
      description: >
        Create and invite a user with an email address. 


        The user will be sent and invite via email, which they will need to
        accept in order to join paid any paid access group. 


        Required scope | `users:write`
      tags:
        - - subpackage_users
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/users_invite_Response_200'
        '400':
          description: Validation failure
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: Conflict
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                email:
                  type: string
                  format: email
                  description: Email address of user to send invite to
                accessGroups:
                  type: array
                  items:
                    type: string
                  description: >
                    An array of access group slugs. Access groups are assigned
                    to the user as type `admin` and the user remains in the
                    group until removed.
              required:
                - email
components:
  schemas:
    SitesSiteIdUsersInvitePostResponsesContentApplicationJsonSchemaStatus:
      type: string
      enum:
        - value: invited
        - value: verified
        - value: unverified
    SitesSiteIdUsersInvitePostResponsesContentApplicationJsonSchemaAccessGroupsItemsType:
      type: string
      enum:
        - value: admin
        - value: ecommerce
    SitesSiteIdUsersInvitePostResponsesContentApplicationJsonSchemaAccessGroupsItems:
      type: object
      properties:
        slug:
          type: string
          description: Access group identifier for APIs
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersInvitePostResponsesContentApplicationJsonSchemaAccessGroupsItemsType
          description: |
            The type of access group based on how it was assigned to the user.
            * `admin` - Assigned to the user via API or in the designer
            * `ecommerce` - Assigned to the user via an ecommerce purchase
    SitesSiteIdUsersInvitePostResponsesContentApplicationJsonSchemaDataData:
      type: object
      properties:
        name:
          type: string
          description: |
            The name of the user
        email:
          type: string
          description: |
            The email address of the user
        accept-privacy:
          type: boolean
          description: |
            Boolean indicating if the user has accepted the privacy policy
        accept-communications:
          type: boolean
          description: >
            Boolean indicating if the user has accepted to receive
            communications
        additionalProperties:
          type: string
          description: Custom user attributes
    SitesSiteIdUsersInvitePostResponsesContentApplicationJsonSchemaData:
      type: object
      properties:
        data:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersInvitePostResponsesContentApplicationJsonSchemaDataData
    users_invite_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the User
        isEmailVerified:
          type: boolean
          description: Shows whether the user has verified their email address
        lastUpdated:
          type: string
          format: date-time
          description: The timestamp the user was updated
        invitedOn:
          type: string
          format: date-time
          description: The timestamp the user was invited
        createdOn:
          type: string
          format: date-time
          description: The timestamp the user was created
        lastLogin:
          type: string
          format: date-time
          description: The timestamp the user was logged in
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersInvitePostResponsesContentApplicationJsonSchemaStatus
          description: The status of the user
        accessGroups:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdUsersInvitePostResponsesContentApplicationJsonSchemaAccessGroupsItems
          description: Access groups the user belongs to
        data:
          $ref: >-
            #/components/schemas/SitesSiteIdUsersInvitePostResponsesContentApplicationJsonSchemaData
          description: An object containing the User's basic info and custom fields

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.users.invite(
    site_id="580e63e98c9a982ac9b8b741",
    email="some.one@home.com",
    access_groups=["accessGroups"],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.users.invite("580e63e98c9a982ac9b8b741", {
    email: "some.one@home.com",
    accessGroups: ["accessGroups"]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/invite"

	payload := strings.NewReader("{\n  \"email\": \"some.one@home.com\",\n  \"accessGroups\": [\n    \"string\"\n  ],\n  \"id\": \"6287ec36a841b25637c663df\",\n  \"isEmailVerified\": true,\n  \"lastUpdated\": \"2022-05-20T13:46:12.093Z\",\n  \"invitedOn\": \"2022-05-20T13:46:12.093Z\",\n  \"createdOn\": \"2022-05-20T13:46:12.093Z\",\n  \"lastLogin\": \"2022-05-20T13:46:12.093Z\",\n  \"status\": \"verified\",\n  \"data\": {\n    \"name\": \"Arthur Dent\",\n    \"email\": \"arthur.dent@mostlyharmless.com\",\n    \"accept-privacy\": true,\n    \"accept-communications\": true,\n    \"favoriteDrink\": \"Tea\",\n    \"currentPlanet\": \"Somewhere in the vicinity of Betelgeuse\"\n  }\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/invite")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"email\": \"some.one@home.com\",\n  \"accessGroups\": [\n    \"string\"\n  ],\n  \"id\": \"6287ec36a841b25637c663df\",\n  \"isEmailVerified\": true,\n  \"lastUpdated\": \"2022-05-20T13:46:12.093Z\",\n  \"invitedOn\": \"2022-05-20T13:46:12.093Z\",\n  \"createdOn\": \"2022-05-20T13:46:12.093Z\",\n  \"lastLogin\": \"2022-05-20T13:46:12.093Z\",\n  \"status\": \"verified\",\n  \"data\": {\n    \"name\": \"Arthur Dent\",\n    \"email\": \"arthur.dent@mostlyharmless.com\",\n    \"accept-privacy\": true,\n    \"accept-communications\": true,\n    \"favoriteDrink\": \"Tea\",\n    \"currentPlanet\": \"Somewhere in the vicinity of Betelgeuse\"\n  }\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/invite")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"email\": \"some.one@home.com\",\n  \"accessGroups\": [\n    \"string\"\n  ],\n  \"id\": \"6287ec36a841b25637c663df\",\n  \"isEmailVerified\": true,\n  \"lastUpdated\": \"2022-05-20T13:46:12.093Z\",\n  \"invitedOn\": \"2022-05-20T13:46:12.093Z\",\n  \"createdOn\": \"2022-05-20T13:46:12.093Z\",\n  \"lastLogin\": \"2022-05-20T13:46:12.093Z\",\n  \"status\": \"verified\",\n  \"data\": {\n    \"name\": \"Arthur Dent\",\n    \"email\": \"arthur.dent@mostlyharmless.com\",\n    \"accept-privacy\": true,\n    \"accept-communications\": true,\n    \"favoriteDrink\": \"Tea\",\n    \"currentPlanet\": \"Somewhere in the vicinity of Betelgeuse\"\n  }\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/invite', [
  'body' => '{
  "email": "some.one@home.com",
  "accessGroups": [
    "string"
  ],
  "id": "6287ec36a841b25637c663df",
  "isEmailVerified": true,
  "lastUpdated": "2022-05-20T13:46:12.093Z",
  "invitedOn": "2022-05-20T13:46:12.093Z",
  "createdOn": "2022-05-20T13:46:12.093Z",
  "lastLogin": "2022-05-20T13:46:12.093Z",
  "status": "verified",
  "data": {
    "name": "Arthur Dent",
    "email": "arthur.dent@mostlyharmless.com",
    "accept-privacy": true,
    "accept-communications": true,
    "favoriteDrink": "Tea",
    "currentPlanet": "Somewhere in the vicinity of Betelgeuse"
  }
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/invite");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"email\": \"some.one@home.com\",\n  \"accessGroups\": [\n    \"string\"\n  ],\n  \"id\": \"6287ec36a841b25637c663df\",\n  \"isEmailVerified\": true,\n  \"lastUpdated\": \"2022-05-20T13:46:12.093Z\",\n  \"invitedOn\": \"2022-05-20T13:46:12.093Z\",\n  \"createdOn\": \"2022-05-20T13:46:12.093Z\",\n  \"lastLogin\": \"2022-05-20T13:46:12.093Z\",\n  \"status\": \"verified\",\n  \"data\": {\n    \"name\": \"Arthur Dent\",\n    \"email\": \"arthur.dent@mostlyharmless.com\",\n    \"accept-privacy\": true,\n    \"accept-communications\": true,\n    \"favoriteDrink\": \"Tea\",\n    \"currentPlanet\": \"Somewhere in the vicinity of Betelgeuse\"\n  }\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "email": "some.one@home.com",
  "accessGroups": ["string"],
  "id": "6287ec36a841b25637c663df",
  "isEmailVerified": true,
  "lastUpdated": "2022-05-20T13:46:12.093Z",
  "invitedOn": "2022-05-20T13:46:12.093Z",
  "createdOn": "2022-05-20T13:46:12.093Z",
  "lastLogin": "2022-05-20T13:46:12.093Z",
  "status": "verified",
  "data": [
    "name": "Arthur Dent",
    "email": "arthur.dent@mostlyharmless.com",
    "accept-privacy": true,
    "accept-communications": true,
    "favoriteDrink": "Tea",
    "currentPlanet": "Somewhere in the vicinity of Betelgeuse"
  ]
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/users/invite")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Access Groups

GET https://api.webflow.com/v2/sites/{site_id}/accessgroups

Get a list of access groups for a site

Required scope | `users:read`


Reference: https://developers.webflow.com/data/reference/users/access-groups/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Access Groups
  version: endpoint_accessGroups.list
paths:
  /sites/{site_id}/accessgroups:
    get:
      operationId: list
      summary: List Access Groups
      description: |
        Get a list of access groups for a site

        Required scope | `users:read`
      tags:
        - - subpackage_accessGroups
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: sort
          in: query
          description: |
            Sort string to use when ordering access groups
            Can be prefixed with a `-` to reverse the sort (ex. `-CreatedOn`)
          required: false
          schema:
            $ref: '#/components/schemas/SitesSiteIdAccessgroupsGetParametersSort'
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/access-groups_list_Response_200'
        '400':
          description: Validation failure
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdAccessgroupsGetParametersSort:
      type: string
      enum:
        - description: Sorts users in ascending order based on their created date
          value: CreatedOn
        - description: Sorts users in descending order based on their created date
          value: '-CreatedOn'
    SitesSiteIdAccessgroupsGetResponsesContentApplicationJsonSchemaAccessGroupsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Access Group
        name:
          type: string
          description: Name of the the Access Group
        shortId:
          type: string
          description: >-
            Shortened unique identifier based on name, optimized for its use in
            the user’s JWT
        slug:
          type: string
          description: >-
            Shortened unique identifier based on name, optimized for human
            readability and public API use
        createdOn:
          type: string
          format: date-time
          description: The date the Access Group was created
    access-groups_list_Response_200:
      type: object
      properties:
        count:
          type: number
          format: double
          description: Number of access groups returned
        limit:
          type: number
          format: double
          default: 10
          description: The limit specified in the request
        offset:
          type: number
          format: double
          default: 0
          description: The offset specified for pagination
        total:
          type: number
          format: double
          description: Total number of access groups in the collection
        accessGroups:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdAccessgroupsGetResponsesContentApplicationJsonSchemaAccessGroupsItems
          description: List of Site Access Groups

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.access_groups.list(
    site_id="580e63e98c9a982ac9b8b741",
    offset=1,
    limit=1,
    sort="CreatedOn",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.accessGroups.list("580e63e98c9a982ac9b8b741", {
    offset: 1,
    limit: 1,
    sort: "CreatedOn"
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/accessgroups?offset=0&limit=100&sort=CreatedOn"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/accessgroups?offset=0&limit=100&sort=CreatedOn")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/accessgroups?offset=0&limit=100&sort=CreatedOn")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/accessgroups?offset=0&limit=100&sort=CreatedOn', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/accessgroups?offset=0&limit=100&sort=CreatedOn");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/accessgroups?offset=0&limit=100&sort=CreatedOn")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Products & SKUs

GET https://api.webflow.com/v2/sites/{site_id}/products

Retrieve all products for a site. 

Use `limit` and `offset` to page through all products with subsequent requests. All SKUs for each product
will also be fetched and returned. The `limit`, `offset` and `total` values represent Products only and do not include any SKUs.

Required scope | `ecommerce:read`


Reference: https://developers.webflow.com/data/reference/ecommerce/products/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Products & SKUs
  version: endpoint_products.list
paths:
  /sites/{site_id}/products:
    get:
      operationId: list
      summary: List Products & SKUs
      description: >
        Retrieve all products for a site. 


        Use `limit` and `offset` to page through all products with subsequent
        requests. All SKUs for each product

        will also be fetched and returned. The `limit`, `offset` and `total`
        values represent Products only and do not include any SKUs.


        Required scope | `ecommerce:read`
      tags:
        - - subpackage_products
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/products_list_Response_200'
        '400':
          description: Validation failure
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProductFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProductFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProductFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProductFieldDataTaxCategory:
      type: string
      enum:
        - value: standard-taxable
        - value: standard-exempt
        - value: books-religious
        - value: books-textbook
        - value: clothing
        - value: clothing-swimwear
        - value: digital-goods
        - value: digital-service
        - value: drugs-non-prescription
        - value: drugs-prescription
        - value: food-bottled-water
        - value: food-candy
        - value: food-groceries
        - value: food-prepared
        - value: food-soda
        - value: food-supplements
        - value: magazine-individual
        - value: magazine-subscription
        - value: service-admission
        - value: service-advertising
        - value: service-dry-cleaning
        - value: service-hairdressing
        - value: service-installation
        - value: service-miscellaneous
        - value: service-parking
        - value: service-printing
        - value: service-professional
        - value: service-repair
        - value: service-training
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProductFieldDataEcProductType:
      type: string
      enum:
        - value: ff42fee0113744f693a764e3431a9cc2
        - value: f22027db68002190aef89a4a2b7ac8a1
        - value: c599e43b1a1c34d5a323aedf75d3adf6
        - value: b6ccc1830db4b1babeb06a9ac5f6dd76
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProductFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        description:
          type: string
          description: A description of your product
        shippable:
          type: boolean
          description: Boolean determining if the Product is shippable
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProductFieldDataSkuPropertiesItems
          description: Variant types to include in SKUs
        category:
          type: array
          items:
            type: string
          description: The category your product belongs to.
        tax-category:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProductFieldDataTaxCategory
          description: Product tax class
        default-sku:
          type: string
          format: objectid
          description: The default SKU associated with this product.
        ec-product-type:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProductFieldDataEcProductType
          description: >-
            <a
            href="https://university.webflow.com/lesson/add-and-manage-products-and-categories?topics=ecommerce#how-to-understand-product-types">Product
            types.</a> Enums reflect the following values in order: Physical,
            Digital, Service, Advanced"
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProduct:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Product is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Product is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProductFieldData
          description: >-
            Contains content-specific details for a product, covering both
            standard (e.g., title, description)  and custom fields tailored to
            the product setup.
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
        currency:
          type: string
          description: Currency of Item (alternative representation)
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataCompareAtPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuBillingMethod:
      type: string
      enum:
        - value: one-time
        - value: subscription
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuSubscriptionPlanInterval:
      type: string
      enum:
        - value: day
        - value: week
        - value: month
        - value: year
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsPlatform:
      type: string
      enum:
        - value: stripe
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsStatus:
      type: string
      enum:
        - value: active
        - value: inactive
        - value: canceled
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuSubscriptionPlanPlansItems:
      type: object
      properties:
        platform:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsPlatform
          description: The platform of the subscription plan
        id:
          type: string
          description: The unique identifier of the plan
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsStatus
          description: The status of the plan
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuSubscriptionPlan:
      type: object
      properties:
        interval:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuSubscriptionPlanInterval
          description: Interval of subscription renewal
        frequency:
          type: number
          format: double
          description: Frequncy of billing within interval
        trial:
          type: number
          format: double
          description: Number of days of a trial
        plans:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuSubscriptionPlanPlansItems
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldData:
      type: object
      properties:
        sku-values:
          type: object
          additionalProperties:
            type: string
          description: >
            A mapping between SKU properties and their values, represented as
            key-value pairs. Each key represents a SKU Property ID (e.g.
            "color") and maps to its corresponding SKU Value ID (e.g. "blue").
            This structure defines the specific variant combination for a SKU.
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataPrice
          description: price of SKU
        compare-at-price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataCompareAtPrice
          description: comparison price of SKU
        ec-sku-billing-method:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuBillingMethod
          description: >-
            [Billing
            method](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#billing-methods)for
            the SKU
        ec-sku-subscription-plan:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataEcSkuSubscriptionPlan
          description: >-
            [Subscription
            plan](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#subscription)
            for the SKU
        main-image:
          type: string
          description: The URL for the main image of the SKU
        sku:
          type: string
          description: A unique identifier for the SKU
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldDataSkuPropertiesItems
          description: The properties of the SKU
      required:
        - name
        - slug
        - price
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItemsFieldData
          description: Standard and Custom fields for a SKU
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItems:
      type: object
      properties:
        product:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsProduct
          description: The Product object
        skus:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItemsSkusItems
          description: A list of SKU Objects
    SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    products_list_Response_200:
      type: object
      properties:
        items:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaItemsItems
          description: >-
            List of Item objects within the Collection. Contains product and
            skus keys for each Item
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.products.list(
    site_id="580e63e98c9a982ac9b8b741",
    offset=1,
    limit=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.products.list("580e63e98c9a982ac9b8b741", {
    offset: 1,
    limit: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products?offset=0&limit=100"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products?offset=0&limit=100")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products?offset=0&limit=100")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products?offset=0&limit=100', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products?offset=0&limit=100");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products?offset=0&limit=100")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Create Product & SKU

POST https://api.webflow.com/v2/sites/{site_id}/products
Content-Type: application/json

Create a new ecommerce product and defaultSKU. A product, at minimum, must have a single SKU.

To create a product with multiple SKUs:
  - First, create a list of `sku-properties`, also known as [product options](https://help.webflow.com/hc/en-us/articles/33961334531347-Create-product-options-and-variants). For example, a T-shirt product may have a "color" `sku-property`, with a list of enum values: red, yellow, and blue, another `sku-property` may be "size", with a list of enum values: small, medium, and large.
  - Once, a product is created with a list of `sku-properties`, Webflow will create a **default SKU**, which is always a combination of the first `enum` values of each `sku-property`. (e.g. Small - Red - T-Shirt)
  - After creation, you can create additional SKUs for the product, using the [Create SKUs endpoint.](/data/reference/ecommerce/products/create-sku)

Upon creation, the default product type will be `Advanced`, which ensures all Product and SKU fields will be shown to users in the Designer.

Required scope | `ecommerce:write`


Reference: https://developers.webflow.com/data/reference/ecommerce/products/create

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Create Product & SKU
  version: endpoint_products.create
paths:
  /sites/{site_id}/products:
    post:
      operationId: create
      summary: Create Product & SKU
      description: >
        Create a new ecommerce product and defaultSKU. A product, at minimum,
        must have a single SKU.


        To create a product with multiple SKUs:
          - First, create a list of `sku-properties`, also known as [product options](https://help.webflow.com/hc/en-us/articles/33961334531347-Create-product-options-and-variants). For example, a T-shirt product may have a "color" `sku-property`, with a list of enum values: red, yellow, and blue, another `sku-property` may be "size", with a list of enum values: small, medium, and large.
          - Once, a product is created with a list of `sku-properties`, Webflow will create a **default SKU**, which is always a combination of the first `enum` values of each `sku-property`. (e.g. Small - Red - T-Shirt)
          - After creation, you can create additional SKUs for the product, using the [Create SKUs endpoint.](/data/reference/ecommerce/products/create-sku)

        Upon creation, the default product type will be `Advanced`, which
        ensures all Product and SKU fields will be shown to users in the
        Designer.


        Required scope | `ecommerce:write`
      tags:
        - - subpackage_products
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/products_create_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: The Product and SKU to create
        content:
          application/json:
            schema:
              type: object
              properties:
                publishStatus:
                  $ref: >-
                    #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaPublishStatus
                  description: >-
                    Indicate whether your Product should be set as "staging" or
                    "live"
                product:
                  $ref: >-
                    #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProduct
                sku:
                  $ref: >-
                    #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSku
              required:
                - product
                - sku
components:
  schemas:
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaPublishStatus:
      type: string
      enum:
        - value: staging
        - value: live
      default: staging
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProductFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProductFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProductFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProductFieldDataTaxCategory:
      type: string
      enum:
        - value: standard-taxable
        - value: standard-exempt
        - value: books-religious
        - value: books-textbook
        - value: clothing
        - value: clothing-swimwear
        - value: digital-goods
        - value: digital-service
        - value: drugs-non-prescription
        - value: drugs-prescription
        - value: food-bottled-water
        - value: food-candy
        - value: food-groceries
        - value: food-prepared
        - value: food-soda
        - value: food-supplements
        - value: magazine-individual
        - value: magazine-subscription
        - value: service-admission
        - value: service-advertising
        - value: service-dry-cleaning
        - value: service-hairdressing
        - value: service-installation
        - value: service-miscellaneous
        - value: service-parking
        - value: service-printing
        - value: service-professional
        - value: service-repair
        - value: service-training
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProductFieldDataEcProductType:
      type: string
      enum:
        - value: ff42fee0113744f693a764e3431a9cc2
        - value: f22027db68002190aef89a4a2b7ac8a1
        - value: c599e43b1a1c34d5a323aedf75d3adf6
        - value: b6ccc1830db4b1babeb06a9ac5f6dd76
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProductFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        description:
          type: string
          description: A description of your product
        shippable:
          type: boolean
          description: Boolean determining if the Product is shippable
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProductFieldDataSkuPropertiesItems
          description: Variant types to include in SKUs
        category:
          type: array
          items:
            type: string
          description: The category your product belongs to.
        tax-category:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProductFieldDataTaxCategory
          description: Product tax class
        default-sku:
          type: string
          format: objectid
          description: The default SKU associated with this product.
        ec-product-type:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProductFieldDataEcProductType
          description: >-
            <a
            href="https://university.webflow.com/lesson/add-and-manage-products-and-categories?topics=ecommerce#how-to-understand-product-types">Product
            types.</a> Enums reflect the following values in order: Physical,
            Digital, Service, Advanced"
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProduct:
      type: object
      properties:
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaProductFieldData
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
        currency:
          type: string
          description: Currency of Item (alternative representation)
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataCompareAtPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuBillingMethod:
      type: string
      enum:
        - value: one-time
        - value: subscription
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanInterval:
      type: string
      enum:
        - value: day
        - value: week
        - value: month
        - value: year
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsPlatform:
      type: string
      enum:
        - value: stripe
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsStatus:
      type: string
      enum:
        - value: active
        - value: inactive
        - value: canceled
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItems:
      type: object
      properties:
        platform:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsPlatform
          description: The platform of the subscription plan
        id:
          type: string
          description: The unique identifier of the plan
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsStatus
          description: The status of the plan
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlan:
      type: object
      properties:
        interval:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanInterval
          description: Interval of subscription renewal
        frequency:
          type: number
          format: double
          description: Frequncy of billing within interval
        trial:
          type: number
          format: double
          description: Number of days of a trial
        plans:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItems
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldData:
      type: object
      properties:
        sku-values:
          type: object
          additionalProperties:
            type: string
          description: >
            A mapping between SKU properties and their values, represented as
            key-value pairs. Each key represents a SKU Property ID (e.g.
            "color") and maps to its corresponding SKU Value ID (e.g. "blue").
            This structure defines the specific variant combination for a SKU.
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataPrice
          description: price of SKU
        compare-at-price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataCompareAtPrice
          description: comparison price of SKU
        ec-sku-billing-method:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuBillingMethod
          description: >-
            [Billing
            method](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#billing-methods)for
            the SKU
        ec-sku-subscription-plan:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlan
          description: >-
            [Subscription
            plan](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#subscription)
            for the SKU
        main-image:
          type: string
          description: The URL for the main image of the SKU
        sku:
          type: string
          description: A unique identifier for the SKU
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItems
          description: The properties of the SKU
      required:
        - name
        - slug
        - price
    SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSku:
      type: object
      properties:
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostRequestBodyContentApplicationJsonSchemaSkuFieldData
          description: Standard and Custom fields for a SKU
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProductFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProductFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProductFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProductFieldDataTaxCategory:
      type: string
      enum:
        - value: standard-taxable
        - value: standard-exempt
        - value: books-religious
        - value: books-textbook
        - value: clothing
        - value: clothing-swimwear
        - value: digital-goods
        - value: digital-service
        - value: drugs-non-prescription
        - value: drugs-prescription
        - value: food-bottled-water
        - value: food-candy
        - value: food-groceries
        - value: food-prepared
        - value: food-soda
        - value: food-supplements
        - value: magazine-individual
        - value: magazine-subscription
        - value: service-admission
        - value: service-advertising
        - value: service-dry-cleaning
        - value: service-hairdressing
        - value: service-installation
        - value: service-miscellaneous
        - value: service-parking
        - value: service-printing
        - value: service-professional
        - value: service-repair
        - value: service-training
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProductFieldDataEcProductType:
      type: string
      enum:
        - value: ff42fee0113744f693a764e3431a9cc2
        - value: f22027db68002190aef89a4a2b7ac8a1
        - value: c599e43b1a1c34d5a323aedf75d3adf6
        - value: b6ccc1830db4b1babeb06a9ac5f6dd76
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProductFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        description:
          type: string
          description: A description of your product
        shippable:
          type: boolean
          description: Boolean determining if the Product is shippable
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProductFieldDataSkuPropertiesItems
          description: Variant types to include in SKUs
        category:
          type: array
          items:
            type: string
          description: The category your product belongs to.
        tax-category:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProductFieldDataTaxCategory
          description: Product tax class
        default-sku:
          type: string
          format: objectid
          description: The default SKU associated with this product.
        ec-product-type:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProductFieldDataEcProductType
          description: >-
            <a
            href="https://university.webflow.com/lesson/add-and-manage-products-and-categories?topics=ecommerce#how-to-understand-product-types">Product
            types.</a> Enums reflect the following values in order: Physical,
            Digital, Service, Advanced"
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProduct:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Product is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Product is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProductFieldData
          description: >-
            Contains content-specific details for a product, covering both
            standard (e.g., title, description)  and custom fields tailored to
            the product setup.
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
        currency:
          type: string
          description: Currency of Item (alternative representation)
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataCompareAtPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuBillingMethod:
      type: string
      enum:
        - value: one-time
        - value: subscription
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanInterval:
      type: string
      enum:
        - value: day
        - value: week
        - value: month
        - value: year
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsPlatform:
      type: string
      enum:
        - value: stripe
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsStatus:
      type: string
      enum:
        - value: active
        - value: inactive
        - value: canceled
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItems:
      type: object
      properties:
        platform:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsPlatform
          description: The platform of the subscription plan
        id:
          type: string
          description: The unique identifier of the plan
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsStatus
          description: The status of the plan
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlan:
      type: object
      properties:
        interval:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanInterval
          description: Interval of subscription renewal
        frequency:
          type: number
          format: double
          description: Frequncy of billing within interval
        trial:
          type: number
          format: double
          description: Number of days of a trial
        plans:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItems
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldData:
      type: object
      properties:
        sku-values:
          type: object
          additionalProperties:
            type: string
          description: >
            A mapping between SKU properties and their values, represented as
            key-value pairs. Each key represents a SKU Property ID (e.g.
            "color") and maps to its corresponding SKU Value ID (e.g. "blue").
            This structure defines the specific variant combination for a SKU.
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataPrice
          description: price of SKU
        compare-at-price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataCompareAtPrice
          description: comparison price of SKU
        ec-sku-billing-method:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuBillingMethod
          description: >-
            [Billing
            method](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#billing-methods)for
            the SKU
        ec-sku-subscription-plan:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlan
          description: >-
            [Subscription
            plan](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#subscription)
            for the SKU
        main-image:
          type: string
          description: The URL for the main image of the SKU
        sku:
          type: string
          description: A unique identifier for the SKU
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItems
          description: The properties of the SKU
      required:
        - name
        - slug
        - price
    SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItemsFieldData
          description: Standard and Custom fields for a SKU
    products_create_Response_200:
      type: object
      properties:
        product:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaProduct
          description: The Product object
        skus:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsPostResponsesContentApplicationJsonSchemaSkusItems
          description: A list of SKU Objects

```

## SDK Code Examples

```python
from webflow import (
    ProductFieldData,
    SkuFieldData,
    SkuFieldDataPrice,
    SkuPropertyList,
    SkuPropertyListEnumItem,
    Webflow,
)
from webflow.resources.products import (
    ProductSkuCreateProduct,
    ProductSkuCreateSku,
)

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.products.create(
    site_id="580e63e98c9a982ac9b8b741",
    publish_status="staging",
    product=ProductSkuCreateProduct(
        field_data=ProductFieldData(
            name="Colorful T-shirt",
            slug="colorful-t-shirt",
            description="Our best-selling t-shirt available in multiple colors and sizes",
            sku_properties=[
                SkuPropertyList(
                    id="color",
                    name="Color",
                    enum=[
                        SkuPropertyListEnumItem(
                            id="red",
                            name="Red",
                            slug="red",
                        ),
                        SkuPropertyListEnumItem(
                            id="yellow",
                            name="Yellow",
                            slug="yellow",
                        ),
                        SkuPropertyListEnumItem(
                            id="blue",
                            name="Blue",
                            slug="blue",
                        ),
                    ],
                ),
                SkuPropertyList(
                    id="size",
                    name="Size",
                    enum=[
                        SkuPropertyListEnumItem(
                            id="small",
                            name="Small",
                            slug="small",
                        ),
                        SkuPropertyListEnumItem(
                            id="medium",
                            name="Medium",
                            slug="medium",
                        ),
                        SkuPropertyListEnumItem(
                            id="large",
                            name="Large",
                            slug="large",
                        ),
                    ],
                ),
            ],
        ),
    ),
    sku=ProductSkuCreateSku(
        field_data=SkuFieldData(
            name="Colorful T-shirt - Red Small",
            slug="colorful-t-shirt-red-small",
            price=SkuFieldDataPrice(
                value=2499.0,
                unit="USD",
                currency="USD",
            ),
            main_image="https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987",
        ),
    ),
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.products.create("580e63e98c9a982ac9b8b741", {
    publishStatus: "staging",
    product: {
        fieldData: {
            name: "Colorful T-shirt",
            slug: "colorful-t-shirt",
            description: "Our best-selling t-shirt available in multiple colors and sizes",
            skuProperties: [{
                    id: "color",
                    name: "Color",
                    "enum": [{
                            id: "red",
                            name: "Red",
                            slug: "red"
                        }, {
                            id: "yellow",
                            name: "Yellow",
                            slug: "yellow"
                        }, {
                            id: "blue",
                            name: "Blue",
                            slug: "blue"
                        }]
                }, {
                    id: "size",
                    name: "Size",
                    "enum": [{
                            id: "small",
                            name: "Small",
                            slug: "small"
                        }, {
                            id: "medium",
                            name: "Medium",
                            slug: "medium"
                        }, {
                            id: "large",
                            name: "Large",
                            slug: "large"
                        }]
                }]
        }
    },
    sku: {
        fieldData: {
            name: "Colorful T-shirt - Red Small",
            slug: "colorful-t-shirt-red-small",
            price: {
                value: 2499,
                unit: "USD",
                currency: "USD"
            },
            mainImage: "https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987"
        }
    }
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products"

	payload := strings.NewReader("{\n  \"product\": {\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt\",\n      \"slug\": \"colorful-t-shirt\",\n      \"description\": \"Our best-selling t-shirt available in multiple colors and sizes\",\n      \"sku-properties\": [\n        {\n          \"id\": \"color\",\n          \"name\": \"Color\",\n          \"enum\": [\n            {\n              \"id\": \"red\",\n              \"name\": \"Red\",\n              \"slug\": \"red\"\n            },\n            {\n              \"id\": \"yellow\",\n              \"name\": \"Yellow\",\n              \"slug\": \"yellow\"\n            },\n            {\n              \"id\": \"blue\",\n              \"name\": \"Blue\",\n              \"slug\": \"blue\"\n            }\n          ]\n        },\n        {\n          \"id\": \"size\",\n          \"name\": \"Size\",\n          \"enum\": [\n            {\n              \"id\": \"small\",\n              \"name\": \"Small\",\n              \"slug\": \"small\"\n            },\n            {\n              \"id\": \"medium\",\n              \"name\": \"Medium\",\n              \"slug\": \"medium\"\n            },\n            {\n              \"id\": \"large\",\n              \"name\": \"Large\",\n              \"slug\": \"large\"\n            }\n          ]\n        }\n      ]\n    }\n  },\n  \"sku\": {\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt - Red Small\",\n      \"slug\": \"colorful-t-shirt-red-small\",\n      \"price\": {\n        \"value\": 2499,\n        \"unit\": \"USD\",\n        \"currency\": \"USD\"\n      },\n      \"main-image\": \"https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987\"\n    }\n  },\n  \"publishStatus\": \"staging\"\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"product\": {\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt\",\n      \"slug\": \"colorful-t-shirt\",\n      \"description\": \"Our best-selling t-shirt available in multiple colors and sizes\",\n      \"sku-properties\": [\n        {\n          \"id\": \"color\",\n          \"name\": \"Color\",\n          \"enum\": [\n            {\n              \"id\": \"red\",\n              \"name\": \"Red\",\n              \"slug\": \"red\"\n            },\n            {\n              \"id\": \"yellow\",\n              \"name\": \"Yellow\",\n              \"slug\": \"yellow\"\n            },\n            {\n              \"id\": \"blue\",\n              \"name\": \"Blue\",\n              \"slug\": \"blue\"\n            }\n          ]\n        },\n        {\n          \"id\": \"size\",\n          \"name\": \"Size\",\n          \"enum\": [\n            {\n              \"id\": \"small\",\n              \"name\": \"Small\",\n              \"slug\": \"small\"\n            },\n            {\n              \"id\": \"medium\",\n              \"name\": \"Medium\",\n              \"slug\": \"medium\"\n            },\n            {\n              \"id\": \"large\",\n              \"name\": \"Large\",\n              \"slug\": \"large\"\n            }\n          ]\n        }\n      ]\n    }\n  },\n  \"sku\": {\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt - Red Small\",\n      \"slug\": \"colorful-t-shirt-red-small\",\n      \"price\": {\n        \"value\": 2499,\n        \"unit\": \"USD\",\n        \"currency\": \"USD\"\n      },\n      \"main-image\": \"https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987\"\n    }\n  },\n  \"publishStatus\": \"staging\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"product\": {\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt\",\n      \"slug\": \"colorful-t-shirt\",\n      \"description\": \"Our best-selling t-shirt available in multiple colors and sizes\",\n      \"sku-properties\": [\n        {\n          \"id\": \"color\",\n          \"name\": \"Color\",\n          \"enum\": [\n            {\n              \"id\": \"red\",\n              \"name\": \"Red\",\n              \"slug\": \"red\"\n            },\n            {\n              \"id\": \"yellow\",\n              \"name\": \"Yellow\",\n              \"slug\": \"yellow\"\n            },\n            {\n              \"id\": \"blue\",\n              \"name\": \"Blue\",\n              \"slug\": \"blue\"\n            }\n          ]\n        },\n        {\n          \"id\": \"size\",\n          \"name\": \"Size\",\n          \"enum\": [\n            {\n              \"id\": \"small\",\n              \"name\": \"Small\",\n              \"slug\": \"small\"\n            },\n            {\n              \"id\": \"medium\",\n              \"name\": \"Medium\",\n              \"slug\": \"medium\"\n            },\n            {\n              \"id\": \"large\",\n              \"name\": \"Large\",\n              \"slug\": \"large\"\n            }\n          ]\n        }\n      ]\n    }\n  },\n  \"sku\": {\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt - Red Small\",\n      \"slug\": \"colorful-t-shirt-red-small\",\n      \"price\": {\n        \"value\": 2499,\n        \"unit\": \"USD\",\n        \"currency\": \"USD\"\n      },\n      \"main-image\": \"https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987\"\n    }\n  },\n  \"publishStatus\": \"staging\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products', [
  'body' => '{
  "product": {
    "fieldData": {
      "name": "Colorful T-shirt",
      "slug": "colorful-t-shirt",
      "description": "Our best-selling t-shirt available in multiple colors and sizes",
      "sku-properties": [
        {
          "id": "color",
          "name": "Color",
          "enum": [
            {
              "id": "red",
              "name": "Red",
              "slug": "red"
            },
            {
              "id": "yellow",
              "name": "Yellow",
              "slug": "yellow"
            },
            {
              "id": "blue",
              "name": "Blue",
              "slug": "blue"
            }
          ]
        },
        {
          "id": "size",
          "name": "Size",
          "enum": [
            {
              "id": "small",
              "name": "Small",
              "slug": "small"
            },
            {
              "id": "medium",
              "name": "Medium",
              "slug": "medium"
            },
            {
              "id": "large",
              "name": "Large",
              "slug": "large"
            }
          ]
        }
      ]
    }
  },
  "sku": {
    "fieldData": {
      "name": "Colorful T-shirt - Red Small",
      "slug": "colorful-t-shirt-red-small",
      "price": {
        "value": 2499,
        "unit": "USD",
        "currency": "USD"
      },
      "main-image": "https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987"
    }
  },
  "publishStatus": "staging"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"product\": {\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt\",\n      \"slug\": \"colorful-t-shirt\",\n      \"description\": \"Our best-selling t-shirt available in multiple colors and sizes\",\n      \"sku-properties\": [\n        {\n          \"id\": \"color\",\n          \"name\": \"Color\",\n          \"enum\": [\n            {\n              \"id\": \"red\",\n              \"name\": \"Red\",\n              \"slug\": \"red\"\n            },\n            {\n              \"id\": \"yellow\",\n              \"name\": \"Yellow\",\n              \"slug\": \"yellow\"\n            },\n            {\n              \"id\": \"blue\",\n              \"name\": \"Blue\",\n              \"slug\": \"blue\"\n            }\n          ]\n        },\n        {\n          \"id\": \"size\",\n          \"name\": \"Size\",\n          \"enum\": [\n            {\n              \"id\": \"small\",\n              \"name\": \"Small\",\n              \"slug\": \"small\"\n            },\n            {\n              \"id\": \"medium\",\n              \"name\": \"Medium\",\n              \"slug\": \"medium\"\n            },\n            {\n              \"id\": \"large\",\n              \"name\": \"Large\",\n              \"slug\": \"large\"\n            }\n          ]\n        }\n      ]\n    }\n  },\n  \"sku\": {\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt - Red Small\",\n      \"slug\": \"colorful-t-shirt-red-small\",\n      \"price\": {\n        \"value\": 2499,\n        \"unit\": \"USD\",\n        \"currency\": \"USD\"\n      },\n      \"main-image\": \"https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987\"\n    }\n  },\n  \"publishStatus\": \"staging\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "product": ["fieldData": [
      "name": "Colorful T-shirt",
      "slug": "colorful-t-shirt",
      "description": "Our best-selling t-shirt available in multiple colors and sizes",
      "sku-properties": [
        [
          "id": "color",
          "name": "Color",
          "enum": [
            [
              "id": "red",
              "name": "Red",
              "slug": "red"
            ],
            [
              "id": "yellow",
              "name": "Yellow",
              "slug": "yellow"
            ],
            [
              "id": "blue",
              "name": "Blue",
              "slug": "blue"
            ]
          ]
        ],
        [
          "id": "size",
          "name": "Size",
          "enum": [
            [
              "id": "small",
              "name": "Small",
              "slug": "small"
            ],
            [
              "id": "medium",
              "name": "Medium",
              "slug": "medium"
            ],
            [
              "id": "large",
              "name": "Large",
              "slug": "large"
            ]
          ]
        ]
      ]
    ]],
  "sku": ["fieldData": [
      "name": "Colorful T-shirt - Red Small",
      "slug": "colorful-t-shirt-red-small",
      "price": [
        "value": 2499,
        "unit": "USD",
        "currency": "USD"
      ],
      "main-image": "https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987"
    ]],
  "publishStatus": "staging"
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Product and SKUs

GET https://api.webflow.com/v2/sites/{site_id}/products/{product_id}

Retrieve a single product by its ID. All of its SKUs will also be
retrieved.

Required scope | `ecommerce:read`


Reference: https://developers.webflow.com/data/reference/ecommerce/products/get

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Product and SKUs
  version: endpoint_products.get
paths:
  /sites/{site_id}/products/{product_id}:
    get:
      operationId: get
      summary: Get Product and SKUs
      description: |
        Retrieve a single product by its ID. All of its SKUs will also be
        retrieved.

        Required scope | `ecommerce:read`
      tags:
        - - subpackage_products
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: product_id
          in: path
          description: Unique identifier for a Product
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/products_get_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProductFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProductFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProductFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProductFieldDataTaxCategory:
      type: string
      enum:
        - value: standard-taxable
        - value: standard-exempt
        - value: books-religious
        - value: books-textbook
        - value: clothing
        - value: clothing-swimwear
        - value: digital-goods
        - value: digital-service
        - value: drugs-non-prescription
        - value: drugs-prescription
        - value: food-bottled-water
        - value: food-candy
        - value: food-groceries
        - value: food-prepared
        - value: food-soda
        - value: food-supplements
        - value: magazine-individual
        - value: magazine-subscription
        - value: service-admission
        - value: service-advertising
        - value: service-dry-cleaning
        - value: service-hairdressing
        - value: service-installation
        - value: service-miscellaneous
        - value: service-parking
        - value: service-printing
        - value: service-professional
        - value: service-repair
        - value: service-training
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProductFieldDataEcProductType:
      type: string
      enum:
        - value: ff42fee0113744f693a764e3431a9cc2
        - value: f22027db68002190aef89a4a2b7ac8a1
        - value: c599e43b1a1c34d5a323aedf75d3adf6
        - value: b6ccc1830db4b1babeb06a9ac5f6dd76
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProductFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        description:
          type: string
          description: A description of your product
        shippable:
          type: boolean
          description: Boolean determining if the Product is shippable
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProductFieldDataSkuPropertiesItems
          description: Variant types to include in SKUs
        category:
          type: array
          items:
            type: string
          description: The category your product belongs to.
        tax-category:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProductFieldDataTaxCategory
          description: Product tax class
        default-sku:
          type: string
          format: objectid
          description: The default SKU associated with this product.
        ec-product-type:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProductFieldDataEcProductType
          description: >-
            <a
            href="https://university.webflow.com/lesson/add-and-manage-products-and-categories?topics=ecommerce#how-to-understand-product-types">Product
            types.</a> Enums reflect the following values in order: Physical,
            Digital, Service, Advanced"
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProduct:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Product is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Product is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProductFieldData
          description: >-
            Contains content-specific details for a product, covering both
            standard (e.g., title, description)  and custom fields tailored to
            the product setup.
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
        currency:
          type: string
          description: Currency of Item (alternative representation)
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataCompareAtPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuBillingMethod:
      type: string
      enum:
        - value: one-time
        - value: subscription
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanInterval:
      type: string
      enum:
        - value: day
        - value: week
        - value: month
        - value: year
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsPlatform:
      type: string
      enum:
        - value: stripe
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsStatus:
      type: string
      enum:
        - value: active
        - value: inactive
        - value: canceled
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItems:
      type: object
      properties:
        platform:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsPlatform
          description: The platform of the subscription plan
        id:
          type: string
          description: The unique identifier of the plan
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsStatus
          description: The status of the plan
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlan:
      type: object
      properties:
        interval:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanInterval
          description: Interval of subscription renewal
        frequency:
          type: number
          format: double
          description: Frequncy of billing within interval
        trial:
          type: number
          format: double
          description: Number of days of a trial
        plans:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItems
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldData:
      type: object
      properties:
        sku-values:
          type: object
          additionalProperties:
            type: string
          description: >
            A mapping between SKU properties and their values, represented as
            key-value pairs. Each key represents a SKU Property ID (e.g.
            "color") and maps to its corresponding SKU Value ID (e.g. "blue").
            This structure defines the specific variant combination for a SKU.
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataPrice
          description: price of SKU
        compare-at-price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataCompareAtPrice
          description: comparison price of SKU
        ec-sku-billing-method:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuBillingMethod
          description: >-
            [Billing
            method](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#billing-methods)for
            the SKU
        ec-sku-subscription-plan:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlan
          description: >-
            [Subscription
            plan](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#subscription)
            for the SKU
        main-image:
          type: string
          description: The URL for the main image of the SKU
        sku:
          type: string
          description: A unique identifier for the SKU
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItems
          description: The properties of the SKU
      required:
        - name
        - slug
        - price
    SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItemsFieldData
          description: Standard and Custom fields for a SKU
    products_get_Response_200:
      type: object
      properties:
        product:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaProduct
          description: The Product object
        skus:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdGetResponsesContentApplicationJsonSchemaSkusItems
          description: A list of SKU Objects

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.products.get(
    site_id="580e63e98c9a982ac9b8b741",
    product_id="580e63fc8c9a982ac9b8b745",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.products.get("580e63e98c9a982ac9b8b741", "580e63fc8c9a982ac9b8b745");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Product

PATCH https://api.webflow.com/v2/sites/{site_id}/products/{product_id}
Content-Type: application/json

Update an existing Product.

Updating an existing Product will set the product type to `Advanced`, which ensures all Product and SKU fields will be shown to users in the Designer.

Required scope | `ecommerce:write`


Reference: https://developers.webflow.com/data/reference/ecommerce/products/update

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Product
  version: endpoint_products.update
paths:
  /sites/{site_id}/products/{product_id}:
    patch:
      operationId: update
      summary: Update Product
      description: >
        Update an existing Product.


        Updating an existing Product will set the product type to `Advanced`,
        which ensures all Product and SKU fields will be shown to users in the
        Designer.


        Required scope | `ecommerce:write`
      tags:
        - - subpackage_products
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: product_id
          in: path
          description: Unique identifier for a Product
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/products_update_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: The product to update
        content:
          application/json:
            schema:
              type: object
              properties:
                publishStatus:
                  $ref: >-
                    #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaPublishStatus
                  description: >-
                    Indicate whether your Product should be set as "staging" or
                    "live"
                product:
                  $ref: >-
                    #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProduct
                  description: The Product object
                sku:
                  $ref: >-
                    #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSku
                  description: The SKU object
components:
  schemas:
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaPublishStatus:
      type: string
      enum:
        - value: staging
        - value: live
      default: staging
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProductFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProductFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProductFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProductFieldDataTaxCategory:
      type: string
      enum:
        - value: standard-taxable
        - value: standard-exempt
        - value: books-religious
        - value: books-textbook
        - value: clothing
        - value: clothing-swimwear
        - value: digital-goods
        - value: digital-service
        - value: drugs-non-prescription
        - value: drugs-prescription
        - value: food-bottled-water
        - value: food-candy
        - value: food-groceries
        - value: food-prepared
        - value: food-soda
        - value: food-supplements
        - value: magazine-individual
        - value: magazine-subscription
        - value: service-admission
        - value: service-advertising
        - value: service-dry-cleaning
        - value: service-hairdressing
        - value: service-installation
        - value: service-miscellaneous
        - value: service-parking
        - value: service-printing
        - value: service-professional
        - value: service-repair
        - value: service-training
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProductFieldDataEcProductType:
      type: string
      enum:
        - value: ff42fee0113744f693a764e3431a9cc2
        - value: f22027db68002190aef89a4a2b7ac8a1
        - value: c599e43b1a1c34d5a323aedf75d3adf6
        - value: b6ccc1830db4b1babeb06a9ac5f6dd76
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProductFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        description:
          type: string
          description: A description of your product
        shippable:
          type: boolean
          description: Boolean determining if the Product is shippable
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProductFieldDataSkuPropertiesItems
          description: Variant types to include in SKUs
        category:
          type: array
          items:
            type: string
          description: The category your product belongs to.
        tax-category:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProductFieldDataTaxCategory
          description: Product tax class
        default-sku:
          type: string
          format: objectid
          description: The default SKU associated with this product.
        ec-product-type:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProductFieldDataEcProductType
          description: >-
            <a
            href="https://university.webflow.com/lesson/add-and-manage-products-and-categories?topics=ecommerce#how-to-understand-product-types">Product
            types.</a> Enums reflect the following values in order: Physical,
            Digital, Service, Advanced"
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProduct:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Product is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Product is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaProductFieldData
          description: >-
            Contains content-specific details for a product, covering both
            standard (e.g., title, description)  and custom fields tailored to
            the product setup.
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
        currency:
          type: string
          description: Currency of Item (alternative representation)
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataCompareAtPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuBillingMethod:
      type: string
      enum:
        - value: one-time
        - value: subscription
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanInterval:
      type: string
      enum:
        - value: day
        - value: week
        - value: month
        - value: year
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsPlatform:
      type: string
      enum:
        - value: stripe
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsStatus:
      type: string
      enum:
        - value: active
        - value: inactive
        - value: canceled
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItems:
      type: object
      properties:
        platform:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsPlatform
          description: The platform of the subscription plan
        id:
          type: string
          description: The unique identifier of the plan
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsStatus
          description: The status of the plan
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlan:
      type: object
      properties:
        interval:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanInterval
          description: Interval of subscription renewal
        frequency:
          type: number
          format: double
          description: Frequncy of billing within interval
        trial:
          type: number
          format: double
          description: Number of days of a trial
        plans:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItems
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldData:
      type: object
      properties:
        sku-values:
          type: object
          additionalProperties:
            type: string
          description: >
            A mapping between SKU properties and their values, represented as
            key-value pairs. Each key represents a SKU Property ID (e.g.
            "color") and maps to its corresponding SKU Value ID (e.g. "blue").
            This structure defines the specific variant combination for a SKU.
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataPrice
          description: price of SKU
        compare-at-price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataCompareAtPrice
          description: comparison price of SKU
        ec-sku-billing-method:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuBillingMethod
          description: >-
            [Billing
            method](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#billing-methods)for
            the SKU
        ec-sku-subscription-plan:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlan
          description: >-
            [Subscription
            plan](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#subscription)
            for the SKU
        main-image:
          type: string
          description: The URL for the main image of the SKU
        sku:
          type: string
          description: A unique identifier for the SKU
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItems
          description: The properties of the SKU
      required:
        - name
        - slug
        - price
    SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSku:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldData
          description: Standard and Custom fields for a SKU
    SitesSiteIdProductsProductIdPatchResponsesContentApplicationJsonSchemaFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsProductIdPatchResponsesContentApplicationJsonSchemaFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdPatchResponsesContentApplicationJsonSchemaFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsProductIdPatchResponsesContentApplicationJsonSchemaFieldDataTaxCategory:
      type: string
      enum:
        - value: standard-taxable
        - value: standard-exempt
        - value: books-religious
        - value: books-textbook
        - value: clothing
        - value: clothing-swimwear
        - value: digital-goods
        - value: digital-service
        - value: drugs-non-prescription
        - value: drugs-prescription
        - value: food-bottled-water
        - value: food-candy
        - value: food-groceries
        - value: food-prepared
        - value: food-soda
        - value: food-supplements
        - value: magazine-individual
        - value: magazine-subscription
        - value: service-admission
        - value: service-advertising
        - value: service-dry-cleaning
        - value: service-hairdressing
        - value: service-installation
        - value: service-miscellaneous
        - value: service-parking
        - value: service-printing
        - value: service-professional
        - value: service-repair
        - value: service-training
    SitesSiteIdProductsProductIdPatchResponsesContentApplicationJsonSchemaFieldDataEcProductType:
      type: string
      enum:
        - value: ff42fee0113744f693a764e3431a9cc2
        - value: f22027db68002190aef89a4a2b7ac8a1
        - value: c599e43b1a1c34d5a323aedf75d3adf6
        - value: b6ccc1830db4b1babeb06a9ac5f6dd76
    SitesSiteIdProductsProductIdPatchResponsesContentApplicationJsonSchemaFieldData:
      type: object
      properties:
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        description:
          type: string
          description: A description of your product
        shippable:
          type: boolean
          description: Boolean determining if the Product is shippable
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdPatchResponsesContentApplicationJsonSchemaFieldDataSkuPropertiesItems
          description: Variant types to include in SKUs
        category:
          type: array
          items:
            type: string
          description: The category your product belongs to.
        tax-category:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchResponsesContentApplicationJsonSchemaFieldDataTaxCategory
          description: Product tax class
        default-sku:
          type: string
          format: objectid
          description: The default SKU associated with this product.
        ec-product-type:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchResponsesContentApplicationJsonSchemaFieldDataEcProductType
          description: >-
            <a
            href="https://university.webflow.com/lesson/add-and-manage-products-and-categories?topics=ecommerce#how-to-understand-product-types">Product
            types.</a> Enums reflect the following values in order: Physical,
            Digital, Service, Advanced"
    products_update_Response_200:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        isArchived:
          type: boolean
          default: false
          description: Boolean determining if the Product is set to archived
        isDraft:
          type: boolean
          default: false
          description: Boolean determining if the Product is set to draft
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdPatchResponsesContentApplicationJsonSchemaFieldData
          description: >-
            Contains content-specific details for a product, covering both
            standard (e.g., title, description)  and custom fields tailored to
            the product setup.

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.products.update(
    site_id="580e63e98c9a982ac9b8b741",
    product_id="580e63fc8c9a982ac9b8b745",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.products.update("580e63e98c9a982ac9b8b741", "580e63fc8c9a982ac9b8b745");

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745"

	payload := strings.NewReader("{\n  \"id\": \"660eb7a486d1d6e0412292d7\",\n  \"cmsLocaleId\": \"653ad57de882f528b32e810e\",\n  \"lastPublished\": \"2024-04-04T14:24:19.467Z\",\n  \"lastUpdated\": \"2024-04-04T14:30:19.282Z\",\n  \"createdOn\": \"2024-04-04T14:22:28.547Z\",\n  \"isArchived\": false,\n  \"isDraft\": false,\n  \"fieldData\": {\n    \"tax-category\": \"standard-taxable\",\n    \"shippable\": true,\n    \"ec-product-type\": \"b6ccc1830db4b1babeb06a9ac5f6dd76\",\n    \"sku-properties\": [\n      {\n        \"id\": \"31b77fa66fa376c2c0abb458d5be39fb\",\n        \"name\": \"Size\",\n        \"enum\": [\n          {\n            \"id\": \"8d21a625d655ab260e9941c27180c75b\",\n            \"name\": \"Small\",\n            \"slug\": \"small\"\n          },\n          {\n            \"id\": \"ecdca17106ad86c0dfe3b5f3ac8be6c9\",\n            \"name\": \"Medium\",\n            \"slug\": \"medium\"\n          },\n          {\n            \"id\": \"ec7877d6137ecf7ec86f726c135b1812\",\n            \"name\": \"Large\",\n            \"slug\": \"large\"\n          }\n        ]\n      },\n      {\n        \"id\": \"74d3738e62c568d5634dd6989daec5ec\",\n        \"name\": \"Color\",\n        \"enum\": [\n          {\n            \"id\": \"e539b0d6c3a609cd06ddb2da804f68f0\",\n            \"name\": \"Royal Blue\",\n            \"slug\": \"royal-blue\"\n          },\n          {\n            \"id\": \"68d98f2fbafc0fd45651cddc44798dd0\",\n            \"name\": \"Crimson Red\",\n            \"slug\": \"crimson-red\"\n          },\n          {\n            \"id\": \"996cd95c97fd5620d0a374c835b37205\",\n            \"name\": \"Forrest Green\",\n            \"slug\": \"forrest-green\"\n          }\n        ]\n      }\n    ],\n    \"name\": \"T-Shirt\",\n    \"description\": \"A plain t-shirt\",\n    \"slug\": \"t-shirt\",\n    \"default-sku\": \"66072fb71b89448912e2681c\"\n  }\n}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"id\": \"660eb7a486d1d6e0412292d7\",\n  \"cmsLocaleId\": \"653ad57de882f528b32e810e\",\n  \"lastPublished\": \"2024-04-04T14:24:19.467Z\",\n  \"lastUpdated\": \"2024-04-04T14:30:19.282Z\",\n  \"createdOn\": \"2024-04-04T14:22:28.547Z\",\n  \"isArchived\": false,\n  \"isDraft\": false,\n  \"fieldData\": {\n    \"tax-category\": \"standard-taxable\",\n    \"shippable\": true,\n    \"ec-product-type\": \"b6ccc1830db4b1babeb06a9ac5f6dd76\",\n    \"sku-properties\": [\n      {\n        \"id\": \"31b77fa66fa376c2c0abb458d5be39fb\",\n        \"name\": \"Size\",\n        \"enum\": [\n          {\n            \"id\": \"8d21a625d655ab260e9941c27180c75b\",\n            \"name\": \"Small\",\n            \"slug\": \"small\"\n          },\n          {\n            \"id\": \"ecdca17106ad86c0dfe3b5f3ac8be6c9\",\n            \"name\": \"Medium\",\n            \"slug\": \"medium\"\n          },\n          {\n            \"id\": \"ec7877d6137ecf7ec86f726c135b1812\",\n            \"name\": \"Large\",\n            \"slug\": \"large\"\n          }\n        ]\n      },\n      {\n        \"id\": \"74d3738e62c568d5634dd6989daec5ec\",\n        \"name\": \"Color\",\n        \"enum\": [\n          {\n            \"id\": \"e539b0d6c3a609cd06ddb2da804f68f0\",\n            \"name\": \"Royal Blue\",\n            \"slug\": \"royal-blue\"\n          },\n          {\n            \"id\": \"68d98f2fbafc0fd45651cddc44798dd0\",\n            \"name\": \"Crimson Red\",\n            \"slug\": \"crimson-red\"\n          },\n          {\n            \"id\": \"996cd95c97fd5620d0a374c835b37205\",\n            \"name\": \"Forrest Green\",\n            \"slug\": \"forrest-green\"\n          }\n        ]\n      }\n    ],\n    \"name\": \"T-Shirt\",\n    \"description\": \"A plain t-shirt\",\n    \"slug\": \"t-shirt\",\n    \"default-sku\": \"66072fb71b89448912e2681c\"\n  }\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"id\": \"660eb7a486d1d6e0412292d7\",\n  \"cmsLocaleId\": \"653ad57de882f528b32e810e\",\n  \"lastPublished\": \"2024-04-04T14:24:19.467Z\",\n  \"lastUpdated\": \"2024-04-04T14:30:19.282Z\",\n  \"createdOn\": \"2024-04-04T14:22:28.547Z\",\n  \"isArchived\": false,\n  \"isDraft\": false,\n  \"fieldData\": {\n    \"tax-category\": \"standard-taxable\",\n    \"shippable\": true,\n    \"ec-product-type\": \"b6ccc1830db4b1babeb06a9ac5f6dd76\",\n    \"sku-properties\": [\n      {\n        \"id\": \"31b77fa66fa376c2c0abb458d5be39fb\",\n        \"name\": \"Size\",\n        \"enum\": [\n          {\n            \"id\": \"8d21a625d655ab260e9941c27180c75b\",\n            \"name\": \"Small\",\n            \"slug\": \"small\"\n          },\n          {\n            \"id\": \"ecdca17106ad86c0dfe3b5f3ac8be6c9\",\n            \"name\": \"Medium\",\n            \"slug\": \"medium\"\n          },\n          {\n            \"id\": \"ec7877d6137ecf7ec86f726c135b1812\",\n            \"name\": \"Large\",\n            \"slug\": \"large\"\n          }\n        ]\n      },\n      {\n        \"id\": \"74d3738e62c568d5634dd6989daec5ec\",\n        \"name\": \"Color\",\n        \"enum\": [\n          {\n            \"id\": \"e539b0d6c3a609cd06ddb2da804f68f0\",\n            \"name\": \"Royal Blue\",\n            \"slug\": \"royal-blue\"\n          },\n          {\n            \"id\": \"68d98f2fbafc0fd45651cddc44798dd0\",\n            \"name\": \"Crimson Red\",\n            \"slug\": \"crimson-red\"\n          },\n          {\n            \"id\": \"996cd95c97fd5620d0a374c835b37205\",\n            \"name\": \"Forrest Green\",\n            \"slug\": \"forrest-green\"\n          }\n        ]\n      }\n    ],\n    \"name\": \"T-Shirt\",\n    \"description\": \"A plain t-shirt\",\n    \"slug\": \"t-shirt\",\n    \"default-sku\": \"66072fb71b89448912e2681c\"\n  }\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745', [
  'body' => '{
  "id": "660eb7a486d1d6e0412292d7",
  "cmsLocaleId": "653ad57de882f528b32e810e",
  "lastPublished": "2024-04-04T14:24:19.467Z",
  "lastUpdated": "2024-04-04T14:30:19.282Z",
  "createdOn": "2024-04-04T14:22:28.547Z",
  "isArchived": false,
  "isDraft": false,
  "fieldData": {
    "tax-category": "standard-taxable",
    "shippable": true,
    "ec-product-type": "b6ccc1830db4b1babeb06a9ac5f6dd76",
    "sku-properties": [
      {
        "id": "31b77fa66fa376c2c0abb458d5be39fb",
        "name": "Size",
        "enum": [
          {
            "id": "8d21a625d655ab260e9941c27180c75b",
            "name": "Small",
            "slug": "small"
          },
          {
            "id": "ecdca17106ad86c0dfe3b5f3ac8be6c9",
            "name": "Medium",
            "slug": "medium"
          },
          {
            "id": "ec7877d6137ecf7ec86f726c135b1812",
            "name": "Large",
            "slug": "large"
          }
        ]
      },
      {
        "id": "74d3738e62c568d5634dd6989daec5ec",
        "name": "Color",
        "enum": [
          {
            "id": "e539b0d6c3a609cd06ddb2da804f68f0",
            "name": "Royal Blue",
            "slug": "royal-blue"
          },
          {
            "id": "68d98f2fbafc0fd45651cddc44798dd0",
            "name": "Crimson Red",
            "slug": "crimson-red"
          },
          {
            "id": "996cd95c97fd5620d0a374c835b37205",
            "name": "Forrest Green",
            "slug": "forrest-green"
          }
        ]
      }
    ],
    "name": "T-Shirt",
    "description": "A plain t-shirt",
    "slug": "t-shirt",
    "default-sku": "66072fb71b89448912e2681c"
  }
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"id\": \"660eb7a486d1d6e0412292d7\",\n  \"cmsLocaleId\": \"653ad57de882f528b32e810e\",\n  \"lastPublished\": \"2024-04-04T14:24:19.467Z\",\n  \"lastUpdated\": \"2024-04-04T14:30:19.282Z\",\n  \"createdOn\": \"2024-04-04T14:22:28.547Z\",\n  \"isArchived\": false,\n  \"isDraft\": false,\n  \"fieldData\": {\n    \"tax-category\": \"standard-taxable\",\n    \"shippable\": true,\n    \"ec-product-type\": \"b6ccc1830db4b1babeb06a9ac5f6dd76\",\n    \"sku-properties\": [\n      {\n        \"id\": \"31b77fa66fa376c2c0abb458d5be39fb\",\n        \"name\": \"Size\",\n        \"enum\": [\n          {\n            \"id\": \"8d21a625d655ab260e9941c27180c75b\",\n            \"name\": \"Small\",\n            \"slug\": \"small\"\n          },\n          {\n            \"id\": \"ecdca17106ad86c0dfe3b5f3ac8be6c9\",\n            \"name\": \"Medium\",\n            \"slug\": \"medium\"\n          },\n          {\n            \"id\": \"ec7877d6137ecf7ec86f726c135b1812\",\n            \"name\": \"Large\",\n            \"slug\": \"large\"\n          }\n        ]\n      },\n      {\n        \"id\": \"74d3738e62c568d5634dd6989daec5ec\",\n        \"name\": \"Color\",\n        \"enum\": [\n          {\n            \"id\": \"e539b0d6c3a609cd06ddb2da804f68f0\",\n            \"name\": \"Royal Blue\",\n            \"slug\": \"royal-blue\"\n          },\n          {\n            \"id\": \"68d98f2fbafc0fd45651cddc44798dd0\",\n            \"name\": \"Crimson Red\",\n            \"slug\": \"crimson-red\"\n          },\n          {\n            \"id\": \"996cd95c97fd5620d0a374c835b37205\",\n            \"name\": \"Forrest Green\",\n            \"slug\": \"forrest-green\"\n          }\n        ]\n      }\n    ],\n    \"name\": \"T-Shirt\",\n    \"description\": \"A plain t-shirt\",\n    \"slug\": \"t-shirt\",\n    \"default-sku\": \"66072fb71b89448912e2681c\"\n  }\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "id": "660eb7a486d1d6e0412292d7",
  "cmsLocaleId": "653ad57de882f528b32e810e",
  "lastPublished": "2024-04-04T14:24:19.467Z",
  "lastUpdated": "2024-04-04T14:30:19.282Z",
  "createdOn": "2024-04-04T14:22:28.547Z",
  "isArchived": false,
  "isDraft": false,
  "fieldData": [
    "tax-category": "standard-taxable",
    "shippable": true,
    "ec-product-type": "b6ccc1830db4b1babeb06a9ac5f6dd76",
    "sku-properties": [
      [
        "id": "31b77fa66fa376c2c0abb458d5be39fb",
        "name": "Size",
        "enum": [
          [
            "id": "8d21a625d655ab260e9941c27180c75b",
            "name": "Small",
            "slug": "small"
          ],
          [
            "id": "ecdca17106ad86c0dfe3b5f3ac8be6c9",
            "name": "Medium",
            "slug": "medium"
          ],
          [
            "id": "ec7877d6137ecf7ec86f726c135b1812",
            "name": "Large",
            "slug": "large"
          ]
        ]
      ],
      [
        "id": "74d3738e62c568d5634dd6989daec5ec",
        "name": "Color",
        "enum": [
          [
            "id": "e539b0d6c3a609cd06ddb2da804f68f0",
            "name": "Royal Blue",
            "slug": "royal-blue"
          ],
          [
            "id": "68d98f2fbafc0fd45651cddc44798dd0",
            "name": "Crimson Red",
            "slug": "crimson-red"
          ],
          [
            "id": "996cd95c97fd5620d0a374c835b37205",
            "name": "Forrest Green",
            "slug": "forrest-green"
          ]
        ]
      ]
    ],
    "name": "T-Shirt",
    "description": "A plain t-shirt",
    "slug": "t-shirt",
    "default-sku": "66072fb71b89448912e2681c"
  ]
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Create SKUs

POST https://api.webflow.com/v2/sites/{site_id}/products/{product_id}/skus
Content-Type: application/json

Create additional SKUs to manage every [option and variant of your Product.](https://help.webflow.com/hc/en-us/articles/33961334531347-Create-product-options-and-variants)

Creating SKUs through the API will set the product type to `Advanced`, which ensures all Product and SKU fields will be shown to users in the Designer.

Required scope | `ecommerce:write`


Reference: https://developers.webflow.com/data/reference/ecommerce/products/create-sku

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Create SKUs
  version: endpoint_products.create-sku
paths:
  /sites/{site_id}/products/{product_id}/skus:
    post:
      operationId: create-sku
      summary: Create SKUs
      description: >
        Create additional SKUs to manage every [option and variant of your
        Product.](https://help.webflow.com/hc/en-us/articles/33961334531347-Create-product-options-and-variants)


        Creating SKUs through the API will set the product type to `Advanced`,
        which ensures all Product and SKU fields will be shown to users in the
        Designer.


        Required scope | `ecommerce:write`
      tags:
        - - subpackage_products
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: product_id
          in: path
          description: Unique identifier for a Product
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/products_create-sku_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: The SKUs to add
        content:
          application/json:
            schema:
              type: object
              properties:
                publishStatus:
                  $ref: >-
                    #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaPublishStatus
                  description: >-
                    Indicate whether your Product should be set as "staging" or
                    "live"
                skus:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItems
                  description: An array of the SKU data your are adding
              required:
                - skus
components:
  schemas:
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaPublishStatus:
      type: string
      enum:
        - value: staging
        - value: live
      default: staging
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
        currency:
          type: string
          description: Currency of Item (alternative representation)
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataCompareAtPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuBillingMethod:
      type: string
      enum:
        - value: one-time
        - value: subscription
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanInterval:
      type: string
      enum:
        - value: day
        - value: week
        - value: month
        - value: year
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsPlatform:
      type: string
      enum:
        - value: stripe
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsStatus:
      type: string
      enum:
        - value: active
        - value: inactive
        - value: canceled
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItems:
      type: object
      properties:
        platform:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsPlatform
          description: The platform of the subscription plan
        id:
          type: string
          description: The unique identifier of the plan
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsStatus
          description: The status of the plan
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlan:
      type: object
      properties:
        interval:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanInterval
          description: Interval of subscription renewal
        frequency:
          type: number
          format: double
          description: Frequncy of billing within interval
        trial:
          type: number
          format: double
          description: Number of days of a trial
        plans:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItems
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldData:
      type: object
      properties:
        sku-values:
          type: object
          additionalProperties:
            type: string
          description: >
            A mapping between SKU properties and their values, represented as
            key-value pairs. Each key represents a SKU Property ID (e.g.
            "color") and maps to its corresponding SKU Value ID (e.g. "blue").
            This structure defines the specific variant combination for a SKU.
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataPrice
          description: price of SKU
        compare-at-price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataCompareAtPrice
          description: comparison price of SKU
        ec-sku-billing-method:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuBillingMethod
          description: >-
            [Billing
            method](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#billing-methods)for
            the SKU
        ec-sku-subscription-plan:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlan
          description: >-
            [Subscription
            plan](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#subscription)
            for the SKU
        main-image:
          type: string
          description: The URL for the main image of the SKU
        sku:
          type: string
          description: A unique identifier for the SKU
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItems
          description: The properties of the SKU
      required:
        - name
        - slug
        - price
    SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostRequestBodyContentApplicationJsonSchemaSkusItemsFieldData
          description: Standard and Custom fields for a SKU
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
        currency:
          type: string
          description: Currency of Item (alternative representation)
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataCompareAtPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuBillingMethod:
      type: string
      enum:
        - value: one-time
        - value: subscription
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanInterval:
      type: string
      enum:
        - value: day
        - value: week
        - value: month
        - value: year
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsPlatform:
      type: string
      enum:
        - value: stripe
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsStatus:
      type: string
      enum:
        - value: active
        - value: inactive
        - value: canceled
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItems:
      type: object
      properties:
        platform:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsPlatform
          description: The platform of the subscription plan
        id:
          type: string
          description: The unique identifier of the plan
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItemsStatus
          description: The status of the plan
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlan:
      type: object
      properties:
        interval:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanInterval
          description: Interval of subscription renewal
        frequency:
          type: number
          format: double
          description: Frequncy of billing within interval
        trial:
          type: number
          format: double
          description: Number of days of a trial
        plans:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlanPlansItems
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldData:
      type: object
      properties:
        sku-values:
          type: object
          additionalProperties:
            type: string
          description: >
            A mapping between SKU properties and their values, represented as
            key-value pairs. Each key represents a SKU Property ID (e.g.
            "color") and maps to its corresponding SKU Value ID (e.g. "blue").
            This structure defines the specific variant combination for a SKU.
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataPrice
          description: price of SKU
        compare-at-price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataCompareAtPrice
          description: comparison price of SKU
        ec-sku-billing-method:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuBillingMethod
          description: >-
            [Billing
            method](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#billing-methods)for
            the SKU
        ec-sku-subscription-plan:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataEcSkuSubscriptionPlan
          description: >-
            [Subscription
            plan](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#subscription)
            for the SKU
        main-image:
          type: string
          description: The URL for the main image of the SKU
        sku:
          type: string
          description: A unique identifier for the SKU
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldDataSkuPropertiesItems
          description: The properties of the SKU
      required:
        - name
        - slug
        - price
    SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItemsFieldData
          description: Standard and Custom fields for a SKU
    products_create-sku_Response_200:
      type: object
      properties:
        skus:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusPostResponsesContentApplicationJsonSchemaSkusItems
      required:
        - skus

```

## SDK Code Examples

```python
import datetime

from webflow import Sku, SkuFieldData, SkuFieldDataPrice, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.products.create_sku(
    site_id="580e63e98c9a982ac9b8b741",
    product_id="580e63fc8c9a982ac9b8b745",
    skus=[
        Sku(
            id="66072fb71b89448912e2681c",
            cms_locale_id="653ad57de882f528b32e810e",
            last_published=datetime.datetime.fromisoformat(
                "2023-03-17 18:47:35+00:00",
            ),
            last_updated=datetime.datetime.fromisoformat(
                "2023-03-17 18:47:35+00:00",
            ),
            created_on=datetime.datetime.fromisoformat(
                "2023-03-17 18:47:35+00:00",
            ),
            field_data=SkuFieldData(
                name="Colorful T-shirt - Default",
                slug="colorful-t-shirt-default",
                price=SkuFieldDataPrice(
                    value=2499.0,
                    unit="USD",
                    currency="USD",
                ),
            ),
        )
    ],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.products.createSku("580e63e98c9a982ac9b8b741", "580e63fc8c9a982ac9b8b745", {
    skus: [{
            id: "66072fb71b89448912e2681c",
            cmsLocaleId: "653ad57de882f528b32e810e",
            lastPublished: new Date("2023-03-17T18:47:35.000Z"),
            lastUpdated: new Date("2023-03-17T18:47:35.000Z"),
            createdOn: new Date("2023-03-17T18:47:35.000Z"),
            fieldData: {
                name: "Colorful T-shirt - Default",
                slug: "colorful-t-shirt-default",
                price: {
                    value: 2499,
                    unit: "USD",
                    currency: "USD"
                }
            }
        }]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus"

	payload := strings.NewReader("{\n  \"skus\": [\n    {}\n  ]\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"skus\": [\n    {}\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"skus\": [\n    {}\n  ]\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus', [
  'body' => '{
  "skus": [
    {}
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"skus\": [\n    {}\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["skus": [[]]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update SKU

PATCH https://api.webflow.com/v2/sites/{site_id}/products/{product_id}/skus/{sku_id}
Content-Type: application/json

Update a specified SKU.

Updating an existing SKU will set the Product type to `Advanced`, which ensures all Product and SKU fields will be shown to users in the Designer.

Required scope | `ecommerce:write`


Reference: https://developers.webflow.com/data/reference/ecommerce/products/update-sku

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update SKU
  version: endpoint_products.update-sku
paths:
  /sites/{site_id}/products/{product_id}/skus/{sku_id}:
    patch:
      operationId: update-sku
      summary: Update SKU
      description: >
        Update a specified SKU.


        Updating an existing SKU will set the Product type to `Advanced`, which
        ensures all Product and SKU fields will be shown to users in the
        Designer.


        Required scope | `ecommerce:write`
      tags:
        - - subpackage_products
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: product_id
          in: path
          description: Unique identifier for a Product
          required: true
          schema:
            type: string
            format: objectid
        - name: sku_id
          in: path
          description: Unique identifier for a SKU
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/products_update-sku_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: The SKU to update
        content:
          application/json:
            schema:
              type: object
              properties:
                publishStatus:
                  $ref: >-
                    #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaPublishStatus
                  description: >-
                    Indicate whether your Product should be set as "staging" or
                    "live"
                sku:
                  $ref: >-
                    #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSku
                  description: The SKU object
              required:
                - sku
components:
  schemas:
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaPublishStatus:
      type: string
      enum:
        - value: staging
        - value: live
      default: staging
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
        currency:
          type: string
          description: Currency of Item (alternative representation)
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataCompareAtPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuBillingMethod:
      type: string
      enum:
        - value: one-time
        - value: subscription
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanInterval:
      type: string
      enum:
        - value: day
        - value: week
        - value: month
        - value: year
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsPlatform:
      type: string
      enum:
        - value: stripe
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsStatus:
      type: string
      enum:
        - value: active
        - value: inactive
        - value: canceled
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItems:
      type: object
      properties:
        platform:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsPlatform
          description: The platform of the subscription plan
        id:
          type: string
          description: The unique identifier of the plan
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItemsStatus
          description: The status of the plan
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlan:
      type: object
      properties:
        interval:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanInterval
          description: Interval of subscription renewal
        frequency:
          type: number
          format: double
          description: Frequncy of billing within interval
        trial:
          type: number
          format: double
          description: Number of days of a trial
        plans:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlanPlansItems
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldData:
      type: object
      properties:
        sku-values:
          type: object
          additionalProperties:
            type: string
          description: >
            A mapping between SKU properties and their values, represented as
            key-value pairs. Each key represents a SKU Property ID (e.g.
            "color") and maps to its corresponding SKU Value ID (e.g. "blue").
            This structure defines the specific variant combination for a SKU.
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataPrice
          description: price of SKU
        compare-at-price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataCompareAtPrice
          description: comparison price of SKU
        ec-sku-billing-method:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuBillingMethod
          description: >-
            [Billing
            method](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#billing-methods)for
            the SKU
        ec-sku-subscription-plan:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataEcSkuSubscriptionPlan
          description: >-
            [Subscription
            plan](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#subscription)
            for the SKU
        main-image:
          type: string
          description: The URL for the main image of the SKU
        sku:
          type: string
          description: A unique identifier for the SKU
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldDataSkuPropertiesItems
          description: The properties of the SKU
      required:
        - name
        - slug
        - price
    SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSku:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchRequestBodyContentApplicationJsonSchemaSkuFieldData
          description: Standard and Custom fields for a SKU
    SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
        currency:
          type: string
          description: Currency of Item (alternative representation)
    SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataCompareAtPrice:
      type: object
      properties:
        value:
          type: number
          format: double
          description: Price of SKU
        unit:
          type: string
          description: Currency of Item
    SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuBillingMethod:
      type: string
      enum:
        - value: one-time
        - value: subscription
    SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuSubscriptionPlanInterval:
      type: string
      enum:
        - value: day
        - value: week
        - value: month
        - value: year
    SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuSubscriptionPlanPlansItemsPlatform:
      type: string
      enum:
        - value: stripe
    SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuSubscriptionPlanPlansItemsStatus:
      type: string
      enum:
        - value: active
        - value: inactive
        - value: canceled
    SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuSubscriptionPlanPlansItems:
      type: object
      properties:
        platform:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuSubscriptionPlanPlansItemsPlatform
          description: The platform of the subscription plan
        id:
          type: string
          description: The unique identifier of the plan
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuSubscriptionPlanPlansItemsStatus
          description: The status of the plan
    SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuSubscriptionPlan:
      type: object
      properties:
        interval:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuSubscriptionPlanInterval
          description: Interval of subscription renewal
        frequency:
          type: number
          format: double
          description: Frequncy of billing within interval
        trial:
          type: number
          format: double
          description: Number of days of a trial
        plans:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuSubscriptionPlanPlansItems
    SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataSkuPropertiesItemsEnumItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a Product variant/Option
        name:
          type: string
          description: Name of the Product variant/Option
        slug:
          type: string
          description: Slug for the Product variant/Option in the Site URL structure
      required:
        - id
        - name
        - slug
    SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataSkuPropertiesItems:
      type: object
      properties:
        id:
          type: string
          description: Unique identifier for a collection of Product Variants
        name:
          type: string
          description: Name of the collection of Product Variants
        enum:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataSkuPropertiesItemsEnumItems
          description: >-
            The individual Product variants that are contained within the
            collection
      required:
        - id
        - name
        - enum
    SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldData:
      type: object
      properties:
        sku-values:
          type: object
          additionalProperties:
            type: string
          description: >
            A mapping between SKU properties and their values, represented as
            key-value pairs. Each key represents a SKU Property ID (e.g.
            "color") and maps to its corresponding SKU Value ID (e.g. "blue").
            This structure defines the specific variant combination for a SKU.
        name:
          type: string
          description: Name of the Product
        slug:
          type: string
          description: URL structure of the Product in your site.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataPrice
          description: price of SKU
        compare-at-price:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataCompareAtPrice
          description: comparison price of SKU
        ec-sku-billing-method:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuBillingMethod
          description: >-
            [Billing
            method](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#billing-methods)for
            the SKU
        ec-sku-subscription-plan:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataEcSkuSubscriptionPlan
          description: >-
            [Subscription
            plan](https://help.webflow.com/hc/en-us/articles/33961432087955-Add-and-manage-products-and-categories#subscription)
            for the SKU
        main-image:
          type: string
          description: The URL for the main image of the SKU
        sku:
          type: string
          description: A unique identifier for the SKU
        sku-properties:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldDataSkuPropertiesItems
          description: The properties of the SKU
      required:
        - name
        - slug
        - price
    products_update-sku_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Product
        cmsLocaleId:
          type: string
          description: Identifier for the locale of the CMS item
        lastPublished:
          type: string
          format: date-time
          description: The date the Product was last published
        lastUpdated:
          type: string
          format: date-time
          description: The date the Product was last updated
        createdOn:
          type: string
          format: date-time
          description: The date the Product was created
        fieldData:
          $ref: >-
            #/components/schemas/SitesSiteIdProductsProductIdSkusSkuIdPatchResponsesContentApplicationJsonSchemaFieldData
          description: Standard and Custom fields for a SKU
      required:
        - id
        - lastPublished
        - lastUpdated
        - createdOn
        - fieldData

```

## SDK Code Examples

```python
import datetime

from webflow import Sku, SkuFieldData, SkuFieldDataPrice, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.products.update_sku(
    site_id="580e63e98c9a982ac9b8b741",
    product_id="580e63fc8c9a982ac9b8b745",
    sku_id="5e8518516e147040726cc415",
    sku=Sku(
        id="66072fb71b89448912e2681c",
        cms_locale_id="653ad57de882f528b32e810e",
        last_published=datetime.datetime.fromisoformat(
            "2023-03-17 18:47:35+00:00",
        ),
        last_updated=datetime.datetime.fromisoformat(
            "2023-03-17 18:47:35+00:00",
        ),
        created_on=datetime.datetime.fromisoformat(
            "2023-03-17 18:47:35+00:00",
        ),
        field_data=SkuFieldData(
            name="Colorful T-shirt - Default",
            slug="colorful-t-shirt-default",
            price=SkuFieldDataPrice(
                value=2499.0,
                unit="USD",
                currency="USD",
            ),
        ),
    ),
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.products.updateSku("580e63e98c9a982ac9b8b741", "580e63fc8c9a982ac9b8b745", "5e8518516e147040726cc415", {
    sku: {
        id: "66072fb71b89448912e2681c",
        cmsLocaleId: "653ad57de882f528b32e810e",
        lastPublished: new Date("2023-03-17T18:47:35.000Z"),
        lastUpdated: new Date("2023-03-17T18:47:35.000Z"),
        createdOn: new Date("2023-03-17T18:47:35.000Z"),
        fieldData: {
            name: "Colorful T-shirt - Default",
            slug: "colorful-t-shirt-default",
            price: {
                value: 2499,
                unit: "USD",
                currency: "USD"
            }
        }
    }
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus/5e8518516e147040726cc415"

	payload := strings.NewReader("{\n  \"sku\": {\n    \"id\": \"66072fb71b89448912e2681c\",\n    \"cmsLocaleId\": \"653ad57de882f528b32e810e\",\n    \"lastPublished\": \"2023-03-17T18:47:35.560Z\",\n    \"lastUpdated\": \"2023-03-17T18:47:35.560Z\",\n    \"createdOn\": \"2023-03-17T18:47:35.560Z\",\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt - Default\",\n      \"slug\": \"colorful-t-shirt-default\",\n      \"price\": {\n        \"value\": 2499,\n        \"unit\": \"USD\",\n        \"currency\": \"USD\"\n      }\n    },\n    \"sku-values\": {\n      \"color\": \"red\",\n      \"size\": \"small\"\n    },\n    \"main-image\": \"https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987\"\n  }\n}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus/5e8518516e147040726cc415")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"sku\": {\n    \"id\": \"66072fb71b89448912e2681c\",\n    \"cmsLocaleId\": \"653ad57de882f528b32e810e\",\n    \"lastPublished\": \"2023-03-17T18:47:35.560Z\",\n    \"lastUpdated\": \"2023-03-17T18:47:35.560Z\",\n    \"createdOn\": \"2023-03-17T18:47:35.560Z\",\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt - Default\",\n      \"slug\": \"colorful-t-shirt-default\",\n      \"price\": {\n        \"value\": 2499,\n        \"unit\": \"USD\",\n        \"currency\": \"USD\"\n      }\n    },\n    \"sku-values\": {\n      \"color\": \"red\",\n      \"size\": \"small\"\n    },\n    \"main-image\": \"https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987\"\n  }\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus/5e8518516e147040726cc415")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"sku\": {\n    \"id\": \"66072fb71b89448912e2681c\",\n    \"cmsLocaleId\": \"653ad57de882f528b32e810e\",\n    \"lastPublished\": \"2023-03-17T18:47:35.560Z\",\n    \"lastUpdated\": \"2023-03-17T18:47:35.560Z\",\n    \"createdOn\": \"2023-03-17T18:47:35.560Z\",\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt - Default\",\n      \"slug\": \"colorful-t-shirt-default\",\n      \"price\": {\n        \"value\": 2499,\n        \"unit\": \"USD\",\n        \"currency\": \"USD\"\n      }\n    },\n    \"sku-values\": {\n      \"color\": \"red\",\n      \"size\": \"small\"\n    },\n    \"main-image\": \"https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987\"\n  }\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus/5e8518516e147040726cc415', [
  'body' => '{
  "sku": {
    "id": "66072fb71b89448912e2681c",
    "cmsLocaleId": "653ad57de882f528b32e810e",
    "lastPublished": "2023-03-17T18:47:35.560Z",
    "lastUpdated": "2023-03-17T18:47:35.560Z",
    "createdOn": "2023-03-17T18:47:35.560Z",
    "fieldData": {
      "name": "Colorful T-shirt - Default",
      "slug": "colorful-t-shirt-default",
      "price": {
        "value": 2499,
        "unit": "USD",
        "currency": "USD"
      }
    },
    "sku-values": {
      "color": "red",
      "size": "small"
    },
    "main-image": "https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987"
  }
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus/5e8518516e147040726cc415");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"sku\": {\n    \"id\": \"66072fb71b89448912e2681c\",\n    \"cmsLocaleId\": \"653ad57de882f528b32e810e\",\n    \"lastPublished\": \"2023-03-17T18:47:35.560Z\",\n    \"lastUpdated\": \"2023-03-17T18:47:35.560Z\",\n    \"createdOn\": \"2023-03-17T18:47:35.560Z\",\n    \"fieldData\": {\n      \"name\": \"Colorful T-shirt - Default\",\n      \"slug\": \"colorful-t-shirt-default\",\n      \"price\": {\n        \"value\": 2499,\n        \"unit\": \"USD\",\n        \"currency\": \"USD\"\n      }\n    },\n    \"sku-values\": {\n      \"color\": \"red\",\n      \"size\": \"small\"\n    },\n    \"main-image\": \"https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987\"\n  }\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["sku": [
    "id": "66072fb71b89448912e2681c",
    "cmsLocaleId": "653ad57de882f528b32e810e",
    "lastPublished": "2023-03-17T18:47:35.560Z",
    "lastUpdated": "2023-03-17T18:47:35.560Z",
    "createdOn": "2023-03-17T18:47:35.560Z",
    "fieldData": [
      "name": "Colorful T-shirt - Default",
      "slug": "colorful-t-shirt-default",
      "price": [
        "value": 2499,
        "unit": "USD",
        "currency": "USD"
      ]
    ],
    "sku-values": [
      "color": "red",
      "size": "small"
    ],
    "main-image": "https://rocketamp-sample-store.myshopify.com/cdn/shop/products/Gildan_2000_Antique_Cherry_Red_Front_1024x1024.jpg?v=1527232987"
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/products/580e63fc8c9a982ac9b8b745/skus/5e8518516e147040726cc415")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Orders

GET https://api.webflow.com/v2/sites/{site_id}/orders

List all orders created for a given site.

Required scope | `ecommerce:read`


Reference: https://developers.webflow.com/data/reference/ecommerce/orders/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Orders
  version: endpoint_orders.list
paths:
  /sites/{site_id}/orders:
    get:
      operationId: list
      summary: List Orders
      description: |
        List all orders created for a given site.

        Required scope | `ecommerce:read`
      tags:
        - - subpackage_orders
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: status
          in: query
          description: Filter the orders by status
          required: false
          schema:
            $ref: '#/components/schemas/SitesSiteIdOrdersGetParametersStatus'
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/orders_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdOrdersGetParametersStatus:
      type: string
      enum:
        - value: pending
        - value: refunded
        - value: dispute-lost
        - value: fulfilled
        - value: disputed
        - value: unfulfilled
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsStatus:
      type: string
      enum:
        - value: pending
        - value: unfulfilled
        - value: fulfilled
        - value: disputed
        - value: dispute-lost
        - value: refunded
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsDisputeLastStatus:
      type: string
      enum:
        - value: warning_needs_response
        - value: warning_under_review
        - value: warning_closed
        - value: needs_response
        - value: under_review
        - value: charge_refunded
        - value: won
        - value: lost
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsCustomerPaid:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsNetAmount:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsApplicationFee:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsAllAddressesItemsType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsAllAddressesItemsJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsAllAddressesItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsAllAddressesItemsType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsAllAddressesItemsJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsShippingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsShippingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsShippingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsShippingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsShippingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsBillingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsBillingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsBillingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsBillingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsBillingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsCustomerInfo:
      type: object
      properties:
        fullName:
          type: string
          description: The full name of the Customer
        email:
          type: string
          format: email
          description: The Customer's email address
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItemsRowTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItemsVariantImageFileVariantsItems:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        originalFileName:
          type: string
        size:
          type: number
          format: double
          description: The image size in bytes
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItemsVariantImageFile:
      type: object
      properties:
        size:
          type: number
          format: double
          description: The image size in bytes
        originalFileName:
          type: string
          description: the original name of the image
        createdOn:
          type: string
          format: date-time
          description: The creation timestamp of the image
        contentType:
          type: string
          format: mime-type
          description: The MIME type of the image
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
        variants:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItemsVariantImageFileVariantsItems
          description: Variants of the supplied image
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItemsVariantImage:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        file:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItemsVariantImageFile
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItemsVariantPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItems:
      type: object
      properties:
        count:
          type: number
          format: double
          description: Number of Item purchased.
        rowTotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItemsRowTotal
          description: The total for the row
        productId:
          type: string
          format: objectid
          description: The unique identifier for the Product
        productName:
          type: string
          description: User-facing name of the Product
        productSlug:
          type: string
          description: Slug for the Product
        variantId:
          type: string
          description: Identifier for the Product Variant (SKU)
        variantName:
          type: string
          description: User-facing name of the Product Variant (SKU)
        variantSlug:
          type: string
          description: Slug for the Product Variant (SKU)
        variantSKU:
          type: string
          description: The user-defined custom SKU of the Product Variant (SKU)
        variantImage:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItemsVariantImage
        variantPrice:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItemsVariantPrice
          description: The price corresponding to the variant
        weight:
          type:
            - number
            - 'null'
          format: double
          description: The physical weight of the variant if provided, or null
        width:
          type:
            - number
            - 'null'
          format: double
          description: The physical width of the variant if provided, or null
        height:
          type:
            - number
            - 'null'
          format: double
          description: The physical height of the variant if provided, or null
        length:
          type:
            - number
            - 'null'
          format: double
          description: The physical length of the variant if provided, or null
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsStripeDetails:
      type: object
      properties:
        subscriptionId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the Subscription
        paymentMethod:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentMethod used
        paymentIntentId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentIntent, or null
        customerId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated customer identifier, or null
        chargeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated charge identifier, or null
        disputeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated dispute identifier, or null
        refundId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated refund identifier, or null
        refundReason:
          type:
            - string
            - 'null'
          description: Stripe-generated refund reason, or null
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsStripeCardBrand:
      type: string
      enum:
        - value: Visa
        - value: American Express
        - value: MasterCard
        - value: Discover
        - value: JCB
        - value: Diners Club
        - value: Unknown
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsStripeCardExpires:
      type: object
      properties:
        year:
          type: number
          format: double
          description: Year that the card expires
        month:
          type: number
          format: double
          description: Month that the card expires
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsStripeCard:
      type: object
      properties:
        last4:
          type: string
          description: The last 4 digits on the card as a string
        brand:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsStripeCardBrand
          description: The card's brand (ie. credit card network)
        ownerName:
          type: string
          description: The name on the card.
        expires:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsStripeCardExpires
          description: The card's expiration date.
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPaypalDetails:
      type: object
      properties:
        orderId:
          type: string
          description: PayPal order identifier
        payerId:
          type: string
          description: PayPal payer identifier
        captureId:
          type: string
          description: PayPal capture identifier
        refundId:
          type: string
          description: PayPal refund identifier
        refundReason:
          type: string
          description: PayPal-issued reason for the refund
        disputeId:
          type: string
          description: PayPal dispute identifier
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsCustomDataItems:
      type: object
      properties: {}
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsMetadata:
      type: object
      properties:
        isBuyNow:
          type: boolean
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotalsSubtotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotalsExtrasItemsType:
      type: string
      enum:
        - value: discount
        - value: discount-shipping
        - value: shipping
        - value: tax
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotalsExtrasItemsPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotalsExtrasItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotalsExtrasItemsType
          description: The type of extra item this is.
        name:
          type: string
          description: A human-readable (but English) name for this extra charge.
        description:
          type: string
          description: A human-readable (but English) description of this extra charge.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotalsExtrasItemsPrice
          description: The price for the item
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotalsTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotals:
      type: object
      properties:
        subtotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotalsSubtotal
          description: The subtotal price
        extras:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotalsExtrasItems
          description: An array of extra items, includes discounts, shipping, and taxes.
        total:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotalsTotal
          description: The total price
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsDownloadFilesItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the downloadable file
        name:
          type: string
          description: The user-facing name for the downloadable file
        url:
          type: string
          format: uri
          description: The hosted location for the downloadable file
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItems:
      type: object
      properties:
        orderId:
          type: string
          description: |
            The order ID. Will usually be 6 hex characters, but can also be 9
            hex characters if the site has a very large number of Orders.
            Randomly assigned.
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsStatus
          description: |
            The status of the Order
        comment:
          type: string
          description: >-
            A comment string for this Order, which is editable by API user (not
            used by Webflow).
        orderComment:
          type: string
          description: A comment that the customer left when making their Order
        acceptedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: The ISO8601 timestamp that an Order was placed.
        fulfilledOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'fulfilled', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        refundedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >-
            When an Order is marked as 'refunded', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'disputed', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputeUpdatedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            If an Order has been disputed by the customer, this key will be set
            to the ISO8601 timestamp of the last update received. If the Order
            is not disputed, the key will be null.
        disputeLastStatus:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsDisputeLastStatus
            - type: 'null'
          description: >
            If an order was disputed by the customer, then this key will be set
            with the [dispute's
            status](https://stripe.com/docs/api#dispute_object-status).
        customerPaid:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsCustomerPaid
          description: The total paid by the customer
        netAmount:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsNetAmount
          description: The net amount after application fees
        applicationFee:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsApplicationFee
          description: The application fee assessed by the platform
        allAddresses:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsAllAddressesItems
          description: All addresses provided by the customer during the ordering flow.
        shippingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsShippingAddress
          description: The shipping address
        billingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsBillingAddress
          description: The billing address
        shippingProvider:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping provider used
            (not used by Webflow).
        shippingTracking:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping tracking
            number for the order (not used by Webflow).
        shippingTrackingURL:
          type:
            - string
            - 'null'
          format: uri
        customerInfo:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsCustomerInfo
          description: An object with the keys `fullName` and `email`.
        purchasedItems:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPurchasedItemsItems
          description: An array of all things that the Customer purchased.
        purchasedItemsCount:
          type: number
          format: double
          description: The sum of all 'count' fields in 'purchasedItems'.
        stripeDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsStripeDetails
          description: >-
            An object with various Stripe IDs, useful for linking into the
            stripe dashboard.
        stripeCard:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsStripeCard
          description: >
            Details on the card used to fulfill this order, if this order was
            finalized with Stripe.
        paypalDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsPaypalDetails
        customData:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsCustomDataItems
          description: >
            An array of additional inputs for custom order data gathering. Each
            object in the array represents an input with a name, and a
            textInput, textArea, or checkbox value.
        metadata:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsMetadata
        isCustomerDeleted:
          type: boolean
          description: >
            A boolean indicating whether the customer has been deleted from the
            site.
        isShippingRequired:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that require shipping.
        hasDownloads:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that are downloadable.
        paymentProcessor:
          type: string
          description: |
            A string indicating the payment processor used for this order.
        totals:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsTotals
          description: An object describing various pricing totals
        downloadFiles:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItemsDownloadFilesItems
          description: An array of downloadable file objects.
    SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    orders_list_Response_200:
      type: object
      properties:
        orders:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaOrdersItems
          description: List of orders
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.orders.list(
    site_id="580e63e98c9a982ac9b8b741",
    status="pending",
    offset=1,
    limit=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.orders.list("580e63e98c9a982ac9b8b741", {
    status: "pending",
    offset: 1,
    limit: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders?offset=0&limit=100"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders?offset=0&limit=100")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders?offset=0&limit=100")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders?offset=0&limit=100', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders?offset=0&limit=100");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders?offset=0&limit=100")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Order

GET https://api.webflow.com/v2/sites/{site_id}/orders/{order_id}

Retrieve a single product by its ID. All of its SKUs will also be
retrieved.

Required scope | `ecommerce:read`


Reference: https://developers.webflow.com/data/reference/ecommerce/orders/get

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Order
  version: endpoint_orders.get
paths:
  /sites/{site_id}/orders/{order_id}:
    get:
      operationId: get
      summary: Get Order
      description: |
        Retrieve a single product by its ID. All of its SKUs will also be
        retrieved.

        Required scope | `ecommerce:read`
      tags:
        - - subpackage_orders
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: order_id
          in: path
          description: Unique identifier for an Order
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/orders_get_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaStatus:
      type: string
      enum:
        - value: pending
        - value: unfulfilled
        - value: fulfilled
        - value: disputed
        - value: dispute-lost
        - value: refunded
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaDisputeLastStatus:
      type: string
      enum:
        - value: warning_needs_response
        - value: warning_under_review
        - value: warning_closed
        - value: needs_response
        - value: under_review
        - value: charge_refunded
        - value: won
        - value: lost
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaCustomerPaid:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaNetAmount:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaApplicationFee:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaAllAddressesItemsType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaAllAddressesItemsJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaAllAddressesItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaAllAddressesItemsType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaAllAddressesItemsJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaShippingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaShippingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaShippingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaShippingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaShippingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaBillingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaBillingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaBillingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaBillingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaBillingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaCustomerInfo:
      type: object
      properties:
        fullName:
          type: string
          description: The full name of the Customer
        email:
          type: string
          format: email
          description: The Customer's email address
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItemsRowTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFileVariantsItems:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        originalFileName:
          type: string
        size:
          type: number
          format: double
          description: The image size in bytes
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFile:
      type: object
      properties:
        size:
          type: number
          format: double
          description: The image size in bytes
        originalFileName:
          type: string
          description: the original name of the image
        createdOn:
          type: string
          format: date-time
          description: The creation timestamp of the image
        contentType:
          type: string
          format: mime-type
          description: The MIME type of the image
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
        variants:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFileVariantsItems
          description: Variants of the supplied image
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImage:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        file:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFile
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItems:
      type: object
      properties:
        count:
          type: number
          format: double
          description: Number of Item purchased.
        rowTotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItemsRowTotal
          description: The total for the row
        productId:
          type: string
          format: objectid
          description: The unique identifier for the Product
        productName:
          type: string
          description: User-facing name of the Product
        productSlug:
          type: string
          description: Slug for the Product
        variantId:
          type: string
          description: Identifier for the Product Variant (SKU)
        variantName:
          type: string
          description: User-facing name of the Product Variant (SKU)
        variantSlug:
          type: string
          description: Slug for the Product Variant (SKU)
        variantSKU:
          type: string
          description: The user-defined custom SKU of the Product Variant (SKU)
        variantImage:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImage
        variantPrice:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantPrice
          description: The price corresponding to the variant
        weight:
          type:
            - number
            - 'null'
          format: double
          description: The physical weight of the variant if provided, or null
        width:
          type:
            - number
            - 'null'
          format: double
          description: The physical width of the variant if provided, or null
        height:
          type:
            - number
            - 'null'
          format: double
          description: The physical height of the variant if provided, or null
        length:
          type:
            - number
            - 'null'
          format: double
          description: The physical length of the variant if provided, or null
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaStripeDetails:
      type: object
      properties:
        subscriptionId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the Subscription
        paymentMethod:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentMethod used
        paymentIntentId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentIntent, or null
        customerId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated customer identifier, or null
        chargeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated charge identifier, or null
        disputeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated dispute identifier, or null
        refundId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated refund identifier, or null
        refundReason:
          type:
            - string
            - 'null'
          description: Stripe-generated refund reason, or null
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaStripeCardBrand:
      type: string
      enum:
        - value: Visa
        - value: American Express
        - value: MasterCard
        - value: Discover
        - value: JCB
        - value: Diners Club
        - value: Unknown
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaStripeCardExpires:
      type: object
      properties:
        year:
          type: number
          format: double
          description: Year that the card expires
        month:
          type: number
          format: double
          description: Month that the card expires
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaStripeCard:
      type: object
      properties:
        last4:
          type: string
          description: The last 4 digits on the card as a string
        brand:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaStripeCardBrand
          description: The card's brand (ie. credit card network)
        ownerName:
          type: string
          description: The name on the card.
        expires:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaStripeCardExpires
          description: The card's expiration date.
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPaypalDetails:
      type: object
      properties:
        orderId:
          type: string
          description: PayPal order identifier
        payerId:
          type: string
          description: PayPal payer identifier
        captureId:
          type: string
          description: PayPal capture identifier
        refundId:
          type: string
          description: PayPal refund identifier
        refundReason:
          type: string
          description: PayPal-issued reason for the refund
        disputeId:
          type: string
          description: PayPal dispute identifier
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaCustomDataItems:
      type: object
      properties: {}
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaMetadata:
      type: object
      properties:
        isBuyNow:
          type: boolean
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotalsSubtotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotalsExtrasItemsType:
      type: string
      enum:
        - value: discount
        - value: discount-shipping
        - value: shipping
        - value: tax
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotalsExtrasItemsPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotalsExtrasItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotalsExtrasItemsType
          description: The type of extra item this is.
        name:
          type: string
          description: A human-readable (but English) name for this extra charge.
        description:
          type: string
          description: A human-readable (but English) description of this extra charge.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotalsExtrasItemsPrice
          description: The price for the item
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotalsTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotals:
      type: object
      properties:
        subtotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotalsSubtotal
          description: The subtotal price
        extras:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotalsExtrasItems
          description: An array of extra items, includes discounts, shipping, and taxes.
        total:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotalsTotal
          description: The total price
    SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaDownloadFilesItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the downloadable file
        name:
          type: string
          description: The user-facing name for the downloadable file
        url:
          type: string
          format: uri
          description: The hosted location for the downloadable file
    orders_get_Response_200:
      type: object
      properties:
        orderId:
          type: string
          description: |
            The order ID. Will usually be 6 hex characters, but can also be 9
            hex characters if the site has a very large number of Orders.
            Randomly assigned.
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaStatus
          description: |
            The status of the Order
        comment:
          type: string
          description: >-
            A comment string for this Order, which is editable by API user (not
            used by Webflow).
        orderComment:
          type: string
          description: A comment that the customer left when making their Order
        acceptedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: The ISO8601 timestamp that an Order was placed.
        fulfilledOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'fulfilled', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        refundedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >-
            When an Order is marked as 'refunded', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'disputed', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputeUpdatedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            If an Order has been disputed by the customer, this key will be set
            to the ISO8601 timestamp of the last update received. If the Order
            is not disputed, the key will be null.
        disputeLastStatus:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaDisputeLastStatus
            - type: 'null'
          description: >
            If an order was disputed by the customer, then this key will be set
            with the [dispute's
            status](https://stripe.com/docs/api#dispute_object-status).
        customerPaid:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaCustomerPaid
          description: The total paid by the customer
        netAmount:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaNetAmount
          description: The net amount after application fees
        applicationFee:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaApplicationFee
          description: The application fee assessed by the platform
        allAddresses:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaAllAddressesItems
          description: All addresses provided by the customer during the ordering flow.
        shippingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaShippingAddress
          description: The shipping address
        billingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaBillingAddress
          description: The billing address
        shippingProvider:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping provider used
            (not used by Webflow).
        shippingTracking:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping tracking
            number for the order (not used by Webflow).
        shippingTrackingURL:
          type:
            - string
            - 'null'
          format: uri
        customerInfo:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaCustomerInfo
          description: An object with the keys `fullName` and `email`.
        purchasedItems:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPurchasedItemsItems
          description: An array of all things that the Customer purchased.
        purchasedItemsCount:
          type: number
          format: double
          description: The sum of all 'count' fields in 'purchasedItems'.
        stripeDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaStripeDetails
          description: >-
            An object with various Stripe IDs, useful for linking into the
            stripe dashboard.
        stripeCard:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaStripeCard
          description: >
            Details on the card used to fulfill this order, if this order was
            finalized with Stripe.
        paypalDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaPaypalDetails
        customData:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaCustomDataItems
          description: >
            An array of additional inputs for custom order data gathering. Each
            object in the array represents an input with a name, and a
            textInput, textArea, or checkbox value.
        metadata:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaMetadata
        isCustomerDeleted:
          type: boolean
          description: >
            A boolean indicating whether the customer has been deleted from the
            site.
        isShippingRequired:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that require shipping.
        hasDownloads:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that are downloadable.
        paymentProcessor:
          type: string
          description: |
            A string indicating the payment processor used for this order.
        totals:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaTotals
          description: An object describing various pricing totals
        downloadFiles:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdGetResponsesContentApplicationJsonSchemaDownloadFilesItems
          description: An array of downloadable file objects.

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.orders.get(
    site_id="580e63e98c9a982ac9b8b741",
    order_id="5e8518516e147040726cc415",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.orders.get("580e63e98c9a982ac9b8b741", "5e8518516e147040726cc415");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Order

PATCH https://api.webflow.com/v2/sites/{site_id}/orders/{order_id}
Content-Type: application/json

This API lets you update the fields, `comment`, `shippingProvider`,
and/or `shippingTracking` for a given order. All three fields can be
updated simultaneously or independently.

Required scope | `ecommerce:write`


Reference: https://developers.webflow.com/data/reference/ecommerce/orders/update

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Order
  version: endpoint_orders.update
paths:
  /sites/{site_id}/orders/{order_id}:
    patch:
      operationId: update
      summary: Update Order
      description: |
        This API lets you update the fields, `comment`, `shippingProvider`,
        and/or `shippingTracking` for a given order. All three fields can be
        updated simultaneously or independently.

        Required scope | `ecommerce:write`
      tags:
        - - subpackage_orders
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: order_id
          in: path
          description: Unique identifier for an Order
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/orders_update_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: The order fields to update
        content:
          application/json:
            schema:
              type: object
              properties:
                comment:
                  type: string
                  description: Arbitrary data for your records
                shippingProvider:
                  type: string
                  description: Company or method used to ship order
                shippingTracking:
                  type: string
                  description: Tracking number for order shipment
                shippingTrackingURL:
                  type: string
                  description: URL to track order shipment
components:
  schemas:
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaStatus:
      type: string
      enum:
        - value: pending
        - value: unfulfilled
        - value: fulfilled
        - value: disputed
        - value: dispute-lost
        - value: refunded
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaDisputeLastStatus:
      type: string
      enum:
        - value: warning_needs_response
        - value: warning_under_review
        - value: warning_closed
        - value: needs_response
        - value: under_review
        - value: charge_refunded
        - value: won
        - value: lost
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaCustomerPaid:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaNetAmount:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaApplicationFee:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaAllAddressesItemsType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaAllAddressesItemsJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaAllAddressesItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaAllAddressesItemsType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaAllAddressesItemsJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaShippingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaShippingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaShippingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaShippingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaShippingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaBillingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaBillingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaBillingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaBillingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaBillingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaCustomerInfo:
      type: object
      properties:
        fullName:
          type: string
          description: The full name of the Customer
        email:
          type: string
          format: email
          description: The Customer's email address
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItemsRowTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFileVariantsItems:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        originalFileName:
          type: string
        size:
          type: number
          format: double
          description: The image size in bytes
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFile:
      type: object
      properties:
        size:
          type: number
          format: double
          description: The image size in bytes
        originalFileName:
          type: string
          description: the original name of the image
        createdOn:
          type: string
          format: date-time
          description: The creation timestamp of the image
        contentType:
          type: string
          format: mime-type
          description: The MIME type of the image
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
        variants:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFileVariantsItems
          description: Variants of the supplied image
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImage:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        file:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFile
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItems:
      type: object
      properties:
        count:
          type: number
          format: double
          description: Number of Item purchased.
        rowTotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItemsRowTotal
          description: The total for the row
        productId:
          type: string
          format: objectid
          description: The unique identifier for the Product
        productName:
          type: string
          description: User-facing name of the Product
        productSlug:
          type: string
          description: Slug for the Product
        variantId:
          type: string
          description: Identifier for the Product Variant (SKU)
        variantName:
          type: string
          description: User-facing name of the Product Variant (SKU)
        variantSlug:
          type: string
          description: Slug for the Product Variant (SKU)
        variantSKU:
          type: string
          description: The user-defined custom SKU of the Product Variant (SKU)
        variantImage:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImage
        variantPrice:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantPrice
          description: The price corresponding to the variant
        weight:
          type:
            - number
            - 'null'
          format: double
          description: The physical weight of the variant if provided, or null
        width:
          type:
            - number
            - 'null'
          format: double
          description: The physical width of the variant if provided, or null
        height:
          type:
            - number
            - 'null'
          format: double
          description: The physical height of the variant if provided, or null
        length:
          type:
            - number
            - 'null'
          format: double
          description: The physical length of the variant if provided, or null
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaStripeDetails:
      type: object
      properties:
        subscriptionId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the Subscription
        paymentMethod:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentMethod used
        paymentIntentId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentIntent, or null
        customerId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated customer identifier, or null
        chargeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated charge identifier, or null
        disputeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated dispute identifier, or null
        refundId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated refund identifier, or null
        refundReason:
          type:
            - string
            - 'null'
          description: Stripe-generated refund reason, or null
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaStripeCardBrand:
      type: string
      enum:
        - value: Visa
        - value: American Express
        - value: MasterCard
        - value: Discover
        - value: JCB
        - value: Diners Club
        - value: Unknown
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaStripeCardExpires:
      type: object
      properties:
        year:
          type: number
          format: double
          description: Year that the card expires
        month:
          type: number
          format: double
          description: Month that the card expires
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaStripeCard:
      type: object
      properties:
        last4:
          type: string
          description: The last 4 digits on the card as a string
        brand:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaStripeCardBrand
          description: The card's brand (ie. credit card network)
        ownerName:
          type: string
          description: The name on the card.
        expires:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaStripeCardExpires
          description: The card's expiration date.
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPaypalDetails:
      type: object
      properties:
        orderId:
          type: string
          description: PayPal order identifier
        payerId:
          type: string
          description: PayPal payer identifier
        captureId:
          type: string
          description: PayPal capture identifier
        refundId:
          type: string
          description: PayPal refund identifier
        refundReason:
          type: string
          description: PayPal-issued reason for the refund
        disputeId:
          type: string
          description: PayPal dispute identifier
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaCustomDataItems:
      type: object
      properties: {}
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaMetadata:
      type: object
      properties:
        isBuyNow:
          type: boolean
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotalsSubtotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotalsExtrasItemsType:
      type: string
      enum:
        - value: discount
        - value: discount-shipping
        - value: shipping
        - value: tax
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotalsExtrasItemsPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotalsExtrasItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotalsExtrasItemsType
          description: The type of extra item this is.
        name:
          type: string
          description: A human-readable (but English) name for this extra charge.
        description:
          type: string
          description: A human-readable (but English) description of this extra charge.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotalsExtrasItemsPrice
          description: The price for the item
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotalsTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotals:
      type: object
      properties:
        subtotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotalsSubtotal
          description: The subtotal price
        extras:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotalsExtrasItems
          description: An array of extra items, includes discounts, shipping, and taxes.
        total:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotalsTotal
          description: The total price
    SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaDownloadFilesItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the downloadable file
        name:
          type: string
          description: The user-facing name for the downloadable file
        url:
          type: string
          format: uri
          description: The hosted location for the downloadable file
    orders_update_Response_200:
      type: object
      properties:
        orderId:
          type: string
          description: |
            The order ID. Will usually be 6 hex characters, but can also be 9
            hex characters if the site has a very large number of Orders.
            Randomly assigned.
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaStatus
          description: |
            The status of the Order
        comment:
          type: string
          description: >-
            A comment string for this Order, which is editable by API user (not
            used by Webflow).
        orderComment:
          type: string
          description: A comment that the customer left when making their Order
        acceptedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: The ISO8601 timestamp that an Order was placed.
        fulfilledOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'fulfilled', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        refundedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >-
            When an Order is marked as 'refunded', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'disputed', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputeUpdatedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            If an Order has been disputed by the customer, this key will be set
            to the ISO8601 timestamp of the last update received. If the Order
            is not disputed, the key will be null.
        disputeLastStatus:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaDisputeLastStatus
            - type: 'null'
          description: >
            If an order was disputed by the customer, then this key will be set
            with the [dispute's
            status](https://stripe.com/docs/api#dispute_object-status).
        customerPaid:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaCustomerPaid
          description: The total paid by the customer
        netAmount:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaNetAmount
          description: The net amount after application fees
        applicationFee:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaApplicationFee
          description: The application fee assessed by the platform
        allAddresses:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaAllAddressesItems
          description: All addresses provided by the customer during the ordering flow.
        shippingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaShippingAddress
          description: The shipping address
        billingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaBillingAddress
          description: The billing address
        shippingProvider:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping provider used
            (not used by Webflow).
        shippingTracking:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping tracking
            number for the order (not used by Webflow).
        shippingTrackingURL:
          type:
            - string
            - 'null'
          format: uri
        customerInfo:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaCustomerInfo
          description: An object with the keys `fullName` and `email`.
        purchasedItems:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPurchasedItemsItems
          description: An array of all things that the Customer purchased.
        purchasedItemsCount:
          type: number
          format: double
          description: The sum of all 'count' fields in 'purchasedItems'.
        stripeDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaStripeDetails
          description: >-
            An object with various Stripe IDs, useful for linking into the
            stripe dashboard.
        stripeCard:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaStripeCard
          description: >
            Details on the card used to fulfill this order, if this order was
            finalized with Stripe.
        paypalDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaPaypalDetails
        customData:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaCustomDataItems
          description: >
            An array of additional inputs for custom order data gathering. Each
            object in the array represents an input with a name, and a
            textInput, textArea, or checkbox value.
        metadata:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaMetadata
        isCustomerDeleted:
          type: boolean
          description: >
            A boolean indicating whether the customer has been deleted from the
            site.
        isShippingRequired:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that require shipping.
        hasDownloads:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that are downloadable.
        paymentProcessor:
          type: string
          description: |
            A string indicating the payment processor used for this order.
        totals:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaTotals
          description: An object describing various pricing totals
        downloadFiles:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdPatchResponsesContentApplicationJsonSchemaDownloadFilesItems
          description: An array of downloadable file objects.

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.orders.update(
    site_id="580e63e98c9a982ac9b8b741",
    order_id="5e8518516e147040726cc415",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.orders.update("580e63e98c9a982ac9b8b741", "5e8518516e147040726cc415");

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415"

	payload := strings.NewReader("{}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415', [
  'body' => '{}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Fulfill Order

POST https://api.webflow.com/v2/sites/{site_id}/orders/{order_id}/fulfill
Content-Type: application/json

Updates an order's status to fulfilled

Required scope | `ecommerce:write`


Reference: https://developers.webflow.com/data/reference/ecommerce/orders/update-fulfill

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Fulfill Order
  version: endpoint_orders.update-fulfill
paths:
  /sites/{site_id}/orders/{order_id}/fulfill:
    post:
      operationId: update-fulfill
      summary: Fulfill Order
      description: |
        Updates an order's status to fulfilled

        Required scope | `ecommerce:write`
      tags:
        - - subpackage_orders
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: order_id
          in: path
          description: Unique identifier for an Order
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/orders_update-fulfill_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: The order fulfillment request
        content:
          application/json:
            schema:
              type: object
              properties:
                sendOrderFulfilledEmail:
                  type: boolean
                  default: false
                  description: Whether or not the Order Fulfilled email should be sent
components:
  schemas:
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaStatus:
      type: string
      enum:
        - value: pending
        - value: unfulfilled
        - value: fulfilled
        - value: disputed
        - value: dispute-lost
        - value: refunded
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaDisputeLastStatus:
      type: string
      enum:
        - value: warning_needs_response
        - value: warning_under_review
        - value: warning_closed
        - value: needs_response
        - value: under_review
        - value: charge_refunded
        - value: won
        - value: lost
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaCustomerPaid:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaNetAmount:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaApplicationFee:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaAllAddressesItemsType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaAllAddressesItemsJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaAllAddressesItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaAllAddressesItemsType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaAllAddressesItemsJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaShippingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaShippingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaShippingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaShippingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaShippingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaBillingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaBillingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaBillingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaBillingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaBillingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaCustomerInfo:
      type: object
      properties:
        fullName:
          type: string
          description: The full name of the Customer
        email:
          type: string
          format: email
          description: The Customer's email address
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsRowTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFileVariantsItems:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        originalFileName:
          type: string
        size:
          type: number
          format: double
          description: The image size in bytes
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFile:
      type: object
      properties:
        size:
          type: number
          format: double
          description: The image size in bytes
        originalFileName:
          type: string
          description: the original name of the image
        createdOn:
          type: string
          format: date-time
          description: The creation timestamp of the image
        contentType:
          type: string
          format: mime-type
          description: The MIME type of the image
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
        variants:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFileVariantsItems
          description: Variants of the supplied image
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImage:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        file:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFile
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItems:
      type: object
      properties:
        count:
          type: number
          format: double
          description: Number of Item purchased.
        rowTotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsRowTotal
          description: The total for the row
        productId:
          type: string
          format: objectid
          description: The unique identifier for the Product
        productName:
          type: string
          description: User-facing name of the Product
        productSlug:
          type: string
          description: Slug for the Product
        variantId:
          type: string
          description: Identifier for the Product Variant (SKU)
        variantName:
          type: string
          description: User-facing name of the Product Variant (SKU)
        variantSlug:
          type: string
          description: Slug for the Product Variant (SKU)
        variantSKU:
          type: string
          description: The user-defined custom SKU of the Product Variant (SKU)
        variantImage:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImage
        variantPrice:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantPrice
          description: The price corresponding to the variant
        weight:
          type:
            - number
            - 'null'
          format: double
          description: The physical weight of the variant if provided, or null
        width:
          type:
            - number
            - 'null'
          format: double
          description: The physical width of the variant if provided, or null
        height:
          type:
            - number
            - 'null'
          format: double
          description: The physical height of the variant if provided, or null
        length:
          type:
            - number
            - 'null'
          format: double
          description: The physical length of the variant if provided, or null
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaStripeDetails:
      type: object
      properties:
        subscriptionId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the Subscription
        paymentMethod:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentMethod used
        paymentIntentId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentIntent, or null
        customerId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated customer identifier, or null
        chargeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated charge identifier, or null
        disputeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated dispute identifier, or null
        refundId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated refund identifier, or null
        refundReason:
          type:
            - string
            - 'null'
          description: Stripe-generated refund reason, or null
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaStripeCardBrand:
      type: string
      enum:
        - value: Visa
        - value: American Express
        - value: MasterCard
        - value: Discover
        - value: JCB
        - value: Diners Club
        - value: Unknown
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaStripeCardExpires:
      type: object
      properties:
        year:
          type: number
          format: double
          description: Year that the card expires
        month:
          type: number
          format: double
          description: Month that the card expires
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaStripeCard:
      type: object
      properties:
        last4:
          type: string
          description: The last 4 digits on the card as a string
        brand:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaStripeCardBrand
          description: The card's brand (ie. credit card network)
        ownerName:
          type: string
          description: The name on the card.
        expires:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaStripeCardExpires
          description: The card's expiration date.
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPaypalDetails:
      type: object
      properties:
        orderId:
          type: string
          description: PayPal order identifier
        payerId:
          type: string
          description: PayPal payer identifier
        captureId:
          type: string
          description: PayPal capture identifier
        refundId:
          type: string
          description: PayPal refund identifier
        refundReason:
          type: string
          description: PayPal-issued reason for the refund
        disputeId:
          type: string
          description: PayPal dispute identifier
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaCustomDataItems:
      type: object
      properties: {}
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaMetadata:
      type: object
      properties:
        isBuyNow:
          type: boolean
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotalsSubtotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsType:
      type: string
      enum:
        - value: discount
        - value: discount-shipping
        - value: shipping
        - value: tax
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsType
          description: The type of extra item this is.
        name:
          type: string
          description: A human-readable (but English) name for this extra charge.
        description:
          type: string
          description: A human-readable (but English) description of this extra charge.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsPrice
          description: The price for the item
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotalsTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotals:
      type: object
      properties:
        subtotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotalsSubtotal
          description: The subtotal price
        extras:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItems
          description: An array of extra items, includes discounts, shipping, and taxes.
        total:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotalsTotal
          description: The total price
    SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaDownloadFilesItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the downloadable file
        name:
          type: string
          description: The user-facing name for the downloadable file
        url:
          type: string
          format: uri
          description: The hosted location for the downloadable file
    orders_update-fulfill_Response_200:
      type: object
      properties:
        orderId:
          type: string
          description: |
            The order ID. Will usually be 6 hex characters, but can also be 9
            hex characters if the site has a very large number of Orders.
            Randomly assigned.
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaStatus
          description: |
            The status of the Order
        comment:
          type: string
          description: >-
            A comment string for this Order, which is editable by API user (not
            used by Webflow).
        orderComment:
          type: string
          description: A comment that the customer left when making their Order
        acceptedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: The ISO8601 timestamp that an Order was placed.
        fulfilledOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'fulfilled', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        refundedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >-
            When an Order is marked as 'refunded', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'disputed', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputeUpdatedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            If an Order has been disputed by the customer, this key will be set
            to the ISO8601 timestamp of the last update received. If the Order
            is not disputed, the key will be null.
        disputeLastStatus:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaDisputeLastStatus
            - type: 'null'
          description: >
            If an order was disputed by the customer, then this key will be set
            with the [dispute's
            status](https://stripe.com/docs/api#dispute_object-status).
        customerPaid:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaCustomerPaid
          description: The total paid by the customer
        netAmount:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaNetAmount
          description: The net amount after application fees
        applicationFee:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaApplicationFee
          description: The application fee assessed by the platform
        allAddresses:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaAllAddressesItems
          description: All addresses provided by the customer during the ordering flow.
        shippingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaShippingAddress
          description: The shipping address
        billingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaBillingAddress
          description: The billing address
        shippingProvider:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping provider used
            (not used by Webflow).
        shippingTracking:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping tracking
            number for the order (not used by Webflow).
        shippingTrackingURL:
          type:
            - string
            - 'null'
          format: uri
        customerInfo:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaCustomerInfo
          description: An object with the keys `fullName` and `email`.
        purchasedItems:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItems
          description: An array of all things that the Customer purchased.
        purchasedItemsCount:
          type: number
          format: double
          description: The sum of all 'count' fields in 'purchasedItems'.
        stripeDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaStripeDetails
          description: >-
            An object with various Stripe IDs, useful for linking into the
            stripe dashboard.
        stripeCard:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaStripeCard
          description: >
            Details on the card used to fulfill this order, if this order was
            finalized with Stripe.
        paypalDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaPaypalDetails
        customData:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaCustomDataItems
          description: >
            An array of additional inputs for custom order data gathering. Each
            object in the array represents an input with a name, and a
            textInput, textArea, or checkbox value.
        metadata:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaMetadata
        isCustomerDeleted:
          type: boolean
          description: >
            A boolean indicating whether the customer has been deleted from the
            site.
        isShippingRequired:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that require shipping.
        hasDownloads:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that are downloadable.
        paymentProcessor:
          type: string
          description: |
            A string indicating the payment processor used for this order.
        totals:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaTotals
          description: An object describing various pricing totals
        downloadFiles:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdFulfillPostResponsesContentApplicationJsonSchemaDownloadFilesItems
          description: An array of downloadable file objects.

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.orders.update_fulfill(
    site_id="580e63e98c9a982ac9b8b741",
    order_id="5e8518516e147040726cc415",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.orders.updateFulfill("580e63e98c9a982ac9b8b741", "5e8518516e147040726cc415");

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/fulfill"

	payload := strings.NewReader("{}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/fulfill")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/fulfill")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/fulfill', [
  'body' => '{}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/fulfill");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/fulfill")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Unfulfill Order

POST https://api.webflow.com/v2/sites/{site_id}/orders/{order_id}/unfulfill

Updates an order's status to unfulfilled

Required scope | `ecommerce:write`


Reference: https://developers.webflow.com/data/reference/ecommerce/orders/update-unfulfill

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Unfulfill Order
  version: endpoint_orders.update-unfulfill
paths:
  /sites/{site_id}/orders/{order_id}/unfulfill:
    post:
      operationId: update-unfulfill
      summary: Unfulfill Order
      description: |
        Updates an order's status to unfulfilled

        Required scope | `ecommerce:write`
      tags:
        - - subpackage_orders
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: order_id
          in: path
          description: Unique identifier for an Order
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/orders_update-unfulfill_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaStatus:
      type: string
      enum:
        - value: pending
        - value: unfulfilled
        - value: fulfilled
        - value: disputed
        - value: dispute-lost
        - value: refunded
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaDisputeLastStatus:
      type: string
      enum:
        - value: warning_needs_response
        - value: warning_under_review
        - value: warning_closed
        - value: needs_response
        - value: under_review
        - value: charge_refunded
        - value: won
        - value: lost
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaCustomerPaid:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaNetAmount:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaApplicationFee:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaAllAddressesItemsType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaAllAddressesItemsJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaAllAddressesItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaAllAddressesItemsType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaAllAddressesItemsJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaShippingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaShippingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaShippingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaShippingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaShippingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaBillingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaBillingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaBillingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaBillingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaBillingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaCustomerInfo:
      type: object
      properties:
        fullName:
          type: string
          description: The full name of the Customer
        email:
          type: string
          format: email
          description: The Customer's email address
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsRowTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFileVariantsItems:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        originalFileName:
          type: string
        size:
          type: number
          format: double
          description: The image size in bytes
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFile:
      type: object
      properties:
        size:
          type: number
          format: double
          description: The image size in bytes
        originalFileName:
          type: string
          description: the original name of the image
        createdOn:
          type: string
          format: date-time
          description: The creation timestamp of the image
        contentType:
          type: string
          format: mime-type
          description: The MIME type of the image
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
        variants:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFileVariantsItems
          description: Variants of the supplied image
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImage:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        file:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFile
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItems:
      type: object
      properties:
        count:
          type: number
          format: double
          description: Number of Item purchased.
        rowTotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsRowTotal
          description: The total for the row
        productId:
          type: string
          format: objectid
          description: The unique identifier for the Product
        productName:
          type: string
          description: User-facing name of the Product
        productSlug:
          type: string
          description: Slug for the Product
        variantId:
          type: string
          description: Identifier for the Product Variant (SKU)
        variantName:
          type: string
          description: User-facing name of the Product Variant (SKU)
        variantSlug:
          type: string
          description: Slug for the Product Variant (SKU)
        variantSKU:
          type: string
          description: The user-defined custom SKU of the Product Variant (SKU)
        variantImage:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImage
        variantPrice:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantPrice
          description: The price corresponding to the variant
        weight:
          type:
            - number
            - 'null'
          format: double
          description: The physical weight of the variant if provided, or null
        width:
          type:
            - number
            - 'null'
          format: double
          description: The physical width of the variant if provided, or null
        height:
          type:
            - number
            - 'null'
          format: double
          description: The physical height of the variant if provided, or null
        length:
          type:
            - number
            - 'null'
          format: double
          description: The physical length of the variant if provided, or null
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaStripeDetails:
      type: object
      properties:
        subscriptionId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the Subscription
        paymentMethod:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentMethod used
        paymentIntentId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentIntent, or null
        customerId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated customer identifier, or null
        chargeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated charge identifier, or null
        disputeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated dispute identifier, or null
        refundId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated refund identifier, or null
        refundReason:
          type:
            - string
            - 'null'
          description: Stripe-generated refund reason, or null
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaStripeCardBrand:
      type: string
      enum:
        - value: Visa
        - value: American Express
        - value: MasterCard
        - value: Discover
        - value: JCB
        - value: Diners Club
        - value: Unknown
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaStripeCardExpires:
      type: object
      properties:
        year:
          type: number
          format: double
          description: Year that the card expires
        month:
          type: number
          format: double
          description: Month that the card expires
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaStripeCard:
      type: object
      properties:
        last4:
          type: string
          description: The last 4 digits on the card as a string
        brand:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaStripeCardBrand
          description: The card's brand (ie. credit card network)
        ownerName:
          type: string
          description: The name on the card.
        expires:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaStripeCardExpires
          description: The card's expiration date.
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPaypalDetails:
      type: object
      properties:
        orderId:
          type: string
          description: PayPal order identifier
        payerId:
          type: string
          description: PayPal payer identifier
        captureId:
          type: string
          description: PayPal capture identifier
        refundId:
          type: string
          description: PayPal refund identifier
        refundReason:
          type: string
          description: PayPal-issued reason for the refund
        disputeId:
          type: string
          description: PayPal dispute identifier
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaCustomDataItems:
      type: object
      properties: {}
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaMetadata:
      type: object
      properties:
        isBuyNow:
          type: boolean
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotalsSubtotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsType:
      type: string
      enum:
        - value: discount
        - value: discount-shipping
        - value: shipping
        - value: tax
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsType
          description: The type of extra item this is.
        name:
          type: string
          description: A human-readable (but English) name for this extra charge.
        description:
          type: string
          description: A human-readable (but English) description of this extra charge.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsPrice
          description: The price for the item
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotalsTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotals:
      type: object
      properties:
        subtotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotalsSubtotal
          description: The subtotal price
        extras:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotalsExtrasItems
          description: An array of extra items, includes discounts, shipping, and taxes.
        total:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotalsTotal
          description: The total price
    SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaDownloadFilesItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the downloadable file
        name:
          type: string
          description: The user-facing name for the downloadable file
        url:
          type: string
          format: uri
          description: The hosted location for the downloadable file
    orders_update-unfulfill_Response_200:
      type: object
      properties:
        orderId:
          type: string
          description: |
            The order ID. Will usually be 6 hex characters, but can also be 9
            hex characters if the site has a very large number of Orders.
            Randomly assigned.
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaStatus
          description: |
            The status of the Order
        comment:
          type: string
          description: >-
            A comment string for this Order, which is editable by API user (not
            used by Webflow).
        orderComment:
          type: string
          description: A comment that the customer left when making their Order
        acceptedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: The ISO8601 timestamp that an Order was placed.
        fulfilledOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'fulfilled', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        refundedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >-
            When an Order is marked as 'refunded', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'disputed', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputeUpdatedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            If an Order has been disputed by the customer, this key will be set
            to the ISO8601 timestamp of the last update received. If the Order
            is not disputed, the key will be null.
        disputeLastStatus:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaDisputeLastStatus
            - type: 'null'
          description: >
            If an order was disputed by the customer, then this key will be set
            with the [dispute's
            status](https://stripe.com/docs/api#dispute_object-status).
        customerPaid:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaCustomerPaid
          description: The total paid by the customer
        netAmount:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaNetAmount
          description: The net amount after application fees
        applicationFee:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaApplicationFee
          description: The application fee assessed by the platform
        allAddresses:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaAllAddressesItems
          description: All addresses provided by the customer during the ordering flow.
        shippingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaShippingAddress
          description: The shipping address
        billingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaBillingAddress
          description: The billing address
        shippingProvider:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping provider used
            (not used by Webflow).
        shippingTracking:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping tracking
            number for the order (not used by Webflow).
        shippingTrackingURL:
          type:
            - string
            - 'null'
          format: uri
        customerInfo:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaCustomerInfo
          description: An object with the keys `fullName` and `email`.
        purchasedItems:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPurchasedItemsItems
          description: An array of all things that the Customer purchased.
        purchasedItemsCount:
          type: number
          format: double
          description: The sum of all 'count' fields in 'purchasedItems'.
        stripeDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaStripeDetails
          description: >-
            An object with various Stripe IDs, useful for linking into the
            stripe dashboard.
        stripeCard:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaStripeCard
          description: >
            Details on the card used to fulfill this order, if this order was
            finalized with Stripe.
        paypalDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaPaypalDetails
        customData:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaCustomDataItems
          description: >
            An array of additional inputs for custom order data gathering. Each
            object in the array represents an input with a name, and a
            textInput, textArea, or checkbox value.
        metadata:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaMetadata
        isCustomerDeleted:
          type: boolean
          description: >
            A boolean indicating whether the customer has been deleted from the
            site.
        isShippingRequired:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that require shipping.
        hasDownloads:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that are downloadable.
        paymentProcessor:
          type: string
          description: |
            A string indicating the payment processor used for this order.
        totals:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaTotals
          description: An object describing various pricing totals
        downloadFiles:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdUnfulfillPostResponsesContentApplicationJsonSchemaDownloadFilesItems
          description: An array of downloadable file objects.

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.orders.update_unfulfill(
    site_id="580e63e98c9a982ac9b8b741",
    order_id="5e8518516e147040726cc415",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.orders.updateUnfulfill("580e63e98c9a982ac9b8b741", "5e8518516e147040726cc415");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/unfulfill"

	req, _ := http.NewRequest("POST", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/unfulfill")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/unfulfill")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/unfulfill', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/unfulfill");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/unfulfill")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Refund Order

POST https://api.webflow.com/v2/sites/{site_id}/orders/{order_id}/refund
Content-Type: application/json

This API will reverse a Stripe charge and refund an order back to a
customer. It will also set the order's status to `refunded`.

Required scope | `ecommerce:write`


Reference: https://developers.webflow.com/data/reference/ecommerce/orders/refund

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Refund Order
  version: endpoint_orders.refund
paths:
  /sites/{site_id}/orders/{order_id}/refund:
    post:
      operationId: refund
      summary: Refund Order
      description: |
        This API will reverse a Stripe charge and refund an order back to a
        customer. It will also set the order's status to `refunded`.

        Required scope | `ecommerce:write`
      tags:
        - - subpackage_orders
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: order_id
          in: path
          description: Unique identifier for an Order
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/orders_refund_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: The order fulfillment request
        content:
          application/json:
            schema:
              type: object
              properties:
                reason:
                  $ref: >-
                    #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostRequestBodyContentApplicationJsonSchemaReason
                  description: The reason for the refund
components:
  schemas:
    SitesSiteIdOrdersOrderIdRefundPostRequestBodyContentApplicationJsonSchemaReason:
      type: string
      enum:
        - value: duplicate
        - value: fraudulent
        - value: requested
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaStatus:
      type: string
      enum:
        - value: pending
        - value: unfulfilled
        - value: fulfilled
        - value: disputed
        - value: dispute-lost
        - value: refunded
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaDisputeLastStatus:
      type: string
      enum:
        - value: warning_needs_response
        - value: warning_under_review
        - value: warning_closed
        - value: needs_response
        - value: under_review
        - value: charge_refunded
        - value: won
        - value: lost
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaCustomerPaid:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaNetAmount:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaApplicationFee:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaAllAddressesItemsType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaAllAddressesItemsJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaAllAddressesItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaAllAddressesItemsType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaAllAddressesItemsJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaShippingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaShippingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaShippingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaShippingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaShippingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaBillingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaBillingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaBillingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaBillingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaBillingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaCustomerInfo:
      type: object
      properties:
        fullName:
          type: string
          description: The full name of the Customer
        email:
          type: string
          format: email
          description: The Customer's email address
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsRowTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFileVariantsItems:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        originalFileName:
          type: string
        size:
          type: number
          format: double
          description: The image size in bytes
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFile:
      type: object
      properties:
        size:
          type: number
          format: double
          description: The image size in bytes
        originalFileName:
          type: string
          description: the original name of the image
        createdOn:
          type: string
          format: date-time
          description: The creation timestamp of the image
        contentType:
          type: string
          format: mime-type
          description: The MIME type of the image
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
        variants:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFileVariantsItems
          description: Variants of the supplied image
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImage:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        file:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImageFile
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItems:
      type: object
      properties:
        count:
          type: number
          format: double
          description: Number of Item purchased.
        rowTotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsRowTotal
          description: The total for the row
        productId:
          type: string
          format: objectid
          description: The unique identifier for the Product
        productName:
          type: string
          description: User-facing name of the Product
        productSlug:
          type: string
          description: Slug for the Product
        variantId:
          type: string
          description: Identifier for the Product Variant (SKU)
        variantName:
          type: string
          description: User-facing name of the Product Variant (SKU)
        variantSlug:
          type: string
          description: Slug for the Product Variant (SKU)
        variantSKU:
          type: string
          description: The user-defined custom SKU of the Product Variant (SKU)
        variantImage:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantImage
        variantPrice:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItemsVariantPrice
          description: The price corresponding to the variant
        weight:
          type:
            - number
            - 'null'
          format: double
          description: The physical weight of the variant if provided, or null
        width:
          type:
            - number
            - 'null'
          format: double
          description: The physical width of the variant if provided, or null
        height:
          type:
            - number
            - 'null'
          format: double
          description: The physical height of the variant if provided, or null
        length:
          type:
            - number
            - 'null'
          format: double
          description: The physical length of the variant if provided, or null
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaStripeDetails:
      type: object
      properties:
        subscriptionId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the Subscription
        paymentMethod:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentMethod used
        paymentIntentId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentIntent, or null
        customerId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated customer identifier, or null
        chargeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated charge identifier, or null
        disputeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated dispute identifier, or null
        refundId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated refund identifier, or null
        refundReason:
          type:
            - string
            - 'null'
          description: Stripe-generated refund reason, or null
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaStripeCardBrand:
      type: string
      enum:
        - value: Visa
        - value: American Express
        - value: MasterCard
        - value: Discover
        - value: JCB
        - value: Diners Club
        - value: Unknown
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaStripeCardExpires:
      type: object
      properties:
        year:
          type: number
          format: double
          description: Year that the card expires
        month:
          type: number
          format: double
          description: Month that the card expires
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaStripeCard:
      type: object
      properties:
        last4:
          type: string
          description: The last 4 digits on the card as a string
        brand:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaStripeCardBrand
          description: The card's brand (ie. credit card network)
        ownerName:
          type: string
          description: The name on the card.
        expires:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaStripeCardExpires
          description: The card's expiration date.
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPaypalDetails:
      type: object
      properties:
        orderId:
          type: string
          description: PayPal order identifier
        payerId:
          type: string
          description: PayPal payer identifier
        captureId:
          type: string
          description: PayPal capture identifier
        refundId:
          type: string
          description: PayPal refund identifier
        refundReason:
          type: string
          description: PayPal-issued reason for the refund
        disputeId:
          type: string
          description: PayPal dispute identifier
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaCustomDataItems:
      type: object
      properties: {}
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaMetadata:
      type: object
      properties:
        isBuyNow:
          type: boolean
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotalsSubtotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsType:
      type: string
      enum:
        - value: discount
        - value: discount-shipping
        - value: shipping
        - value: tax
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotalsExtrasItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsType
          description: The type of extra item this is.
        name:
          type: string
          description: A human-readable (but English) name for this extra charge.
        description:
          type: string
          description: A human-readable (but English) description of this extra charge.
        price:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotalsExtrasItemsPrice
          description: The price for the item
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotalsTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotals:
      type: object
      properties:
        subtotal:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotalsSubtotal
          description: The subtotal price
        extras:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotalsExtrasItems
          description: An array of extra items, includes discounts, shipping, and taxes.
        total:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotalsTotal
          description: The total price
    SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaDownloadFilesItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the downloadable file
        name:
          type: string
          description: The user-facing name for the downloadable file
        url:
          type: string
          format: uri
          description: The hosted location for the downloadable file
    orders_refund_Response_200:
      type: object
      properties:
        orderId:
          type: string
          description: |
            The order ID. Will usually be 6 hex characters, but can also be 9
            hex characters if the site has a very large number of Orders.
            Randomly assigned.
        status:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaStatus
          description: |
            The status of the Order
        comment:
          type: string
          description: >-
            A comment string for this Order, which is editable by API user (not
            used by Webflow).
        orderComment:
          type: string
          description: A comment that the customer left when making their Order
        acceptedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: The ISO8601 timestamp that an Order was placed.
        fulfilledOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'fulfilled', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        refundedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >-
            When an Order is marked as 'refunded', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'disputed', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputeUpdatedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            If an Order has been disputed by the customer, this key will be set
            to the ISO8601 timestamp of the last update received. If the Order
            is not disputed, the key will be null.
        disputeLastStatus:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaDisputeLastStatus
            - type: 'null'
          description: >
            If an order was disputed by the customer, then this key will be set
            with the [dispute's
            status](https://stripe.com/docs/api#dispute_object-status).
        customerPaid:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaCustomerPaid
          description: The total paid by the customer
        netAmount:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaNetAmount
          description: The net amount after application fees
        applicationFee:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaApplicationFee
          description: The application fee assessed by the platform
        allAddresses:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaAllAddressesItems
          description: All addresses provided by the customer during the ordering flow.
        shippingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaShippingAddress
          description: The shipping address
        billingAddress:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaBillingAddress
          description: The billing address
        shippingProvider:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping provider used
            (not used by Webflow).
        shippingTracking:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping tracking
            number for the order (not used by Webflow).
        shippingTrackingURL:
          type:
            - string
            - 'null'
          format: uri
        customerInfo:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaCustomerInfo
          description: An object with the keys `fullName` and `email`.
        purchasedItems:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPurchasedItemsItems
          description: An array of all things that the Customer purchased.
        purchasedItemsCount:
          type: number
          format: double
          description: The sum of all 'count' fields in 'purchasedItems'.
        stripeDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaStripeDetails
          description: >-
            An object with various Stripe IDs, useful for linking into the
            stripe dashboard.
        stripeCard:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaStripeCard
          description: >
            Details on the card used to fulfill this order, if this order was
            finalized with Stripe.
        paypalDetails:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaPaypalDetails
        customData:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaCustomDataItems
          description: >
            An array of additional inputs for custom order data gathering. Each
            object in the array represents an input with a name, and a
            textInput, textArea, or checkbox value.
        metadata:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaMetadata
        isCustomerDeleted:
          type: boolean
          description: >
            A boolean indicating whether the customer has been deleted from the
            site.
        isShippingRequired:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that require shipping.
        hasDownloads:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that are downloadable.
        paymentProcessor:
          type: string
          description: |
            A string indicating the payment processor used for this order.
        totals:
          $ref: >-
            #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaTotals
          description: An object describing various pricing totals
        downloadFiles:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdOrdersOrderIdRefundPostResponsesContentApplicationJsonSchemaDownloadFilesItems
          description: An array of downloadable file objects.

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.orders.refund(
    site_id="580e63e98c9a982ac9b8b741",
    order_id="5e8518516e147040726cc415",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.orders.refund("580e63e98c9a982ac9b8b741", "5e8518516e147040726cc415");

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/refund"

	payload := strings.NewReader("{}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/refund")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/refund")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/refund', [
  'body' => '{}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/refund");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/orders/5e8518516e147040726cc415/refund")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Inventory

GET https://api.webflow.com/v2/collections/{sku_collection_id}/items/{sku_id}/inventory

List the current inventory levels for a particular SKU item.

Required scope | `ecommerce:read`


Reference: https://developers.webflow.com/data/reference/ecommerce/inventory/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Inventory
  version: endpoint_inventory.list
paths:
  /collections/{sku_collection_id}/items/{sku_id}/inventory:
    get:
      operationId: list
      summary: List Inventory
      description: |
        List the current inventory levels for a particular SKU item.

        Required scope | `ecommerce:read`
      tags:
        - - subpackage_inventory
      parameters:
        - name: sku_collection_id
          in: path
          description: >-
            Unique identifier for a SKU collection. Use the List Collections API
            to find this ID.
          required: true
          schema:
            type: string
            format: objectid
        - name: sku_id
          in: path
          description: Unique identifier for a SKU
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/inventory_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    CollectionsSkuCollectionIdItemsSkuIdInventoryGetResponsesContentApplicationJsonSchemaInventoryType:
      type: string
      enum:
        - value: infinite
        - value: finite
    inventory_list_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a SKU item
        quantity:
          type: number
          format: double
          description: >-
            Total quantity of items remaining in inventory (if inventoryType is
            finite)
        inventoryType:
          $ref: >-
            #/components/schemas/CollectionsSkuCollectionIdItemsSkuIdInventoryGetResponsesContentApplicationJsonSchemaInventoryType
          description: infinite or finite

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.inventory.list(
    sku_collection_id="6377a7c4b7a79608c34a46f7",
    sku_id="5e8518516e147040726cc415",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.inventory.list("6377a7c4b7a79608c34a46f7", "5e8518516e147040726cc415");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Item Inventory

PATCH https://api.webflow.com/v2/collections/{sku_collection_id}/items/{sku_id}/inventory
Content-Type: application/json

Updates the current inventory levels for a particular SKU item. 

Updates may be given in one or two methods, absolutely or incrementally. 
- Absolute updates are done by setting `quantity` directly. 
- Incremental updates are by specifying the inventory delta in `updateQuantity` which is then added to the `quantity` stored on the server.

Required scope | `ecommerce:write`


Reference: https://developers.webflow.com/data/reference/ecommerce/inventory/update

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Item Inventory
  version: endpoint_inventory.update
paths:
  /collections/{sku_collection_id}/items/{sku_id}/inventory:
    patch:
      operationId: update
      summary: Update Item Inventory
      description: >
        Updates the current inventory levels for a particular SKU item. 


        Updates may be given in one or two methods, absolutely or
        incrementally. 

        - Absolute updates are done by setting `quantity` directly. 

        - Incremental updates are by specifying the inventory delta in
        `updateQuantity` which is then added to the `quantity` stored on the
        server.


        Required scope | `ecommerce:write`
      tags:
        - - subpackage_inventory
      parameters:
        - name: sku_collection_id
          in: path
          description: >-
            Unique identifier for a SKU collection. Use the List Collections API
            to find this ID.
          required: true
          schema:
            type: string
            format: objectid
        - name: sku_id
          in: path
          description: Unique identifier for a SKU
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/inventory_update_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: The updated inventory
        content:
          application/json:
            schema:
              type: object
              properties:
                inventoryType:
                  $ref: >-
                    #/components/schemas/CollectionsSkuCollectionIdItemsSkuIdInventoryPatchRequestBodyContentApplicationJsonSchemaInventoryType
                  description: infinite or finite
                updateQuantity:
                  type: number
                  format: double
                  description: >-
                    Adds this quantity to currently store quantity. Can be
                    negative.
                quantity:
                  type: number
                  format: double
                  description: Immediately sets quantity to this value.
              required:
                - inventoryType
components:
  schemas:
    CollectionsSkuCollectionIdItemsSkuIdInventoryPatchRequestBodyContentApplicationJsonSchemaInventoryType:
      type: string
      enum:
        - value: infinite
        - value: finite
    CollectionsSkuCollectionIdItemsSkuIdInventoryPatchResponsesContentApplicationJsonSchemaInventoryType:
      type: string
      enum:
        - value: infinite
        - value: finite
    inventory_update_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a SKU item
        quantity:
          type: number
          format: double
          description: >-
            Total quantity of items remaining in inventory (if inventoryType is
            finite)
        inventoryType:
          $ref: >-
            #/components/schemas/CollectionsSkuCollectionIdItemsSkuIdInventoryPatchResponsesContentApplicationJsonSchemaInventoryType
          description: infinite or finite

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.inventory.update(
    sku_collection_id="6377a7c4b7a79608c34a46f7",
    sku_id="5e8518516e147040726cc415",
    inventory_type="infinite",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.inventory.update("6377a7c4b7a79608c34a46f7", "5e8518516e147040726cc415", {
    inventoryType: "infinite"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory"

	payload := strings.NewReader("{\n  \"inventoryType\": \"finite\"\n}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"inventoryType\": \"finite\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"inventoryType\": \"finite\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory', [
  'body' => '{
  "inventoryType": "finite"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"inventoryType\": \"finite\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["inventoryType": "finite"] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/collections/6377a7c4b7a79608c34a46f7/items/5e8518516e147040726cc415/inventory")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Ecommerce Settings

GET https://api.webflow.com/v2/sites/{site_id}/ecommerce/settings

Retrieve ecommerce settings for a site.

Required scope | `ecommerce:read`


Reference: https://developers.webflow.com/data/reference/ecommerce/settings/get-settings

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Ecommerce Settings
  version: endpoint_ecommerce.get-settings
paths:
  /sites/{site_id}/ecommerce/settings:
    get:
      operationId: get-settings
      summary: Get Ecommerce Settings
      description: |
        Retrieve ecommerce settings for a site.

        Required scope | `ecommerce:read`
      tags:
        - - subpackage_ecommerce
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/ecommerce_get-settings_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Provided access token is valid, but is missing the required scopes.
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '409':
          description: The site does not have ecommerce enabled.
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    ecommerce_get-settings_Response_200:
      type: object
      properties:
        siteId:
          type: string
          format: objectid
          description: The identifier of the Site
        createdOn:
          type: string
          format: date-time
          description: Date that the Site was created on
        defaultCurrency:
          type: string
          description: The three-letter ISO currency code for the Site

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.ecommerce.get_settings(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.ecommerce.getSettings("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/ecommerce/settings"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/ecommerce/settings")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/ecommerce/settings")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/ecommerce/settings', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/ecommerce/settings");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/ecommerce/settings")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# List Webhooks

GET https://api.webflow.com/v2/sites/{site_id}/webhooks

List all App-created Webhooks registered for a given site

Required scope | `sites:read`


Reference: https://developers.webflow.com/data/reference/webhooks/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: List Webhooks
  version: endpoint_webhooks.list
paths:
  /sites/{site_id}/webhooks:
    get:
      operationId: list
      summary: List Webhooks
      description: |
        List all App-created Webhooks registered for a given site

        Required scope | `sites:read`
      tags:
        - - subpackage_webhooks
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/webhooks_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdWebhooksGetResponsesContentApplicationJsonSchemaWebhooksItemsTriggerType:
      type: string
      enum:
        - value: form_submission
        - value: site_publish
        - value: page_created
        - value: page_metadata_updated
        - value: page_deleted
        - value: ecomm_new_order
        - value: ecomm_order_changed
        - value: ecomm_inventory_changed
        - value: user_account_added
        - value: user_account_updated
        - value: user_account_deleted
        - value: collection_item_created
        - value: collection_item_changed
        - value: collection_item_deleted
        - value: collection_item_published
        - value: collection_item_unpublished
        - value: comment_created
    SitesSiteIdWebhooksGetResponsesContentApplicationJsonSchemaWebhooksItemsFilter:
      type: object
      properties:
        name:
          type: string
          description: The name of the form you'd like to recieve notifications for.
    SitesSiteIdWebhooksGetResponsesContentApplicationJsonSchemaWebhooksItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Webhook registration
        triggerType:
          $ref: >-
            #/components/schemas/SitesSiteIdWebhooksGetResponsesContentApplicationJsonSchemaWebhooksItemsTriggerType
          description: >
            The type of event that triggered the request. See the the
            documentation for details on [supported
            events](/data/reference/all-events).
        url:
          type: string
          description: URL to send the Webhook payload to
        workspaceId:
          type: string
          format: objectid
          description: Unique identifier for the Workspace the Webhook is registered in
        siteId:
          type: string
          format: objectid
          description: Unique identifier for the Site the Webhook is registered in
        filter:
          $ref: >-
            #/components/schemas/SitesSiteIdWebhooksGetResponsesContentApplicationJsonSchemaWebhooksItemsFilter
          description: >-
            Only supported for the `form_submission` trigger type. Filter for
            the form you want Webhooks to be sent for.
        lastTriggered:
          type: string
          format: date-time
          description: Date the Webhook instance was last triggered
        createdOn:
          type: string
          format: date-time
          description: Date the Webhook registration was created
    SitesSiteIdWebhooksGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    webhooks_list_Response_200:
      type: object
      properties:
        webhooks:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdWebhooksGetResponsesContentApplicationJsonSchemaWebhooksItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdWebhooksGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.webhooks.list(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.webhooks.list("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Webhook

GET https://api.webflow.com/v2/webhooks/{webhook_id}

Get a specific Webhook instance

Required scope: `sites:read`


Reference: https://developers.webflow.com/data/reference/webhooks/get

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Webhook
  version: endpoint_webhooks.get
paths:
  /webhooks/{webhook_id}:
    get:
      operationId: get
      summary: Get Webhook
      description: |
        Get a specific Webhook instance

        Required scope: `sites:read`
      tags:
        - - subpackage_webhooks
      parameters:
        - name: webhook_id
          in: path
          description: Unique identifier for a Webhook
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/webhooks_get_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    WebhooksWebhookIdGetResponsesContentApplicationJsonSchemaTriggerType:
      type: string
      enum:
        - value: form_submission
        - value: site_publish
        - value: page_created
        - value: page_metadata_updated
        - value: page_deleted
        - value: ecomm_new_order
        - value: ecomm_order_changed
        - value: ecomm_inventory_changed
        - value: user_account_added
        - value: user_account_updated
        - value: user_account_deleted
        - value: collection_item_created
        - value: collection_item_changed
        - value: collection_item_deleted
        - value: collection_item_published
        - value: collection_item_unpublished
        - value: comment_created
    WebhooksWebhookIdGetResponsesContentApplicationJsonSchemaFilter:
      type: object
      properties:
        name:
          type: string
          description: The name of the form you'd like to recieve notifications for.
    webhooks_get_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Webhook registration
        triggerType:
          $ref: >-
            #/components/schemas/WebhooksWebhookIdGetResponsesContentApplicationJsonSchemaTriggerType
          description: >
            The type of event that triggered the request. See the the
            documentation for details on [supported
            events](/data/reference/all-events).
        url:
          type: string
          description: URL to send the Webhook payload to
        workspaceId:
          type: string
          format: objectid
          description: Unique identifier for the Workspace the Webhook is registered in
        siteId:
          type: string
          format: objectid
          description: Unique identifier for the Site the Webhook is registered in
        filter:
          $ref: >-
            #/components/schemas/WebhooksWebhookIdGetResponsesContentApplicationJsonSchemaFilter
          description: >-
            Only supported for the `form_submission` trigger type. Filter for
            the form you want Webhooks to be sent for.
        lastTriggered:
          type: string
          format: date-time
          description: Date the Webhook instance was last triggered
        createdOn:
          type: string
          format: date-time
          description: Date the Webhook registration was created

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.webhooks.get(
    webhook_id="580e64008c9a982ac9b8b754",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.webhooks.get("580e64008c9a982ac9b8b754");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Create Webhook

POST https://api.webflow.com/v2/sites/{site_id}/webhooks
Content-Type: application/json

Create a new Webhook.

Limit of 75 registrations per `triggerType`, per site.

<Note>Access to this endpoint requires a bearer token from a [Data Client App](/data/docs/getting-started-data-clients).</Note>
Required scope | `sites:write`


Reference: https://developers.webflow.com/data/reference/webhooks/create

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Create Webhook
  version: endpoint_webhooks.create
paths:
  /sites/{site_id}/webhooks:
    post:
      operationId: create
      summary: Create Webhook
      description: >
        Create a new Webhook.


        Limit of 75 registrations per `triggerType`, per site.


        <Note>Access to this endpoint requires a bearer token from a [Data
        Client App](/data/docs/getting-started-data-clients).</Note>

        Required scope | `sites:write`
      tags:
        - - subpackage_webhooks
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '201':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/webhooks_create_Response_201'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        description: The Webhook registration object
        content:
          application/json:
            schema:
              type: object
              properties:
                id:
                  type: string
                  format: objectid
                  description: Unique identifier for the Webhook registration
                triggerType:
                  $ref: >-
                    #/components/schemas/SitesSiteIdWebhooksPostRequestBodyContentApplicationJsonSchemaTriggerType
                  description: >
                    The type of event that triggered the request. See the the
                    documentation for details on [supported
                    events](/data/reference/all-events).
                url:
                  type: string
                  description: URL to send the Webhook payload to
                workspaceId:
                  type: string
                  format: objectid
                  description: >-
                    Unique identifier for the Workspace the Webhook is
                    registered in
                siteId:
                  type: string
                  format: objectid
                  description: Unique identifier for the Site the Webhook is registered in
                filter:
                  $ref: >-
                    #/components/schemas/SitesSiteIdWebhooksPostRequestBodyContentApplicationJsonSchemaFilter
                  description: >-
                    Only supported for the `form_submission` trigger type.
                    Filter for the form you want Webhooks to be sent for.
                lastTriggered:
                  type: string
                  format: date-time
                  description: Date the Webhook instance was last triggered
                createdOn:
                  type: string
                  format: date-time
                  description: Date the Webhook registration was created
components:
  schemas:
    SitesSiteIdWebhooksPostRequestBodyContentApplicationJsonSchemaTriggerType:
      type: string
      enum:
        - value: form_submission
        - value: site_publish
        - value: page_created
        - value: page_metadata_updated
        - value: page_deleted
        - value: ecomm_new_order
        - value: ecomm_order_changed
        - value: ecomm_inventory_changed
        - value: user_account_added
        - value: user_account_updated
        - value: user_account_deleted
        - value: collection_item_created
        - value: collection_item_changed
        - value: collection_item_deleted
        - value: collection_item_published
        - value: collection_item_unpublished
        - value: comment_created
    SitesSiteIdWebhooksPostRequestBodyContentApplicationJsonSchemaFilter:
      type: object
      properties:
        name:
          type: string
          description: The name of the form you'd like to recieve notifications for.
    SitesSiteIdWebhooksPostResponsesContentApplicationJsonSchemaTriggerType:
      type: string
      enum:
        - value: form_submission
        - value: site_publish
        - value: page_created
        - value: page_metadata_updated
        - value: page_deleted
        - value: ecomm_new_order
        - value: ecomm_order_changed
        - value: ecomm_inventory_changed
        - value: user_account_added
        - value: user_account_updated
        - value: user_account_deleted
        - value: collection_item_created
        - value: collection_item_changed
        - value: collection_item_deleted
        - value: collection_item_published
        - value: collection_item_unpublished
        - value: comment_created
    SitesSiteIdWebhooksPostResponsesContentApplicationJsonSchemaFilter:
      type: object
      properties:
        name:
          type: string
          description: The name of the form you'd like to recieve notifications for.
    webhooks_create_Response_201:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Webhook registration
        triggerType:
          $ref: >-
            #/components/schemas/SitesSiteIdWebhooksPostResponsesContentApplicationJsonSchemaTriggerType
          description: >
            The type of event that triggered the request. See the the
            documentation for details on [supported
            events](/data/reference/all-events).
        url:
          type: string
          description: URL to send the Webhook payload to
        workspaceId:
          type: string
          format: objectid
          description: Unique identifier for the Workspace the Webhook is registered in
        siteId:
          type: string
          format: objectid
          description: Unique identifier for the Site the Webhook is registered in
        filter:
          $ref: >-
            #/components/schemas/SitesSiteIdWebhooksPostResponsesContentApplicationJsonSchemaFilter
          description: >-
            Only supported for the `form_submission` trigger type. Filter for
            the form you want Webhooks to be sent for.
        lastTriggered:
          type: string
          format: date-time
          description: Date the Webhook instance was last triggered
        createdOn:
          type: string
          format: date-time
          description: Date the Webhook registration was created

```

## SDK Code Examples

```python
import datetime

from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.webhooks.create(
    site_id_="580e63e98c9a982ac9b8b741",
    id="582266e0cd48de0f0e3c6d8b",
    trigger_type="form_submission",
    url="https://webhook.site/7f7f7f7f-7f7f-7f7f-7f7f-7f7f7f7f7f7f",
    workspace_id="4f4e46fd476ea8c507000001",
    site_id="562ac0395358780a1f5e6fbd",
    last_triggered=datetime.datetime.fromisoformat(
        "2023-02-08 23:59:28+00:00",
    ),
    created_on=datetime.datetime.fromisoformat(
        "2022-11-08 23:59:28+00:00",
    ),
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.webhooks.create("580e63e98c9a982ac9b8b741", {
    id: "582266e0cd48de0f0e3c6d8b",
    triggerType: "form_submission",
    url: "https://webhook.site/7f7f7f7f-7f7f-7f7f-7f7f-7f7f7f7f7f7f",
    workspaceId: "4f4e46fd476ea8c507000001",
    siteId: "562ac0395358780a1f5e6fbd",
    lastTriggered: new Date("2023-02-08T23:59:28.000Z"),
    createdOn: new Date("2022-11-08T23:59:28.000Z")
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks"

	payload := strings.NewReader("{\n  \"id\": \"582266e0cd48de0f0e3c6d8b\",\n  \"triggerType\": \"form_submission\",\n  \"url\": \"https://webhook.site/7f7f7f7f-7f7f-7f7f-7f7f-7f7f7f7f7f7f\",\n  \"workspaceId\": \"4f4e46fd476ea8c507000001\",\n  \"siteId\": \"562ac0395358780a1f5e6fbd\",\n  \"lastTriggered\": \"2023-02-08T23:59:28.572Z\",\n  \"createdOn\": \"2022-11-08T23:59:28.572Z\"\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"id\": \"582266e0cd48de0f0e3c6d8b\",\n  \"triggerType\": \"form_submission\",\n  \"url\": \"https://webhook.site/7f7f7f7f-7f7f-7f7f-7f7f-7f7f7f7f7f7f\",\n  \"workspaceId\": \"4f4e46fd476ea8c507000001\",\n  \"siteId\": \"562ac0395358780a1f5e6fbd\",\n  \"lastTriggered\": \"2023-02-08T23:59:28.572Z\",\n  \"createdOn\": \"2022-11-08T23:59:28.572Z\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"id\": \"582266e0cd48de0f0e3c6d8b\",\n  \"triggerType\": \"form_submission\",\n  \"url\": \"https://webhook.site/7f7f7f7f-7f7f-7f7f-7f7f-7f7f7f7f7f7f\",\n  \"workspaceId\": \"4f4e46fd476ea8c507000001\",\n  \"siteId\": \"562ac0395358780a1f5e6fbd\",\n  \"lastTriggered\": \"2023-02-08T23:59:28.572Z\",\n  \"createdOn\": \"2022-11-08T23:59:28.572Z\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks', [
  'body' => '{
  "id": "582266e0cd48de0f0e3c6d8b",
  "triggerType": "form_submission",
  "url": "https://webhook.site/7f7f7f7f-7f7f-7f7f-7f7f-7f7f7f7f7f7f",
  "workspaceId": "4f4e46fd476ea8c507000001",
  "siteId": "562ac0395358780a1f5e6fbd",
  "lastTriggered": "2023-02-08T23:59:28.572Z",
  "createdOn": "2022-11-08T23:59:28.572Z"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"id\": \"582266e0cd48de0f0e3c6d8b\",\n  \"triggerType\": \"form_submission\",\n  \"url\": \"https://webhook.site/7f7f7f7f-7f7f-7f7f-7f7f-7f7f7f7f7f7f\",\n  \"workspaceId\": \"4f4e46fd476ea8c507000001\",\n  \"siteId\": \"562ac0395358780a1f5e6fbd\",\n  \"lastTriggered\": \"2023-02-08T23:59:28.572Z\",\n  \"createdOn\": \"2022-11-08T23:59:28.572Z\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "id": "582266e0cd48de0f0e3c6d8b",
  "triggerType": "form_submission",
  "url": "https://webhook.site/7f7f7f7f-7f7f-7f7f-7f7f-7f7f7f7f7f7f",
  "workspaceId": "4f4e46fd476ea8c507000001",
  "siteId": "562ac0395358780a1f5e6fbd",
  "lastTriggered": "2023-02-08T23:59:28.572Z",
  "createdOn": "2022-11-08T23:59:28.572Z"
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/webhooks")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Remove Webhook

DELETE https://api.webflow.com/v2/webhooks/{webhook_id}

Remove a Webhook

Required scope: `sites:read`


Reference: https://developers.webflow.com/data/reference/webhooks/delete

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Remove Webhook
  version: endpoint_webhooks.delete
paths:
  /webhooks/{webhook_id}:
    delete:
      operationId: delete
      summary: Remove Webhook
      description: |
        Remove a Webhook

        Required scope: `sites:read`
      tags:
        - - subpackage_webhooks
      parameters:
        - name: webhook_id
          in: path
          description: Unique identifier for a Webhook
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Request was successful. No Content is returned.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/webhooks_delete_Response_204'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    webhooks_delete_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.webhooks.delete(
    webhook_id="580e64008c9a982ac9b8b754",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.webhooks.delete("580e64008c9a982ac9b8b754");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754"

	req, _ := http.NewRequest("DELETE", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/webhooks/580e64008c9a982ac9b8b754")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# All Events

## `form_submission`

Details about a form submission

#### Required Scope | `forms:read`

#### Properties

| Field         | Type   | Description                                                     |
| ------------- | ------ | --------------------------------------------------------------- |
| `name`        | string | The name of the form                                            |
| `siteId`      | string | The id of the site that the form was submitted from             |
| `data`        | object | The data submitted in the form (key-value pairs for each field) |
| `submittedAt` | string | The timestamp the form was submitted                            |
| `formId`      | string | The id of the form submission                                   |

#### Example Payload

```json
{
  "triggerType": "form_submission",
  "payload": {
    "name": "Contact Us",
    "siteId": "65427cf400e02b306eaa049c",
    "data": {
      "First Name": "Zaphod",
      "Last Name": "Beeblebrox",
      "email": "zaphod@heartofgold.ai",
      "Phone Number": 15550000000
    },
    "schema": [
      {
        "fieldName": "First Name",
        "fieldType": "FormTextInput",
        "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c4"
      },
      {
        "fieldName": "Last Name",
        "fieldType": "FormTextInput",
        "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c5"
      },
      {
        "fieldName": "email",
        "fieldType": "FormTextInput",
        "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c6"
      },
      {
        "fieldName": "Phone Number",
        "fieldType": "FormTextInput",
        "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c7"
      }
    ],
    "submittedAt": "2022-09-14T12:35:16.117Z",
    "id": "6321ca84df3949bfc6752327",
    "formId": "65429eadebe8a9f3a30f62d0",
    "formElementId": "4e038d2c-6a1e-4953-7be9-a59a2b453177"
  }
}
```

***

## `site_publish`

Details about a site publish event

#### Required Scope | `sites:read`

#### Properties

| Field         | Type      | Description                                         |
| ------------- | --------- | --------------------------------------------------- |
| `siteId`      | string    | The identifier for the site that was published      |
| `publishedOn` | string    | The timestamp of the publish event (ISO8601 string) |
| `domains`     | \[string] | The domains that the site was published to          |
| `publishedBy` | object    | The name of the user who published the site         |

#### Example Payload

```json
{
  "triggerType": "site_publish",
  "payload": {
    "siteId": "62749158efef318abc8d5a0f",
    "publishedOn": "2023-07-31T12:34:56.789Z",
    "domains": ["my-website.webflow.io"],
    "publishedBy": {
      "displayName": "Some One"
    }
  }
}
```

***

## `page_created`

Details about a new page event

#### Required Scope | `pages:read`

#### Properties

| Field           | Type   | Description                                                  |
| :-------------- | :----- | :----------------------------------------------------------- |
| `siteId`        | string | ID of the Site that the page is on                           |
| `pageId`        | string | ID of the new page                                           |
| `pageTitle`     | string | Title of the page                                            |
| `createdOn`     | string | Timestamp of when the page was created, as an ISO8601 string |
| `publishedPath` | string | The path of the page that was published                      |

#### Example

```json
{
  "triggerType": "page_created",
  "payload": {
    "siteId": "63499e4e6e9ed55a17e42b68",
    "pageId": "641371d477a18c936fe237cd",
    "pageTitle": "This is a New Page",
    "createdOn": "2023-03-16T19:45:24.311Z",
    "publishedPath": "/my-new-page"
  }
}
```

***

## `page_metadata_updated`

Metadata of page is updated and published.

#### Required Scope | `pages:read`

#### Properties

| Field           | Type   | Description                                                 |
| :-------------- | :----- | :---------------------------------------------------------- |
| `siteId`        | string | ID of the Site that the page is on                          |
| `pageId`        | string | ID of the updated page                                      |
| `pageTitle`     | string | Title of the page                                           |
| `lastUpdated`   | string | Timestamp of when the page was updated as an ISO8601 string |
| `publishedPath` | string | The path of the page that was updated                       |

#### Example

```json
{
  "triggerType": "page_metadata_updated",
  "payload": {
    "siteId": "63499e4e6e9ed55a17e42b68",
    "pageId": "641371d477a18c936fe237cd",
    "pageTitle": "Home",
    "lastUpdated": "2023-03-16T19:48:48.499Z",
    "publishedPath": "/"
  }
}
```

***

## `page_deleted`

The information about a deleted page

#### Required Scope | `pages:read`

#### Properties

| Field           | Type   | Description                                                 |
| :-------------- | :----- | :---------------------------------------------------------- |
| `siteId`        | string | ID of the Site that the page is on                          |
| `pageId `       | string | ID of the deleted page                                      |
| `pageTitle `    | string | Title of the page                                           |
| `deletedOn `    | string | Timestamp of when the page was deleted as an ISO8601 string |
| `publishedPath` | string | The path of the page that was deleted                       |

#### Example

```json
{
  "triggerType": "page_deleted",
  "payload": {
    "siteId": "63499e4e6e9ed55a17e42b68",
    "pageId": "63499e4e6e9ed5abbfe42b69",
    "pageTitle": "Old contact page",
    "deletedOn": "2023-03-16T19:51:33.068Z",
    "publishedPath": "/contact"
  }
}
```

***

## `ecomm_new_order`

The information about the new order

#### Required Scope | `ecommerce:read`

#### Properties

| Field               | Type                                           | Description                                                                                                                                                            |
| ------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `orderId`           | string                                         | The order id. Will usually be 6 hex characters, but can also be 9 hex characters if the site has a very large number of orders. Randomly assigned.                     |
| `status`            | string                                         | One of `pending`, `unfulfilled`, `fulfilled`, `disputed`, `dispute-lost`, or `refunded`                                                                                |
| `comment`           | string                                         | A comment string for this order editable by API user (not used by Webflow).                                                                                            |
| `orderComment`      | string                                         | A comment that the customer left when making their order                                                                                                               |
| `acceptedOn`        | string                                         | The ISO8601 timestamp that an order was placed.                                                                                                                        |
| `disputedOn`        | string                                         | If an order was disputed by the customer, then this key will be set with the ISO8601 timestamp that Stripe notifies Webflow. Null if not disputed.                     |
| `disputeUpdatedOn`  | string                                         | If an order was disputed by the customer, then this key will be set with the ISO8601 timestamp of the last time that we got an update. Null if not disputed.           |
| `disputeLastStatus` | string                                         | If an order was disputed by the customer, then this key will be set with the [dispute's status](https://stripe.com/docs/api#dispute_object-status).                    |
| `fulfilledOn`       | string                                         | If an order was marked as 'fulfilled', then this is the ISO8601 timestamp when that happened.                                                                          |
| `refundedOn`        | string                                         | If an order was refunded, this is the ISO8601 of when that happened.                                                                                                   |
| `customerPaid`      | [OrderAmount](#orderamount)                    | An instance of the [OrderAmount](#orderamount) object.                                                                                                                 |
| `netAmount`         | [OrderAmount](#orderamount)                    | An instance of the [OrderAmount](#orderamount) object.                                                                                                                 |
| `requiresShipping`  | boolean                                        | A boolean indicating whether the order contains one or more purchased items that require shipping.                                                                     |
| `shippingProvider`  | string                                         | A string editable by the API user to note the shipping provider used (not used by Webflow).                                                                            |
| `shippingTracking`  | string                                         | A string editable by the API user to note the shipping tracking number for the order (not used by Webflow).                                                            |
| `customerInfo`      | [OrderCustomerInfo](#ordercustomerinfo)        | An instance of the [OrderCustomerInfo](#ordercustomerinfo) object.                                                                                                     |
| `allAddresses`      | \[[OrderAddress](#orderaddress)]               | All addresses provided by the customer during the ordering flow.                                                                                                       |
| `shippingAddress`   | [OrderAddress](#orderaddress)                  | An instance of the [OrderAddress](#orderaddress) object.                                                                                                               |
| `billingAddress`    | [OrderAddress](#orderaddress)                  | An instance of the [OrderAddress](#orderaddress) object.                                                                                                               |
| `purchasedItems`    | \[[OrderPurchasedItem](#orderpurchaseditem)]   | An array of all things that the customer purchased.                                                                                                                    |
| `stripeDetails`     | [StripeDetails](#stripedetails)                | An instance of the [StripeDetails](#stripedetails) object.                                                                                                             |
| `stripeCard`        | [StripeCard](#stripecard)                      | An instance of the [StripeCard](#stripecard) object.                                                                                                                   |
| `totals`            | [OrderTotals](#ordertotals)                    | An instance of the [OrderTotals](#ordertotals) object.                                                                                                                 |
| `customData`        | \[object]                                      | An array of additional inputs for custom order data gathering. Each object in the array represents an input with a name, and a textInput, textArea, or checkbox value. |
| `downloadFiles`     | \[[OrderDownloadedFile](#orderdownloadedfile)] | An array of downloadable file objects.                                                                                                                                 |

#### Example Payload

```json
{
  "triggerType": "ecomm_new_order",
  "payload": {
    "orderId": "dfa-3f1",
    "status": "unfulfilled",
    "comment": "",
    "orderComment": "",
    "acceptedOn": "2018-12-03T22:06:15.761Z",
    "disputedOn": null,
    "disputeUpdatedOn": null,
    "disputeLastStatus": null,
    "fulfilledOn": null,
    "refundedOn": null,
    "customerPaid": {
      "unit": "USD",
      "value": 6099,
      "string": "$60.99"
    },
    "netAmount": {
      "unit": "USD",
      "value": 5892,
      "string": "$58.92"
    },
    "requiresShipping": true,
    "shippingProvider": null,
    "shippingTracking": null,
    "customerInfo": {
      "fullName": "Customerio Namen",
      "email": "renning+customer@webflow.com"
    },
    "allAddresses": [
      {
        "type": "billing",
        "addressee": "Customerio Namen",
        "line1": "123 Example Rd",
        "line2": "",
        "city": "Examplesville",
        "state": "CA",
        "country": "US",
        "postalCode": "90012"
      },
      {
        "type": "shipping",
        "addressee": "Customerio Namen",
        "line1": "123 Example Rd",
        "line2": "",
        "city": "Examplesville",
        "state": "CA",
        "country": "US",
        "postalCode": "90012"
      }
    ],
    "shippingAddress": {
      "type": "shipping",
      "addressee": "Customerio Namen",
      "line1": "123 Example Rd",
      "line2": "",
      "city": "Examplesville",
      "state": "CA",
      "country": "US",
      "postalCode": "90012"
    },
    "billingAddress": {
      "type": "billing",
      "addressee": "Customerio Namen",
      "line1": "123 Example Rd",
      "line2": "",
      "city": "Examplesville",
      "state": "CA",
      "country": "US",
      "postalCode": "90012"
    },
    "purchasedItems": [
      {
        "count": 1,
        "rowTotal": {
          "unit": "USD",
          "value": 5500,
          "string": "$55.00"
        },
        "productId": "5eb9fd05caef491eb9757183",
        "productName": "White Cup",
        "productSlug": "white-cup",
        "variantId": "5eb9fcace279761d8199790c",
        "variantName": "white-cup_default_sku",
        "variantSlug": "white-cup-default-sku",
        "variantImage": {
          "fileId": "5bfedb42bab0ad90fa7dad2e",
          "url": "https://dev-assets.website-files.com/5bfedb42bab0ad90fa7dac03/5bfedb42bab0ad90fa7dad2e_5bb3d019b3465c6e8a324dd7_458036-unsplas.png"
        },
        "variantPrice": {
          "unit": "USD",
          "value": 5500,
          "string": "$55.00"
        },
        "height": 7,
        "length": 2,
        "weight": 5,
        "width": 4
      }
    ],
    "purchasedItemsCount": 1,
    "stripeDetails": {
      "refundReason": null,
      "refundId": null,
      "disputeId": null,
      "chargeId": "ch_1DdPYQKMjGA7k9mI2AKiBY6u",
      "customerId": "cus_E5ajeiWNHEtcAW"
    },
    "stripeCard": {
      "last4": "4242",
      "brand": "Visa",
      "ownerName": "Customerio Namen",
      "expires": {
        "year": 2023,
        "month": 12
      }
    },
    "totals": {
      "subtotal": {
        "unit": "USD",
        "value": 5500,
        "string": "$55.00"
      },
      "extras": [
        {
          "type": "tax",
          "name": "State Taxes",
          "description": "CA Taxes (6.25%)",
          "price": {
            "unit": "USD",
            "value": 344,
            "string": "$3.44"
          }
        },
        {
          "type": "tax",
          "name": "County Taxes",
          "description": "LOS ANGELES Taxes (1.00%)",
          "price": {
            "unit": "USD",
            "value": 55,
            "string": "$0.55"
          }
        },
        {
          "type": "tax",
          "name": "Special District Taxes",
          "description": "Special District Taxes (2.25%)",
          "price": {
            "unit": "USD",
            "value": 124,
            "string": "$1.24"
          }
        },
        {
          "type": "shipping",
          "name": "Flat Rate",
          "description": "",
          "price": {
            "unit": "USD",
            "value": 599,
            "string": "$5.99"
          }
        },
        {
          "type": "discount",
          "name": "Discount (SAVE5)",
          "description": "",
          "price": {
            "unit": "USD",
            "value": -500,
            "string": "-$ 5.00 USD"
          }
        }
      ],
      "total": {
        "unit": "USD",
        "value": 6122,
        "string": "$61.22"
      }
    },
    "customData": [
      {
        "textInput": "(415) 123-4567",
        "name": "Telephone"
      },
      {
        "textArea": "Happy birthday Mom!",
        "name": "Gift note"
      },
      {
        "checkbox": true,
        "name": "Send as gift"
      }
    ],
    "downloadFiles": [
      {
        "id": "5e9a5eba75e0ac242e1b6f64",
        "name": "The modern web design process - Webflow Ebook.pdf",
        "url": "https://webflow.com/dashboard/download-digital-product?payload=5d93ba5e38c6b0160ab711d3;e7634a;5eb1aac72912ec06f561278c;5e9a5eba75e0ac242e1b6f63:ka2nehxy:4a1ee0a632feaab94294350087215ed89533f2f530903e3b933b638940e921aa"
      },
      {
        "id": "5e9a5eba75e0ac242e1b6f63",
        "name": "The freelance web designers guide - Webflow Ebook.pdf",
        "url": "https://webflow.com/dashboard/download-digital-product?payload=5d93ba5e38c6b0160ab711d3;e7634a;5dd44c493543b37d5449b3cd;5e9a5eba75e0ac242e1b6f63:ka2nehxy:6af5adf7c6fff7a3b0f54404fac1be492ac6f1ed5340416f1fe27c5fd4dd8079"
      }
    ]
  }
}
```

***

## `ecomm_order_changed`

The information about the order that changed

#### Required Scope | `ecommerce:read`

#### Properties

| Field               | Type                                           | Description                                                                                                                                                            |
| ------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `orderId`           | string                                         | The order id. Will usually be 6 hex characters, but can also be 9 hex characters if the site has a very large number of orders. Randomly assigned.                     |
| `status`            | string                                         | One of `pending`, `unfulfilled`, `fulfilled`, `disputed`, `dispute-lost`, or `refunded`                                                                                |
| `comment`           | string                                         | A comment string for this order editable by API user (not used by Webflow).                                                                                            |
| `orderComment`      | string                                         | A comment that the customer left when making their order                                                                                                               |
| `acceptedOn`        | string                                         | The ISO8601 timestamp that an order was placed.                                                                                                                        |
| `disputedOn`        | string                                         | If an order was disputed by the customer, then this key will be set with the ISO8601 timestamp that Stripe notifies Webflow. Null if not disputed.                     |
| `disputeUpdatedOn`  | string                                         | If an order was disputed by the customer, then this key will be set with the ISO8601 timestamp of the last time that we got an update. Null if not disputed.           |
| `disputeLastStatus` | string                                         | If an order was disputed by the customer, then this key will be set with the [dispute's status](https://stripe.com/docs/api#dispute_object-status).                    |
| `fulfilledOn`       | string                                         | If an order was marked as 'fulfilled', then this is the ISO8601 timestamp when that happened.                                                                          |
| `refundedOn`        | string                                         | If an order was refunded, this is the ISO8601 of when that happened.                                                                                                   |
| `customerPaid`      | [OrderAmount](#orderamount)                    | An instance of the [OrderAmount](#orderamount) object.                                                                                                                 |
| `netAmount`         | [OrderAmount](#orderamount)                    | An instance of the [OrderAmount](#orderamount) object.                                                                                                                 |
| `requiresShipping`  | boolean                                        | A boolean indicating whether the order contains one or more purchased items that require shipping.                                                                     |
| `shippingProvider`  | string                                         | A string editable by the API user to note the shipping provider used (not used by Webflow).                                                                            |
| `shippingTracking`  | string                                         | A string editable by the API user to note the shipping tracking number for the order (not used by Webflow).                                                            |
| `customerInfo`      | [OrderCustomerInfo](#ordercustomerinfo)        | An instance of the [OrderCustomerInfo](#ordercustomerinfo) object.                                                                                                     |
| `allAddresses`      | \[[OrderAddress](#orderaddress)]               | All addresses provided by the customer during the ordering flow.                                                                                                       |
| `shippingAddress`   | [OrderAddress](#orderaddress)                  | An instance of the [OrderAddress](#orderaddress) object.                                                                                                               |
| `billingAddress`    | [OrderAddress](#orderaddress)                  | An instance of the [OrderAddress](#orderaddress) object.                                                                                                               |
| `purchasedItems`    | \[[OrderPurchasedItem](#orderpurchaseditem)]   | An array of all things that the customer purchased.                                                                                                                    |
| `stripeDetails`     | [StripeDetails](#stripedetails)                | An instance of the [StripeDetails](#stripedetails) object.                                                                                                             |
| `stripeCard`        | [StripeCard](#stripecard)                      | An instance of the [StripeCard](#stripecard) object.                                                                                                                   |
| `totals`            | [OrderTotals](#ordertotals)                    | An instance of the [OrderTotals](#ordertotals) object.                                                                                                                 |
| `customData`        | \[object]                                      | An array of additional inputs for custom order data gathering. Each object in the array represents an input with a name, and a textInput, textArea, or checkbox value. |
| `downloadFiles`     | \[[OrderDownloadedFile](#orderdownloadedfile)] | An array of downloadable file objects.                                                                                                                                 |

#### Example Payload

```json
{
  "triggerType": "ecomm_order_changed",
  "payload": {
    "orderId": "dfa-3f1",
    "status": "unfulfilled",
    "comment": "",
    "orderComment": "",
    "acceptedOn": "2018-12-03T22:06:15.761Z",
    "disputedOn": null,
    "disputeUpdatedOn": null,
    "disputeLastStatus": null,
    "fulfilledOn": null,
    "refundedOn": null,
    "customerPaid": {
      "unit": "USD",
      "value": 6099,
      "string": "$60.99"
    },
    "netAmount": {
      "unit": "USD",
      "value": 5892,
      "string": "$58.92"
    },
    "requiresShipping": true,
    "shippingProvider": null,
    "shippingTracking": null,
    "customerInfo": {
      "fullName": "Customerio Namen",
      "email": "renning+customer@webflow.com"
    },
    "allAddresses": [
      {
        "type": "billing",
        "addressee": "Customerio Namen",
        "line1": "123 Example Rd",
        "line2": "",
        "city": "Examplesville",
        "state": "CA",
        "country": "US",
        "postalCode": "90012"
      },
      {
        "type": "shipping",
        "addressee": "Customerio Namen",
        "line1": "123 Example Rd",
        "line2": "",
        "city": "Examplesville",
        "state": "CA",
        "country": "US",
        "postalCode": "90012"
      }
    ],
    "shippingAddress": {
      "type": "shipping",
      "addressee": "Customerio Namen",
      "line1": "123 Example Rd",
      "line2": "",
      "city": "Examplesville",
      "state": "CA",
      "country": "US",
      "postalCode": "90012"
    },
    "billingAddress": {
      "type": "billing",
      "addressee": "Customerio Namen",
      "line1": "123 Example Rd",
      "line2": "",
      "city": "Examplesville",
      "state": "CA",
      "country": "US",
      "postalCode": "90012"
    },
    "purchasedItems": [
      {
        "count": 1,
        "rowTotal": {
          "unit": "USD",
          "value": 5500,
          "string": "$55.00"
        },
        "productId": "5eb9fd05caef491eb9757183",
        "productName": "White Cup",
        "productSlug": "white-cup",
        "variantId": "5eb9fcace279761d8199790c",
        "variantName": "white-cup_default_sku",
        "variantSlug": "white-cup-default-sku",
        "variantImage": {
          "fileId": "5bfedb42bab0ad90fa7dad2e",
          "url": "https://dev-assets.website-files.com/5bfedb42bab0ad90fa7dac03/5bfedb42bab0ad90fa7dad2e_5bb3d019b3465c6e8a324dd7_458036-unsplas.png"
        },
        "variantPrice": {
          "unit": "USD",
          "value": 5500,
          "string": "$55.00"
        },
        "height": 7,
        "length": 2,
        "weight": 5,
        "width": 4
      }
    ],
    "purchasedItemsCount": 1,
    "stripeDetails": {
      "refundReason": null,
      "refundId": null,
      "disputeId": null,
      "chargeId": "ch_1DdPYQKMjGA7k9mI2AKiBY6u",
      "customerId": "cus_E5ajeiWNHEtcAW"
    },
    "stripeCard": {
      "last4": "4242",
      "brand": "Visa",
      "ownerName": "Customerio Namen",
      "expires": {
        "year": 2023,
        "month": 12
      }
    },
    "totals": {
      "subtotal": {
        "unit": "USD",
        "value": 5500,
        "string": "$55.00"
      },
      "extras": [
        {
          "type": "tax",
          "name": "State Taxes",
          "description": "CA Taxes (6.25%)",
          "price": {
            "unit": "USD",
            "value": 344,
            "string": "$3.44"
          }
        },
        {
          "type": "tax",
          "name": "County Taxes",
          "description": "LOS ANGELES Taxes (1.00%)",
          "price": {
            "unit": "USD",
            "value": 55,
            "string": "$0.55"
          }
        },
        {
          "type": "tax",
          "name": "Special District Taxes",
          "description": "Special District Taxes (2.25%)",
          "price": {
            "unit": "USD",
            "value": 124,
            "string": "$1.24"
          }
        },
        {
          "type": "shipping",
          "name": "Flat Rate",
          "description": "",
          "price": {
            "unit": "USD",
            "value": 599,
            "string": "$5.99"
          }
        },
        {
          "type": "discount",
          "name": "Discount (SAVE5)",
          "description": "",
          "price": {
            "unit": "USD",
            "value": -500,
            "string": "-$ 5.00 USD"
          }
        }
      ],
      "total": {
        "unit": "USD",
        "value": 6122,
        "string": "$61.22"
      }
    },
    "customData": [
      {
        "textInput": "(415) 123-4567",
        "name": "Telephone"
      },
      {
        "textArea": "Happy birthday Mom!",
        "name": "Gift note"
      },
      {
        "checkbox": true,
        "name": "Send as gift"
      }
    ],
    "downloadFiles": [
      {
        "id": "5e9a5eba75e0ac242e1b6f64",
        "name": "The modern web design process - Webflow Ebook.pdf",
        "url": "https://webflow.com/dashboard/download-digital-product?payload=5d93ba5e38c6b0160ab711d3;e7634a;5eb1aac72912ec06f561278c;5e9a5eba75e0ac242e1b6f63:ka2nehxy:4a1ee0a632feaab94294350087215ed89533f2f530903e3b933b638940e921aa"
      },
      {
        "id": "5e9a5eba75e0ac242e1b6f63",
        "name": "The freelance web designers guide - Webflow Ebook.pdf",
        "url": "https://webflow.com/dashboard/download-digital-product?payload=5d93ba5e38c6b0160ab711d3;e7634a;5dd44c493543b37d5449b3cd;5e9a5eba75e0ac242e1b6f63:ka2nehxy:6af5adf7c6fff7a3b0f54404fac1be492ac6f1ed5340416f1fe27c5fd4dd8079"
      }
    ]
  }
}
```

***

## `ecomm_inventory_changed`

The information about the inventory item that changed

#### Required Scope | `ecommerce:read`

#### Properties

| Field           | Type   | Description                                                |
| --------------- | ------ | ---------------------------------------------------------- |
| `id`            | string | Unique identifier for a SKU item                           |
| `quantity`      | number | Total quantity of items remaining in inventory (if finite) |
| `inventoryType` | string | String enum of `infinite` or `finite`                      |

#### Example Payload

```json
{
  "triggerType": "ecomm_inventory_changedr",
  "payload": {
    "id": "5bfedb42bab0ad90fa7dad39",
    "quantity": 83,
    "inventoryType": "finite"
  }
}
```

***

## `user_account_added`

The information about the user account that was added

#### Required Scope | `users:read`

#### Properties

| Field             | Type    | Description                                                 |
| :---------------- | :------ | :---------------------------------------------------------- |
| `id `             | string  | Unique identifier for the User                              |
| `isEmailVerified` | boolean | Indicates whether the user has verified their email address |
| `lastUpdated `    | string  | The timestamp the user was updated                          |
| `createdOn `      | string  | The timestamp the user was created                          |
| `status`          | string  | The status of the user                                      |

#### Example Payload

```json
{
  "triggerType": "user_account_added",
  "payload": {
    "id": "6287ec36a841b25637c663df",
    "isEmailVerified": true,
    "lastUpdated": "2022-05-20T13:46:12.093Z",
    "createdOn": "2022-05-20T13:46:12.093Z",
    "status": "verified",
    "accessGroups": [
      {
        "slug": "webflowers",
        "type": "admin"
      }
    ],
    "data": {
      "accept-privacy": false,
      "accept-communications": false,
      "email": "Some.One@home.com",
      "name": "Some One"
    }
  }
}
```

***

## `user_account_updated`

The information about the user account that was updated

#### Required Scope | `users:read`

#### Properties

| Field             | Type    | Description                                                 |
| :---------------- | :------ | :---------------------------------------------------------- |
| `id `             | string  | Unique identifier for the User                              |
| `isEmailVerified` | boolean | Indicates whether the user has verified their email address |
| `lastUpdated `    | string  | The timestamp the user was updated                          |
| `createdOn `      | string  | The timestamp the user was created                          |
| `status`          | string  | The status of the user                                      |
| `accessGroups`    | array   | A list of access groups the user belongs to                 |

#### Example Payload

```json
{
  "triggerType": "user_account_updated",
  "payload": {
    "id": "6287ec36a841b25637c663df",
    "isEmailVerified": true,
    "lastUpdated": "2022-05-20T13:46:12.093Z",
    "createdOn": "2022-05-20T13:46:12.093Z",
    "status": "verified",
    "accessGroups": [
      {
        "slug": "webflowers",
        "type": "admin"
      }
    ],
    "data": {
      "accept-privacy": false,
      "accept-communications": false,
      "email": "Some.One@home.com",
      "name": "Some One"
    }
  }
}
```

***

## `user_account_deleted`

The information about the user account that was deleted

#### Required Scope | `users:read`

#### Properties

| Field             | Type    | Description                                                 |
| :---------------- | :------ | :---------------------------------------------------------- |
| `id `             | string  | Unique identifier for the User                              |
| `isEmailVerified` | boolean | Indicates whether the user has verified their email address |
| `lastUpdated `    | string  | The timestamp the user was updated                          |
| `createdOn `      | string  | The timestamp the user was created                          |
| `status`          | string  | The status of the user                                      |
| `accessGroups`    | array   | A list of access groups the user belongs to                 |

#### Example Payload

```json
{
  "triggerType": "user_account_deleted",
  "payload": {
    "id": "6287ec36a841b25637c663df",
    "isEmailVerified": true,
    "lastUpdated": "2022-05-20T13:46:12.093Z",
    "createdOn": "2022-05-20T13:46:12.093Z",
    "status": "verified",
    "accessGroups": [
      {
        "slug": "webflowers",
        "type": "admin"
      }
    ],
    "data": {
      "accept-privacy": false,
      "accept-communications": false,
      "email": "Some.One@home.com",
      "name": "Some One"
    }
  }
}
```

***

## `collection_item_created`

The information about the collection item that was created

#### Required Scope | `cms:read`

#### Properties

| Field           | Type    | Description                                                                                                                                                        |
| :-------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id `           | string  | Unique identifier for the Item                                                                                                                                     |
| `siteId`        | string  | Unique identifier for the Site where the Collection lives                                                                                                          |
| `workspaceId`   | string  | Unique identifier for the Workspace where the Site lives                                                                                                           |
| `collectionId`  | string  | Unique identifier for the Collection                                                                                                                               |
| `lastPublished` | string  | Date and time of when the item was last published, will be null if the item has never been published.                                                              |
| `lastUpdated`   | string  | Date and time of when the item was last updated                                                                                                                    |
| `createdOn`     | string  | Date and time of when the item was created                                                                                                                         |
| `isArchived `   | boolean | Boolean determining if the Item is set to archived                                                                                                                 |
| `isDraft `      | boolean | Boolean determining if the Item is set to draft                                                                                                                    |
| `fieldData `    | object  | Object containing the item details structured within the Collection's schema. If the item is localized, an object with item data for each locale will be returned. |

#### Example Payload

<Tabs>
  <Tab title="Single Locale">
    ```json
    {
      "triggerType": "collection_item_created",
      "payload": {
        "id": "582b900cba19143b2bb8a759",
        "siteId": "1111111",
        "workspaceId": "1111111",
        "collectionId": "1111111",
        "lastPublished": null,
        "lastUpdated": "2023-03-27T22:26:40.926Z",
        "createdOn": "2023-03-27T22:26:40.926Z",
        "archived": false,
        "draft": true,
        // depends on the field schema
        "fieldData": {
          "name": "hello world",
          "slug": "hello-world",
          "favoriteColor": "#ff00ff"
        }
      }
    }
    ```
  </Tab>

  <Tab title="Multiple Locales">
    ```json
    {
      "triggerType": "collection_item_created",
      "payload": {
        "siteId": "6258612d1ee792848f805dcf",
        "workspaceId": "625860a7a6c16d624927122f",
        "collectionId": "663a4a39d10b271e8f4b38cd",
        "fieldData": {
          "0": {
            "_cid": "663a4a39d10b271e8f4b38cd",
            "_id": "6744b7d0e4ce33f6c3fa789a",
            "_locale": "653ad57de882f528b32e810e",
            "_draft": false,
            "_archived": false,
            "name": "New Item",
            "slug": "new-item",
            "updated-on": "2024-11-25T17:45:52.447Z",
            "updated-by": "Person_63209baeac0b804b455624ce",
            "created-on": "2024-11-25T17:45:52.447Z",
            "created-by": "Person_63209baeac0b804b455624ce",
            "published-on": null,
            "published-by": null
          },
          "1": {
            "_cid": "663a4a39d10b271e8f4b38cd",
            "_id": "6744b7d0e4ce33f6c3fa789a",
            "_locale": "653fd9af6a07fc9cfd7a5e5d",
            "_draft": false,
            "_archived": false,
            "name": "New Item",
            "slug": "new-item",
            "updated-on": "2024-11-25T17:45:52.447Z",
            "updated-by": "Person_63209baeac0b804b455624ce",
            "created-on": "2024-11-25T17:45:52.447Z",
            "created-by": "Person_63209baeac0b804b455624ce",
            "published-on": null,
            "published-by": null
          },
          "2": {
            "_cid": "663a4a39d10b271e8f4b38cd",
            "_id": "6744b7d0e4ce33f6c3fa789a",
            "_locale": "654112a3a525b2739d97664f",
            "_draft": false,
            "_archived": false,
            "name": "New Item",
            "slug": "new-item",
            "updated-on": "2024-11-25T17:45:52.447Z",
            "updated-by": "Person_63209baeac0b804b455624ce",
            "created-on": "2024-11-25T17:45:52.447Z",
            "created-by": "Person_63209baeac0b804b455624ce",
            "published-on": null,
            "published-by": null
          }
        }
      }
    } 
    ```
  </Tab>
</Tabs>

***

## `collection_item_changed`

The information about the collection item that was changed

#### Required Scope | `cms:read`

#### Properties

| Field           | Type    | Description                                                                                           |
| :-------------- | :------ | :---------------------------------------------------------------------------------------------------- |
| `id `           | string  | Unique identifier for the Item                                                                        |
| `siteId`        | string  | Unique identifier for the Site where the Collection lives                                             |
| `workspaceId`   | string  | Unique identifier for the Workspace where the Site lives                                              |
| `collectionId`  | string  | Unique identifier for the Collection                                                                  |
| `lastPublished` | string  | Date and time of when the item was last published, will be null if the item has never been published. |
| `lastUpdated`   | string  | Date and time of when the item was last updated                                                       |
| `createdOn`     | string  | Date and time of when the item was created                                                            |
| `isArchived `   | boolean | Boolean determining if the Item is set to archived                                                    |
| `isDraft `      | boolean | Boolean determining if the Item is set to draft                                                       |
| `fieldData`     | object  | Object containing the item details structured within the Collection's schema.                         |

#### Example Payload

<Tabs>
  <Tab title="Single Locale">
    ```json
    {
      "triggerType": "collection_item_changed",
      "payload": {
        "id": "582b900cba19143b2bb8a759",
        "siteId": "1111111",
        "workspaceId": "1111111",
        "collectionId": "1111111",
        "lastPublished": null,
        "lastUpdated": "2023-03-27T22:26:40.926Z",
        "createdOn": "2023-03-27T22:26:40.926Z",
        "archived": false,
        "draft": true,
        "fieldData": {
          "name": "hello world",
          "slug": "hello-world",
          "favoriteColor": "#ff00ff"
        }
      }
    }
    ```
  </Tab>

  <Tab title="Multiple Locales">
    <Note title="Multiple Locales">
      If you edit an object across multiple locales, the Webhook will trigger for each locale.
    </Note>

    ```json
    {
      "triggerType": "collection_item_changed",
      "payload": {
        "id": "582b900cba19143b2bb8a759",
        "siteId": "1111111",
        "workspaceId": "1111111",
        "collectionId": "1111111",
        "lastPublished": null,
        "lastUpdated": "2023-03-27T22:26:40.926Z",
        "createdOn": "2023-03-27T22:26:40.926Z",
        "archived": false,
        "draft": true,
        "fieldData": {
          "_locale": "653ad57de882f528b32e810e",
          "name": "hello world",
          "slug": "hello-world",
          "favoriteColor": "#ff00ff"
        }
      }
    }
    ```
  </Tab>
</Tabs>

***

## `collection_item_deleted`

The results from deleting the collection item

#### Required Scope | `cms:read`

#### Properties

| Field          | Type   | Description                                                         |
| :------------- | :----- | :------------------------------------------------------------------ |
| `id`           | string | The unique identifier of the collection item that was deleted       |
| `siteId `      | string | The unique identifier of the Site the Collection belongs to         |
| `workspaceId`  | string | The unique identifier of the Workspace the related Site belongs to  |
| `collectionId` | string | The unique identifier of the Collection the deleted item belongs to |

#### Example Payload

<Note title="Multiple Locales">
  If you delete an object across multiple locales, the Webhook will trigger for each locale.
</Note>

```json
{
  "triggerType": "collection_item_deleted",
  "payload": {
    "id": "647f35d49f499fe22e6dc173",
    "siteId": "63692ab61fb28552c22ba8e3",
    "workspaceId": "63499d0dd2f3b4e46108efa3",
    "collectionId": "63692ab61fb285e2ff2ba8f3"
  }
}
```

***

## `collection_item_unpublished`

The results from unpublishing the collection item

#### Required Scope | `cms:read`

#### Properties

| Field         | Type   | Description                                                        |
| :------------ | :----- | :----------------------------------------------------------------- |
| `id`          | string | The unique identifier of the collection item that was deleted      |
| `siteId `     | string | The unique identifier of the Site the Collection belongs to        |
| `workspaceId` | string | The unique identifier of the Workspace the related Site belongs to |

#### Example Payload

```json
{
  "triggerType": "collection_item_unpublished",
  "payload": {
    "id": "647f35d49f499fe22e6dc173",
    "siteId": "63692ab61fb28552c22ba8e3",
    "workspaceId": "63499d0dd2f3b4e46108efa3",
    "collectionId": "63692ab61fb285e2ff2ba8f3"
  }
}
```

---

# Form Submission

POST 

Information about a form that was subitted

Reference: https://developers.webflow.com/data/reference/webhooks/events/form-submission

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Form Submission
  version: subpackage_forms.form_submission
webhooks:
  form-submission:
    post:
      operationId: form-submission
      summary: Form Submission
      description: Information about a form that was subitted
      tags:
        - subpackage_forms
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  type: string
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksFormSubmissionPayloadContentApplicationJsonSchemaPayload
                  description: The payload of data sent from Webflow
components:
  schemas:
    WebhooksFormSubmissionPayloadContentApplicationJsonSchemaPayloadData:
      type: object
      properties: {}
    WebhooksFormSubmissionPayloadContentApplicationJsonSchemaPayloadSchemaItemsFieldType:
      type: string
      enum:
        - value: FormTextInput
        - value: FormTextarea
        - value: FormCheckboxInput
        - value: FormRadioInput
        - value: FormFileUploadInput
    WebhooksFormSubmissionPayloadContentApplicationJsonSchemaPayloadSchemaItems:
      type: object
      properties:
        fieldName:
          type: string
          description: Form field name
        fieldType:
          $ref: >-
            #/components/schemas/WebhooksFormSubmissionPayloadContentApplicationJsonSchemaPayloadSchemaItemsFieldType
          description: Form field type
        fieldElementId:
          type: string
          format: UUID
          description: Element ID of the Form Field
    WebhooksFormSubmissionPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        name:
          type: string
          description: The name of the form
        siteId:
          type: string
          format: objectid
          description: The ID of the site that the form was submitted from
        data:
          $ref: >-
            #/components/schemas/WebhooksFormSubmissionPayloadContentApplicationJsonSchemaPayloadData
          description: The data submitted in the form
        schema:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksFormSubmissionPayloadContentApplicationJsonSchemaPayloadSchemaItems
          description: A list of fields from the submitted form
        submittedAt:
          type: string
          description: The timestamp the form was submitted
        id:
          type: string
          description: the ID of the event
        formId:
          type: string
          format: objectid
          description: The ID of the form submission
        formElementId:
          type:
            - string
            - 'null'
          description: The uniqueID of the Form element

```

---

# Site Publish

POST 

Information about a site that was published

Reference: https://developers.webflow.com/data/reference/webhooks/events/site-publish

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Site Publish
  version: subpackage_sites.site_publish
webhooks:
  site-publish:
    post:
      operationId: site-publish
      summary: Site Publish
      description: Information about a site that was published
      tags:
        - subpackage_sites
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  type: string
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksSitePublishPayloadContentApplicationJsonSchemaPayload
                  description: The payload of data sent from Webflow
components:
  schemas:
    WebhooksSitePublishPayloadContentApplicationJsonSchemaPayloadPublishedBy:
      type: object
      properties: {}
    WebhooksSitePublishPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        siteId:
          type: string
          format: objectid
          description: The ID of the site that was published
        publishedOn:
          type: string
          format: date-time
          description: The timestamp of the publish event
        domains:
          type: array
          items:
            type: string
          description: The domains that were published
        publishedBy:
          $ref: >-
            #/components/schemas/WebhooksSitePublishPayloadContentApplicationJsonSchemaPayloadPublishedBy
          description: The name andID of the user who published the site

```

---

# Page Created

POST 

Information about a new pages

Reference: https://developers.webflow.com/data/reference/webhooks/events/page-created

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Page Created
  version: subpackage_pages.page_created
webhooks:
  page-created:
    post:
      operationId: page-created
      summary: Page Created
      description: Information about a new pages
      tags:
        - subpackage_pages
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  type: string
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksPageCreatedPayloadContentApplicationJsonSchemaPayload
                  description: The payload of data sent from Webflow
components:
  schemas:
    WebhooksPageCreatedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        siteId:
          type: string
          format: objectid
        pageId:
          type: string
          format: objectid
        pageTitle:
          type: string
        createdOn:
          type: string
          format: date-time
        publishedPath:
          type: string

```

---

# Page Metadata Updated

POST 

Information about a page's updated metadata and/or settings

Reference: https://developers.webflow.com/data/reference/webhooks/events/page-metadata-updated

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Page Metadata Updated
  version: subpackage_pages.page_metadata_updated
webhooks:
  page-metadata-updated:
    post:
      operationId: page-metadata-updated
      summary: Page Metadata Updated
      description: Information about a page's updated metadata and/or settings
      tags:
        - subpackage_pages
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  type: string
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksPageMetadataUpdatedPayloadContentApplicationJsonSchemaPayload
                  description: The payload of data sent from Webflow
components:
  schemas:
    WebhooksPageMetadataUpdatedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        siteId:
          type: string
          format: objectid
        pageId:
          type: string
          format: objectid
        pageTitle:
          type: string
        lastUpdated:
          type: string
          format: date-time
        publishedPath:
          type: string

```

---

# Page Deleted

POST 

Information about a page that was deleted

Reference: https://developers.webflow.com/data/reference/webhooks/events/page-deleted

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Page Deleted
  version: subpackage_pages.page_deleted
webhooks:
  page-deleted:
    post:
      operationId: page-deleted
      summary: Page Deleted
      description: Information about a page that was deleted
      tags:
        - subpackage_pages
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  type: string
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksPageDeletedPayloadContentApplicationJsonSchemaPayload
                  description: The payload of data sent from Webflow
components:
  schemas:
    WebhooksPageDeletedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        siteId:
          type: string
          format: objectid
        pageId:
          type: string
          format: objectid
        pageTitle:
          type: string
        deletedOn:
          type: string
          format: date-time
        publishedPath:
          type: string

```

---

# Collection Item Created

POST 

Information about a new collection item

Reference: https://developers.webflow.com/data/reference/webhooks/events/collection-item-created

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Collection Item Created
  version: subpackage_items.collection_item_created
webhooks:
  collection-item-created:
    post:
      operationId: collection-item-created
      summary: Collection Item Created
      description: Information about a new collection item
      tags:
        - subpackage_items
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  $ref: >-
                    #/components/schemas/WebhooksCollectionItemCreatedPayloadContentApplicationJsonSchemaTriggerType
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksCollectionItemCreatedPayloadContentApplicationJsonSchemaPayload
              required:
                - triggerType
                - payload
components:
  schemas:
    WebhooksCollectionItemCreatedPayloadContentApplicationJsonSchemaTriggerType:
      type: string
      enum:
        - value: collection_item_created
    WebhooksCollectionItemCreatedPayloadContentApplicationJsonSchemaPayloadFieldData:
      type: object
      properties:
        name:
          type: string
        slug:
          type: string
      required:
        - name
        - slug
    WebhooksCollectionItemCreatedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        id:
          type: string
          format: uuid
          description: Unique identifier for the Item
        workspaceId:
          type: string
          format: uuid
          description: Unique identifier of the workspace
        siteId:
          type: string
          format: uuid
          description: Unique identifier of the site
        collectionId:
          type: string
          format: uuid
          description: Unique identifier of the collection
        cmsLocaleId:
          type:
            - string
            - 'null'
          format: uuid
          description: Unique identifier of the CMS locale for this item
        lastPublished:
          type:
            - string
            - 'null'
          format: date-time
        lastUpdated:
          type: string
          format: date-time
        createdOn:
          type: string
          format: date-time
        isArchived:
          type: boolean
        isDraft:
          type: boolean
        fieldData:
          $ref: >-
            #/components/schemas/WebhooksCollectionItemCreatedPayloadContentApplicationJsonSchemaPayloadFieldData
      required:
        - id
        - workspaceId
        - siteId
        - collectionId
        - fieldData

```

---

# Collection Item Updated

POST 

Information about an updated collection item

Reference: https://developers.webflow.com/data/reference/webhooks/events/collection-item-changed

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Collection Item Updated
  version: subpackage_items.collection_item_changed
webhooks:
  collection-item-changed:
    post:
      operationId: collection-item-changed
      summary: Collection Item Updated
      description: Information about an updated collection item
      tags:
        - subpackage_items
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  $ref: >-
                    #/components/schemas/WebhooksCollectionItemChangedPayloadContentApplicationJsonSchemaTriggerType
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksCollectionItemChangedPayloadContentApplicationJsonSchemaPayload
              required:
                - triggerType
                - payload
components:
  schemas:
    WebhooksCollectionItemChangedPayloadContentApplicationJsonSchemaTriggerType:
      type: string
      enum:
        - value: collection_item_changed
    WebhooksCollectionItemChangedPayloadContentApplicationJsonSchemaPayloadFieldData:
      type: object
      properties:
        name:
          type: string
        slug:
          type: string
      required:
        - name
        - slug
    WebhooksCollectionItemChangedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        id:
          type: string
          format: uuid
          description: Unique identifier for the Item
        workspaceId:
          type: string
          format: uuid
          description: Unique identifier of the workspace
        siteId:
          type: string
          format: uuid
          description: Unique identifier of the site
        collectionId:
          type: string
          format: uuid
          description: Unique identifier of the collection
        cmsLocaleId:
          type:
            - string
            - 'null'
          format: uuid
          description: Unique identifier of the CMS locale for this item
        lastPublished:
          type:
            - string
            - 'null'
          format: date-time
        lastUpdated:
          type: string
          format: date-time
        createdOn:
          type: string
          format: date-time
        isArchived:
          type: boolean
        isDraft:
          type: boolean
        fieldData:
          $ref: >-
            #/components/schemas/WebhooksCollectionItemChangedPayloadContentApplicationJsonSchemaPayloadFieldData
      required:
        - id
        - workspaceId
        - siteId
        - collectionId
        - fieldData

```

---

# Collection Item Deleted

POST 

Information about a deleted collection item

Reference: https://developers.webflow.com/data/reference/webhooks/events/collection-item-deleted

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Collection Item Deleted
  version: subpackage_items.collection_item_deleted
webhooks:
  collection-item-deleted:
    post:
      operationId: collection-item-deleted
      summary: Collection Item Deleted
      description: Information about a deleted collection item
      tags:
        - subpackage_items
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  type: string
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksCollectionItemDeletedPayloadContentApplicationJsonSchemaPayload
                  description: The payload of data sent from Webflow
components:
  schemas:
    WebhooksCollectionItemDeletedPayloadContentApplicationJsonSchemaPayloadFieldData:
      type: object
      properties:
        name:
          type: string
        slug:
          type: string
      required:
        - name
        - slug
    WebhooksCollectionItemDeletedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: The ID of the collection item that was deleted
        siteId:
          type: string
          format: objectid
          description: The ID of the site
        workspaceId:
          type: string
          format: objectid
          description: The ID of the workspace
        collectionId:
          type: string
          format: objectid
          description: The ID of the collection
        cmsLocaleId:
          type: string
          format: uuid
          description: Unique identifier of the CMS locale for this item
        lastPublished:
          type:
            - string
            - 'null'
          format: date-time
        lastUpdated:
          type: string
          format: date-time
        createdOn:
          type: string
          format: date-time
        isArchived:
          type: boolean
        isDraft:
          type: boolean
        fieldData:
          $ref: >-
            #/components/schemas/WebhooksCollectionItemDeletedPayloadContentApplicationJsonSchemaPayloadFieldData

```

---

# Collection Item Published

POST 

Information about a collection item that was published

Reference: https://developers.webflow.com/data/reference/webhooks/events/collection-item-published

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Collection Item Published
  version: subpackage_items.collection_item_published
webhooks:
  collection-item-published:
    post:
      operationId: collection-item-published
      summary: Collection Item Published
      description: Information about a collection item that was published
      tags:
        - subpackage_items
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  type: string
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksCollectionItemPublishedPayloadContentApplicationJsonSchemaPayload
                  description: The payload of data sent from Webflow
components:
  schemas:
    WebhooksCollectionItemPublishedPayloadContentApplicationJsonSchemaPayloadFieldData:
      type: object
      properties:
        name:
          type: string
        slug:
          type: string
      required:
        - name
        - slug
    WebhooksCollectionItemPublishedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: The ID of the collection item that was unpublished
        siteId:
          type: string
          format: objectid
          description: The ID of the site
        workspaceId:
          type: string
          format: objectid
          description: The ID of the workspace
        collectionId:
          type: string
          format: objectid
          description: The ID of the collection
        cmsLocaleId:
          type:
            - string
            - 'null'
          format: uuid
          description: Unique identifier of the CMS locale for this item
        lastPublished:
          type:
            - string
            - 'null'
          format: date-time
        lastUpdated:
          type: string
          format: date-time
        createdOn:
          type: string
          format: date-time
        isArchived:
          type: boolean
        isDraft:
          type: boolean
        fieldData:
          $ref: >-
            #/components/schemas/WebhooksCollectionItemPublishedPayloadContentApplicationJsonSchemaPayloadFieldData

```

---

# Collection Item Unpublished

POST 

Information about a collection item that was removed from the live site

Reference: https://developers.webflow.com/data/reference/webhooks/events/collection-item-unpublished

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Collection Item Unpublished
  version: subpackage_items.collection_item_unpublished
webhooks:
  collection-item-unpublished:
    post:
      operationId: collection-item-unpublished
      summary: Collection Item Unpublished
      description: Information about a collection item that was removed from the live site
      tags:
        - subpackage_items
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  type: string
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksCollectionItemUnpublishedPayloadContentApplicationJsonSchemaPayload
                  description: The payload of data sent from Webflow
components:
  schemas:
    WebhooksCollectionItemUnpublishedPayloadContentApplicationJsonSchemaPayloadFieldData:
      type: object
      properties:
        name:
          type: string
        slug:
          type: string
      required:
        - name
        - slug
    WebhooksCollectionItemUnpublishedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: The ID of the collection item that was unpublished
        siteId:
          type: string
          format: objectid
          description: The ID of the site
        workspaceId:
          type: string
          format: objectid
          description: The ID of the workspace
        collectionId:
          type: string
          format: objectid
          description: The ID of the collection
        cmsLocaleId:
          type:
            - string
            - 'null'
          format: uuid
          description: Unique identifier of the CMS locale for this item
        lastPublished:
          type:
            - string
            - 'null'
          format: date-time
        lastUpdated:
          type: string
          format: date-time
        createdOn:
          type: string
          format: date-time
        isArchived:
          type: boolean
        isDraft:
          type: boolean
        fieldData:
          $ref: >-
            #/components/schemas/WebhooksCollectionItemUnpublishedPayloadContentApplicationJsonSchemaPayloadFieldData

```

---

# New User Added

POST 

Information about a new user account

Reference: https://developers.webflow.com/data/reference/webhooks/events/user-account-added

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: New User Added
  version: subpackage_users.user_account_added
webhooks:
  user-account-added:
    post:
      operationId: user-account-added
      summary: New User Added
      description: Information about a new user account
      tags:
        - subpackage_users
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  $ref: >-
                    #/components/schemas/WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaTriggerType
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayload
components:
  schemas:
    WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaTriggerType:
      type: string
      enum:
        - value: user_account_added
    WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayloadStatus:
      type: string
      enum:
        - value: invited
        - value: verified
        - value: unverified
    WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItemsType:
      type: string
      enum:
        - value: admin
        - value: ecommerce
    WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItems:
      type: object
      properties:
        slug:
          type: string
          description: Access group identifier for APIs
        type:
          $ref: >-
            #/components/schemas/WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItemsType
          description: |
            The type of access group based on how it was assigned to the user.
            * `admin` - Assigned to the user via API or in the designer
            * `ecommerce` - Assigned to the user via an ecommerce purchase
    WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayloadDataData:
      type: object
      properties:
        name:
          type: string
          description: |
            The name of the user
        email:
          type: string
          description: |
            The email address of the user
        accept-privacy:
          type: boolean
          description: |
            Boolean indicating if the user has accepted the privacy policy
        accept-communications:
          type: boolean
          description: >
            Boolean indicating if the user has accepted to receive
            communications
        additionalProperties:
          type: string
          description: Custom user attributes
    WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayloadData:
      type: object
      properties:
        data:
          $ref: >-
            #/components/schemas/WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayloadDataData
        accept-privacy-policy:
          type: boolean
        accept-communications:
          type: boolean
        email:
          type: string
        name:
          type: string
    WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the User
        isEmailVerified:
          type: boolean
          description: Shows whether the user has verified their email address
        lastUpdated:
          type: string
          format: date-time
          description: The timestamp the user was updated
        invitedOn:
          type: string
          format: date-time
          description: The timestamp the user was invited
        createdOn:
          type: string
          format: date-time
          description: The timestamp the user was created
        lastLogin:
          type: string
          format: date-time
          description: The timestamp the user was logged in
        status:
          $ref: >-
            #/components/schemas/WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayloadStatus
          description: The status of the user
        accessGroups:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItems
          description: Access groups the user belongs to
        data:
          $ref: >-
            #/components/schemas/WebhooksUserAccountAddedPayloadContentApplicationJsonSchemaPayloadData
          description: The data about the user account that was added

```

---

# Account Updated

POST 

Information about an updated user account

Reference: https://developers.webflow.com/data/reference/webhooks/events/user-account-updated

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Account Updated
  version: subpackage_users.user_account_updated
webhooks:
  user-account-updated:
    post:
      operationId: user-account-updated
      summary: Account Updated
      description: Information about an updated user account
      tags:
        - subpackage_users
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  $ref: >-
                    #/components/schemas/WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaTriggerType
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayload
components:
  schemas:
    WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaTriggerType:
      type: string
      enum:
        - value: user_account_updated
    WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayloadStatus:
      type: string
      enum:
        - value: invited
        - value: verified
        - value: unverified
    WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItemsType:
      type: string
      enum:
        - value: admin
        - value: ecommerce
    WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItems:
      type: object
      properties:
        slug:
          type: string
          description: Access group identifier for APIs
        type:
          $ref: >-
            #/components/schemas/WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItemsType
          description: |
            The type of access group based on how it was assigned to the user.
            * `admin` - Assigned to the user via API or in the designer
            * `ecommerce` - Assigned to the user via an ecommerce purchase
    WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayloadDataData:
      type: object
      properties:
        name:
          type: string
          description: |
            The name of the user
        email:
          type: string
          description: |
            The email address of the user
        accept-privacy:
          type: boolean
          description: |
            Boolean indicating if the user has accepted the privacy policy
        accept-communications:
          type: boolean
          description: >
            Boolean indicating if the user has accepted to receive
            communications
        additionalProperties:
          type: string
          description: Custom user attributes
    WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayloadData:
      type: object
      properties:
        data:
          $ref: >-
            #/components/schemas/WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayloadDataData
        accept-privacy-policy:
          type: boolean
        accept-communications:
          type: boolean
        email:
          type: string
        name:
          type: string
    WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the User
        isEmailVerified:
          type: boolean
          description: Shows whether the user has verified their email address
        lastUpdated:
          type: string
          format: date-time
          description: The timestamp the user was updated
        invitedOn:
          type: string
          format: date-time
          description: The timestamp the user was invited
        createdOn:
          type: string
          format: date-time
          description: The timestamp the user was created
        lastLogin:
          type: string
          format: date-time
          description: The timestamp the user was logged in
        status:
          $ref: >-
            #/components/schemas/WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayloadStatus
          description: The status of the user
        accessGroups:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItems
          description: Access groups the user belongs to
        data:
          $ref: >-
            #/components/schemas/WebhooksUserAccountUpdatedPayloadContentApplicationJsonSchemaPayloadData
          description: The data about the user account that was added

```

---

# Account Deleted

POST 

Information about a deleted user account

Reference: https://developers.webflow.com/data/reference/webhooks/events/user-account-deleted

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Account Deleted
  version: subpackage_users.user_account_deleted
webhooks:
  user-account-deleted:
    post:
      operationId: user-account-deleted
      summary: Account Deleted
      description: Information about a deleted user account
      tags:
        - subpackage_users
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  $ref: >-
                    #/components/schemas/WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaTriggerType
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayload
components:
  schemas:
    WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaTriggerType:
      type: string
      enum:
        - value: user_account_deleted
    WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayloadStatus:
      type: string
      enum:
        - value: invited
        - value: verified
        - value: unverified
    WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItemsType:
      type: string
      enum:
        - value: admin
        - value: ecommerce
    WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItems:
      type: object
      properties:
        slug:
          type: string
          description: Access group identifier for APIs
        type:
          $ref: >-
            #/components/schemas/WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItemsType
          description: |
            The type of access group based on how it was assigned to the user.
            * `admin` - Assigned to the user via API or in the designer
            * `ecommerce` - Assigned to the user via an ecommerce purchase
    WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayloadDataData:
      type: object
      properties:
        name:
          type: string
          description: |
            The name of the user
        email:
          type: string
          description: |
            The email address of the user
        accept-privacy:
          type: boolean
          description: |
            Boolean indicating if the user has accepted the privacy policy
        accept-communications:
          type: boolean
          description: >
            Boolean indicating if the user has accepted to receive
            communications
        additionalProperties:
          type: string
          description: Custom user attributes
    WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayloadData:
      type: object
      properties:
        data:
          $ref: >-
            #/components/schemas/WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayloadDataData
        accept-privacy-policy:
          type: boolean
        accept-communications:
          type: boolean
        email:
          type: string
        name:
          type: string
    WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the User
        isEmailVerified:
          type: boolean
          description: Shows whether the user has verified their email address
        lastUpdated:
          type: string
          format: date-time
          description: The timestamp the user was updated
        invitedOn:
          type: string
          format: date-time
          description: The timestamp the user was invited
        createdOn:
          type: string
          format: date-time
          description: The timestamp the user was created
        lastLogin:
          type: string
          format: date-time
          description: The timestamp the user was logged in
        status:
          $ref: >-
            #/components/schemas/WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayloadStatus
          description: The status of the user
        accessGroups:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayloadAccessGroupsItems
          description: Access groups the user belongs to
        data:
          $ref: >-
            #/components/schemas/WebhooksUserAccountDeletedPayloadContentApplicationJsonSchemaPayloadData
          description: The data about the user account that was added

```

---

# New eComm Order

POST 

Information about a new ecommerce order

Reference: https://developers.webflow.com/data/reference/webhooks/events/ecomm-new-order

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: New eComm Order
  version: subpackage_orders.ecomm_new_order
webhooks:
  ecomm-new-order:
    post:
      operationId: ecomm-new-order
      summary: New eComm Order
      description: Information about a new ecommerce order
      tags:
        - subpackage_orders
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  type: string
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayload
components:
  schemas:
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadStatus:
      type: string
      enum:
        - value: pending
        - value: unfulfilled
        - value: fulfilled
        - value: disputed
        - value: dispute-lost
        - value: refunded
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadDisputeLastStatus:
      type: string
      enum:
        - value: warning_needs_response
        - value: warning_under_review
        - value: warning_closed
        - value: needs_response
        - value: under_review
        - value: charge_refunded
        - value: won
        - value: lost
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadCustomerPaid:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadNetAmount:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadApplicationFee:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadAllAddressesItemsType:
      type: string
      enum:
        - value: shipping
        - value: billing
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadAllAddressesItemsJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadAllAddressesItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadAllAddressesItemsType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadAllAddressesItemsJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadShippingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadShippingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadShippingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadShippingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadShippingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadBillingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadBillingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadBillingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadBillingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadBillingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadCustomerInfo:
      type: object
      properties:
        fullName:
          type: string
          description: The full name of the Customer
        email:
          type: string
          format: email
          description: The Customer's email address
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsRowTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImageFileVariantsItems:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        originalFileName:
          type: string
        size:
          type: number
          format: double
          description: The image size in bytes
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImageFile:
      type: object
      properties:
        size:
          type: number
          format: double
          description: The image size in bytes
        originalFileName:
          type: string
          description: the original name of the image
        createdOn:
          type: string
          format: date-time
          description: The creation timestamp of the image
        contentType:
          type: string
          format: mime-type
          description: The MIME type of the image
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
        variants:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImageFileVariantsItems
          description: Variants of the supplied image
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImage:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        file:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImageFile
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItems:
      type: object
      properties:
        count:
          type: number
          format: double
          description: Number of Item purchased.
        rowTotal:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsRowTotal
          description: The total for the row
        productId:
          type: string
          format: objectid
          description: The unique identifier for the Product
        productName:
          type: string
          description: User-facing name of the Product
        productSlug:
          type: string
          description: Slug for the Product
        variantId:
          type: string
          description: Identifier for the Product Variant (SKU)
        variantName:
          type: string
          description: User-facing name of the Product Variant (SKU)
        variantSlug:
          type: string
          description: Slug for the Product Variant (SKU)
        variantSKU:
          type: string
          description: The user-defined custom SKU of the Product Variant (SKU)
        variantImage:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImage
        variantPrice:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantPrice
          description: The price corresponding to the variant
        weight:
          type:
            - number
            - 'null'
          format: double
          description: The physical weight of the variant if provided, or null
        width:
          type:
            - number
            - 'null'
          format: double
          description: The physical width of the variant if provided, or null
        height:
          type:
            - number
            - 'null'
          format: double
          description: The physical height of the variant if provided, or null
        length:
          type:
            - number
            - 'null'
          format: double
          description: The physical length of the variant if provided, or null
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadStripeDetails:
      type: object
      properties:
        subscriptionId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the Subscription
        paymentMethod:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentMethod used
        paymentIntentId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentIntent, or null
        customerId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated customer identifier, or null
        chargeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated charge identifier, or null
        disputeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated dispute identifier, or null
        refundId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated refund identifier, or null
        refundReason:
          type:
            - string
            - 'null'
          description: Stripe-generated refund reason, or null
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadStripeCardBrand:
      type: string
      enum:
        - value: Visa
        - value: American Express
        - value: MasterCard
        - value: Discover
        - value: JCB
        - value: Diners Club
        - value: Unknown
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadStripeCardExpires:
      type: object
      properties:
        year:
          type: number
          format: double
          description: Year that the card expires
        month:
          type: number
          format: double
          description: Month that the card expires
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadStripeCard:
      type: object
      properties:
        last4:
          type: string
          description: The last 4 digits on the card as a string
        brand:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadStripeCardBrand
          description: The card's brand (ie. credit card network)
        ownerName:
          type: string
          description: The name on the card.
        expires:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadStripeCardExpires
          description: The card's expiration date.
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPaypalDetails:
      type: object
      properties:
        orderId:
          type: string
          description: PayPal order identifier
        payerId:
          type: string
          description: PayPal payer identifier
        captureId:
          type: string
          description: PayPal capture identifier
        refundId:
          type: string
          description: PayPal refund identifier
        refundReason:
          type: string
          description: PayPal-issued reason for the refund
        disputeId:
          type: string
          description: PayPal dispute identifier
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadCustomDataItems:
      type: object
      properties: {}
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadMetadata:
      type: object
      properties:
        isBuyNow:
          type: boolean
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotalsSubtotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItemsType:
      type: string
      enum:
        - value: discount
        - value: discount-shipping
        - value: shipping
        - value: tax
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItemsPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItemsType
          description: The type of extra item this is.
        name:
          type: string
          description: A human-readable (but English) name for this extra charge.
        description:
          type: string
          description: A human-readable (but English) description of this extra charge.
        price:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItemsPrice
          description: The price for the item
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotalsTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotals:
      type: object
      properties:
        subtotal:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotalsSubtotal
          description: The subtotal price
        extras:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItems
          description: An array of extra items, includes discounts, shipping, and taxes.
        total:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotalsTotal
          description: The total price
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadDownloadFilesItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the downloadable file
        name:
          type: string
          description: The user-facing name for the downloadable file
        url:
          type: string
          format: uri
          description: The hosted location for the downloadable file
    WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        orderId:
          type: string
          description: |
            The order ID. Will usually be 6 hex characters, but can also be 9
            hex characters if the site has a very large number of Orders.
            Randomly assigned.
        status:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadStatus
          description: |
            The status of the Order
        comment:
          type: string
          description: >-
            A comment string for this Order, which is editable by API user (not
            used by Webflow).
        orderComment:
          type: string
          description: A comment that the customer left when making their Order
        acceptedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: The ISO8601 timestamp that an Order was placed.
        fulfilledOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'fulfilled', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        refundedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >-
            When an Order is marked as 'refunded', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'disputed', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputeUpdatedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            If an Order has been disputed by the customer, this key will be set
            to the ISO8601 timestamp of the last update received. If the Order
            is not disputed, the key will be null.
        disputeLastStatus:
          oneOf:
            - $ref: >-
                #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadDisputeLastStatus
            - type: 'null'
          description: >
            If an order was disputed by the customer, then this key will be set
            with the [dispute's
            status](https://stripe.com/docs/api#dispute_object-status).
        customerPaid:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadCustomerPaid
          description: The total paid by the customer
        netAmount:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadNetAmount
          description: The net amount after application fees
        applicationFee:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadApplicationFee
          description: The application fee assessed by the platform
        allAddresses:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadAllAddressesItems
          description: All addresses provided by the customer during the ordering flow.
        shippingAddress:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadShippingAddress
          description: The shipping address
        billingAddress:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadBillingAddress
          description: The billing address
        shippingProvider:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping provider used
            (not used by Webflow).
        shippingTracking:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping tracking
            number for the order (not used by Webflow).
        shippingTrackingURL:
          type:
            - string
            - 'null'
          format: uri
        customerInfo:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadCustomerInfo
          description: An object with the keys `fullName` and `email`.
        purchasedItems:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItems
          description: An array of all things that the Customer purchased.
        purchasedItemsCount:
          type: number
          format: double
          description: The sum of all 'count' fields in 'purchasedItems'.
        stripeDetails:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadStripeDetails
          description: >-
            An object with various Stripe IDs, useful for linking into the
            stripe dashboard.
        stripeCard:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadStripeCard
          description: >
            Details on the card used to fulfill this order, if this order was
            finalized with Stripe.
        paypalDetails:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadPaypalDetails
        customData:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadCustomDataItems
          description: >
            An array of additional inputs for custom order data gathering. Each
            object in the array represents an input with a name, and a
            textInput, textArea, or checkbox value.
        metadata:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadMetadata
        isCustomerDeleted:
          type: boolean
          description: >
            A boolean indicating whether the customer has been deleted from the
            site.
        isShippingRequired:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that require shipping.
        hasDownloads:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that are downloadable.
        paymentProcessor:
          type: string
          description: |
            A string indicating the payment processor used for this order.
        totals:
          $ref: >-
            #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadTotals
          description: An object describing various pricing totals
        downloadFiles:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommNewOrderPayloadContentApplicationJsonSchemaPayloadDownloadFilesItems
          description: An array of downloadable file objects.

```

---

# Updated eComm Order

POST 

Information about an updated ecommerce order

Reference: https://developers.webflow.com/data/reference/webhooks/events/ecomm-order-changed

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Updated eComm Order
  version: subpackage_orders.ecomm_order_changed
webhooks:
  ecomm-order-changed:
    post:
      operationId: ecomm-order-changed
      summary: Updated eComm Order
      description: Information about an updated ecommerce order
      tags:
        - subpackage_orders
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  type: string
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayload
components:
  schemas:
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadStatus:
      type: string
      enum:
        - value: pending
        - value: unfulfilled
        - value: fulfilled
        - value: disputed
        - value: dispute-lost
        - value: refunded
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadDisputeLastStatus:
      type: string
      enum:
        - value: warning_needs_response
        - value: warning_under_review
        - value: warning_closed
        - value: needs_response
        - value: under_review
        - value: charge_refunded
        - value: won
        - value: lost
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadCustomerPaid:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadNetAmount:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadApplicationFee:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadAllAddressesItemsType:
      type: string
      enum:
        - value: shipping
        - value: billing
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadAllAddressesItemsJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadAllAddressesItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadAllAddressesItemsType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadAllAddressesItemsJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadShippingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadShippingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadShippingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadShippingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadShippingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadBillingAddressType:
      type: string
      enum:
        - value: shipping
        - value: billing
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadBillingAddressJapanType:
      type: string
      enum:
        - value: kana
        - value: kanji
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadBillingAddress:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadBillingAddressType
          description: The type of the order address (billing or shipping)
        japanType:
          oneOf:
            - $ref: >-
                #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadBillingAddressJapanType
            - type: 'null'
          description: >-
            Represents a Japan-only address format. This field will only appear
            on orders placed from Japan.
        addressee:
          type: string
          description: Display name on the address
        line1:
          type: string
          description: The first line of the address
        line2:
          type: string
          description: The second line of the address
        city:
          type: string
          description: The city of the address.
        state:
          type: string
          description: The state or province of the address
        country:
          type: string
          description: The country of the address
        postalCode:
          type: string
          description: The postal code of the address
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadCustomerInfo:
      type: object
      properties:
        fullName:
          type: string
          description: The full name of the Customer
        email:
          type: string
          format: email
          description: The Customer's email address
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsRowTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImageFileVariantsItems:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        originalFileName:
          type: string
        size:
          type: number
          format: double
          description: The image size in bytes
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImageFile:
      type: object
      properties:
        size:
          type: number
          format: double
          description: The image size in bytes
        originalFileName:
          type: string
          description: the original name of the image
        createdOn:
          type: string
          format: date-time
          description: The creation timestamp of the image
        contentType:
          type: string
          format: mime-type
          description: The MIME type of the image
        width:
          type: integer
          description: The image width in pixels
        height:
          type: integer
          description: The image height in pixels
        variants:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImageFileVariantsItems
          description: Variants of the supplied image
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImage:
      type: object
      properties:
        url:
          type: string
          format: uri
          description: The hosted location for the Variant's image
        file:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImageFile
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItems:
      type: object
      properties:
        count:
          type: number
          format: double
          description: Number of Item purchased.
        rowTotal:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsRowTotal
          description: The total for the row
        productId:
          type: string
          format: objectid
          description: The unique identifier for the Product
        productName:
          type: string
          description: User-facing name of the Product
        productSlug:
          type: string
          description: Slug for the Product
        variantId:
          type: string
          description: Identifier for the Product Variant (SKU)
        variantName:
          type: string
          description: User-facing name of the Product Variant (SKU)
        variantSlug:
          type: string
          description: Slug for the Product Variant (SKU)
        variantSKU:
          type: string
          description: The user-defined custom SKU of the Product Variant (SKU)
        variantImage:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantImage
        variantPrice:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItemsVariantPrice
          description: The price corresponding to the variant
        weight:
          type:
            - number
            - 'null'
          format: double
          description: The physical weight of the variant if provided, or null
        width:
          type:
            - number
            - 'null'
          format: double
          description: The physical width of the variant if provided, or null
        height:
          type:
            - number
            - 'null'
          format: double
          description: The physical height of the variant if provided, or null
        length:
          type:
            - number
            - 'null'
          format: double
          description: The physical length of the variant if provided, or null
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadStripeDetails:
      type: object
      properties:
        subscriptionId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the Subscription
        paymentMethod:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentMethod used
        paymentIntentId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated identifier for the PaymentIntent, or null
        customerId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated customer identifier, or null
        chargeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated charge identifier, or null
        disputeId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated dispute identifier, or null
        refundId:
          type:
            - string
            - 'null'
          format: objectid
          description: Stripe-generated refund identifier, or null
        refundReason:
          type:
            - string
            - 'null'
          description: Stripe-generated refund reason, or null
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadStripeCardBrand:
      type: string
      enum:
        - value: Visa
        - value: American Express
        - value: MasterCard
        - value: Discover
        - value: JCB
        - value: Diners Club
        - value: Unknown
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadStripeCardExpires:
      type: object
      properties:
        year:
          type: number
          format: double
          description: Year that the card expires
        month:
          type: number
          format: double
          description: Month that the card expires
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadStripeCard:
      type: object
      properties:
        last4:
          type: string
          description: The last 4 digits on the card as a string
        brand:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadStripeCardBrand
          description: The card's brand (ie. credit card network)
        ownerName:
          type: string
          description: The name on the card.
        expires:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadStripeCardExpires
          description: The card's expiration date.
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPaypalDetails:
      type: object
      properties:
        orderId:
          type: string
          description: PayPal order identifier
        payerId:
          type: string
          description: PayPal payer identifier
        captureId:
          type: string
          description: PayPal capture identifier
        refundId:
          type: string
          description: PayPal refund identifier
        refundReason:
          type: string
          description: PayPal-issued reason for the refund
        disputeId:
          type: string
          description: PayPal dispute identifier
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadCustomDataItems:
      type: object
      properties: {}
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadMetadata:
      type: object
      properties:
        isBuyNow:
          type: boolean
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotalsSubtotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItemsType:
      type: string
      enum:
        - value: discount
        - value: discount-shipping
        - value: shipping
        - value: tax
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItemsPrice:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItems:
      type: object
      properties:
        type:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItemsType
          description: The type of extra item this is.
        name:
          type: string
          description: A human-readable (but English) name for this extra charge.
        description:
          type: string
          description: A human-readable (but English) description of this extra charge.
        price:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItemsPrice
          description: The price for the item
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotalsTotal:
      type: object
      properties:
        unit:
          type: string
          description: The three-letter ISO currency code
        value:
          type: string
          description: The numeric value in the base unit of the currency
        string:
          type: string
          description: The user-facing string representation of the amount
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotals:
      type: object
      properties:
        subtotal:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotalsSubtotal
          description: The subtotal price
        extras:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotalsExtrasItems
          description: An array of extra items, includes discounts, shipping, and taxes.
        total:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotalsTotal
          description: The total price
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadDownloadFilesItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the downloadable file
        name:
          type: string
          description: The user-facing name for the downloadable file
        url:
          type: string
          format: uri
          description: The hosted location for the downloadable file
    WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        orderId:
          type: string
          description: |
            The order ID. Will usually be 6 hex characters, but can also be 9
            hex characters if the site has a very large number of Orders.
            Randomly assigned.
        status:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadStatus
          description: |
            The status of the Order
        comment:
          type: string
          description: >-
            A comment string for this Order, which is editable by API user (not
            used by Webflow).
        orderComment:
          type: string
          description: A comment that the customer left when making their Order
        acceptedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: The ISO8601 timestamp that an Order was placed.
        fulfilledOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'fulfilled', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        refundedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >-
            When an Order is marked as 'refunded', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            When an Order is marked as 'disputed', this field represents the
            timestamp of the fulfillment in ISO8601 format. Otherwise, it is
            null.
        disputeUpdatedOn:
          type:
            - string
            - 'null'
          format: date-time
          description: >
            If an Order has been disputed by the customer, this key will be set
            to the ISO8601 timestamp of the last update received. If the Order
            is not disputed, the key will be null.
        disputeLastStatus:
          oneOf:
            - $ref: >-
                #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadDisputeLastStatus
            - type: 'null'
          description: >
            If an order was disputed by the customer, then this key will be set
            with the [dispute's
            status](https://stripe.com/docs/api#dispute_object-status).
        customerPaid:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadCustomerPaid
          description: The total paid by the customer
        netAmount:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadNetAmount
          description: The net amount after application fees
        applicationFee:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadApplicationFee
          description: The application fee assessed by the platform
        allAddresses:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadAllAddressesItems
          description: All addresses provided by the customer during the ordering flow.
        shippingAddress:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadShippingAddress
          description: The shipping address
        billingAddress:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadBillingAddress
          description: The billing address
        shippingProvider:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping provider used
            (not used by Webflow).
        shippingTracking:
          type:
            - string
            - 'null'
          description: >
            A string editable by the API user to note the shipping tracking
            number for the order (not used by Webflow).
        shippingTrackingURL:
          type:
            - string
            - 'null'
          format: uri
        customerInfo:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadCustomerInfo
          description: An object with the keys `fullName` and `email`.
        purchasedItems:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPurchasedItemsItems
          description: An array of all things that the Customer purchased.
        purchasedItemsCount:
          type: number
          format: double
          description: The sum of all 'count' fields in 'purchasedItems'.
        stripeDetails:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadStripeDetails
          description: >-
            An object with various Stripe IDs, useful for linking into the
            stripe dashboard.
        stripeCard:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadStripeCard
          description: >
            Details on the card used to fulfill this order, if this order was
            finalized with Stripe.
        paypalDetails:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadPaypalDetails
        customData:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadCustomDataItems
          description: >
            An array of additional inputs for custom order data gathering. Each
            object in the array represents an input with a name, and a
            textInput, textArea, or checkbox value.
        metadata:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadMetadata
        isCustomerDeleted:
          type: boolean
          description: >
            A boolean indicating whether the customer has been deleted from the
            site.
        isShippingRequired:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that require shipping.
        hasDownloads:
          type: boolean
          description: >
            A boolean indicating whether the order contains one or more
            purchased items that are downloadable.
        paymentProcessor:
          type: string
          description: |
            A string indicating the payment processor used for this order.
        totals:
          $ref: >-
            #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadTotals
          description: An object describing various pricing totals
        downloadFiles:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksEcommOrderChangedPayloadContentApplicationJsonSchemaPayloadDownloadFilesItems
          description: An array of downloadable file objects.

```

---

# Updated eComm Inventory

POST 

Information about updated ecommerce inventory values

Reference: https://developers.webflow.com/data/reference/webhooks/events/ecomm-inventory-changed

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: Updated eComm Inventory
  version: subpackage_inventory.ecomm_inventory_changed
webhooks:
  ecomm-inventory-changed:
    post:
      operationId: ecomm-inventory-changed
      summary: Updated eComm Inventory
      description: Information about updated ecommerce inventory values
      tags:
        - subpackage_inventory
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  $ref: >-
                    #/components/schemas/WebhooksEcommInventoryChangedPayloadContentApplicationJsonSchemaTriggerType
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksEcommInventoryChangedPayloadContentApplicationJsonSchemaPayload
                  description: The availabile inventory for an item
components:
  schemas:
    WebhooksEcommInventoryChangedPayloadContentApplicationJsonSchemaTriggerType:
      type: string
      enum:
        - value: ecomm_inventory_changed
    WebhooksEcommInventoryChangedPayloadContentApplicationJsonSchemaPayloadInventoryType:
      type: string
      enum:
        - value: infinite
        - value: finite
    WebhooksEcommInventoryChangedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for a SKU item
        quantity:
          type: number
          format: double
          description: >-
            Total quantity of items remaining in inventory (if inventoryType is
            finite)
        inventoryType:
          $ref: >-
            #/components/schemas/WebhooksEcommInventoryChangedPayloadContentApplicationJsonSchemaPayloadInventoryType
          description: infinite or finite

```

---

# New Comment Thread

POST 

Information about a new comment thread or reply

<Note title="Timing of comment webhooks">
  There may be a delay of up to 5 minutes before new comments appear in the system and trigger the webhook notification.
</Note>


Reference: https://developers.webflow.com/data/reference/webhooks/events/comment-created

## OpenAPI 3.1 Webhook Specification

```yaml
openapi: 3.1.1
info:
  title: New Comment Thread
  version: subpackage_comments.comment_created
webhooks:
  comment-created:
    post:
      operationId: comment-created
      summary: New Comment Thread
      description: |
        Information about a new comment thread or reply

        <Note title="Timing of comment webhooks">
          There may be a delay of up to 5 minutes before new comments appear in the system and trigger the webhook notification.
        </Note>
      tags:
        - subpackage_comments
      parameters: []
      responses:
        '200':
          description: Webhook received successfully
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                triggerType:
                  type: string
                  description: The type of event that triggered the request
                payload:
                  $ref: >-
                    #/components/schemas/WebhooksCommentCreatedPayloadContentApplicationJsonSchemaPayload
                  description: >
                    The comment webhook payload contains data for the thread and
                    for replies.  Check the type to determine if the payload is
                    for a thread or a reply.  The webhook payload may be delayed
                    by up to 5 minutes.
components:
  schemas:
    WebhooksCommentCreatedPayloadContentApplicationJsonSchemaPayloadAuthor:
      type: object
      properties:
        userId:
          type: string
          description: The unique identifier of the author
        email:
          type: string
          description: Email of the author
        name:
          type: string
          description: Name of the author
      required:
        - userId
        - email
        - name
    WebhooksCommentCreatedPayloadContentApplicationJsonSchemaPayloadMentionedUsersItems:
      type: object
      properties:
        userId:
          type: string
          description: The unique identifier of the mentioned user
        email:
          type: string
          description: Email of the user
        name:
          type: string
          description: Name of the  User
      required:
        - userId
        - email
        - name
    WebhooksCommentCreatedPayloadContentApplicationJsonSchemaPayload:
      type: object
      properties:
        threadId:
          type: string
          description: Unique identifier for the comment thread
        commentId:
          type: string
          description: Unique identifier for the comment reply
        type:
          type: string
          description: The type of comment payload
        siteId:
          type: string
          description: The site unique identifier
        pageId:
          type: string
          description: The page unique identifier
        localeId:
          type:
            - string
            - 'null'
          description: The locale unique identifier
        itemId:
          type:
            - string
            - 'null'
          description: The item unique identifier
        breakpoint:
          type: string
          description: The breakpoint the comment was left on
        url:
          type: string
          description: The URL of the page the comment was left on
        content:
          type: string
          description: The content of the comment reply
        isResolved:
          type: boolean
          default: false
          description: Boolean determining if the comment thread is resolved
        author:
          $ref: >-
            #/components/schemas/WebhooksCommentCreatedPayloadContentApplicationJsonSchemaPayloadAuthor
        mentionedUsers:
          type: array
          items:
            $ref: >-
              #/components/schemas/WebhooksCommentCreatedPayloadContentApplicationJsonSchemaPayloadMentionedUsersItems
          description: >-
            List of mentioned users. This is an empty array until email
            notifications are sent, which can take up to 5 minutes after the
            comment is created.
        createdOn:
          type: string
          format: date-string
          description: The date the item was created
        lastUpdated:
          type: string
          format: date-string
          description: The date the item was last updated
      required:
        - threadId
        - commentId
        - type
        - siteId
        - pageId
        - localeId
        - itemId
        - breakpoint
        - url
        - content
        - isResolved
        - author
        - mentionedUsers
        - createdOn
        - lastUpdated

```

---

# Get Workspace Audit Logs

GET https://api.webflow.com/v2/workspaces/{workspace_id_or_slug}/audit_logs

Get audit logs for a workspace.

<Warning title="Enterprise & workspace API token only">This endpoint requires an Enterprise workspace and a workspace token with the `workspace_activity:read` scope. Create a workspace token from your workspace dashboard integrations page to use this endpoint.</Warning>

Required scope | `workspace_activity:read`


Reference: https://developers.webflow.com/data/reference/enterprise/workspace-audit-logs/get

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Workspace Audit Logs
  version: endpoint_workspaces/auditLogs.get-workspace-audit_logs
paths:
  /workspaces/{workspace_id_or_slug}/audit_logs:
    get:
      operationId: get-workspace-audit-logs
      summary: Get Workspace Audit Logs
      description: >
        Get audit logs for a workspace.


        <Warning title="Enterprise & workspace API token only">This endpoint
        requires an Enterprise workspace and a workspace token with the
        `workspace_activity:read` scope. Create a workspace token from your
        workspace dashboard integrations page to use this endpoint.</Warning>


        Required scope | `workspace_activity:read`
      tags:
        - - subpackage_workspaces
          - subpackage_workspaces/auditLogs
      parameters:
        - name: workspace_id_or_slug
          in: path
          description: Unique identifier or slug for a Workspace
          required: true
          schema:
            type: string
            format: objectid
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: sortOrder
          in: query
          description: Sorts the results by asc or desc
          required: false
          schema:
            $ref: >-
              #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetParametersSortOrder
        - name: eventType
          in: query
          description: The event type to filter by
          required: false
          schema:
            $ref: >-
              #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetParametersEventType
        - name: from
          in: query
          description: The start date to filter by
          required: false
          schema:
            type: string
            format: date-time
        - name: to
          in: query
          description: The end date to filter by
          required: false
          schema:
            type: string
            format: date-time
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: A list of workspace audit logs
          content:
            application/json:
              schema:
                $ref: >-
                  #/components/schemas/workspaces_audit_logs_get-workspace-audit_logs_Response_200
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    WorkspacesWorkspaceIdOrSlugAuditLogsGetParametersSortOrder:
      type: string
      enum:
        - value: asc
        - value: desc
    WorkspacesWorkspaceIdOrSlugAuditLogsGetParametersEventType:
      type: string
      enum:
        - value: user_access
        - value: custom_role
        - value: workspace_membership
        - value: site_membership
        - value: workspace_invitation
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf0Actor:
      type: object
      properties:
        id:
          type: string
        email:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf0Workspace:
      type: object
      properties:
        id:
          type: string
        slug:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf0EventType:
      type: string
      enum:
        - value: user_access
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf0EventSubType:
      type: string
      enum:
        - value: login
        - value: logout
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf0PayloadMethod:
      type: string
      enum:
        - value: dashboard
        - value: sso
        - value: api
        - value: google
    User access:
      type: object
      properties:
        method:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf0PayloadMethod
        location:
          type: string
          description: The geolocation based on the logged IP address
        ipAddress:
          type: string
          description: The captured IP address of the user
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems0:
      type: object
      properties:
        timestamp:
          type: string
          format: date-time
        actor:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf0Actor
        workspace:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf0Workspace
        eventType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf0EventType
        eventSubType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf0EventSubType
        payload:
          $ref: '#/components/schemas/User access'
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf1Actor:
      type: object
      properties:
        id:
          type: string
        email:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf1Workspace:
      type: object
      properties:
        id:
          type: string
        slug:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf1EventType:
      type: string
      enum:
        - value: custom_role
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf1EventSubType:
      type: string
      enum:
        - value: role_created
        - value: role_updated
        - value: role_deleted
    Custom role:
      type: object
      properties:
        roleName:
          type: string
          description: The name of the custom role
        previousRoleName:
          type: string
          description: The previous name of the custom role
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems1:
      type: object
      properties:
        timestamp:
          type: string
          format: date-time
        actor:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf1Actor
        workspace:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf1Workspace
        eventType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf1EventType
        eventSubType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf1EventSubType
        payload:
          $ref: '#/components/schemas/Custom role'
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2Actor:
      type: object
      properties:
        id:
          type: string
        email:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2Workspace:
      type: object
      properties:
        id:
          type: string
        slug:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2EventType:
      type: string
      enum:
        - value: workspace_membership
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2EventSubType:
      type: string
      enum:
        - value: user_added
        - value: user_removed
        - value: user_role_updated
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2PayloadTargetUser:
      type: object
      properties:
        id:
          type: string
        email:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2PayloadMethod:
      type: string
      enum:
        - value: sso
        - value: dashboard
        - value: admin
        - value: access_request
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2PayloadUserType:
      type: string
      enum:
        - value: member
        - value: guest
        - value: reviewer
        - value: client
    Workspace membership:
      type: object
      properties:
        targetUser:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2PayloadTargetUser
        method:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2PayloadMethod
        userType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2PayloadUserType
        roleName:
          type: string
          description: The name of the role that was assigned to the user
        previousRoleName:
          type: string
          description: The previous role that the user had
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems2:
      type: object
      properties:
        timestamp:
          type: string
          format: date-time
        actor:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2Actor
        workspace:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2Workspace
        eventType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2EventType
        eventSubType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf2EventSubType
        payload:
          $ref: '#/components/schemas/Workspace membership'
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3Actor:
      type: object
      properties:
        id:
          type: string
        email:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3Workspace:
      type: object
      properties:
        id:
          type: string
        slug:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3EventType:
      type: string
      enum:
        - value: site_membership
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3EventSubType:
      type: string
      enum:
        - value: user_added
        - value: user_removed
        - value: user_role_updated
        - value: user_granular_access_updated
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadSite:
      type: object
      properties:
        id:
          type: string
        slug:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadTargetUser:
      type: object
      properties:
        id:
          type: string
        email:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadMethod:
      type: string
      enum:
        - value: sso
        - value: invite
        - value: scim
        - value: dashboard
        - value: admin
        - value: access_request
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadUserType:
      type: string
      enum:
        - value: member
        - value: guest
        - value: reviewer
        - value: client
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadGranularAccessType:
      type: string
      enum:
        - value: cms
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadGranularAccess:
      type: object
      properties:
        id:
          type: string
        name:
          type: string
        type:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadGranularAccessType
        restricted:
          type: boolean
    Site membership:
      type: object
      properties:
        site:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadSite
        targetUser:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadTargetUser
        method:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadMethod
        userType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadUserType
        roleName:
          type: string
          description: The name of the role that was assigned to the user
        previousRoleName:
          type: string
          description: The previous role that the user had
        granularAccess:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3PayloadGranularAccess
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems3:
      type: object
      properties:
        timestamp:
          type: string
          format: date-time
        actor:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3Actor
        workspace:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3Workspace
        eventType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3EventType
        eventSubType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf3EventSubType
        payload:
          $ref: '#/components/schemas/Site membership'
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4Actor:
      type: object
      properties:
        id:
          type: string
        email:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4Workspace:
      type: object
      properties:
        id:
          type: string
        slug:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4EventType:
      type: string
      enum:
        - value: workspace_invitation
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4EventSubType:
      type: string
      enum:
        - value: invite_sent
        - value: invite_accepted
        - value: invite_updated
        - value: invite_canceled
        - value: invite_declined
        - value: access_request_accepted
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4PayloadTargetUser:
      type: object
      properties:
        id:
          type: string
        email:
          type: string
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4PayloadMethod:
      type: string
      enum:
        - value: sso
        - value: dashboard
        - value: admin
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4PayloadUserType:
      type: string
      enum:
        - value: member
        - value: guest
        - value: reviewer
        - value: client
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4PayloadTargetUsersItems:
      type: object
      properties:
        id:
          type: string
        email:
          type: string
    Workspace invitation:
      type: object
      properties:
        targetUser:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4PayloadTargetUser
        method:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4PayloadMethod
        userType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4PayloadUserType
        roleName:
          type: string
          description: The name of the role that was assigned to the user
        previousRoleName:
          type: string
          description: The previous role that the user had
        targetUsers:
          type: array
          items:
            $ref: >-
              #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4PayloadTargetUsersItems
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems4:
      type: object
      properties:
        timestamp:
          type: string
          format: date-time
        actor:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4Actor
        workspace:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4Workspace
        eventType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4EventType
        eventSubType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItemsOneOf4EventSubType
        payload:
          $ref: '#/components/schemas/Workspace invitation'
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems:
      oneOf:
        - $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems0
        - $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems1
        - $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems2
        - $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems3
        - $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems4
    WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    workspaces_audit_logs_get-workspace-audit_logs_Response_200:
      type: object
      properties:
        items:
          type: array
          items:
            $ref: >-
              #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaItemsItems
        pagination:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdOrSlugAuditLogsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
import datetime

from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.workspaces.audit_logs.get_workspace_audit_logs(
    workspace_id_or_slug="hitchhikers-workspace",
    limit=1,
    offset=1,
    sort_order="asc",
    event_type="user_access",
    from_=datetime.datetime.fromisoformat(
        "2025-06-22 16:00:31+00:00",
    ),
    to=datetime.datetime.fromisoformat(
        "2025-07-22 16:00:31+00:00",
    ),
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.workspaces.auditLogs.getWorkspaceAuditLogs("hitchhikers-workspace", {
    limit: 1,
    offset: 1,
    sortOrder: "asc",
    eventType: "user_access",
    from: new Date("2025-06-22T16:00:31.000Z"),
    to: new Date("2025-07-22T16:00:31.000Z")
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/workspaces/hitchhikers-workspace/audit_logs?limit=100&offset=0&eventType=user_access&from=2025-06-22T16%3A00%3A31Z&to=2025-07-22T16%3A00%3A31Z"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/workspaces/hitchhikers-workspace/audit_logs?limit=100&offset=0&eventType=user_access&from=2025-06-22T16%3A00%3A31Z&to=2025-07-22T16%3A00%3A31Z")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/workspaces/hitchhikers-workspace/audit_logs?limit=100&offset=0&eventType=user_access&from=2025-06-22T16%3A00%3A31Z&to=2025-07-22T16%3A00%3A31Z")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/workspaces/hitchhikers-workspace/audit_logs?limit=100&offset=0&eventType=user_access&from=2025-06-22T16%3A00%3A31Z&to=2025-07-22T16%3A00%3A31Z', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/workspaces/hitchhikers-workspace/audit_logs?limit=100&offset=0&eventType=user_access&from=2025-06-22T16%3A00%3A31Z&to=2025-07-22T16%3A00%3A31Z");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/workspaces/hitchhikers-workspace/audit_logs?limit=100&offset=0&eventType=user_access&from=2025-06-22T16%3A00%3A31Z&to=2025-07-22T16%3A00%3A31Z")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Workspace audit log event types

> Review the event types and payloads for the Workspace Audit Logs API.

## `user_access`

Login and logout events for users in the workspace.

##### Event subtypes

| Value    | Description       |
| -------- | ----------------- |
| `login`  | A user logged in  |
| `logout` | A user logged out |

#### Payload schema

| Field       | Type   | Description                                                       |
| ----------- | ------ | ----------------------------------------------------------------- |
| `method`    | string | How the user logged in, enum: `dashboard`, `sso`, `api`, `google` |
| `location`  | string | The geolocation based on the logged IP address                    |
| `ipAddress` | string | The captured IP address of the user                               |

## `custom_role`

Tracks when custom roles are created, updated, or deleted in your workspace. [Learn more about custom roles](https://help.webflow.com/hc/en-us/articles/37207901526419-Create-and-manage-custom-roles).

##### Event subtypes

| Value          | Description                    |
| -------------- | ------------------------------ |
| `role_created` | A custom role has been created |
| `role_updated` | A custom role has been updated |
| `role_deleted` | A custom role has been deleted |

#### Payload schema

| Field              | Type   | Description                          |
| ------------------ | ------ | ------------------------------------ |
| `roleName`         | string | The name of the custom role          |
| `previousRoleName` | string | The previous name of the custom role |

## `workspace_membership`

Tracks when users join or leave the workspace, and when their roles change within it.

##### Event subtypes

| Value               | Description                                |
| ------------------- | ------------------------------------------ |
| `user_added`        | A user has been added to the workspace     |
| `user_removed`      | A user has been removed from the workspace |
| `user_role_updated` | A user's role has been updated             |

#### Payload schema

| Field              | Type   | Description                                                                 |
| ------------------ | ------ | --------------------------------------------------------------------------- |
| `targetUser`       | object | The affected user, with properties `id` and `email`                         |
| `method`           | string | How access was managed, enum: `sso`, `dashboard`, `admin`, `access_request` |
| `userType`         | string | Type of user, enum: `member`, `guest`, `reviewer`, `client`                 |
| `roleName`         | string | The role assigned to the user                                               |
| `previousRoleName` | string | The previous role (for role updates)                                        |

## `site_membership`

Tracks when users are added to or removed from a specific site, and when their site-specific roles change or their granular access to resources. This is similar to workspace membership events, but focused on site-level access instead of workspace-level access.

##### Event subtypes

| Value                          | Description                                                       |
| ------------------------------ | ----------------------------------------------------------------- |
| `user_added`                   | A user has been added to a site                                   |
| `user_removed`                 | A user has been removed from a site                               |
| `user_role_updated`            | A user's site role has been updated                               |
| `user_granular_access_updated` | A user's granular access has been updated for a specific resource |

#### Payload schema

| Field              | Type   | Description                                                                                   |
| ------------------ | ------ | --------------------------------------------------------------------------------------------- |
| `site`             | object | The affected site, with properties `id` and `slug`                                            |
| `targetUser`       | object | The affected user, with properties `id` and `email`                                           |
| `method`           | string | How access was managed, enum: `sso`, `invite`, `scim`, `dashboard`, `admin`, `access_request` |
| `userType`         | string | Type of user, enum: `member`, `guest`, `reviewer`, `client`                                   |
| `roleName`         | string | The role assigned to the user                                                                 |
| `previousRoleName` | string | The previous role (for role updates)                                                          |
| `granularAccess`   | object | The granular access settings for the user, with properties `id`, `name`, `type`, `restricted` |

## `workspace_invitation`

Tracks the lifecycle of workspace invitations from when they're sent to when they're accepted, declined, or canceled.

##### Event subtypes

| Value                     | Description                                                                                                                               |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `invite_sent`             | A workspace invite was sent                                                                                                               |
| `invite_accepted`         | A workspace invite was accepted                                                                                                           |
| `invite_updated`          | A workspace invite was updated                                                                                                            |
| `invite_canceled`         | A workspace invite was canceled                                                                                                           |
| `invite_declined`         | A workspace invite was declined                                                                                                           |
| `access_request_accepted` | A [guest access request](https://help.webflow.com/hc/en-us/articles/33961349456915-Agency-or-Freelancer-guest-role-overview) was accepted |

#### Payload schema

| Field              | Type   | Description                                                                                                                                                                       |
| ------------------ | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `targetUser`       | object | The invited user, with properties `id` and `email`                                                                                                                                |
| `method`           | string | How the invitation was managed, enum: `sso`, `dashboard`, `admin`                                                                                                                 |
| `userType`         | string | Type of user invited, enum: `member`, `guest`, `reviewer`, `client`                                                                                                               |
| `roleName`         | string | The role assigned to the user in the invitation                                                                                                                                   |
| `previousRoleName` | string | The previous role (for updated invitations)                                                                                                                                       |
| `targetUsers`      | array  | List of users approved from a [guest access request](https://help.webflow.com/hc/en-us/articles/33961349456915-Agency-or-Freelancer-guest-role-overview) with an `id` and `email` |

---

# Get Site Activity Logs

GET https://api.webflow.com/v2/sites/{site_id}/activity_logs

Retrieve Activity Logs for a specific Site. 

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope: `site_activity:read`


Reference: https://developers.webflow.com/data/reference/enterprise/site-activity-logs/list

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Site Activity Logs
  version: endpoint_sites/activityLogs.list
paths:
  /sites/{site_id}/activity_logs:
    get:
      operationId: list
      summary: Get Site Activity Logs
      description: >
        Retrieve Activity Logs for a specific Site. 


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope: `site_activity:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/activityLogs
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: limit
          in: query
          description: 'Maximum number of records to be returned (max limit: 100)'
          required: false
          schema:
            type: integer
        - name: offset
          in: query
          description: >-
            Offset used for pagination if the results have more than limit
            records
          required: false
          schema:
            type: integer
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: A list of site activity logs
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_activity-logs_list_Response_200'
        '403':
          description: Forbidden request
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaItemsItemsEvent:
      type: string
      enum:
        - value: styles_modified
        - value: site_published
        - value: ix2_modified_on_page
        - value: page_dom_modified
        - value: cms_item
        - value: backup_created
        - value: page_custom_code_modified
        - value: symbols_modified
        - value: variable_modified
        - value: variables_modified
        - value: cms_collection
        - value: page_settings_modified
        - value: page_settings_custom_code_modified
        - value: ix2_modified_on_component
        - value: ix2_modified_on_class
        - value: site_custom_code_modified
        - value: page_duplicated
        - value: secondary_locale_page_content_modified
        - value: page_renamed
        - value: page_created
        - value: page_deleted
        - value: site_unpublished
        - value: backup_restored
        - value: locale_added
        - value: branch_created
        - value: locale_display_name_updated
        - value: locale_subdirectory_updated
        - value: branch_merged
        - value: locale_tag_updated
        - value: branch_deleted
        - value: locale_enabled
        - value: locale_removed
        - value: locale_disabled
        - value: library_shared
        - value: library_unshared
        - value: library_installed
        - value: library_uninstalled
        - value: library_update_shared
        - value: library_update_accepted
        - value: branch_review_created
        - value: branch_review_approved
        - value: branch_review_canceled
    SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaItemsItemsResourceOperation:
      type: string
      enum:
        - value: CREATED
        - value: MODIFIED
        - value: PUBLISHED
        - value: UNPUBLISHED
        - value: DELETED
        - value: GROUP_REORDERED
        - value: GROUP_CREATED
        - value: GROUP_DELETED
        - value: REORDERED
    SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaItemsItemsUser:
      type: object
      properties:
        id:
          type: string
        displayName:
          type: string
    SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaItemsItemsPayload:
      type: object
      properties: {}
    SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaItemsItems:
      type: object
      properties:
        id:
          type: string
        createdOn:
          type: string
          format: date-time
        lastUpdated:
          type: string
          format: date-time
        event:
          $ref: >-
            #/components/schemas/SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaItemsItemsEvent
        resourceOperation:
          $ref: >-
            #/components/schemas/SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaItemsItemsResourceOperation
        user:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaItemsItemsUser
            - type: 'null'
        resourceId:
          type:
            - string
            - 'null'
        resourceName:
          type:
            - string
            - 'null'
        newValue:
          type:
            - string
            - 'null'
        previousValue:
          type:
            - string
            - 'null'
        payload:
          oneOf:
            - $ref: >-
                #/components/schemas/SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaItemsItemsPayload
            - type: 'null'
    SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    sites_activity-logs_list_Response_200:
      type: object
      properties:
        items:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaItemsItems
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdActivityLogsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.activity_logs.list(
    site_id="580e63e98c9a982ac9b8b741",
    limit=1,
    offset=1,
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.activityLogs.list("580e63e98c9a982ac9b8b741", {
    limit: 1,
    offset: 1
});

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/activity_logs?limit=100&offset=0"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/activity_logs?limit=100&offset=0")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/activity_logs?limit=100&offset=0")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/activity_logs?limit=100&offset=0', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/activity_logs?limit=100&offset=0");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/activity_logs?limit=100&offset=0")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get 301 redirects

GET https://api.webflow.com/v2/sites/{site_id}/redirects

Fetch a list of all 301 redirect rules configured for a specific site.

Use this endpoint to review, audit, or manage the redirection rules that control how traffic is rerouted on your site.

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope: `sites:read`


Reference: https://developers.webflow.com/data/reference/enterprise/site-configuration/301-redirects/get

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get 301 redirects
  version: endpoint_sites/redirects.list
paths:
  /sites/{site_id}/redirects:
    get:
      operationId: list
      summary: Get 301 redirects
      description: >
        Fetch a list of all 301 redirect rules configured for a specific site.


        Use this endpoint to review, audit, or manage the redirection rules that
        control how traffic is rerouted on your site.


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope: `sites:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/redirects
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_redirects_list_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdRedirectsGetResponsesContentApplicationJsonSchemaRedirectsItems:
      type: object
      properties:
        id:
          type: string
          description: The ID of the specific redirect rule
        fromUrl:
          type: string
          description: The source URL path that will be redirected.
        toUrl:
          type: string
          description: The target URL path where the user or client will be redirected.
    SitesSiteIdRedirectsGetResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    sites_redirects_list_Response_200:
      type: object
      properties:
        redirects:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdRedirectsGetResponsesContentApplicationJsonSchemaRedirectsItems
          description: List of redirects for a given site
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdRedirectsGetResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.redirects.list(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.redirects.list("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Create a 301 redirect

POST https://api.webflow.com/v2/sites/{site_id}/redirects
Content-Type: application/json

Add a new 301 redirection rule to a site.

This endpoint allows you to define a source path (`fromUrl`) and its corresponding destination path (`toUrl`), which will dictate how traffic is rerouted on your site. This is useful for managing site changes, restructuring URLs, or handling outdated links.

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope: `sites:write`


Reference: https://developers.webflow.com/data/reference/enterprise/site-configuration/301-redirects/create

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Create a 301 redirect
  version: endpoint_sites/redirects.create
paths:
  /sites/{site_id}/redirects:
    post:
      operationId: create
      summary: Create a 301 redirect
      description: >
        Add a new 301 redirection rule to a site.


        This endpoint allows you to define a source path (`fromUrl`) and its
        corresponding destination path (`toUrl`), which will dictate how traffic
        is rerouted on your site. This is useful for managing site changes,
        restructuring URLs, or handling outdated links.


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope: `sites:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/redirects
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_redirects_create_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                id:
                  type: string
                  description: The ID of the specific redirect rule
                fromUrl:
                  type: string
                  description: The source URL path that will be redirected.
                toUrl:
                  type: string
                  description: >-
                    The target URL path where the user or client will be
                    redirected.
components:
  schemas:
    sites_redirects_create_Response_200:
      type: object
      properties:
        id:
          type: string
          description: The ID of the specific redirect rule
        fromUrl:
          type: string
          description: The source URL path that will be redirected.
        toUrl:
          type: string
          description: The target URL path where the user or client will be redirected.

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.redirects.create(
    site_id="580e63e98c9a982ac9b8b741",
    id="42e1a2b7aa1a13f768a0042a",
    from_url="/mostly-harmless",
    to_url="/earth",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.redirects.create("580e63e98c9a982ac9b8b741", {
    id: "42e1a2b7aa1a13f768a0042a",
    fromUrl: "/mostly-harmless",
    toUrl: "/earth"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects"

	payload := strings.NewReader("{\n  \"id\": \"42e1a2b7aa1a13f768a0042a\",\n  \"fromUrl\": \"/mostly-harmless\",\n  \"toUrl\": \"/earth\"\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"id\": \"42e1a2b7aa1a13f768a0042a\",\n  \"fromUrl\": \"/mostly-harmless\",\n  \"toUrl\": \"/earth\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"id\": \"42e1a2b7aa1a13f768a0042a\",\n  \"fromUrl\": \"/mostly-harmless\",\n  \"toUrl\": \"/earth\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects', [
  'body' => '{
  "id": "42e1a2b7aa1a13f768a0042a",
  "fromUrl": "/mostly-harmless",
  "toUrl": "/earth"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"id\": \"42e1a2b7aa1a13f768a0042a\",\n  \"fromUrl\": \"/mostly-harmless\",\n  \"toUrl\": \"/earth\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "id": "42e1a2b7aa1a13f768a0042a",
  "fromUrl": "/mostly-harmless",
  "toUrl": "/earth"
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update 301 redirect

PATCH https://api.webflow.com/v2/sites/{site_id}/redirects/{redirect_id}
Content-Type: application/json

Update a 301 redirection rule from a site.

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope: `sites:write`


Reference: https://developers.webflow.com/data/reference/enterprise/site-configuration/301-redirects/patch

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update 301 redirect
  version: endpoint_sites/redirects.update
paths:
  /sites/{site_id}/redirects/{redirect_id}:
    patch:
      operationId: update
      summary: Update 301 redirect
      description: >
        Update a 301 redirection rule from a site.


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope: `sites:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/redirects
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: redirect_id
          in: path
          description: Unique identifier site rediect
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_redirects_update_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                id:
                  type: string
                  description: The ID of the specific redirect rule
                fromUrl:
                  type: string
                  description: The source URL path that will be redirected.
                toUrl:
                  type: string
                  description: >-
                    The target URL path where the user or client will be
                    redirected.
components:
  schemas:
    sites_redirects_update_Response_200:
      type: object
      properties:
        id:
          type: string
          description: The ID of the specific redirect rule
        fromUrl:
          type: string
          description: The source URL path that will be redirected.
        toUrl:
          type: string
          description: The target URL path where the user or client will be redirected.

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.redirects.update(
    site_id="580e63e98c9a982ac9b8b741",
    redirect_id="66c4cb9a20cac35ed19500e6",
    id="42e1a2b7aa1a13f768a0042a",
    from_url="/mostly-harmless",
    to_url="/earth",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.redirects.update("580e63e98c9a982ac9b8b741", "66c4cb9a20cac35ed19500e6", {
    id: "42e1a2b7aa1a13f768a0042a",
    fromUrl: "/mostly-harmless",
    toUrl: "/earth"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6"

	payload := strings.NewReader("{\n  \"id\": \"42e1a2b7aa1a13f768a0042a\",\n  \"fromUrl\": \"/mostly-harmless\",\n  \"toUrl\": \"/earth\"\n}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"id\": \"42e1a2b7aa1a13f768a0042a\",\n  \"fromUrl\": \"/mostly-harmless\",\n  \"toUrl\": \"/earth\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"id\": \"42e1a2b7aa1a13f768a0042a\",\n  \"fromUrl\": \"/mostly-harmless\",\n  \"toUrl\": \"/earth\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6', [
  'body' => '{
  "id": "42e1a2b7aa1a13f768a0042a",
  "fromUrl": "/mostly-harmless",
  "toUrl": "/earth"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"id\": \"42e1a2b7aa1a13f768a0042a\",\n  \"fromUrl\": \"/mostly-harmless\",\n  \"toUrl\": \"/earth\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "id": "42e1a2b7aa1a13f768a0042a",
  "fromUrl": "/mostly-harmless",
  "toUrl": "/earth"
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete 301 redirects

DELETE https://api.webflow.com/v2/sites/{site_id}/redirects/{redirect_id}

Remove a 301 redirection rule from a site.

This is useful for cleaning up outdated or unnecessary redirects, ensuring that your site's routing behavior remains efficient and up-to-date.

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope: `sites:write`


Reference: https://developers.webflow.com/data/reference/enterprise/site-configuration/301-redirects/delete

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete 301 redirects
  version: endpoint_sites/redirects.delete
paths:
  /sites/{site_id}/redirects/{redirect_id}:
    delete:
      operationId: delete
      summary: Delete 301 redirects
      description: >
        Remove a 301 redirection rule from a site.


        This is useful for cleaning up outdated or unnecessary redirects,
        ensuring that your site's routing behavior remains efficient and
        up-to-date.


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope: `sites:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/redirects
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: redirect_id
          in: path
          description: Unique identifier site rediect
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_redirects_delete_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdRedirectsRedirectIdDeleteResponsesContentApplicationJsonSchemaRedirectsItems:
      type: object
      properties:
        id:
          type: string
          description: The ID of the specific redirect rule
        fromUrl:
          type: string
          description: The source URL path that will be redirected.
        toUrl:
          type: string
          description: The target URL path where the user or client will be redirected.
    SitesSiteIdRedirectsRedirectIdDeleteResponsesContentApplicationJsonSchemaPagination:
      type: object
      properties:
        limit:
          type: number
          format: double
          description: The limit used for pagination
        offset:
          type: number
          format: double
          description: The offset used for pagination
        total:
          type: number
          format: double
          description: The total number of records
      required:
        - limit
        - offset
        - total
    sites_redirects_delete_Response_200:
      type: object
      properties:
        redirects:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdRedirectsRedirectIdDeleteResponsesContentApplicationJsonSchemaRedirectsItems
          description: List of redirects for a given site
        pagination:
          $ref: >-
            #/components/schemas/SitesSiteIdRedirectsRedirectIdDeleteResponsesContentApplicationJsonSchemaPagination
          description: Pagination object

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.redirects.delete(
    site_id="580e63e98c9a982ac9b8b741",
    redirect_id="66c4cb9a20cac35ed19500e6",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.redirects.delete("580e63e98c9a982ac9b8b741", "66c4cb9a20cac35ed19500e6");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6"

	req, _ := http.NewRequest("DELETE", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/redirects/66c4cb9a20cac35ed19500e6")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get robots.txt

GET https://api.webflow.com/v2/sites/{site_id}/robots_txt

Retrieve the robots.txt configuration for various user agents.

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope: `site_config:read`


Reference: https://developers.webflow.com/data/reference/enterprise/site-configuration/robots-txt/get

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get robots.txt
  version: endpoint_sites/robotsTxt.get
paths:
  /sites/{site_id}/robots_txt:
    get:
      operationId: get
      summary: Get robots.txt
      description: >
        Retrieve the robots.txt configuration for various user agents.


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope: `site_config:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/robotsTxt
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_robots-txt_get_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdRobotsTxtGetResponsesContentApplicationJsonSchemaRulesItems:
      type: object
      properties:
        userAgent:
          type: string
          description: The user agent the rules apply to.
        allows:
          type: array
          items:
            type: string
          description: List of paths allowed for this user agent.
        disallows:
          type: array
          items:
            type: string
          description: List of paths disallowed for this user agent.
      required:
        - userAgent
    sites_robots-txt_get_Response_200:
      type: object
      properties:
        rules:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdRobotsTxtGetResponsesContentApplicationJsonSchemaRulesItems
          description: List of rules for user agents.
        sitemap:
          type: string
          description: URL to the sitemap.

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.robots_txt.get(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.robotsTxt.get("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Replace robots.txt

PUT https://api.webflow.com/v2/sites/{site_id}/robots_txt
Content-Type: application/json

Replace the `robots.txt` configuration for various user agents.

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope | `site_config:write`


Reference: https://developers.webflow.com/data/reference/enterprise/site-configuration/robots-txt/put

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Replace robots.txt
  version: endpoint_sites/robotsTxt.put
paths:
  /sites/{site_id}/robots_txt:
    put:
      operationId: put
      summary: Replace robots.txt
      description: >
        Replace the `robots.txt` configuration for various user agents.


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope | `site_config:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/robotsTxt
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_robots-txt_put_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                rules:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/SitesSiteIdRobotsTxtPutRequestBodyContentApplicationJsonSchemaRulesItems
                  description: List of rules for user agents.
                sitemap:
                  type: string
                  description: URL to the sitemap.
components:
  schemas:
    SitesSiteIdRobotsTxtPutRequestBodyContentApplicationJsonSchemaRulesItems:
      type: object
      properties:
        userAgent:
          type: string
          description: The user agent the rules apply to.
        allows:
          type: array
          items:
            type: string
          description: List of paths allowed for this user agent.
        disallows:
          type: array
          items:
            type: string
          description: List of paths disallowed for this user agent.
      required:
        - userAgent
    SitesSiteIdRobotsTxtPutResponsesContentApplicationJsonSchemaRulesItems:
      type: object
      properties:
        userAgent:
          type: string
          description: The user agent the rules apply to.
        allows:
          type: array
          items:
            type: string
          description: List of paths allowed for this user agent.
        disallows:
          type: array
          items:
            type: string
          description: List of paths disallowed for this user agent.
      required:
        - userAgent
    sites_robots-txt_put_Response_200:
      type: object
      properties:
        rules:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdRobotsTxtPutResponsesContentApplicationJsonSchemaRulesItems
          description: List of rules for user agents.
        sitemap:
          type: string
          description: URL to the sitemap.

```

## SDK Code Examples

```python
from webflow import RobotsRulesItem, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.robots_txt.put(
    site_id="580e63e98c9a982ac9b8b741",
    rules=[
        RobotsRulesItem(
            user_agent="googlebot",
            allows=["/public"],
            disallows=["/vogon-poetry", "/total-perspective-vortex"],
        )
    ],
    sitemap="https://heartofgold.ship/sitemap.xml",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.robotsTxt.put("580e63e98c9a982ac9b8b741", {
    rules: [{
            userAgent: "googlebot",
            allows: ["/public"],
            disallows: ["/vogon-poetry", "/total-perspective-vortex"]
        }],
    sitemap: "https://heartofgold.ship/sitemap.xml"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt"

	payload := strings.NewReader("{\n  \"rules\": [\n    {\n      \"userAgent\": \"googlebot\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/vogon-poetry\",\n        \"/total-perspective-vortex\"\n      ]\n    }\n  ],\n  \"sitemap\": \"https://heartofgold.ship/sitemap.xml\"\n}")

	req, _ := http.NewRequest("PUT", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Put.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"rules\": [\n    {\n      \"userAgent\": \"googlebot\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/vogon-poetry\",\n        \"/total-perspective-vortex\"\n      ]\n    }\n  ],\n  \"sitemap\": \"https://heartofgold.ship/sitemap.xml\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.put("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"rules\": [\n    {\n      \"userAgent\": \"googlebot\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/vogon-poetry\",\n        \"/total-perspective-vortex\"\n      ]\n    }\n  ],\n  \"sitemap\": \"https://heartofgold.ship/sitemap.xml\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PUT', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt', [
  'body' => '{
  "rules": [
    {
      "userAgent": "googlebot",
      "allows": [],
      "disallows": [
        "/vogon-poetry",
        "/total-perspective-vortex"
      ]
    }
  ],
  "sitemap": "https://heartofgold.ship/sitemap.xml"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt");
var request = new RestRequest(Method.PUT);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"rules\": [\n    {\n      \"userAgent\": \"googlebot\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/vogon-poetry\",\n        \"/total-perspective-vortex\"\n      ]\n    }\n  ],\n  \"sitemap\": \"https://heartofgold.ship/sitemap.xml\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "rules": [
    [
      "userAgent": "googlebot",
      "allows": [],
      "disallows": ["/vogon-poetry", "/total-perspective-vortex"]
    ]
  ],
  "sitemap": "https://heartofgold.ship/sitemap.xml"
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PUT"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update robots.txt

PATCH https://api.webflow.com/v2/sites/{site_id}/robots_txt
Content-Type: application/json

Update the `robots.txt` configuration for various user agents.

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope | `site_config:write`


Reference: https://developers.webflow.com/data/reference/enterprise/site-configuration/robots-txt/patch

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update robots.txt
  version: endpoint_sites/robotsTxt.patch
paths:
  /sites/{site_id}/robots_txt:
    patch:
      operationId: patch
      summary: Update robots.txt
      description: >
        Update the `robots.txt` configuration for various user agents.


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope | `site_config:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/robotsTxt
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_robots-txt_patch_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                rules:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/SitesSiteIdRobotsTxtPatchRequestBodyContentApplicationJsonSchemaRulesItems
                  description: List of rules for user agents.
                sitemap:
                  type: string
                  description: URL to the sitemap.
components:
  schemas:
    SitesSiteIdRobotsTxtPatchRequestBodyContentApplicationJsonSchemaRulesItems:
      type: object
      properties:
        userAgent:
          type: string
          description: The user agent the rules apply to.
        allows:
          type: array
          items:
            type: string
          description: List of paths allowed for this user agent.
        disallows:
          type: array
          items:
            type: string
          description: List of paths disallowed for this user agent.
      required:
        - userAgent
    SitesSiteIdRobotsTxtPatchResponsesContentApplicationJsonSchemaRulesItems:
      type: object
      properties:
        userAgent:
          type: string
          description: The user agent the rules apply to.
        allows:
          type: array
          items:
            type: string
          description: List of paths allowed for this user agent.
        disallows:
          type: array
          items:
            type: string
          description: List of paths disallowed for this user agent.
      required:
        - userAgent
    sites_robots-txt_patch_Response_200:
      type: object
      properties:
        rules:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdRobotsTxtPatchResponsesContentApplicationJsonSchemaRulesItems
          description: List of rules for user agents.
        sitemap:
          type: string
          description: URL to the sitemap.

```

## SDK Code Examples

```python
from webflow import RobotsRulesItem, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.robots_txt.patch(
    site_id="580e63e98c9a982ac9b8b741",
    rules=[
        RobotsRulesItem(
            user_agent="googlebot",
            allows=["/public"],
            disallows=["/vogon-poetry", "/total-perspective-vortex"],
        )
    ],
    sitemap="https://heartofgold.ship/sitemap.xml",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.robotsTxt.patch("580e63e98c9a982ac9b8b741", {
    rules: [{
            userAgent: "googlebot",
            allows: ["/public"],
            disallows: ["/vogon-poetry", "/total-perspective-vortex"]
        }],
    sitemap: "https://heartofgold.ship/sitemap.xml"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt"

	payload := strings.NewReader("{\n  \"rules\": [\n    {\n      \"userAgent\": \"googlebot\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/vogon-poetry\",\n        \"/total-perspective-vortex\"\n      ]\n    }\n  ],\n  \"sitemap\": \"https://heartofgold.ship/sitemap.xml\"\n}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"rules\": [\n    {\n      \"userAgent\": \"googlebot\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/vogon-poetry\",\n        \"/total-perspective-vortex\"\n      ]\n    }\n  ],\n  \"sitemap\": \"https://heartofgold.ship/sitemap.xml\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"rules\": [\n    {\n      \"userAgent\": \"googlebot\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/vogon-poetry\",\n        \"/total-perspective-vortex\"\n      ]\n    }\n  ],\n  \"sitemap\": \"https://heartofgold.ship/sitemap.xml\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt', [
  'body' => '{
  "rules": [
    {
      "userAgent": "googlebot",
      "allows": [],
      "disallows": [
        "/vogon-poetry",
        "/total-perspective-vortex"
      ]
    }
  ],
  "sitemap": "https://heartofgold.ship/sitemap.xml"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"rules\": [\n    {\n      \"userAgent\": \"googlebot\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/vogon-poetry\",\n        \"/total-perspective-vortex\"\n      ]\n    }\n  ],\n  \"sitemap\": \"https://heartofgold.ship/sitemap.xml\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "rules": [
    [
      "userAgent": "googlebot",
      "allows": [],
      "disallows": ["/vogon-poetry", "/total-perspective-vortex"]
    ]
  ],
  "sitemap": "https://heartofgold.ship/sitemap.xml"
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete robots.txt

DELETE https://api.webflow.com/v2/sites/{site_id}/robots_txt
Content-Type: application/json

Remove specific rules for a user-agent in your `robots.txt` file. To delete all rules for a user-agent, provide an empty rule set. This will remove the user-agent's entry entirely, leaving it subject to your site's default crawling behavior.

**Note:** Deleting a user-agent with no rules will make the user-agent's access unrestricted unless other directives apply.

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope: `site_config:write`


Reference: https://developers.webflow.com/data/reference/enterprise/site-configuration/robots-txt/delete

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete robots.txt
  version: endpoint_sites/robotsTxt.delete
paths:
  /sites/{site_id}/robots_txt:
    delete:
      operationId: delete
      summary: Delete robots.txt
      description: >
        Remove specific rules for a user-agent in your `robots.txt` file. To
        delete all rules for a user-agent, provide an empty rule set. This will
        remove the user-agent's entry entirely, leaving it subject to your
        site's default crawling behavior.


        **Note:** Deleting a user-agent with no rules will make the user-agent's
        access unrestricted unless other directives apply.


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope: `site_config:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/robotsTxt
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_robots-txt_delete_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                rules:
                  type: array
                  items:
                    $ref: >-
                      #/components/schemas/SitesSiteIdRobotsTxtDeleteRequestBodyContentApplicationJsonSchemaRulesItems
                  description: List of rules for user agents.
                sitemap:
                  type: string
                  description: URL to the sitemap.
components:
  schemas:
    SitesSiteIdRobotsTxtDeleteRequestBodyContentApplicationJsonSchemaRulesItems:
      type: object
      properties:
        userAgent:
          type: string
          description: The user agent the rules apply to.
        allows:
          type: array
          items:
            type: string
          description: List of paths allowed for this user agent.
        disallows:
          type: array
          items:
            type: string
          description: List of paths disallowed for this user agent.
      required:
        - userAgent
    SitesSiteIdRobotsTxtDeleteResponsesContentApplicationJsonSchemaRulesItems:
      type: object
      properties:
        userAgent:
          type: string
          description: The user agent the rules apply to.
        allows:
          type: array
          items:
            type: string
          description: List of paths allowed for this user agent.
        disallows:
          type: array
          items:
            type: string
          description: List of paths disallowed for this user agent.
      required:
        - userAgent
    sites_robots-txt_delete_Response_200:
      type: object
      properties:
        rules:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdRobotsTxtDeleteResponsesContentApplicationJsonSchemaRulesItems
          description: List of rules for user agents.
        sitemap:
          type: string
          description: URL to the sitemap.

```

## SDK Code Examples

```python
from webflow import RobotsRulesItem, Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.robots_txt.delete(
    site_id="580e63e98c9a982ac9b8b741",
    rules=[
        RobotsRulesItem(
            user_agent="*",
            allows=["/public"],
            disallows=["/bubbles"],
        )
    ],
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.robotsTxt.delete("580e63e98c9a982ac9b8b741", {
    rules: [{
            userAgent: "*",
            allows: ["/public"],
            disallows: ["/bubbles"]
        }]
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt"

	payload := strings.NewReader("{\n  \"rules\": [\n    {\n      \"userAgent\": \"*\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/bubbles\"\n      ]\n    }\n  ]\n}")

	req, _ := http.NewRequest("DELETE", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"rules\": [\n    {\n      \"userAgent\": \"*\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/bubbles\"\n      ]\n    }\n  ]\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"rules\": [\n    {\n      \"userAgent\": \"*\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/bubbles\"\n      ]\n    }\n  ]\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt', [
  'body' => '{
  "rules": [
    {
      "userAgent": "*",
      "allows": [],
      "disallows": [
        "/bubbles"
      ]
    }
  ]
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"rules\": [\n    {\n      \"userAgent\": \"*\",\n      \"allows\": [],\n      \"disallows\": [\n        \"/bubbles\"\n      ]\n    }\n  ]\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["rules": [
    [
      "userAgent": "*",
      "allows": [],
      "disallows": ["/bubbles"]
    ]
  ]] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/robots_txt")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Set a well-known file

PUT https://api.webflow.com/v2/sites/{site_id}/well_known
Content-Type: application/json

Upload a supported well-known file to a site.

The current restrictions on well-known files are as follows:
  - Each file must be smaller than 100kb
  - Less than 30 total files
  - Have one of the following file extensions (or no extension): `.txt`, `.json`, `.noext` 
  
  <Note title=".noext">
    `.noext` is a special file extension that removes other extensions. For example, `apple-app-site-association.noext.txt` will be uploaded as `apple-app-site-association`. Use this extension for tools that have trouble uploading extensionless files.
  </Note>

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope: `site_config:write`


Reference: https://developers.webflow.com/data/reference/enterprise/site-configuration/well-known-files/put

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Set a well-known file
  version: endpoint_sites/wellKnown.put
paths:
  /sites/{site_id}/well_known:
    put:
      operationId: put
      summary: Set a well-known file
      description: >
        Upload a supported well-known file to a site.


        The current restrictions on well-known files are as follows:
          - Each file must be smaller than 100kb
          - Less than 30 total files
          - Have one of the following file extensions (or no extension): `.txt`, `.json`, `.noext` 
          
          <Note title=".noext">
            `.noext` is a special file extension that removes other extensions. For example, `apple-app-site-association.noext.txt` will be uploaded as `apple-app-site-association`. Use this extension for tools that have trouble uploading extensionless files.
          </Note>

        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope: `site_config:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/wellKnown
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '201':
          description: File uploaded successfully
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_well-known_put_Response_201'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                fileName:
                  type: string
                  description: The name of the file
                fileData:
                  type: string
                  description: The contents of the file
                contentType:
                  $ref: >-
                    #/components/schemas/SitesSiteIdWellKnownPutRequestBodyContentApplicationJsonSchemaContentType
                  description: The content type of the file. Defaults to application/json
              required:
                - fileName
                - fileData
components:
  schemas:
    SitesSiteIdWellKnownPutRequestBodyContentApplicationJsonSchemaContentType:
      type: string
      enum:
        - value: application/json
        - value: text/plain
      default: application/json
    sites_well-known_put_Response_201:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.well_known.put(
    site_id="580e63e98c9a982ac9b8b741",
    file_name="apple-app-site-association.txt",
    file_data='{\n  "applinks": {\n    "apps": [],\n    "details": [\n  {\n    "appID": "ABCDE12345.com.example.app",\n    "paths": [ "/*", "/some/path/*" ]\n      }\n    ]\n  }\n}\n',
    content_type="application/json",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.wellKnown.put("580e63e98c9a982ac9b8b741", {
    fileName: "apple-app-site-association.txt",
    fileData: "{\n  \"applinks\": {\n    \"apps\": [],\n    \"details\": [\n  {\n    \"appID\": \"ABCDE12345.com.example.app\",\n    \"paths\": [ \"/*\", \"/some/path/*\" ]\n      }\n    ]\n  }\n}\n",
    contentType: "application/json"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known"

	payload := strings.NewReader("{\n  \"fileName\": {\n    \"summary\": \"Apple App Site Association\",\n    \"value\": \"apple-app-site-association.txt\"\n  },\n  \"fileData\": {\n    \"summary\": \"Apple App Site Association File Example\",\n    \"value\": \"{\\n  \\\"applinks\\\": {\\n    \\\"apps\\\": [],\\n    \\\"details\\\": [\\n      {\\n        \\\"appID\\\": \\\"ABCDE12345.com.example.app\\\",\\n        \\\"paths\\\": [ \\\"/*\\\", \\\"/some/path/*\\\" ]\\n      }\\n    ]\\n  }\\n}\\n\"\n  }\n}")

	req, _ := http.NewRequest("PUT", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Put.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"fileName\": {\n    \"summary\": \"Apple App Site Association\",\n    \"value\": \"apple-app-site-association.txt\"\n  },\n  \"fileData\": {\n    \"summary\": \"Apple App Site Association File Example\",\n    \"value\": \"{\\n  \\\"applinks\\\": {\\n    \\\"apps\\\": [],\\n    \\\"details\\\": [\\n      {\\n        \\\"appID\\\": \\\"ABCDE12345.com.example.app\\\",\\n        \\\"paths\\\": [ \\\"/*\\\", \\\"/some/path/*\\\" ]\\n      }\\n    ]\\n  }\\n}\\n\"\n  }\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.put("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"fileName\": {\n    \"summary\": \"Apple App Site Association\",\n    \"value\": \"apple-app-site-association.txt\"\n  },\n  \"fileData\": {\n    \"summary\": \"Apple App Site Association File Example\",\n    \"value\": \"{\\n  \\\"applinks\\\": {\\n    \\\"apps\\\": [],\\n    \\\"details\\\": [\\n      {\\n        \\\"appID\\\": \\\"ABCDE12345.com.example.app\\\",\\n        \\\"paths\\\": [ \\\"/*\\\", \\\"/some/path/*\\\" ]\\n      }\\n    ]\\n  }\\n}\\n\"\n  }\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PUT', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known', [
  'body' => '{
  "fileName": {
    "summary": "Apple App Site Association",
    "value": "apple-app-site-association.txt"
  },
  "fileData": {
    "summary": "Apple App Site Association File Example",
    "value": "{\\n  \\"applinks\\": {\\n    \\"apps\\": [],\\n    \\"details\\": [\\n      {\\n        \\"appID\\": \\"ABCDE12345.com.example.app\\",\\n        \\"paths\\": [ \\"/*\\", \\"/some/path/*\\" ]\\n      }\\n    ]\\n  }\\n}\\n"
  }
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known");
var request = new RestRequest(Method.PUT);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"fileName\": {\n    \"summary\": \"Apple App Site Association\",\n    \"value\": \"apple-app-site-association.txt\"\n  },\n  \"fileData\": {\n    \"summary\": \"Apple App Site Association File Example\",\n    \"value\": \"{\\n  \\\"applinks\\\": {\\n    \\\"apps\\\": [],\\n    \\\"details\\\": [\\n      {\\n        \\\"appID\\\": \\\"ABCDE12345.com.example.app\\\",\\n        \\\"paths\\\": [ \\\"/*\\\", \\\"/some/path/*\\\" ]\\n      }\\n    ]\\n  }\\n}\\n\"\n  }\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [
  "fileName": [
    "summary": "Apple App Site Association",
    "value": "apple-app-site-association.txt"
  ],
  "fileData": [
    "summary": "Apple App Site Association File Example",
    "value": "{
  \"applinks\": {
    \"apps\": [],
    \"details\": [
      {
        \"appID\": \"ABCDE12345.com.example.app\",
        \"paths\": [ \"/*\", \"/some/path/*\" ]
      }
    ]
  }
}
"
  ]
] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PUT"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete a well-known file

DELETE https://api.webflow.com/v2/sites/{site_id}/well_known
Content-Type: application/json

Delete existing well-known files from a site.

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope: `site_config:write`


Reference: https://developers.webflow.com/data/reference/enterprise/site-configuration/well-known-files/delete

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete a well-known file
  version: endpoint_sites/wellKnown.delete
paths:
  /sites/{site_id}/well_known:
    delete:
      operationId: delete
      summary: Delete a well-known file
      description: >
        Delete existing well-known files from a site.


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope: `site_config:write`
      tags:
        - - subpackage_sites
          - subpackage_sites/wellKnown
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: File deleted successfully
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_well-known_delete_Response_204'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                fileNames:
                  type: array
                  items:
                    type: string
                  description: A list of file names to delete
components:
  schemas:
    sites_well-known_delete_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.well_known.delete(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.wellKnown.delete("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known"

	payload := strings.NewReader("{}")

	req, _ := http.NewRequest("DELETE", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known', [
  'body' => '{}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/well_known")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Create Site

POST https://api.webflow.com/v2/workspaces/{workspace_id}/sites
Content-Type: application/json

Create a site. 

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope | `workspace:write`


Reference: https://developers.webflow.com/data/reference/enterprise/workspace-management/create

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Create Site
  version: endpoint_sites.create
paths:
  /workspaces/{workspace_id}/sites:
    post:
      operationId: create
      summary: Create Site
      description: >
        Create a site. 


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope | `workspace:write`
      tags:
        - - subpackage_sites
      parameters:
        - name: workspace_id
          in: path
          description: Unique identifier for a Workspace
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '201':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_create_Response_201'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden request
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                name:
                  type: string
                  description: The name of the site
                templateName:
                  type: string
                  description: The workspace or marketplace template to use
                parentFolderId:
                  type:
                    - string
                    - 'null'
                  description: MegaDodo Publications - Potential Book Ideas
              required:
                - name
components:
  schemas:
    WorkspacesWorkspaceIdSitesPostResponsesContentApplicationJsonSchemaCustomDomainsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Domain
        url:
          type: string
          description: The registered Domain name
        lastPublished:
          type:
            - string
            - 'null'
          format: date-time
          description: The date the custom domain was last published to
      required:
        - id
    WorkspacesWorkspaceIdSitesPostResponsesContentApplicationJsonSchemaLocalesPrimary:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the locale.
        cmsLocaleId:
          type: string
          description: A CMS-specific identifier for the locale.
        enabled:
          type: boolean
          description: Indicates if the locale is enabled.
        displayName:
          type: string
          description: The display name of the locale, typically in English.
        displayImageId:
          type:
            - string
            - 'null'
          description: An optional ID for an image associated with the locale, nullable.
        redirect:
          type: boolean
          description: Determines if requests should redirect to the locale's subdirectory.
        subdirectory:
          type: string
          description: The subdirectory path for the locale, used in URLs.
        tag:
          type: string
          description: >-
            A tag or code representing the locale, often following a standard
            format like 'en-US'.
    WorkspacesWorkspaceIdSitesPostResponsesContentApplicationJsonSchemaLocalesSecondaryItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the locale.
        cmsLocaleId:
          type: string
          description: A CMS-specific identifier for the locale.
        enabled:
          type: boolean
          description: Indicates if the locale is enabled.
        displayName:
          type: string
          description: The display name of the locale, typically in English.
        displayImageId:
          type:
            - string
            - 'null'
          description: An optional ID for an image associated with the locale, nullable.
        redirect:
          type: boolean
          description: Determines if requests should redirect to the locale's subdirectory.
        subdirectory:
          type: string
          description: The subdirectory path for the locale, used in URLs.
        tag:
          type: string
          description: >-
            A tag or code representing the locale, often following a standard
            format like 'en-US'.
    WorkspacesWorkspaceIdSitesPostResponsesContentApplicationJsonSchemaLocales:
      type: object
      properties:
        primary:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdSitesPostResponsesContentApplicationJsonSchemaLocalesPrimary
          description: The primary locale for the site or application.
        secondary:
          type: array
          items:
            $ref: >-
              #/components/schemas/WorkspacesWorkspaceIdSitesPostResponsesContentApplicationJsonSchemaLocalesSecondaryItems
          description: A list of secondary locales available for the site or application.
    WorkspacesWorkspaceIdSitesPostResponsesContentApplicationJsonSchemaDataCollectionType:
      type: string
      enum:
        - value: always
        - value: optOut
        - value: disabled
    sites_create_Response_201:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Site
        workspaceId:
          type: string
          format: objectid
          description: Unique identifier for the Workspace
        createdOn:
          type: string
          format: date-time
          description: Date the Site was created
        displayName:
          type: string
          description: Name given to Site
        shortName:
          type: string
          description: Slugified version of name
        lastPublished:
          type: string
          format: date-time
          description: Date the Site was last published
        lastUpdated:
          type: string
          format: date-time
          description: Date the Site was last updated
        previewUrl:
          type: string
          format: uri
          description: URL of a generated image for the given Site
        timeZone:
          type: string
          description: Site timezone set under Site Settings
        parentFolderId:
          type:
            - string
            - 'null'
          format: objectid
          description: The ID of the parent folder the Site exists in
        customDomains:
          type: array
          items:
            $ref: >-
              #/components/schemas/WorkspacesWorkspaceIdSitesPostResponsesContentApplicationJsonSchemaCustomDomainsItems
        locales:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdSitesPostResponsesContentApplicationJsonSchemaLocales
        dataCollectionEnabled:
          type: boolean
          description: Indicates if data collection is enabled for the site.
        dataCollectionType:
          $ref: >-
            #/components/schemas/WorkspacesWorkspaceIdSitesPostResponsesContentApplicationJsonSchemaDataCollectionType
          description: The type of data collection enabled for the site.
      required:
        - id
        - workspaceId
        - createdOn
        - displayName
        - shortName
        - lastPublished
        - lastUpdated
        - previewUrl
        - timeZone
        - dataCollectionEnabled
        - dataCollectionType

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.create(
    workspace_id="580e63e98c9a982ac9b8b741",
    name="The Hitchhiker's Guide to the Galaxy",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.create("580e63e98c9a982ac9b8b741", {
    name: "The Hitchhiker's Guide to the Galaxy"
});

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/workspaces/580e63e98c9a982ac9b8b741/sites"

	payload := strings.NewReader("{\n  \"name\": \"The Hitchhiker's Guide to the Galaxy\"\n}")

	req, _ := http.NewRequest("POST", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/workspaces/580e63e98c9a982ac9b8b741/sites")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n  \"name\": \"The Hitchhiker's Guide to the Galaxy\"\n}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.post("https://api.webflow.com/v2/workspaces/580e63e98c9a982ac9b8b741/sites")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{\n  \"name\": \"The Hitchhiker's Guide to the Galaxy\"\n}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('POST', 'https://api.webflow.com/v2/workspaces/580e63e98c9a982ac9b8b741/sites', [
  'body' => '{
  "name": "The Hitchhiker\'s Guide to the Galaxy"
}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/workspaces/580e63e98c9a982ac9b8b741/sites");
var request = new RestRequest(Method.POST);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{\n  \"name\": \"The Hitchhiker's Guide to the Galaxy\"\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = ["name": "The Hitchhiker's Guide to the Galaxy"] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/workspaces/580e63e98c9a982ac9b8b741/sites")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "POST"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Update Site

PATCH https://api.webflow.com/v2/sites/{site_id}
Content-Type: application/json

Update a site. 

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope | `sites:write`


Reference: https://developers.webflow.com/data/reference/enterprise/workspace-management/update

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Update Site
  version: endpoint_sites.update
paths:
  /sites/{site_id}:
    patch:
      operationId: update
      summary: Update Site
      description: >
        Update a site. 


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope | `sites:write`
      tags:
        - - subpackage_sites
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_update_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden request
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                name:
                  type: string
                  description: The name of the site
                parentFolderId:
                  type:
                    - string
                    - 'null'
                  description: The parent folder ID of the site
components:
  schemas:
    SitesSiteIdPatchResponsesContentApplicationJsonSchemaCustomDomainsItems:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Domain
        url:
          type: string
          description: The registered Domain name
        lastPublished:
          type:
            - string
            - 'null'
          format: date-time
          description: The date the custom domain was last published to
      required:
        - id
    SitesSiteIdPatchResponsesContentApplicationJsonSchemaLocalesPrimary:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the locale.
        cmsLocaleId:
          type: string
          description: A CMS-specific identifier for the locale.
        enabled:
          type: boolean
          description: Indicates if the locale is enabled.
        displayName:
          type: string
          description: The display name of the locale, typically in English.
        displayImageId:
          type:
            - string
            - 'null'
          description: An optional ID for an image associated with the locale, nullable.
        redirect:
          type: boolean
          description: Determines if requests should redirect to the locale's subdirectory.
        subdirectory:
          type: string
          description: The subdirectory path for the locale, used in URLs.
        tag:
          type: string
          description: >-
            A tag or code representing the locale, often following a standard
            format like 'en-US'.
    SitesSiteIdPatchResponsesContentApplicationJsonSchemaLocalesSecondaryItems:
      type: object
      properties:
        id:
          type: string
          description: The unique identifier for the locale.
        cmsLocaleId:
          type: string
          description: A CMS-specific identifier for the locale.
        enabled:
          type: boolean
          description: Indicates if the locale is enabled.
        displayName:
          type: string
          description: The display name of the locale, typically in English.
        displayImageId:
          type:
            - string
            - 'null'
          description: An optional ID for an image associated with the locale, nullable.
        redirect:
          type: boolean
          description: Determines if requests should redirect to the locale's subdirectory.
        subdirectory:
          type: string
          description: The subdirectory path for the locale, used in URLs.
        tag:
          type: string
          description: >-
            A tag or code representing the locale, often following a standard
            format like 'en-US'.
    SitesSiteIdPatchResponsesContentApplicationJsonSchemaLocales:
      type: object
      properties:
        primary:
          $ref: >-
            #/components/schemas/SitesSiteIdPatchResponsesContentApplicationJsonSchemaLocalesPrimary
          description: The primary locale for the site or application.
        secondary:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdPatchResponsesContentApplicationJsonSchemaLocalesSecondaryItems
          description: A list of secondary locales available for the site or application.
    SitesSiteIdPatchResponsesContentApplicationJsonSchemaDataCollectionType:
      type: string
      enum:
        - value: always
        - value: optOut
        - value: disabled
    sites_update_Response_200:
      type: object
      properties:
        id:
          type: string
          format: objectid
          description: Unique identifier for the Site
        workspaceId:
          type: string
          format: objectid
          description: Unique identifier for the Workspace
        createdOn:
          type: string
          format: date-time
          description: Date the Site was created
        displayName:
          type: string
          description: Name given to Site
        shortName:
          type: string
          description: Slugified version of name
        lastPublished:
          type: string
          format: date-time
          description: Date the Site was last published
        lastUpdated:
          type: string
          format: date-time
          description: Date the Site was last updated
        previewUrl:
          type: string
          format: uri
          description: URL of a generated image for the given Site
        timeZone:
          type: string
          description: Site timezone set under Site Settings
        parentFolderId:
          type:
            - string
            - 'null'
          format: objectid
          description: The ID of the parent folder the Site exists in
        customDomains:
          type: array
          items:
            $ref: >-
              #/components/schemas/SitesSiteIdPatchResponsesContentApplicationJsonSchemaCustomDomainsItems
        locales:
          $ref: >-
            #/components/schemas/SitesSiteIdPatchResponsesContentApplicationJsonSchemaLocales
        dataCollectionEnabled:
          type: boolean
          description: Indicates if data collection is enabled for the site.
        dataCollectionType:
          $ref: >-
            #/components/schemas/SitesSiteIdPatchResponsesContentApplicationJsonSchemaDataCollectionType
          description: The type of data collection enabled for the site.
      required:
        - id
        - workspaceId
        - createdOn
        - displayName
        - shortName
        - lastPublished
        - lastUpdated
        - previewUrl
        - timeZone
        - dataCollectionEnabled
        - dataCollectionType

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.update(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.update("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"strings"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741"

	payload := strings.NewReader("{}")

	req, _ := http.NewRequest("PATCH", url, payload)

	req.Header.Add("Authorization", "Bearer <token>")
	req.Header.Add("Content-Type", "application/json")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Patch.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{}"

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.patch("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741")
  .header("Authorization", "Bearer <token>")
  .header("Content-Type", "application/json")
  .body("{}")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('PATCH', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741', [
  'body' => '{}',
  'headers' => [
    'Authorization' => 'Bearer <token>',
    'Content-Type' => 'application/json',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741");
var request = new RestRequest(Method.PATCH);
request.AddHeader("Authorization", "Bearer <token>");
request.AddHeader("Content-Type", "application/json");
request.AddParameter("application/json", "{}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = [
  "Authorization": "Bearer <token>",
  "Content-Type": "application/json"
]
let parameters = [] as [String : Any]

let postData = JSONSerialization.data(withJSONObject: parameters, options: [])

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "PATCH"
request.allHTTPHeaderFields = headers
request.httpBody = postData as Data

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Delete Site

DELETE https://api.webflow.com/v2/sites/{site_id}

Delete a site. 

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope | `sites:write`


Reference: https://developers.webflow.com/data/reference/enterprise/workspace-management/delete

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Delete Site
  version: endpoint_sites.delete
paths:
  /sites/{site_id}:
    delete:
      operationId: delete
      summary: Delete Site
      description: >
        Delete a site. 


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope | `sites:write`
      tags:
        - - subpackage_sites
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '204':
          description: Request was successful. No Content is returned.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_delete_Response_204'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '403':
          description: Forbidden request
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    sites_delete_Response_204:
      type: object
      properties: {}

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.delete(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.delete("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741"

	req, _ := http.NewRequest("DELETE", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Delete.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.delete("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('DELETE', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741");
var request = new RestRequest(Method.DELETE);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "DELETE"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Get Site Plan

GET https://api.webflow.com/v2/sites/{site_id}/plan

Get site plan details for the specified Site.

<Warning title="Enterprise Only">This endpoint requires an Enterprise workspace.</Warning>

Required scope | `sites:read`


Reference: https://developers.webflow.com/data/reference/enterprise/workspace-management/get-site-plan

## OpenAPI Specification

```yaml
openapi: 3.1.1
info:
  title: Get Site Plan
  version: endpoint_sites/plans.get-site-plan
paths:
  /sites/{site_id}/plan:
    get:
      operationId: get-site-plan
      summary: Get Site Plan
      description: >
        Get site plan details for the specified Site.


        <Warning title="Enterprise Only">This endpoint requires an Enterprise
        workspace.</Warning>


        Required scope | `sites:read`
      tags:
        - - subpackage_sites
          - subpackage_sites/plans
      parameters:
        - name: site_id
          in: path
          description: Unique identifier for a Site
          required: true
          schema:
            type: string
            format: objectid
        - name: Authorization
          in: header
          description: >-
            Bearer authentication of the form `Bearer <token>`, where token is
            your auth token.
          required: true
          schema:
            type: string
      responses:
        '200':
          description: Request was successful
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/sites_plans_get-site-plan_Response_200'
        '400':
          description: Request body was incorrectly formatted.
          content: {}
        '401':
          description: >-
            Provided access token is invalid or does not have access to
            requested resource
          content: {}
        '404':
          description: Requested resource not found
          content: {}
        '429':
          description: >-
            The rate limit of the provided access_token has been reached. Please
            have your application respect the X-RateLimit-Remaining header we
            include on API responses.
          content: {}
        '500':
          description: We had a problem with our server. Try again later.
          content: {}
components:
  schemas:
    SitesSiteIdPlanGetResponsesContentApplicationJsonSchemaId:
      type: string
      enum:
        - value: hosting-basic-v3
        - value: hosting-cms-v3
        - value: hosting-business-v3
        - value: hosting-ecommerce-standard-v2
        - value: hosting-ecommerce-plus-v2
        - value: hosting-ecommerce-advanced-v2
        - value: hosting-basic-v4
        - value: hosting-cms-v4
        - value: hosting-business-v4
        - value: hosting-ecommerce-standard-v3
        - value: hosting-ecommerce-plus-v3
        - value: hosting-ecommerce-advanced-v3
    SitesSiteIdPlanGetResponsesContentApplicationJsonSchemaName:
      type: string
      enum:
        - value: Basic Hosting
        - value: CMS Hosting
        - value: Business Hosting
        - value: ECommerce Standard Hosting
        - value: ECommerce Plus Hosting
        - value: ECommerce Advanced Hosting
    sites_plans_get-site-plan_Response_200:
      type: object
      properties:
        id:
          $ref: >-
            #/components/schemas/SitesSiteIdPlanGetResponsesContentApplicationJsonSchemaId
          description: ID of the hosting plan.
        name:
          $ref: >-
            #/components/schemas/SitesSiteIdPlanGetResponsesContentApplicationJsonSchemaName
          description: Name of the hosting plan.
        pricingInfo:
          type: string
          description: URL for more information about Webflow hosting plan pricing.

```

## SDK Code Examples

```python
from webflow import Webflow

client = Webflow(
    access_token="YOUR_ACCESS_TOKEN",
)
client.sites.plans.get_site_plan(
    site_id="580e63e98c9a982ac9b8b741",
)

```

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.plans.getSitePlan("580e63e98c9a982ac9b8b741");

```

```go
package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {

	url := "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/plan"

	req, _ := http.NewRequest("GET", url, nil)

	req.Header.Add("Authorization", "Bearer <token>")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := io.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}
```

```ruby
require 'uri'
require 'net/http'

url = URI("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/plan")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["Authorization"] = 'Bearer <token>'

response = http.request(request)
puts response.read_body
```

```java
HttpResponse<String> response = Unirest.get("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/plan")
  .header("Authorization", "Bearer <token>")
  .asString();
```

```php
<?php

$client = new \GuzzleHttp\Client();

$response = $client->request('GET', 'https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/plan', [
  'headers' => [
    'Authorization' => 'Bearer <token>',
  ],
]);

echo $response->getBody();
```

```csharp
var client = new RestClient("https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/plan");
var request = new RestRequest(Method.GET);
request.AddHeader("Authorization", "Bearer <token>");
IRestResponse response = client.Execute(request);
```

```swift
import Foundation

let headers = ["Authorization": "Bearer <token>"]

let request = NSMutableURLRequest(url: NSURL(string: "https://api.webflow.com/v2/sites/580e63e98c9a982ac9b8b741/plan")! as URL,
                                        cachePolicy: .useProtocolCachePolicy,
                                    timeoutInterval: 10.0)
request.httpMethod = "GET"
request.allHTTPHeaderFields = headers

let session = URLSession.shared
let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
    print(error as Any)
  } else {
    let httpResponse = response as? HTTPURLResponse
    print(httpResponse)
  }
})

dataTask.resume()
```

---

# Working with the Data API

> Learn what you can build with the Webflow Data API and how to get started with your first integration.

Webflow's Data API gives you programmatic access to your sites, workspaces, and the data within them. Using our REST API, you can build powerful server-side applications and integrations to automate workflows, manage content at scale, and extend Webflow's core functionality.

## What you can build

Discover what you can build with the Data API. Here are a few common workflows that developers are using to extend Webflow.

<DataApiCarousel>
  <Card
    title="Automate content workflows"
    href="/data/docs/working-with-the-cms"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg"
          alt=""
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg"
          alt=""
          className="block dark:hidden"
        />
      </>
    }
  >
    Create, update, and publish CMS items programmatically. Build custom
    publishing workflows and sync content from external sources.
  </Card>

  <Card
    title="Work with Custom Code"
    href="/data/docs/working-with-custom-code"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CodeBrackets.svg"
          alt=""
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CodeBrackets.svg"
          alt=""
          className="block dark:hidden"
        />
      </>
    }
  >
    Manage custom code on your sites at scale. Insert tracking scripts,
    verification tags, or custom JavaScript across multiple pages.
  </Card>

  <Card
    title="Manage Form Submissions"
    href="/data/reference/forms/forms/list"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/EditCanvas.svg" alt="Forms icon" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/EditCanvas.svg" alt="Forms icon" className="block dark:hidden" />
        </>
    }
  >
    Manage form submissions and connect your Webflow forms to external databases, CRMs, or other marketing automation tools.
  </Card>

  <Card
    title="Localize Site Content"
    href="/data/docs/working-with-localization"
    iconPosition="left"
    iconSize="10"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Localization.svg"
          alt=""
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Localization.svg"
          alt=""
          className="block dark:hidden"
        />
      </>
    }
  >
    Programmatically manage locales and translate content. Integrate with
    third-party translation services to create a fully multilingual website.
  </Card>

  <Card
    title="Manage Digital Assets"
    href="/data/docs/working-with-assets"
    iconPosition="left"
    iconSize="10"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Image.svg"
          alt=""
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Image.svg"
          alt=""
          className="block dark:hidden"
        />
      </>
    }
  >
    Sync assets between Webflow and external Digital Asset Managers (DAMs),
    upload new files, and manage your media library at scale.
  </Card>

  <Card
    title="SEO Optimization"
    href="/data/reference/pages-and-components/pages/update-page-settings"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/SEO.svg" alt="Search icon" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/SEO.svg" alt="Search icon" className="block dark:hidden" />
        </>
    }
  >
    Programmatically manage your site's SEO settings. Update meta titles, descriptions, and Open Graph settings in bulk to improve search rankings.
  </Card>

  <Card
    title="Manage Ecommerce Operations"
    href="/data/reference/ecommerce/products/list"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Ecommerce.svg"
          alt=""
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Ecommerce.svg"
          alt=""
          className="block dark:hidden"
        />
      </>
    }
  >
    Sync products and inventory with external management systems, automate order
    fulfillment, and build custom dashboards for your Webflow Ecommerce store.
  </Card>
</DataApiCarousel>

## Get started

<CardGroup>
  <Card
    title="Build with AI"
    description="Interact with the Webflow Data API using natural language."
    iconPosition="left"
    iconSize="12"
    href="/data/docs/ai-tools"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Ai.svg" alt="AI icon" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Ai.svg" alt="AI icon" className="block dark:hidden" />
        </>
    }
  >
    Interact with the Webflow Data API using by installing our MCP server and AI tools.<br /><br />
    <button class="button cc-secondary">Get started</button>
  </Card>

  <Card
    title="Make your first API call"
    description="Use the interactive API reference to make an request directly from the docs."
    iconPosition="left"
    iconSize="12"
    href="/data/reference/sites/list?explorer=true"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/CodeBrackets.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/CodeBrackets.svg" alt="" className="block dark:hidden" />
        </>
    }
  >
    Use the interactive API reference to make an API request directly from the docs.<br /><br />
    <button class="button cc-secondary">Call the API</button>
  </Card>

  <Card
    title="Get a site token"
    description="Secure an API token to integrate a single Webflow site with your internal systems."
    iconPosition="left"
    iconSize="12"
    href="/data/reference/site-token"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/KPIs.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/KPIs.svg" alt="" className="block dark:hidden" />
        </>
    }
  >
    Secure an API token to integrate a single Webflow site with your internal systems.<br /><br />
    <button class="button cc-secondary">Get a site token</button>
  </Card>

  <Card
    title="Build your first app"
    description="Create an App to create integrations across multiple Webflow sites."
    iconPosition="left"
    iconSize="12"
    href="/data/docs/register-an-app"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/App.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/App.svg" alt="" className="block dark:hidden" />
        </>
    }
  >
    Create an App to create integrations across multiple Webflow sites.<br /><br />
    <button class="button cc-secondary">Create an App</button>
  </Card>
</CardGroup>

<br />

<Note title="Looking to build with Webflow’s advanced features?">
  Apply for a [Developer Workspace](/data/docs/developer-workspace) to explore premium features like Localization and Enterprise APIs without the cost. Get the access you need to create powerful Apps for Webflow’s most sophisticated users and teams.<br /><br />
  <button class="cc-primary">Apply for a Developer Workspace</button>
</Note>

## Developer resources

Browse the full API reference, or get started quickly with our official SDKs and sample code.

<CardGroup cols={2}>
  <Card
    title="Data API Reference"
    href="/data/reference"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Docs.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Docs.svg" alt="" className="block dark:hidden" />
      </>
    }
  >
    Explore the complete list of endpoints, understand request/response formats,
    and test API calls directly in your browser.
  </Card>

  <Card
    title="Official SDKs"
    href="/data/reference/sdks"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/TBD.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/TBD.svg" alt="" className="block dark:hidden" />
      </>
    }
  >
    Access Webflow's JavaScript and Python SDKs to help you build integrations
    more quickly and efficiently.
  </Card>

  <Card
    title="Sample Starter App"
    href="https://github.com/Webflow-Examples/webflow-app-starter-v2"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/CodeBrackets.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/CodeBrackets.svg" alt="" className="block dark:hidden" />
      </>
    }
  >
    Clone a simple starter app that demonstrates how to authenticate and
    interact with Webflow's API.
  </Card>

  <Card
    title="Webflow App Marketplace"
    href="https://webflow.com/apps"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Marketplace  .svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Marketplace.svg" alt="" className="block dark:hidden" />
      </>
    }
  >
    Browse the Webflow App Marketplace and discover apps that are helping Webflow users build their sites.
  </Card>
</CardGroup>

---

# Register an App

> Create your first Webflow App in minutes

To start developing a Webflow App, you'll first need to register an app to a workspace. This guide will walk you through creating and registering your app with Webflow.

## Watch: How to register a Webflow App

<iframe width="100%" height="400" src="https://www.youtube.com/embed/rfEkIB0_ZDA?start=102" title="How to register a Webflow App" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

## Prerequisites

* A Webflow account.
* A Webflow Workspace with Admin permissions.

<Warning title="Admin access required">
  Only Workspace admins can create apps, view client secrets, upload bundles, and modify app settings.
</Warning>

## Register an app

![Webflow Dashboard](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/d5af2bfd73559d94bb617df3760dd5164a00eff22cb6164715eacd13a64f827a/products/data/pages/Apps/getting-started-apps/register-an-app/Webflow-Dashboard.png)

<Note title="App installations for external users">
  New apps are only available to users in your app's workspace. By default, external users can't install your app until it's approved and published in the Webflow Marketplace.

  You can test your app with external users before submitting for review. See the [user testing instructions](/apps/docs/marketplace/overview#user-testing-before-publishing) for details.
</Note>

<Steps>
  ### Open the Webflow Dashboard

  Login to your Webflow account and navigate to your Dashboard.

  ### Choose a Workspace

  Select the Workspace for your app. While you can use any workspace, it's recommended to create a dedicated development workspace to keep your apps organized and separate from production environments.

  <Note title="New to Webflow?">
    Get started with Webflow's [free Developer Workspace](/data/docs/developer-workspace) designed for testing and developing Apps.
  </Note>

  ### Navigate to Workspace settings

  From the "settings" menu on the left sidebar, select the "Apps & Integrations" tab. Scroll down to the "App Development" section and click the "Create an App" button. This will open the App creation modal.

  <Frame background="subtle">
    ![App Development section](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/4ab65f7265756f55c267c7b3ab1bf2196bd7d937133b251c2917a6af073157c2/products/data/pages/Apps/getting-started-apps/register-an-app/App-Development.png)
  </Frame>

  ### Add app details

  <Frame background="subtle"> ![App Details](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/6cc205d25f4dce71de2585fc1eba464befddd8b87dfed8d638197b3d600d1066/products/data/pages/Apps/getting-started-apps/register-an-app/App-Details.png)</Frame>
  Here, you'll add the following basic information for your app:

  * **Name:** The name of your app
  * **Description:** A brief summary of your app's purpose (140 characters max)
  * **Icon:** An icon to represent your app
  * **Homepage URL:** A valid HTTPS link to your app's website

  For more details on how your App will appear in the Marketplace, see the [app listing guide](/apps/docs/marketplace/listing-your-app).

  <Accordion title="Installation settings (optional)">
    You can configure your app's installation scope by toggling the "Restrict app installation to a specific site" option. When enabled, users will only be able to authorize your app for a single site at a time, providing more granular control over permissions. When disabled (default), users can authorize your app for multiple sites or their entire Workspace at once, which is convenient for apps that need broader access. Choose the option that best aligns with your app's security requirements and user experience.
  </Accordion>

  ### Define App capabilities

  Click the "Continue" button to define your App's capabilities.

  <Frame background="subtle">
     

    ![App Capabilities](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/ea35928839fea44cda18a2382e37f5be34e2646520fcb1072d461c03d6fb7e7f/products/data/pages/Apps/getting-started-apps/register-an-app/select-scopes.gif)
  </Frame>

  Here, you'll select the capabilities your App needs to function. You can choose from the following capabilities:

  * **[Designer Extension](/apps/docs/designer-extensions):** Enables your App to interact with the Webflow Designer.
  * **[Data Client](/data/docs/data-clients):** Enables your App to access and update data from Webflow's servers.

  You can select one or both of these capabilities. [Selecting both will allow your App to interact with both Webflow's servers and the Webflow Designer as a hybrid app.](/apps/docs/hybrid-apps)

  <Accordion title="Data Client: OAuth configuration">
    If you've selected the Data Client capability, you'll need to configure OAuth settings for your app:

    * **Select scopes:** Choose the specific API permissions your app requires to function properly. Each scope grants access to different Webflow resources such as sites, collections, or assets. [Learn more about available scopes in our guide.](/data/reference/scopes)
    * **Add redirect URI:** Enter a valid HTTPS URL where users will be redirected after authorizing your app. This is a critical security component of the OAuth flow that ensures authorization codes are only sent to trusted destinations. [Learn more about implementing OAuth authentication](/data/reference/oauth-app). You can add or modify redirect URIs later as needed.
  </Accordion>

  After configuring your app's capabilities and OAuth settings, click the "Create app" button to finalize the registration process.

  ### Review your App

  <Frame background="subtle">
    ![App details](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/b69033ed6e835003a385e6bd83e7a2c4f56d32940e240cbe6abb7647e3db7a8b/products/data/pages/Apps/getting-started-apps/register-an-app/Completed-App-Details.png)
  </Frame>

  Congratulations! You've successfully registered your App in Webflow. On successful registration, your App will be displayed in the App Development section. You'll see key details including the Client ID and Client Secret. From here, you can also update your App's details, capabilities, and installation settings.

  <Accordion title="Designer Extension: App information">
    If you've selected the Designer Extension capability, you'll see additional information specific to Designer Extensions:

    * **Publish Extension Version:** This button will open a modal where you can upload a new version of your Designer Extension and add version notes. For detailed publishing instructions, see our [Publishing Designer Extensions guide](/apps/docs/publishing-your-app).

    * **Designer Extension URI:** The URI where your extension will be served within the Webflow Designer iframe. This URI is important when configuring CORS settings for your extension.

    * **Versions:** View all previously published versions of your Designer Extension. This helps you track your extension's version history and rollback if needed.
  </Accordion>

  <Warning title="App Security">
    * Never commit your Client Secret to version control
    * Rotate your Client Secret if it's ever exposed
    * Store secrets in environment variables or a secure secret management system
    * Implement proper CORS policies for Designer Extensions
  </Warning>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Why am I getting an Invalid Redirect URI error?">
    When you receive an "Invalid Redirect URI" error during OAuth authorization, it typically means there's a mismatch between the URI you're using and what you registered. To resolve this:

    * Ensure the redirect URI matches **exactly** what you registered
    * Check for trailing slashes - `https://example.com/callback` and `https://example.com/callback/` are treated as different URIs
    * If using localhost for development, make sure the port number matches exactly
    * For Ngrok or other tunneling services, remember that the URL changes each time you restart the tunnel - update your registered URI accordingly
  </Accordion>

  <Accordion title="Why can't I see the app development section in my workspace settings?">
    Verify that:

    * You're in the correct Workspace
    * You have Admin permissions on the Workspace (only Workspace admins can view and manage apps)
    * Your account has been verified via email and has 2-factor authentication enabled
    * You've navigated to Workspace Settings > App Development (not Site Settings)
    * Your Webflow plan supports app development (available on Team and Enterprise plans)

    If you've confirmed all these requirements and still can't see the App Development section, try clearing your browser cache or using a different browser, then contact Webflow Support if the issue persists.
  </Accordion>

  <Accordion title="Why can't external users install my app?">
    New apps are only available to users in your app's workspace. External users can't install your app until it's approved and published in the Webflow Marketplace.

    You can invite external test users to your app before submitting for review. See the [user testing instructions](/data/docs/overview#user-testing-before-publishing) for details.
  </Accordion>
</AccordionGroup>

## Next steps

To see your new App in action, follow these Quickstart guides, which will get your App up and running in Webflow.

<CardGroup cols={3}>
  <Card
    title="Data Client"
    href="/data/docs/getting-started-data-clients"
    iconPosition="left"
    iconSize="10"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Switch.svg" alt="" className="hidden dark:block" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Switch.svg" alt="" className="block dark:hidden" />
    </>
  }
  >
    Access and manipulate Webflow site data including CMS collections, items, assets, and form submissions through secure API endpoints.
  </Card>

  <Card
    title="Designer Extension"
    href="/designer/docs/getting-started-designer-extensions"
    iconPosition="left"
    iconSize="10"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Styles.svg" alt="" className="hidden dark:block" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Styles.svg" alt="" className="block dark:hidden" />
    </>
  }
  >
    Create extensions that automate design tasks, manipulate elements, and enhance the Webflow Designer experience.
  </Card>

  <Card title="Hybrid App" href="/data/docs/hybrid-apps">
    Use both the Data Client and Designer Extension in tandem.
  </Card>
</CardGroup>

---

# Managing CMS Collections and Items

> An in-depth, example-driven guide to the end-to-end workflow of managing CMS collections and items.

This page covers how to programmatically manage your Webflow CMS content. You'll learn how to:

1. Create a collection and define its schema.
2. Populate the collection with content and perform CRUD operations on those items.
3. Publish a collection and its items.

<Note title="Generate schemas and content with AI">
  Use the [MCP Server](/data/docs/ai-tools) to create a Collection and its Items from a single natural language prompt. Go from a simple description to a fully populated Collection in seconds.
</Note>

***

## 1. Creating a collection

The first step in managing your content is to create a collection, which serves as a blueprint for your items. This process involves getting your `site_id`, defining a schema, and then creating the collection via the API. To learn more about collections, see the [Collections Reference](/data/reference/cms/collections).

<Steps>
  <Step title="Get your site ID">
    Every collection is associated with a specific Webflow site. You'll need your `site_id` to create a collection. You can find this by calling the [List Sites](/data/reference/sites/list) endpoint and locating the site you want to work with in the response.

    <EndpointRequestSnippet endpoint="GET /v2/sites" />
  </Step>

  <Step title="Define the collection schema">
    Next, you'll define the schema for your collection. This includes the `displayName` for the collection, the `singularName` for its items, the `slug` for the collection, and an array of `fields`.

    #### Default fields

    Each collection will always have the following fields in its schema:

    * `name` - The name of the item
    * `slug` - The slug of the item. Slugs should be unique, and formatted as all lowercase with no spaces. Any spaces will be converted to "-".

    #### Custom fields

    You can add additional custom fields to the collection. Each field will have its own `type`, `displayName`, `slug`, and other properties to configure its behavior. A collection's schema can have up to 60 fields. To see the different field types and their properties, see the [Field Types & Item Values Reference](/data/reference/field-types-item-values).

    Here is an example of a schema for a "Hitchhiker's Guide" collection that includes various field types:

    ```javascript title="Example collection schema"
    {
      "displayName": "Guide Entries",
      "singularName": "Guide Entry",
      "slug": "guide-entries",
      "fields": [
        {
          "type": "PlainText",
          "displayName": "Entry Title",
          "slug": "entry-title",
          "isRequired": true
        },
        {
          "type": "RichText",
          "displayName": "Entry HTML",
          "slug": "entry-html"
        },
        {
          "type": "Image",
          "displayName": "Illustration Image",
          "slug": "illustration-image"
        },
        {
          "type": "Number",
          "displayName": "Importance Level",
          "slug": "importance-level"
        },
        {
          "type": "Switch",
          "displayName": "Is Essential",
          "slug": "is-essential"
        },
        {
          "type": "Reference",
          "displayName": "Related Entry",
          "slug": "related-entry",
          "metadata": {
            "collectionId": "7f15043107e2fc95644e93807ee25dd6"
          }
        },
        {
          "type": "Option",
          "displayName": "Item Type",
          "slug": "item-type",
          "metadata": {
            "options": [
              {"name": "Survival Gear"},
              {"name": "Gadget"},
              {"name": "Other"}
            ]
          }
        }
      ]
    }
    ```

    <Warning title="Field Validations">
      When defining a field in the Webflow UI, you can also specify validations for the field. Currently, the API doesn't support field validations. All validations must be specified in the Webflow UI.
    </Warning>
  </Step>

  <Step title="Create the collection">
    With your `site_id` and schema, you can now create the collection by making a `POST` request to the [Create Collection](/data/reference/cms/collections/create) endpoint.

    <EndpointRequestSnippet endpoint="POST /v2/sites/{site_id}/collections" example="CollectionCreate" />
  </Step>
</Steps>

#### Adding advanced field types

When defining a collection's schema, `Option` and `Reference` fields require a `metadata` object to be configured.

<Accordion title="Defining an Option Field">
  The `Option` field allows you to create a predefined list of choices for an item, which can be selected from a dropdown menu in the CMS.

  When creating an `Option` field, you must provide a `metadata` object containing an `options` array. Each object in the array defines a choice with a `name`. Webflow will automatically generate an `id` for each option.

  <CodeBlocks>
    <Code title="Field definition for an Option field">
      ```javascript
      {
        "type": "Option",
        "displayName": "Item Type",
        "slug": "item-type",
        "metadata": {
          "options": [
            {"name": "Survival Gear"},
            {"name": "Gadget"},
            {"name": "Other"}
          ]
        }
      }
      ```
    </Code>
  </CodeBlocks>
</Accordion>

<Accordion title="Defining Reference and Multi-Reference Fields">
  The `Reference` and `Multi-Reference` fields allow you to link a collection item to one or more other items from another collection.

  When creating `Reference` or `Multi-Reference` fields, you must provide a `metadata` object containing the `collectionId` of the collection you intend to reference.

  <Steps>
    <Step title="Get the Collection ID">
      First, you need the `id` of the collection you want to reference. You can get this by calling the [List Collections](/data/reference/cms/collections/list) endpoint and finding the target collection in the response.

      <EndpointRequestSnippet endpoint="GET /v2/sites/{site_id}/collections" />
    </Step>

    <Step title="Define the Field">
      Use the retrieved `collectionId` in the `metadata` object when defining your `Reference` or `Multi-Reference` field in a "Create Collection" or "Create Field" request.

      <CodeBlocks>
        <Code title="Field definition for a Reference field">
          ```javascript
          {
            "type": "Reference",
            "displayName": "Related Entry",
            "slug": "related-entry",
            "metadata": {
              "collectionId": "7f15043107e2fc95644e93807ee25dd6" // ID of the collection to reference
            }
          }
          ```
        </Code>
      </CodeBlocks>
    </Step>
  </Steps>
</Accordion>

***

## 2. Managing collection items

Once your collection is created, you can begin to populate it with items. The following sections demonstrate how to perform CRUD (Create, Read, Update, Delete) operations on the items in your new collection.

When creating collection items, you can use the staged or live endpoints to manage the item's publishing state. For more details on publishing options when creating an item, see the [Publishing Guide](/data/docs/working-with-the-cms/publishing).

### Creating an item

<Steps>
  <Step title="Get the collection ID">
    First, you need the `id` of the collection you want to create an item for. The [Create Collection](/data/reference/cms/collections/create) response will include the collection's `id`. However, you can also get the collection ID by calling the [List Collections](/data/reference/cms/collections/list) endpoint and finding the collection in the response.

    <EndpointRequestSnippet endpoint="GET /v2/collections/{collection_id}" />
  </Step>

  <Step title="Create a collection item">
    To add an item, send a `POST` request to the [Create Collection Item](/data/reference/cms/collection-items/create-item) endpoint. The `fieldData` object in the request body must match the schema you defined for the collection.

    <EndpointRequestSnippet endpoint="POST /v2/collections/{collection_id}/items" example="SingleItemUpdate" />
  </Step>
</Steps>

#### Populating advanced field types

Most fields accept simple values like strings or numbers. However, fields like `Option`, and `Reference` require specific identifiers. The sections below explain how to get the correct IDs to populate these fields when creating or updating an item.

<Accordion title="Populating an option field">
  `Option` fields require the unique `id` of the choice, which is defined in the collection's schema.

  <Steps>
    <Step title="Get collection details">
      To find the `id` for each option, retrieve the collection's schema by calling the [Get Collection Details](/data/reference/cms/collections/get) endpoint.

      <EndpointRequestSnippet endpoint="GET /v2/collections/{collection_id}" />
    </Step>

    <Step title="Find the option ID">
      In the response, locate your `Option` field within the `fields` array. The `validations.options` array will contain each choice with its `name` and `id`.

      ```json
      // Snippet from GET /v2/collections/{collection_id} response
      {
        "fields": [
          {
            "type": "Option",
            "slug": "item-type",
            "validations": {
              "options": [
                { "name": "Survival Gear", "id": "66f6e966c9e1dc700a857ca3" },
                { "name": "Gadget", "id": "66f6e966c9e1dc700a857ca4" },
                { "name": "Other", "id": "66f6e966c9e1dc700a857ca5" }
              ]
            }
          }
        ]
      }
      ```
    </Step>

    <Step title="Use the option ID">
      When creating or updating an item, pass the `id` of your chosen option as a string in the `fieldData`.

      <CodeBlocks>
        <Code title="fieldData with an option field">
          ```javascript
          {
            "fieldData": {
              "item-type": "66f6e966c9e1dc700a857ca3" // ID for "Survival Gear"
            }
          }
          ```
        </Code>
      </CodeBlocks>
    </Step>
  </Steps>
</Accordion>

<Accordion title="Populating reference and multi-reference fields">
  `Reference` and `Multi-Reference` fields link an item to one or more other collection items. To create a reference, you need the `id` of the item you want to link to.

  <Note>
    To reference a collection item, the collection must be published to the site.
  </Note>

  <Steps>
    <Step title="Find the item IDs">
      To get the `id` of the item you want to reference, call the [List Items](/data/reference/cms/collection-items/staged-items/list-items) endpoint on the collection that contains the target item. You can filter the results to find the specific items you need.
    </Step>

    <Step title="Use the item IDs">
      For a `Reference` field, pass the item `id` as a string. For a `Multi-Reference` field, pass an array of item `id` strings.

      <CodeBlocks>
        <Code title="fieldData with reference fields">
          ```javascript
          {
            "fieldData": {
              "related-entry": "42b720ef280c7a7a3be8cabe", // Single item reference
              "mentioned-in": [
                "62b720ef280c7a7a3be8cabd",
                "62c880ef281c7b7b4cf9dabc"
              ] // Multi-item reference
            }
          }
          ```
        </Code>
      </CodeBlocks>
    </Step>
  </Steps>
</Accordion>

### Listing, updating, and deleting items

<Steps>
  <Step title="List collection items">
    To get a list of all items in a collection, send a `GET` request to the [List Collection Items](/data/reference/cms/collection-items/staged-items/list-items) endpoint.

    <EndpointRequestSnippet endpoint="GET /v2/collections/{collection_id}/items" />

    #### Pagination

    When listing items, the response will be paginated. You can control the pagination using the `limit` and `offset` query parameters.

    * `limit`: The maximum number of items to return (up to 100).
    * `offset`: The number of items to skip from the beginning of the list.

    By default, the API will return up to 100 items. If a collection contains more than 100 items, you can use `offset` to retrieve additional pages of results. For example, to get the second page of 100 items, you would set `offset` to `100`.

    <EndpointRequestSnippet endpoint="GET /v2/collections/{collection_id}/items?offset=100&limit=100" />

    The response will include a `pagination` object with `total`, `limit`, and `offset` fields, which you can use to loop through the pages of results.

    ```json title="Example pagination object"
    // Snippet from GET /v2/collections/{collection_id}/items response
    {
      "items": [
        // ... item data ...
      ],
      "pagination": {
        "total": 250,
        "limit": 100,
        "offset": 100
      }
    }
    ```
  </Step>

  <Step title="Update a collection item">
    To modify an existing item, you'll first need its `id`. You can get the item's `id` by calling the [List Collection Items](/data/reference/cms/collection-items/staged-items/list-items) endpoint and finding the item in the response.

    Then, use the `PATCH` endpoint to [Update a Collection Item](/data/reference/cms/collection-items/staged-items/update-items). You only need to provide the fields you want to change in the `fieldData` object.

    <EndpointRequestSnippet endpoint="PATCH /v2/collections/{collection_id}/items/{item_id}" example="SingleItem" />
  </Step>

  <Step title="Delete a collection item">
    To remove an item from a collection, you'll need its `id`. You can get the item's `id` by calling the [List Collection Items](/data/reference/cms/collection-items/staged-items/list-items) endpoint and finding the item in the response.

    Then, use the `DELETE` endpoint to [Delete a Collection Item](/data/reference/cms/collection-items/staged-items/delete-items).

    <EndpointRequestSnippet endpoint="DELETE /v2/collections/{collection_id}/items/{item_id}" />
  </Step>
</Steps>

***

## 3. Publishing a collection

Once you've created your collection and its items, you can publish the collection. This will make the collection and its items visible on your live site. Additionally, this allows the collection's items to be referenced by other collections.

To publish a collection or any collection items, **you'll need to publish the entire site.** You can publish the site by calling the [Publish Site](/data/reference/sites/publish) endpoint.

<EndpointRequestSnippet endpoint="POST /v2/sites/{site_id}/publish" />

***

## Next steps

Once you have created your collections and populated them with content, you can explore more advanced topics like publishing and localization.

<CardGroup>
  <Card
    title="Publishing Content"
    href="/data/docs/working-with-the-cms/publishing"
    iconPosition="left"
    iconSize="12"
    icon={
    <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/PublishDesigner.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/PublishDesigner.svg" alt="" className="block dark:hidden" />
    </>
}
  >
    Learn how to tailor CMS publishing workflows to your needs.
  </Card>

  <Card
    title="Localizing Content"
    href="/data/docs/working-with-the-cms/localization"
    iconPosition="left"
    iconSize="12"
    icon={
    <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Localization.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Localization.svg" alt="" className="block dark:hidden" />
    </>
}
  >
    Learn how to create and manage linked CMS items across multiple locales.
  </Card>
</CardGroup>

---

# Publishing with the CMS API

> Learn how to publish content with the CMS API

The CMS API uses a staging system that separates draft from published content. This workflow gives you control over what goes live and when, ensuring content quality before publication.

All CMS content exists in one of two states:

<CardGroup cols={2}>
  <Card title="Staged">
    Draft content that can be previewed but isn't visible on the live site. Use this state to prepare and review changes.
  </Card>

  <Card title="Live">
    Content that's published and visible on your site. A live item can have a staged version for updates that don't affect the original.
  </Card>
</CardGroup>

Each CMS Item has `isDraft` and `lastPublished` properties that indicate its current state. The combination of these properties determines an item's status, which is reflected in the Webflow UI.

| Status                                 | Description                                                                                           | `lastPublished` | `isDraft` |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------- | --------- |
| <StatusBadge status="published" />     | Content is live and visible on your website.                                                          | `exists`        | `false`   |
| <StatusBadge status="draft-changes" /> | Live content with unpublished draft changes.                                                          | `exists`        | `true`    |
| <StatusBadge status="draft" />         | Content is in a draft state and has never been published.                                             | `null`          | `true`    |
| <StatusBadge status="queued" />        | Content will be published on the next site-wide publish.                                              | `null`          | `false`   |
| <StatusBadge status="scheduled" />     | Content is scheduled for future publication. This can not be controlled by the CMS API.               | N/A             | N/A       |
| <StatusBadge status="archived" />      | Content has been archived and removed from the live site. Use the `isArchived` flag to archive items. | N/A             | N/A       |

This mapping helps you understand how API operations affect the content status displayed in the Webflow interface.

## Publishing workflows

The CMS API provides flexible publishing options to fit your workflow. Use the accordions below to learn more about each publishing method and see which endpoints to use.

<AccordionGroup>
  <Accordion title="Individual item publishing">
    Publish, unpublish, or stage a single item without affecting other content. This gives you granular control for targeted updates, such as publishing a single blog post or making a small correction to an existing page.

    **Associated endpoints:**

    <ApiEndpoint method="POST" endpoint="/collections/:collection_id/items/publish" link="/data/reference/cms/collection-items/staged-items/publish-item" />

    <ApiEndpoint method="DELETE" endpoint="/collections/:collection_id/items/live" link="/data/reference/cms/collection-items/live-items/delete-items-live" />

    ```ts title={"publishSingleItem.ts"}
    import { WebflowClient } from "webflow-api";

    const webflow = new WebflowClient({
      accessToken: "YOUR_ACCESS_TOKEN",
    });

    const item = await webflow.collections.items.publishItem("COLLECTION_ID", {
      itemIds: ["ITEM_ID"],
    });

    console.log(item);
    ```
  </Accordion>

  <Accordion title="Site-wide publishing">
    Publish all staged content across your entire site in a single operation. This is ideal for coordinated releases, such as a new marketing campaign, a product launch, or a site redesign where multiple content changes need to go live simultaneously.

    <ApiEndpoint method="POST" endpoint="/sites/:site_id/publish" />

    ```ts title={"publishSite.ts"}
    import { WebflowClient } from "webflow-api";

    const webflow = new WebflowClient({
      accessToken: "YOUR_ACCESS_TOKEN",
    });

    const site = await webflow.sites.publish("SITE_ID", {
      customDomains: ["CUSTOM_DOMAIN_ID_1", "CUSTOM_DOMAIN_ID_2"],
      publishToWebflowSubdomain: true,
    });

    console.log(site);
    ```
  </Accordion>

  <Accordion title="Draft changes on a live item">
    When a live item’s `isDraft` property is set to `true`, it remains published on your site. This allows you to safely update the item in a draft state without changing what's visible to your site visitors. The changes will only go live when the item's `isDraft` property is set to `false` and the item is published again.

    <ApiEndpoint method="PATCH" endpoint="/collections/:collection_id/items" />

    ```ts title={"updateLiveItem.ts"}
    import { WebflowClient } from "webflow-api";

    const webflow = new WebflowClient({
      accessToken: "YOUR_ACCESS_TOKEN",
    });

    const item = await webflow.collections.items.updateItem("COLLECTION_ID", "ITEM_ID", {
      isDraft: true, // Set to true to update the live item in a draft state
      fieldData: {
        name: "Heart of Gold",
        slug: "heart-of-gold",
        description: "The Heart of Gold is a ship that is used to travel through space using the infinite improbability drive.",
        pilots: ["Trisha McMillan", "Zaphod Beeblebrox"],
      },
    });

    console.log(item);
    ```
  </Accordion>

  <Accordion title="Update a live item directly">
    To update an item and publish the changes to your live site in a single action, use the `updateItemLive` endpoint. This is useful for making quick corrections or immediate updates without a review stage.

    <ApiEndpoint method="PATCH" endpoint="/collections/:collection_id/items/live" />

    ```ts title={"updateLiveItemDirectly.ts"}
    import { WebflowClient } from "webflow-api";

    const webflow = new WebflowClient({
      accessToken: "YOUR_ACCESS_TOKEN",
    });

    const item = await webflow.collections.items.updateItemLive(
      "COLLECTION_ID",
      "ITEM_ID",
      {
        fieldData: {
          name: "Heart of Gold",
          slug: "heart-of-gold",
          description: "The Heart of Gold is a ship that is used to travel through space using the infinite improbability drive.",
          pilots: ["Trisha McMillan", "Zaphod Beeblebrox"],
        }
      }
    );

    console.log(item);

    ```
  </Accordion>

  <Accordion title="Unpublish an item">
    To remove an item from the live site, you must explicitly call the `unpublishItem` endpoint. This action doesn't delete the item from the CMS; it unpublishes it and sets its `isDraft` property to `true`, allowing you to continue editing it.

    <ApiEndpoint method="DELETE" endpoint="/collections/:collection_id/items/live" />

    ```ts title={"unpublishItem.ts"}
    import { WebflowClient } from "webflow-api";

    const webflow = new WebflowClient({
      accessToken: "YOUR_ACCESS_TOKEN",
    });

    // Note: This does not delete the item, it just unpublishes it.
    const item = await webflow.collections.items.deleteItemLive(
      "COLLECTION_ID",
      "ITEM_ID"
    );

    console.log(item);

    ```
  </Accordion>

  <Accordion title="Archiving content">
    Archiving unpublishes items from your live site at the next full-site publish, but keeps the items accessible in the CMS. To archive an item, set the `isArchived` property on the item to `true`.

    <ApiEndpoint method="PATCH" endpoint="/collections/:collection_id/items" />

    <ApiEndpoint method="PATCH" endpoint="/collections/:collection_id/items/live" />

    ```ts title={"archiveItem.ts"}
    import { WebflowClient } from "webflow-api";

    const webflow = new WebflowClient({
      accessToken: "YOUR_ACCESS_TOKEN",
    });

    const item = await webflow.collections.items.updateItem("COLLECTION_ID", "ITEM_ID", {
      isArchived: true, // Set to true to archive the item
      fieldData: {
        name: "Heart of Gold",
        slug: "heart-of-gold",
        description: "The Heart of Gold is a ship that is used to travel through space using the infinite improbability drive.",
        pilots: ["Trisha McMillan", "Zaphod Beeblebrox"],
      },
    });

    console.log(item);
    ```
  </Accordion>
</AccordionGroup>

## Next steps

Now that you understand the publishing workflows, here are a few topics you might want to explore next:

<CardGroup cols={2}>
  <Card title="Content Delivery" href="/data/docs/working-with-the-cms/content-delivery">
    Deliver your published content to your live application.
  </Card>

  <Card title="Webhooks" href="/data/reference/webhooks/events/collection-item-created">
    Trigger automated workflows when content is published or unpublished.
  </Card>
</CardGroup>

---

# Localization with the CMS API

> A guide to the concepts behind managing multi-locale content with the CMS API.

Webflow localization provides an end-to-end solution for adapting your site for a global audience. The API gives you programmatic control over localizing both dynamic **CMS Content** and **Static Page Content**.

* **CMS content localization** enables you to create variants of a single CMS item for each locale.
* **Static content localization** uses the [Pages API](/data/reference/pages-and-components/pages/list) to update DOM elements and localize SEO metadata. Learn more about [localizing pages →](/data/docs/working-with-localization/localize-pages).

This guide covers the core concepts of **CMS localization**.

## Key concepts

Understanding a few key concepts is essential for working with localization via the API. At its core, a single CMS item becomes a group of item variants when you add locales.

<CardGroup cols={2}>
  <Card
    title="Item ID"
    iconSize="12"
    iconPosition="left"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Localization.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Localization.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    When you create an item in multiple locales, all variants are linked by a shared `itemId`, which represents the entire item group.
  </Card>

  <Card
    title="CMS Locale ID"
    iconSize="12"
    iconPosition="left"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    The `cmsLocaleId` is a unique locale identifier when working with CMS resources. Always include it when creating, updating, and retrieving localized CMS items.
  </Card>
</CardGroup>

### Getting locale identifiers

To get the `localeId` and `cmsLocaleId` for your site's configured locales, use the [Get Site](/data/reference/sites/get) endpoint. The response will include a `locales` object containing the primary locale and any secondary locales. Before using these endpoints, you must first **enable localization** in the Site settings within the Designer.

```json title={"response.json"}
{
  "locales": {
    "primary": {
      "id": "653fd9af6a07fc9cfd7a5e57",
      "cmsLocaleId": "653ad57de882f528b32e810e",
      "enabled": false,
      "displayName": "English (United States)",
      "displayImageId": null,
      "redirect": true,
      "subdirectory": "",
      "tag": "en-US"
    },
    "secondary": [
      {
        "id": "653fd9af6a07fc9cfd7a5e56",
        "cmsLocaleId": "653fd9af6a07fc9cfd7a5e5d",
        "enabled": true,
        "displayName": "French (France)",
        "displayImageId": null,
        "subdirectory": "fr-fr",
        "tag": "fr-FR"
      },
      {
        "id": "654112a3a525b2739d97664c",
        "cmsLocaleId": "654112a3a525b2739d97664f",
        "enabled": true,
        "displayName": "Spanish (Mexico)",
        "displayImageId": null,
        "subdirectory": "es-mx",
        "tag": "es-MX"
      }
    ]
  }
}

```

## Managing localized content

You can create and update localized CMS items via the API, as well as independently publish items in each locale.

### Creating localized items

Creating a new localized item is a two-step process:

1. **Create items across all locales**

   Call the [`Create Items`](/data/v2.0.0/reference/cms/collection-items/staged-items/create-items) endpoint with an array of `cmsLocaleIds` for every locale you want to target. Provide a single `fieldData` object containing the content for the primary locale. The API creates a unique item variant for each specified locale, all linked by a shared `itemId` and populated with the initial content.

   <CodeBlocks>
     ```ts title={"createItemRequest.ts"}
     import { WebflowClient } from "webflow-api";

     const webflow = new WebflowClient({
       accessToken: "YOUR_ACCESS_TOKEN",
     });

     const newItemVariants = await webflow.collections.items.createItems("COLLECTION_ID", {
         cmsLocaleIds: ["CMS_LOCALE_ID_1", "CMS_LOCALE_ID_2"],
         fieldData: {
             name: "The Hitchhiker's Guide to the Galaxy",
             slug: "the-hitchhikers-guide-to-the-galaxy",
             description: "Don't Panic!",
         },
     })

     console.log(newItemVariants);
     ```

     ```json title={"createItemResponse.json"}
     {
       "items": [
         {
           "id": "68d57edec48f9c414ae8f6cb",
           "cmsLocaleId": "664b1450fbd3987b1a4e1742",
           "lastPublished": null,
           "lastUpdated": "2025-09-25T17:41:50.163Z",
           "createdOn": "2025-09-25T17:41:50.163Z",
           "isArchived": false,
           "isDraft": true,
           "fieldData": {
             "name": "The Hitchhiker's Guide to the Galaxy",
             "slug": "the-hitchhikers-guide-to-the-galaxy",
             "description": "Don't Panic!"
           }
         },
         {
           "id": "68d57edec48f9c414ae8f6cb",
           "cmsLocaleId": "664b1450fbd3987b1a4e1740",
           "lastPublished": null,
           "lastUpdated": "2025-09-25T17:41:50.163Z",
           "createdOn": "2025-09-25T17:41:50.163Z",
           "isArchived": false,
           "isDraft": true,
           "fieldData": {
             "name": "The Hitchhiker's Guide to the Galaxy",
             "slug": "the-hitchhikers-guide-to-the-galaxy",
             "description": "Don't Panic!"
           }
         }
       ]
     }
     ```
   </CodeBlocks>

2. **Update each variant with translated content**

   After creating the locale-specific variants, make a request to the [`Update Item`](/data/v2.0.0/reference/cms/collection-items/staged-items/update-item) endpoint. In the request, pass the shared `itemId`, the specific `cmsLocaleId` for the variants you are updating, and its unique, translated `fieldData`.

   <CodeBlocks>
     ```ts title={"updateItemRequest.ts"}
     import { WebflowClient } from "webflow-api";

     const webflow = new WebflowClient({
       accessToken: "YOUR_ACCESS_TOKEN",
     });

     const updateItems = await webflow.collections.items.updateItems(
       "COLLECTION_ID",
       {
         items: [
           {
             id: "ITEM_ID",
             cmsLocaleId: "CMS_LOCALE_ID-FRENCH",
             fieldData: {
               name: "Le Guide du voyageur galactique",
               slug: "le-guide-du-voyageur-galactique",
               description: "Pas de panique !",
             },
           },
           {
             id: "ITEM_ID",
             cmsLocaleId: "CMS_LOCALE_ID-SPANISH",
             fieldData: {
               name: "Guía del autoestopista galáctico",
               slug: "guia-del-autoestopista-galactico",
               description: "¡Que no cunda el pánico!",
             },
           },
         ],
       }
     );

     console.log(updateItems);

     ```

     ```json title={"updateItemResponse.json"}
     {
       "items": [
         {
           "id": "68d580ac538e52f83d40d7f0",
           "cmsLocaleId": "664b1450fbd3987b1a4e1742",
           "lastPublished": null,
           "lastUpdated": "2025-09-25T17:52:39.226Z",
           "createdOn": "2025-09-25T17:49:32.860Z",
           "isArchived": false,
           "isDraft": true,
           "fieldData": {
             "name": "Le Guide du voyageur galactique",
             "slug": "le-guide-du-voyageur-galactique",
             "description": "Pas de panique !"
           }
         },
         {
           "id": "68d580ac538e52f83d40d7f0",
           "cmsLocaleId": "664b1450fbd3987b1a4e1740",
           "lastPublished": null,
           "lastUpdated": "2025-09-25T17:52:39.225Z",
           "createdOn": "2025-09-25T17:49:32.860Z",
           "isArchived": false,
           "isDraft": true,
           "fieldData": {
             "name": "Guía del autoestopista galáctico",
             "slug": "guia-del-autoestopista-galactico",
             "description": "¡Que no cunda el pánico!"
           }
         }
       ]
     }

     ```
   </CodeBlocks>

<Warning title="Adding secondary locales to existing items is not supported via the API">
  For any Collection items that **already exist**, you must add the desired secondary locales in the CMS panel within the Designer. **You can't add a new locale to an existing item via the API.**
</Warning>

### Retrieving localized items

To get localized items, use the [List Items](/data/reference/cms/collection-items/staged-items/list-items) endpoint and pass the desired `cmsLocaleId` as a query parameter. If you omit the `cmsLocaleId`, the API will return items from the primary locale.

```ts title={"getLocalizedItems.ts"}
import { WebflowClient } from "webflow-api";

const webflow = new WebflowClient({
  accessToken: "YOUR_ACCESS_TOKEN",
});

const localizedItems = await webflow.collections.items.listItems("COLLECTION_ID", {
  cmsLocaleId: "CMS_LOCALE_ID,CMS_LOCALE_ID_2" // To pass multiple locales, separate the IDs with a comma within a single string
});

console.log(localizedItems);
```

### Locale-specific publishing

Each locale maintains its own independent publishing state. This means you can have a version of an item live in your primary locale while the version for a secondary locale is still in a draft state. Publishing changes in one locale doesn't affect the status of that item in any other locale. [See the publishing guide for more details →](/data/docs/working-with-the-cms/publishing).

## Next steps

To ensure your site is completely localized, follow the guides for localizing pages and components.

<CardGroup cols={2}>
  <Card title="Localize pages" href="/data/docs/working-with-localization/localize-pages" iconPosition="left" iconSize="12">
    Learn how to localize a site with the Pages and CMS APIs.
  </Card>

  <Card title="Localize components" href="/data/docs/working-with-localization/localize-components" iconPosition="left" iconSize="12">
    Review the CMS API endpoints for localization operations.
  </Card>
</CardGroup>

---

# Multi-Channel Content Delivery

> Learn how to deliver CMS content across your digital channels with Webflow’s Content Delivery APIs

Webflow's content delivery API enables high-performance, low-latency delivery of your CMS content to apps, services, and other platforms beyond your website. These APIs serve published content from a modern cloud edge connectivity network and automate caching, ensuring fast response times for your users.

## Content delivery with Webflow

Webflow provides two APIs for working with CMS content, each designed for a different purpose:

* **`api.webflow.com`**

  The primary API server for managing CMS content. This uncached server handles real-time CRUD operations. While it always returns the most up-to-date data, response times may be slower since each request must reach Webflow's backend servers directly.
* **`api-cdn.webflow.com`**

  For headless content delivery at scale. Serve content consistently across multiple channels like websites, apps, email campaigns, and digital touchpoints while leveraging built-in caching for fast, reliable performance.

### Endpoints

The content delivery API provides the following read-only endpoints for accessing published CMS content:

* [Get a live collection item](/data/reference/cms/collection-items/live-items/get-item-live): Retrieves a selected published item from a collection
* [List live collection items](/data/reference/cms/collection-items/live-items/list-items-live): Retrieves all published items from a collection

To use the content delivery API, replace the standard API domain  - `api.webflow.com` - with `api-cdn.webflow.com` in your requests. For example:

<EndpointRequestSnippet endpoint="GET /v2/collections/:collection_id/items/:item_id/live" baseURL="api-cdn.webflow.com" serverName="Content Delivery API" />

### Authentication

The content delivery API uses the same authentication methods as the [Webflow API](/data/reference/authentication), supporting both [site tokens](/data/reference/site-token) and [OAuth access tokens](/data/reference/oauth-app).

For optimal security and management, create a dedicated API token with [CMS Read-Only permissions](/data/reference/scopes) for each delivery channel. This allows you to independently manage access and quickly revoke access if needed without affecting other integrations. For step-by-step instructions on creating and managing site tokens, see [the site token guide](/data/reference/site-token).

### Caching policy

Caching improves content delivery by reducing server load, minimizing latency, and ensuring reliable performance during high traffic.

Here's how Webflow's CDN caching works:

#### Initial requests

When you first request published CMS data, the request goes to Webflow's origin servers (e.g. `api.webflow.com`). The response is then stored in the CDN's cache. Subsequent identical requests will be served directly from the cache, providing faster response times.

<Note title="Rate limit errors">
  If too many uncached requests hit the origin servers simultaneously, you may temporarily receive 429 rate limit errors. These should resolve once responses are cached and served from the CDN. See the [rate limits section](#rate-limits) for more details.
</Note>

#### Cache duration

Cached responses are stored for **120 seconds (2 minutes) for enterprise plans.** For other plans, the cache duration is **300 seconds (5 minutes).** After this period:

* The cache entry is automatically purged
* The next request will fetch fresh data from the origin server (`api.webflow.com`)
* The new response is cached for another 120 seconds for enterprise plans, or 300 seconds for other plans

This ensures that users receive reasonably up-to-date content while maintaining optimal performance.

#### Content updates

When you update or delete published CMS items, there may be up to a 120-second delay before changes are reflected in the API responses due to the cache duration. During this period, users may still receive the previous version of the content until the cache refreshes.

### Rate limits

The Webflow API includes rate limits that vary based on your site plan. For cached requests that hit the CDN, there are effectively no rate limits. However, uncached requests to the origin server count against your plan's rate limits.

When you exceed the rate limit, the API will respond with a `429 Too Many Requests` status code. To learn more about the specific rate limits for your plan, see the [rate limits documentation](/data/reference/rate-limits).

To minimize rate limit errors when working with requests for cached content:

* Implement retry logic with exponential backoff for 429 responses
* [Stagger initial, uncached requests to avoid overwhelming the origin server](https://newsletter.scalablethread.com/p/how-to-handle-sudden-bursts-of-traffic?open=false#%C2%A7exponential-jitter-and-retry)

### FAQs

{/* <!-- vale off --> */}

<Accordion title="How do I know if my request is being served from the CDN or the origin server?">
  {/* <!-- vale on --> */}

  To determine whether your API request is being served from a CDN cache or the origin server, you can check the `CF-Cache-Status` response header to see the cache status. If the status says HIT, the response was served from the CDN cache. For responses with a MISS or BYPASS status, the request was served from the origin.

  {/* <!-- vale off --> */}
</Accordion>

{/* <!-- vale on --> */}

---

# Working with Localization APIs

> Learn how to manage multilingual content using the Webflow Data API

Webflow offers APIs that enable you to manage site content across different locales. Use the APIs to localize content for pages, components, and CMS items on your site.

For detailed information on enabling localization, see the [help center documentation](https://help.webflow.com/hc/en-us/articles/33961240752147-Localization-overview)

## Localizable content

Webflow supports the localization of text-based content across pages, components, and CMS items.

| Content Type                    | Scope         | Description                                                    |
| :------------------------------ | :------------ | :------------------------------------------------------------- |
| **Page Content**                | Page-specific | Static text placed directly on a page.                         |
| **Component Overrides**         | Page-specific | Custom property values applied to a single component instance. |
| **Component Property Defaults** | Site-wide     | Default values for component properties.                       |
| **Component Static Content**    | Site-wide     | Fixed content that's part of a component's structure.          |
| **CMS Items**                   | Site-wide     | Content stored in the fields of a CMS Collection item.         |

<Warning title="Data APIs do no support localizing images">
  Currently, the Data API doesn't support localizing images. To localize images, you'll need to update the image asset in the Webflow designer.
</Warning>

## Locales

When localizing a site, you'll define different **locales** to support specific languages or language-region combinations. These locales will be used to present content to users in different geographical areas or cultural backgrounds.

Locales can be defined as either primary or secondary.

<CardGroup cols={2}>
  <Card title="Primary locale">
    The default language for your site. **There can only be one primary locale per site.**
  </Card>

  <Card title="Secondary locale">
    Additional languages or regions for your site. The number of secondary locales you can have is limited by your Webflow plan.
  </Card>
</CardGroup>

{/* <Tip title="Try localization for free">
  Try out the Webflow localization APIs **for free** by adding a secondary
  locale to your Webflow site. 

  You can add a secondary locale from the
  Webflow Designer by navigating to **Settings > Localization**, and clicking
  the "Add new locale" button. Once you save your changes, you can start using
  the endpoints below to try localizing content in your new secondary locale.
</Tip> */}

## Locale identifiers

Once your locales are defined, you can retrieve the identifiers for each locale, which are needed for all requests to the Localization APIs. To get the identifiers, make a call to the [Get Site endpoint](/data/reference/sites/get).

<div>
  <div>
    #### Primary and secondary locales

    The `primary` property contains a single locale object, while the `secondary` property contains an array of locale objects.

    #### Locale properties

    The locale object contains the following properties relevant to the localization APIs:

    * **`id`**: The unique identifier of the locale.
    * **`cmsLocaleId`**: The unique identifier of the locale for CMS operations.

    To see all the properties of a locale, see the [Locale object](/data/reference/sites/get#locale) in the API reference.
  </div>

  <div>
    <EndpointRequestSnippet endpoint="GET /v2/sites/:site_id" />

    ```js title="Get Site API response example"
    {
      ...
      "locales": {
        "primary": {
          "id": "653fd9af6a07fc9cfd7a5e57",
          "cmsLocaleId": "653ad57de882f528b32e810e",
          "tag": "en-US",
          ...
        },
        "secondary": [
          {
            "id": "653fd9af6a07fc9cfd7a5e56",
            "cmsLocaleId": "653fd9af6a07fc9cfd7a5e5d",
            "tag": "fr-FR",
            ...
          },
          {
            "id": "654112a3a525b2739d97664c",
            "cmsLocaleId": "654112a3a525b2739d97664f",
            "tag": "es-MX",
            ...
          },
          ...
        ]
      }
    }
    ```
  </div>
</div>

### Locale parameters and properties

When making requests to endpoints that support localization, provide the locale identifier as a query parameter or in the request body, depending on the endpoint. **If no locale identifier is provided, the request will return information from the primary locale.** These identifiers are both used as parameters in your requests and returned as properties in the response body to indicate when you're working with locale-specific data:

* **`localeId`**: The unique identifier of the locale for pages and components.
* **`cmsLocaleId`**: The unique identifier of the locale for CMS operations.

<Accordion title="Locale-specific endpoints">
  Some endpoints only support updating content in secondary locales. For these, you must provide the `localeId` parameter; otherwise, **requests to update primary locale content will fail.** These endpoints include:

  * [Update page content](/data/reference/pages-and-components/pages/update-static-content)
  * [Update component content](/data/reference/pages-and-components/components/update-content)
</Accordion>

## Workflows

Localizing content in Webflow can be done across three main areas:

<CardGroup cols={3}>
  <Card
    title="Pages"
    href="/data/docs/working-with-localization/localize-pages"
    iconPosition="left"
    iconSize="10"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/FileEdit.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/FileEdit.svg" alt="" className="block dark:hidden" />
      </>
    }
  >
    Static page content, metadata, and SEO settings
  </Card>

  <Card
    title="Components"
    href="/data/docs/working-with-localization/localize-components"
    iconPosition="left"
    iconSize="10"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Components.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Components.svg" alt="" className="block dark:hidden" />
      </>
    }
  >
    Reusable elements that can be customized with dynamic properties
  </Card>

  <Card
    title="CMS"
    href="#cms-localization"
    iconPosition="left"
    iconSize="10"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg" alt="" className="block dark:hidden" />
      </>
    }
  >
    Organized, dynamic content within collections
  </Card>
</CardGroup>

{/* <Warning>
    **Important:** For Pages and Components, the Data API endpoints only support updating content in secondary locales. Getting data from the primary locale serves as the source of truth for the content within these areas and updating primary locale content must be done through the Webflow Designer at this time.
    
    For CMS items however, you can create and manage item content in both the primary and secondary locales.
</Warning> */}

<Accordion title="Pages">
  The page localization APIs enable you to localize the following content:

  * **Static content** - Text nodes, images, form elements, and component property overrides
  * **Metadata** - Page titles, SEO descriptions, and Open Graph descriptions
  * **URLs** - Locale-specific slugs and URL structures

  {/* <Warning title="Updating primary locale content">
  While Webflow APIs allow you to *read* page content from both primary and secondary locales, all *updates* to page content (aka the DOM) via API are limited to **secondary locales**. Primary locale content must be managed directly through the Webflow Designer.
  </Warning> */}

  <Button href="/data/docs/working-with-localization/localize-pages">
    Learn how to localize pages
  </Button>

  <br />

  <br />
</Accordion>

<Accordion title="Components">
  Components are reusable design elements that contain static content, set in the component definition, and dynamic content, which can be customized with component properties.

  When localizing components in a **secondary locale**, you can use two approaches:

  * **Localize the component definition**: Modify a component's definition to update its static content, default property values, and any nested components. These changes apply to all instances of the component for the specified locale.
  * **Localize a component instance**: Override properties on a specific component instance on a page. This provides unique content for that instance without affecting the component's definition or other instances.

  ### Example scenario

  Consider a `Call-to-Action` component with a button that has the text property "Learn More."

  {/* <!-- vale off --> */}

  * **Definition localization**: To change the button text for all French-speaking users, you would update the component definition in the French locale. The button text in all `Call-to-Action` component instances on your French site would automatically change to "En savoir plus"

  * **Instance localization**: On a specific landing page in the French locale, you might want a `Call-to-Action` button to have a unique message. You would override the text property on that component instance to "Découvrez nos offres spéciales." This change would only apply to that single instance.

  {/* <!-- vale on --> */}

  To understand the difference between definition localization and instance localization, see the ["Working with Components"](/data/docs/working-with-localization/localize-components) guide.

  <Button href="/data/docs/working-with-localization/localize-components">
    Learn how to localize components
  </Button>

  <br />

  <br />
</Accordion>

<Accordion title="Webflow CMS">
  The Webflow CMS enables you to manage and deliver dynamic content, and supports comprehensive content localization to scale content delivery for diverse audiences.

  Key localization features include:

  * **Localized Variants:** Items from your primary locale can have corresponding localized variants, all sharing a single, consistent ID.
  * **Independent Publishing:** Publish localized content variants individually as needed.
  * **Locale-Specific Items:** Create CMS items that exist solely within a specific locale, without a primary locale counterpart.

  <br />

  <Button href="/data/docs/working-with-localization/localize-cms-content">
    Learn how to localize CMS items
  </Button>

  <br />

  <br />
</Accordion>

## Glossary

* **Locale**: A specific language or language-region combination used to present content (e.g., `en-US` for English, `fr-FR` for French).
* **Primary Locale**: The default language version of your site. There can only be one primary locale. API requests default to this locale if no other is specified.
* **Secondary Locale**: Any additional language or regional version of your site content.
* **`localeId`**: The unique identifier for a locale, used when working with Pages and Components APIs.
* **`cmsLocaleId`**: The unique identifier for a locale, used specifically for CMS-related API operations.

## Frequently asked questions

<Accordion title="What's the difference between localeId and cmsLocaleId?">
  `localeId` is used for localizing page and component content. `cmsLocaleId` is used exclusively for localizing CMS items. Both are retrieved from the [Get Site endpoint](/data/reference/sites/get).
</Accordion>

<Accordion title="Can I update primary locale content via the API?">
  Currently, API-based updates to page and component content are limited to secondary locales. Primary locale content for pages and components must be updated through the Webflow Designer. However, you can create and manage CMS item content in both primary and secondary locales via the API.
</Accordion>

<Accordion title="Can I localize styles and classes via the API?">
  No, styles and classes can't be localized via the Data API. They're managed through the Webflow Designer and aren't supported by the Data API.
</Accordion>

<Accordion title="What happens if I don't provide a locale identifier in my API request?">
  If no locale identifier is specified, the API will default to the site's primary locale for the request.
</Accordion>

---

# Localizing pages

> How to use Page localization APIs to localize page content in secondary locales

Webflow's Data API enables you to localize DOM content and metadata across different locales. Localizing pages requires two main steps:

1. Retrieve data from the **primary locale**
2. Update data in the **secondary locale**

## Workflows

There are two main workflows for localizing pages:

<CardGroup cols={2}>
  <Card
    title="DOM Content"
    href="#dom-content"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Grid.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Grid.svg" alt="" className="block dark:hidden" />
      </>
    }
  >
    Localize text content in a secondary locale
  </Card>

  <Card
    title="Metadata"
    href="#metadata"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Controls.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Controls.svg" alt="" className="block dark:hidden" />
      </>
    }
  >
    Localize page titles, SEO descriptions, and Open Graph descriptions in a secondary locale
  </Card>
</CardGroup>

{/* <Note>
The Page APIs only support localizing content in **secondary locales**. Content in the primary locale serves as the source of truth and must be updated through the Webflow canvas.
</Note> */}

## DOM Content

The DOM content endpoints enable you to localize text for any secondary locale. The process involves the following steps:

<Steps>
  <Step title="Fetch primary locale content">
    Use the [Get page content endpoint](/data/reference/pages-and-components/pages/get-content) to retrieve the page's DOM structure and default content.
  </Step>

  <Step title="Translate content">
    Traverse the `nodes` array in the response to identify and translate all text content.
  </Step>

  <Step title="Update secondary locale content">
    Use the `localeId` parameter in your request to the [Update Page Content endpoint](/data/reference/pages-and-components/pages/update-static-content) to apply the localized content.
  </Step>
</Steps>

{/* <Note title="Handling component instances">
Component localization follows a specific pattern. A component instance will only appear in the Get Page Content response if its property values have been overridden from their defaults in the primary locale.

When an overridden component instance is present, you can provide localized values for its properties in your call to the Update Page Content endpoint for a secondary locale.
</Note> */}

***

### Retrieve page content

Start by getting the content structure for a given static page. You'll need the `pageId`, which you can find by listing all pages for a site using the [list pages endpoint](/data/reference/pages-and-components/pages/list). Once you have the `pageId`, you can use the [get page content endpoint](/data/reference/pages-and-components/pages/get-content) to retrieve the content structure for the page.

##### Request

<CodeBlocks>
  ```curl cURL
  curl -G https://api.webflow.com/v2/pages/<PAGE_ID>/dom \
      -H "Authorization: Bearer <token>" \
      -d limit=100 \
      -d offset=0
  ```

  ```ts title={"getPageContent.ts"}
  import { WebflowClient } from "webflow-api";

  // Define Webflow Client
  const webflow = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });

  const SITE_ID = "YOUR_SITE_ID";
  const PAGE_TITLE = "YOUR_PAGE_TITLE";

  // List Pages
  const { pages } = await webflow.pages.list(SITE_ID);

  // Find Page by Title
  const selectedPage = pages?.find((page) => page.title === PAGE_TITLE);

  if (selectedPage) {
    // Get Page Content
    const pageContent = await webflow.pages.getContent(selectedPage.id);
    console.log(pageContent);
  } else {
    console.log(`Page with title "${PAGE_TITLE}" not found.`);
  }
  ```
</CodeBlocks>

**Note:**  This API will only return content for static pages. Dynamic pages, like CMS Collection templates will return an empty response.

##### Response

The response contains a `nodes` array with the page's static content. Each node includes a `type` property that defines its content type.

<br />

<div class="my-6">
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 items-center">
    <Card>
      <ParamField path="pageId" type="string" required={true}>
        The unique identifier for the page
      </ParamField>

      <ParamField path="nodes" type="list of objects" required={true}>
        The list of nodes that represent the static content of the page
      </ParamField>

      <ParamField path="pagination" type="object" required={true}>
        The pagination information for the response
      </ParamField>

      <ParamField path="lastUpdated" type="string" required={true}>
        The date the page was most recently updated
      </ParamField>
    </Card>

    <div>
      <EndpointResponseSnippet endpoint="GET /pages/:page_id/dom" />
    </div>
  </div>
</div>

<Note>
  By default, if you don't include a `localeId` in your request, the response will return content from the primary locale.
</Note>

#### Nodes

The [page content endpoint](/data/reference/pages-and-components/pages/get-content) returns a list of nodes that represent static text and images available for localization. **Note:** this endpoint doesn't return the entire DOM structure of the page, but only the static content available for localization.

#### Node types

Different node types represent different kinds of content, each with its own structure and properties.

| Node type            | Description                                                                                                                                                                                                                                                                                         |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`               | Represents text content. Including headings, [text blocks](https://help.webflow.com/hc/en-us/articles/33961346059027-Use-text-blocks-in-Webflow), [rich text](https://help.webflow.com/hc/en-us/articles/33961256808467-Rich-text-element-overview), form labels, and other text content on a page. |
| `image`              | Represents static images on a page. It contains alt text details for accessibility and the `assetId` for fetching the actual image resource.                                                                                                                                                        |
| `text-input`         | Represents a `textinput` and `textarea` fields on a form.                                                                                                                                                                                                                                           |
| `select`             | Represents a select field and its options on a form.                                                                                                                                                                                                                                                |
| `submit-button`      | Represents a submit button on a form. It contains the button text and waiting text of the button.                                                                                                                                                                                                   |
| `search-button`      | Represents the button text of a search button on a [site search element](https://help.webflow.com/hc/en-us/articles/33961242348179-Site-search).                                                                                                                                                    |
| `component-instance` | Represents a component instance on a page. Learn more about [localizing components](/data/docs/working-with-localization/localize-components) in the guide.                                                                                                                                         |

<br />

#### Node properties

<div>
  Each node type has a specific structure and properties that define the content it contains. However, all nodes will have the following properties:

  {/* <!-- vale off --> */}

  <Card>
    <ParamField path="id" type="string" required={true}>
      Node UUID
    </ParamField>

    <ParamField path="type" type="enum" required={true}>
      The type of the node.

      <br />

      Acceptable values: `text`, `image`, `text-input`, `select`, `submit-button`, `search-button`, `component-instance`
    </ParamField>

    <ParamField path="attributes" type="object" required={false}>
      The [custom attributes](https://help.webflow.com/hc/en-us/articles/33961389460115-Custom-attributes#how-to-use-cms-data-in-custom-attributes) of the node. These are typically used to store custom data on the node like `aria-labels` for accessibility or `data-w-id`.
    </ParamField>
  </Card>

  {/* <!-- vale on --> */}
</div>

<br />

##### Node properties by type

Each node type has a unique structure for accessing page content. For example, a `text` node contains a `text` object, which typically includes `html` and `text` properties. These properties provide context for strings that can be localized. The tabs below detail the specific properties for each node type.

<br />

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Text">
    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `text`
        </ParamField>

        <ParamField path="text" type="object" required={true}>
          The text content of the node

          <Accordion title="+ Show 2 properties">
            <ParamField path="html" type="string" required={true}>
              The HTML content of the node
            </ParamField>

            <ParamField path="text" type="string" required={true}>
              The text content of the node
            </ParamField>
          </Accordion>
        </ParamField>

        <ParamField path="attributes" type="map from strings to strings" required={false}>
          The custom attributes of the node
        </ParamField>
      </Card>

      <CodeBlocks>
        ```json title="Text node example"
        {
          "id": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
          "type": "text",
          "text": {
            "html": "<h1>Don't Panic!</h1>",
            "text": "Don't Panic!"
          },
          "attributes": {}
        },
        {
          "id": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
          "type": "text",
          "text": {
            "html": "<span data-w-id=\"b3107...\">$9.99</span>",
            "text": "$9.99"
          },
          "attributes": {}
        }
        ```
      </CodeBlocks>
    </div>

    <Note title="Nested HTML tags">
      The `text.html` property may contain nested HTML tags with `data-w-id` attributes (e.g., `data-w-id="some-unique-identifier"`). Retain these identifiers when updating page content in secondary locales to preserve custom attributes and links on inner HTML elements.
    </Note>
  </Tab>

  <Tab title="Image">
    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `image`
        </ParamField>

        <ParamField path="image" type="object" required={true}>
          The image content of the node

          <Accordion title="+ Show 2 properties">
            <ParamField path="alt" type="string" required={true}>
              The alt text for the image
            </ParamField>

            <ParamField path="assetId" type="string" required={true}>
              The ID of the asset for the image
            </ParamField>
          </Accordion>
        </ParamField>

        <ParamField path="attributes" type="map from strings to strings" required={false}>
          The custom attributes of the node
        </ParamField>
      </Card>

      ```json title="Image node example"
      {
        "id": "a245c12d-995b-55ee-5ec7-aa36a6cad629",
        "type": "image",
        "image": {
          "alt": "Marvin, the Paranoid Android",
          "assetId": "659595234426a9fcbad57043"
        },
        "attributes": {}
      }
      ```
    </div>

    <Warning title="Updating images isn't supported by the API">
      Currently, updating images isn't supported by the API. To update images, you'll need to update the image asset in the Webflow designer.
    </Warning>
  </Tab>

  <Tab title="Text Input">
    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `text-input`
        </ParamField>

        <ParamField path="placeholder" type="string" required={false}>
          The placeholder text for the input field
        </ParamField>

        <ParamField path="attributes" type="map from strings to strings" required={false}>
          The custom attributes of the node
        </ParamField>
      </Card>

      ```json title="Text input node example"
      {
        "id": "a245c12d-995b-55ee-5ec7-aa36a6cad642",
        "type": "text-input",
        "placeholder": "Enter something here...",
        "attributes": {}
      }
      ```
    </div>
  </Tab>

  <Tab title="Select">
    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `select`
        </ParamField>

        <ParamField path="choices" type="list of objects" required={true}>
          The choices for the select field

          <Accordion title="+ Show 2 properties">
            <ParamField path="value" type="string" required={true}>
              The value of the choice
            </ParamField>

            <ParamField path="text" type="string" required={true}>
              The text of the choice
            </ParamField>
          </Accordion>
        </ParamField>

        <ParamField path="attributes" type="map from strings to strings" required={false}>
          The custom attributes of the node
        </ParamField>
      </Card>

      ```json title="Select node example"
      {
        "id": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
        "type": "select",
        "choices": [
          {
            "value": "choice-1",
            "text": "First choice"
          },
          {
            "value": "choice-2",
            "text": "Second choice"
          }
        ],
        "attributes": {}
      }
      ```
    </div>
  </Tab>

  <Tab title="Submit Button">
    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `submit-button`
        </ParamField>

        <ParamField path="value" type="string" required={true}>
          The text content of the button
        </ParamField>

        <ParamField path="waitingText" type="string" required={false}>
          The text content of the button while submitting
        </ParamField>

        <ParamField path="attributes" type="map from strings to strings" required={false}>
          The custom attributes of the node
        </ParamField>
      </Card>

      ```json title="Submit button node example"
      {
        "id": "a245c12d-995b-55ee-5ec7-aa36a6cad671",
        "type": "submit-button",
        "value": "Submit",
        "waitingText": "Submitting...",
        "attributes": {}
      }
      ```
    </div>
  </Tab>

  <Tab title="Component Instance">
    To learn more about localizing components, see the [localizing components](/data/docs/working-with-localization/localize-components) guide.

    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `component-instance`
        </ParamField>

        <ParamField path="componentId" type="string" required={true}>
          The ID of the component
        </ParamField>

        <ParamField path="propertyOverrides" type="array" required={false}>
          The property overrides for the component instance

          <Accordion title="+ Show 4 properties">
            <ParamField path="propertyId" type="string" required={true}>
              The ID of the property
            </ParamField>

            <ParamField path="type" type="string" required={true}>
              The type of the property
            </ParamField>

            <ParamField path="label" type="string" required={true}>
              The label of the property
            </ParamField>

            <ParamField path="text" type="object" required={true}>
              The text content of the property

              <Accordion title="+ Show 2 properties">
                <ParamField path="html" type="string" required={false}>
                  The HTML content of the property
                </ParamField>

                <ParamField path="text" type="string" required={false}>
                  The text content of the property
                </ParamField>
              </Accordion>
            </ParamField>
          </Accordion>
        </ParamField>
      </Card>

      <CodeBlocks>
        ```json title="Component instance node example"
        {
          "id": "a245c12d-995b-55ee-5ec7-aa36a6cad631",
          "type": "component-instance",
          "componentId": "6258612d1ee792848f805dcf",
             "propertyOverrides": [
               {
                 "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad633",
              "type": "Plain Text",
              "label": "Catchphrase",
              "text": {
                "html": null,
                "text": "Don't Panic!"
              }
               },
               {
                 "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
              "type": "Rich Text",
              "label": "Tagline",
              "text": {
                "html": "<div><p>Always know where your towel is.</p></div>",
                "text": null
              }
            }
          ]
        }
        ```
      </CodeBlocks>
    </div>
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

### Update page content

Once you've identified and translated the content you want to localize, you can update it using the [update page content endpoint](/data/reference/pages-and-components/pages/update-static-content). You'll need to pass in the `localeId` of the secondary locale you want to update as a query parameter, and a list of `nodes` to update in the request body.

Each node should have the `nodeId` of the node you want to update, and the node value you want to update. The node value will vary depending on the node type.

<EndpointRequestSnippet endpoint="POST /pages/:page_id/dom" />

<Note title="Updating text nodes">
  When updating text nodes, pass the `text` property with the translated text, structured as the HTML content received from the Get Page Content endpoint. The HTML tag structure must remain identical to the Get Content endpoint's response.
</Note>

<Warning title="Updating images isn't supported by the API">
  Currently, updating images isn't supported by the API. To update images, you'll need to update the image asset in the Webflow designer.
</Warning>

## Metadata

The metadata endpoints enable you to localize SEO and Open Graph content for any secondary locale. The process involves the following steps:

<Steps>
  <Step title="Retrieve primary locale metadata">
    Use the [Get page metadata endpoint](/data/reference/pages-and-components/pages/get-metadata) to retrieve the page's metadata.
  </Step>

  <Step title="Translate metadata">
    Translate the metadata for the secondary locale.
  </Step>

  <Step title="Update secondary locale metadata">
    Use the [Update page metadata endpoint](/data/reference/pages-and-components/pages/update-page-settings) to update the metadata for the secondary locale.
  </Step>
</Steps>

### Retrieve page metadata

First, retrieve the page metadata for the primary locale using the [Get page metadata endpoint](/data/reference/pages-and-components/pages/get-metadata).

This endpoint will return metadata shown above for the primary locale. The response includes both internal and external information about your webflow page, including unique identifiers, draft information, and publish times.

For a full list of information returned see the [Get page metadata page in the API reference](/data/reference/pages-and-components/pages/get-metadata).

<div>
  <div>
    ##### Request

    <EndpointRequestSnippet endpoint="GET /v2/pages/:page_id" />
  </div>

  <div>
    ##### Response

    <EndpointResponseSnippet endpoint="GET /pages/:page_id" />
  </div>
</div>

### Update page metadata

To update metadata for a secondary locale, translate the properties listed below and include them in the request body when calling the [Update page metadata endpoint](/data/reference/pages-and-components/pages/update-page-settings).

<div>
  <div>
    <Card>
      <EndpointSchemaSnippet endpoint="PUT /pages/:page_id" selector="request.body" />
    </Card>
  </div>

  <CodeBlocks>
    ```curl cURL
    curl -X PUT https://api.webflow.com/v2/pages/<PAGE_ID>?localeId=<SECONDARY_LOCALE_ID> \
         -H "Authorization: Bearer <token>" \
         -H "Content-Type: application/json" \
         -d '{
           "title": "Página de inicio - Mi sitio web",
           "seo": {
             "title": "Mi sitio web - Página de inicio",
             "description": "Descripción SEO en español para mejor visibilidad en buscadores"
           },
           "openGraph": {
             "title": "Mi sitio web",
             "description": "Descripción para compartir en redes sociales"
           }
         }'
    ```

    ```javascript Node.js
    const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
    await client.pages.updatePageSettings("YOUR_PAGE_ID", {
      localeId: "SECONDARY_LOCALE_ID",
      title: "Página de inicio - Mi sitio web",
      seo: {
        title: "Mi sitio web - Página de inicio",
        description: "Descripción SEO en español para mejor visibilidad en buscadores"
      },
      openGraph: {
        title: "Mi sitio web", 
        description: "Descripción para compartir en redes sociales"
      }
    });
    ```
  </CodeBlocks>
</div>

<Warning>
  **Slug localization** is only available with specific Webflow plans:

  * **Localize Advanced add-on**
  * **Enterprise Localization**
</Warning>

## Complete localization workflow

Here's a complete example that demonstrates the full page localization process for static content (not including components):

<CodeBlocks>
  ```javascript Node.js
  const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });

  // Localize page static content and metadata
  // Assume `translations` object holds page-level translations in memory for the secondary locale
  async function localizePage(pageId, secondaryLocaleId, translations) {
    // 1. Get primary locale content structure
    const contentData = await client.pages.getContent(pageId);
    
    // 2. Prepare static content updates
    const staticUpdates = {
      nodes: contentData.nodes
        .filter(node => node.type === 'text' && translations.static[node.id])
        .map(node => ({
          nodeId: node.id,
          text: translations.static[node.id]
        }))
    };
    
    // 3. Update page content
    if (staticUpdates.nodes.length > 0) {
      await client.pages.updateStaticContent(pageId, {
        localeId: secondaryLocaleId,
        nodes: staticUpdates.nodes,
      });
    }
    
    // 4. Update page metadata
    if (translations.metadata) {
      await client.pages.updatePageSettings(pageId, {
        localeId: secondaryLocaleId,
        title: translations.metadata.title,
        seo: {
          title: translations.metadata.seo.title,
          description: translations.metadata.seo.description,
        },
        openGraph: {
          title: translations.metadata.openGraph.title,
          description: translations.metadata.openGraph.description,
        },
      });
    }
  }
  ```
</CodeBlocks>

## FAQ

<AccordionGroup>
  <Accordion title="Do I need to update all nodes when updating page content?">
    No, you only need to include the nodes you want to update in the request body. If you don't include a node in the Update Page Content request body, that element will inherit the content from the primary locale.
  </Accordion>

  <Accordion title="What happens if an error occurs when updating page content?">
    If an error occurs when attempting to update a node on a page, the request may still return a 200 status code, but you may want to check the response body for the `errors` array to see if any errors surfaced.
  </Accordion>

  <Accordion title="Why can't I update page content in the primary locale with APIs?">
    Because the primary locale is the source of truth for content, changes must be initiated through the Webflow canvas at this time.
  </Accordion>

  <Accordion title="Why am I getting component-instance types in the Get Page Content response?">
    Component instances are included in the [Get Page Content API](https://developers.webflow.com/data/reference/pages-and-components/pages/get-content) response to provide a more wholistic view of the content on a page.

    When getting page content for the primary locale, all component instances are included in the response. When getting page content for a secondary locale, only component instances with property overrides are included in the response.

    Learn more in the [Components and properties](/data/docs/working-with-localization/localize-pages) guide.
  </Accordion>

  <Accordion title="After making updates to page content, why isnt' the content reflecting in the Webflow canvas?">
    When making updates to your site via Data APIs, you may need to refresh the page in order to see the changes reflect in the Webflow canvas.
  </Accordion>
</AccordionGroup>

---

# Localizing components

> How to use Component APIs to localize component definitions and component instances in secondary locales

Components are reusable design elements that can be instanced across your site.

## Workflows

Webflow enables you to localize both a component definition and component instances via the Data API.

<CardGroup cols={2}>
  <Card
    title="Localize component definitions"
    href="#component-definitions"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Components.svg"
          alt="Component Definition Logo"
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Components.svg"
          alt="Component Definition Logo"
          className="block dark:hidden"
        />
      </>
    }
  >
    Localize the static content of a component definition across an **entire
    locale**
  </Card>

  <Card
    title="Localize component instances"
    href="#component-instances"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/PageBuilding.svg"
          alt="Component Definition Logo"
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/PageBuilding.svg"
          alt="Component Definition Logo"
          className="block dark:hidden"
        />
      </>
    }
  >
    Localize a component instance on a **specific page** by modifying its properties.
  </Card>
</CardGroup>

## Key concepts

To understand how to localize components, you'll need to understand the key concepts of components in Webflow.

<Tabs>
  <Tab title="Component definition">
    A component definition serves as the blueprint for a component. It contains the component's static content, like text and images, and defines the component's properties: customizable fields that allow for dynamic content. When you change a component definition, the updates apply to all instances of that component, unless an instance has a property override.

    A component definition contains two types of localizable content:

    * **Static content**: Text nodes, form elements, and nested component instances
    * **Property defaults**: Default text values for component properties

      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/f260ff5cfaea4ba95d769501590b4be09d6b0faa61c6753f18451fb5c51fc0d7/products/data/pages/Localization/assets/Component-Definition-Light.svg" alt="Component Definition" />
  </Tab>

  <Tab title="Component instance">
    A **component instance** is a live copy of a component definition placed on a page. While the definition acts as a template, an instance is the actual element that users see.

    By default, an instance inherits all content and property values directly from its component definition. If you change these in the definition, all instances update automatically.

    However, you can customize an instance by applying a **property override**. An override is a unique value for a property that applies only to a single instance. For example, if you have a "Job Card" component, you can use overrides to give each instance on your "Jobs" page a different title, description, and location.

    **You can only localize property overrides of a component instance.** To localize the default properties of a component, you need to update the component definition.

    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/192b968932d408573ab17bb7beb30723fecf8d6a035f47bc400c75d2d3aebcda/products/data/pages/Localization/assets/Component-Instance-Light.svg" alt="Component Instance" />
  </Tab>
</Tabs>

### Localizable content

To completely localize your site, you'll need to localize all three types of component content.

| Content Type           | Scope                                                                  | Description                                                           |
| :--------------------- | :--------------------------------------------------------------------- | :-------------------------------------------------------------------- |
| **Property Overrides** | Page-specific <br /><Badge minimal="true">Instance</Badge>             | Custom values applied to a single component instance.                 |
| **Property Defaults**  | Site-wide <br /><Badge minimal="true" intent="info">Definition</Badge> | Default values for properties, used by instances without an override. |
| **Static Content**     | Site-wide <br /><Badge minimal="true" intent="info">Definition</Badge> | Fixed text content that's part of the component's structure.          |

Some key points to remember when localizing component content:

* Property overrides only affect a specific component instance on a page
* Default properties affect all instances that don't have overrides
* Static content affects all instances across the site
* Only content bound to component properties can be overridden at the instance or per-page level

## Component definitions

Component definitions contain two types of localizable content:

<CardGroup cols={2}>
  <Card
    title="Static content"
    href="#localize-static-content"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/LayoutDashboard.svg"
          alt="Static Content Logo"
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/LayoutDashboard.svg"
          alt="Static Content Logo"
          className="block dark:hidden"
        />
      </>
    }
  >
    Text nodes, form elements, and nested component instances
  </Card>

  <Card
    title="Property defaults"
    href="#localize-default-properties"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/SiteBlank.svg"
          alt="Property Defaults Logo"
          className="hidden dark:block"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/SiteBlank.svg"
          alt="Property Defaults Logo"
          className="block dark:hidden"
        />
      </>
    }
  >
    Default values for component properties
  </Card>
</CardGroup>

### Localize static content

To localize static content, you'll first need to get the content of the selected component, and then update the content in a secondary locale.

<Steps>
  <Step title="List site components">
    Use the [List
    Components](/data/reference/pages-and-components/components/list) endpoint
    to get a list of all components on your site.
  </Step>

  <Step title="Get static content of a component">
    Use the [Get Component
    Content](/data/reference/pages-and-components/components/get-content)
    endpoint to get the static content of a selected component definition.
  </Step>

  <Step title="Update static content of a component">
    Use the [Update Component
    Content](/data/reference/pages-and-components/components/update-content)
    endpoint to update the static content of the selected component definition in a secondary locale.
  </Step>
</Steps>

#### List site components

Use the [List Components](/data/reference/pages-and-components/components/list) endpoint to get a list of all components on your site.

{/* While this endpoint does provide details about each component definition, it doesn't show where the components are actually being used. The [Get Page Content API](https://developers.webflow.com/data/reference/pages-and-components/pages/get-content) response will show you which components are instanced on a given page. */}

##### Request

<CodeBlocks>
  ```curl cURL
  curl -G https://api.webflow.com/v2/sites/<SITE_ID>/components \
       -H "Authorization: Bearer <token>" \
       -d limit=100 \
       -d offset=0
  ```

  ```javascript Node.js
  const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
  const components = await client.components.list("YOUR_SITE_ID");
  ```
</CodeBlocks>

##### Response

The endpoint returns a `components` array with the details of each component definition on your site. The response also includes a `pagination` object for pagination through results over the 100 item limit.

{/* <!-- vale off --> */}

<div>
  <Card>
    <EndpointSchemaSnippet endpoint="GET /sites/:site_id/components" selector="response.body" />
  </Card>

  <CodeBlocks>
    ```json title="Response"
    {
      "components": [
        {
          "id": "1fa6f97b-84f7-2db3-29cb-1275161e432f",
          "name": "Navbar"
        },
        {
          "id": "9fa3a9c4-87d4-19b0-95f7-1b0b099f82a0",
          "name": "Footer"
        },
        {
          "id": "db278ae3-20d1-6657-c0c9-083a38fbc2c4",
          "name": "Locale dropdown"
        },
        {
          "id": "d2de2e85-bab1-8dbb-1648-2bbedc5417dd",
          "name": "Hero"
        },
        {
          "id": "fd06c181-43b2-e1c0-9d7f-0b332cd9905b",
          "name": "Card"
        },
        {
          "id": "33666cc8-031a-c160-37ec-654c05d48750",
          "name": "Job Card"
        },
        {
          "id": "d2154999-bbdb-8145-1152-53511d5c3f70",
          "name": "Button"
        }
      ],
      "pagination": {
        "limit": 100,
        "offset": 0,
        "total": 7
      }
    }
    ```
  </CodeBlocks>
</div>

{/* <!-- vale on --> */}

#### Get static content from the primary locale

Retrieve existing static content from the primary locale for a specific component. Send a <Badge intent="success">GET</Badge> request to the [get component content](/data/reference/pages-and-components/components/get-content) endpoint, and include the component `id` in the request path.

<br />

##### Request

<CodeBlocks>
  ```curl cURL
  curl -G https://api.webflow.com/v2/sites/<SITE_ID>/components/<COMPONENT_ID>/dom \
       -H "Authorization: Bearer <token>" \
       -d limit=100 \
       -d offset=0
  ```

  ```javascript Node.js
  const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
  const content = await client.components.getContent(
    "YOUR_SITE_ID",
    "YOUR_COMPONENT_ID"
  );
  ```
</CodeBlocks>

<br />

##### Response

The response contains a `nodes` array with the component's static content. Each node includes a `type` property that defines its content type.

{/* <!-- vale off --> */}

<div>
  <Card>
    <EndpointSchemaSnippet endpoint="GET /sites/:site_id/components/:component_id/dom" selector="response.body" />
  </Card>

  <CodeBlocks>
    ```json title="Get Component Content response example"
    {
      "componentId": "33666cc8-031a-c160-37ec-654c05d48750",
      "nodes": [
        {
          "type": "text",
          "id": "dca4e42f-0d46-0c2a-420f-6496321fec8b",
          "text": {
            "html": "<div class=\"text-block-2\">NEW&nbsp;OPPORTUNITY</div>",
            "text": "NEW OPPORTUNITY"
          },
          "attributes": {}
        },
        {
          "type": "component-instance",
          "id": "d2154999-bbdb-8145-1152-53511d5c3f73",
          "componentId": "d2154999-bbdb-8145-1152-53511d5c3f70",
          "propertyOverrides": [
            {
              "propertyId": "d9e0fd5c-e7f7-d25a-fdc4-3741ec86fc43",
              "type": "Plain Text",
              "label": "Button Text",
              "text": {
                "text": "Apply Now"
              }
            }
          ]
        }
      ],
      "pagination": {
        "limit": 100,
        "offset": 0,
        "total": 2
      }
    }
    ```
  </CodeBlocks>
</div>

{/* <!-- vale on --> */}

##### Node types

<br />

| Node type            | Description                                                                                                                                                                                                                                                                                         |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`               | Represents text content. Including headings, [text blocks](https://help.webflow.com/hc/en-us/articles/33961346059027-Use-text-blocks-in-Webflow), [rich text](https://help.webflow.com/hc/en-us/articles/33961256808467-Rich-text-element-overview), form labels, and other text content on a page. |
| `image`              | Represents static images on a page. It contains alt text details for accessibility and the `assetId` for fetching the actual image resource.                                                                                                                                                        |
| `text-input`         | Represents a `textinput` and `textarea` fields on a form.                                                                                                                                                                                                                                           |
| `select`             | Represents a select field and its options on a form.                                                                                                                                                                                                                                                |
| `submit-button`      | Represents a submit button on a form. It contains the button text and waiting text of the button.                                                                                                                                                                                                   |
| `search-button`      | Represents the button text of a search button on a [site search element](https://help.webflow.com/hc/en-us/articles/33961242348179-Site-search).                                                                                                                                                    |
| `component-instance` | Represents a component instance on a page. Learn more about [localizing components](/data/docs/working-with-localization/localize-components) in the guide.                                                                                                                                         |

<br />

##### Node properties

<div>
  <div>
    Each node type has a specific structure and properties that define the
    content it contains. However, all nodes will have `id`, `type`, and
    `attributes` properties.
  </div>

  <Card>
    <ParamField path="id" type="string" required={true}>
      Node UUID
    </ParamField>

    <ParamField path="type" type="enum" required={true}>
      The type of the node.
    </ParamField>

    <ParamField path="attributes" type="map from strings to strings" required={false}>
      The custom attributes of the node
    </ParamField>
  </Card>
</div>

<br />

##### Node properties by type

Each node type has a unique structure for accessing component content.

For example, a `text` node contains a `text` object, which includes `html` and `text` properties. These properties provide context for strings that can be localized. See the tabs below for the specific properties for each node type.

<br />

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Text">
    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `text`
        </ParamField>

        <ParamField path="text" type="object" required={true}>
          The text content of the node

          <Accordion title="+ Show 2 properties">
            <ParamField path="html" type="string" required={true}>
              The HTML content of the node
            </ParamField>

            <ParamField path="text" type="string" required={true}>
              The text content of the node
            </ParamField>
          </Accordion>
        </ParamField>

        <ParamField path="attributes" type="map from strings to strings" required={false}>
          The custom attributes of the node
        </ParamField>
      </Card>

      <CodeBlocks>
        ```json title="Text node example"
        {
          "id": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
          "type": "text",
          "text": {
            "html": "<h1>Don't Panic!</h1>",
            "text": "Don't Panic!"
          },
          "attributes": {}
        },
        {
          "id": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
          "type": "text",
          "text": {
            "html": "<span data-w-id=\"b3107...\">$9.99</span>",
            "text": "$9.99"
          },
          "attributes": {}
        }
        ```
      </CodeBlocks>
    </div>

    <Note title="Nested HTML tags">
      The `text.html` property may contain nested HTML tags with `data-w-id` attributes (e.g., `data-w-id="some-unique-identifier"`). Retain these identifiers when updating page content in secondary locales to preserve custom attributes and links on inner HTML elements.
    </Note>
  </Tab>

  <Tab title="Image">
    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `image`
        </ParamField>

        <ParamField path="image" type="object" required={true}>
          The image content of the node

          <Accordion title="+ Show 2 properties">
            <ParamField path="alt" type="string" required={true}>
              The alt text for the image
            </ParamField>

            <ParamField path="assetId" type="string" required={true}>
              The ID of the asset for the image
            </ParamField>
          </Accordion>
        </ParamField>

        <ParamField path="attributes" type="map from strings to strings" required={false}>
          The custom attributes of the node
        </ParamField>
      </Card>

      ```json title="Image node example"
      {
        "id": "a245c12d-995b-55ee-5ec7-aa36a6cad629",
        "type": "image",
        "image": {
          "alt": "Marvin, the Paranoid Android",
          "assetId": "659595234426a9fcbad57043"
        },
        "attributes": {}
      }
      ```
    </div>

    <Warning title="Updating images isn't supported by the API">
      Currently, the API returns `image` nodes in the response body of a <Badge intent="success">GET</Badge> static contnet request. However, updating images isn't supported by the API. To update images, you'll need to update the image asset in the Webflow designer.
    </Warning>
  </Tab>

  <Tab title="Text Input">
    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `text-input`
        </ParamField>

        <ParamField path="placeholder" type="string" required={false}>
          The placeholder text for the input field
        </ParamField>

        <ParamField path="attributes" type="map from strings to strings" required={false}>
          The custom attributes of the node
        </ParamField>
      </Card>

      ```json title="Text input node example"
      {
        "id": "a245c12d-995b-55ee-5ec7-aa36a6cad642",
        "type": "text-input",
        "placeholder": "Enter something here...",
        "attributes": {}
      }
      ```
    </div>
  </Tab>

  <Tab title="Select">
    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `select`
        </ParamField>

        <ParamField path="choices" type="list of objects" required={true}>
          The choices for the select field

          <Accordion title="+ Show 2 properties">
            <ParamField path="value" type="string" required={true}>
              The value of the choice
            </ParamField>

            <ParamField path="text" type="string" required={true}>
              The text of the choice
            </ParamField>
          </Accordion>
        </ParamField>

        <ParamField path="attributes" type="map from strings to strings" required={false}>
          The custom attributes of the node
        </ParamField>
      </Card>

      ```json title="Select node example"
      {
        "id": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
        "type": "select",
        "choices": [
          {
            "value": "choice-1",
            "text": "First choice"
          },
          {
            "value": "choice-2",
            "text": "Second choice"
          }
        ],
        "attributes": {}
      }
      ```
    </div>
  </Tab>

  <Tab title="Submit Button">
    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `submit-button`
        </ParamField>

        <ParamField path="value" type="string" required={true}>
          The text content of the button
        </ParamField>

        <ParamField path="waitingText" type="string" required={false}>
          The text content of the button while submitting
        </ParamField>

        <ParamField path="attributes" type="map from strings to strings" required={false}>
          The custom attributes of the node
        </ParamField>
      </Card>

      ```json title="Submit button node example"
      {
        "id": "a245c12d-995b-55ee-5ec7-aa36a6cad671",
        "type": "submit-button",
        "value": "Submit",
        "waitingText": "Submitting...",
        "attributes": {}
      }
      ```
    </div>
  </Tab>

  <Tab title="Component Instance">
    <div>
      <Card>
        <ParamField path="id" type="string" required={true}>
          Node UUID
        </ParamField>

        <ParamField path="type" type="enum" required={true}>
          The type of the node. `component-instance`
        </ParamField>

        <ParamField path="componentId" type="string" required={true}>
          The ID of the component
        </ParamField>

        <ParamField path="propertyOverrides" type="array" required={false}>
          The property overrides for the component instance

          <Accordion title="+ Show 4 properties">
            <ParamField path="propertyId" type="string" required={true}>
              The ID of the property
            </ParamField>

            <ParamField path="type" type="string" required={true}>
              The type of the property
            </ParamField>

            <ParamField path="label" type="string" required={true}>
              The label of the property
            </ParamField>

            <ParamField path="text" type="object" required={true}>
              The text content of the property

              <Accordion title="+ Show 2 properties">
                <ParamField path="html" type="string" required={false}>
                  The HTML content of the property
                </ParamField>

                <ParamField path="text" type="string" required={false}>
                  The text content of the property
                </ParamField>
              </Accordion>
            </ParamField>
          </Accordion>
        </ParamField>
      </Card>

      <CodeBlocks>
        ```json title="Component instance node example"
        {
          "id": "a245c12d-995b-55ee-5ec7-aa36a6cad631",
          "type": "component-instance",
          "componentId": "6258612d1ee792848f805dcf",
            "propertyOverrides": [
              {
                "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad633",
              "type": "Plain Text",
              "label": "Catchphrase",
              "text": {
                "html": null,
                "text": "Don't Panic!"
              }
              },
              {
                "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
              "type": "Rich Text",
              "label": "Tagline",
              "text": {
                "html": "<div><p>Always know where your towel is.</p></div>",
                "text": null
              }
            }
          ]
        }
        ```
      </CodeBlocks>
    </div>

    ##### Nested component instances

    A nested component instance is a component instance that's permanently included within another component's definition.

    For example, a Job Card component might always include a Button component as part of its design. This Button will be a nested component instance that has its own properties, which can be overridden in the Job Card's definition.

    <div>
      <div>
        <Frame>
          <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/942180afed092b4f6508afb2e526e08b1aa62b81f299138b5437c22872dbf613/products/data/pages/Localization/assets/NestedComponent.png" alt="Nested component instance" />
        </Frame>

        <div>
          The <Badge intent="info">Apply Now</Badge> button is a nested component
          instance that has its own properties. In the Button instance, the "button
          text" property is overridden from its default value of "Click here" to
          "Apply Now." This is indicated by the blue overlay on the "Button Text"
          label. Now that the button text property is overridden, it's localizable.
        </div>
      </div>

      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/18b1f812066a7876279fc90285a16439683374c33ce92de886f383e6dd07a038/products/data/pages/Localization/assets/ButtonProps.png" alt="Nested component instance" />
    </div>
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

#### Update static content

After translating the content you received from your earlier request, update it with the [update component content endpoint](/data/reference/pages-and-components/components/update-content), passing the target `localeId` as a query parameter and the translated `nodes` in the request body.

You only need to include the `nodeId` and the content property for that specific node type.

##### Request

<CodeBlocks>
  ```curl cURL
  curl -X POST https://api.webflow.com/v2/sites/<SITE_ID>/components/<COMPONENT_ID>/dom?localeId=<SECONDARY_LOCALE_ID> \
       -H "Authorization: Bearer <token>" \
       -H "Content-Type: application/json" \
       -d '{
         "nodes": [
          {
            "nodeId": "dca4e42f-0d46-0c2a-420f-6496321fec8b",
            "text": "<div class=\"text-block-2\">NUEVA&nbsp;OPORTUNIDAD</div>"
          },
          {
            "nodeId": "d2154999-bbdb-8145-1152-53511d5c3f73",
            "propertyOverrides": [
              {
                "propertyId": "d9e0fd5c-e7f7-d25a-fdc4-3741ec86fc43",
                "text": "Aplicar ahora"
              }
            ]
          }
        ]
       }'
  ```

  ```javascript Node.js
  const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
  await client.components.updateContent("YOUR_COMPONENT_ID", {
    localeId: "SECONDARY_LOCALE_ID",
    nodes: [
      {
        nodeId: "dca4e42f-0d46-0c2a-420f-6496321fec8b",
        text: '<div class="text-block-2">NUEVA&nbsp;OPORTUNIDAD</div>',
      },
      {
        nodeId: "d2154999-bbdb-8145-1152-53511d5c3f73",
        propertyOverrides: [
          {
            propertyId: "d9e0fd5c-e7f7-d25a-fdc4-3741ec86fc43",
            text: "Aplicar ahora",
          },
        ],
      },
    ],
  });
  ```
</CodeBlocks>

##### Response

A successful response will return an object with and `error` property with an empty array.

### Localize default properties

Component properties are typed variables that make component content dynamic and customizable per instance. When content is bound to a property, each component instance can have different values for that property.

Component definitions can store **default values** for properties, which are used as fallbacks when instances don't have property overrides. To localize the default values follow the steps below.

<Steps>
  <Step title="List site components">
    Use the [List
    Components](/data/reference/pages-and-components/components/list) endpoint
    to get a list of all components on your site.
  </Step>

  <Step title="Get component properties">
    Use the [Get Component
    Properties](/data/reference/pages-and-components/components/get-properties)
    endpoint to get the default properties of the selected component definition.
  </Step>

  <Step title="Update component properties">
    Use the [Update Component
    Properties](/data/reference/pages-and-components/components/update-properties)
    endpoint to update the default properties of the selected component
    definition.
  </Step>
</Steps>

#### List site components

Use the [List Components](/data/reference/pages-and-components/components/list) endpoint to get a list of all components on your site.

{/* While this endpoint does provide details about each component definition, it doesn't show where the components are actually being used. The [Get Page Content API](https://developers.webflow.com/data/reference/pages-and-components/pages/get-content) response will show you which components are instanced on a given page. */}

##### Request

<CodeBlocks>
  ```curl cURL
  curl -G https://api.webflow.com/v2/sites/<SITE_ID>/components \
       -H "Authorization: Bearer <token>" \
       -d limit=100 \
       -d offset=0
  ```

  ```javascript Node.js
  const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
  const components = await client.components.list("YOUR_SITE_ID");
  ```
</CodeBlocks>

##### Response

The endpoint returns a `components` array with the details of each component definition on your site. The response also includes a `pagination` object for pagination through results over the 100 item limit.

{/* <!-- vale off --> */}

<div>
  <Card>
    <EndpointSchemaSnippet endpoint="GET /sites/:site_id/components" selector="response.body" />
  </Card>

  <CodeBlocks>
    ```json title="Response"
    {
      "components": [
        {
          "id": "1fa6f97b-84f7-2db3-29cb-1275161e432f",
          "name": "Navbar"
        },
        {
          "id": "9fa3a9c4-87d4-19b0-95f7-1b0b099f82a0",
          "name": "Footer"
        },
        {
          "id": "db278ae3-20d1-6657-c0c9-083a38fbc2c4",
          "name": "Locale dropdown"
        },
        {
          "id": "d2de2e85-bab1-8dbb-1648-2bbedc5417dd",
          "name": "Hero"
        },
        {
          "id": "fd06c181-43b2-e1c0-9d7f-0b332cd9905b",
          "name": "Card"
        },
        {
          "id": "33666cc8-031a-c160-37ec-654c05d48750",
          "name": "Job Card"
        },
        {
          "id": "d2154999-bbdb-8145-1152-53511d5c3f70",
          "name": "Button"
        }
      ],
      "pagination": {
        "limit": 100,
        "offset": 0,
        "total": 7
      }
    }
    ```
  </CodeBlocks>
</div>

{/* <!-- vale on --> */}

#### Get component properties

Retrieve component property definitions and their default values using the [Get Component Properties](/data/reference/pages-and-components/components/get-properties) endpoint.

##### Request

<CodeBlocks>
  ```curl cURL
  curl -G https://api.webflow.com/v2/sites/<SITE_ID>/components/<COMPONENT_ID>/properties \
       -H "Authorization: Bearer <token>"
  ```

  ```javascript Node.js
  const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
  const properties = await client.components.getProperties("YOUR_COMPONENT_ID");
  ```
</CodeBlocks>

##### Response

The response will return an object with the `componentId`, `properties`, and `pagination` properties. Each property will have a type and text property, which contains the property's default text value.

<div>
  <Card>
    <EndpointSchemaSnippet endpoint="GET /sites/:site_id/components/:component_id/properties" selector="response.body" />
  </Card>

  {/* <!-- vale off --> */}

  <CodeBlocks>
    ```json title="Response"
    {
      "componentId": "33666cc8-031a-c160-37ec-654c05d48750",
      "properties": [
        {
          "propertyId": "ecce29ad-f890-3428-1e29-5232054f8932",
          "type": "Plain Text",
          "label": "Title",
          "text": {
            "text": "Job Title"
          }
        },
        {
          "propertyId": "b0e6e289-f003-51df-07c2-387775f9a267",
          "type": "Plain Text",
          "label": "Department",
          "text": {
            "text": "Department"
          }
        },
        {
          "propertyId": "a0c19de3-e501-89ae-0a69-45b95dbe1dd6",
          "type": "Plain Text",
          "label": "Description",
          "text": {
            "text": "Apply if you are an expert in delaying tasks, have perfected the art of avoiding work, and mastered the subtle skill of looking busy while accomplishing nothing."
          }
        },
        {
          "propertyId": "d0b64214-eb68-fa04-3c93-26f8be2df466",
          "type": "Plain Text",
          "label": "Location",
          "text": {
            "text": "Location"
          }
        },
        {
          "propertyId": "aaeb508c-75ad-c326-ff4d-c607620dc41a",
          "type": "Plain Text",
          "label": "Contract Type",
          "text": {
            "text": "Contract Type"
          }
        },
      ],
      "pagination": {
        "limit": 100,
        "offset": 0,
        "total": 5
      }
    }
    ```
  </CodeBlocks>

  {/* <!-- vale on --> */}
</div>

##### Property types

Component properties can be of different types:

* **Plain Text** - Single-line text without HTML formatting
* **Rich Text** - Multi-line text with HTML formatting support
* **Alt Text** - Alternative text for images

#### Update component properties

Localize component property default values using the [Update Component Properties](/data/reference/pages-and-components/components/update-properties) endpoint. Provide a `properties` array with each of the property IDs and the translated strings in the `text` field. You must pass the `localeId` of the secondary locale you want to update as a query parameter.

##### Request

<CodeBlocks>
  ```curl cURL
  curl -X POST https://api.webflow.com/v2/sites/<SITE_ID>/components/<COMPONENT_ID>/properties?localeId=<SECONDARY_LOCALE_ID> \
       -H "Authorization: Bearer <token>" \
       -H "Content-Type: application/json" \
       -d '{
         "properties": [
           {
             "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad623",
             "text": "Guía del autoestopista galáctico"
           },
           {
             "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad627",
             "text": "<div><h3>¡No entres en pánico!</h3><p>Siempre sabe dónde está tu toalla.</p></div>"
           }
         ]
       }'
  ```

  ```javascript Node.js
  const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
  await client.components.updateProperties("YOUR_COMPONENT_ID", {
    localeId: "SECONDARY_LOCALE_ID",
    properties: [
      {
        propertyId: "a245c12d-995b-55ee-5ec7-aa36a6cad623",
        text: "Guía del autoestopista galáctico",
      },
      {
        propertyId: "a245c12d-995b-55ee-5ec7-aa36a6cad627",
        text: "<div><h3>¡No entres en pánico!</h3><p>Siempre sabe dónde está tu toalla.</p></div>",
      },
    ],
  });
  ```

  {/* <!-- vale on --> */}
</CodeBlocks>

##### Response

A successful response will return an object with and `error` property that contains an empty array.

## Component instances

When you add a component to a page, you create an **instance**. To customize the content of an instance, you can override the default properties of that instance. **Only overridden properties can be localized via the properties endpoints.**

### Identify component instances on pages

Component instances appear in the page content response as `component-instance` nodes. To get page content, use the [Get Page Content](/data/reference/pages-and-components/pages/get-content) endpoint.

##### Request

<EndpointRequestSnippet endpoint="GET /pages/:page_id/dom" />

##### Response

The response will return a list of nodes. Any `component-instance` type nodes will have a `propertyOverrides` array with a list of available properties to localize. If a property hasn't been overridden on the instance, it won't be included in the `propertyOverrides` array.

Each object in the `propertyOverrides` array will have the following properties:

<div>
  <Card>
    <ParamField path="propertyId" type="string" required={true}>
      The unique identifier for the property being overridden.
    </ParamField>

    <ParamField path="type" type="'Plain Text' | 'Rich Text'" required={true}>
      The type of the property.
    </ParamField>

    <ParamField path="label" type="string" required={true}>
      The user-defined label for the property.
    </ParamField>

    <ParamField path="text" type="object" required={true}>
      An object containing the overridden text content.

      <Accordion title="+ properties">
        <ParamField path="html" type="string | null">
          The HTML content for "Rich Text" properties. This will be `null` for "Plain Text" properties.
        </ParamField>

        <ParamField path="text" type="string | null">
          The plain text content for "Plain Text" properties. This will be `null` for "Rich Text" properties.
        </ParamField>
      </Accordion>
    </ParamField>
  </Card>

  {/* <!-- vale off --> */}

  <CodeBlocks>
    {/* <!-- vale on --> */}

    ```json title="Response" {8-27}
    {
      "pageId": "658205daa3e8206a523b5ad4",
      "nodes": [
        {
          "id": "a245c12d-995b-55ee-5ec7-aa36a6cad631",
          "type": "component-instance",
          "componentId": "6258612d1ee792848f805dcf",
          "propertyOverrides": [
            {
              "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad633",
              "type": "Plain Text",
              "label": "Title",
              "text": {
                "html": null,
                "text": "Custom Hero Title"
              }
            },
            {
              "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
              "type": "Rich Text",
              "label": "Description",
              "text": {
                "html": "<div><p>Page-specific description text</p></div>",
                "text": null
              }
            }
          ]
        }
      ]
    }
    ```
  </CodeBlocks>
</div>

In this example, the component instance has overridden two properties ("Title" and "Description") with page-specific values. Any other properties defined in the component will use their default values from the component definition.

### Update component instance

To localize a component instance, create a new `nodes` array, and include an object with the `nodeId` of the component instance and a `propertyOverrides` array. Each item in the array should have the `propertyId` and `text` of the property overrides for the secondary locale.

##### Request

<CodeBlocks>
  ```curl cURL
  curl -X POST https://api.webflow.com/v2/pages/<PAGE_ID>/dom?localeId=<SECONDARY_LOCALE_ID> \
       -H "Authorization: Bearer <token>" \
       -H "Content-Type: application/json" \
       -d '{
         "nodes": [
           {
             "nodeId": "a245c12d-995b-55ee-5ec7-aa36a6cad631",
             "propertyOverrides": [
               {
                 "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad633",
                 "text": "Título personalizado del héroe"
               },
               {
                 "propertyId": "a245c12d-995b-55ee-5ec7-aa36a6cad635",
                 "text": "<div><p>Texto de descripción específico de la página</p></div>"
               }
             ]
           }
         ]
       }'
  ```

  ```javascript Node.js
  const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
  await client.pages.updateStaticContent("YOUR_PAGE_ID", {
    localeId: "SECONDARY_LOCALE_ID",
    nodes: [
      {
        nodeId: "a245c12d-995b-55ee-5ec7-aa36a6cad631",
        propertyOverrides: [
          {
            propertyId: "a245c12d-995b-55ee-5ec7-aa36a6cad633",
            text: "Título personalizado del héroe",
          },
          {
            propertyId: "a245c12d-995b-55ee-5ec7-aa36a6cad635",
            text: "<div><p>Texto de descripción específico de la página</p></div>",
          },
        ],
      },
    ],
  });
  ```
</CodeBlocks>

##### Response

A successful response will return an object with and `error` property with an empty array.

## Complete component localization workflow

Here's a complete example demonstrating component localization across definitions and instances:

<CodeBlocks>
  ```javascript Node.js
  const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });

  // Example `translations` object holding the localized content for the secondary locale
  async function localizeComponentDefinition(
    siteId,
    componentId,
    secondaryLocaleId,
    translations
  ) {
    // 1. Get component content structure in primary locale
    const contentData = await client.components.getContent(siteId, componentId);

    // 2. Get component properties for a given component definition
    const propertiesData = await client.components.getProperties(
      siteId,
      componentId
    );

    // 3. Update static content in component definition
    if (translations.staticContent) {
      const staticUpdates = {
        nodes: contentData.nodes
          .filter((node) => translations.staticContent[node.id])
          .map((node) => {
            const update = { nodeId: node.id };
            if (node.type === "text") {
              update.text = translations.staticContent[node.id];
            } else if (node.type === "text-input") {
              update.placeholder = translations.staticContent[node.id];
            }
            return update;
          }),
      };

      await client.components.updateContent(siteId, componentId, {
        localeId: secondaryLocaleId,
        nodes: staticUpdates.nodes,
      });
    }

    // 4. Update component properties
    if (translations.properties) {
      const propertyUpdates = {
        properties: propertiesData.properties
          .filter((prop) => translations.properties[prop.propertyId])
          .map((prop) => ({
            propertyId: prop.propertyId,
            text: translations.properties[prop.propertyId],
          })),
      };

      await client.components.updateProperties(siteId, componentId, {
        localeId: secondaryLocaleId,
        properties: propertyUpdates.properties,
      });
    }
  }

  // Example `propertyTranslations` object holding the localized content for the secondary locale
  async function localizeComponentInstance(
    pageId,
    instanceNodeId,
    secondaryLocaleId,
    propertyTranslations
  ) {
    // Update component instance property overrides on a specific page
    const instanceUpdates = {
      nodes: [
        {
          nodeId: instanceNodeId,
          propertyOverrides: Object.entries(propertyTranslations).map(
            ([propertyId, text]) => ({
              propertyId,
              text,
            })
          ),
        },
      ],
    };

    await client.pages.updateStaticContent(pageId, {
      localeId: secondaryLocaleId,
      nodes: instanceUpdates.nodes,
    });
  }
  ```
</CodeBlocks>

## Best practices

* **Preserve HTML structure** - Always maintain `data-w-id` attributes in HTML content. These identifiers preserve custom styling, animations, and links across locales. Example:
  ```html
  // Original: "<p>Price: <span data-w-id=\"b310743e-a1ac-8409-c039-d3b594afb816\">$10</span></p>"
  // Localized: "<p>Precio: <span data-w-id=\"price-123\">$10</span></p>"
  ```
* **Batch operations** - Update multiple properties or nodes in single requests when possible (up to 1000 nodes per request)
* **Pagination** - Use `limit` and `offset` parameters in GET requests to retrieve all nodes/properties for components with extensive content
* **Content inheritance** - Only update content that needs localization; unchanged content inherits from the primary locale
* **Test in Webflow** - Verify localized content displays correctly across all component instances in Webflow. Refresh the canvas to see API changes reflected

## FAQ

<AccordionGroup>
  <Accordion title="What's the difference between component definition and instance localization?">
    Component definition localization affects all the base static content that
    lives in each instance of that component across your site, while instance
    localization only affects the specific component instance on a particular
    page through property overrides.
  </Accordion>

  <Accordion title="Can I localize read-only components?">
    No, read-only components (like those from Workspace Libraries) can't be
    updated via the APIs. These components are marked with `readonly: true` in
    the List Components response.
  </Accordion>

  <Accordion title="Do component property updates affect existing instances?">
    Yes, updating component definition property defaults affects all instances
    that don't have property overrides for those specific properties. Instances
    with overrides maintain their custom values and won't be affected by changes
    to the component definition.
  </Accordion>

  <Accordion title="Why are some component instances missing from page content?">
    In the primary locale, all component instances appear in the Get Page
    Content response. In secondary locales, only component instances with
    property overrides are included, providing a focused view of customized
    content that differs from the default component definition.
  </Accordion>

  <Accordion title="Can I update both static content and properties in one request?">
    No, static content and properties require separate API calls. Use the Update
    Component Content endpoint for static content and Update Component
    Properties for property values.
  </Accordion>

  <Accordion title="What happens if I don't preserve data-w-id attributes?">
    If you omit `data-w-id` attributes when updating HTML content, you may lose
    custom attributes or links that were applied to those elements in Webflow.
    Always preserve these identifiers exactly as they appear in the original
    content.
  </Accordion>
</AccordionGroup>

---

# Working with Localization

> A short guide for working with Webflow's Localization APIs

[Webflow Localization](https://webflow.com/localization) is end-to-end solution for customizing your website for visitors around the world – from design to translation to publishing. With these APIs, your Apps can make dynamic content updates and enable custom localization workflows, providing scalability for growing businesses that are looking to enhance global user engagement and optimize performance for international audiences.

Let's look at an example. AstralFund is an imaginary bank that serves two locales – the United States and France. To properly address each market’s needs, the bank needs to localize content throughout the site. In the images below, we’ve localized some content. In this tutorial, we’ll walk through how to localize the entire site.

<Tabs>
  <Tab title="Primary Locale">
    <h3>United States 🇺🇸</h3>\
    <p>The site's primary locale is set to the United States with content in English.</p>

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/5f568f9b89d4f0b7b45b88de8c01168b64b2adfa4f4327f8d59214f5ae7043f6/products/data/pages/Apps/data-clients/assets/AstralFund_Financial_-_English_-_Hero.png" width="95%" />

      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/188b45fb161c4736968b555be5d21f7db565197c32af4fc7ea71b99551d331fd/products/data/pages/Apps/data-clients/assets/AstralFund_Financial_-_English_-_Testimonial.png" width="95%" />
    </Frame>
  </Tab>

  <Tab title="Secondary Locale">
    <h3>
      France 🇫🇷
    </h3>

    <p>
      A secondary locale for France is available, with the homepage localized in French. Notice, the localized image and the decimals replaced by commas. However, some content, like the testimonials, still needs to be localized.
    </p>

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/af602caa56fc50f0c8fdbe8a6005433b7f5e184e7b6d7aad62260158aea16064/products/data/pages/Apps/data-clients/assets/AstralFund_Financial_-_French_-_Hero.png" width="95%" />

      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/38008f5abd417237712be9616984c8f656200889e11d60cb6442cbe8f78a6f62/products/data/pages/Apps/data-clients/assets/AstralFund_Financial_-_French_-_Testimonial.png" width="95%" />
    </Frame>
  </Tab>
</Tabs>

## What we'll build

In this tutorial, we'll walk through the process of localizing content for a French audience on a website. By the end of this tutorial, you'll have a fully localized “Contact Us” page and a new testimonial that resonates with your French audience. You'll learn how to:

* Identify primary and secondary locales within Webflow.
* Localize the DOM elements like text and images.
* Optimize SEO data for different locales.
* Manage CMS content across multiple locales.

## Prerequisites

* **[Astral Fund Cloneable](https://webflow.com/made-in-webflow/website/astralfund-919afdc1091df68b8dc1347f952a?searchValue=astral)**

* **[Localization Example](https://github.com/Webflow-Examples/Localization-Demo)** with code samples and localized data

* **Webflow site plan** that supports CMS

* **[Webflow App](/data/docs/register-an-app)** or a [Site Token](/data/reference/site-token) with the following scopes: `sites:read`, `cms:read`, and `cms:write`

* **Some knowledge of HTTP requests and JavaScript**

<br />

<Accordion title="1. Clone AstralFund and Identify Localization Opportunities">
  1. [Clone the AstralFund](https://webflow.com/made-in-webflow/website/astralfund-919afdc1091df68b8dc1347f952a?searchValue=astral) site to your Webflow account, and add it to a Workspace used for testing.
  2. [Publish the site](https://university.webflow.com/lesson/publish-your-site?topics=getting-started) to set it live.
  3. Navigate to the French locale to see the localized French homepage.
  4. Navigate to the Contact page in French. Note the content that is not yet localized. We’ll fix this by localizing the navigation bar, contact content, form, footer, and SEO data.
</Accordion>

<Accordion title="2. Set up the Development Environment">
  1. **Clone the Example Repository** <br />
     Clone the [example repository](https://github.com/Webflow-Examples/Localization-Demo) and install dependencies.

     ```bash
     git clone https://github.com/Webflow-Examples/Localization-Demo.git
     cd localization-demo
     npm install
     ```

  2. **Authenticate with your Bearer Key** <br />
     Make sure you have a valid Bearer Key that is authenticated for your new site. You can do this by authenticating through our API reference docs. Once you have your Bearer Key, store it in your `.env` file as `WEBFLOW_API_TOKEN`.
     ![Screenshot](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/6e3a08ef6fd1c5d585f9b4d91aafe3159865e70831a4c8d7af0b1565780b5016/assets/images/68c9547-Screenshot_2023-11-06_at_11.15.47_AM.png)

  3. **Create `localization.js`** <br />
     There's a full example of all the steps below in `index.js`. However, if you'd like to follow along with this guide, create a new file called `localization.js`, and include the following imports of the translated content, as well as the [Webflow Javascript SDK](https://www.npmjs.com/package/webflow-api).

     ```js localization.js
       // Import the pre-prepared localized content
       import localizedDOM from "./helpers/Contact Us - French.json" assert {type: "json"}; // Localized "Contact Us" DOM
       import localizedMetadataBody from "./helpers/seoData.json" assert {type: "json"}; // Localized SEO Data
       import frenchTestimonials from "./helpers/Testimonials - French.json" assert {type: "json"}; // Localized Testimonials
       import newFrenchTestimonial from "./helpers/newTestimonial.json" assert {type: "json"}; // New French Testimonial

       // Import the Webflow Javascript SDK
       import { WebflowClient } from "webflow-api";
       import dotenv from "dotenv";
     ```

  4. **Initialize the API** <br />
     Create an asynchronous function, and initialize the API using the Webflow JavaScript SDK:

     ```javascript localization.js
     async function localizePage() {
       try {

         // Initialize the API.
         dotenv.config();
         const token = process.env.WEBFLOW_API_TOKEN;
         const webflow = new WebflowClient(\{ accessToken: token });

         /* ADD CODE FROM GUIDE HERE */

       } catch (error) {
         console.error("An error occurred:", error);
       }
     }
     localizePage();
     ```

     <Info>
       After each step, you can run the file by typing the command `node localization` to see your progress.
     </Info>
</Accordion>

<Accordion title="3. Retrieve Locale Identifiers">
  In this step we'll retrieve the site and locale identifiers, so that we can make locale-specific requests to our site.

  1. **Call the List Sites endpoint to find your `siteId` and `locale` information.** <br />
     Replace the `siteName` variable with the name of your cloned site.

     ```javascript JavaScript
     // List sites and get the Astral Fund site's details
     const siteName = "AstralFund" // Change the site name to the name of your cloned site
     const sites = await webflow.sites.list();
     const astralFundSite = sites.sites.find((site) =>
       site.displayName.includes(siteName)
     );
     const siteId = astralFundSite.id;
     const siteDetails = await webflow.sites.get(siteId); // Get site details for locale information
     ```

  2. **Extract the `localeId` for both English and French from the Site object:**

     * Notice the `locales` parameter, which returns a `primary` locale, and an array of `secondary` locales.
     * Each locale has useful information like the language, location, and more.
     * In addition to a specific `localeId`, each locale also has a `cmsLocaleId`.

     ```javascript localization.js
     // Extract and store locale IDs
     const locales = siteDetails.locales;
     const secondaryLocaleId = locales.secondary[0].id; // French is the first secondary locale
     const secondaryCmsLocaleId = locales.secondary[0].cmsLocaleId;
     console.log([locales, secondaryLocaleId, secondaryCmsLocaleId]);
     ```
</Accordion>

<Accordion title="4. Localize Page Content">
  In this step, we're getting the content from a static, primary page, and uploading a translated version to our locale-specific page.

  1. **Get the `page_id` of the Contact Us page using the [List Pages](https://developers.webflow.com/data/reference/pages/list) endpoint.**

     ```javascript JavaScript
       // Get the page information for "Contact Us"
       const pages = await webflow.pages.list(siteId);
       const contactPage = pages.pages.find((page) =>
         page.title.includes("Contact")
       );
       const contactPageId = contactPage.id;
     ```

  2. **Get the content of the Primary Locale using the [Read DOM](https://developers.webflow.com/data/reference/pages/get-content) endpoint.** <br />
     This will return all content that can be localized from a static page, which we can then translate for our locale-specific page.

     <Info>
       📘 As of Sep 22, 2023, we only support writing to Text and Rich Text to the DOM. We do not support updating images via this API.
     </Info>

  3. **Modify the content to include localized versions of the nav bar, contact content, form, and footer.**

     We've provided a localized DOM for you with `./helpers/Contact Us - French.json`. From this example, create a DOM write object, with an array of DOM Nodes and the `cmsLocaleId`.<br />

     ```JSON maxLines=10 title="./helpers/Contact Us - French.json"
     {
       "pageId": "65427cf400e02b306eaa0496",
       "nodes": [
           {
             "nodeId": "8017772e-bc46-5c59-54c0-134cdfd4b03a",
             "text": "<h2>Contactez-nous</h2>"
           },
           {
             "nodeId": "8017772e-bc46-5c59-54c0-134cdfd4b03c",
             "text": "<p>Notre équipe d'experts en finances n'est qu'à un appel téléphonique. Composez notre numéro sans frais, et discutons !<br /></p>"
           },
           {
             "nodeId": "aa9e4de0-011e-ac64-cbc2-3ec4fa3a8bb8",
             "text": "<a>hello@astralfunds.com</a>"
           },
           {
             "nodeId": "aa9e4de0-011e-ac64-cbc2-3ec4fa3a8bbd",
             "text": "<a>+1 (555) 000-0000</a>"
           },
           {
             "nodeId": "aa9e4de0-011e-ac64-cbc2-3ec4fa3a8bc2",
             "text": "<a>398 11th Street, 2ème étage, San Francisco, CA 94103</a>"
           },
           {
             "nodeId": "8017772e-bc46-5c59-54c0-134cdfd4b0c4",
             "text": "<p>Merci ! Votre message a été reçu.</p>"
           },
           {
             "nodeId": "8017772e-bc46-5c59-54c0-134cdfd4b0c6",
             "text": "<p>Notre équipe répondra à votre message dès que possible. Merci de votre patience.</p>"
           },
           {
             "nodeId": "8017772e-bc46-5c59-54c0-134cdfd4b0c9",
             "text": "<div>Oups ! Quelque chose s'est mal passé lors de l'envoi de votre message.</div>"
           },
           {
             "nodeId": "36c1f507-a281-83c4-8222-873b4179b955",
             "text": "<h1>Commencez à banquer maintenant</h1>"
           },
           {
             "nodeId": "36c1f507-a281-83c4-8222-873b4179b957",
             "text": "<div>Adoptez une nouvelle ère de gestion financière</div>"
           },
           {
             "nodeId": "36c1f507-a281-83c4-8222-873b4179b95b",
             "text": "<div>Commencez</div>"
           },
           {
             "nodeId": "36c1f507-a281-83c4-8222-873b4179b95e",
             "text": "<div>En savoir plus</div>"
           }
         ],
         "pagination": { "limit": 100, "offset": 0, "total": 22 }
       }
     ```

  4. **Update the content of the French locale by making a `POST` request to the [Update DOM](https://developers.webflow.com/data/reference/pages/update-page-settings) endpoint.** <br />
     Be sure to include the `localeId` in the `locale` query parameter.

     ```javascript JavaScript
     // Get the DOM for the Contact Us page in English and translate to French
     const primaryContactPageDom = await webflow.pages.getContent(contactPageId);

     // Create the domWrite object with the nodes and cmsLocaleId
     const domWrite = {
       nodes: localizedDOM.nodes,
       locale: secondaryLocaleId,
     };

     // Update the Contact Us page DOM with French content
     await webflow.pages.updateStaticContent(contactPageId, domWrite);
     ```
</Accordion>

<Accordion title="5. Update SEO Data">
  In this step, we'll update the SEO metadata for the French version of the page.

  1. **Retrieve the primary page's SEO data via a `GET` request to the [Get Page Metadata](https://developers.webflow.com/data/reference/pages/get-metadata) endpoint.**

     <Tabs>
       <Tab title="Request">
         ```javascript JavaScript
         // Get page metadata
         const pageMetadata = await webflow.pages.getMetadata(contactPageId);
         ```
       </Tab>

       <Tab title="Response">
         ```JSON maxLines=10 title="Page Metadata"
         {
           "title": "Contact Us",
           "slug": "contact-us",
           "seo": {
             "title": "Contact Us | AstralFund Financial",
             "description": "Contact AstralFund Financial for expert financial advice and support. Our dedicated team is here to help you on your path to financial success. Contact us today."
           },
           "openGraph": {
             "title": "AstralFund Financial - Your Partner for Financial Success",
             "titleCopied": true,
             "description": "Discover AstralFund's personalized financial services and take control of your financial future. Contact us to learn more.",
             "descriptionCopied": true
           }
         }
         ```
       </Tab>
     </Tabs>

  2. **Translate the data so that it's relevant for the French audience.**

     We've provided localized information for you with `./helpers/seoData.json`.

     ```JSON maxLines=10 title="./helpers/seoData.json"
     {
       "title": "Contactez-nous",
       "slug": "contactez-nous",
       "seo": {
         "title": "Contactez-nous | AstralFund Financier",
         "description": "Contactez AstralFund Financier pour des conseils financiers experts et un soutien. Notre équipe dédiée est là pour vous aider sur votre chemin vers le succès financier. Contactez-nous aujourd'hui."
       },
       "openGraph": {
         "title": "AstralFund Financier - Votre partenaire pour la réussite financière",
         "titleCopied": true,
         "description": "Découvrez les services financiers personnalisés d'AstralFund et prenez le contrôle de votre avenir financier. Contactez-nous pour en savoir plus.",
         "descriptionCopied": true
       }
     }
     ```

  3. **Update the SEO Data for the French locale via a `POST` request to the [Update Page Metadata](https://developers.webflow.com/data/reference/pages/update-page-settings) endpoint.**

     Be sure to enter the `localeId` in the `locale` query parameter.

     ```javascript JavaScript
     // Get page metadata
     const pageMetadata = await webflow.pages.getMetadata(contactPageId);

     // Create Localized Page Setting Request
     const localizedMetadata = {};
     localizedMetadata.locale = secondaryLocaleId;
     localizedMetadata.body = localizedMetadataBody; // Use the localized SEO data

     // Update SEO Data
     await webflow.pages.updatePageSettings(contactPageId, localizedMetadata);
     ```
</Accordion>

<Accordion title="6. Manage Testimonials with the CMS">
  To demonstrate AstralFund's commitment to the French market, we'll translate the existing testimonials, and create a French-specific testimonial from a French regulatory authority.

  1. Get existing testimonials and translate them using our provided translation.

     ```javascript Javascript
     // Get Collections
     const collectionsData = await webflow.collections.list(siteId);
     const collections = collectionsData.collections;

     // Find Testimonials Collection
     const testimonialsCollectionId = collections.find(
       (collection) => collection.displayName === "Testimonials"
     ).id;

     const itemsData = await webflow.collections.items.listItems(
       testimonialsCollectionId
     );
     const items = itemsData.items; // Get item data from testimonial collection
     ```

  2. For each translated testimonial, update the CMS item via the Update Collection Item endpoint. Be sure to include `cmsLocaleId` in the Item.

     ```javascript JavaScript
     try {
       // For each CMS item
       for (const [index, value] of items.entries()) {

         // Add the secondary `cmsLocaleId` to the item
         frenchTestimonials[index].cmsLocaleId = secondaryCmsLocaleId;
         
         // Update the CMS item
         const updatedItem = await webflow.collections.items.updateItemLive(
           testimonialsCollectionId,
           value.id,
           frenchTestimonials[index]
         );
         console.log(`Item:`, updatedItem);
       }
     } catch (error) {
       console.error(`Error updating CMS items:`, error);
       throw error;
     }
     ```

  3. Create a French-only testimonial using our provided translation.

     ```javascript
     // Create new item
     try {
       // Set the `cmsLocaleId` of the new item
       newFrenchTestimonial.cmsLocaleId = secondaryCmsLocaleId;

       const newTestimonial = await webflow.collections.items.createItem(
         testimonialsCollectionId,
         newFrenchTestimonial
       );
       console.log("Localization process completed successfully.");
     } catch (error) {
       console.error("Error Creating CMS Item:", error);
     }
     ```
</Accordion>

<Accordion title="7: Appreciate your beautifully localized site! 👏">
  Congratulations! You've localized your AstralFund site! Take a look around the site and see what other opportunities you have to localize content.

  <Tabs>
    <Tab title="Primary Locale">
      <h3>United States 🇺🇸</h3>\
      <p>The site's primary locale is set to the United States with content in English.</p>

      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/5f568f9b89d4f0b7b45b88de8c01168b64b2adfa4f4327f8d59214f5ae7043f6/products/data/pages/Apps/data-clients/assets/AstralFund_Financial_-_English_-_Hero.png" width="95%" />

        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/188b45fb161c4736968b555be5d21f7db565197c32af4fc7ea71b99551d331fd/products/data/pages/Apps/data-clients/assets/AstralFund_Financial_-_English_-_Testimonial.png" width="95%" />
      </Frame>
    </Tab>

    <Tab title="Secondary Locale">
      <h3>
        France 🇫🇷
      </h3>

      <p>
        A secondary locale for France is available, with the homepage localized in French. Notice, the localized image and the decimals replaced by commas. However, some content, like the testimonials, still needs to be localized.
      </p>

      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/af602caa56fc50f0c8fdbe8a6005433b7f5e184e7b6d7aad62260158aea16064/products/data/pages/Apps/data-clients/assets/AstralFund_Financial_-_French_-_Hero.png" width="95%" />

        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/38008f5abd417237712be9616984c8f656200889e11d60cb6442cbe8f78a6f62/products/data/pages/Apps/data-clients/assets/AstralFund_Financial_-_French_-_Testimonial.png" width="95%" />
      </Frame>
    </Tab>
  </Tabs>
</Accordion>

---

# Working with Custom Code

> This document provides a step-by-step guide on how to add custom scripts to a Webflow site using the API, allowing for enhanced functionality and interactive features.

This guide will demonstrate how to add custom code to a pre-configured example site. You will learn how to register scripts to a site, apply them to a page, and publish the site, illustrating the complete process of managing scripts via the API.

## Prerequisites

* A clone of our [Code Example Site.](https://webflow.com/made-in-webflow/website/webflow-developers---script-ex-097863)

* A [Webflow App](https://developers.webflow.com/data/docs/register-an-app) or a [Site Token](https://university.webflow.com/lesson/intro-to-webflow-apis?topics=cms-dynamic-content#how-to-create-an-api-token) with the following scopes: `sites:read`, `sites:write`, `pages:read`, `pages:write`, `custom_code:read`, and `custom_code:write`

* An [Ngrok account and authentication token](http://ngrok.com/). We use Ngrok to set up a secure tunnel for our App.

<Accordion title="1. Clone the Example Site">
  1. **Clone the Example Webflow Project:** Clone the example Webflow site where scripts will be applied.
  2. **Publish the site:** Publish the site and explore it in your browser.
  3. **Navigate to the "Pointer Tracking" example:** The page will have an overview description of the example, and instructions on how to implement the code. In our finished version, once custom code is applied to the page, the "Pointer Tracking" example will show an animation that follows your pointer across the page.

  <Tabs>
    <Tab title="Without Custom Code">
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/883b8c617cdfbb25c4db118cc8e9827ef89b2fc0d0ea63f5ee407800f5b4264e/assets/images/6d4b083-Large_GIF_1230x624.gif" alt="Without Custom Code" />
    </Tab>

    <Tab title="With Custom Code">
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/11612b6401a78443be52441d5fe6083bbb8ead9a81029acc6731d1d2cf77504e/assets/images/0fbf9c8-Large_GIF_1238x662.gif" alt="With Custom Code" />
    </Tab>
  </Tabs>
</Accordion>

<Accordion title="2. Setup the Development Environment">
  1. **Clone the Project Repository**\
     Run the following commands in your IDE to clone the example repository and install dependencies:

     ```bash Bash
     git clone https://github.com/Webflow-Examples/custom-code-examples/tree/main
     cd custom-code-examples
     npm install 
     npm run install-project
     ```

  2. **Configure Environment Variables**\
     Fill out a `.env` file with the necessary environment variables:

     ```env .env
     WEBFLOW_CLIENT_ID=YOUR_CLIENT_ID
     WEBFLOW_CLIENT_SECRET=YOUR_CLIENT_SECRET
     NGROK_AUTH_TOKEN=YOUR_NGROK_AUTH_TOKEN
     PORT=8080
     ```
</Accordion>

<Accordion title="3. Start and Authorize Your App">
  1. **Start the Project**\
     Run the following command in your IDE to start the project:
     ```bash Bash
     npm run dev
     ```

  2. **Update App's Redirect URI**\
     Once the server is running, copy the Redirect URI provided in the terminal. Navigate to your Webflow Workspace dashboard, go to "Apps & Integrations," and update the Redirect URI in your App settings. Save the changes.

     <Tabs>
       <Tab title="Terminal Output">
         <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/b5a2cec6e0eb22c2d167d1d11c423825cbe3f099608f79d941f16d8d771544bb/assets/images/f684278-Screenshot_2024-06-25_at_3.07.27_PM.png" alt="Terminal Output" />
       </Tab>

       <Tab title="Update App Redirect URI">
         <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/42e1699df2021d780a22362b803636c2ff30b663a41ea3df18fa87e54aec05bf/assets/images/cf5b0e1-Large_GIF_1320x708.gif" alt="Update App Redirect URI" />
       </Tab>
     </Tabs>

  3. **Authorize App**\
     We'll need to authorize the App to access the newly cloned example site. We've already set up the authorization flow in this example App. Navigate to `localhost:8080` and choose the workspaces or sites you want your App to access. Once authorized, you'll be redirected to the App's frontend.

     To see how we configured authorization for this App, navigate to the `backend` folder and review `controllers/authController.js`, `routes/authRoutes.js`, and `webflowClientMiddleware.js`. For more information on setting up authorization, [read through our authorization guide.](https://developers.webflow.com/data/reference/authorization)
</Accordion>

<Accordion title="4. Register Scripts">
  In this step, you will register scripts necessary for implementing custom functionality on your Webflow site. The App provides three example scripts that correspond to functionalities you can implement on the example site. We'll start with <strong>Pointer Tracking</strong>, a script that enables an animation to follow your pointer around on the screen. We’d like to give Jeff McAvoy at RiveFlow a special thanks for contributing this example to the Webflow developer community.

  1. **Choose the Pointer Tracking Example**<br />
     From the list of example scripts, select "Pointer Tracking." Once selected, you’ll see a list of scripts to register that are marked inline or hosted.

     <Tabs>
       <Tab title="Hosted Scripts">
         Hosted scripts require a `hostedLocation` (the URL where the script is hosted) and an `integrityHash` to verify the script's contents.

         The following controller logic in the example app automates this process:

         * it fetches the script from the `hostedLocation`
         * generates an `integrityHash` to ensure the script hasn't been tampered with
         * and then uploads this information to the Webflow endpoint.

         This verification step ensures the script's integrity before it's applied to your Webflow site.

         <CodeBlocks>
           ```javascript backend/controllers/scriptController.js
           export const registerHostedScript = async (req, res) => {
             try {
               const siteId = req.params.siteId;

               async function generateSRI(url) {
                 const response = await fetch(url);
                 const data = await response.text();
                 const integrity = Sri(data, ["sha256"]);
                 return integrity;
               }

               const hostedLocation = req.body.hostedLocation;
               const integrityHash = await generateSRI(hostedLocation);

               const script = {
                 hostedLocation: hostedLocation,
                 integrityHash: integrityHash,
                 canCopy: true,
                 version: req.body.version,
                 displayName: req.body.displayName
               };

               const data = await req.webflow.scripts.registerHosted(siteId, script);
               res.json(data);
             } catch (error) {
               console.error("Error registering hosted script:", error);
               res.status(500).send("Failed to register hosted script");
             }
           };
           ```
         </CodeBlocks>
       </Tab>

       <Tab title="Inline Scripts">
         Inline scripts require the actual JavaScript `sourceCode` to be provided. Each inline script has a limit of 10,000 characters. When providing the source code, do not include \<script> tags; Webflow will handle that for you.

         The example app automates this process by capturing the `sourceCode` object from the request body and registering it with Webflow. This ensures that your inline scripts are correctly formatted and within the character limit before being applied to your Webflow site.

         <CodeBlocks>
           ```javascript backend/controllers/scriptController.js
           export const registerInlineScript = async (req, res) => {
             try {
               const siteId = req.params.siteId;

               const request = {
                 sourceCode: req.body.sourceCode,
                 canCopy: req.body.canCopy !== undefined ? req.body.canCopy : true,
                 version: req.body.version,
                 displayName: req.body.displayName,
               };

               const data = await req.webflow.scripts.registerInline(siteId, request);
               res.json(data);
             } catch (error) {
               console.error("Error registering inline script:", error);
               res.status(500).send("Failed to register inline script");
             }
           };
           ```
         </CodeBlocks>
       </Tab>
     </Tabs>

  2. **Provide script details**<br />
     To upload a script via the API, you’ll need to provide the following details:
     * **`displayName`** (*string*): The name of your script
     * **`version`** (*string*): The semantic version of your script. Each script must have a unique combination of `displayName` and `version`. You cannot overwrite scripts at this time.
     * **`canCopy`** (*Boolean*): Define whether the script can be copied on site duplication and transfer
     For the example we’ve already included the `hostedLocation` if it’s a hosted script, or the `sourceCode` if it’s an inline script.

  3. **Click register**<br />
     Depending on the type of script, inline or hosted, this button will send your script to the backend server, and then to the appropriate Webflow endpoint.
     * POST [https://api.webflow.com/v2/sites/\{site\_id}/registered\_scripts/inline](https://developers.webflow.com/data/reference/custom-code/custom-code/register-inline)
     * POST [https://api.webflow.com/v2/sites/\{site\_id}/registered\_scripts/hosted](https://developers.webflow.com/data/reference/custom-code/custom-code/register-hosted)

  4. Once you’re finished registering your scripts, click the “Next” button.
</Accordion>

<Accordion title="5. Apply Scripts">
  Now that a script has been registered to the Webflow site, you can use the API to apply scripts to either the entire site or a specific page. In this step, you will apply each script to the appropriate page for the chosen example.

  Scripts can be applied to one of two locations:

  * **Header**: Within the `<head>` tag.
  * **Footer**: Right before the closing `</body>` tag.

  1. **Select a Page**\
     Choose the page where you'll apply the script. For this example, we'll select the "Pointer Tracking" page.

  2. **View Registered Scripts**\
     You will see a list of scripts that have been registered to your site, populated by the [Get Scripts](https://developers.webflow.com/data/reference/custom-code/custom-code/list) endpoint.
     * The list includes the script ID, version, and `hostedLocation`.
     * Note that even inline scripts have `hostedLocation` URLs, as Webflow uploads these scripts to its CDN for serving.

  3. **Apply Scripts**

     * **Header**: Apply the Rive.js script to the header.
     * **Footer**: Apply the pointer-tracking.js script to the footer.

     To apply the scripts we've registered to the page, we'll use the [Add/Update Custom Code](https://developers.webflow.com/data/reference/custom-code/custom-code-pages/upsert-custom-code) endpoint. This endpoint requires you to add all custom code blocks to the page. Therefore, we'll also use the [Get Custom Code](https://developers.webflow.com/data/reference/custom-code/custom-code-pages/get-custom-code) endpoint to retrieve any existing applied scripts, also known as custom code blocks, and upload a complete list of code that should be on the site.

     We've applied this logic in our example app in `backend/controllers/scriptControllers.js`

     <CodeBlocks>
       ```javascript JavaScript
       export const upsertPageCustomCode = async (req, res) => {
         const pageId = req.params.pageId;
         const { selectedScript, version } = req.body;

         const applyScripts = async (scriptApplyList) => {
           try {
             const data = await req.webflow.pages.scripts.upsertCustomCode(pageId, scriptApplyList);
             res.json(data);
           } catch (error) {
             console.error("Error adding/updating page-level custom code:", error);
             res.status(500).send("Failed to add/update page-level custom code");
           }
         };

         try {
           const response = await req.webflow.pages.scripts.getCustomCode(pageId);
           const existingScripts = response.scripts || [];
           const newScript = {
             id: selectedScript,
             location: req.query.location,
             version: version,
           };
           existingScripts.push(newScript);
           const scriptApplyList = {
             scripts: existingScripts,
           };

           console.log(scriptApplyList);
           await applyScripts(scriptApplyList);
         } catch (error) {
           console.error("Failed to fetch scripts", error);
           const scriptApplyList = {
             scripts: [
               {
                 id: selectedScript,
                 location: req.query.location,
                 version: version,
               },
             ],
           };
           await applyScripts(scriptApplyList);
         }
       };
       ```
     </CodeBlocks>

  4. **Bonus: Check the Page in the Designer**<br />
     The Webflow Designer allows users to see how apps integrate code into their sites. After applying a script to a site or page, you can view it in the Designer's settings.
     * Open the Webflow Designer.
     * Go to the page settings for "Pointer Tracking."
     * Scroll down to the Custom Code section to see the script your app added.
     <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/0f769666641e6102080d8f47abb1a46931d4b9dcd8f762615f575981027e1d2a/assets/images/c8671c0-Google_Keep.png" alt="custom-code-app-details" />
</Accordion>

<Accordion title="6. Publish and View Your Site">
  Before you can see your scripts in action, you'll need to publish your entire site. Click the "Publish Site" button to publish your site using the [Publish Site](https://developers.webflow.com/data/reference/sites/publish) endpoint.

  Once your site is published, click "View Page" to go directly to your Pointer Tracking page. You should now see a fun animation that follows your pointer around the page.

  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/11612b6401a78443be52441d5fe6083bbb8ead9a81029acc6731d1d2cf77504e/assets/images/0fbf9c8-Large_GIF_1238x662.gif" alt="With Custom Code" />
</Accordion>

---

# Next Steps

Awesome! Now that you’ve got the hang of custom code, here are some other cool things you can do:

* **Apply More Examples**: Use the app to explore and apply more example scripts.
* **Add Your Own Custom Code**: Use the API to add your own custom code examples and see them in action on your Webflow site.

Keep experimenting and enhancing your Webflow site with custom scripts!

---

# Supporting custom code in preview mode

> Configure your app's hosted resources to work with Webflow's preview mode

Users can preview sites with custom code before publishing. When users add your app's scripts or resources as custom code, these resources need to be accessible from Webflow's preview domain.

## How preview mode works

When a user enables [preview](https://webflow.com/glossary/preview-mode) or [comment](https://help.webflow.com/hc/en-us/articles/33961339882131-Comments) mode, their site renders on a new subdomain:

```
{shortName}.canvas.webflow.com
```

This creates a secure, isolated environment that closely mirrors the published site experience, where custom code scripts can execute safely.

## Important considerations for custom code

If your custom code scripts implement specific security controls, they may need modification to work in preview and comment modes.

### What needs to be updated?

Your custom code scripts may need updates if they implement any of the following security controls:

* [Content-Security-Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy) restrictions
* [Domain-based script or stylesheet restrictions](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)
* [Origin or Referrer header validation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Referrer-Policy)

### Required modifications

#### For scripts with domain restrictions

If your scripts check for specific domains or origins, update domain validation to include preview domains:

```javascript
// Update domain validation to include preview domains
const isAllowedDomain = (domain) => {
    return domain.endsWith('.webflow.io') || 
           domain.endsWith('.canvas.webflow.com');
}
```

#### For scripts that validate origins

If your scripts validate request origins, update origin validation to include preview domains:

```javascript
// Example of updated origin validation
const validateOrigin = (origin) => {
    return origin.includes('.webflow.io') || 
           origin.includes('.canvas.webflow.com');
}
```

#### For dynamic domain detection

If your scripts need to detect the current environment, update domain detection to include preview domains:

```javascript
const shortName = window.location.hostname.split('.')[0];
const isPreviewMode = window.location.hostname.includes('canvas.webflow.com');
```

### Testing your custom code

To ensure your custom code works correctly:

1. Add your custom code to a site or page
2. Enter preview mode to test functionality
3. Verify that all interactive elements work as expected
4. Check that any external service connections still function properly

## Support resources

For implementation assistance or questions, please contact us at [developers@webflow.com](mailto:developers@webflow.com?subject=Support:%20Custom%20Code%20-%20Preview%20and%20Comment%20mode).

---

# Working with webhooks

Webhooks are a powerful way to integrate your applications and services with Webflow, allowing you to receive real-time updates whenever [specific events](#event-types)  occur on your site. By setting up webhooks, you can automate workflows, trigger external processes, and synchronize data across different platforms without any manual intervention.

<br />

<Card
  title="Get started with webhooks"
  iconPosition="left"
  iconSize="12"
  icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/CustomWebhooks.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/CustomWebhooks.svg" alt="" className="block dark:hidden" />
        </>
    }
>
  Ready to streamline your workflow? Follow the steps below to create your first webhook using the Webflow API. <br /><br />

  <a href="#creating-a-webhook">
    <button>
      Start Tutorial
    </button>
  </a>
</Card>

<br />

---

# Webhook requests

When an event occurs, Webflow will send a `POST` request to a specified URL.

The webhook body will be a JSON resource object that relates to the event. The request headers will include:

* A `Content-Type` header set to `application/json`
* A `x-webflow-timestamp` with the time the webhook was sent
* A `x-webflow-signature` header containing the request signature. Read on for information about [validating request signatures.](#validating-request-signatures)

<br />

Below is an example of webhook event data.

<Tabs>
  <Tab title="JSON Example">
    ```json Payload
      {
        "triggerType": "form_submission",
        "payload": {
          "name": "Contact Us",
          "siteId": "65427cf400e02b306eaa049c",
          "data": {
            "First Name": "Zaphod",
            "Last Name": "Beeblebrox",
            "email": "zaphod@heartofgold.ai",
            "Phone Number": 15550000000
          },
          "schema": [
            {
              "fieldName": "First Name",
              "fieldType": "FormTextInput",
              "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c4"
            },
            {
              "fieldName": "Last Name",
              "fieldType": "FormTextInput",
              "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c5"
            },
            {
              "fieldName": "email",
              "fieldType": "FormTextInput",
              "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c6"
            },
            {
              "fieldName": "Phone Number",
              "fieldType": "FormTextInput",
              "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c7"
            }
          ],
          "submittedAt": "2022-09-14T12:35:16.117Z",
          "id": "6321ca84df3949bfc6752327",
          "formId": "65429eadebe8a9f3a30f62d0",
          "formElementId": "4e038d2c-6a1e-4953-7be9-a59a2b453177"
        }
      }
    ```
  </Tab>

  <Tab title="Properties">
    <ParamField path="triggerType" type="string">
      The type of event that triggered the request
    </ParamField>

    <ParamField path="payload" type="object">
      The payload of data sent from Webflow

      <div class="expandable">
        <Accordion title=" ">
          <ParamField path="name" type="string">
            The name of the form
          </ParamField>

          <ParamField path="siteId" type="string">
            The id of the site that the form was submitted from
          </ParamField>

          <ParamField path="data" type="object">
            The data submitted in the form

            <Accordion title=" ">
              <ParamField path="firstName" type="string" />

              <ParamField path="lastName" type="string" />

              <ParamField path="email" type="string" />

              <ParamField path="phoneNumber" type="string" />
            </Accordion>
          </ParamField>

          <ParamField path="submittedAt" type="string">
            The timestamp the form was submitted
          </ParamField>

          <ParamField path="id" type="string">
            the ID of the event
          </ParamField>

          <ParamField path="formId" type="string">
            The ID of the form submission
          </ParamField>
        </Accordion>
      </div>
    </ParamField>
  </Tab>
</Tabs>

<br />

---

# Creating a webhook

In this tutorial, we'll walk through creating a webhook to listen for new submissions to a contact form on a site. Whenever someone submits this form, Webflow will send a notification to the specified destination. Additionally, we'll cover how to verify that the webhook requests you're receiving are genuinely from Webflow, ensuring secure and reliable communication with your application.

<Note title="Looking for a simpler setup?">
  If you'd prefer a way to set up webhooks without using the API, you can easily [configure them through the Webflow dashboard](https://university.webflow.com/lesson/intro-to-webflow-apis?topics=cms-dynamic-content#how-to-create-a-webhook). Please note, that webhooks created through the dashboard will not include the request headers needed to [validate request signatures.](#validating-request-signatures)
</Note>

#### Prerequisites

* A [site token](/data/reference/site-token) or bearer token from a Webflow [Data Client App](/data/docs/getting-started-apps) with the `forms:read` scope.
* A Webflow test site. You can use the [Biznus template](https://webflow.com/templates/html/biznus-retail-website-template) to quickly set up a site equipped with a contact form.
* A service to accept an HTTPS request. While we'll be using [https://webhook.site](https://webhook.site) in this tutorial, you're free to choose any platform.

<br />

<Accordion title="Step 1. Create a form">
  Before we get started working with the API, we'll first need to create a form and publish our site. If you already have a working form on your site, you can skip this step. To create a site with a form, we'll use the <a href="https://webflow.com/dashboard/sites/new?t=5e864888a8dec40670d77ac4">Biznus template</a>, which already has a <a href="https://biznus-template.webflow.io/contact">form</a> on its contact page.

  1. **Clone the [Biznus template](https://webflow.com/dashboard/sites/new?t=5e864888a8dec40670d77ac4)** to your development Workspace.

  2. **Go to the Contact Page** to view your form. Here, you can review your form's fields. Ensure each field has a unique name. These field names will be used as keys in the webhook's payload.
     ![Form Fields](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/3f45f69aca87ea3c60972974e53a7c72a80b4b8388b2542172397cc692223eb8/assets/images/6f39396-Screen_Shot_2022-11-08_at_1.42.30_PM.png)

  3. **Publish the site** by clicking the publish button in the top right corner.
</Accordion>

<Accordion title="Step 2. Create a webhook">
  Webhooks require the following elements to function:

  * **Site ID:** The unique identifier of your Webflow site.
  * **Trigger Type:** Specific event the webhook will monitor.
  * **Destination URL:** Unique URL prepped to accept HTTP requests.

  Once we have these elements, we can create the webhook by sending a `POST` request to the [Create Webhook](https://developers.webflow.com/data/reference/webhooks/create) endpoint.

  1. **Get the Site ID.** There are two ways to get your Site ID, you can access the ID via site settings, or send a request to the [List Sites](https://developers.webflow.com/data/reference/sites/list) endpoint.

     <Tabs>
       <Tab title="Site Settings">
         1. In the designer, click the Webflow Icon in the top left corner, and select "Site Settings" from the menu.

         2. In your site settings, scroll down to the "Overview" section to find your Site ID
            ![Site ID location in settings](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/e3071f6add47d66472945082d7cd25929679b0781c24f75b145232439b4c9358/assets/images/7bbb258-Screenshot_2024-07-29_at_2.49.21_PM.png)
       </Tab>

       <Tab title="API Request">
         1. Send a request to the [List Sites](https://developers.webflow.com/data/reference/sites/list) endpoint.

            <CodeBlocks>
              ```curl cURL
              curl --request GET \
                        --url https://api.webflow.com/v2/sites \
                        --header 'accept: application/json' \
                        --header 'authorization: Bearer YOUR_ACCESS_TOKEN'
              ```

              ```javascript node.js
              const webflow = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
              async function fetchSites() {
                try {
                  const sites = await webflow.sites.get();
                  console.log(sites);
                } catch (error) {
                  console.error("Error fetching sites:", error);
                }
              }
              fetchSites();
              ```
            </CodeBlocks>

         2. Review the response to find the `displayName` of your test site and its corresponding `id`.

            ```json Response
            {
              "sites": [
                {
                  "id": "42e63e98c9a982ac9b8b741",
                  "workspaceId": "42e63fc8c9a982ac9b8b744",
                  "createdOn": "1979-10-12T12:00:00.000Z",
                  "displayName": "Heart of Gold Spaceship",
                  "shortName": "heart-of-gold",
                  "lastPublished": "2023-04-02T12:42:00.000Z",
                  "previewUrl": "https://dev-assets.website-files.com/42e63e98c9a982ac9b8b741/197910121200.png",
                  "timeZone": "DeepSpace/InfiniteImprobability",
                  "parentFolderId": "1as2d3f4g5h6j7k8l9z0x1c2v3b4n5m6",
                  "customDomains": [
                    {
                      "id": "589a331aa51e760df7ccb89e",
                      "url": "heartofgold.galaxy"
                    }
                  ],
                  "locales": {
                    "primary": {
                      "id": "653fd9af6a07fc9cfd7a5e57",
                      "cmsLocaleId": "653ad57de882f528b32e810e",
                      "enabled": true,
                      "displayName": "English - Heart of Gold Standard",
                      "redirect": false,
                      "subdirectory": "/en",
                      "tag": "The Ultimate Answer"
                    },
                    "secondary": [
                      {
                        "id": "653fd9af6a07fc9cfd7a5e58",
                        "cmsLocaleId": "653ad57de882f528b32e810g",
                        "enabled": true,
                        "displayName": "Betelgeusian - Vogon Liaison",
                        "redirect": true,
                        "subdirectory": "/bet",
                        "tag": "Vogon"
                      },
                      {
                        "id": "653fd9af6a07fc9cfd7a5e59",
                        "cmsLocaleId": "653ad57de882f528b32e810h",
                        "enabled": false,
                        "displayName": "Magrathean - Custom Planet Designs",
                        "redirect": true,
                        "subdirectory": "/mg",
                        "tag": "Magrathean"
                      }
                    ]
                  }
                },  ]
            }
            ```
       </Tab>
     </Tabs>

  2. **Get your destination URL.** Navigate to [webhook.site](https://webhook.site) and copy your unique URL. This URL will be used as the destination where Webflow will send webhook events.
     ![Screenshot showing webhook.site interface with unique URL](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/016bf242fb68ded0df190fc26dc9210e727b87844ce8ce16e31b665bdcc1bd50/assets/images/1428146-Screenshot_2024-07-30_at_12.54.18_PM.png)

  3. **Send a `POST` request to the [Create Webhook](https://developers.webflow.com/data/reference/webhooks/create) endpoint.** In the request, you'll include the `site_id`, `url`, and `triggerType` of `form_submission`.

     <CodeBlocks>
       ```curl cURL
       curl -X POST "https://api.webflow.com/sites/YOUR_SITE_ID/webhooks" \
               -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
               -H "Content-Type: application/json" \
               -d '{
                     "triggerType": "form_submission",
                     "url": "https://your-webhook-url.com"
                   }'
       ```

       ```javascript JavaScript
       const WebflowClient = require('webflow-api'); // Import Webflow API client

       async function createWebhook(req) {
         const accessToken = req.accessToken; // Get access token from the request
         const siteId = "YOUR_SITE_ID"; // Replace with your actual Site ID

         const webflow = new WebflowClient({ accessToken }); // Initialize Webflow client

         try {
           const webhook = await webflow.webhooks.create(siteId, {
             triggerType: 'form_submission', // Trigger type for the webhook
             url: "https://your-webhook-url.com" // Replace with your webhook URL
           });
           console.log('Webhook created successfully:', webhook);
           return webhook;
         } catch (error) {
           console.error('Error creating webhook:', error.message);
         }
       }

       createWebhook(req); // Moved function call outside the function definition
       ```
     </CodeBlocks>

     Additionally, the `form_submission` trigger supports a `filter` parameter, allowing you to specify the name of the form you'd like to receive notifications for. This is particularly helpful if you have multiple forms on a site.

     <Info title="Use our interactive API Docs to send requests">
       You can also use the interactive API Reference to quickly send a POST request to the [Create Webhook](/data/reference/webhooks/create) endpoint without writing any code.
     </Info>

  4. **Review the response.** After successfully establishing your webhook, you should receive a confirmation similar to the one shown below:
     <CodeBlocks>
       ```json Successful response
       {
         "id": "582266e0cd48de0f0e3c6d8b",
         "triggerType": "form_submission",
         "siteId": "562ac0395358780a1f5e6fbd",
         "workspaceId": "4f4e46fd476ea8c507000001",
         "createdOn": "2022-11-08T23:59:28.572Z",
         "lastTriggered": "2023-02-08T23:59:28.572Z",
         "filter": null,
         "url": "https://webhook.site/7f7f7f7f-7f7f-7f7f-7f7f-7f7f7f7f7f7f",
         "secretKey": "2b4acfd1c5518bf03c73a4889d197d77251353857c22694bf150b9e3402ba15f" 
         // 👆 The secret key is only present if using a Site API key created from the Site Dashboard
       }
       ```
     </CodeBlocks>
</Accordion>

<Accordion title="Step 3. Send a test submission">
  Once you've successfully created the Webhook to listen for new form submissions, you can test it by navigating to the form on your site and submitting a response.

  Once you've submitted a response, head over to [webhook.site](https://webhook.site) to view the `POST` request from Webflow. If the request is successful, you'll see the Request Details, Headers, and Payload sections. These details should match the JSON object shown below.

  <CodeBlocks>
    ```json JSON
    Content-Type: application/json
    x-webflow-timestamp: 1722370035277
    x-webflow-signature: cb6162d8daf6573c658805a5f431adab25f56faf6c601935067d3957a161dfeb
    {
      "triggerType": "form_submission",
      "payload": {
        "name": "Email Form",
        "siteId": "65427cf400e02b306eaa049c",
        "data": {
          "Email 2": "hello@gmail.com"
        },
        "submittedAt": "2024-07-30T20:07:15.220Z",
        "id": "66a947f35b9d7ba400e22733",
        "formId": "65429eadebe8a9f3a30f62d7"
      }
    }
    ```
  </CodeBlocks>

  <Info>
    Notice the headers included in the response: `x-webflow-timestamp` and `x-webflow-signature`. These headers are crucial for verifying the authenticity of the webhook.
  </Info>
</Accordion>

---

# Webhook retries

Your service should return a `200` response  to show that the webhook was successfully captured. If the response status is anything else, the webhook will be retried up to three more times at which point the request will be considered failed and will no longer be retried.

<br />

### Failure conditions

Webflow considers the following scenarios as failure conditions:

* **Non-200 HTTP status code response**: If we receive any response other than a valid HTTP 200 response, it is regarded as a failure.
* **Redirects**: If the webhook encounters redirects while attempting to deliver the payload, it will be treated as a failure.
* **SSL Certificate Issues**: If we cannot successfully negotiate or validate your server's SSL certificate, it will be marked as a failure.
* **Timeouts**: Webflow expects a swift response during webhook delivery. If there are prolonged delays in receiving a response from your server, it will be considered a failure.

<br />

### Deactivation of webhooks

If Webflow repeatedly encounters failure conditions while attempting to deliver a webhook payload, we will take the following action:

* **Deactivation**: We will deactivate your webhook to prevent further delivery attempts.
* **Notification**: You will be notified of the webhook deactivation via email.

To reactivate your webhook or if you have any questions regarding a deactivated webhook, please don't hesitate to reach out to our [support team](https://support.webflow.com/).

<br />

### Limits

Understanding the limits imposed by Webflow can help you design and manage your webhooks more efficiently:

| **Criteria**                                                        | **Limitation** |
| :------------------------------------------------------------------ | :------------: |
| Maximum webhooks for a specific `trigger_type`                      |     **75**     |
| Maximum number of retry attempts after an unsuccessful webhook call |      **3**     |
| Interval (in minutes) between each retry                            |     **10**     |

<br />

---

# Event types

This is the full list of webhook events available in Webflow. For complete documentation of webhook events with payloads, please see the [webhook events documentation.](https://developers.webflow.com/data/reference/all-events)

| Event                         | Description                                                                                                                                 |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `form_submission`             | Details about a form submission, including form name, site ID, data submitted, submission timestamp, and form ID.                           |
| `site_publish`                | Details about a site publish event, including site ID, published timestamp, domains, and user who published the site.                       |
| `page_created`                | Information about a new page event, including site ID, page ID, page title, and creation timestamp.                                         |
| `page_metadata_updated`       | Metadata of a page is updated and published, including site ID, page ID, page title, and last updated timestamp.                            |
| `page_deleted`                | Information about a deleted page, including site ID, page ID, page title, and deletion timestamp.                                           |
| `ecomm_new_order`             | Information about a new order, including order ID, status, customer information, shipping details, and purchased items.                     |
| `ecomm_order_changed`         | Details about an order that changed, including order ID, status, comments, customer information, and updated order details.                 |
| `ecomm_inventory_changed`     | Information about the inventory item that changed, including item ID, quantity, and inventory type.                                         |
| `user_account_added`          | Information about a new user account, including user ID, email verification status, account creation date, and status.                      |
| `user_account_updated`        | Details about an updated user account, including user ID, email verification status, last updated timestamp, and access groups.             |
| `user_account_deleted`        | Information about a deleted user account, including user ID, email verification status, and account creation date.                          |
| `collection_item_created`     | Details about a newly created collection item, including item ID, site ID, Workspace ID, collection ID, creation date, and draft status.    |
| `collection_item_changed`     | Information about an updated collection item, including item ID, site ID, Workspace ID, collection ID, last updated date, and item details. |
| `collection_item_deleted`     | Details about a deleted collection item, including item ID, site ID, Workspace ID, and collection ID.                                       |
| `collection_item_unpublished` | Information about an unpublished collection item, including item ID, site ID, Workspace ID, and collection ID.                              |

---

# Validating request signatures

Webflow provides methods to verify that requests are genuinely coming from the Webflow API by using signatures included in the request headers. **These signatures vary based on the creation method of the webhook.**

### Request headers

* `x-webflow-timestamp` : The time the webhook was sent, represented in Unix epoch time format.
* `x-webflow-signature` : The request signature, formatted as a SHA-256 HMAC hash. It uses either the site token secret or the OAuth app's client secret as the signing key.

To ensure the authenticity of a webhook request from Webflow, validate the request signature using the provided headers and your webhook's associated signing key.

### Signing keys

Depending on the creation method of the webhook, you'll receive a different signing key.

* **Site token secret** : For webhooks created through site settings via a site token after **April 14, 2025**, each webhook will have its own secret key. You'll need to store this key securely and use it as your signing key.
* **OAuth app client secret** : For webhooks created through an OAuth application, you won't receive a separate secret key. Instead, you'll use your OAuth app's client secret as the signing key.

### Recommended: Use the provided signature validation method

Webflow recommends use of the provided SDK method to verify the incoming webhook requests' signatures.

As signature implementations are subject to change, Webflow will support updates to the method to ensure smooth transitions for developers.
All you will need to do is update the package version to benefit from these changes.

1. **Extract data from the HTTP Request**
   * `headers` : Keep the headers as a record-like object
   * `body` : Stringify the entire request body

2. **Await the results**
   <CodeBlocks>
     ```javascript Javascript
     import express from 'express';
     import { WebflowClient } from "webflow-api";

     const webflowClient = new WebflowClient({ accessToken: AUTHTOKEN });
     const app = express();
     app.use(express.json());
     // ...

     app.post('/FormSubmission', async (req, res) => {
       const isValidRequest = await webflowClient.webhooks.verifySignature({
         headers: req.headers, 
         body: JSON.stringify(req.body), 
         secret: getSigningSecret(FORM_SUBMISSION_SECRET);
       });

       if (isValidRequest) {
         // ...handle the request
       } else {
         // ...handle malicious request
       }

       res.sendStatus(200);
     });
     ```
   </CodeBlocks>

### Steps to manually validate the request signature

If you need to validate the request signature without use of the SDK, follow the steps below to achieve the same effect as the SDK method.

1. **Generate the HMAC hash**
   * Retrieve the timestamp from the `x-webflow-timestamp` header.
   * Concatenate the timestamp and the request body with a colon (`:`) separator. The format should be:
     <CodeBlocks>
       ```javascript JavaScript
       timestamp + ":" + JSON.stringify(request_body)
       ```

       ```python Python
       data = f"{request_timestamp}:{request_body_json}"
       ```
     </CodeBlocks>
   * Use your OAuth application's client secret (or your secret key if the webhook is not associated with an OAuth Application) and the SHA-256 hashing algorithm to generate the HMAC hash.

2. **Compare the generated hash with the provided signature**\
   Compare the generated HMAC hash with the `x-webflow-signature` header from the request. A match confirms the request's legitimacy; otherwise, it should be considered potentially tampered with or fraudulent.

3. **Verify the timestamp**\
   Check the `x-webflow-timestamp` header to ensure the request is recent. A request older than 5 minutes may indicate a replay attack. Calculate the request's age as follows:

   <CodeBlocks>
     ```javascript JavaScript
     currentTime - Number(request_timestamp)
     ```

     ```python Python
     current_time - int(request_timestamp)
     ```
   </CodeBlocks>

   If the difference exceeds 5 minutes (300,000 milliseconds), consider the request potentially compromised.

   See below for examples that accept an incoming HTTPS request and validate the signature:

   <CodeBlocks>
     ```javascript Node
     const express = require('express');
     const crypto = require('crypto');
     const bodyParser = require('body-parser');

     const app = express();
     const PORT = 3000;
     const CLIENT_SECRET = 'your_client_secret'; // Replace with your Webflow OAuth application's client secret

     app.use(bodyParser.json()); // Parse JSON request bodies

     app.post('/webhook', (req, res) => {
       // Step 1: Extract headers and body from the request
       const requestBody = JSON.stringify(req.body);
       const timestamp = req.headers['x-webflow-timestamp'];
       const providedSignature = req.headers['x-webflow-signature'];

       // Step 2: Verify the signature
       if (!verifyWebflowSignature(CLIENT_SECRET, timestamp, requestBody, providedSignature)) {
         return res.status(400).send('Invalid signature'); // Respond with a 400 Bad Request if verification fails
       }

       // Process the webhook request as necessary
       console.log('Webhook verified and received:', req.body);
       res.status(200).send('Webhook received');
     });

     function verifyWebflowSignature(clientSecret, timestamp, requestBody, providedSignature) {
       try {
         // Step 3: Convert the timestamp to an integer
         const requestTimestamp = parseInt(timestamp, 10);

         // Step 4: Generate the HMAC hash
         const data = `${requestTimestamp}:${requestBody}`;
         const hash = crypto.createHmac('sha256', clientSecret)
                           .update(data)
                           .digest('hex');

         // Step 5: Compare the generated hash with the provided signature
         if (!crypto.timingSafeEqual(Buffer.from(hash, 'hex'), Buffer.from(providedSignature, 'hex'))) {
           throw new Error('Invalid signature');
         }

         // Step 6: Validate the timestamp (within 5 minutes)
         const currentTime = Date.now();
         if (currentTime - requestTimestamp > 300000) { // 5 minutes in milliseconds
           throw new Error('Request is older than 5 minutes');
         }

         return true; // The request is valid

       } catch (err) {
         console.error(`Error verifying signature: ${err.message}`);
         return false;
       }
     }

     app.listen(PORT, () => {
       console.log(`Server is running on port ${PORT}`);
     });

     ```

     ```python Python
     import hashlib
     import hmac
     import json
     import time
     from flask import Flask, request, abort

     app = Flask(__name__)

     @app.route('/webhook', methods=['POST'])
     def webhook():
         # Step 1: Extract headers and body from the request
         client_secret = 'your_client_secret'  # Your Webflow OAuth application's client secret
         request_body = request.get_data(as_text=True)
         request_json = json.loads(request_body)
         timestamp = request.headers.get('x-webflow-timestamp')
         provided_signature = request.headers.get('x-webflow-signature')

         # Step 2: Verify the signature
         if not verify_webflow_signature(client_secret, timestamp, request_body, provided_signature):
             abort(400, 'Invalid signature')  # Respond with a 400 Bad Request if verification fails

         # Process the webhook request as necessary
         return 'Webhook received', 200

     def verify_webflow_signature(client_secret, timestamp, request_body, provided_signature):
         try:
             # Convert the timestamp to an integer
             timestamp = int(timestamp)

             # Generate the HMAC hash
             data = f"{timestamp}:{request_body}"
             digest = hmac.new(client_secret.encode('utf-8'), data.encode('utf-8'), hashlib.sha256).hexdigest()

             # Compare the generated hash with the provided signature
             if not hmac.compare_digest(digest, provided_signature):
                 raise ValueError("Invalid signature")

             # Validate the timestamp
             current_time = int(time.time() * 1000)  # Convert current time to milliseconds
             if current_time - timestamp > 300000:  # 5 minutes in milliseconds
                 raise ValueError("Request is older than 5 minutes")

             return True  # The request is valid

         except Exception as e:
             print(f"Error verifying signature: {str(e)}")
             return False

     if __name__ == '__main__':
         app.run(port=5000)

     ```
   </CodeBlocks>

---

# Working with Assets

> How use the Webflow Data API to work with Assets

{/* Overview Section */}

Webflow's asset APIs enable apps to upload and manage a site's assets. Learn more about assets in Webflow in the [support documentation.](https://help.webflow.com/hc/en-us/articles/33961269934227-Assets-panel#supported-file-types)

{/* Why is this specifically helpful for developers/programmatically */}

These APIs enable developers to create integrations that sync with external file management systems like [Digital Asset Managers (DAMs)](https://www.bynder.com/en/what-is-digital-asset-management/). Keeping these systems in sync ensures that site designers and content managers have the assets they need when working in Webflow.

<Note title="Important">
  Files you upload to the assets panel aren't restricted — that is, they're
  publicly available and discoverable, but won’t necessarily be discovered or
  indexed by search engines if the file isn’t on a publicly viewable webpage
  or linked elsewhere. [Learn more about asset privacy in Webflow.](https://help.webflow.com/hc/en-us/articles/33961281837843)
</Note>

## FAQs

<Accordion title="Which file types are supported?">
  {/* <!-- vale off --> */}

  <Tabs>
    <Tab title="Images">
      * PNG
      * JPEG and JPG
      * GIF
      * SVG
      * WebP
      * AVIF
    </Tab>

    <Tab title="Documents">
      * PDF
      * DOC and DOCX
      * XLS and XLSX
      * PPT and PPTX
      * TXT
      * CSV
      * ODT
      * ODS
      * ODP
    </Tab>

    <Tab title="Lottie">
      * JSON (only Lottie type)
      * dotLottie
    </Tab>
  </Tabs>

  {/* <!-- vale on --> */}
</Accordion>

<Accordion title="Are there size limits for assets?">
  Yes, uploaded assets must adhere to specific size limitations:

  * Images must not exceed 4MB
  * Documents are capped at 10MB
</Accordion>

<Accordion title="Why do I need to include a file hash for asset uploads?">
  When uploading a file, Webflow requires an [MD5 hash](https://en.wikipedia.org/wiki/MD5) generated from the contents of the file to ensure data integrity and manage duplicate assets.

  {/* <!-- vale off --> */}

  ### What is a cryptographic hash?

  > A cryptographic hash, also often referred to as a “digest”, “fingerprint” or “signature”, is an almost perfectly unique string of characters that is generated from a separate piece of input text. --[boot.dev](https://blog.boot.dev/cryptography/how-sha-2-works-step-by-step-sha-256/)

  A cryptographic hash is the result of a hashing algorithm, which deterministically converts input data into an output of fixed length, regardless of input size.

  {/* <!-- vale on --> */}

  ### What are cryptographic hashes used for?

  Hashes serve a range of purposes, from verifying data integrity and enabling fast lookups in databases, to efficiently identifying duplicates.
  Let's break down what that looks like when uploading a file to Webflow and including an [MD5 hash](https://www.okta.com/identity-101/md5/):

  <Steps>
    ### Generate the file hash

    Before uploading, use the MD5 hashing algorithm to convert the binary contents of your file into a 128-bit hash. This hash will serve as the `fileHash` value.

    ### Provide the hash on upload

    When creating a new asset in Webflow, include this generated `fileHash` with a request to the [Create Asset Metadata](https://developers.webflow.com/data/reference/assets/assets/create) endpoint.

    ### Webflow uses the hash for de-duplication

    Webflow uses the `fileHash` as a unique identifier to prevent duplicate uploads. If a hash matches an existing file’s hash, Webflow avoids redundant storage, optimizing resources.

    ### Lookup and verification

    Webflow may use the `fileHash` as a lookup key to retrieve or verify file data, ensuring consistency across operations.
  </Steps>
</Accordion>

## What you'll build

In this tutorial, you'll build an example script that:

* Creates asset folders on a site
* Uploads a new image to an Webflow with a [MD5 hash](#cryptographic-hashing)
* Organizes the image within a site's asset folders

## Prerequisites

* A Webflow site in your development Workspace
* A Webflow App or site token with the following scopes: `assets:read`, `assets:write`
* Some knowledge of Node.js or Python

<br />

<iframe src="https://assets-data-api-guide.netlify.app/" width="100%" allow="clipboard-write; clipboard-read" />

## Conclusion

{/* Review what was accomplished, direct users to next steps that can be helpful - or examples */}

Congratulations! You've just programmatically created asset folders and uploaded assets to a Webflow site. These assets can now be organized and used across the site by designers and editors of Webflow projects.

Looking for more things to try with the API? Check out:

* [Working with Custom Code](/data/docs/custom-code)
* [Working with the CMS](/data/docs/working-with-the-cms)
* [Working with Webhooks](/data/docs/working-with-webhooks)

---

# Developer workspace plan

> Discover the features of Webflow's Developer Workspace plan, designed to let developers explore premium features used by large teams and enterprises

<Warning>
  This plan does not allow for publishing sites to production or exporting code. If you are looking to host sites in production or need official support for any of the capabilities in this plan, see official Webflow plan offerings at
  <a href="https://webflow.com/pricing">[https://webflow.com/pricing](https://webflow.com/pricing)</a>.
</Warning>

The **Developer workspace plan** gives App developers access to advanced Webflow features often used by larger teams and enterprises for the purposes of testing during Webflow App development.

This plan allows you to explore premium capabilities and see how they can elevate your Apps, offering a dedicated environment for building, testing, and integrating with Webflow’s powerful premium features.

## What's included

As Webflow continues to expand its offerings, you may see additional premium capabilities added to the App Developer Workspace Plan.

| Feature                                                                                         | Details                                     |
| ----------------------------------------------------------------------------------------------- | ------------------------------------------- |
| **Workspace Users**                                                                             | Up to 3 users for collaboration and testing |
| **API Rate Limit**                                                                              | 120 requests per minute (RPM)               |
| **Unhosted Sites**                                                                              | Unlimited                                   |
| [**Custom Code**](https://developers.webflow.com/data/docs/custom-code)                         | Enabled                                     |
| **Site Activity Log**                                                                           | Enabled                                     |
| [**Page Branching**](https://university.webflow.com/lesson/page-branching?topics=collaboration) | Enabled                                     |

## Limitations

This workspace allows App Developers an environment to test and build their Apps, but has some key restrictions in place.

| Feature                      | Details                       |
| ---------------------------- | ----------------------------- |
| **Publishing to Production** | Disabled                      |
| **Exporting Code**           | Disabled                      |
| **Site Transfer**            | Disabled                      |
| **Monthly Site Visitors**    | 1,000 site visitors per month |

## Accessing the developer workspace plan

To get started with the App Developer Workspace Plan, [fill out the application form.](https://forms.gle/KTMVa9HLBmxC7iHLA) Our Developer Relations team will review your request and reach out shortly with next steps.

<a href="https://forms.gle/KTMVa9HLBmxC7iHLA">
  <button class="cc-primary">
    Apply for App Developer Workspace Plan
  </button>
</a>

<br />

<br />

<Note>
  If you have questions about the application process, you can reach out to us at
  <a href="mailto:developers@webflow.com">[developers@webflow.com](mailto:developers@webflow.com)</a>.
</Note>

## Managing your developer workspace plan

<Accordion title="Is There a Cost for This Plan?">
  <p>
    The App Developer Workspace Plan is free of charge. However, any site plans purchased within this workspace will be billed at standard rates without discounts.
  </p>
</Accordion>

<Accordion title="Switching Plans">
  <p>
    If you choose to move to a different Workspace plan, you will lose access to features unique to the App Developer Workspace Plan, such as the Site Activity Log and Page Branching. Contact us if you need assistance with transitioning to another plan.
  </p>
</Accordion>

## Questions?

For further questions about the App Developer Workspace Plan, feel free to reach out to our Developer Relations team at [developers@webflow.com](mailto:developers@webflow.com) for guidance and support.

---

# MCP server and AI tools

> Webflow's MCP server and AI tools for building with Webflow APIs

<Frame>
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/307e7d3ea1afcd433f7d946be876f1e4f1bd55a6ad1b8d320b66d69b2bd611ab/products/data/pages/Resources/assets/mcp_hero.png" alt="MCP Hero Image" />
</Frame>

The Model Context Protocol (MCP) server connects your AI tools directly to your Webflow projects. Prompt an AI agent to update designs, manage site data, and work with the CMS from your preferred AI environment.

For developers using AI-powered tools like [Cursor](https://www.cursor.com/) or [Claude Desktop](https://claude.ai/download), the MCP server enhances an agent’s understanding of your Webflow projects. It's built on Webflow’s APIs, exposing them as tools your AI agent can use to create elements, styles, and variables on the canvas, as well as manage collections, custom code, assets, and other site data.

See the full list of available tools in the [MCP server documentation](https://www.npmjs.com/package/webflow-mcp-server).

## Installation

Get started by installing Webflow's remote MCP server, which uses OAuth to authenticate with your Webflow sites, and a companion app that syncs your live canvas with your AI agent.

<Note title="Companion app">
  The MCP server companion app can only be installed when you authorize the MCP server to your sites/workspace. It is not a public app on the Webflow app marketplace.
</Note>

For local installation, please refer to the instruction in the [NPM package documentation](https://www.npmjs.com/package/webflow-mcp-server).

### Requirements

Node.js version **22.3.0** or higher.

<Warning title="Node.js Version Management">
  Currently, the MCP server only supports Node.js version **22.3.0** or higher. See the [Node.js compatibility](#nodejs-compatibility) section for more information on troubleshooting Node.js issues.
</Warning>

<br />

<Tabs>
  <Tab title="Claude Desktop">
    <Steps>
      <Step title="Enable developer mode">
        In the menu bar, click `Help` -> `Troubleshooting` -> `Enable Developer Mode`
      </Step>

      <Step title="Open the developer tools">
        In the menu bar, click `File` -> `Settings`. Then in the Claude Desktop window, select `Developer`

        From here click `Get Started` or `Edit Config` to open the configuration file in your code editor.

        <Frame>
          <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/6465927461dd16e59c52632eb2c92b38ad1c961498351a9d80f2268217e64efb/assets/images/claude-developer.png" alt="Claude Desktop MCP" />
        </Frame>
      </Step>

      <Step title="Add the MCP server to the configuration">
        Open the `claude_desktop_config.json` file in a code editor and paste the following configuration (or add the `webflow` part to your existing configuration):

        <CodeBlock title="claude_desktop_config.json">
          ```json
          {
            "mcpServers": {
              "webflow": {
                "command": "npx",
                "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
              }
            }
          }
          ```
        </CodeBlock>
      </Step>

      <Step title="Save and restart Claude Desktop">
        Save the file and restart Claude Desktop `(command/ctrl + R)`.
      </Step>

      <Step title="Authorize the MCP server and app">
        When Claude restarts, it will automatically open a new browser window showing an OAuth login page where you can authorize the Webflow sites you want the MCP server to access and install the [companion app](#designer-companion-app).

        <Tip title="Limit authorized sites">
          Limit the number of sites for security and performance. To refresh your OAuth token, run:

          ```bash
          rm -rf ~/.mcp-auth
          ```
        </Tip>
      </Step>

      <Step title="Open the Webflow Designer">
        Open your site in the Webflow Designer.

        Or, type this prompt in your AI chat window:

        ```
        Give me a link to open <MY_SITE_NAME> in the Webflow Designer
        ```
      </Step>

      <Step title="Open the MCP Webflow App">
        1. In the designer, open the Apps panel by pressing the `E` key.
        2. Launch the "Webflow MCP Bridge App". This app was automatically installed during the OAuth authorization process.
        3. Wait for the companion app to connect to the MCP Server
      </Step>

      <Step title="Write your first prompt">
        Start interacting with the MCP server in your AI agent's chat window. Try prompts like:

        ```
        Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords
        ```

        ```
        Find older blog posts that mention similar topics and add internal links to my latest post
        ```

        ```
        Create a hero section card on my home page with a CTA button and responsive design
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Cursor">
    Click the button to install, or follow the instructions below:

    <div>
      <span>
        [![Install MCP Server](https://cursor.com/deeplink/mcp-install-light.svg)](https://cursor.com/en-US/install-mcp?name=webflow\&config=eyJ1cmwiOiJodHRwczovL21jcC53ZWJmbG93LmNvbS9zc2UifQ%3D%3D)
      </span>

      <span>
        [![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en-US/install-mcp?name=webflow\&config=eyJ1cmwiOiJodHRwczovL21jcC53ZWJmbG93LmNvbS9zc2UifQ%3D%3D)
      </span>
    </div>

    <Steps>
      <Step title="Install the MCP server on Cursor">
        1. Go to `Settings → Cursor Settings → MCP & Integrations`
        2. Under MCP Tools, click `+ New MCP Server`/`Add Custom MCP`
        3. Paste the following configuration into `.cursor/mcp.json` (or add the `webflow` part to your existing configuration):

           <CodeBlock title=".cursor/mcp.json">
             ```json
             {
               "mcpServers": {
                 "webflow": {
                   "url": "https://mcp.webflow.com/sse"
                 }
               }
             }
             ```
           </CodeBlock>

           <Tip title="Use project-specific MCP configuration to avoid repeated auth prompts">
             Configure `mcp.json` [per project](https://docs.cursor.com/en/context/mcp#configuration-locations) instead of using Cursor's global settings. This prevents repeated authentication prompts when opening multiple Cursor windows without being authenticated.
           </Tip>
        4. Save and close the file
      </Step>

      <Step title="Authorize the MCP server and app">
        1. Go to `Settings → Cursor Settings → MCP & Integrations`
        2. Authorize Webflow MCP by clicking the Connect button
        3. Cursor automatically opens an OAuth login page where you authorize the Webflow sites you want to access and install the [companion app](#designer-companion-app).
        4. Once authorization is complete, the Webflow MCP indicator should turn green.

        <Tip title="Limit authorized sites">
          Limit the number of sites for security and performance. To reauthorize, simply click **Logout** by expanding Webflow MCP.
        </Tip>
      </Step>

      <Step title="Open the Webflow Designer">
        Open your site in the Webflow Designer.

        Or, type this prompt in your AI chat window:

        ```
        Give me a link to open <MY_SITE_NAME> in the Webflow Designer
        ```
      </Step>

      <Step title="Open the MCP Webflow App">
        1. In the designer, open the Apps panel by pressing the `E` key.
        2. Launch the "Webflow MCP Bridge App". This app was automatically installed during the OAuth authorization process.
        3. Wait for the companion app to connect to the MCP Server
      </Step>

      <Step title="Write your first prompt">
        Start interacting with the MCP server in your AI agent's chat window. Try prompts like:

        ```
        Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords
        ```

        ```
        Find older blog posts that mention similar topics and add internal links to my latest post
        ```

        ```
        Create a hero section card on my home page with a CTA button and responsive design
        ```
      </Step>
    </Steps>

    <Tip title="Start with a fresh project for better MCP performance">
      MCP servers perform more efficiently with smaller codebases. In Cursor, create a new project when using the MCP server to reduce tool call overhead and improve response times.
    </Tip>
  </Tab>

  <Tab title="Windsurf">
    <Steps>
      <Step title="Add the MCP server to the configuration">
        1. Navigate to `Windsurf → Settings → Windsurf Settings`
        2. Scroll down to the `Cascade` section → `MCP Servers` → `Manage MCPs`
        3. Click the "View raw config" button
        4. Paste the following configuration (or add the `webflow` part to your existing configuration):

           ```json mcp_config.json
           {
             "mcpServers": {
               "webflow": {
                 "serverUrl": "https://mcp.webflow.com/sse"
               }
             }
           }
           ```

           ```
           ```
        5. Save and close the file
      </Step>

      <Step title="Authorize the MCP server">
        1. Click the "Refresh" button in the settings page
        2. Windsurf will automatically open a new browser window showing an OAuth login page.
        3. Authorize the Webflow sites you want the MCP server to access. This will also automatically install the [companion app](#designer-companion-app) to any sites you authorize.

        <Tip title="Limit authorized sites">
          Limit the number of sites for security and performance.
        </Tip>
      </Step>

      <Step title="Open the Webflow Designer">
        Open your site in the Webflow Designer.

        Or, type this prompt in your AI chat window:

        ```
        Give me a link to open <MY_SITE_NAME> in the Webflow Designer
        ```
      </Step>

      <Step title="Open the MCP Webflow App">
        1. In the designer, open the Apps panel by pressing the `E` key.
        2. Launch the "Webflow MCP Bridge App". This app was automatically installed during the OAuth authorization process.
        3. Wait for the companion app to connect to the MCP Server
      </Step>

      <Step title="Write your first prompt">
        Start interacting with the MCP server in your AI agent's chat window. Try prompts like:

        ```
        Analyze my last 5 blog posts and suggest 3 new topic ideas with SEO keywords
        ```

        ```
        Find older blog posts that mention similar topics and add internal links to my latest post
        ```

        ```
        Create a hero section card on my home page with a CTA button and responsive design
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

**Resetting your OAuth token**

If you need to reset your authorization, you can run the following command before restarting your MCP client.

<Tabs>
  <Tab title="Claude Desktop">
    Please run following command and then restart your Claude Desktop.

    ```bash
    rm -rf ~/.mcp-auth
    ```
  </Tab>

  <Tab title="Cursor">
    Go to the MCP Settings panel and click the "Logout" button.
  </Tab>

  <Tab title="Windsurf">
    Go to the MCP Configuration page and click the "Refresh" button.
  </Tab>
</Tabs>

### Node.js compatibility

Currently, the MCP server only supports Node.js version **22.3.0** or higher. If you encounter issues with Node.js you can try the below approaches to troubleshoot:

<Accordion title="Use version **22.3.0** as your default Node.js version">
  To use version **22.3.0** as your default Node.js version, follow these steps:

  <Steps>
    <Step title="Install NVM">
      If you don't have `nvm` installed, you can install it with the following command (or download from [`nvm` releases](https://github.com/nvm-sh/nvm/releases)).

      ```bash
      curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
      ```
    </Step>

    <Step title="Restart your terminal">
      Restart your terminal or run:

      ```bash
      source ~/.bashrc
      ```
    </Step>

    <Step title="Install Node.js 22.3.0">
      Run the following command to install Node.js 22.3.0:

      ```bash
      nvm install 22.3.0
      ```
    </Step>

    <Step title="Set **22.3.0** as the default Node.js version">
      Run the following command in your terminal to set **22.3.0** as the default Node.js version:

      ```bash
      nvm use 22.3.0
      nvm alias default 22.3.0
      ```
    </Step>

    <Step title="Clear your `npx` cache">
      Run the following command to clear your `npx` cache:

      ```bash
      rm -rf ~/.npm/_npx
      ```
    </Step>

    <Step title="Verify installation">
      Run the following command to verify your Node.js installation:

      ```bash
       node --version
       npm --version
      ```
    </Step>

    <Step title="Restart your AI Client">
      Restart your AI client and verify the MCP server is working.
    </Step>
  </Steps>
</Accordion>

<Accordion title="Use Node Version Switcher">
  To use [Node Version Switcher](https://github.com/jasongin/nvs) (`nvs`) with the MCP server, follow these steps:

  <Steps>
    <Step title="Install `nvs`">
      Install Node Version Switcher using one of these methods:

      <Tabs>
        <Tab title="macOS/Linux">
          ```bash
          git clone https://github.com/jasongin/nvs ~/.nvs && ~/.nvs/nvs.sh install
          ```
        </Tab>

        <Tab title="Windows">
          ```bash
          choco install nvs
          ```
        </Tab>
      </Tabs>
    </Step>

    <Step title="Install Node.js 22.3.0">
      Install the required Node.js version with `nvs` by running the following command in your terminal:

      ```bash
      nvs add 22.3.0
      ```
    </Step>

    <Step title="Use version **22.3.0** ">
      Use the version **22.3.0** with `nvs` by running the following command in your terminal:

      ```bash
      nvs use 22.3.0
      ```
    </Step>

    <Step title="Install mcp-remote">
      Install the MCP remote package using `nvm` with Node.js 22.3.0:

      ```bash
      nvm use 22.3.0
      npm install -g mcp-remote
      ```
    </Step>

    <Step title="Get required paths">
      Get the paths needed for your MCP configuration:

      **Node.js path:**

      ```bash
      nvs which 22.3.0
      ```

      **mcp-remote path:**

      ```bash
      which mcp-remote
      ```
    </Step>

    <Step title="Configure MCP server">
      Add this configuration to your AI client's MCP settings, replacing the paths with your actual paths:

      ```json
      {
        "mcpServers": {
          "webflow": {
            "command": "/path/to/your/nvs/node/22.3.0/bin/node",
            "args": [
              "/path/to/your/mcp-remote",
              "https://mcp.webflow-sai.com/sse"
            ]
          }
        }
      }
      ```
    </Step>

    <Step title="Verify installation">
      Restart your AI client and verify the MCP server is working.
    </Step>
  </Steps>

  <Note>
    Many thanks to [@jessehouwing](https://jessehouwing.net/vscode-running-mcp-using-node-version/) for the inspiration and guidance on using `nvs` with the MCP server.
  </Note>
</Accordion>

***

## How the MCP server works

The Webflow MCP server implements [Anthropic's Model Context Protocol specification](https://docs.anthropic.com/en/docs/model-context-protocol-mcp) to standardize communication between AI agents and Webflow's APIs.

### Architecture

The server acts as a translation layer that exposes Webflow's APIs as MCP tools. Built as an [open-source package](https://github.com/webflow/mcp-server), it wraps Webflow's REST and Designer APIs into a format that any MCP-compatible AI agent can understand and execute.

### Remote deployment

The server runs remotely to enable OAuth authentication, allowing you to:

* Authorize multiple Webflow sites without storing API keys locally
* Maintain secure, token-based access to your projects

This architecture eliminates the need to manage API credentials in your local environment while providing secure access to your Webflow projects.

<Warning title="Remote authorization is currently experimental">
  Remote authorization relies on the [`mcp-remote` npm package](https://www.npmjs.com/package/mcp-remote), which is currently considered experimental.
</Warning>

### Available tools

The MCP server exposes Data and Designer APIs as MCP tools. See the complete list of available tools and their parameters in the [MCP server repository](https://github.com/webflow/mcp-server/tree/main/src/tools).

<Tabs>
  <Tab title="Designer API tools">
    [**Designer API**](/designer/reference/introduction) tools enable real-time canvas manipulation:

    * **Visual design**: Create and modify elements, styles, and components
    * **Layout control**: Manage responsive breakpoints and positioning
    * **Design system**: Work with variables, classes, and component instances
    * **Live preview**: See changes instantly in the Designer interface

    #### Designer companion app

    Designer API calls are executed through a companion app that automatically installs to your authorized sites after OAuth authorization. **The companion app must remain open in the Webflow Designer** for Designer API tools to function. However, you can minimize it once connected.

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/02ae17428a9bc1c3d5ed26bc14b44a66d935ef85970e30b85f6c2b0d64c15ddb/products/data/pages/Resources/assets/bridge-app.png" alt="MCP Bridge App" />
      </Frame>
    </div>
  </Tab>

  <Tab title="Data API tools">
    [**Data API**](/data/reference/rest-introduction) tools access your site's content and structure for bulk operations and content synchronization:

    * **CMS operations**: Create, read, update, and delete collection items
    * **Asset management**: Upload, organize, and manage media files
    * **Site metadata**: Access site settings, domains, and configuration
  </Tab>
</Tabs>

## LLMS.txt documentation

With Webflow's LLMS.txt file, you can access Webflow's documentation in your AI client without needing to load the webpage in your browser. This optimized structure helps LLMs respond with accurate code snippets and multi-step sequences.

* **LLMS.txt** <br />
  Use [`https://developers.webflow.com/llms.txt`](https://developers.webflow.com/llms.txt) to access the LLM-readable documentation.
* **Markdown docs**<br />
  Additionally, you can access markdown versions of any page on the docs site to provide a more structured and context-rich experience for LLMs. To access the markdown version of a page, add `.md` to the end of the URL. For example, this current doc is available as a markdown file at [`https://developers.webflow.com/data/docs/ai-tools.md`](https://developers.webflow.com/data/docs/ai-tools.md).

**Using LLMS.txt docs with Cursor**

<Steps>
  <Step>
    In the chat, click the 

    `@`

     button
  </Step>

  <Step>
    Find the "Docs" option
  </Step>

  <Step>
    Click "Add new doc"
  </Step>

  <Step>
    Paste in the following link: 

    <code>[https://developers.webflow.com/llms.txt](https://developers.webflow.com/llms.txt)</code>
  </Step>
</Steps>

Once configured, reference Webflow's documentation by typing `@Docs` in your chat window and selecting "Webflow" from the list.

***

## FAQs and troubleshooting

### Installation and authentication

<Accordion title="Why is my MCP server not appearing in my AI client?">
  After installing the MCP server, you may need to restart your AI client to see the new server. Additionally, check to see that your client (for example, Cursor, Claude Desktop) is updated to the latest version.
</Accordion>

<Accordion title="How can I authenticate a different Webflow site?">
  To authenticate a different Webflow site, you'll need to remove the existing authentication token by running the following command in your terminal:

  ```bash
  rm -rf ~/.mcp-auth
  ```

  After executing the command, a new authentication screen should appear, allowing you to select the site you want to authenticate with.
</Accordion>

<Accordion title="I'm getting an error when loading the remote MCP server">
  You may receive an `500` error when loading the remote MCP server.

  1. Try refreshing your OAuth token with the following command and then restart your AI client:
     ```bash
     rm -rf ~/.mcp-auth
     ```

  2. Check your current Node.js version to ensure you're using version **22.3.0** or higher:

     ```bash
     node --version
     ```

     If you can't use **versions 22.3.0** or higher as your default Node.js version, follow the [Node.js compatibility](#nodejs-compatibility) section to troubleshoot compatibility issues.
</Accordion>

<Accordion title="Troubleshooting Node.js and NPM issues">
  **Ensure Node.js and NPM are properly installed**

  1. Verify Node.js and NPM installation by running:
     ```bash
     node -v
     npm -v
     ```
  2. If you encounter issues with `npx`, try clearing your NPM cache:
     ```bash
     npm cache clean --force
     ```
  3. If `npm -v` only works with `sudo`, you may need to fix NPM global package permissions. See the [official NPM docs](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) for more information.

  If the issue persists, see the [Node.js compatibility](#nodejs-compatibility) section above for version requirements.

  <Note>
    If you make changes to your shell configuration, you may need to restart your shell for changes to take effect.
  </Note>
</Accordion>

<Accordion title="The sites I want to authorized are greyed out on the authorization page">
  Currently, only site owners and admins can authorize the MCP server and app. If you aren't a site owner or admin, you can't authorize the MCP server and app.
</Accordion>

### Tools and prompts

<Accordion title="The MCP Server can't connect to the Webflow Designer">
  To use the MCP server with the Webflow Designer, open the "MCP Bridge App" from the Apps panel. Once open, the app will automatically connect to the MCP server.

  **You must keep the companion app open in the Webflow Designer for the MCP server to connect.**
</Accordion>

<Accordion title="What tools are available?">
  The open-source MCP server package includes tools for AI agents. View the complete list in the [GitHub repository](https://github.com/webflow/mcp-server/tree/main/src/tools).

  Some of these tools and capabilities include but are not limited to:

  * **Designer tools**:
    * Create and manage Webflow elements, sections, and whole pages on the canvas
    * Create and manage styles, variables, and breakpoints
    * Create and manage Webflow component structure and instancing on pages
    * Manage Webflow assets, metadata (including alt text), and folders
    * Build visually using your own design system in place
  * **Data tools**:
    * CMS
      * Create and read collection data
      * Create and update collection fields
      * Create, update, and delete collection items (including locale-specific content)
        * Note: You can create and delete items directly in the live site, or you can create queued/drafted items to publish later
    * Localization
      * Read and update static page/component content in secondary locales
      * Read and update default component properties in secondary locales
      * Read and update CMS item content in secondary locales
    * Custom Code
      * List registered scripts for a site and which of those scritps are applied to the site
      * Register and apply custom code inline for a site
      * Delete all scripts from a site
    * Pages
      * Retrieve a list of pages on the site
      * Read and update page metadata (including SEO and Open Graph settings)
  * **Developer docs tools**:
    * Ask any question about Webflow's developer documentation
</Accordion>

<Accordion title="Can I use all available API endpoints and Methods with the MCP server?">
  Currently, the MCP server supports a limited set of tools for the Data and Designer APIs.

  If you have specific endpoints and methods you would like to see supported, please [open an issue](https://github.com/webflow/mcp-server/issues) or contact the Developer Relations team at [developers@webflow.com](mailto:developers@webflow.com).
</Accordion>

<Accordion title="Does Webflow need to be open to use the MCP server?">
  If you're only using the Data API tools, you can use the MCP server to update content even if Webflow isn't open in the browser.

  If you're using the Designer API tools, you need to keep the [companion app](#designer-companion-app) open in the Webflow Designer for the MCP server to work.
</Accordion>

<Accordion title="Can I localize content with the MCP server?">
  Currently, the MCP server supports localizing static content, and updating existing localized CMS items. **However, the MCP server doesn't support creating new localized CMS items.**

  If you have specific endpoints and methods you would like to see supported, please [open an issue](https://github.com/webflow/mcp-server/issues) or contact the Developer Relations team at [developers@webflow.com](mailto:developers@webflow.com).
</Accordion>

---

# Developer Terms of Service

{/* <!-- vale off --> */}

**WEBFLOW DEVELOPER AGREEMENT**

**Version Date: October 21, 2025**

By clicking on “I agree” (or a similar box or button to evidence your agreement), you accept and agree to be bound by the terms and conditions of this Webflow Developer Agreement and any associated addenda referenced herein (collectively, the “Agreement”). This Agreement is between ( 1 ) Webflow, Inc. (inclusive of its Affiliates, “Webflow,” “we” or “us”) and ( 2 ) either the entity you accept this Agreement on behalf of, or you in your individual capacity, as applicable (in either case, “Developer,” “you” or “your”). Please read these terms carefully as they govern your rights and obligations under this Agreement.

For the avoidance of doubt, if you are accepting this Agreement on behalf of your employer or another entity, you represent and warrant that you have the full legal authority to bind your employer or such entity to this Agreement, and in such cases, the word “you,” “your” or “Developer” in this Agreement will refer to your employer or such entity for the purposes of interpreting this Agreement.

You can view the current version of this Agreement at any time at [https://webflow.com/legal/developer-terms-of-service](https://webflow.com/legal/developer-terms-of-service). We reserve the right to modify, update, or change this Agreement from time to time by posting updates and changes at [https://webflow.com/legal/developer-terms-of-service](https://webflow.com/legal/developer-terms-of-service). When we make any material changes to this Agreement, we will use reasonable efforts to provide notice to you by ( 1 ) updating the Version Date at the top of this page; and/or ( 2 ) emailing you. Notwithstanding the foregoing, you acknowledge and agree that your continued participation in the Webflow Marketplace, including but not limited to access and use of the Webflow API, after any such updates constitutes your agreement to the Agreement as updated. However, changes will become effective immediately if such changes are necessary to comply with Applicable Laws (as defined herein) or are a result of changes to Webflow’s product offerings.

For the avoidance of doubt, ( 1 ) any reference to this “Agreement” includes all the documents, links, and addenda referenced herein (including by way of example only, Marketplace Agreement, your Webflow Subscription Agreement, Webflow’s Global Privacy Policy, and Acceptable Use Policy, as all are defined herein); and ( 2 ) such documents, links, and addenda are all incorporated by reference into this Agreement.

## 1.  **DEFINITIONS**

1. **“Acceptable Use Policy**” means the Acceptable Use Policy applicable to using the Platform, available at [https://webflow.com/legal/aup](https://webflow.com/legal/aup);
2. “**Affiliate**” means with respect to a party, an entity that directly or indirectly controls (e.g., subsidiary), is controlled by (e.g., parent), or is under common control with (e.g., sibling) such party; and the term “control” (including the terms “controlled by” and “under common control with”) means either: (a) ownership or control of more than 50% of the voting interests of the subject entity; or (b) the power to direct or cause the direction of the management and policies of an entity, whether through ownership, by contract, or otherwise;
3. “**Applicable Law(s)”** means any and all laws, regulations, conventions, decrees, decisions, orders, judgments, codes and requirements of any government authority (federal, state, local or international) having jurisdiction, that are applicable to a party’s performance of obligations and/or exercise of rights under this Agreement;
4. “**Application**” means the software or web application you develop, submit, integrate, or otherwise make available for use on the Platform;
5. “**Content**“ means any content a Customer submits, posts, displays, or otherwise makes available on or via the Service, including all intellectual property therein, including, but not limited to, Customer webpages, backend databases, End User  Personal Data, and any other data or information made available through the Webflow API or by any other means authorized by Webflow, and any copies and derivative works thereof;
6. “**Customer**” or “**Webflow Customer**” means an individual or entity that has subscribed to use the Webflow Platform; “”.
7. “**De-Identified Data**” means data and other information gleaned from Developer’s participation in the Marketplace and/or or its use of the Platform that has been aggregated and/or anonymized such that it cannot identify or be used to reasonably identify any individual person, household, or Developer;
8. “**Developer Marks**” means Developer’s Trademarks;
9. “**Developer Resources**” means the Webflow Application Programming Interface (“**Webflow API**”) that we make available to you for the purposes of interfacing with the Content as set forth in the Webflow developer documentation, and any Software Development Kit (“SDK”) and/or the related documentation, data, code, and other materials provided by Webflow, as updated from time to time;
10. “**End Users**” means any natural persons that uses, installs downloads, or otherwise accesses your Application;
11. “**Feedback**” means any non-confidential comments, ideas, or feedback about the Marketplace, Webflow services, and/or the Platform submitted by Developer to Webflow, including without limitation any suggestions related to improving the Marketplace, Webflow services, and/or the Platform;
12. “**Global Privacy Policy**” means the policy available at [https://webflow.com/legal/privacy](https://webflow.com/legal/privacy);
13. “**Intellectual Property**” means all worldwide rights in and to intellectual property, including, without limitation rights to inventions, trade secrets, know-how, technology, research tools, data, software, improvements and rights of authorship and attribution, whether or not protected by patents or copyrights, and including, without limitation, patent applications, patents, trade secret rights, copyrights, trademarks, and other exclusive or non-exclusive rights pertaining to intellectual property owned or controlled by a party;
14. “**Marketplace**” means the web page on Webflow’s domain where your Application may be featured;
15. “**Marketplace Agreement**” means the agreement available at [https://webflow.com/legal/creator-agreement](https://webflow.com/legal/creator-agreement);
16. “**Marketplace Guidelines**” means the applicable guidelines located at: [https://developers.webflow.com/data/docs/marketplace-guidelines](https://developers.webflow.com/data/docs/marketplace-guidelines);
17. “**Personal Data**” means any information that identifies or could be used to identify a natural person contemplated under applicable data protection laws;
18. “**Platform**” means Webflow’s software-as-a-service website design and development platform and its related products or services;
19. “**Subscription Agreement**” means the subscription contract between Webflow and the applicable Webflow Customer (which may include Developer and/or End Users) governing its use of the Platform;
20. **“Trademarks**” means the trademarks, service marks, trade names, copyrights, logos, slogans, content, media, materials, identifying symbols and indicia of the applicable party; and
21. “**Webflow Marks**” means Webflow’s Trademarks.

## 2.  **ACCESS TO THE PLATFORM; USE OF THE DEVELOPER RESOURCES AND MARKETPLACE; APPLICATION REVIEW AND APPROVAL**

1. **Access to the Platform**. Developer may access and use the Platform in connection with exercising its rights and activities in submitting and maintaining its Application on the Marketplace and subject to the terms and conditions of the Developer’s Subscription Agreement. Except as expressly provided herein, Webflow does not grant any license, express, or implied, to the Intellectual Property of Webflow or its licensors, including but not limited to the Platform, the Marketplace, Developer Resources, and Webflow Marks. Webflow retains all right, title and interest in its Intellectual Property, including, but not limited to, the Platform, the Marketplace, and Developer Resources.

2. **Subscription Agreement**. For clarity, this Agreement exclusively governs Developer’s participation in the Marketplace. Any end use of the Platform by Customers, Developer or its End Users, and/or any of their authorized users is governed separately under the applicable Subscription Agreement.

3. **Developer Resources**. Subject to your compliance with the terms and conditions in this Agreement, you may use the Developer Resources to develop your Application, but only as permitted by the Marketplace Guidelines. All of your use rights in this Agreement (including your rights to use Webflow Marks) are limited, non-exclusive, non-sublicensable, non-transferable, royalty-free, and revocable.

4. **Marketplace**. Webflow maintains sole discretion to determine all features and operations of the Marketplace. You acknowledge that Webflow has no obligation to promote, distribute, list, or offer any Application on the Marketplace. Webflow may determine in its sole discretion to make available or list any Application on the Marketplace, or to remove any Application from the Marketplace. Webflow may stop any transaction, or take other actions as needed to restrict access to or availability of any Application that does not comply with this Agreement or that otherwise might adversely affect End Users.

5. **Review of Application**. To submit your Application to the Marketplace, you must complete an application, provide any additional information requested by Webflow and/or follow the instructions in the Marketplace Guidelines. At Webflow’s request, you will comply with its review process and provide Webflow with reasonably requested information, which Webflow will only use for purposes of such review. You represent and warrant that all information you provide to Webflow will be accurate and complete and that your Application will comply with the Marketplace Guidelines. If any Application information is inaccurate or needs to be updated or modified, you will promptly provide Webflow with corrections, updates, or modifications. Webflow may decide in its sole discretion whether to approve an Application in accordance with the Marketplace Guidelines. Developer remains solely responsible for its Application(s) and their quality, sufficiency, security, and support. In no event will you state or imply that Webflow endorses, sponsors, or guarantees your Application(s).

## 3.  **LICENSE TO WEBFLOW**

1. **Application License**. You hereby grant Webflow a worldwide, non-exclusive, royalty-free, non-transferable right and license to: (i) to resell, distribute, or make available, as applicable, the Application through the Marketplace; and (ii) enable access to your Application on and through the Platform; and (iii) at Webflow’s sole discretion, feature your Application in the Marketplace.

2. **Developer Marks**. You hereby grant Webflow a worldwide, non-exclusive, royalty-free, non-transferable (except as permitted in Section 13.5) right and license to use the Developer Marks for the purpose of Webflow marketing and promotional activities and to promote your participation in the Marketplace.

3. **Ownership**. Webflow does not claim ownership of your Application or Intellectual Property, and you retain all rights, title, and interest not expressly granted in this Agreement, including any goodwill associated with the Developer’s Marks.

## 4.  **END USER TERMS AND SUPPORT**

For clarity, only Developer licenses its Applications to End Users, not Webflow. Developer must provide its own end user terms and end user privacy policy with any Application. You agree that Webflow does not and will not have any responsibility or liability related to compliance or non-compliance by you or any End User under the applicable end user terms or end user privacy policy between you and the End User. You are solely responsible for providing all support for your Application(s), including providing any and all information necessary for an End User to use your Application(s).

## 5.  **REPRESENTATIONS AND WARRANTIES; RESTRICTIONS**

1. **Representations and Warranties.** You represent and warrant that you own or have obtained a right or license to any Intellectual Property rights necessary for the development of your Application. You further represent and warrant that the functioning or use of your Application will not violate any Applicable Laws or third party rights (including Intellectual Property rights and rights of privacy).

2. **No Bulk Copy or Scraping.** You agree that you will not bulk copy, scrape, or otherwise bulk export Content for display on or through your Application to non-Webflow locations and services, unless provided for in a separate written agreement between you and Webflow.

3. **Marketplace Fair Use.** Developer is prohibited from engaging in activities that artificially inflate or manipulate engagement metrics (such as likes, ratings, or reviews) including the use of bots, scripts, or automated means to generate false engagement. Each Application submitted must be unique and substantially different; submitting multiple versions of the same Application as distinct applications is prohibited. Duplicate submissions intended to crowd out other developers or manipulate visibility within Webflow’s services are strictly forbidden. Violations of this Section may result in the removal of offending Applications, suspension of Developer’s account(s), or other actions as determined by Webflow.

4. **Non-Competitive Use.** You agree that you will not use the Developer Resources or Platform to compete with Webflow.

5. **Use of the Webflow Marks.** The Webflow Marks may not be included in or as part of your Application, registered corporate name, any of your logos, or any of your service or product names without Webflow’s prior approval. Moreover, you may not create any derivative works of the Webflow Marks or use the Webflow Marks in a manner that creates or implies  Webflow’s endorsement, sponsorship, or association of you or your Application. You will not otherwise use business names and/or logos in a manner that can mislead, confuse, or deceive individuals of your services or offerings. During the term of this Developer Agreement, Webflow may, in its sole discretion, grant you express permission to use the Webflow Marks in accordance with the usage requirements stated in this section in order to promote your Application(s). You must: (i) only use the versions of the Webflow Marks that we make available to you, without altering them in any way; (ii) only use the Webflow Marks in connection with your Application and this Developer Agreement; (iii) immediately comply if we request that you stop using the Webflow Marks; and (iv) only use the Webflow Marks in accordance with our branding guidelines located at [https://brand.webflow.com](https://brand.webflow.com) and [https://developers.webflow.com/apps/docs/marketing-your-app](https://developers.webflow.com/apps/docs/marketing-your-app). You must not: (i) use the Webflow Marks in a misleading or disparaging way; (ii) use the Webflow Marks in a way that implies we endorse, sponsor, or approve of your services or products or your Application(s); or (iii) use the Webflow Marks in violation of applicable law or in connection with an obscene, indecent, or unlawful topic or material. All use of the Webflow Marks and all goodwill arising out of such use, will inure to Webflow’s benefit.

6. **Reverse Engineering and Other Restrictions.** You will not or attempt to (and will not allow others to) a) reverse engineer, decompile, disassemble or translate the Developer Resources, including without limitation the Webflow API, or otherwise attempt to derive source code, trade secrets or know-how in or underlying the Developer Resources or any portion thereof; b) interfere with, modify, disrupt or disable features or functionality of the Webflow API, including without limitation any such mechanism used to restrict or control the functionality, or defeat, avoid, bypass, remove, deactivate or otherwise circumvent any software protection or monitoring mechanisms of the Webflow API; c) sell, rent, lease, sublicense, distribute, redistribute, syndicate, create derivative works of, assign or otherwise transfer or provide access to, in whole or in part, the Developer Resources to any third party except as expressly permitted herein; d) provide use of the Developer Resources on a service bureau, rental or managed services basis or permit other individuals or entities to create links to the Developer Resources or “frame” or “mirror” the Developer Resources on any other server, or wireless or Internet-based device, or otherwise make available to a third party, any token, key, password or other login credentials to the Developer Resources; e) use the Developer Resources for any illegal, unauthorized or other improper purposes, including without limitation to store or transmit infringing, libelous, or otherwise unlawful or tortious material, to store or transmit malicious code, or to store or transmit material in violation of third-party privacy rights;  (f) use the Developer Resources to access or gather private information about individual End Users, Customers, or their end users, including their locations; (g) interfere with or disrupt the integrity or performance of the Platform, the Developer Resources, or the Marketplace, including by disrupting the ability of any other person to use or enjoy the Platform, the Developer Resources, or the Marketplace, or attempt to gain unauthorized access to the Platform, the Developer Resources, or the Marketplace or related systems or networks; or (h) remove or alter any proprietary notices or marks on the Developer Resources.

7. **Webflow API Rate Limits.** You will not attempt to exceed or circumvent limitations on access, calls and use of the Webflow API (“**Rate Limits**”), or otherwise use the Webflow API in a manner that exceeds reasonable request volume, constitutes excessive or abusive usage, or otherwise fails to comply or is inconsistent with any part of this Agreement. If you exceed or Webflow reasonably believes that you have attempted to circumvent Rate Limits, controls to limit use of the Webflow API, or the terms and conditions of this Agreement, then your ability to use the Webflow API or Platform (including the Marketplace) may be temporarily suspended or permanently blocked. Webflow may monitor your use of the Webflow API to improve the Webflow API and to ensure your compliance with this Agreement.

8. **Collection, Protection, and Storage of Personal Data.** If your Application ingests, processes, transmits, and/or collects any Personal Data you will protect all such Personal Data using reasonable and appropriate technical and organizational measures and obtain all required consents or legal basis of processing for such activities as set forth under applicable data protection laws. You must also maintain a privacy policy for your Application and prominently display or provide a link to it wherever users download or access your Application. Your privacy policy must meet applicable legal standards and describe the collection, use, storage, and sharing of Personal Data in clear, understandable and accurate terms. You are required to follow applicable legal requirements if the use of your Application will result in the international transfer of Personal Data. You must promptly notify us in writing via email to [privacy@webflow.com](mailto:privacy@webflow.com) of any breaches of your Application’s privacy policy or usage agreement that impact or may impact End Users, Customers or their end users.

9. **Security.** You will maintain the security of the Webflow API and will not make available to a third party, any token, key, password or other login credentials to the Webflow API. You will use industry standard security measures to prevent unauthorized access or use of any of the features and functionality of the Webflow API, including access by viruses, worms, or any other harmful code or material. Additionally, you will keep the Developer Resources  (including, where applicable, Personal Data) confidential and secure from unauthorized access by using industry-standard organizational and technical safeguards for such data, and with no less care than you use in connection with securing similar data you store. If you know of or suspect any breach of security or potential vulnerability related to the Webflow API, the Developer Resources, the Marketplace, or Personal Data you will: (i) immediately notify Webflow’s security team at [security@webflow.com](mailto:security@webflow.com), Webflow’s developer relations team at [developer@webflow.com](mailto:developer@webflow.com),  and cooperate with investigations; (ii) assist with any required notices; (iii) preserve all evidence related to the known or suspected breach; (iv) provide Webflow reasonable advance notice prior to any public statement regarding the known or suspected breach; (v) provide any information reasonably requested by Webflow; and (vi) promptly remedy such breach or potential vulnerability.

10. **Compliance Audit.** Webflow, or a third-party agent subject to obligations of confidentiality, shall be entitled to inspect and audit any records or activity related to your access to the Webflow API and the Marketplace, and for the purpose of verifying compliance with this Agreement. Webflow may exercise its audit right at any time upon reasonable notice. You will provide your full cooperation and assistance with such an audit and provide access to all records, logs, Content, and any other related information in your possession or control, applicable agreements and records. Without limiting the generality of the foregoing, as part of the audit, Webflow may request, and you agree to provide, a written report, signed by an authorized representative, listing your then-current deployment of your Application and the Webflow API.

## 6.  **CONFIDENTIALITY; PROPRIETARY RIGHTS**

1. **Confidentiality**. Each party (the “**Receiving Party**”) understands that the other party (the “**Disclosing Party**”) has disclosed or may disclose Confidential Information pursuant to this Agreement. For the purposes of this Agreement, (i) Confidential Information of Webflow includes, without limitation, the Developer Resources, and non-public information regarding the features, functionality, and performance of the Marketplace and Platform; and (ii) Confidential Information of Developer includes, without limitation, non-public data provided by Developer to Webflow to enable Developer’s participation in the Marketplace. The Receiving Party agrees (i) to take reasonable precautions to protect such Confidential Information, and (ii) not to use such Confidential Information except in performance of this Agreement or as otherwise permitted herein. The Receiving Party will not disclose the Disclosing Party’s Confidential Information to parties other than the Receiving Party’s employees, contractors, Affiliates, agents, or professional advisors (“**Representatives**”) who have a need-to-know and who have a legal obligation to keep it confidential. The Receiving Party will ensure that its Representatives are subject to no less restrictive confidentiality obligations than those herein. The Disclosing Party agrees that the foregoing shall not apply with respect to any information that the Receiving Party can document (a) is or becomes generally available to the public, (b) was in its possession or known by it prior to receipt from the Disclosing Party, (c) was rightfully disclosed to it without restriction by a third party, (d) was independently developed without use of any Confidential Information of the Disclosing Party, or (e) is required to be disclosed by law. Notwithstanding the foregoing, the Receiving Party may disclose the Disclosing Party’s Confidential Information: (a) if directed by the Disclosing Party; or (b) to the extent required by an applicable legal process, provided that the Receiving Party uses commercially reasonable efforts to (i) promptly notify the Disclosing Party in advance, to the extent permitted by law, and (ii) comply with the Disclosing Party’s reasonable requests regarding its efforts to oppose the disclosure, at the Disclosing Party’s cost. Each party acknowledges that the unauthorized use or disclosure of the other party’s Confidential Information may cause irreparable harm to the other party. Accordingly, each party agrees that the other party will have the right to seek an immediate injunction against any breach or threatened breach of this “Confidentiality” section, as well as the right to pursue any and all other rights and remedies available at law or in equity for such a breach. Developer hereby acknowledges and agrees that Webflow may terminate or suspend this Agreement and Developer’s access to the Marketplace immediately without liability to Developer upon any violation by Developer of this Section 6.1. Termination or suspension by Webflow under this Section 6.1 shall be in addition to, and not in lieu of, Webflow’s other rights and remedies. As between the parties, each party shall own and retain all right, title, and interest in and to its Confidential Information.

2. **Proprietary Rights**. As between the parties, (i) Developer shall own and retain all right, title, and interest in and to any Developer Confidential Information, the Developer Marks, and its Intellectual Property; and (ii) Webflow shall own and retain all right, title, and interest in and to (a) Webflow’s Confidential Information, (b) its Intellectual Property and the Webflow Marks, (c) the Platform, the Developer Resources, the Marketplace, and any related software and any improvements, enhancements, or modifications thereto and all Intellectual Property related to any of the foregoing, and (d) any software, applications, inventions, or other technology developed by Webflow in connection with any additional services or support.

3. **Developer Marks**. Developer grants Webflow a limited, worldwide, revocable, non-exclusive, non-transferable (except as permitted in Section 13.5), non-sublicensable, and royalty-free license to use and publicly display the Developer Marks solely in connection with the Marketplace and this Agreement.

## 7.  **UPDATES AND REMOVALS**

1. **Updates**. You acknowledge that Webflow may update or modify the Webflow API from time to time, and at its sole discretion (in each instance, an “**Update**”). You are required to implement and use the most current version of the Webflow API and to make any changes to your Application that are required as a result of such Update, at your sole cost and expense. Updates may adversely affect the manner in which your Application accesses or communicates with the Webflow API or displays Content. Your continued access or use of the Webflow API following an update or modification will constitute binding acceptance of the Update.

2. **Removals.** Webflow may determine in its sole discretion to make available or list any Application through the Marketplace, or to remove any Application from the Marketplace. Webflow may stop any transaction, or take other actions as needed to restrict access to or availability of any Application that does not comply with this Agreement or that otherwise might adversely affect End Users, Customers, or any Customers’ end users..

## 8.  **SERVICE IMPROVEMENTS AND FEEDBACK**

1. **Service Improvements and Feedback**. Notwithstanding any other term of the Agreement, Webflow shall have the right to reproduce, collect, analyze, or otherwise use De-Identified Data to improve and enhance the Marketplace, the Platform, and for other related development, diagnostic and corrective purposes. Developer may choose to, but is not obligated to, submit Feedback to Webflow. Developer agrees that for any Feedback it provides, Developer hereby assigns to Webflow all right, title, and interest in and to such Feedback, and Webflow is free to reproduce, disclose, and otherwise use the Feedback without attribution, payment, or restriction of any kind. Developer will not submit any Feedback that it considers confidential or proprietary and Webflow will treat any Feedback it receives as non-confidential and non-proprietary.

## 9.  **DISCLAIMER OF WARRANTIES AND LIMITATION OF LIABILITY**

1. THE MARKETPLACE, THE PLATFORM, AND ALL DEVELOPER RESOURCES ARE PROVIDED ON AN "AS IS" AND “AS AVAILABLE” BASIS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION, WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, ACCURACY, COMPLETENESS, CURRENTNESS, FREEDOM FROM INTERRUPTION, VIRUSES OR OTHER DEFECT, AND NON-INFRINGEMENT.

2. YOUR SOLE REMEDY AGAINST US FOR DISSATISFACTION WITH THE MARKETPLACE, THE PLATFORM, OR ALL DEVELOPER RESOURCES IS TO STOP UTILIZING THE MARKETPLACE, THE PLATFORM, OR RELATED SERVICES.

3. TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, WEBFLOW ASSUMES NO LIABILITY OR RESPONSIBILITY FOR ANY: (I) ERRORS, MISTAKES, OR INACCURACIES IN THE MARKETPLACE, THE PLATFORM, AND DEVELOPER RESOURCES; (II) PERSONAL INJURY OR PROPERTY DAMAGE (INCLUDING INFRINGEMENT OF ANY INTELLECTUAL PROPERTY RIGHTS RELATED TO YOUR MEDIA), OF ANY NATURE WHATSOEVER, RESULTING FROM YOUR USE OF THE MARKETPLACE, THE PLATFORM, AND ALL DEVELOPER RESOURCES (INCLUDING INFRINGEMENT CAUSED BY THIRD-PARTY FRAUD, MALFEASANCE, OR EXPLOITATION OF TECHNICAL ERRORS IN THE DEVELOPER RESOURCES);  (III) ANY UNAUTHORIZED ACCESS TO OR USE OF OUR SECURE SERVERS AND/OR ANY AND ALL INFORMATION, INCLUDING PERSONAL INFORMATION OR FINANCIAL INFORMATION, STORED THEREIN; (IV) ANY ERRORS, MISTAKES, LOSSES, DAMAGE OR UNAUTHORIZED ACCESS RESULTING FROM THE USE OF THIRD PARTY APPLICATIONS BY YOU OR BY WEBFLOW ON YOUR BEHALF; (V) ANY INTERRUPTION OR CESSATION OF TRANSMISSION TO OR FROM THE MARKETPLACE, THE PLATFORM, AND ALL DEVELOPER RESOURCES; (VI) ANY BUGS, VIRUSES, TROJAN HORSES, OR THE LIKE THAT MAY BE TRANSMITTED TO OR THROUGH THE MARKETPLACE; (VII) ANY ERRORS OR OMISSIONS IN THE MARKETPLACE, THE PLATFORM, AND ALL DEVELOPER RESOURCES OR FOR ANY LOSS OR DAMAGE INCURRED AS A RESULT OF THE USE OF ANY CONTENT POSTED, EMAILED, TRANSMITTED, OR OTHERWISE MADE AVAILABLE THROUGH THE MARKETPLACE; AND/OR (VIII) THE DEFAMATORY, OFFENSIVE, OR ILLEGAL CONDUCT OF ANY THIRD PARTY.

4. IN NO EVENT SHALL WE OR OUR AFFILIATES, SUBSIDIARIES, OFFICERS, DIRECTORS, EMPLOYEES, AGENTS, LICENSORS, OR SERVICE PROVIDERS BE LIABLE FOR ANY DAMAGES, INCLUDING, WITHOUT LIMITATION, INDIRECT, CONSEQUENTIAL, SPECIAL, INCIDENTAL, OR PUNITIVE DAMAGES, RESULTING FROM THE USE OR INABILITY TO USE THE PLATFORM, OR ALL DEVELOPER RESOURCES.

5. IN NO EVENT SHALL WEBFLOW OR OUR AFFILIATES, SUBSIDIARIES, OFFICERS, DIRECTORS, EMPLOYEES, AGENTS, LICENSORS, OR SERVICE PROVIDERS BE LIABLE TO YOU FOR ANY CLAIMS, PROCEEDINGS, LIABILITIES, OBLIGATIONS, DAMAGES, LOSSES, OR COSTS RELATED TO THIS AGREEMENT IN AN AMOUNT EXCEEDING \$100.

6. THIS LIMITATION OF LIABILITY SECTION APPLIES WHETHER THE ALLEGED LIABILITY IS BASED ON WARRANTY, CONTRACT, TORT, NEGLIGENCE, STRICT LIABILITY, OR ANY OTHER BASIS, EVEN IF WEBFLOW OR ITS AFFILIATES, SUBSIDIARIES, OFFICERS, DIRECTORS, EMPLOYEES, AGENTS, LICENSORS, OR SERVICE PROVIDERS HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

7. THE LIMITATIONS OF LIABILITY IN THIS SECTION SHALL APPLY TO THE FULLEST EXTENT PERMITTED BY LAW IN THE APPLICABLE JURISDICTION AND WILL APPLY REGARDLESS OF THE SUCCESS OR EFFECTIVENESS OF OTHER REMEDIES. SOME STATES DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES OR THE EXCLUSION OR LIMITATION OF INCIDENTAL OR CONSEQUENTIAL DAMAGES, SO THE ABOVE LIMITATIONS OR EXCLUSIONS MAY NOT APPLY TO YOU. THIS AGREEMENT GIVES YOU SPECIFIC LEGAL RIGHTS, AND YOU MAY ALSO HAVE OTHER RIGHTS WHICH VARY FROM STATE TO STATE.

## 10.  **INDEMNIFICATION**

You agree to indemnify, defend, and hold harmless Webflow (including its Affiliates and its and their members, officers, directors, managers, employees, agents, successors, and permitted assigns) from and against any actions, claims, demands, proceedings, losses, liabilities, judgments, awards, penalties, fines, and all related costs and expenses, including without limitation reasonable attorneys’ fees (collectively, “**Losses**”), arising from or relating to (a) your Application(s), (b) your relationships or interactions with any End Users or third party distributors of your Application(s); (c) your use of the Platform, Developer Resources, the Marketplace, and all Webflow Intellectual Property; (d) your violation or breach of this Agreement or any obligations, representations, or warranties under this Agreement; (e) your violation or breach of any Applicable Laws, rules, or regulations or the rights, including Intellectual Property rights or privacy rights, of any third party; or (f) any claims from or by tax authorities in any country in relation to your use of the Platform, Developer Resources, the Marketplace, and all Webflow intellectual property, and other operations for which Webflow may be held jointly and severally liable. Webflow may at its own expense participate in the defense and settlement of any claim with its own counsel, and you may not settle a claim without Webflow’s prior written consent (not to be unreasonably withheld).

## 11.  **TERM AND TERMINATION**

The term of this Agreement (the “**Term**”) will begin on the date you agree to it and will continue until you or Webflow terminates it in accordance with the terms of this Agreement. Webflow may immediately terminate or suspend this Agreement, any rights granted herein, and/or your access to the Developer Resources or the Marketplace, at its sole discretion at any time, for any reason by providing notice to you. You may terminate this Agreement at any time by ceasing your access to the Webflow API. Upon termination of this Agreement, (a) all rights and licenses granted herein immediately expire and you must cease use of the Developer Resources; and (b) you shall permanently delete all copies of the Developer Resources in all forms and types of media, and copies thereof, in your possession, unless prohibited by law or judicial order. The provisions set forth in this Agreement that, by their nature, should survive termination or expiration of this Agreement, will survive any expiration or termination of this Agreement. Webflow will have no obligation or liability resulting from termination or suspension of this Agreement as permitted herein.

## 12.  **MISCELLANEOUS**

1. **Relationship of the Parties**. This Agreement does not create a partnership, franchise, joint venture, agency, fiduciary, or employment relationship between the parties. Each party will be solely responsible for payment of all compensation owed to its respective employees, as well as all employment-related taxes. Developer does not have any authority of any kind to bind Webflow in any respect whatsoever.

2. **No Third-Party Beneficiaries**.  Nothing in this Agreement, express or implied, is intended to or shall confer upon any person or entity (other than the parties hereto) any right, benefit or remedy of any nature whatsoever under or by reason of this Agreement.

3. **Export Restrictions.** You may not agree to this Agreement if you are a resident of a country embargoed by the United States, or are a foreign person or entity blocked or denied by the United States government. By agreeing to the Agreement, you represent and warrant that you (i) are not located or residing in any country or territory subject to comprehensive US sanctions (currently Cuba, Crimea, Iran, North Korea, Donetsk People’s Republic, Luhansk People’s Republic, and Syria); (ii) are not listed on any United States list of prohibited or restricted parties, such as OFAC’s Specially Designated Nationals and Persons List, or otherwise subject to US sanctions that would prohibit your access to or use of the Platform; and (iii) shall not use or allow access by any of your customers or potential customers (if applicable) to the Platform in any manner that may cause Webflow to violate US export controls and sanctions. We reserve the right to restrict or block your access, or access by any of your customers or users, to the Platform or Developer Resources and/or to terminate this Agreement at any time without notice if we determine, at our sole discretion, that such access may cause a violation or create unacceptable risk to us under export controls or sanctions.

4. **Fees.** Webflow reserves the right to begin charging or to change the fees it charges for access to or use of the Developer Resources on thirty (30) days' written notice (including by updating its website).

5. **Assignment.** Neither party may assign, transfer, or sublicense this Agreement or any of its rights or obligations hereunder, whether by operation of law or otherwise, without the other party’s prior written consent (not to be unreasonably withheld); provided, however, that Webflow may assign the Agreement in its sole discretion to an Affiliate or in connection with a merger, acquisition, corporate reorganization, or sale of all or substantially all of its assets. Subject to the foregoing, this Agreement will bind and inure to the benefit of the parties, their respective successors, and permitted assigns.

6. **Notices**. Any notice or other communication to be given hereunder will be in writing and given (i) by Webflow via email and/or through the posting of such notice on your Webflow Dashboard, or (ii) by you via email to [legal@webflow.com](mailto:legal@webflow.com) or to such other email or physical addresses as Webflow may specify from time to time. The date of receipt will, in the case of email, be deemed the date on which such notice is transmitted.

7. **Dispute Resolution; Governing Law; Venue.** To expedite resolution and reduce the cost of any dispute, controversy, or claim related to this Agreement, the parties agree to first attempt to negotiate any dispute in good faith informally for at least thirty (30) days before initiating any legal proceeding. Such informal negotiations will commence upon written notice. This Agreement is governed by and will be construed in accordance with the laws of the State of California, without regard to conflict of law principles or the United Nations Convention on the International Sale of Goods. Any legal action or proceeding arising under this Agreement will be brought exclusively in the state or federal courts in San Francisco County, California, and the parties expressly consent to personal jurisdiction and venue therein. In any action or proceeding to enforce rights under this Agreement, the prevailing party will be entitled to recover its reasonable costs and attorneys’ fees.

8. **Entire agreement/severability.** This Agreement is the complete and exclusive agreement between the parties regarding matters covered by this Agreement. For the avoidance of doubt, this Agreement supersedes and terminates any and all prior and/or contemporaneous agreements, proposals, or representations, written or oral, otherwise relating to or concerning its subject matter or any previous Webflow partner programs or related offerings. Any and all waivers must be in writing and signed by both parties, except as otherwise provided herein. Titles and headings of sections of this Agreement are for convenience only and shall not affect the construction of any provision of this Agreement. If any provision of this Agreement is held by a court of competent jurisdiction to be contrary to law, the provision will be deemed null and void, and the remaining provisions of this Agreement will remain in effect.

9. **No waiver.** Any failure by Webflow to enforce or exercise any provisions of this Agreement shall not constitute a waiver of that right or provision. Webflow’s failure to act with respect to a breach by you or others does not waive its rights to act with respect to subsequent or similar breaches.

10. **Attorneys’ and accountants’ fees; Remedies.** In any action to enforce this Agreement, the prevailing party shall be entitled to attorneys’ and accountants’ fees and costs. Developer agrees that Webflow's remedy at law for any actual or threatened breach of this Agreement would be inadequate and that Webflow shall be entitled to specific performance or injunctive relief, or both, in addition to any damages that Webflow may be legally entitled to recover, together with reasonable expenses of any form of dispute resolution, including, without limitation, attorneys' fees. No right or remedy of Webflow shall be exclusive of any other, whether at law or in equity, including without limitation damages injunctive relief, attorneys' fees, and expenses. No instance of waiver by Webflow of its rights or remedies under this Agreement shall imply any obligation to grant any similar, future, or other waiver.

{/* <!-- vale on --> */}

---

# Examples

> Examples of how to use the Webflow Cloud API

{/* <!-- vale off --> */}

<div>
  <ExamplesContainer
    cols={3}
    examples={[
      {
        title: "Designer API Playground",
        description: "Interactive playground demonstrating Designer API capabilities for interacting with the Webflow Designer.",
        liveUrl: "https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62",
        products: ["Designer Extension"],
        image: "https://cdn.prod.website-files.com/64f93520898fc6f3157fe5bb/6762e2d9973fb410af1e44b2_developers_sticky-design-experience.webp",
        imageAlt: "Designer API Icon",
      },
      {
        title: "Careers Page",
        description: "Next.js careers page that can be deployed to Webflow Cloud. This example integrates Webflow DevLink components and uses the Greenhouse API to display job listings.",
        liveUrl: "https://astral-cloud-start.webflow.io/careers",
        repoUrl: "https://github.com/Webflow-Examples/careers-page-webapp",
        products: ["Webflow Cloud"],
        imageAlt: "Webflow Cloud Icon",
        image: "https://cdn.prod.website-files.com/686431ad597a0e8140e9a6b2/6876e137118dad4e1eec6e79_Screenshot%202025-07-15%20at%206.15.58%E2%80%AFPM.png",
        framework: "Next.js"
      },
      {
        title: "OAuth Example",
        description: "Starter template showcasing Webflow OAuth authentication and API integration.",
        repoUrl: "https://github.com/Webflow-Examples/webflow-app-starter-v2",
        products: ["Data Client"],
        imageAlt: "Data Client Icon",
      },
      {
        title: "Hybrid App Example",
        description: "Starter template showcasing Webflow Hybrid App with Data Client and Designer Extension capabilities.",
        repoUrl: "https://github.com/Webflow-Examples/hybrid-app-starter",
        products: ["Data Client", "Designer Extension"],
        imageAlt: "Hybrid App Icon",
      },
      {
        title: "CMS Example",
        description: "Data Client app showing how to use the Webflow CMS API to fetch and update content.",
        repoUrl: "https://github.com/Webflow-Examples/cms-examples",
        products: ["Data Client"],
        image: "https://cdn.prod.website-files.com/64f93520898fc6f3157fe5bb/6762dc375b41c77e82fa1b66_developers_webflow-integrations.webp",
        imageAlt: "CMS Image",
      },
      {
        title: "LLMS.txt Generator",
        description: "Create an LLMS.txt file for your Webflow site.",
        liveUrl: "https://hello-webflow-cloud.webflow.io/llmstxt",
        repoUrl: "https://github.com/Webflow-Examples/llms-txt-generator-webapp",
        products: ["Webflow Cloud"],
        framework: "Astro"
      },
      {
        title: "BetterAuth - Next.js",
        description: "BetterAuth integration using SQLite database with Next.js to persist user sessions",
        liveUrl: "https://clone-auth-test.webflow.io/app/login",
        repoUrl: "https://github.com/Webflow-Examples/auth-cloud-webapp/tree/main/betterauth-nextjs",
        products: ["Webflow Cloud"],
        image: "https://cdn.prod.website-files.com/686431ad597a0e8140e9a6b2/6876dfefc671a20280b09e28_Screenshot%202025-07-15%20at%206.10.24%E2%80%AFPM.png",
        framework: "Next.js"
      },
            {
        title: "BetterAuth - Astro",
        description: "BetterAuth integration using SQLite database with Astro to persist user sessions",
        liveUrl: "https://auth-cloud-test.webflow.io/app/login",
        repoUrl: "https://github.com/Webflow-Examples/auth-cloud-webapp/tree/main/betterauth-astro",
        image: "https://cdn.prod.website-files.com/686431ad597a0e8140e9a6b2/6876dfefd74623f64680a2e4_Screenshot%202025-07-15%20at%206.10.15%E2%80%AFPM.png",
        products: ["Webflow Cloud"],
        framework: "Astro"
      },
      {
        title: "Pricing Calculator",
        description: "A Pricing calculator built in React for Code Components",
        liveUrl: "https://cc-test-66117f.webflow.io/insurance-quote-widget/",
        repoUrl: "https://github.com/Webflow-Examples/code-components-examples/blob/main/pricing-quote-calculator/README.md",
        products: ["Code Components"],
        image: "https://prod.ferndocs.com/_next/image?url=https%3A%2F%2Ffiles.buildwithfern.com%2Fhttps%3A%2F%2Fwebflow.docs.buildwithfern.com%2F2025-09-17T13%3A28%3A21.262Z%2Fproducts%2Fassets%2Fimages%2Fexample-hero%2Fpricing-calculator.png&w=3840&q=75",
        framework: "React"
      },
            {
        title: "Store Locator",
        description: "A Store Locator component built in React for Code Components",
        liveUrl: "https://store-finder-example.webflow.io/",
        repoUrl: "https://github.com/Webflow-Examples/code-components-examples/blob/main/store-locator/README.md",
        products: ["Code Components"],
        image: "https://prod.ferndocs.com/_next/image?url=https%3A%2F%2Ffiles.buildwithfern.com%2Fhttps%3A%2F%2Fwebflow.docs.buildwithfern.com%2F2025-09-17T13%3A28%3A21.262Z%2Fproducts%2Fassets%2Fimages%2Fexample-hero%2Fstore-locator.png&w=3840&q=75",
        framework: "React"
      },
                  {
        title: "Multi-Step Form",
        description: "A dynamic multi-step form built in React for Code Components",
        liveUrl: "https://hello-webflow-cloud.webflow.io/form",
        repoUrl: "https://github.com/Webflow-Examples/code-components-examples/blob/main/multi-step-form/README.md",
        products: ["Code Components"],
        image: "https://prod.ferndocs.com/_next/image?url=https%3A%2F%2Ffiles.buildwithfern.com%2Fhttps%3A%2F%2Fwebflow.docs.buildwithfern.com%2F2025-09-17T13%3A28%3A21.262Z%2Fproducts%2Fassets%2Fimages%2Fexample-hero%2Fdynamic-form.png&w=3840&q=75",
        framework: "React"
      },
      {
        title: "ShadCN/UI Components",
        description: "A collection of direct ShadCN/UI components built in React for Code Components",
        liveUrl: "https://shadcn-ui-code-components.webflow.io/",
        repoUrl: "https://github.com/Webflow-Examples/code-components-examples/tree/main/shadcn-components",
        products: ["Code Components"],
        image: "https://i.imgur.com/evvsuRp.png",
        framework: "React"
      },
      {
        title:"CMS Slider",
        description: "A CMS Slider component built in React for Code Components",
        liveUrl:"https://cms-slider-4d63c4.webflow.io/",
        repoUrl:"https://github.com/Webflow-Examples/code-components-examples/blob/main/cms-slider/README.md",
        products: ["Code Components"],
        framework: "React",
        image:"https://i.imgur.com/hFZGYpe.gif",
        imageAlt:"CMS Slider Image",
      },
      {
        title:"CMS Filter & Search",
        "description": "A CMS Filter and Search component built in React for Code Components",
        liveUrl:"https://cms-filter-code-components.webflow.io/",
        "repoUrl":"https://github.com/julianmemberstack/cms-filters",
        products: ["Code Components"],
        framework: "React",
        image:"https://i.imgur.com/6TIj5zE.gif",
        imageAlt:"CMS Filter & Search Image",
      }
    ]}
  />
</div>

{/* <!-- vale on --> */}

---

# New LLMS.txt endpoints, Audit Log events, and Google Tag support

> This update introduces new endpoints for managing llms.txt files, and adds a new event type to Workspace Audit Logs.

This update gives you better control over your site configuration, with new endpoints for managing `llms.txt` files, and a new event type in Workspace Audit Logs for tracking user granular access updates.

## `LLMS.txt` support<span>BETA</span>

We've added three new endpoints to the Beta API for managing `llms.txt` files on enterprise sites. This file can be used to provide information about your site to large language models (LLMs). These endpoints are available for Enterprise customers.

* <span data-badge-type="http-method" data-http-method="GET" class="fern-docs-badge large green subtle">GET</span> [`/sites/{site_id}/llms_txt`](/data/v2.0.0-beta/reference/enterprise/site-configuration/llms-txt/get) - Retrieve the `llms.txt` file for a specific site.
* <span data-badge-type="http-method" data-http-method="PATCH" class="fern-docs-badge large orange subtle">PATCH</span> [`/sites/{site_id}/llms_txt`](/data/v2.0.0-beta/reference/enterprise/site-configuration/llms-txt/patch) - Update the `llms.txt` file for a specific site.
* <span data-badge-type="http-method" data-http-method="DELETE" class="fern-docs-badge large red subtle">DELETE</span> [`/sites/{site_id}/llms_txt`](/data/v2.0.0-beta/reference/enterprise/site-configuration/llms-txt/delete) - Delete the `llms.txt` file for a specific site.

## New `user_granular_access_updated` event in Workspace Audit Logs

The [`Get Workspace Audit Logs`](/data/reference/enterprise/workspace-audit-logs/get) endpoint now includes a new `user_granular_access_updated` event sub-type in the response. This sub-type informs admins of when a user's granular access to a site is updated.

---

# Webflow's MCP server now supports the Designer

> Update: Webflow's MCP server now supports the Designer API, giving AI agents the ability to work with the Webflow Designer in real-time.

Webflow's MCP server now supports the Designer API, enabling AI agents to interact directly with the Webflow Designer canvas in real-time. This pivotal update expands the server's capabilities beyond content management, opening new possibilities for AI-assisted visual design.

## What's new

The MCP server now includes tools that connect directly to the Webflow Designer, allowing AI agents to:

* Create and modify design elements on the canvas
* Manage styles, variables, and components
* Work with responsive breakpoints and layouts
* Access real-time design data and structure

### Companion app for Designer connectivity

<div>
  <Frame>
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/02ae17428a9bc1c3d5ed26bc14b44a66d935ef85970e30b85f6c2b0d64c15ddb/products/data/pages/Changelog/assets/bridge-app.png" alt="MCP Companion App" />
  </Frame>
</div>

A new companion app automatically installs during authorization and enables seamless communication between your AI agent and the Designer:

* **Automatic setup**: The companion app installs automatically when you authorize the MCP server
* **Real-time sync**: Maintains a persistent connection between your AI agent and active design sessions
* **Designer access**: Must remain open in the Designer for MCP tools to function

#### Companion app connectivity

**Keep the companion app open**: The MCP Companion App must remain open in the Webflow Designer for Designer API tools to function. Close the app, and you'll lose access to canvas-based operations.

## Getting started

To use the new Designer API features:

1. **Update your MCP configuration** following the [installation guide](/data/docs/ai-tools)
2. **Authorize your sites** through the OAuth flow (the companion app installs automatically)
3. **Open the Designer** and launch the "Webflow MCP Companion App" from the Apps panel
4. **Start designing** with AI-powered prompts like "Create a hero section with responsive design"

## Important requirements

### Node.js version 22.3.0+

The MCP server now requires Node.js version **22.3.0** or higher. If you're using an older version:

* Use `nvm` to install and switch to Node.js 22.3.0
* Clear your `npx` cache: `rm -rf ~/.npm/_npx`
* Restart your AI client after updating

See the [Node.js compatibility section](/docs/ai-tools#nodejs-compatibility) for detailed troubleshooting steps.

## Learn more

For complete setup instructions, tool documentation, and troubleshooting guides, see our [MCP server and AI tools documentation](/docs/ai-tools).

---

# Changes for internal APIs affecting site data sync in the browser

> Important changes affecting tools using internal Webflow APIs

To support [real-time collaboration](https://webflow.com/collaboration), we're implementing version control on a set of internal APIs used to read and write site data to the designer from the browser. To ensure continued functionality of browser extensions and tools that currently use this set of APIs, please see the timeline and migration steps below.

**Please note: If you're building apps with Webflow's official set of Public APIs, this won't affect your work.**

## Affected internal endpoints

Starting August 13, 2025, the following internal site data sync endpoints will now support and enforce version control.

* <span data-badge-type="http-method" data-http-method="GET" class="fern-docs-badge large green subtle">GET</span> `/sites/{siteName}/dom`
* <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge large blue subtle">POST</span> `/pages/{pageId}/dom`
* <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge large blue subtle">POST</span> `/sites/{siteName}/variables`
* <span data-badge-type="http-method" data-http-method="PATCH" class="fern-docs-badge large orange subtle">PATCH</span> `/sites/{siteName}/variables/{variableId}`
* <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge large blue subtle">POST</span> `/sites/{siteName}/styles`

<br />

**Starting September 15, 2025**, these endpoints will require a version number in all write requests. Requests without a version number will return an error.

**These endpoints will be fully deprecated and removed in late 2026**. We recommend updating your tools now to comply with version checks, while also planning your migration away from these endpoints before the deprecation date. We will provide further notice about the final deprecation date at a later time.

## Timeline

<Steps>
  <Step title="August 13, 2025">
    This set of internal APIs will start returning and accepting version fields for reads and writes
  </Step>

  <Step title="August 19, 2025">
    DevRel hosted office hours for additional developer support. Sign up for office hours [here](https://riverside.fm/webinar/registration/eyJzbHVnIjoid2ViZmxvdy1vbi13ZWJmbG93IiwiZXZlbnRJZCI6IjY4OWFiMjJkODM2ZTJkZWRkYWJhYzAzMSIsInByb2plY3RJZCI6IjY4OWFiMjJkODM2ZTJkNjllMGJhYzAyZSJ9).
  </Step>

  <Step title="September 15, 2025">
    This set of internal APIs will start enforcing version checks on all writes
  </Step>

  <Step title="Late 2026">
    These endpoints will be fully deprecated and removed. We will provide further notice about the final deprecation date at a later time.
  </Step>
</Steps>

<Note title="Office hours & support">
  We understand that this is a change for some developers, and we're here to help. **[Sign up for our office hours](https://riverside.fm/webinar/registration/eyJzbHVnIjoid2ViZmxvdy1vbi13ZWJmbG93IiwiZXZlbnRJZCI6IjY4OWFiMjJkODM2ZTJkZWRkYWJhYzAzMSIsInByb2plY3RJZCI6IjY4OWFiMjJkODM2ZTJkNjllMGJhYzAyZSJ9) on August 19, 2025 to answer questions and help with the migration.**

  Additionally, you can reach out to our developer support team at <a href="mailto:developers@webflow.com">[developers@webflow.com](mailto:developers@webflow.com)</a> for help.
</Note>

## Version management

### Reading site data

The <span data-badge-type="http-method" data-http-method="GET" class="fern-docs-badge large green subtle">GET</span> `/sites/{siteName}/dom` endpoint now returns a resource version number for in the following fields

<Tabs>
  <Tab title="Fields">
    | Resource              | Version Field                    | Type     | Description                                                               |
    | --------------------- | -------------------------------- | -------- | ------------------------------------------------------------------------- |
    | `domNodes`            | `domNodesVersion`                | `number` | The version number of the DOM nodes array                                 |
    | `styles`              | `stylesVersion`                  | `number` | The version number of the styles object                                   |
    | `variables`           | `variables?[].version`           | `number` | The version number for each object within the `variables` array           |
    | `variableCollections` | `variableCollections?[].version` | `number` | The version number for each object within the `variableCollections` array |

    <Note title="Versioning for interactions is not yet available">
      Currently, version fields aren't returned for interactions. However, this could change in the future.
    </Note>
  </Tab>

  <Tab title="Example response">
    Below is a truncated example response from the <span data-badge-type="http-method" data-http-method="GET" class="fern-docs-badge large green subtle">GET</span> `/sites/{siteName}/dom` endpoint.

    ```json title={"response.json"}
    {
        "siteId": "6813a82d2006ad93ffe5da10",
        "userId": "63209baeac0b804b455624ce",
        "userEmail": "user@example.com",
        "siteName": "Hello Webflow Cloud!",
        "timezone": "America/New_York",
        "maxPages": 500,
        "styles": {
            "blocks": [
                {
                    "_id": "default-body",
                    "data": {
                        "type": "tag",
                        "name": "body",
                        "sel": "body",
                        "comb": "",
                        "styleLess": "background-color: hsla(0, 0.00%, 0.00%, 1.00); font-family: Inter; color: hsla(0, 0.00%, 100.00%, 1.00); font-size: 16px; line-height: 20px;",
                        "children": [],
                        "variants": {},
                        "affects": {
                            "6813a82d2006ad93ffe5da63": 1,
                            "6813a82d2006ad93ffe5da8d": 1,
                            "6813a82d2006ad93ffe5daa8": 1,
                            "6813a82d2006ad93ffe5daa9": 1,
                            "6813a82d2006ad93ffe5daaa": 1,
                            "6813a82d2006ad93ffe5dab6": 1,
                            "6813a82d2006ad93ffe5dab7": 1
                        }
                    }
                }
                
            ],
            "data": {
                "swatches": [
                    {
                        "id": "4b5c02bd",
                        "name": "Primary",
                        "color": "hsla(258.9261744966443, 100.00%, 70.78%, 1.00)"
                    },
                    {
                        "id": "c4be53de",
                        "name": "Yellow Green 700",
                        "color": "hsla(93.6986301369863, 28.85%, 49.61%, 1.00)"
                    },
                    {
                        "id": "d45e5cda",
                        "name": "White",
                        "color": "hsla(73.7007874015748, 0.00%, 92.67%, 1.00)"
                    },
                    {
                        "id": "1490ec53",
                        "name": "Gray 300",
                        "color": "hsla(0, 0.00%, 70.00%, 1.00)"
                    },
                    {
                        "id": "c8810603",
                        "name": "Gray 500",
                        "color": "hsla(0, 0.00%, 45.88%, 1.00)"
                    },
                    {
                        "id": "c0417f39",
                        "name": "Border Radius",
                        "color": "hsla(0, 0.00%, 13.33%, 1.00)"
                    }
                ],
                "breakpoints": {
                    "main": {
                        "maxWidth": 10000
                    },
                    "medium": {
                        "maxWidth": 991
                    },
                    "small": {
                        "maxWidth": 767
                    },
                    "tiny": {
                        "maxWidth": 479
                    }
                },
                "macros": [],
                "migrations": {
                    "stylesNext": true
                },
                "appliedStylesMap": {}
            }
        },
        "domNodes": [
            {
                "_id": "6488afbdd39e79104a3d2867",
                "type": "Body",
                "tag": "body",
                "classes": [],
                "children": [
                    "810571f6-b040-2142-b6b7-b134c6cd9dda"
                ],
                "data": {}
            }
        ],
        "domNodesVersion": 1726,
        "stylesVersion": 1830,
        "variables": [
            {
                "id": "variable-4b5c02bd",
                "type": "color",
                "value": {
                    "type": "color",
                    "value": "#6C3EF5"
                },
                "name": "Primary",
                "deleted": true,
                "createdOn": "2023-10-11T21:31:10.304Z",
                "updatedOn": "2025-08-14T17:12:20.672Z",
                "order": "a ",
                "modes": [],
                "version": 73
            }
        ],
        "variableCollections": [
            {
                "id": "collection-3cf95d6f-abf1-0dcc-0668-d8f4bb66741e",
                "name": "My New Collection",
                "deleted": true,
                "createdOn": "2025-05-01T16:58:22.556Z",
                "updatedOn": "2025-06-12T14:12:41.259Z",
                "modes": [],
                "order": "a!",
                "isDefault": false,
                "origin": null,
                "version": 1
            }
        ]
    }
    ```
  </Tab>
</Tabs>

<br />

### Writing site data

The following endpoints require version numbers in the request body for all writes:

* <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge large blue subtle">POST</span> `/pages/{pageId}/dom`
* <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge large blue subtle">POST</span> `/sites/{siteName}/variables`
* <span data-badge-type="http-method" data-http-method="PATCH" class="fern-docs-badge large orange subtle">PATCH</span> `/sites/{siteName}/variables/{variableId}`
* <span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge large blue subtle">POST</span> `/sites/{siteName}/styles`

<br />

## Errors and responses

<span data-badge-type="http-method" data-http-method="POST" class="fern-docs-badge large blue subtle">POST</span> and <span data-badge-type="http-method" data-http-method="PATCH" class="fern-docs-badge large orange subtle">PATCH</span> requests to the above endpoints will return errors if the version numbers are missing or don't match.

* **409 Conflict**: Version mismatch. <br />
  A later version of the data is available. Fetch the latest data and retry the operation.
* **400 Bad Request**: Missing version numbers in write requests. <br />
  The request body must include a version number for each resource in the request.

<br />

## Migration steps

<Note title="Migrate to the Designer API before the deprecation date">
  Most of the functionality served by these endpoints is also available in the [Designer API](/designer/reference/introduction). We recommend migrating to the Designer API for future development for reliability and consistency. If you need additional functionality that's not available in the Designer API, please reach out to our developer support team at <a href="mailto:developers@webflow.com">[developers@webflow.com](mailto:developers@webflow.com)</a> to tell us what you need.
</Note>

<Steps>
  ### 1. Update data retrieval

  In addition to retrieving site information, be sure to store version numbers when retrieving data.

  Additionally you must include the `X-Webflow-App-ID` header in all requests. `X-Webflow-App-ID` should be a unique name that refers to your application or extension.

  ```javascript
  const response = await fetch(`/sites/${siteName}/dom`,
    method: 'GET',
    {
      headers: {
        'X-Webflow-App-ID': 'YOUR_UNIQUE_NAME'
      }
    }
  );
  const data = await response.json();

  // Store version numbers for sync
  const versions = {
    domNodes: data.domNodesVersion,
    styles: data.stylesVersion,
    variables: data.variables?.map(v => ({ id: v.id, version: v.version })),
    variableCollections: data.variableCollections?.map(vc => ({ id: vc.id, version: vc.version }))
  };
  ```

  ### 2. Update data writing

  Include version numbers and `X-Webflow-App-ID` header in all write requests.

  `X-Webflow-App-ID` should be a unique name that refers to your application or extension.

  ```javascript
  // Example: Updating styles
  const updateResponse = await fetch(`/sites/${siteName}/styles`, {
    method: 'POST',
    headers: {
      'X-Webflow-App-ID': 'YOUR_UNIQUE_NAME',
      'Content-Type': 'application/json; charset=UTF-8',
      'X-Requested-With': 'XMLHttpRequest',
      'X-XSRF-Token': 'YOUR TOKEN HERE'  // must match the current from browser cookies
    },
    body: JSON.stringify({
      styles: newStyles,
      stylesVersion: versions.styles // Include current version
    }),
    credentials: 'same-origin'
  });

  if (updateResponse.status === 409) {
    // Version conflict - fetch latest data and retry
    const latestData = await fetch(`/sites/${siteName}/dom`);
    // Update your local versions and retry the operation
  }
  ```

  ### 3. Handle version conflicts

  Implement retry logic for version conflicts:

  ```javascript
  async function updateWithRetry(endpoint, data, maxRetries = 3) {
    for (let attempt = 0; attempt < maxRetries; attempt++) {
      try {
        const response = await fetch(endpoint, {
          method: 'POST',
          headers: {
            'X-Webflow-App-ID': 'YOUR_UNIQUE_NAME',
            'Content-Type': 'application/json; charset=UTF-8',
            'X-Requested-With': 'XMLHttpRequest',
            'X-XSRF-Token': 'YOUR TOKEN HERE' // must match the current from browser cookies
          },
          body: JSON.stringify(data),
          credentials: 'same-origin'
        });

        if (response.status === 409) {
          // Fetch latest versions and retry
          const latest = await fetch(`/sites/${siteName}/dom`);
          const latestData = await latest.json();
          data.stylesVersion = latestData.stylesVersion;
          // Update other version fields as needed
          continue;
        }

        return response;
      } catch (error) {
        if (attempt === maxRetries - 1) throw error;
      }
    }
  }
  ```
</Steps>

## Important reminders

* This API will be fully deprecated and removed in late 2026
* Consider migrating to [official Webflow APIs](/designer/reference/introduction) when available.
* Test thoroughly in development environments before deploying

## Support

For questions about this migration, contact our [developer support team.](mailto:developers@webflow.com) However, we can't provide ongoing support for private API usage.

---

# Developer experience improvements

> Data API improvements for improved audit logging, webhook payloads, branch support, and file handling capabilities.

This release enhances the developer experience for the Data API with improved audit logging, webhook payloads, branch support, and file handling capabilities.

## Added

### [Workspace audit logs](/data/reference/enterprise/workspace-audit-logs/get)

* **Track guest access approvals**: The new `access_request_accepted` event subtype lets you monitor when guest access requests are approved. The response includes a `targetUsers` array so you can see exactly which users were approved.
* **Monitor access requests**: Added the `access_request` method for `workspace_membership` and `site_membership` events to track how users were granted access to workspaces and sites.

### Webhook payloads for page events

* **Navigate directly to pages**: The new `publishedPath` field in webhook payloads gives you the exact URL path to navigate to pages on your site. This makes it much easier to track page changes beyond just the page ID and title. Available for:
  * [Page created](/data/reference/webhooks/events/page-created)
  * [Page metadata updated](/data/reference/webhooks/events/page-metadata-updated)
  * [Page deleted](/data/reference/webhooks/events/page-deleted)

### Branch support for pages and components localization

* **Work with page branches**: Page and Component localization endpoints now support reading and writing to page branches using the `branchId` parameter. This lets you manage draft pages and components separately from published content. To get the `branchId` for a page, use the [List Pages](/data/reference/pages-and-components/pages/get-content) endpoint.

### Improved file handling

* **Skip invalid files gracefully**: When creating or updating CMS items with attachments, use the `skipInvalidFiles` parameter to handle problematic files more efficiently. When set to `true`, invalid files are skipped and processing continues. When `false`, the entire request fails if any file is invalid.

## JavaScript SDK updates

* `v3.2.0` is [now available](https://www.npmjs.com/package/webflow-api/v/3.2.0) and up to date with latest changes in the Data API v2. See the [SDK changelog](https://github.com/webflow/js-webflow-api/releases/tag/v3.2.0) for more details.

---

# Breaking changes for CMS publishing

> On July 7, 2025, we're updating CMS item publishing. These changes affect how items are published, drafted, and removed from live sites.

**On July 7, 2025, we're releasing important updates to how CMS items are published and managed via the API.** These changes affect how you manage live items and publish CMS content with the API. Please review the breaking changes below to avoid disruptions.

## Draft management improvements

The Webflow UI now supports saving draft changes to published CMS items without affecting live content. To maintain consistency between the UI and API, we're introducing the following change:

### Unpublishing live items <span class="legacy-pill">Breaking Change</span>

Previously, updating a live item's `isDraft` property to `true` would unpublish a live item from the site. This behavior is changing to support improved draft management:

* Updating an item's `isDraft` property to `true` on a live item will no longer unpublish it
* The item will remain live while draft updates can be made using the [staged item endpoints.](https://developers.webflow.com/data/reference/cms/collection-items/staged-items/update-items)
* **Required Action:** Update your code to use the dedicated unpublish endpoints: [Unpublish Single Item](https://developers.webflow.com/data/v2.0.0/reference/cms/collection-items/live-items/delete-item-live) or [Unpublish Multiple Items](https://developers.webflow.com/data/v2.0.0/reference/cms/collection-items/live-items/delete-items-live)

**Affected endpoints:**<br />
If you're using the following endpoints to unpublish live items, you'll need to update your code to use the dedicated unpublish endpoints instead:

* [Update Single Live Item](https://developers.webflow.com/data/v2.0.0/reference/cms/collection-items/live-items/update-item-live)
* [Update Multiple Live Items](https://developers.webflow.com/data/v2.0.0/reference/cms/collection-items/live-items/update-items-live)

### Understanding item status

<Frame>
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/fcc7ad03e62be9b5ad2afbe56004af4e7c4c6a2c859c321a134fb0efa13d8c14/products/assets/images/cms-publishing.png" alt="Item status in Webflow" />
</Frame>

In the Webflow UI, CMS items have a status field that maps to the item's `isDraft` and `lastPublished` properties. Here's how these properties determine an item's status:

| Status            | `isDraft` | `lastPublished`  | Description                                                                                                                                                      |
| ----------------- | --------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Draft             | `true`    | `null`           | Never published or previously unpublished item                                                                                                                   |
| Published         | `false`   | timestamp        | Item is live on the site                                                                                                                                         |
| Changes in draft  | `true`    | timestamp        | Published item with pending changes in the staged item                                                                                                           |
| Queued to publish | `false`   | \< `lastUpdated` | Changes will publish on next site publish. This is the default status for newly created items, as well as for updates to items that have already been published. |

**Note:** The [Unpublish Live Item](https://developers.webflow.com/data/v2.0.0/reference/cms/collection-items/live-items/delete-items-live) endpoint sets `isDraft: true` and `lastPublished: null`.

## Enhanced publishing flexibility 🎉

You can now publish CMS items with the API even when site domains are out of sync. For example, if you've published to staging but not to production. This removes the previous limitation that caused `409` errors in these scenarios. No changes needed here - instead, we expect that you'll see less errors!

Affected endpoints:

* [Publish Collection Items](https://developers.webflow.com/data/reference/cms/collection-items/staged-items/publish-item)

***

## Required actions

1. **Review Integrations**
   * Identify code using `isDraft: true` for unpublishing
   * Test with [beta APIs](https://developers.webflow.com/data/v2.0.0-beta/reference/cms/collection-items/staged-items/publish-item) in development environment

2. **Update Code**
   * Replace `isDraft` unpublishing with proper endpoints
   * Test and verify changes in your development environment

### Test changes with the Beta APIs

All functionality described above is available now through the **Beta APIs** under the `/beta` namespace. To test, replace `/v2` with `/beta` in your API calls within a testing environment to see the new behavior in action. Unfortunately, the Webflow SDK doesn't support the beta namespace at this time.

## Timeline

1. **Now - July 7, 2025**: Testing period
   * Test your integrations using the [beta API endpoints](https://developers.webflow.com/data/v2.0.0-beta/reference/cms/collection-items/staged-items/publish-item)
   * Update code to use proper [unpublish endpoints](https://developers.webflow.com/data/reference/cms/collection-items/live-items/delete-items-live)

2. **July 7, 2025**: Changes go live
   * Breaking changes take effect in v2

For questions or more information, please see our [post in the Webflow Forum](https://discourse.webflow.com/t/data-api-important-changes-to-cms-publishing/323909)

---

# Webflow MCP Server Version Update to 0.5.1

> MCP server v0.5.1 adds site inline script add/delete, CMS item deletion, and a cleaner codebase for smoother future updates.

### Feature enhancements

* **Inline script management**<br />
  Use AI agents to generate and insert (or delete) inline code snippets

* **Collection Item deletion**<br />
  Agents can now remove CMS items programmatically, completing the full CRUD through your AI coding tool.

### Improvements

* **Structural refactor**<br />
  The codebase now has a clearer folder structure, consistent naming, and easier long-term maintenance.\*\* No breaking changes.\*\*

### New tools

These updates give your AI agents deeper, safer autonomy:

| Tool                                | One-line description                                        |
| ----------------------------------- | ----------------------------------------------------------- |
| **`site_registered_scripts_list`**  | Fetch a catalog of all custom code registered for the site. |
| **`site_applied_scripts_list`**     | Retrieve the scripts currently applied to the live site.    |
| **`add_inline_site_script`**        | Inject a new inline `<script>` block into the site.         |
| **`delete_all_site_scripts`**       | Delete all scripts from the site in a single call.          |
| **`collections_items_delete_item`** | Delete a specific CMS collection item by its ID.            |

### Add 0.5.1 your AI editor

See our [MCP server documentation](/data/docs/ai-tools#webflows-official-mcp-server) for more information on how to add the MCP server to your AI editor.

```json
{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["-y", "webflow-mcp-server@0.5.1"],
      "env": {
        "WEBFLOW_TOKEN": "<YOUR_WEBFLOW_TOKEN>"
      }
    }
  }
}
```

---

# Workspace audit logs and improvements for Webflow Apps

> API Changelog: Introducing Workspace Audit Logs, Quality of Life updates, and more

<Frame>
  <img src="https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/68139e78a6573cb4a58716ee_Updates_1280x720_Audit-Log-API.jpg" alt="Workspace Audit Logs" />
</Frame>

## Introducing workspace audit logs

To enable better security and compliance monitoring, the Webflow Data API now supports workspace-level audit logs for enterprise customers. In combination with the existing [site-level audit logs](/data/reference/enterprise/site-activity/list), teams now have a complete view of user activity across their organization.

Use the [Workspace Audit Log API](/data/reference/enterprise/workspace-audit-logs/get) to track important user events, including:

* [Login activity](/data/reference/enterprise/workspace-audit-logs/event-types#user_access)
* [Custom role events](/data/reference/enterprise/workspace-audit-logs/event-types#custom_role)
* [Workspace membership events](/data/reference/enterprise/workspace-audit-logs/event-types#workspace_membership)
* [Site membership events](/data/reference/enterprise/workspace-audit-logs/event-types#site_membership)
* [Workspace invitations](/data/reference/enterprise/workspace-audit-logs/event-types#workspace_invitation)

<Warning>
  This endpoint requires authentication with a Workspace API token
</Warning>

## Localization support for additional elements

These updates enable you to localize more element types on a page. In addition to the existing support for text-based elements and component instances, you can now localize the following elements using the [Page APIs](/data/reference/pages-and-components/pages/get-content):

* Select choices on a select element
* Placeholder text on a text input element
* Button text on submit and search buttons

***

## Quality of life updates<span>Webflow Apps</span>

Additionally, Webflow Apps now supports:

1. **Inviting users to test apps**<br />
   You can now invite external users to test your apps before publishing to the marketplace by simply providing their email address and a message. This feature addresses the previous limitation where in-development apps could only be installed within the registered workspace. Contact [developers@webflow.com](mailto:developers@webflow.com) for early access.

2. **Safeguarding app settings for marketplace apps**<br />
   We've improved stability for marketplace apps by implementing safeguards against breaking changes. To protect both app developers and end users, certain critical setting changes for published apps now require re-approval through our update process. This ensures your users always have a consistent experience while giving you a controlled path to evolve your app's capabilities. In your app settings modal, you'll now see some disabled settings that require re-approval to make changes.

   These settings include:

   * Adding a new building block (Designer or Data API)
   * Changing app scopes

---

# Introducing Webflow's official MCP server and LLMS.txt support

> Discover Webflow's new MCP server and LLMS.txt support for enhanced AI-powered development workflows.

<Frame>
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/307e7d3ea1afcd433f7d946be876f1e4f1bd55a6ad1b8d320b66d69b2bd611ab/assets/images/mcp_hero.png" alt="MCP Hero Image" />
</Frame>

### Introducing Webflow's MCP server

For developers using AI-powered tools like Cursor or Claude Desktop, we provide a [Model Context Protocol (MCP) server](/data/docs/ai-tools#webflows-official-mcp-server) that enhances the agent's understanding of your Webflow projects. The MCP server has tools that enable the AI agent to access real-time information about your sites, collections, and other objects, enabling more accurate and contextual code suggestions and troubleshooting. To see a full list of tools, [see the MCP server documentation.](https://www.npmjs.com/package/webflow-mcp-server)

### LLMS.txt support

We’re excited to announce compatibility with the emerging `llms.txt` standard, making your documentation accessible and optimized for AI developer tools such as Cursor, GitHub Copilot, ChatGPT, Perplexity, and Anthropic’s Claude.

`llms.txt` is designed to be token-efficient, ensuring faster processing and cost-effective LLM interactions without sacrificing valuable info.
[Learn more](/data/docs/ai-tools#documentation-for-llms)

* Use [https://developers.webflow.com/llms.txt](https://developers.webflow.com/llms.txt) to access the LLM-readable documentation.
* Additionally, you can access markdown versions of any documentation page to provide a more structured and context-rich experience for LLMs. To access the markdown version of a page, add .md to the end of the URL.

---

# Introducing the Comments API

> Discover the latest enhancements to Webflow's APIs, including updates to the Data API and beta endpoints.

Webflow is excited to introduce a new Comments API. With these new endpoints, you can programmatically access comments across your Webflow sites, enabling integrations with your existing tools and workflows. This release makes it easier than ever to track feedback, coordinate reviews, and streamline your content management processes.

* [List all comment threads](/data/reference/comments/list-comment-threads)
* [Get comment thread](/data/reference/comments/get-comment-thread)
* [List comment replies](/data/reference/comments/list-comment-replies)
* [Create webhook](/data/reference/webhooks/create) with a new `comment_created` trigger
* [New comment thread webhook](/data/reference/webhooks/events/comment-created)

<Note title="Timing on comments">
  There may be up to a 5-minute delay before comment threads appear in the system. This delay may also occur in webhook notifications.
</Note>

### Add `.well-known` files to your site

In addition to existing support for [site configuration](/data/reference/enterprise/site-configuration/url-redirects/get), the Data API now supports setting and deleting `.well-known` files. This empowers site managers to automate and streamline the management of site metadata and security configurations, enhancing integration with modern web protocols and improving overall site interoperability. For more information, see [Wefblow's help documentation on `.well-known` files.](https://help.webflow.com/hc/en-us/articles/36293473743123-Upload-a-well-known-file)

* [Set `.well-known` file](/data/reference/enterprise/site-configuration/well-known-files/put)
* [Delete `.well-known` file](/data/reference/enterprise/site-configuration/well-known-files/delete)

---

# Support for option fields

> Discover the latest enhancements to Webflow's APIs

* **[Create Option fields](/data/reference/cms/collection-fields/create)**<br />
  Option fields let you define a predefined list of choices for a collection item. You can add these fields either when creating a new collection via the [create collection](/data/reference/cms/collections/create) endpoint or add them to existing collections using the [create collection field](/data/reference/cms/collection-fields/create) endpoint.

---

# Improved control over form submission data

> Discover the latest enhancements to Webflow's APIs

The [List form submissions by site](/data/reference/forms/form-submissions/list-submissions-by-site) endpoint now lets you retrieve form submissions across your entire site. Unlike the existing [List Form Submissions endpoint](/data/reference/forms/list-submissions), this endpoint:

* Takes `siteId` as a path parameter
* Accepts `elementId` as a query parameter to filter by `formElementId`
* Works seamlessly with forms in components, where each component instance gets a unique `formId` but shares the same `formElementId`

To use this endpoint, first get the `formElementId` from the [List Forms API](/data/reference/forms/list), then pass both the `siteId` and `formElementId` to retrieve all submissions for a specific form, even when it appears in multiple component instances.

---

# Enhancements to CMS fields and site configuration

> Discover the latest enhancements to Webflow's APIs

The Data API now supports creating reference fields and creating multiple fields during collection creation.

* **[Create reference fields](/data/reference/cms/collection-fields/create)**<br />
  To create a reference field, choose `MultiReference` or `Reference` as the `type` property in the `field` object. Additionally, include the `metadata` property to specify the `collectionId` of the collection that the reference field will point to. You can create a reference field during collection creation using the [create collection](/data/reference/cms/collections/create) endpoint or by updating an existing collection using the [create collection field](/data/reference/cms/collection-fields/create) endpoint.
* **[Create fields during collection creation](/data/reference/cms/collections/create)**<br />
  You can now create multiple fields during collection creation using the [create collection](/data/reference/cms/collections/create) endpoint. Collections are limited to 60 fields per collection.

## Add and manage `robots.txt`

* **[Configure `robots.txt`](/data/reference/enterprise/site-configuration/robots-txt/get).** <br />
  Use the following endpoints to get and update your `robots.txt` file:
  * [Get `robots.txt`](/data/reference/enterprise/site-configuration/robots-txt/get)
  * [Replace `robots.txt`](/data/reference/enterprise/site-configuration/robots-txt/put)
  * [Update `robots.txt`](/data/reference/enterprise/site-configuration/robots-txt/patch)
  * [Delete `robots.txt`](/data/reference/enterprise/site-configuration/robots-txt/delete)

---

# Tracking publishing history and deleting form submissions

> Discover the latest enhancements to Webflow's APIs

## Track publishing history

Track publishing history for a site using the `lastPublished` parameter. This parameter returns the date and time of the last published version of a site's custom domain. This parameter will appear in the response for the [get custom domains](/data/reference/sites/get-custom-domain) endpoint, as well as the [list sites](/data/reference/sites/list) and [get site](/data/reference/sites/get) endpoints.

## Delete form submissions

Delete form submissions from a site using the [delete form submission](/data/reference/forms/form-submissions/delete-submission) endpoint.

## JavaScript SDK updates

[Version 3.1.0](https://www.npmjs.com/package/webflow-api) is now available and up to date with the latest changes in the Data API v2.

---

# 301 redirects, workspace management, and CMS publishing improvements

> Update: Added new endpoints to the Data API to help you better manage components and site configuration, alongside improvements to page content handling.

The Data API now supports programmatic management of 301 redirects and workspace administration, alongside enhanced bulk CMS operations in the JavaScript SDK. These additions enable developers to automate site configuration tasks and streamline content management workflows through new endpoints and improved functionality.

<Note>
  For important breaking changes in this release, please see the [Breaking Changes](/data/changelog/121724-breaking) update.
</Note>

## New site configuration capabilities

### 301 redirect management

Take control of your site's 301 redirects with new endpoints that let you create and manage 301 redirects programmatically:

* **[List 301 redirects](/data/reference/enterprise/site-configuration/url-redirects/get)**\
  Get all configured 301 redirects for a site

* **[Create 301 redirect](/data/reference/enterprise/site-configuration/url-redirects/create)**\
  Add a new 301 redirection rule

* **[Update 301 redirect](/data/reference/enterprise/site-configuration/url-redirects/patch)**\
  Modify an existing 301 redirection rule

* **[Delete 301 redirect](/data/reference/enterprise/site-configuration/url-redirects/delete)**\
  Remove an existing 301 redirection rule

### Workspace management

Programmatically create, update, and delete sites within your workspace:

* **[Create site](/data/reference/enterprise/workspace-management/create)**\
  Create a new site in your workspace

* **[Update site](/data/reference/enterprise/workspace-management/update)**\
  Modify an existing site's properties

* **[Delete site](/data/reference/enterprise/workspace-management/delete)**\
  Remove a site from your workspace

## Improved CMS operations

### Bulk CMS management

The Data API now supports efficient methods to perform operations on multiple CMS items at once:

* **[Create multiple items](/data/reference/cms/collection-items/bulk-items/create-items)**\
  Create single or multiple CMS items in one request

* **[Update multiple items](/data/reference/cms/collection-items/bulk-items/update-items)**\
  Update multiple CMS items simultaneously

* **[Update multiple live items](/data/reference/cms/collection-items/live-items/update-item-live)**\
  Update multiple published CMS items

* **[Delete multiple items](/data/reference/cms/collection-items/bulk-items/delete-items)**\
  Unpublish/delete multiple CMS items at once

* **[Delete multiple live items](/data/reference/cms/collection-items/live-items/delete-item-live)**\
  Unpublish/delete multiple published CMS items

---

# Breaking changes in JavaScript SDK: December 17, 2024 release

> Important breaking changes in the December 17, 2024 release of the Webflow Data API and SDK that require updates to your implementation.

This document outlines the breaking changes introduced in the [December 17, 2024 release](/data/changelog/121724) of the Webflow Data API and JavaScript SDK. Review these changes carefully as they may require updates to your existing implementations.

## Breaking changes in JavaScript SDK

<Note>
  These changes require updates to existing code if you're using the JavaScript SDK. Review and update your implementation to ensure compatibility.
</Note>

### Collection management

* **Changed method name for deleting collections**

  ```typescript
  // Old
  client.collections.deleteCollection()

  // New
  client.collections.delete(collectionId)
  ```

* **New method for deleting collection fields**

  ```typescript
  client.collections.deleteField(collectionId, fieldId)
  ```

### CMS item creation

* **Changed:** `client.collections.createItems()` replaces previous methods
* **Removed:** `client.collections.createItemForMultipleLocales()`

### Pages localization

* **Changed parameter name:** The `locale` query parameter is now `localeId`

## Migration guide

### Deleting collection items

If you're using the existing collection deletion method, update your code to use the new method name:

```typescript title="Delete collection item"
// Before
await client.collections.deleteCollection(collectionId);

// After
await client.collections.delete(collectionId);
```

### Collection item creation

Replace any usage of the deprecated methods with the new unified method:

```typescript title="Create collection item"
// Before (deprecated)
await client.collections.createItemForMultipleLocales(collectionId, {
  localeIds: [primaryCmsLocaleId, secondaryCmsLocaleId],
  // other params
});

// After
await client.collections.items.createItems(collectionId, {
  cmsLocaleIds: [primaryCmsLocaleId, secondaryCmsLocaleId],
  isArchived: false,
  isDraft: false,
  fieldData: {
    // your fields here
  },
});
```

### Page localization

Update any code that queries localized pages to use the new parameter name:

```typescript title="Page localization"
// Before
const pages = await client.pages.list({ locale: "507f1f77bcf86cd799439011" });

// After
const pages = await client.pages.list({ localeId: "507f1f77bcf86cd799439011" });
```

If you encounter any issues with these changes, please [contact our support team](https://webflow.com/dashboard/support) for assistance.

## SDK improvements

* **Type improvements**
  * Removed requirement for `id` in request payloads when creating resources
  * `fieldData` type in CMS Items now allows arbitrary key/value pairs, supporting custom fields

* **Flexible CMS item creation**
  The SDK now allows creation of CMS items with custom fields without requiring type updates

---

# Bulk CMS authoring improvements and Localization updates

> Explore the latest updates to the Data API v2 and the beta version of the Data API.

## Bulk CMS authoring

The [Create Collection Items](/data/reference/cms/collection-items/staged-items/create-item) endpoint now supports bulk creation. You can create multiple CMS items in a single request by passing an array of items to the `items` property. This provides a more efficient way to create multiple items while maintaining compatibility with the existing [bulk Create Items endpoint](/data/reference/cms/collection-items/bulk-items/create-items).

## Introducing the `localeId` Parameter

Webflow is standardizing query parameter naming by introducing `localeId` as the preferred parameter name, replacing `locale`. For backward compatibility, the `locale` parameter will continue to work, but it's recommended to use `localeId` in all new implementations. This change affects the following endpoints:

* [List Pages](/data/reference/pages/list)
* [Get Page Metadata](/data/reference/pages/get-metadata)
* [Update Page Metadata](/data/reference/pages/update-page-settings)
* [Get Page Content](/data/reference/pages/get-content)
* [Update Page Content](/data/reference/pages/update-static-content)

---

# Bulk CMS item authoring and management

> Bulk CMS Items are now available in Webflow's Data API v2

## Create and manage multiple CMS items

Scale your content operations with new bulk CMS endpoints supporting up to 100 items per request. These APIs significantly improve large-scale content management workflows, and help prevent rate limiting when working with large collections.

* [Create multiple CMS items](/data/reference/cms/collection-items/bulk-items/create-items)<br />
  Create a single item or multiple items. This endpoint supports creating items across multiple locales and can update up to 100 items in a request.

* [Update multiple CMS items](/data/reference/cms/collection-items/bulk-items/update-items)<br />
  Update a single item or multiple items in a Collection. This endpoint can update up to 100 items in a request.

* [Delete multiple CMS items](/data/reference/cms/collection-items/bulk-items/delete-items)<br />
  Delete Items from a Collection. This endpoint can delete up to 100 items in a request.

## Bulk management for live CMS items

* **[Update live collection items](/data/reference/cms/collection-items/bulk-live-items/update-items-live)**\
  Update a single live item or multiple live items in a Collection. This endpoint can update up to 100 items in a request.
* **[Delete live collection items](/data/reference/cms/collection-items/bulk-live-items/delete-items-live)**\
  Remove an item or multiple items from the live site. Deleting published items will un-publish the items from the live site and set them to draft. This endpoint can delete up to 100 items in a request.

---

# Security & permissions updates for Webflow Apps

> Update: Added new endpoints to the Data API giving you more tools to access site configurations, and new methods to the Designer API, allowing you to determine a user's permissions and capabilities in the Webflow Designer.

Webflow Apps now require enhanced security and permissions.

* **Enhanced Workspace App Management Permissions:**\
  Previously, all members within a Workspace had the ability to manage Apps (for example, uploading new bundles, updating redirect URIs). Webflow enforces stricter permissions, allowing only Workspace Admins to perform these actions. This ensures that sensitive operations are restricted to authorized personnel.
* **Mandatory 2FA for Workspace Admins:**\
  To further enhance security, Workspace Admins are now required to have two-factor authentication (2FA) enabled to upload new App Bundles. This additional security layer helps protect your Workspace from unauthorized access and potential threats.

### SDK version

* **[Version 2.3.6](https://www.npmjs.com/package/webflow-api/v/2.3.6?activeTab=versions)**

---

# CMS item filtering and sorting

> Update: Optimize data retrieval with server-side CMS item filtering and sorting, manipulate assets and interact with native image elements within the Webflow Designer, and identify page types with new methods.

The Webflow Data API now supports server-side filtering and sorting capabilities for CMS items, along with enhanced page metadata information. These updates help you optimize data retrieval, improve performance, and gain access to additional page details.

## Enhanced CMS item management

The CMS endpoints [List CMS items](/data/reference/cms/collection-items/items/list-items) and [List live CMS items](/data/reference/cms/collection-items/live-items/list-items-live) now feature filtering and sorting capabilities to help you optimize data retrieval and build more efficient applications.

### Server-side filtering options

You can now filter CMS items with these new parameters:

* **Name and slug exact matching**\
  Use `name` and `slug` query parameters for precise filtering
  ```
  GET /collections/{collection_id}/items?name=Featured+Article
  GET /collections/{collection_id}/items?slug=featured-article
  ```

* **Publication date ranges**\
  Filter by `lastPublished` date ranges to find recently updated content
  ```
  GET /collections/{collection_id}/items?lastPublished[gt]=2024-05-01T00:00:00Z
  GET /collections/{collection_id}/items?lastPublished[lt]=2024-06-18T00:00:00Z
  ```

* **Combined filters**\
  Combine multiple filters for precise data retrieval
  ```
  GET /collections/{collection_id}/items?slug=featured-article&lastPublished[gt]=2024-05-01T00:00:00Z
  ```

### Server-side sorting

Sort your CMS items directly on the server to minimize data processing in your application:

* **Sort by publication date**\
  Sort by `lastPublished` in ascending or descending order
  ```
  GET /collections/{collection_id}/items?sortBy=lastPublished&sortOrder=asc
  GET /collections/{collection_id}/items?sortBy=lastPublished&sortOrder=desc
  ```

* **Sort by name or slug**\
  Sort alphabetically by item name or slug
  ```
  GET /collections/{collection_id}/items?sortBy=name&sortOrder=asc
  GET /collections/{collection_id}/items?sortBy=slug&sortOrder=asc
  ```

<Note>
  Server-side filtering and sorting significantly reduce the amount of data transferred and processed by your application, improving performance and reducing API usage.
</Note>

## Enhanced page metadata

The [Get page metadata](/data/reference/pages/get-metadata) endpoint now includes additional information that's valuable for multi-language sites and SEO optimization.

### New metadata fields

* **`localeId`**\
  Identify the language/locale of a specific page

* **`publishedPath`**\
  Access the published URL path for the page

---

# Live CMS item management

> Update: Added endpoints for managing CMS items that are live on a site, providing more precise control over published content.

The Data API now supports new endpoints dedicated to managing live CMS items. The new live CMS endpoints create a clear separation between staged content (drafts) and published content (live), allowing you to:

* Access only published content without retrieving draft items
* Make direct changes to published content
* Create content that bypasses the draft/staging workflow
* Manage the live database independently of the editing environment

### New endpoints

* **[Get live CMS item](/data/reference/cms/collection-items/live-items/get-item-live)**\
  Retrieve a specific item from the live database.

* **[List live CMS items](/data/reference/cms/collection-items/live-items/list-items-live)**\
  Retrieve all published items from a collection.

* **[Create live CMS item](/data/reference/cms/collection-items/live-items/create-item-live)**\
  Add a new item directly to the live database, bypassing the staging workflow.

* **[Update live CMS item](/data/reference/cms/collection-items/live-items/update-item-live)**\
  Modify an existing item in the live database without affecting its staged version.

* **[Delete live CMS item](/data/reference/cms/collection-items/live-items/delete-item-live)**\
  Remove an item from the live database.

<Note>
  Changes made through these live endpoints affect only what visitors see on your published site. They don't affect staged content in the Webflow Designer, which requires separate API calls to the non-live endpoints.
</Note>

---

# Localization support, site activity logs and content management improvements

> Added support for localization and site activity logs in the Data API.

Webflow's Data API now supports [localization features](https://university.webflow.com/lesson/localization-overview?topics=localization), allowing you to create, manage, and retrieve content in multiple languages through the API. This enables you to build multilingual applications and automation workflows.

### Key localization features

* **Site locale information**\
  Get detailed information about all available site locales, including primary and secondary languages

* **Locale-specific page content**\
  Retrieve and update page content for specific language variants

* **Localized CMS content**\
  Access and modify CMS items across multiple language versions

### Updated endpoints with localization support

#### Site endpoints

The following endpoints now include `locale` information with primary and secondary locale settings:

* **[Get sites list](/data/reference/sites/list)** and **[Get site details](/data/reference/sites/get)**

  ```json title="Response example"
  {
    "locale": {
      "primary": {
        "id": "en-US",
        "cmsLocaleId": "uuid-for-primary-locale",
        "displayName": "English (United States)",
        "enabled": true,
        "subdirectory": ""
      },
      "secondary": [
        {
          "id": "es",
          "cmsLocaleId": "uuid-for-secondary-locale",
          "displayName": "Spanish",
          "enabled": true,
          "subdirectory": "/es"
        }
      ]
    }
  }
  ```

#### Page endpoints

These endpoints now support the `locale` query parameter to work with language-specific pages:

* **[Get page metadata](/data/reference/pages/get-metadata)** and **[List site pages](/data/reference/pages/list)**

#### CMS item endpoints

These endpoints now support the `cmsLocaleIds` parameter to filter and manage content by language:

* **[List CMS items](/data/reference/cms/collection-items/staged-items/list-items)**
* **[Get CMS item](/data/reference/cms/collection-items/staged-items/get-item)**
* **[Update CMS item](/data/reference/cms/collection-items/staged-items/update-item)**

<Note>
  CMS locale IDs (`cmsLocaleId`) are different from site locale identifiers. You can find the `cmsLocaleId` for each language in the Sites response.
</Note>

## Site activity logs

Monitor site activity with the [Get site activity logs](/data/reference/enterprise/site-activity/list) endpoint.

* **[Get site activity logs](/data/reference/enterprise/site-activity/list)**\
  Track changes made to your site by team members

## Page content management

New endpoints for more granular control over page content and metadata:

* **[Get](/data/reference/pages/get-content) and [Update](/data/reference/pages/update-static-content) page content**\
  Work with the DOM structure of pages

* **[Update page metadata](/data/reference/pages/update-page-settings)**\
  Modify page settings

## Asset management

* **[Update asset](/data/reference/assets/assets/update)**\
  Modify asset properties

---

# API v2: Changed endpoints

> Update: Comprehensive reference of all endpoint changes in the Webflow Data API v2.

As part of the [Webflow Developer Platform updates](https://webflow.com/updates/developer-platform-updates) launched on August 29th, 2023, Webflow released version 2 of the Data API with significant improvements and standardizations. This document provides a comprehensive reference of all endpoint changes between API v1 and v2.

<Note>
  This document is for developers who are migrating from API v1 to v2. For new API v2 implementations, please refer to the [API reference](/data/reference).
</Note>

## Token endpoints

* **[Authorization User Info](/data/reference/token/authorized-by)** <br />
  Replaces the `/user` endpoint from v1. Use the `/token/authorized_by` endpoint instead.
* **[Authorization Info](/data/reference/token/introspect)** <br />
  Replaces the `/info` endpoint from v1. Use the `/token/introspect` endpoint instead.

## Sites endpoints

* **[List Sites](/data/reference/sites/list)** | `GET` `/sites` <br />
  * New properties for the response:

    | Change  | Property                | Description                           |
    | ------- | ----------------------- | ------------------------------------- |
    | Added   | `sites` (object)        | Array of site objects                 |
    | Renamed | `_id` → `id`            | Unique identifier for the Site        |
    | Added   | `workspaceId`           | Unique identifier for the Workspace   |
    | Renamed | `name` → `displayName`  | Name given to Site                    |
    | Added   | `lastUpdated`           | Date the Site was last updated        |
    | Renamed | `timezone` → `timeZone` | Site timezone set under Site Settings |
    | Deleted | `database`              | Database property removed             |

* **[Get Site](/data/reference/sites/get)** | `GET` `/sites/{site_id}` <br />
  * New properties for the response:

    | Change  | Property                | Description                           |
    | ------- | ----------------------- | ------------------------------------- |
    | Renamed | `_id` → `id`            | Unique identifier for the Site        |
    | Added   | `workspaceId`           | Unique identifier for the Workspace   |
    | Renamed | `name` → `displayName`  | Name given to Site                    |
    | Added   | `lastUpdated`           | Date the Site was last updated        |
    | Renamed | `timezone` → `timeZone` | Site timezone set under Site Settings |
    | Added   | `customDomains`         | Custom domains array                  |
    | Deleted | `database`              | Database property removed             |

* **[Publish Site](/data/reference/sites/publish)** | `POST` `/sites/{site_id}/publish` <br />
  * New properties for the request:

    | Change  | Property                    | Description                                                   |
    | ------- | --------------------------- | ------------------------------------------------------------- |
    | Renamed | `domains` → `customDomains` | Array of Custom Domain ids to publish                         |
    | Added   | `publishToWebflowSubdomain` | Choice of whether to publish to the default Webflow Subdomain |

## CMS endpoints

* **[List Collections](/data/reference/cms/collections/list)** | `GET` `/sites/{site_id}/collections` <br />
  * New properties for the response:

    | Change  | Property      | Description                        |
    | ------- | ------------- | ---------------------------------- |
    | Added   | `collections` | An array of Collections            |
    | Renamed | `_id` → `id`  | Unique identifier for a Collection |

* **[Get Collection](/data/reference/cms/collections/list)** | `GET` `/collections/{collection_id}` <br />
  * New properties for the response:

    | Change  | Property                                | Description                          |
    | ------- | --------------------------------------- | ------------------------------------ |
    | Renamed | `_id` → `id`                            | Unique identifier for a Collection   |
    | Renamed | `name` → `displayName`                  | Name given to the Collection         |
    | Changed | `fields`                                | The list of fields in the Collection |
    | Renamed | `fields._id` → `fields.id`              | Unique identifier for a field        |
    | Renamed | `fields.editable` → `fields.isEditable` | Flag to denote a field as editable   |
    | Renamed | `fields.required` → `fields.isRequired` | Flag to denote a field as required   |
    | Renamed | `fields.name` → `fields.displayName`    | Name given to the field              |
    | Added   | `fields.helpText`                       | Help text for the field              |

* **[List CMS Items](/data/reference/cms/collection-items/staged-items/list-items)** | `GET` `/collections/{collection_id}/items` <br />
  * New properties for the response:

    | Change  | Property                         | Description                                           |
    | ------- | -------------------------------- | ----------------------------------------------------- |
    | Renamed | `_id` → `id`                     | Unique identifier for the Item                        |
    | Renamed | `_archived` → `isArchived`       | Boolean determining if the Item is set to archived    |
    | Renamed | `_draft` → `isDraft`             | Boolean determining if the Item is set to draft       |
    | Renamed | `created-on` → `CreatedOn`       | The date the item was created                         |
    | Renamed | `updated-on` → `lastUpdated`     | The date the item was last updated                    |
    | Renamed | `published-on` → `lastPublished` | The date the item was last published                  |
    | Added   | `pagination`                     | Pagination object containing limit, offset, and total |
    | Deleted | `count`                          | Number of items returned                              |

* **[Create CMS Item](/data/reference/cms/collection-items/staged-items/create-item)** | `POST` `/collections/{collection_id}/items` <br />

  * Deleted query parameters for the request:

    | Change  | Query parameter | Description                                                                           |
    | ------- | --------------- | ------------------------------------------------------------------------------------- |
    | Deleted | `live`          | Boolean indicating if the items should be published/unpublished to/from the live site |

  * New properties for the request:

    | Change  | Property         | Description                                        |
    | ------- | ---------------- | -------------------------------------------------- |
    | Added   | `isArchived`     | Boolean determining if the Item is set to archived |
    | Added   | `isDraft`        | Boolean determining if the Item is set to draft    |
    | Added   | `fieldData`      | Object containing item fields                      |
    | Added   | `fieldData.name` | Name of the Item                                   |
    | Added   | `fieldData.slug` | URL structure of the Item in your site             |
    | Deleted | `fields`         | The fields for the new item                        |

  * New properties for the response:

    | Change  | Property                         | Description                                        |
    | ------- | -------------------------------- | -------------------------------------------------- |
    | Renamed | `_id` → `id`                     | Unique identifier for the Item                     |
    | Renamed | `_archived` → `isArchived`       | Boolean determining if the Item is set to archived |
    | Renamed | `_draft` → `isDraft`             | Boolean determining if the Item is set to draft    |
    | Renamed | `created-on` → `CreatedOn`       | The date the item was created                      |
    | Renamed | `updated-on` → `lastUpdated`     | The date the item was last updated                 |
    | Renamed | `published-on` → `lastPublished` | The date the item was last published               |
    | Added   | `fieldData`                      | Object containing item field data                  |
    | Deleted | `name`                           | Name given to the Item                             |
    | Deleted | `slug`                           | URL structure of the Item in your site             |

* **[Get CMS Item](/data/reference/cms/collection-items/staged-items/get-item)** | `GET` `/collections/{collection_id}/items/{item_id}` <br />
  * New properties for the response:

    | Change  | Property                         | Description                                        |
    | ------- | -------------------------------- | -------------------------------------------------- |
    | Renamed | `_id` → `id`                     | Unique identifier for the Item                     |
    | Renamed | `_archived` → `isArchived`       | Boolean determining if the Item is set to archived |
    | Renamed | `_draft` → `isDraft`             | Boolean determining if the Item is set to draft    |
    | Renamed | `created-on` → `CreatedOn`       | The date the item was created                      |
    | Renamed | `updated-on` → `lastUpdated`     | The date the item was last updated                 |
    | Renamed | `published-on` → `lastPublished` | The date the item was last published               |
    | Added   | `fieldData`                      | Object containing item field data                  |
    | Deleted | `items`                          | List of Items within the collection                |
    | Deleted | `count`                          | Number of items returned                           |
    | Deleted | `limit`                          | The limit specified in the request                 |
    | Deleted | `offset`                         | The offset specified for pagination                |
    | Deleted | `total`                          | Total number of items in the collection            |

* **[Delete CMS Item](/data/reference/cms/collection-items/staged-items/delete-item)** | `DELETE` `/collections/{collection_id}/items/{item_id}` <br />

  * Deleted query parameter for the request:

    | Change  | Query parameter | Description                                                                           |
    | ------- | --------------- | ------------------------------------------------------------------------------------- |
    | Deleted | `live`          | Boolean indicating if the items should be published/unpublished to/from the live site |

* **[Update CMS Item](/data/reference/cms/collection-items/staged-items/update-item)**
  `PATCH` `/collections/{collection_id}/items/{item_id}`

  * Deleted query parameter for the request:

    | Change  | Query parameter | Description                                                                           |
    | ------- | --------------- | ------------------------------------------------------------------------------------- |
    | Deleted | `live`          | Boolean indicating if the items should be published/unpublished to/from the live site |

  * New properties for the request:

    | Change  | Property     | Description                                        |
    | ------- | ------------ | -------------------------------------------------- |
    | Added   | `isArchived` | Boolean determining if the Item is set to archived |
    | Added   | `isDraft`    | Boolean determining if the Item is set to draft    |
    | Added   | `fieldData`  | Object containing item fields                      |
    | Deleted | `fields`     | Fields in your collection item                     |

  * New properties for the response:

    | Change  | Property                         | Description                                                  |
    | ------- | -------------------------------- | ------------------------------------------------------------ |
    | Renamed | `_id` → `id`                     | Unique identifier for the Item                               |
    | Renamed | `_archived` → `isArchived`       | Boolean determining if the Item is set to archived           |
    | Renamed | `_draft` → `isDraft`             | Boolean determining if the Item is set to draft              |
    | Renamed | `created-on` → `CreatedOn`       | The date the item was created                                |
    | Renamed | `updated-on` → `lastUpdated`     | The date the item was last updated                           |
    | Renamed | `published-on` → `lastPublished` | The date the item was last published                         |
    | Added   | `fieldData`                      | Object containing item field data                            |
    | Deleted | `_cid`                           | Unique identifier for the Collection the Item belongs within |
    | Deleted | `name`                           | Name given to the Item                                       |
    | Deleted | `slug`                           | URL structure of the Item in your site                       |

## User accounts endpoints

* **[List Users](/data/reference/users/users/list)** | `GET` `/sites/{site_id}/users` <br />
  This endpoint replaces the `/sites/{site_id}/accessgroups` endpoint.

  * New properties for the response:

    | Change  | Property                            | Description                                             |
    | ------- | ----------------------------------- | ------------------------------------------------------- |
    | Renamed | `_id` → `id`                        | Unique identifier for the User                          |
    | Renamed | `updatedOn` → `lastUpdated`         | The date the item was last updated                      |
    | Renamed | `emailVerified` → `isEmailVerified` | Shows whether the user has verified their email address |
    | Added   | `accessGroups`                      | User access groups                                      |

* **[Get User](/data/reference/users/users/get)** | `GET` `/sites/{site_id}/users/{user_id}` <br />
  * New properties for the response:

    | Change  | Property                            | Description                                             |
    | ------- | ----------------------------------- | ------------------------------------------------------- |
    | Renamed | `_id` → `id`                        | Unique identifier for the User                          |
    | Renamed | `updatedOn` → `lastUpdated`         | The date the item was last updated                      |
    | Renamed | `emailVerified` → `isEmailVerified` | Shows whether the user has verified their email address |

* **[Update User](/data/reference/users/users/update)** | `PATCH` `/sites/{site_id}/users/{user_id}` <br />
  * New properties for the request:

    | Change | Property                     | Description                                                           |
    | ------ | ---------------------------- | --------------------------------------------------------------------- |
    | Added  | `data`                       | User data object                                                      |
    | Added  | `data.name`                  | The name of the user                                                  |
    | Added  | `data.accept-privacy`        | Boolean indicating if the user has accepted the privacy policy        |
    | Added  | `data.accept-communications` | Boolean indicating if the user has accepted to receive communications |
    | Added  | `accessGroups`               | An array of access group slugs                                        |

  * New properties for the response:

    | Change  | Property                            | Description                                             |
    | ------- | ----------------------------------- | ------------------------------------------------------- |
    | Renamed | `_id` → `id`                        | Unique identifier for the User                          |
    | Renamed | `updatedOn` → `lastUpdated`         | The date the item was last updated                      |
    | Renamed | `emailVerified` → `isEmailVerified` | Shows whether the user has verified their email address |

* **[Invite User](/data/reference/users/users/invite)** | `POST` `/sites/{site_id}/users/invite` <br />
  * New properties for the response:

    | Change  | Property                            | Description                                             |
    | ------- | ----------------------------------- | ------------------------------------------------------- |
    | Renamed | `_id` → `id`                        | Unique identifier for the User                          |
    | Renamed | `updatedOn` → `lastUpdated`         | The date the item was last updated                      |
    | Renamed | `emailVerified` → `isEmailVerified` | Shows whether the user has verified their email address |

* **[List Products](/data/reference/ecommerce/products/list)** | `GET` `/sites/{site_id}/products` <br />
  * New properties for the response:

    | Change  | Property                 | Description                                        |
    | ------- | ------------------------ | -------------------------------------------------- |
    | Added   | `pagination`             | Pagination object to replace pagination properties |
    | Added   | `pagination.limit`       | The limit used for pagination                      |
    | Added   | `pagination.offset`      | The offset used for pagination                     |
    | Added   | `pagination.total`       | The total number of records                        |
    | Deleted | `count`                  | Number of items returned                           |
    | Changed | `items`                  | List of Item objects within the Collection         |
    | Renamed | `items._id` → `items.id` | Unique identifier for the Product                  |
    | Added   | `items.lastPublished`    | The date the Product was last published            |

## Ecommerce endpoints

### Products

* **[Create Product](/data/reference/ecommerce/products/create)** | `POST` `/sites/{site_id}/products` <br />
  * New properties for the request:

    | Change           | Property                           | Description                                           |
    | ---------------- | ---------------------------------- | ----------------------------------------------------- |
    | Added (Required) | `product`                          | The Product object                                    |
    | Added (Required) | `sku`                              | The SKU object                                        |
    | Added            | `publishStatus`                    | Publish target (enum: `staging`, `live`)              |
    | Changed          | `product`                          | Modified Product object structure                     |
    | Renamed          | `product._id` → `product.id`       | Unique identifier for the Product                     |
    | Added            | `product.isArchived`               | Boolean determining if the Product is set to archived |
    | Added            | `product.isDraft`                  | Boolean determining if the Product is set to draft    |
    | Added            | `product.fieldData`                | Container for product fields                          |
    | Added            | `product.fieldData.name`           | Name of the Product                                   |
    | Added            | `product.fieldData.slug`           | URL structure of the Product in your site             |
    | Added            | `product.fieldData.sku-properties` | Variant/Options types to include in SKUs              |
    | Deleted          | `product.fields`                   | Fields in your product object                         |
    | Changed          | `sku`                              | Modified SKU object structure                         |
    | Added (Optional) | `sku._id`                          | SKU identifier                                        |
    | Added (Optional) | `sku.fields`                       | SKU fields                                            |
    | Added (Optional) | `sku.name`                         | SKU name                                              |
    | Added (Optional) | `sku.slug`                         | SKU slug                                              |
    | Added            | `sku.fieldData`                    | Container for SKU fields                              |
    | Added            | `sku.fieldData.name`               | Name of the Product                                   |
    | Added            | `sku.fieldData.slug`               | URL structure of the Product in your site             |
    | Added            | `sku.fieldData.price`              | Price information                                     |
    | Added            | `sku.fieldData.price.value`        | Price of SKU                                          |
    | Added            | `sku.fieldData.price.unit`         | Currency of Item                                      |
    | Added            | `sku.fieldData.sku-values`         | Dictionary mapping SKU properties to values           |
    | Deleted          | `sku.fields`                       | Fields in your SKU object                             |

  * New properties for the response:

    | Change  | Property                                         | Description                                                                                      |
    | ------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
    | Renamed | `sku` → `skus`                                   | The SKU object                                                                                   |
    | Changed | `product`                                        | The Product object                                                                               |
    | Renamed | `product._id` → `product.id`                     | Unique identifier for the Product                                                                |
    | Renamed | `product._archived` → `product.isArchived`       | Boolean determining if the Item is set to archived                                               |
    | Renamed | `product._draft` → `product.isDraft`             | Boolean determining if the Item is set to draft                                                  |
    | Renamed | `product.created-on` → `product.CreatedOn`       | The date the item was created                                                                    |
    | Renamed | `product.updated-on` → `product.lastUpdated`     | The date the item was last updated                                                               |
    | Renamed | `product.published-on` → `product.lastPublished` | The date the item was last published                                                             |
    | Renamed | `product.fields` → `product.fieldData`           | Fields in your product object                                                                    |
    | Deleted | `product.slug`                                   | Slug of Collection in Site URL structure                                                         |
    | Deleted | `product.singularName`                           | The name of one Item in Collection (for example "product" if the Collection is called "Product") |

* **[Get Product](/data/reference/ecommerce/products/get)** | `GET` `/sites/{site_id}/products/{product_id}` <br />
  * New properties for the response:

    | Change  | Property                                         | Description                                        |
    | ------- | ------------------------------------------------ | -------------------------------------------------- |
    | Added   | `product`                                        | The Product object                                 |
    | Renamed | `product._id` → `product.id`                     | Unique identifier for the Product                  |
    | Renamed | `product._archived` → `product.isArchived`       | Boolean determining if the Item is set to archived |
    | Renamed | `product._draft` → `product.isDraft`             | Boolean determining if the Item is set to draft    |
    | Renamed | `product.created-on` → `product.CreatedOn`       | The date the item was created                      |
    | Renamed | `product.updated-on` → `product.lastUpdated`     | The date the item was last updated                 |
    | Renamed | `product.published-on` → `product.lastPublished` | The date the item was last published               |
    | Moved   | `sku-properties`                                 | Now a child object of `fieldData`                  |
    | Added   | `skus`                                           | SKUs array                                         |
    | Deleted | `items`                                          | List of SKUs for a Product                         |
    | Deleted | `count`                                          | Number of items returned                           |
    | Deleted | `limit`                                          | The limit specified in the request                 |
    | Deleted | `offset`                                         | The offset specified for pagination                |
    | Deleted | `total`                                          | Total number of items in the collection            |

* **[Update Product](/data/reference/ecommerce/products/update)** | `PATCH` `/sites/{site_id}/products/{product_id}` <br />
  * New properties for the request:

    | Change  | Property        | Description                    |
    | ------- | --------------- | ------------------------------ |
    | Added   | `product`       | The Product object             |
    | Added   | `publishStatus` | Publish target                 |
    | Added   | `product`       | The Product object             |
    | Deleted | `fields`        | Fields in your collection item |

  * New properties for the response:

    | Change  | Property                         | Description                                                                                      |
    | ------- | -------------------------------- | ------------------------------------------------------------------------------------------------ |
    | Added   | `fieldData`                      | Field data object                                                                                |
    | Renamed | `_id` → `id`                     | Unique identifier for the Product                                                                |
    | Renamed | `_archived` → `isArchived`       | Boolean determining if the Item is set to archived                                               |
    | Renamed | `_draft` → `isDraft`             | Boolean determining if the Item is set to draft                                                  |
    | Renamed | `published-on` → `lastPublished` | The date the item was last published                                                             |
    | Deleted | `name`                           | Name given to Collection                                                                         |
    | Deleted | `slug`                           | Slug of Collection in Site URL structure                                                         |
    | Deleted | `singularName`                   | The name of one Item in Collection (for example "product" if the Collection is called "Product") |
    | Deleted | `fields`                         | Fields in your product object                                                                    |

### Orders

* **[List Orders](/data/reference/ecommerce/orders/list)** | `GET` `/sites/{site_id}/orders` <br />
  New properties for the response:

  | Change | Property     | Description       |
  | ------ | ------------ | ----------------- |
  | Added  | `items`      | List of orders    |
  | Added  | `pagination` | Pagination object |

* **[Get Order](/data/reference/ecommerce/orders/get)** | `GET` `/sites/{site_id}/orders/{order_id}` <br />
  Replaces the `/sites/{site_id}/orders/{order_id}` endpoint.

* **[Update Order](/data/reference/ecommerce/orders/update)** | `PATCH` `/sites/{site_id}/orders/{order_id}` <br />\
  Replaces the `/sites/{site_id}/orders/{order_id}` endpoint.

* **[Get Custom Domains](/data/reference/sites/get-custom-domain)** | `GET` `/sites/{site_id}/custom_domains` <br />
  Replaces the `/sites/{site_id}/custom_domains` endpoint.

* **[Fulfill Order](/data/reference/ecommerce/orders/update-fulfill)** | `POST` `/sites/{site_id}/orders/{order_id}/fulfill` <br />
  Replaces the `/sites/{site_id}/orders/{order_id}/fulfill` endpoint.

* **[Unfulfill Order](/data/reference/ecommerce/orders/update-unfulfill)** | `POST` `/sites/{site_id}/orders/{order_id}/unfulfill` <br />
  Replaces the `/sites/{site_id}/orders/{order_id}/unfulfill` endpoint.

* **[Refund Order](/data/reference/ecommerce/orders/refund)** | `POST` `/sites/{site_id}/orders/{order_id}/refund` <br />
  Replaces the `/sites/{site_id}/orders/{order_id}/refund` endpoint.

### Inventory

* **[Get Inventory](/data/reference/ecommerce/inventory/list)** | `GET` `/collections/{collection_id}/items/{item_id}/inventory` <br />
  Replaces the `/collections/{collection_id}/items/{item_id}/inventory` endpoint.

  New properties for the response:

  | Change  | Property     | Description                       |
  | ------- | ------------ | --------------------------------- |
  | Renamed | `_id` → `id` | Unique identifier for the Product |

* **[Update Inventory](/data/reference/ecommerce/inventory/update)** | `PATCH` `/collections/{collection_id}/items/{item_id}/inventory` <br />
  Replaces the `/collections/{collection_id}/items/{item_id}/inventory` endpoint.

* **[Update Inventory](/data/reference/ecommerce/inventory/update)**
  `PATCH` `/collections/{collection_id}/items/{item_id}/inventory`

  New properties for the request:

  | Change  | Property         | Description                              |
  | ------- | ---------------- | ---------------------------------------- |
  | Added   | `inventoryType`  | Type of inventory `finite` or `infinite` |
  | Added   | `updateQuantity` | Quantity to update                       |
  | Added   | `quantity`       | Quantity to set                          |
  | Deleted | `fields`         | Fields in your inventory object          |

  New properties for the response:

  | Change  | Property     | Description                       |
  | ------- | ------------ | --------------------------------- |
  | Renamed | `_id` → `id` | Unique identifier for the Product |

### Ecommerce Settings

* **[Get Ecommerce Settings](/data/reference/ecommerce/settings/get-settings)** | `GET` `/sites/{site_id}/ecommerce/settings` <br />
  Replaces the `/sites/{site_id}/ecommerce/settings` endpoint.

  New properties for the response:

  | Change  | Property          | Description                |
  | ------- | ----------------- | -------------------------- |
  | Renamed | `site` → `siteId` | The identifier of the Site |

## Webhooks

* **[Get Webhook](/data/reference/webhooks/get)** | `GET` `/webhooks/{webhook_id}` <br />
  Replaces the `/webhooks/{webhook_id}` endpoint.

  New properties for the response:

  | Change  | Property                     | Description                                  |
  | ------- | ---------------------------- | -------------------------------------------- |
  | Renamed | `_id` → `id`                 | The identifier of the Webhook                |
  | Renamed | `site` → `siteId`            | The identifier of the Site                   |
  | Added   | `workspaceId`                | Identifier of the workspace                  |
  | Deleted | `triggerId`                  | Trigger ID property removed                  |
  | Renamed | `lastUsed` → `lastTriggered` | Date the Webhook instance was last triggered |
  | Added   | `url`                        | URL to send the Webhook payload to           |

* **[List Webhooks](/data/reference/webhooks/list)** | `GET` `/sites/{site_id}/webhooks` <br />
  Replaces the `/sites/{site_id}/webhooks` endpoint.

  New properties for the response:

  | Change  | Property                                       | Description                                  |
  | ------- | ---------------------------------------------- | -------------------------------------------- |
  | Added   | `webhooks`                                     | All webhooks are in an array in this object  |
  | Renamed | `webhooks._id` → `webhooks.id`                 | The identifier of the Webhook                |
  | Renamed | `webhooks.site` → `webhooks.siteId`            | The identifier of the Site                   |
  | Added   | `webhooks.workspaceId`                         | Identifier of the workspace                  |
  | Deleted | `webhooks.triggerId`                           | Trigger ID property removed                  |
  | Renamed | `webhooks.lastUsed` → `webhooks.lastTriggered` | Date the Webhook instance was last triggered |
  | Added   | `webhooks.url`                                 | URL to send the Webhook payload to           |

* **[Create Webhook](/data/reference/webhooks/create)** | `POST` `/sites/{site_id}/webhooks` <br />
  Replaces the `/sites/{site_id}/webhooks` endpoint.

  * New properties for the request:

    | Change | Property      | Description                                                                                                             |
    | ------ | ------------- | ----------------------------------------------------------------------------------------------------------------------- |
    | Added  | `triggerType` | Type of webhook trigger                                                                                                 |
    | Added  | `filter`      | Filter for selecting which events you want Webhooks to be sent for. Only available for `form_submission` trigger types. |

    List of `triggerType` values for [Webhook events](/data/reference/all-events):

    * `form_submission` - Form submission events
    * `site_publish` - Site publish events
    * `page_created` - Page creation events
    * `page_metadata_updated` - Page metadata update events
    * `page_deleted` - Page deletion events
    * `ecomm_new_order` - New order events
    * `ecomm_order_changed` - Order changed events
    * `ecomm_inventory_changed` - Inventory changed events
    * `user_account_added` - User account added events
    * `user_account_updated` - User account updated events
    * `user_account_deleted` - User account deleted events

    New trigger types:

    * `collection_item_created` - CMS item creation events
    * `collection_item_changed` - CMS item update events
    * `collection_item_deleted` - CMS item deletion events
    * `collection_item_unpublished` - CMS item unpublish events

    Changed trigger types:

    * `memberships_user_account_added` → `user_account_added`
    * `memberships_user_account_updated` → `user_account_updated`
    * `memberships_user_account_deleted` → `user_account_deleted`

  * New properties for the response:

    | Change  | Property                     | Description                                                        |
    | ------- | ---------------------------- | ------------------------------------------------------------------ |
    | Renamed | `_id` → `id`                 | The identifier of the Webhook                                      |
    | Renamed | `site` → `siteId`            | The identifier of the Site                                         |
    | Added   | `workspaceId`                | Identifier of the workspace                                        |
    | Deleted | `triggerId`                  | Trigger ID property removed                                        |
    | Renamed | `lastUsed` → `lastTriggered` | Date the Webhook instance was last triggered                       |
    | Added   | `url`                        | URL to send the Webhook payload to                                 |
    | Added   | `filter`                     | Filter for selecting which events you want Webhooks to be sent for |

* **[Delete Webhook](/data/reference/webhooks/delete)** | `DELETE` `/webhooks/{webhook_id}` <br />
  Replaces the `/webhooks/{webhook_id}` endpoint.

---

# API v2: New endpoints

> Update: New endpoints added to the Webflow Data API v2.

As part of the [Webflow Developer Platform updates](https://webflow.com/updates/developer-platform-updates) launched on August 29th, 2023, Webflow released version 2 of the Data API with new endpoints. Here's what's new:

## CMS endpoints

* **[Create Collection Field](/data/reference/cms/collection-fields/create)** | `POST` `/collections/{collection_id}/fields` <br />
  Create a new field in an existing collection.

* **[Delete Collection Field](/data/reference/cms/collection-fields/delete)** | `DELETE` `/collections/{collection_id}/fields/{field_id}` <br />
  Remove a field from a collection.

* **[Update Collection Field](/data/reference/cms/collection-fields/update)** | `PATCH` `/collections/{collection_id}/fields/{field_id}` <br />
  Modify an existing field in a collection.

* **[Create Collection](/data/reference/cms/collections/create)** | `POST` `/sites/{site_id}/collections` <br />
  Create a new collection for a site.

## Pages endpoints

* **[List Pages](/data/reference/pages-and-components/pages/list)** | `GET` `/sites/{site_id}/pages` <br />
  Get a list of all pages for a site.

* **[Get Page Metadata](/data/reference/pages-and-components/pages/get-metadata)** | `GET` `/pages/{page_id}` <br />
  Retrieve metadata for a specific page.

## Custom Code endpoints

* **[Get Registered Scripts](/data/reference/custom-code/custom-code/list)** | `GET` `/sites/{site_id}/registered_scripts` <br />
  List all registered scripts for a site.

* **[Register Inline Custom Code](/data/reference/custom-code/custom-code/register-inline)** | `POST` `/sites/{site_id}/registered_scripts/inline` <br />
  Register new inline custom code to a site.

* **[Register Hosted Custom Code](/data/reference/custom-code/custom-code/register-hosted)** | `POST` `/sites/{site_id}/registered_scripts/hosted` <br />
  Register externally hosted custom code to a site.

* **[Add Custom Code to Site](/data/reference/custom-code/custom-code-sites/upsert-custom-code)** | `PUT` `/sites/{site_id}/custom_code` <br />
  Add custom code to an entire site.

* **[Add Custom Code to Page](/data/reference/custom-code/custom-code-pages/upsert-custom-code)** | `PUT` `/pages/{page_id}/custom_code` <br />
  Add custom code to a specific page.

## Assets endpoints

* **[List Assets](/data/reference/assets/assets/list)** | `GET` `/sites/{site_id}/assets` <br />
  Get a list of all assets for a site.

* **[Create Asset Metadata](/data/reference/assets/assets/create)** | `POST` `/sites/{site_id}/assets` <br />
  Create metadata for a new asset.

* **[Delete Asset](/data/reference/assets/assets/delete)** | `DELETE` `/assets/{asset_id}` <br />
  Remove an asset from a site.

* **[List Asset Folders](/data/reference/assets/asset-folders/list-folders)** | `GET` `/sites/{site_id}/asset_folders` <br />
  Get a list of all asset folders for a site.

* **[Create Asset Folder](/data/reference/assets/asset-folders/create-folder)** | `POST` `/sites/{site_id}/asset_folders` <br />
  Create a new asset folder for a site.

* **[Get Asset Folder](/data/reference/assets/asset-folders/get-folder)** | `GET` `/asset_folders/{asset_folder_id}` <br />
  Retrieve information about a specific asset folder.

## Forms endpoints

* **[List Forms](/data/reference/forms/forms/list)** | `GET` `/sites/{site_id}/forms` <br />
  Get a list of all forms for a site.

* **[Get Form Schema](/data/reference/forms/forms/get)** | `GET` `/forms/{form_id}` <br />
  Retrieve the schema for a specific form.

* **[List Form Submissions](/data/reference/forms/form-submissions/list-submissions)** | `GET` `/forms/{form_id}/submissions` <br />
  Get a list of all submissions for a specific form.

* **[Get Form Submission](/data/reference/forms/form-submissions/get-submission)** | `GET` `/form_submissions/{form_submission_id}` <br />
  Retrieve details about a specific form submission.

* **[Modify Form Submission](/data/reference/forms/form-submissions/update-submission)** | `PATCH` `/form_submissions/{form_submission_id}` <br />
  Update information for a specific form submission.

---

# Removed endpoints from Webflow API v2

> Update: Endpoints removed as part of the Webflow API refresh.

Effective August 29th, 2023, the following endpoints have been deprecated in Webflow Data API v2 as part of Webflow's API improvements:

## Removed functionality

### User access group management

**PUT `/sites/{site_id}/users/{user_id}/accessgroups`**

This functionality is now consolidated into the [Update User](/data/reference/users/users/update) API endpoint, providing a more consistent experience for managing user permissions.

### Bulk CMS item deletion

**DELETE `/collections/{collection_id}/items`**

This functionality has been removed to ensure more controlled content management. Individual item deletion is still supported.

<Note>
  This change doesn't impact any API endpoints in the legacy API version. Existing integrations using the legacy API will continue to function as expected.
</Note>

---

# Publish Site API: New Rate Limits

> Update: New rate limits for publishing sites.

**What's changing?**\
Webflow is striving to improve the performance and stability of the platform to provide customers with the best possible experience. In light of this, Webflow is introducing a new rate-limiting policy for the Data API's [site publishing endpoint](https://developers.webflow.com/data/reference/sites/publish), which will help maintain the overall health of the Data API. Customers are limited to a maximum of one successful publish queue per minute.

**Key requirement:**\
Limit to 1 publish per minute

**Why are we making this change?**
Site publishing is a resource-intensive service, and analysis has identified a small number of customers who account for a significant portion of monthly publishes. This high usage has been impacting the overall system health and causing errors for other customers.

This rate-limiting policy ensures a more consistent and reliable experience for all users of the platform.

For questions or concerns about this update, please contact the [support team](https://support.webflow.com/).

---

# Update to webhook retries

> Webflow will now make a maximum of 3 attempts to send a webhook event.

Webflow will now make a maximum of 3 attempts to send a webhook event. Previously, Webflow's servers made 5 attempts.

See [webhook limits and retries](/data/docs/working-with-webhooks#limits) for additional information.

---

# Webhook Signatures

> Webhooks created with an OAuth Application now include signature headers to verify authenticity

## Webhook signature validation now available

Webflow's Data API now supports webhook signature validation for enhanced security. Webhooks created with an OAuth Application now include additional headers that enable you to verify the authenticity of incoming webhook requests.

### What's new

The following headers are now included in webhook payloads:

* **`x-webflow-signature`**: A signature hash generated using your application's client secret
* **`x-webflow-timestamp`**: The timestamp when the webhook was sent

These headers enable you to validate that webhook requests are genuinely from Webflow and haven't been tampered with, protecting your integrations from potential security threats.

### Why this matters

Validating webhook signatures helps you:

* Prevent unauthorized access to your webhook endpoints
* Ensure data integrity by confirming requests haven't been modified
* Protect against replay attacks by validating request timestamps

### How to implement signature validation

#### Using the Webflow SDK (recommended)

The simplest way to validate webhook signatures is to use the Webflow SDK:

```javascript
import { WebflowClient } from "webflow-api";
import express from "express";

const webflowClient = new WebflowClient({ accessToken: AUTHTOKEN });
const app = express();
app.use(express.json());

app.post('/webhook', async (req, res) => {
  const isValidRequest = await webflowClient.webhooks.verifySignature({
    headers: req.headers,
    body: JSON.stringify(req.body),
    secret: CLIENT_SECRET
  });

  if (isValidRequest) {
    // Process the webhook
  } else {
    // Reject the request
  }

  res.sendStatus(200);
});
```

#### Manual verification

If you prefer to validate signatures manually, follow these steps:

1. **Generate an HMAC hash** using:
   * The timestamp from the `x-webflow-timestamp` header
   * The request body string
   * Your OAuth application's client secret
   * The SHA-256 algorithm

2. **Compare signatures** by checking if your generated hash matches the `x-webflow-signature` header

3. **Verify timestamp** to ensure the request is recent (within 5 minutes) to prevent replay attacks

For detailed implementation examples, please refer to the [webhook signature validation documentation](/data/docs/working-with-webhooks#validating-request-signatures).

### Backward compatibility

This update only applies to webhooks created through OAuth Applications. Existing webhooks created through the Site Dashboard will continue to function without these signature headers.

It's highly recommended to update your webhook handlers to implement signature validation for enhanced security.

---

# Multi-Item Publish/Unpublish

> Update: Added support for publishing and removing multiple Collection Items

## Added support for publishing and removing multiple Collection Items

The Data API now supports the following endpoints for bulk publishing actions:

* [Publish Collection Items](/data/reference/cms/collection-items/staged-items/publish-item)
* [Delete Collection Items](/data/reference/cms/collection-items/staged-items/delete-items)

## Webflow SDK Update to 0.8.1

The [Webflow Node.js SDK](https://github.com/webflow/js-webflow-api) is versioned to `0.8.1`, which includes methods to support multi-item publish and removal.

---

# User Access Groups Added

> Update: Added User Access Groups.

## Added user access groups

The Data API now supports the [List Access Groups](/data/reference/users/access-groups/list) endpoint. This endpoint enables you to see the Access Groups available for a site. Additionally, the API accepts the `access_group` parameter for the [Invite User](/data/reference/users/users/invite) endpoint to assign a group with an invite.

---

# Webflow SDK v0.8.0

> Update: Added methods and typings to support our new Users API (currently in beta).

## Webflow SDK Update to 0.8.0

The [Webflow Node.js SDK](https://github.com/webflow/js-webflow-api) is now versioned to `0.8.0`. This release includes methods and typings to support Webflow's new Users API (currently in beta).

---

# Versioning and OAuth docs update

> API version defaults to current version and added `redirect_uri` to OAuth docs.

## API version defaults to latest version

The Webflow Data API no longer requires the inclusion of `accept-version` or `api_version` in every API request. If a version isn't provided, the API will use the latest API version.

## Added `redirect_uri` to OAuth docs

The API has always validated the `redirect_uri` when used, but it wasn't documented... Until now! Learn more about how to use `redirect_uri` in the [OAuth section of the documentation](/data/reference/authentication).

---

# Introducing Users APIs

> Update: Added five new APIs to list, manage, and invite users for the new Memberships feature.

## Users API

The Webflow Data API now supports five new APIs to list, manage, and invite users for the new Memberships feature (currently in Beta).

* **[List users](/data/reference/users/users/list)**
* **[Get user](/data/reference/users/users/get)**
* **[Invite user](/data/reference/users/users/invite)**
* **[Update user](/data/reference/users/users/update)**
* **[Delete user](/data/reference/users/users/delete)**

## Membership webhooks

The API now supports the `memberships_user_account_added` and `memberships_user_account_updated` webhook triggers.

## Developer site update

The developer site has been updated with improved syntax highlighting and examples for more languages. We've also moved OAuth into the main page and best of all - it's now generated from an OpenAPI spec. Still a WIP and formatting improvements are constantly in the works.

---

# New CMS APIs and updated webhooks

> Added CMS item unpublish APIs, webhooks, and improvements to the site_publish webhook

## Overview

As of May 27, 2022, the Webflow Data API now supports unpublishing CMS items, along with improved webhook capabilities and documentation fixes.

## New features

### CMS item unpublish API

The Webflow Data API now supports unpublishing individual CMS items. This aligns with the [unpublish individual items](https://webflow.com/updates/remove-cms-content-without-publishing-your-entire-site) feature in Webflow that allows you to remove CMS content without publishing your entire site.

You can now use the [Unpublish API](/data/reference/cms/collection-items/live-items/delete-item-live) in your code to manage content publication state programmatically.

{/* <!-- vale off --> */}

<Note>
  **SDK Update Required**: If you're using the [Webflow Node.js SDK](https://github.com/webflow/js-webflow-api), please update to version `0.7.2` or higher to access this functionality.
</Note>

{/* <!-- vale on --> */}

### New webhook trigger: `collection_item_unpublished`

The API now supports the `collection_item_unpublished` webhook trigger. This webhook triggers whenever a CMS item is unpublished, enabling integrations to respond to these events in real-time.

## Improvements

### Enhanced `site_publish` webhook trigger

The `site_publish` webhook now includes additional properties, providing better visibility into your site's publishing activity:

* **`domains`**: The domains where the content was published
* **`publishedBy`**: The user who initiated the publish action

These additions improve tracking capabilities and help with auditing site publishing workflows.

## Bug fixes

### Product documentation correction

We've fixed an incorrect route in the `Update Product` documentation. The documentation now accurately reflects the API's functionality.

If you encounter any documentation issues, please let us know through our [support channels](https://webflow.com/dashboard/help).

---

# Webflow SDK Update to 0.7.2

> Update: Updated a critical update to DELETE calls that take in a query string.

Updated a critical update to [DELETE](https://github.com/webflow/js-webflow-api/pull/55) calls that take in a query string.

Learn more about the release on [GitHub](https://github.com/webflow/js-webflow-api/releases).

---

# Webflow SDK update to 0.7.1

> A SDK update that includes updates to all dependencies, fixed typings, and an error message typo for item().

A significant SDK update that includes updates to all dependencies, [fixed typings](https://github.com/webflow/js-webflow-api/pull/49), and an [error message typo for `item()`](https://github.com/webflow/js-webflow-api/pull/35).

Learn more about the release on [GitHub](https://github.com/webflow/js-webflow-api/releases).

---

# Enhanced Ecommerce API Support

> Major improvements to Webflow's Ecommerce API with new collection models and endpoints for better product management

## Ecommerce API restructuring

The Ecommerce API is now organized into three distinct modules:

* **Collections API** - Manage product collections and categories
* **Orders API** - Handle order processing and fulfillment
* **Inventory API** - Track and manage product inventory

## New collection models

Added collection models to support ecommerce operations:

* **Products** - Full product information and details
* **SKUs** - Stock keeping units with variant support
* **Categories** - Hierarchical product categorization

## New endpoints

* **[Create Product](/data/reference/ecommerce/products/create)**<br />
  Add new products to your store with detailed specifications
* **[List Products](/data/reference/ecommerce/products/list)**<br />
  Retrieve all products with filtering options
* **[Get Product](/data/reference/ecommerce/products/get)**<br />
  Fetch detailed information about specific products

These changes provide a more robust foundation for building and managing ecommerce applications with Webflow.

---

# Site publishing and custom domains

> Added endpoint for publishing a site and querying a site’s custom domains.

* Publish a site via the [Site Publish endpoint](/data/reference/sites/publish)
* Get a site’s custom domains via the [Custom Domains endpoint](/data/reference/sites/get-custom-domain)

---

# Developer API Release

> Update: Initial release

Initial release of the Data API

---

# Introduction

> Webflow's Designer APIs let you build apps that programmatically control the Webflow Designer.

<video autoplay loop muted>
    

  <source src="https://dhygzobemt712.cloudfront.net/Web/developers/videos/24005_API%20Documentation_Introduction_v3_24fps.webm" type="video/webm" />

    Your browser does not support HTML video.
</video>

Webflow's Designer APIs let you build apps that programmatically control the Webflow Designer. With these APIs, developers can create tools that automatically add elements to pages, apply styles, manage components, and streamline design workflows.

<br />

## Getting started

To start using the Designer APIs, [register a Webflow App](/data/docs/getting-started-apps) and create a [Designer Extension](/designer/docs/getting-started-designer-extensions) using the [Webflow CLI.](/designer/reference/webflow-cli) Once you have your Designer Extension running locally on a Webflow project, you can start using the Designer APIs to create elements, styles, components, and more.

<CardGroup>
  <Card
    title="Create your first extension"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/App.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/App.svg" alt="" className="block dark:hidden" />
        </>
    }
    href="/designer/docs/getting-started-designer-extensions"
  >
    Follow our step-by-step guide to build and deploy your first Designer Extension<br /><br />

    <a href="/designer/docs/getting-started-designer-extensions">
      <button class="cc-primary">
        Create a Designer Extension
      </button>
    </a>
  </Card>

  <Card
    title="Try the interactive playground"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/PublishDesigner.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/PublishDesigner.svg" alt="" className="block dark:hidden" />
        </>
    }
    href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62"
  >
    Experiment with live API calls in our interactive playground environment<br /><br />
    <button class="cc-primary">Test the API playground</button>
  </Card>
</CardGroup>

<br />

## Working with the Designer APIs

The Designer APIs provide several objects and methods that give Apps control over the Webflow Designer. Each object serves a specific purpose and contains methods to help you design automated workflows for teams working in Webflow.

<CardGroup>
  <Card
    title="Elements"
    href="/designer/reference/elements-overview"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Grid.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Grid.svg" alt="" className="block dark:hidden" />
        </>
    }
  >
    Create and manipulate elements on the canvas, including their properties, content, and styles.
  </Card>

  <Card
    title="Styles"
    href="/designer/reference/styles-overview"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Styles.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Styles.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
  >
    Manage reusable CSS classes to control the visual appearance of elements across your site.
  </Card>

  <Card
    title="Components"
    href="/designer/reference/components-overview"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Components.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Components.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
  >
    Create and modify reusable element groups to maintain consistency across your designs.
  </Card>

  <Card
    title="Variables"
    href="/designer/reference/variables-overview"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Variable.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Variable.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
  >
    Define and manage global values for numbers, percentages, sizes, colors, and fonts.
  </Card>

  <Card
    title="Pages"
    href="/designer/reference/pages-overview"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/PageBuilding.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/PageBuilding.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
  >
    Manage page properties, SEO settings, and site structure.
  </Card>

  <Card
    title="Extension Utilities"
    href="/designer/reference/extension-utilities"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/ToolNut.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/ToolNut.svg" alt="" className="block dark:hidden" />
        </>
    }
  >
    Utility methods to manage your extension's behavior and interaction with the Designer.
  </Card>
</CardGroup>

<br />

## How the Designer APIs work in Webflow

Designer APIs are client-side JavaScript APIs that execute in the browser via an iframe. They interact with Webflow just as a user would - creating elements, applying styles, and modifying properties. This client-side approach allows your apps to directly manipulate the Designer interface in real-time, creating a seamless integration between your code and the Webflow environment.

To work with objects in your Webflow project, you'll need to reference the object using an appropriate method, and then make changes using the available methods.

<Tabs>
  <Tab title="Referencing objects">
    * **Existing Objects:** Get an existing object using an appropriate **GET** method. For example, to get the currently selected element, you can use the [`webflow.getSelectedElement()`](/designer/reference/get-selected-element) method. You can see all the methods available for retrieving objects in the [Designer API Reference](/designer/reference/elements-overview).

    * **New Objects:** Create a new object using an appropriate **CREATE** method. When you create a new object, Webflow will always return a reference to the new object. For example, to create a new element, you can use the [`element.after()`](/designer/reference/insert-element-after) method. You can see all the methods available for creating objects in the [Designer API Reference](/designer/reference/elements-overview).

    <div>
      <Frame background="subtle" caption="`webflow.getSelectedElement()` returns a reference to the currently selected element.">
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/17d1ef94bda2296a5c365947d98c551f101ba498801c0abb42850a93982accb3/assets/images/26ae3a1-Getting_a_reference_to_a_resource.png" alt="Getting a reference to a resource" />
      </Frame>
    </div>
  </Tab>

  <Tab title="Modifying objects">
    Once you've referenced an object, you can start manipulating it using the available methods on that object. Each object has its own set of methods, so be sure to refer to the [Designer API Reference](/designer/reference/elements-overview) for the object you're working with.

    In the example below, we're using the [`element.setCustomAttribute()`](/designer/reference/custom-attributes/setCustomAttribute) method to set a custom attribute on the element. When the custom attribute is set, the element will be updated in the Webflow Designer, and the information about the updated object will be returned to the Designer Extension.

    <div>
      <Frame background="subtle" caption="`element.setCustomAttribute()` sets a custom attribute on the element, then sends the updated object back to the Designer Extension.">
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/3b78ee45acd2c5a5b79458bd1f6b77277e8534b706c1130f5a0d53d8f11555fb/products/designer/pages/DEsignerAPI/assets/saving-changes-to-a-resource.png" alt="Saving changes to an element" />
      </Frame>
    </div>
  </Tab>
</Tabs>

---

# Create your first Designer Extension

> A quick guide to help you set up a Designer Extension and start creating Apps that work directly in the designer

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/a2bc1bd30d013e27601652ff9bd4e5eb0bc063b69763d3905dc794d88fffd97c/products/data/pages/Apps/designer-extensions/assets/hero.gif" />

In this tutorial, you'll learn how to create and run a [Designer Extension](/apps/docs/designer-extensions) that updates text on elements within the Designer. This guide is intended for developers who want to build custom functionality directly into the Webflow design environment.

By the end of this tutorial, you will be able to:

* **Install and configure** the [Webflow CLI](/designer/reference/webflow-cli)
* **Scaffold** a new Designer Extension project
* **Run your extension locally** in the Webflow Designer
* **Programmatically update elements** on a page
* **Use the [Designer APIs](/designer/reference/introduction)** to extend your extension’s capabilities

***

### Prerequisites

Before you begin, make sure you have:

* Node.js 16.20 or later
* Access to a Webflow site for development and testing
* A registered Webflow App installed on your test site

If you haven’t set up an app yet, follow the [creating an App guide.](/data/docs/register-an-app)

## Set up your development environment

<Steps>
  <Step title="Install the Webflow CLI">
    Webflow’s CLI lets you create, manage, and locally run Designer Extensions from the command line.

    To install the CLI globally, run:

    ```shell
    npm i -g @webflow/webflow-cli
    ```
  </Step>

  <Step title="Create a Designer Extension project">
    Use the CLI to scaffold a new Designer Extension with the recommended structure and settings. You can also use templates for frameworks like React and TypeScript. After creating your project, you'll need to navigate to the project directory and install the dependencies.

    Replace my-extension-name with your desired project name:

    ```shell
    webflow extension init my-extension-name react
    cd my-extension-name
    npm install
    ```
  </Step>

  <Step title="Review the project structure">
    Your new project folder will look like this. For a detailed explanation of each file and folder, see [App Structure](/designer/reference/app-structure) and [App Settings](/designer/reference/app-settings).

    ```
    my_example_extension/
    ├── node_modules/
    ├── public/             # Contains all the files to serve your designer extension
    │   ├── index.html      # Required:This file serves as the initial point of entry for your single page app.
    │   ├── index.js        # This file adds interactivity and dynamic behavior to your web app.
    │   └── styles.css      # Defines the visual appearance of your App
    ├── src/                # Contains the source code for your designer extension
    │   └── index.ts
    ├── package-lock.json
    ├── package.json
    ├── webflow.json        # Contains the settings for your designer extension
    ├── README.md       
    └── tsconfig.json       # Contains the TypeScript configuration for your designer extension
    ```
  </Step>
</Steps>

## Run your Designer Extension locally

Before you can test your extension in Webflow, you’ll want to run it locally to enable live development and preview changes as you make them.

<Steps>
  <Step title="Start the development server">
    Navigate to your project directory and run the following command to start the development server:

    ```shell
    npm run dev
    ```

    This command serves your Designer Extension on port 1337 using the CLI’s `webflow extension serve` command and runs webpack in watch mode with `npm run watch-webpack` concurrently. This setup enables live updates as you develop.

    <Note>
      While you can load your extension in a browser at `http://localhost:1337`, your app will only be able to interact with the Designer fully when loaded within the Webflow Designer.
    </Note>
  </Step>

  <Step title="Install your extension to your test site">
    In your Workspace Settings, navigate to the "Apps & Integrations" > "Develop" section. Find your App and select the "..." button. Click "Install" and follow the instructions to install your extension to your test site.

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/21656bb88a820e93ad3e7e78270d93b8c84affea439f29fd27cb5e314d74299a/products/data/pages/Apps/designer-extensions/assets/app-development.png" />
    </Frame>
  </Step>

  <Step title="Open App the Webflow Designer">
    Open your test site in the Webflow Designer, and press the "E" key to open the app panel. Find your app and click "Launch development app" to see your extension running in the Webflow Designer.

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/b186e6075c18d9c7f491bb2ea8cfe5066df02499bf8fb0c636984bdc9ce73fbf/products/data/pages/Apps/designer-extensions/assets/launch-development-app.png" />
    </Frame>

    <Note>
      If you don't see your extension in the apps panel, you may need to refresh the page.
    </Note>
  </Step>
</Steps>

## Modify elements with the Designer APIs

The starter project you created already includes a basic example of using the Designer APIs: when you select a text element in the Webflow Designer and click the "Lorem Ipsum" button in your extension, the selected element’s text is replaced with placeholder content.

However, if you select a non-text element, the extension will not be able to update the text content. **Let’s improve this experience by adding user feedback for error cases.**

<Steps>
  <Step title="Understand the starter functionality">
    Your extension’s UI includes a "Lorem Ipsum" button. When clicked, the extension:

    * [Gets the currently selected element](/designer/reference/get-selected-element) in the Designer
    * [Replaces the text](/designer/reference/set-text-content) of the selected element with placeholder text

    This code is found in `src/index.ts`.

    ```ts title="src/index.ts" {3-7}
    document.getElementById("lorem").onsubmit = async (event) => {
      event.preventDefault();
      const el = await webflow.getSelectedElement();
      if (el && el.textContent) {
        el.setTextContent(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        );
      }
    };
    ```
  </Step>

  <Step title="Improve the user experience with notifications">
    Currently, if no element is selected or the selected element doesn’t support text, nothing happens. Let’s add a notification to guide the user in these cases. To do this, we'll add an `else` clause to the `if` statement in `index.ts` and use the [`webflow.notify()`](/designer/reference/notify-user) method to notify a user that they should choose a supported element.

    Update your code as follows:

    ```ts title="index.ts" {16-18}
        document.getElementById("lorem").onsubmit = async (event) => {
          
          // Prevent the default form submission behavior, which would reload the page
          event.preventDefault()

          // Get the currently selected element in the Designer
          const el = await webflow.getSelectedElement()

          // Check if an element was returned, and the element can contain text content
          if (el && el.textContent) {
            // If we found the element and it has the ability to update the text content,
            // replace it with some placeholder text
            el.setTextContent(
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
              "eiusmod tempor incididunt ut labore et dolore magna aliqua."
            )
          } else { // If an element isn't selected, or an element doesn't have text content, notify the user
            await webflow.notify({ type: 'Error', message: "Please select an element that contains text." })
          }
        }
    ```

    Now, if the user clicks the button without selecting a valid text element, they’ll see a clear error notification in the Designer.
  </Step>

  <Step title="Test your extension">
    Refresh your extension by clicking the <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.2949 6C10.2949 6.79113 10.0603 7.56448 9.6208 8.22228C9.18128 8.88008 8.55656 9.39277 7.82566 9.69552C7.09475 9.99827 6.29049 10.0775 5.51456 9.92314C4.73864 9.7688 4.02591 9.38784 3.4665 8.82843C2.90709 8.26902 2.52612 7.55629 2.37178 6.78036C2.21744 6.00444 2.29665 5.20017 2.59941 4.46927C2.90216 3.73836 3.41485 3.11365 4.07264 2.67412C4.73044 2.2346 5.5038 2 6.29492 2V3C5.70158 3 5.12156 3.17595 4.62821 3.50559C4.13487 3.83524 3.75035 4.30377 3.52328 4.85195C3.29622 5.40013 3.23681 6.00333 3.35257 6.58527C3.46832 7.16721 3.75405 7.70176 4.1736 8.12132C4.59316 8.54088 5.12771 8.8266 5.70965 8.94236C6.2916 9.05811 6.8948 8.9987 7.44297 8.77164C7.99115 8.54458 8.45969 8.16006 8.78933 7.66671C9.11898 7.17336 9.29492 6.59334 9.29492 6H10.2949Z" fill="#000" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.29492 0L9.29492 2.5L6.29492 5V0Z" fill="#000" /> </svg> icon in the top right of your Designer Extension.

    * Select a text element and click the button: the text should update.
    * Select a non-text element (like an image) and click the button: you should see an error notification.

    If both behaviors work as described, you’ve successfully improved your extension.

    <Frame>
      ![Notify user](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/207a8db090437e6776cd7cd2415a40b49c2dd271f73422be56275d6ae93ada19/assets/images/scaffold-app-modified.gif)
    </Frame>
  </Step>
</Steps>

### Next steps

Congratulations! You’ve built and run your first Designer Extension.

To continue your journey and unlock more advanced capabilities, explore the following resources:

* **Learn more about the [Designer APIs](/designer/reference/introduction)**<br />
  Dive deeper into what’s possible with the [Designer API reference.](/designer/reference/introduction)

* **Build and publish your extension**<br />
  Follow our guide on [building and deploying](/apps/docs/publishing-your-app) Designer Extensions to prepare your app for the [Marketplace](https://webflow.com/marketplace).

* **Submit your App to the Webflow Marketplace**<br />
  Share your extension with the community by [submitting your app.](https://developers.webflow.com/submit)

* **Troubleshoot and get help**<br />
  Visit our [developer forums](https://discourse.webflow.com/c/publishing-help/api/29) for support, tips, and to connect with other Webflow extension developers.

---

# Webflow CLI Reference

> A comprehensive reference for the Webflow CLI, used for developing Designer Extensions.

The Webflow CLI streamlines the development process for creating Webflow Designer Extensions. This page provides a reference for its installation and commands.

Regularly check for updates to the CLI and the [Designer Extension Type Definitions](https://www.npmjs.com/package/@webflow/designer-extension-typings) to ensure compatibility.

## Installation

Before installing, ensure you have Node.js and package manager of your choice installed.

To install the Webflow CLI globally, use your package manager of choice:

```bash
npm install -g @webflow/webflow-cli # or yarn add global @webflow/webflow-cli or pnpm add -g @webflow/webflow-cli
```

🔗 [npm package](https://www.npmjs.com/package/@webflow/webflow-cli)

## Commands

### `init`

Initializes a new Designer Extension project. It's highly recommended to start all projects with this command.

```bash
webflow extension init <project-name> [template]
```

**Arguments**

* `project-name` (required): The name of your new project directory.
* `template` (optional): The name of a template to use.

**Templates**

You can use templates for specific libraries and languages. To see a list of available templates, run:

```bash
webflow extension list
```

Example of initializing a project with a React template:

```bash
webflow extension init my-react-extension react
```

### `serve`

Serves your Designer Extension locally at port 1337, allowing you to interact with it inside the Webflow Designer. Additionally, you can use the `--port` option to serve your extension on a different port.

```bash
webflow extension serve
```

#### Options

| Command Option | Description                          | Default |
| -------------- | ------------------------------------ | ------- |
| `--port`       | The port to serve your extension on. | 1337    |

### `bundle`

Bundles your extension and creates a `bundle.zip` file in your project's root directory. This file is used to upload your extension to Webflow.

```bash
webflow extension bundle
```

If you initialized your project with `webflow extension init`, you can also use the npm script `build`:

```bash
npm run build
```

### `list`

Lists all available templates that can be used with the `init` command.

```bash
webflow extension list
```

---

# Error Handling

> 

This page outlines error patterns, debugging tips, and all possible errors for quick troubleshooting to aid developers in building resilient applications. API errors in Webflow may be a result of a number of scenarios including but not limited to insufficient Webflow entitlements, user role abilities, and more.

## Error patterns

The Designer API employs a structured format for exceptions, ensuring you have clear and actionable information at your disposal. Here's what you can expect in the event of an error:

```
Cause Tag: ResourceRemovalFailed
Message: "Failed to remove style. Ensure there are no usages of this style."
```

**Cause Tag** `(err.cause.tag)`: Accompanying each error message is a consistent, unchanging cause tag. These tags describe a unique error type for the purpose of programmatically distinguishing between different error scenarios and responding accordingly.

**Message** `(err.message)`: A descriptive sentence designed to provide insight into what went wrong. The wording of this message may change over time to clarify or reflect updated functionality within the Designer API.

## List of errors

This section provides a detailed list of error cause tags you might encounter while interacting with the Designer API.

| Cause Tag               | Description                                                                                                                                                                    |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| DuplicateValue          | Indicates a value was duplicated where it should be unique.                                                                                                                    |
| Forbidden               | Indicates that a User and/or app doesn't have the permission to take a specific action. For more on this error see documentation on [App Modes](/designer/reference/app-modes) |
| InternalError           | An error occurred within the system or process.                                                                                                                                |
| InvalidElementPlacement | An element was placed in an invalid location or context.                                                                                                                       |
| InvalidRequest          | A request is invalid based on the designer's current ability                                                                                                                   |
| InvalidStyle            | The specified style is invalid or not recognized.                                                                                                                              |
| InvalidStyleName        | The specified style name doesn't exist or is incorrect.                                                                                                                        |
| InvalidStyleProperty    | The property of the style is invalid or not applicable.                                                                                                                        |
| InvalidStyleVariant     | The variant of the style specified is invalid or not recognized.                                                                                                               |
| InvalidTargetElement    | The target element for the operation is invalid.                                                                                                                               |
| PageCreateFailed        | Failed to create a page due to an unspecified error.                                                                                                                           |
| ResourceCreationFailed  | Failed to create a resource due to an unspecified error.                                                                                                                       |
| ResourceMissing         | The requested resource is missing or unavailable.                                                                                                                              |
| VariableInvalid         | A variable's value is invalid or not within the expected range.                                                                                                                |

## How to handle errors

Apps need to manage errors gracefully to maintain a seamless user experience. See the approaches below for a few patterns on how to handle errors if they arise when working with Designer APIs.

### Using try/catch for error handling

The try/catch block is seamlessly integrated with async/await syntax, offering a straightforward way to catch exceptions as demonstrated:

```typescript
try {
  const element = await webflow.getSelectedElement();
  await element.remove();
  // Attempting further operations on the removed element will throw an error
  const styles = await element.getStyles();
} catch (err) {
  console.error(`Cause:${err.cause.tag}`);
  console.error(`Message:${err.message}`);
}
```

### Notifying users of an error

By utilizing the [`webflow.notify`](/designer/reference/notify-user) method, you can send a notification directly to the user within Webflow that acknowledges the error and also, when feasible, provide guidance on resolving it. This proactive approach helps maintain trust and ensures users aren't left in the dark, improving their overall experience and satisfaction with your application.

<video autoplay loop muted>
    

  <source src="https://dhygzobemt712.cloudfront.net/Web/developers/videos/24005_API%20Documentation_User%20Events.webm" type="video/webm" />

    Your browser doesn't support HTML video.
</video>

```typescript
function handleErrors(err) {
  switch (err.cause.tag) {
    case 'ResourceMissing':
      webflow.notify({ type: 'Error', message: 'The element no longer exists. Select a different element' });
      break;
    case 'InvalidElementPlacement':
      // Handle specific error
      webflow.notify({  type: 'Error', message: 'The element cannot be placed here. Try another location' });
      break;
    // Additional error cases
    default:
      webflow.notify({ type: 'Error', message: 'An error occurred. Please try again later' });
  }
}
```

---

# App Modes

> 

## Modes in the Webflow Designer

The Webflow Designer is a powerful collaborative tool for teams to design and build websites quickly and at scale. To support collaboration, the Designer offers various modes to support different aspects of the design process:

* **[Designing and Building](https://university.webflow.com/lesson/collaborate-in-the-webflow-designer?topics=layout-design):** Designers can create and refine the website’s layout and appearance in the Webflow Designer, while marketers and content writers manage and update content in build mode.
* **[Page Branching](https://university.webflow.com/lesson/page-branching?topics=collaboration):** Multiple designers can work on different pages of the same site at the same time, allowing for parallel development and reducing bottlenecks.
* **[Localization](https://arc.net/l/quote/cjoktvxx)**: Global teams can create customized experiences for different languages or regions, enabling global reach and tailored content for diverse audiences.

Through these features and modes, the Webflow Designer determines the specific actions a user can take to ensure teams make the right updates at the right time.

## Modes in Webflow Apps

Designer Extensions extend the user’s capabilities while respecting the mode the Designer is in. Each method in the Designer API offers distinct functionality, aligning with the actions feasible  in each mode. By understanding the various modes in the Designer, and how Designer APIs interact  with them, you can ensure your App functions correctly across different contexts within the Webflow Designer, thus providing a seamless user experience.

## Understanding modes and API methods

Each API method’s documentation includes an “App Modes” section that outlines where and how the API can be used, as well as any limitations.

Here’s an example from the “[Remove Element](https://developers.webflow.com/designer/reference/remove-element)” method:

| **Ability**                   | **Locale**                                                                       | **Branch**                                                                     | **Workflow**                                                                                        | **Sitemode**                                                  |
| ----------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| *Name of the current ability* | Site uses Localization, and the user is working in a primary or secondary locale | Site uses Page Branching, and the users working in a primary or branched paged | Determines whether the user is actively working on the canvas, or viewing the site in preview mode. | Determines whether the user is in design mode, or build mode. |
| **canDesign**                 | `primary`                                                                        | `main`                                                                         | `canvas`                                                                                            | `design`                                                      |

In this example, the “Remove Element” method can only be successfully called if the user is in design sitemode, working on the canvas in a primary locale on the main branch. If the user is in any other mode, the API will throw a “Forbidden” error.

See below for a complete table of abilities, which defines where and how an API method can be used.

| **Name**                  | **Locale** | **Branch** | **Workflow** | **Sitemode** |
| ------------------------- | ---------- | ---------- | ------------ | ------------ |
| **canManageAssets**       | Any        | Any        | Any          | Any          |
| **canAccessAssets**       | Any        | Any        | Any          | Any          |
| **canAccessCanvas**       | Any        | Any        | Any          | Any          |
| **canDesign**             | primary    | main       | canvas       | design       |
| **canEdit**               | Any        | Any        | canvas       | Any          |
| **canCreateComponents**   | primary    | Any        | canvas       | Any          |
| **canModifyComponents**   | Any        | Any        | canvas       | design       |
| **canCreateStyles**       | primary    | Any        | canvas       | design       |
| **canModifyStyles**       | Any        | Any        | canvas       | design       |
| **canCreatePage**         | Any        | Any        | Any          | design       |
| **canReadPageSettings**   | Any        | Any        | Any          | Any          |
| **canManagePageSettings** | Any        | Any        | Any          | Any          |
| **canReadVariables**      | Any        | Any        | Any          | Any          |
| **canModifyVariables**    | Any        | main       | canvas       | design       |
| **canModifyImageElement** | Any        | main       | canvas       | Any          |

<br />

## Checking for App modes with `webflow.canForAppMode`

To ensure your app functions correctly in the different modes of the Webflow Designer, you can leverage the [`webflow.canForAppMode`](https://developers.webflow.com/designer/reference/get-users-designer-capabilities)  method. This method allows you to check whether a specific action is allowed in the user's current mode before executing it, helping to prevent errors and improve the user experience.

#### Example Usage

The `webflow.canForAppMode` method returns a Boolean indicating whether the specified action is permitted based on the current mode of the Designer. Here’s a basic example:

```javascript
const capabilities = await webflow.canForAppMode([webflow.appModes.canDesign, webflow.appModes.canEdit
]);

if (capabilities.canDesign) {
  // Proceed with the action
  const el = await webflow.getSelectedElement();
  await el.append(webflow.elementPresets.DOM);
} else {
  // Provide feedback to the user
  await webflow.notify({
    type: 'Error',
    message: 'This action cannot be performed right now. Ensure you are working in the Primary Locale, on the Main Branch, and in design mode.',
  });
}
```

### When to Use `webflow.canForAppMode`

Use `webflow.canForAppMode` before any critical action that depends on the mode the user is in, such as:

* Adding or modifying elements in the Designer.
* Creating or editing styles that are only permitted in specific locales or branches.
* Managing components that might be restricted based on the current workflow.

[See the documentation for `webflow.canForAppMode` for more details.](https://developers.webflow.com/designer/reference/get-users-designer-capabilities)

## Error handling for App modes

When an API call is made in an incorrect mode, a “Forbidden” error will be thrown. To manage this, implement error handling to guide users back to the appropriate mode. For more guidance on errors, see our guide on [understanding and handling API errors.](https://developers.webflow.com/designer/reference/error-handling)

To help you implement robust error handling for App Modes, we have included a list of API abilities along with the accepted modes for each ability and example error messages to direct users back to the correct mode:

<br />

| **Name**                  | **Example Error Message**                                                                                                                                               |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **canManageAssets**       | This action cannot be performed right now. Please ensure you have the correct permissions to manage assets.                                                             |
| **canAccessAssets**       | This action cannot be performed right now. Please ensure you have the correct permissions to view assets.                                                               |
| **canAccessCanvas**       | This action cannot be performed right now. Please ensure you are working in the correct mode to access the canvas.                                                      |
| **canDesign**             | This action cannot be performed right now. Ensure you are working in the Primary Locale and the Main Branch, and in design mode.                                        |
| **canCreateComponents**   | This action cannot be performed right now. Ensure you have the correct permissions to create components, and are working in the Primary Locale.                         |
| **canModifyComponents**   | This action cannot be performed right now. Ensure you have the correct permissions to modify components.                                                                |
| **canCreateStyleBlocks**  | This action cannot be performed right now. To create Styles, ensure you are working in the Primary Locale and in design mode.                                           |
| **canModifyStyleBlocks**  | This action cannot be performed right now. Make sure you are in design mode to modify Styles.                                                                           |
| **canCreatePage**         | This action cannot be performed right now. Ensure you have the correct plan and/or permissions to create additional pages. Additionally, ensure you are in design mode. |
| **canReadPageSettings**   | This action cannot be performed right now. Please ensure you have the correct permissions to view Page Settings.                                                        |
| **canManagePageSettings** | This action cannot be performed right now. Please ensure you have the correct permissions to manage Page Settings.                                                      |
| **canReadVariables**      | This action cannot be performed right now. Please ensure you have the correct permissions to view Variables.                                                            |
| **canModifyVariables**    | This action cannot be performed right now. Please ensure you have the correct permissions to manage Variables.                                                          |

As an example, see the below snippets on guidance for how to catch the new `Forbidden` error and surface appropriate user messaging.

**Before App Modes**

```javascript
const el = await webflow.getSelectedElement();
// Assumes a user can create elements
await el.append(webflow.elementPresets.DOM);
```

**After App Modes**

```javascript
try {
  // The element is able to be selected
  const el = await webflow.getSelectedElement();
  // However, appending an element is disallowed in a secondary locale
  await el.append(webflow.elementPresets.DOM);
} catch (error) {
  if (error.cause.tag === 'Forbidden') {
    // It is up to the developer to craft an error message to the user.
    // below is an example of what they could do:
    await webflow.notify({
      type: 'Error',
      message: 'This action cannot be performed right now. Ensure you are working in the Primary Locale and the Main Branch, and  in design mode.',
    })
  }
}
```

## Testing with App Modes

To test out how your Designer Extension will function with Expanded App Modes, you can opt-in to the feature with your `webflow.json` manifest file.

```json
// webflow.json manifest file
{
  "name": "my app",
  "apiVersion": "2",
  "featureFlags": {
    "expandedAppModes": true
  }
}
```

Now, if you launch your Designer Extension from the Apps Panel as you normally would today, you can switch to Build mode, as an example, and your App should remain open. If you take an action via your App that a user shouldn't be able to in that mode, you will see a `Forbidden` error thrown, and you can catch the error appropriately to surface relevant user messaging.

## Opt Out

We recognize that for some Apps, it may take more time to incorporate code changes to add extra error handling, UI considerations, etc. with expanded App Modes. To opt-out, set the `expandedAppModes` feature flag to false in your `webflow.json` manifest file (see below). Then, simply create a new updated app bundle with this change and submit it for review.

```json
// webflow.json manifest file
{
  "name": "my app",
  "apiVersion": "2",
  "featureFlags": {
    "expandedAppModes": false
  }
}
```

### Deciding to Opt Out

Opting-out of this feature means your App will only be able to be launched under the existing conditions; end-users who are Designing in the primary locale and main branch. Additionally, your App will not be launched from the Apps panel of the Designer by users who don’t meet those conditions (i.e,. in build mode).

## Designer v1 APIs

If you have an App using Designer v1 APIs, your app will not be able to be launched in other modes around the Designer, and will continue to only be launched when Designing in the canvas in the primary locale and main branch.

---

# Elements

> Comprehensive guide to creating and managing elements in the Webflow Designer with the Designer API

The Element APIs allow apps to programmatically create and manage elements. Through these APIs, you can dynamically build and modify a site's structure, apply styles to elements, and control their behavior.

<video autoplay loop muted>
    

  <source src="https://dhygzobemt712.cloudfront.net/Web/developers/videos/24005_API%20Documentation_Get%20Selected%20Element.webm" type="video/webm" />

    Your browser doesn't support HTML video.
</video>

## What Are Elements?

Elements are the building blocks of Webflow designs. Each element represents a component in your design, from basic structural elements like sections and containers to content elements like text and images.

The Designer API gives you programmatic control over these elements, allowing you to:

* Create new elements and add them to the canvas
* Select and manipulate existing elements
* Apply styles and customize element properties
* Build and modify complex element hierarchies

## Getting Started with Elements

Working with elements in the Designer API involves three main concepts:

<CardGroup>
  <Card
    title="Creating & retrieving elements"
    href="/designer/reference/creating-retrieving-elements"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Flexbox.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Flexbox.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Learn how to create, select, and manipulate elements in the Webflow Designer.
  </Card>

  <Card
    title="Element properties & methods"
    href="/designer/reference/element-properties-methods"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Controls.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Controls.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Explore the properties of each element and the methods associated with them.
  </Card>

  <Card
    title="Element types & methods"
    href="/designer/reference/element-types-methods"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Responsive.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Responsive.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Discover the different element types and their specific methods.
  </Card>
</CardGroup>

---

# Creating & Retrieving Elements

> Learn how to create, select, and manipulate elements in the Webflow Designer using the Designer API

Managing elements is a core aspect of working with the Webflow Designer API. This section covers methods for creating new elements, selecting existing ones, and managing their placement in the element hierarchy.

<video autoplay loop muted>
  <source src="https://dhygzobemt712.cloudfront.net/Web/developers/videos/24005_API%20Documentation_Get%20Selected%20Element.webm" type="video/webm" />

   Your browser doesn't support HTML video.
</video>

## Element selection

Before manipulating elements on the canvas, you typically need to select them. The Designer API provides methods to get references to existing elements:

```typescript
// Get the currently selected element
const selectedElement = await webflow.getSelectedElement();

// Get all elements on the page
const allElements = await webflow.getAllElements();

// Programmatically select an element
await webflow.setSelectedElement(elementToSelect);

// Get element children and select the first child
if (selectedElement?.children) {
  const children = await selectedElement.children;
  await webflow.setSelectedElement(children[0]);
}
```

## Adding elements to the Canvas

When adding elements to your design, you need to consider their placement within the [element hierarchy](https://university.webflow.com/lesson/element-hierarchy?topics=getting-started). The Designer API provides several methods for inserting elements precisely where you need them. Including:

| Method                                                      | Description                                                    |
| ----------------------------------------------------------- | -------------------------------------------------------------- |
| [`before()`](/designer/reference/insert-element-before)     | Insert a new element before the target element.                |
| [`after()`](/designer/reference/insert-element-after)       | Insert a new element after the target element.                 |
| [`prepend()`](/designer/reference/prepend)                  | Insert a new element as the first child of the target element. |
| [`append()`](/designer/reference/append)                    | Insert a new element as the last child of the target element.  |
| [`elementBuilder()`](/designer/reference/bulk-add-elements) | Add multiple elements at once with a hierarchical structure.   |

### Element presets

The Designer API uses Element Presets to specify which type of element to create. Each preset corresponds to a unique element type in Webflow. Some [element types include their own properties and methods](/designer/reference/element-types-methods).

For a complete list of available presets, refer to the [Element Presets](/designer/reference/element-presets) documentation. These presets can be used with any of the element creation methods shown below.

<Warning title="Use custom DOM elements when presets aren't available">
  Not all element types are supported through presets. If a preset isn't
  available for the element you want to create, you can use the [custom DOM
  element](/designer/reference/dom-element) method to create a custom element.
</Warning>

### Inserting elements next to existing elements

To position an element alongside existing elements:

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement) {
  // Insert a div after the selected element
  const newDivAfter = await selectedElement.after(
    webflow.elementPresets.DivBlock
  );

  // Insert a div before the selected element
  const newDivBefore = await selectedElement.before(
    webflow.elementPresets.DivBlock
  );
}
```

<Note title="Parent elements">
  If the selected element has a parent element, the new element created using
  `before()` or `after()` will also be a child element of the same parent.
</Note>

### Nesting elements within parent elements

To create parent-child relationships by nesting elements:

```typescript
// Get Selected Element
const parentElement = await webflow.getSelectedElement();

// Check if element supports child elements
if (parentElement?.children) {
  // Add element as first child (prepend)
  const firstChild = await parentElement.prepend(
    webflow.elementPresets.DivBlock
  );

  // Add element as last child (append)
  const lastChild = await parentElement.append(
    webflow.elementPresets.Paragraph
  );
}
```

### Bulk adding elements

For more complex structures, you can create multiple elements at once using [element builder](/designer/reference/bulk-add-elements):

```typescript maxLines=10
// Create an element structure using elementBuilder
const selectedElement = await webflow.getSelectedElement();

// Create a section element as the root
const section = webflow.elementBuilder(webflow.elementPresets.DOM);
section.setTag("section");

// Add a container child element
const container = section.append(webflow.elementPresets.DOM);
container.setTag("div");
container.setAttribute("class", "container");

// Add heading and paragraph to the container
const heading = container.append(webflow.elementPresets.DOM);
heading.setTag("h2");

const paragraph = container.append(webflow.elementPresets.DOM);
paragraph.setTag("p");

// Add the entire structure to the canvas in one operation
if (selectedElement?.children) {
  await selectedElement.append(section);

  // After adding to canvas, find elements and set text content
  const elements = await webflow.getAllElements();

  // Find the heading and paragraph elements by their IDs
  const headingEl = elements.find((el) => el.id.element === heading.id);
  const paragraphEl = elements.find((el) => el.id.element === paragraph.id);

  // Set text content on the elements
  if (headingEl) await headingEl.setTextContent("Hello World");
  if (paragraphEl)
    await paragraphEl.setTextContent("Created with element builder");
}
```

## Removing elements

To remove an element from the canvas:

```typescript
// Get Selected Element
const elementToRemove = await webflow.getSelectedElement();

if (elementToRemove) {
  // Remove the element
  await elementToRemove.remove();
}
```

## Methods

The Elements API offers the following methods for element creation and manipulation:

<CardGroup>
  <Card title="Get selected element" href="/designer/reference/get-selected-element">
    Retrieve the currently selected element in the Designer.
  </Card>

  <Card title="Set selected element" href="/designer/reference/set-selected-element">
    Programmatically select an element in the Designer.
  </Card>

  <Card title="Get all elements" href="/designer/reference/get-all-elements">
    Retrieve all elements on the current page.
  </Card>

  <Card title="Insert element before" href="/designer/reference/insert-element-before">
    Insert a new element before the target element.
  </Card>

  <Card title="Insert element after" href="/designer/reference/insert-element-after">
    Insert a new element after the target element.
  </Card>

  <Card title="Prepend" href="/designer/reference/prepend">
    Insert a new element as the first child of the target element.
  </Card>

  <Card title="Append" href="/designer/reference/append">
    Insert a new element as the last child of the target element.
  </Card>

  <Card title="Bulk add elements" href="/designer/reference/bulk-add-elements">
    Add multiple elements at once with a hierarchical structure.
  </Card>

  <Card title="Remove element" href="/designer/reference/remove-element">
    Remove an element from the canvas.
  </Card>
</CardGroup>

{" "}

---

# Get selected element

> 

## `webflow.getSelectedElement()`

Retrieve the [element](https://university.webflow.com/courses/web-elements-course) that the user has selected in the Webflow Designer.

The returned element object provides access to all element properties (like `type`, `id`, and `styles`) and exposes methods such as `getChildren()`, `getStyles()`, and `getCustomAttributes()` for working with the element programmatically.

### Syntax

```typescript
webflow.getSelectedElement(): Promise<null | AnyElement>
```

### Returns

*Promise\<`AnyElement` | `null`>*

A Promise that resolves to one of the following:

* `AnyElement`: An object that represents the various element types available in a Webflow project. See a full list of supported element types in the [Designer Extension type definitions.](https://www.npmjs.com/package/@webflow/designer-extension-typings?activeTab=code)
* `null`: If an element is not currently selected in the Designer

### Example

```typescript
// Get Selected Element
const element = await webflow.getSelectedElement();

// Print element info
if (element) {
  console.log(`Selected Element ID: ${element.id}`);
  console.log(`Element type: ${element.type}`);

  // If the element has children, print the child elements
  if(element.children){
    const children = await element.getChildren();
    console.log(`Child elements: ${children}`);
  }

} else {
  console.log("No element is currently selected.");
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | An       |

---

# Set selected element

> 

## `webflow.setSelectedElement()`

Set the selected element on the current page, or on the current component when the Designer is [entered into a component.](/designer/reference/enter-component)

The returned element object can be further queried using [element-level properties](/designer/reference/elements/children) (e.g. type, styles)  and methods (e.g. `getChildren()`)

### Syntax

```typescript
webflow.setSelectedElement(element: AnyElement): Promise<AnyElement>
```

### Parameters

* **Element**:  *AnyElement* - Any element that is on the current canvas, or is with the current component when the designer is [entered into a component.](/designer/reference/enter-component)

### Returns

*Promise\<*AnyElement*>*

A Promise that resolves to `AnyElement`.

### Example

```typescript
// Get the Root Element
const rootElement = await webflow.getRootElement();

if (rootElement) {

  // Select the root element
  const selectedElement = await webflow.setSelectedElement(rootElement);

  if (selectedElement?.children) {

    // Start building elements on the selected element
    await selectedElement?.append(webflow.elementPresets.DOM)

  }
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Get all elements

> 

## `webflow.getAllElements()`

Retrieve all elements present on the current page of the Designer.

If the Designer is editing a component, the elements returned are those present in that Component.

### Syntax

```typescript
webflow.getAllElements(): Promise<Array<AnyElement>>
```

### Returns

**Promise\<*AnyElement*>**

A Promise that resolves to an array of `AnyElement` objects.

`AnyElement` represents the various element types available in a Webflow project. See a full list of supported element types in the [Designer Extension type definitions.](https://www.npmjs.com/package/@webflow/designer-extension-typings?activeTab=code)

### Example

```typescript
// Retrieve all elements in the current context
const allElements = await webflow.getAllElements();

// Print element list
if (allElements.length > 0) {
  console.log("List of all elements:");

  allElements.forEach((element, index) => {
    console.log(`${index + 1}. Element ID: ${element.id}, Element Type: ${element.type}`);
  });
} else {
  console.log("No elements found in the current context.");
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Insert element before target element

> 

## `element.before(newElement)`

Insert a new element onto the page before the target element.

### Syntax

```typescript
element.before(newElement: ElementPreset | Component): Promise<<AnyElement>
```

### Parameters

* **newElement**:  *webflow\.elementPresets.\<preset>* - The new element to be inserted into the hierarchy. This element is derived from the `webflow.elementPresets` object, which contains all Webflow elements that can be inserted onto the canvas.

### Returns

**Promise\<*AnyElement*>**

A Promise that resolves to an `AnyElement` object.

`AnyElement` represents the various element types available in a Webflow project. See a full list of supported element types in our [Designer Extension type definitions.](https://www.npmjs.com/package/@webflow/designer-extension-typings?activeTab=code)

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement) {

  // Insert DIV before selected Element
  const newDiv = await selectedElement.before(webflow.elementPresets.DivBlock)

  // Print element details
  console.log(`${JSON.stringify(newDiv)}`)

}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### App Mode

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

---

# Insert element after target element

> 

## `element.after(newElement)`

Insert a new element onto the page after the target element.

### Syntax

```typescript
element.after(newElement: ElementPreset | Component): Promise<<AnyElement>
```

### Parameters

* **`newElemen`t**: *webflow\.elementPresets.\<preset>* - The new element to be inserted into the hierarchy. This element is derived from the `webflow.elementPresets` object, which contains all Webflow elements that can be inserted onto the canvas.

### Returns

**Promise\<*AnyElement*>**

A Promise that resolves to an `AnyElement` object.

`AnyElement` represents the various element types available in a Webflow project. See a full list of supported element types in the [Designer Extension type definitions.](https://www.npmjs.com/package/@webflow/designer-extension-typings?activeTab=code)

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement) {
  // Insert DIV after selected Element
  const newDiv = await selectedElement.after(webflow.elementPresets.DivBlock);

  // Print element details
  console.log(`${JSON.stringify(newDiv)}`);
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

---

# Nest element as first child

> 

## `element.prepend(newElement)`

Insert a new element onto the page as the first child of the target element.

### Syntax

```typescript
element.prepend(newElement: ElementPreset | Component): Promise<<AnyElement>
```

### Parameters

* **newElement**:  *webflow\.elementPresets.\<preset>* - The new element to be inserted into the hierarchy. This element is derived from the `webflow.elementPresets` object, which contains all Webflow elements that can be inserted onto the canvas.

### Returns

**Promise\<*AnyElement*>**

A Promise that resolves to an `AnyElement` object.

`AnyElement` represents the various element types available in a Webflow project. See a full list of supported element types in our [Designer Extension type definitions.](https://www.npmjs.com/package/@webflow/designer-extension-typings?activeTab=code)

### Example

```typescript
// Get Selected Element
const el = await webflow.getSelectedElement();


// Check if element supports child elements
if (el?.children) {

  // Prepend newElement as a child to of the selected element
  const newElement = await el?.prepend(webflow.elementPresets.DivBlock)

  // Print element Details
  console.log(JSON.stringify(newElement))

}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

---

# Nest element as last child

> 

## `element.append(newElement)`

Insert a new element onto the page as the last child of the target element.

### Syntax

```typescript
element.append(newElement: ElementPreset | Component ): Promise<AnyElement>
```

### Parameters

* **newElement**:  *webflow\.elementPresets.\<preset>* - The new element to be inserted into the hierarchy. This element is derived from the `webflow.elementPresets` object, which contains all Webflow elements that can be inserted onto the canvas.

### Returns

**Promise\<*AnyElement*>**

A Promise that resolves to an `AnyElement` object.

`AnyElement` represents the various element types available in a Webflow project. See a full list of supported element types in our [Designer Extension type definitions.](https://www.npmjs.com/package/@webflow/designer-extension-typings?activeTab=code)

### Example

```typescript
// Get Selected Element
const el = await webflow.getSelectedElement();

// Check if element supports child elements
if (el?.children) {

  // Append newElement as a child to of the selected element
  const newElement = await el?.append(webflow.elementPresets.DivBlock)

  // Print element Details
  console.log(JSON.stringify(newElement))

}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

---

# Bulk Add Elements

> Create complex element structures efficiently with the element builder API

## `webflow.elementBuilder(preset)`

Construct complex element structures before adding them to a page. This method is optimized for bulk creation of elements, and is particularly useful when working with SVG graphics or nested element groups like a navigation menu. This approach is more efficient than creating and adding elements one at a time, especially for complex designs.

<Warning title="Current Limitations">
  Currently, only DOM elements can be created with the element builder.
</Warning>

### Syntax

```typescript
webflow.elementBuilder(elementPreset: webflow.elementPresets.DOM): BuilderElement
```

### Parameters

* **preset**: The DOM element preset from the Webflow presets. Currently, only DOM elements are supported.

### Returns

**BuilderElement**

A builder element object designed for creating and manipulating hierarchical structures. This object has these methods:

* `append()`: Add a child element to this builder element
* `setTag()`: Set the HTML tag for this DOM element
* `setAttribute()`: Set an attribute on this DOM element
* `setTextContent()`: Set the text within this DOM element
* `setStyles()`: Set styles on this DOM element

## How to use the element builder

<Steps>
  <Step>
    **Get the parent element** <br />
    Use `webflow.getSelectedElement()` to select the parent element. This is where your new structure will be added.
  </Step>

  <Step>
    **Create a builder element** <br />
    Use `webflow.elementBuilder(webflow.elementPresets.DOM)` to create a builder element.
  </Step>

  <Step>
    **Configure the builder element** <br />
    Use the builder element to configure the tags, attributes, and styles of the new structure.
  </Step>

  <Step>
    **Add child elements** <br />
    Use `append()` to add child elements to the builder element. Configure them with tags, attributes, and styles.
  </Step>

  <Step>
    **Add the complete structure to your page** <br />
    Use `append()` on the parent element to add the complete structure to your page.
  </Step>
</Steps>

### Examples

<Tabs>
  <Tab title="Create a navigation menu">
    This example shows how to use element builder to create a navigation menu:

    <CodeBlock>
      ```typescript
      async function createNavMenu() {
        // Start by creating some styles that will be applied to the nav container. 
        const navStyle = await webflow.createStyle('navContainer');
        await navStyle.setProperties({
          'display': 'flex',
          'row-gap': '20px',
          'padding-left': '15px',
          'padding-right': '15px',
          'padding-top': '15px',
          'padding-bottom': '15px',
          'background-color': '#f5f5f5',
          'border-radius': '8px'
        });
          
        const navItemStyle = await webflow.createStyle('navItem');
        await navItemStyle.setProperties({
          'color': '#333',
          'text-decoration': 'none',
          'padding-left': '12px',
          'padding-right': '12px',
          'padding-top': '8px',
          'padding-bottom': '8px',
          'border-radius': '4px',
          'font-weight': '500'
        });

        // Get the selected element as the container
        const selectedElement = await webflow.getSelectedElement();
        
        // Create a nav container
        const navMenu = webflow.elementBuilder(webflow.elementPresets.DOM);
        navMenu.setTag('nav');
        navMenu.setStyles([navStyle]);
        
        // Menu items to add
        const menuItems = ['Home', 'About', 'Services', 'Portfolio', 'Contact'];
        
        // Create all menu items at once and store references for later
        const menuItemRefs = [];
        menuItems.forEach(itemText => {
          const item = navMenu.append(webflow.elementPresets.DOM);
          item.setTag('a');
          item.setAttribute('href', '#');
          item.setTextContent(itemText);
          item.setStyles([navItemStyle]);
          // Store reference to set text later
          menuItemRefs.push(item);
        });
        
        // Add the entire menu to the canvas in one operation
        if (selectedElement?.children) {
          await selectedElement.append(navMenu);
          console.log('Navigation structure with 5 items created in one operation');
        }
      }     
      ```
    </CodeBlock>
  </Tab>

  <Tab title="SVG with multiple paths">
    This example shows how to create a nested SVG structure:

    <CodeBlock>
      ```typescript
      async function webflowRainbow() {
        // Get the selected element as the container
        const selectedElement = await webflow.getSelectedElement();
        
        // Create an SVG builder element
        const svgBuilder = webflow.elementBuilder(webflow.elementPresets.DOM);
        svgBuilder.setTag('svg');
        svgBuilder.setAttribute('viewBox', '0 0 100 100');
        svgBuilder.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
        svgBuilder.setAttribute('width', '200');
        svgBuilder.setAttribute('height', '200');
        
        // Create rainbow circular background with multiple circles
        const backgroundElements = [];
        const rainbowColors = [
          'hsl(0, 90%, 55%)',    // Red
          'hsl(30, 90%, 55%)',   // Orange
          'hsl(60, 90%, 55%)',   // Yellow
          'hsl(120, 90%, 55%)',  // Green
          'hsl(240, 90%, 55%)',  // Blue
          'hsl(270, 90%, 55%)',  // Indigo
          'hsl(300, 90%, 55%)'   // Violet
        ];
        
        for (let i = 0; i < 7; i++) {
          const circle = svgBuilder.append(webflow.elementPresets.DOM);
          circle.setTag('circle');
          circle.setAttribute('cx', '50');
          circle.setAttribute('cy', '50');
          circle.setAttribute('r', `${46 - (i * 3)}`);
          circle.setAttribute('fill', 'none');
          circle.setAttribute('stroke', rainbowColors[i]);
          circle.setAttribute('stroke-width', '2.5');
          circle.setAttribute('opacity', '0.9');
          backgroundElements.push(circle);
        }
        
        // Create the central background circle
        const centralCircle = svgBuilder.append(webflow.elementPresets.DOM);
        centralCircle.setTag('circle');
        centralCircle.setAttribute('cx', '50');
        centralCircle.setAttribute('cy', '50');
        centralCircle.setAttribute('r', '32');
        centralCircle.setAttribute('fill', 'white');
        
        // Create the "Webflow" logo
        const logoPath = svgBuilder.append(webflow.elementPresets.DOM);
        logoPath.setTag('path');
        logoPath.setAttribute('d', 'M61.3811 14L43.0716 49.7933H25.8737L33.5362 34.959H33.1924C26.8709 43.1653 17.439 48.5674 4 49.7933V35.1643C4 35.1643 12.5972 34.6565 17.6513 29.3429H4V14.0003H19.3426V26.6194L19.687 26.6179L25.9565 14.0003H37.5597V26.5393L37.9041 26.5388L44.4089 14H61.3811Z');
        logoPath.setAttribute('fill', '#146EF5');
        logoPath.setAttribute('fill-rule', 'evenodd');
        logoPath.setAttribute('clip-rule', 'evenodd');
        logoPath.setAttribute('transform', 'translate(30.5, 30.5) scale(0.7)');
        
        // Add the entire SVG structure to the canvas in one operation
        if (selectedElement?.children) {
          await selectedElement.append(svgBuilder);
          console.log('webflow logo created successfully');
        }
      }
      ```
    </CodeBlock>
  </Tab>
</Tabs>

## When to use element builder

The element builder is particularly useful for:

* **Complex Element Structures**: When creating hierarchies with many nested elements
* **SVG Creation**: Perfect for building SVG graphics with many path, circle, or other elements
* **Repeating Patterns**: When you need to create many similar elements
* **Performance**: More efficient than adding elements one-by-one to the canvas

## Best practices

* **Build Complete Structures**: Create your entire element structure before adding it to the canvas
* **Set Properties**: Configure tags, attributes, styles, and text content on builder elements before appending
* **Track References**: If you need to modify elements after adding to canvas, store references to them
* **Batch Operations**: Use `Promise.all` for batch operations when modifying multiple elements

---

# Remove element

> 

## `element.remove()`

Remove element from the canvas.

### Syntax

```typescript
element.remove(): Promise<null>
```

### Returns

**Promise\<`null`>**

A Promise that resolves to `null` when the Element is removed from the canvas.

### Example

```typescript
// Get Selected Element
const el = await webflow.getSelectedElement();

// Remove the selected element
await el?.remove();
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

---

# Element properties & methods

> Learn about element properties and their related methods in the Webflow Designer API

Elements in Webflow have properties that determine what functionality they support. These properties are boolean flags that indicate whether an element can have certain features like children, styles, or text content. Each property unlocks a set of related methods that you can use to manipulate the element.

## Core element properties

All elements have a set of core properties that determine what actions you can perform on them:

| Property           | Description                                         | Examples of Elements with Property |
| :----------------- | :-------------------------------------------------- | :--------------------------------- |
| `children`         | Whether the element can contain child elements      | `DivBlock`, `Section`, `Container` |
| `customAttributes` | Whether the element can have custom HTML attributes | Most elements                      |
| `styles`           | Whether the element can have styles applied         | Most elements                      |
| `textContent`      | Whether the element can contain direct text content | `Paragraph`, `Heading`             |
| `appConnections`   | Whether the element can connect with external apps  | `Image`, `FormForm`                |

## Checking element properties

Before using property-based methods, you should always check if the element has the required property:

```typescript
const element = await Webflow.getSelectedElement();

// Check if element can have children
if (element?.children) {
  // Safe to use children-related methods
  await element.append(Webflow.elementPresets.Paragraph);
}

// Check if element can have styles
if (element?.styles) {
  // Safe to use style-related methods
  await element.setStyles([myStyle]);
}
```

## Property-based methods

Each element property unlocks specific functionality that you can use in your Designer Extension:

<CardGroup>
  <Card
    title="Children"
    href="/designer/reference/elements/children"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Scalability.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Scalability.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Methods for adding, retrieving, and managing child elements.
  </Card>

  <Card
    title="Styles"
    href="/designer/reference/elements/styles"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Styles.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Styles.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Methods for applying and managing styles on elements.
  </Card>

  <Card
    title="Text Content"
    href="/designer/reference/elements/text-content"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Typography.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Typography.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Methods for setting and manipulating text content.
  </Card>

  <Card
    title="Custom Attributes"
    href="/designer/reference/elements/custom-attributes"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/CodeBrackets.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/CodeBrackets.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Methods for working with custom HTML attributes.
  </Card>

  <Card
    title="App Connections"
    href="/designer/reference/app-intents-and-connections"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Sync.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Sync.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Methods for connecting elements with external apps.
  </Card>
</CardGroup>

## Best practices

1. **Always check properties before using methods**:
   ```typescript
   if (element?.styles) {
     // Now it's safe to use style methods
     await element.setStyles([myStyle]);
   }
   ```

2. **Combine property and type checks when needed**:
   ```typescript
   if (element.type === "Paragraph" && element.textContent) {
     await element.setTextContent("New paragraph text");
   }
   ```

3. **Handle missing properties gracefully**:
   ```typescript
   try {
     if (!element.children) {
       console.log("This element doesn't support child elements");
       return;
     }
     
     await element.append(Webflow.elementPresets.Paragraph);
   } catch (error) {
     console.error("Error adding child element:", error);
   }
   ```

---

# Children

> Retrieve and insert child elements, offering programmatic ways to change page structure.

Correctly handling an element's child elements is crucial for keeping the [element hierarchy](https://university.webflow.com/lesson/element-hierarchy?topics=getting-started) organized. These Element methods let you retrieve and insert child elements, offering programmatic ways to change page structure.

To effectively use these methods, check if an element has its `Children` property set to `true`. This property is read-only, so it's important to use elements that have this attribute. Using these methods with elements that don't have this property will return an error.

<video autoplay loop muted>
    

  <source src="https://dhygzobemt712.cloudfront.net/Web/developers/videos/24005_API%20Documentation_Children.webm" type="video/webm" />

    Your browser does not support HTML video.
</video>

## Methods

The Children property supports the following methods:

<CardGroup>
  <Card title="Get children" href="/designer/reference/element-children/getChildren">
    Get child elements from a parent element in the element hierarchy.
  </Card>

  <Card title="Prepend" href="/designer/reference/element-children/prepend">
    Insert a new element onto the page as the first child of the target element.
  </Card>

  <Card title="Append" href="/designer/reference/element-children/append">
    Insert a new element onto the page as the last child of the target element.
  </Card>
</CardGroup>

---

# Get Children

> Get child elements from a parent element in the element hierarchy.

## `element.getChildren()`

Get child elements from a parent element in the [element hierarchy.](https://university.webflow.com/lesson/element-hierarchy?topics=getting-started)

## Syntax

```typescript
element.getChildren(): Promise<Array<AnyElement>>
```

## Returns

**Promise\<Array\<*AnyElement*>>**

A Promise that resolves to an array of `AnyElement` objects.

`AnyElement` represents the various element types available in a Webflow project. See a full list of supported element types in our [Designer Extension type definitions.](https://www.npmjs.com/package/@webflow/designer-extension-typings?activeTab=code)

## Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement?.children) {
  
  // Get Children
  const children = await selectedElement.getChildren();

  // Get Children Details
  const childrenDetailsPromises = children.map(async (child) => {


    // Get style details of children (This is the name of the element in the Designer)
    let styleDetails = null;
    let childStyles = child.styles ? await child.getStyles() : null;

    if (childStyles) {
      const styleNamesPromises = childStyles.map(style => style.getName());
      styleDetails = await Promise.all(styleNamesPromises);
    }

    return {
      styleDetails,
    };
  });

  // Print details of child elements
  const childrenDetails = await Promise.all(childrenDetailsPromises);
  console.log(childrenDetails); // This will now log the array of child details
}
```

## Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

```
```

---

# Prepend

> Insert a new element onto the page as the first child of the target element.

## `element.prepend(newElement)`

Insert a new element onto the page as the first child of the target element.

## Syntax

```typescript
element.prepend(newElement: ElementPreset | Component): Promise<AnyElement>
```

## Parameters

* **newElement**:  *Webflow\.elementPresets.\<preset>* - The new element to be inserted into the hierarchy. This element is derived from the `Webflow.elementPresets` object, which contains all Webflow elements that can be inserted onto the canvas.

## Returns

**Promise\<*AnyElement*>**

A Promise that resolves to an `AnyElement` object. `AnyElement` represents the various element types available in a Webflow project. See a full list of supported element types in our [Designer Extension type definitions.](https://www.npmjs.com/package/@webflow/designer-extension-typings?activeTab=code)

## Example

```typescript
// Get Selected Element
const el = await webflow.getSelectedElement();


// Check if element supports child elements
if (el?.children) {

  // Prepend newElement as a child to of the selected element
  const newElement = await el?.prepend(webflow.elementPresets.DivBlock)

  // Print element Details
  console.log(JSON.stringify(newElement))

}
```

## Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

```
```

---

# Append

> Insert a new element onto the page as the last child of the target element.

## `element.append(newElement)`

Insert a new element onto the page as the last child of the target element.

## Syntax

```typescript
element.append(newElement: ElementPreset | Component): Promise<AnyElement>
```

## Parameters

* **newElement**:  *Webflow\.elementPresets.\<preset>* - The new element to be inserted into the hierarchy. This element is derived from the `Webflow.elementPresets` object, which contains all Webflow elements that can be inserted onto the canvas.

## Returns

**Promise\<*AnyElement*>**

A Promise that resolves to an `AnyElement` object. `AnyElement` represents the various element types available in a Webflow project. See a full list of supported element types in our [Designer Extension type definitions.](https://www.npmjs.com/package/@webflow/designer-extension-typings?activeTab=code)

## Example

```typescript
// Get Selected Element
const el = await webflow.getSelectedElement();

// Check if element supports child elements
if (el?.children) {

  // Append newElement as a child to of the selected element
  const newElement = await el?.append(webflow.elementPresets.DivBlock)

  // Print element Details
  console.log(JSON.stringify(newElement))

}
```

## Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

```
```

---

# Custom Attributes

> Attach additional, specialized data to elements with custom attributes.

In Webflow, you can use native elements, styles, and settings to create standard HTML attributes like `href`, `class`, and `id`.

However, [Custom Attributes](https://university.webflow.com/lesson/custom-attributes?topics=elements) extend this capability. Custom attributes allow developers to attach additional, specialized data to elements, helping broaden the scope of a site's functionality and interactivity. In Webflow,  they are especially useful for enriching custom code, [particularly when integrated with CMS data.](https://university.webflow.com/lesson/custom-attributes?topics=elements#how-to-use-cms-data-in-custom-attributes)

To use the methods below, choose an element with a `CustomAttributes` property of `true`. Using these methods with elements that don't have this property will return an error.

## Methods

<CardGroup>
  <Card title="Get All Custom Attributes" href="/designer/reference/custom-attributes/getAllCustomAttributes">
    Get all custom attributes for an element.
  </Card>

  <Card title="Get Custom Attribute" href="/designer/reference/custom-attributes/getCustomAttribute">
    Get a custom attribute for an element by name.
  </Card>

  <Card title="Set Custom Attribute" href="/designer/reference/custom-attributes/setCustomAttribute">
    Set a custom attribute for an element.
  </Card>

  <Card title="Remove Custom Attribute" href="/designer/reference/custom-attributes/removeCustomAttribute">
    Remove a custom attribute from an element.
  </Card>
</CardGroup>

---

# Get All Custom Attributes

> 

## **`element.getAllCustomAttributes()`**

Get all [custom HTML attributes](https://university.webflow.com/lesson/custom-attributes?topics=elements) from an element.

### Syntax

```typescript
element.getAllCustomAttributes():Promise<Array<NamedValue>>
```

### Returns

**Promise\<Array\<*NamedValue*>>** - `[{name: string, value: string}]`

A Promise that resolves to an array of *NamedValue*  custom attribute objects.

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.customAttributes) {

  // Get All Custom Attributes
  const customAttributes = await selectedElement.getAllCustomAttributes()
  console.log(customAttributes)

}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Get Custom Attribute

> 

## `element.getCustomAttribute(name)`

Get [custom HTML attributes](https://university.webflow.com/lesson/custom-attributes?topics=elements) for an element by name.

### Syntax

```typescript
element.getCustomAttribute(name: string):Promise<null | string>
```

### Parameters

* **`name`** :   *String* - The name of the custom attribute.

### Returns

**Promise\<*String*>**

A Promise that resolves to the value of the named custom attribute.

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.customAttributes) {

  // Get Custom Attribute by Name
  const customAttribute = await selectedElement.getCustomAttribute('tooltip')
  console.log(customAttribute)

}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Set Custom Attribute

> 

## **`element.setCustomAttribute(name, value)`**

Set a [custom HTML attribute](https://university.webflow.com/lesson/custom-attributes?topics=elements) for an element.

### Syntax

```typescript
element.setCustomAttribute(name: string, value: string): Promise<null>
```

### Parameters

* **`name`** :   *String* - The name of the custom attribute.
* **`value`** :   *String* - The value of the custom attribute

The value of the named custom attribute.

### Returns

**Promise\<`null`>**

A promise that resolves to `null`

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.customAttributes) {

  // Set Custom Attribute
  await selectedElement.setCustomAttribute("tooltip", "my tooltip value")

}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

---

# Remove Custom Attribute

> 

## `element.removeCustomAttribute(name)`

Remove a [custom HTML attribute](https://university.webflow.com/lesson/custom-attributes?topics=elements) from an element.

### Syntax

```typescript
element.removeCustomAttribute(name: string): Promise<null>
```

### Parameters

* **`name`** :   *String* - The name of the custom attribute.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.customAttributes) {

  // Remove Custom Attribute
  await selectedElement.removeCustomAttribute("tooltip")

}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

---

# Styles

> 

Styles are key to creating dynamic and responsive designs in Webflow.

Styles are managed through [Classes](https://university.webflow.com/lesson/style-panel-overview?topics=layout-design#classes-overview) in the Designer interface. When working with the API, these Classes are represented as [Style Objects](/designer/reference/styles-overview) that contain CSS properties. The methods in this section allow you to programmatically control which styles are applied to elements.

<Card
  title="Style Objects"
  href="/designer/reference/styles-overview"
  icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Styles.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Styles.svg" alt="" className="block dark:hidden" />
        </>
    }
  iconPosition="left"
>
  Learn more about managing CSS properties with [Style Methods](/designer/reference/styles-overview)
</Card>

## Methods

The Styles property supports the following methods:

<CardGroup>
  <Card title="Get styles" href="/designer/reference/element-styles/getStyles">
    Retrieve the current style properties of the element for analysis or changes.
  </Card>

  <Card title="Set styles" href="/designer/reference/element-styles/setStyles">
    Set styles on an element.
  </Card>
</CardGroup>

---

# Get Styles

> Retrieve the current style properties of the element for analysis or changes.

## `element.getStyles()`

Retrieve the current style properties of the element for analysis or changes.

## Syntax

```typescript
element.getStyles(): Promise<Array<Style>>
```

## Returns

**Promise\<*Style*>**

A Promise that resolves to an array of [Style Objects](/designer/reference/styles-overview).

## Example

```javascript
// Get Selected Element
const selectedElement = await Webflow.getSelectedElement()

if (selectedElement?.styles) {

  // Get Styles
  const styles = await selectedElement.getStyles()

  // Get Style Details
  const styleDetails = styles.map(async style => {

    const styleName = await style.getName()
    const styleProperties = await style.getProperties()

    return {
      Name: styleName,
      Properties: styleProperties,
      ID: style.id,
    }

  })

  // Print Style Details
  console.log(await Promise.all(styleDetails))
}
```

## Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

```
```

---

# Set Styles

> Set styles on an element.

## `element.setStyles(styles)`

Set styles on an element.

## Syntax

```typescript
element.setStyles(styles: Array<Style>): Promise<null>>
```

## Parameters

* **`Styles`**: *Array* of [Style Objects](/designer/reference/styles-overview) - The array of styles to set.

## Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

## Example

```javascript
// Get Selected Element
const selectedElement = await Webflow.getSelectedElement()

if (selectedElement?.styles) {

  // Create a new style
  const newStyle = await Webflow.createStyle("MyCustomStyle");

  // Set properties for the style
  newStyle.setProperties({
    'background-color': "blue",
    'font-size': "32px",
    'font-weight': "bold",
  });

  // Set style on selected element
  selectedElement.setStyles([newStyle])

}
```

---

# Text Content

> Manage an element's text content.

Managing text content is essential for keeping content fresh and relevant. These methods let you handle an element's text, ensuring it's always up-to-date.

To effectively use the methods, choose an element that already has its `textContent` property set to `true`. This property is read-only, so it's important to select elements that have this attribute. Using these methods with elements that don't have this property will return an error.

## Methods

The Text Content property supports the following methods:

<CardGroup>
  <Card title="Get text content" href="/designer/reference/get-text-content">
    Get text content from an element.
  </Card>

  <Card title="Set text content" href="/designer/reference/set-text-content">
    Get text content from an element.
  </Card>
</CardGroup>

---

# Set Text Content

> Set text content for an element.

## `element.setTextContent(content)`

Set text content for an element that supports text content.

## Syntax

```typescript
element.setTextContent(content: string): Promise<null>>
```

## Parameters

* **`content`**: `string` - Text to add to the element

## Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

## Example

```typescript
// Get Selected Element
const selectedElement = await Webflow.getSelectedElement()

if (selectedElement?.textContent) {

  // Set and print text content
  const text = await selectedElement.setTextContent("Lorem Ipsum")
  console.log(selectedElement.textContent)

}
```

## Designer Ability

| Designer Ability | Locale | Branch | Workflow | Sitemode |
| :--------------- | :----- | :----- | :------- | :------- |
| **canEdit**      | Any    | Any    | Canvas   | Any      |

```
```

---

# Get Text Content

> Get text content from an element.

The text content of an element is automatically created as a child `StringElement` of that element. To retrieve the text content from an element, you'll need to retrieve the child `StringElement` of your target element. Once you've retrieved the `StringElement` you can use the [`getText()`](/designer/reference/string-element/getText) method to get the text content of your element.

## Example

```typescript
// Get Selected Element
const selectedElement = await Webflow.getSelectedElement();

if (selectedElement?.textContent && selectedElement?.children) {

  // Get Child Elements
  const children = await selectedElement.getChildren();

  // Filter string elements from children
  const strings = children.filter(child => child.type === "String");

  // Initialize an array to hold text content
  let textContent = [];

  // Loop over string elements to get text
  for (const myString of strings) {
    if (myString.type === "String") {
      const text = await myString.getText();
      textContent.push(text);
    }
  }

  // Print text
  console.log(textContent);
}
```

---

# Element Types & Methods

> Learn about different element types and their specific methods in the Webflow Designer API

Each element in Webflow has a specific type that determines its functionality and available methods. While all elements share some [common properties](/designer/reference/element-properties-methods), each element type also has specialized methods that allow you to manipulate that element's unique characteristics.

## Identifying element types

You can identify an element's type using the `element.type` property:

```typescript
const element = await Webflow.getSelectedElement();
console.log(element.type); // "DOM", "String", "Image", etc.
```

## Element presets

To add a specific element type to the canvas, you can use the [`webflow.elementPresets` object](/designer/reference/element-presets), which contains a set of presets for different element types available in the designer.

```typescript
const element = await webflow.elementPresets.DOM;
await webflow.addElement(element);
```

## Element type methods

Different element types have unique methods tailored to their functionality. Always check an element's type before applying type-specific methods.

<CardGroup>
  <Card
    title="DOM Elements"
    href="/designer/reference/dom-element"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/CodeBrackets.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/CodeBrackets.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Customize HTML elements with methods for HTML tags and attributes.
  </Card>

  <Card
    title="Strings"
    href="/designer/reference/string-element"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Typography.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Typography.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Work with text content and manipulate their text values.
  </Card>

  <Card
    title="Images"
    href="/designer/reference/image-element"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Image.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Image.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Manage images and alt text.
  </Card>

  <Card
    title="Headings"
    href="/designer/reference/heading-element"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/TypographyDetails.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/TypographyDetails.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Modify heading levels and heading content.
  </Card>

  <Card
    title="Links"
    href="/designer/reference/link-element"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/SiteWWW.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/SiteWWW.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Configure links with methods for URLs, targets, and link settings.
  </Card>

  <Card
    title="Forms"
    href="/designer/reference/forms"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Test.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Test.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Create and configure forms and form field settings.
  </Card>

  <Card
    title="Components"
    href="/designer/reference/component-element"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Components.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Components.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconSize="12"
    iconPosition="left"
  >
    Get components definitions from a component instance.
  </Card>
</CardGroup>

## Best Practices for Element Type Methods

1. **Always check element type before applying type-specific methods**:
   ```typescript
   if (element.type === "Image") {
     // Now it's safe to use Image methods
     await element.setAltText("Description");
   }
   ```

2. **Handle multiple element types with type guards**:
   ```typescript
   function handleElement(element) {
     switch(element.type) {
       case "String":
         return element.getText();
       case "Image":
         return element.getAsset();
       default:
         return null;
     }
   }
   ```

3. **Combine property and type checks for maximum safety**:
   ```typescript
   if (element.type === "DOM" && element.children) {
     // Safe to use DOM methods and children methods
     await element.setTag("div");
     await element.append(Webflow.elementPresets.Paragraph);
   }
   ```

---

# Element Presets

> 

The Element Presets object specifies all the element types available in the designer. Using the Element Presets object, Apps can select native Webflow elements to insert onto a page with the [element creation methods.](/designer/reference/insert-element-before)

Each preset corresponds to a unique element type, complete with its own properties and methods. For a deeper understanding of how to manipulate these element properties and methods, consult the [Designer Extension type definitions](https://www.npmjs.com/package/@webflow/designer-extension-typings?activeTab=code) and documentation on [element properties and methods.](/designer/reference/elements-overview)

<Warning title="Use the DOM element when presets aren't available">
  Not all element types are supported through presets. Additionally, not all
  presets have methods to support updating the element. If a preset or
  functionality isn't available for the element you want to create, you can use
  the [custom DOM element](/designer/reference/dom-element) method to create a
  custom element.
</Warning>

### Layout & Structure

For fundamental building blocks of page layout and responsive design.

| Preset     | Element Type                                  |
| ---------- | --------------------------------------------- |
| DivBlock   | BlockElement                                  |
| DOM        | [DOMElement](/designer/reference/dom-element) |
| Grid       | GridElement                                   |
| HFlex      | HFlexElement                                  |
| QuickStack | LayoutElement                                 |
| Row        | RowElement                                    |
| Section    | SectionElement                                |
| VFlex      | VFlexElement                                  |

### Typography & Content

For elements whose primary purpose is to display text or structured content.

| Preset     | Element Type                                          |
| ---------- | ----------------------------------------------------- |
| Blockquote | BlockquoteElement                                     |
| Heading    | [HeadingElement](/designer/reference/heading-element) |
| List       | ListElement                                           |
| ListItem   | ListItemElement                                       |
| Paragraph  | ParagraphElement                                      |
| RichText   | RichTextElement                                       |
| TextBlock  | BlockElement                                          |

### Navigation & Interactive

For elements that users interact with to navigate or trigger actions.

| Preset          | Element Type                                    |
| --------------- | ----------------------------------------------- |
| Button          | [LinkElement](/designer/reference/link-element) |
| DropdownWrapper | DropdownWrapperElement                          |
| LightboxWrapper | LightboxWrapperElement                          |
| LinkBlock       | [LinkElement](/designer/reference/link-element) |
| NavbarWrapper   | NavbarWrapperElement                            |
| Pagination      | PaginationElement                               |
| SliderWrapper   | SliderWrapperElement                            |
| TabsWrapper     | TabsWrapperElement                              |
| TextLink        | [LinkElement](/designer/reference/link-element) |

### Forms

All presets related to creating and managing forms.

| Preset                | Element Type                                    |
| --------------------- | ----------------------------------------------- |
| FormBlockLabel        | FormBlockLabelElement                           |
| FormButton            | FormButtonElement                               |
| FormCheckboxInput     | AnyElement                                      |
| FormFileUploadWrapper | AnyElement                                      |
| FormForm              | [FormElement](/designer/reference/form-element) |
| FormRadioInput        | AnyElement                                      |
| FormReCaptcha         | FormReCaptchaElement                            |
| FormSelect            | AnyElement                                      |
| FormTextarea          | AnyElement                                      |
| FormTextInput         | AnyElement                                      |

### Pre-built Layouts

For professionally designed, pre-built sections that can be inserted onto a page.

| Preset                           | Element Type   |
| -------------------------------- | -------------- |
| LayoutFeaturesList               | SectionElement |
| LayoutFeaturesMetrics            | SectionElement |
| LayoutFeaturesTable              | SectionElement |
| LayoutFooterDark                 | SectionElement |
| LayoutFooterLight                | SectionElement |
| LayoutFooterSubscribe            | SectionElement |
| LayoutGalleryOverview            | SectionElement |
| LayoutGalleryScroll              | SectionElement |
| LayoutGallerySlider              | SectionElement |
| LayoutHeroHeadingCenter          | SectionElement |
| LayoutHeroHeadingLeft            | SectionElement |
| LayoutHeroHeadingRight           | SectionElement |
| LayoutHeroStack                  | SectionElement |
| LayoutHeroSubscribeLeft          | SectionElement |
| LayoutHeroSubscribeRight         | SectionElement |
| LayoutHeroWithoutImage           | SectionElement |
| LayoutLogosQuoteBlock            | SectionElement |
| LayoutLogosQuoteDivider          | SectionElement |
| LayoutLogosTitleLarge            | SectionElement |
| LayoutLogosTitleSmall            | SectionElement |
| LayoutLogosWithoutTitle          | SectionElement |
| LayoutNavbarLogoCenter           | SectionElement |
| LayoutNavbarLogoLeft             | SectionElement |
| LayoutNavbarNoShadow             | SectionElement |
| LayoutPricingComparison          | SectionElement |
| LayoutPricingItems               | SectionElement |
| LayoutPricingOverview            | SectionElement |
| LayoutTeamCircles                | SectionElement |
| LayoutTeamSlider                 | SectionElement |
| LayoutTestimonialColumnDark      | SectionElement |
| LayoutTestimonialColumnLight     | SectionElement |
| LayoutTestimonialImageLeft       | SectionElement |
| LayoutTestimonialSliderLarge     | SectionElement |
| LayoutTestimonialSliderSmall     | SectionElement |
| LayoutTestimonialStack           | SectionElement |
| StructureLayoutQuickStack1plus2  | SectionElement |
| StructureLayoutQuickStack1x1     | SectionElement |
| StructureLayoutQuickStack2plus1  | SectionElement |
| StructureLayoutQuickStack2x1     | SectionElement |
| StructureLayoutQuickStack2x2     | SectionElement |
| StructureLayoutQuickStack3x1     | SectionElement |
| StructureLayoutQuickStack4x1     | SectionElement |
| StructureLayoutQuickStackMasonry | SectionElement |

### E-commerce

All presets specific to Webflow's E-commerce functionality.

| Preset                                       | Element Type                                        |
| -------------------------------------------- | --------------------------------------------------- |
| CommerceAddToCartWrapper                     | AnyElement                                          |
| CommerceCartQuickCheckoutActions             | CommerceCartQuickCheckoutActionsElement             |
| CommerceCartWrapper                          | AnyElement                                          |
| CommerceCheckoutAdditionalInfoSummaryWrapper | CommerceCheckoutAdditionalInfoSummaryWrapperElement |
| CommerceCheckoutAdditionalInputsContainer    | AnyElement                                          |
| CommerceCheckoutCustomerInfoSummaryWrapper   | AnyElement                                          |
| CommerceCheckoutDiscounts                    | AnyElement                                          |
| CommerceCheckoutFormContainer                | AnyElement                                          |
| CommerceCheckoutOrderItemsWrapper            | AnyElement                                          |
| CommerceCheckoutOrderSummaryWrapper          | AnyElement                                          |
| CommerceCheckoutPaymentSummaryWrapper        | CommerceCheckoutPaymentSummaryWrapperElement        |
| CommerceCheckoutShippingSummaryWrapper       | AnyElement                                          |
| CommerceDownloadsWrapper                     | CommerceDownloadsWrapperElement                     |
| CommerceOrderConfirmationContainer           | AnyElement                                          |
| CommercePayPalCheckoutButton                 | CommercePayPalCheckoutButtonElement                 |
| CommercePaypalCheckoutFormContainer          | AnyElement                                          |

### CMS & Dynamic Content

For elements related to displaying content from the Webflow CMS.

| Preset        | Element Type         |
| ------------- | -------------------- |
| DynamoWrapper | DynamoWrapperElement |

### Media & Embeds

For displaying images, videos, and third-party content.

| Preset                 | Element Type                                      |
| ---------------------- | ------------------------------------------------- |
| BackgroundVideoWrapper | BackgroundVideoWrapperElement                     |
| Facebook               | FacebookElement                                   |
| HtmlEmbed              | HtmlEmbedElement                                  |
| Image                  | [ImageElement](/designer/reference/image-element) |
| MapWidget              | MapWidgetElement                                  |
| Spline                 | AnyElement                                        |
| Twitter                | TwitterElement                                    |
| Video                  | VideoElement                                      |
| YouTubeVideo           | YouTubeVideoElement                               |

### User Accounts

All presets related to user authentication and account management.

| Preset                      | Element Type                              |
| --------------------------- | ----------------------------------------- |
| LogIn                       | UserLogInFormWrapperElement               |
| ResetPassword               | UserResetPasswordFormWrapperElement       |
| SignUp                      | UserSignUpFormWrapperElement              |
| UpdatePassword              | UserUpdatePasswordFormWrapperElement      |
| UserAccount                 | UserAccountWrapperElement                 |
| UserAccountSubscriptionList | UserAccountSubscriptionListWrapperElement |
| UserLogOutLogIn             | UserLogOutLogInElement                    |

### Advanced & Miscellaneous

A catch-all for more technical or specialized elements.

| Preset                      | Element Type                                    |
| --------------------------- | ----------------------------------------------- |
| Animation                   | AnyElement                                      |
| BlockContainer              | BlockContainerElement                           |
| CodeBlock                   | CodeBlockElement                                |
| IX2InstanceFactoryOnClass   | BlockElement                                    |
| IX2InstanceFactoryOnElement | [LinkElement](/designer/reference/link-element) |

This list outlines all presets that can be used with `webflow.elementPresets.<preset>`.

| Preset                                       | Element Type                                          |
| -------------------------------------------- | ----------------------------------------------------- |
| Animation                                    | AnyElement                                            |
| BackgroundVideoWrapper                       | BackgroundVideoWrapperElement                         |
| BlockContainer                               | BlockContainerElement                                 |
| Blockquote                                   | BlockquoteElement                                     |
| Button                                       | [LinkElement](/designer/reference/link-element)       |
| CodeBlock                                    | CodeBlockElement                                      |
| CommerceAddToCartWrapper                     | AnyElement                                            |
| CommerceCartQuickCheckoutActions             | CommerceCartQuickCheckoutActionsElement               |
| CommerceCartWrapper                          | AnyElement                                            |
| CommerceCheckoutAdditionalInfoSummaryWrapper | CommerceCheckoutAdditionalInfoSummaryWrapperElement   |
| CommerceCheckoutAdditionalInputsContainer    | AnyElement                                            |
| CommerceCheckoutCustomerInfoSummaryWrapper   | AnyElement                                            |
| CommerceCheckoutDiscounts                    | AnyElement                                            |
| CommerceCheckoutFormContainer                | AnyElement                                            |
| CommerceCheckoutOrderItemsWrapper            | AnyElement                                            |
| CommerceCheckoutOrderSummaryWrapper          | AnyElement                                            |
| CommerceCheckoutPaymentSummaryWrapper        | CommerceCheckoutPaymentSummaryWrapperElement          |
| CommerceCheckoutShippingSummaryWrapper       | AnyElement                                            |
| CommerceDownloadsWrapper                     | CommerceDownloadsWrapperElement                       |
| CommerceOrderConfirmationContainer           | AnyElement                                            |
| CommercePayPalCheckoutButton                 | CommercePayPalCheckoutButtonElement                   |
| CommercePaypalCheckoutFormContainer          | AnyElement                                            |
| DivBlock                                     | BlockElement                                          |
| DOM                                          | DOMElement                                            |
| DropdownWrapper                              | DropdownWrapperElement                                |
| DynamoWrapper                                | DynamoWrapperElement                                  |
| Facebook                                     | FacebookElement                                       |
| FormBlockLabel                               | FormBlockLabelElement                                 |
| FormButton                                   | FormButtonElement                                     |
| FormCheckboxInput                            | AnyElement                                            |
| FormFileUploadWrapper                        | AnyElement                                            |
| FormForm                                     | AnyElement                                            |
| FormRadioInput                               | AnyElement                                            |
| FormReCaptcha                                | FormReCaptchaElement                                  |
| FormSelect                                   | AnyElement                                            |
| FormTextarea                                 | AnyElement                                            |
| FormTextInput                                | AnyElement                                            |
| Grid                                         | GridElement                                           |
| Heading                                      | [HeadingElement](/designer/reference/heading-element) |
| HFlex                                        | HFlexElement                                          |
| HtmlEmbed                                    | HtmlEmbedElement                                      |
| Image                                        | AnyElement                                            |
| IX2InstanceFactoryOnClass                    | BlockElement                                          |
| IX2InstanceFactoryOnElement                  | [LinkElement](/designer/reference/image-element)      |
| LayoutFeaturesList                           | SectionElement                                        |
| LayoutFeaturesMetrics                        | SectionElement                                        |
| LayoutFeaturesTable                          | SectionElement                                        |
| LayoutFooterDark                             | SectionElement                                        |
| LayoutFooterLight                            | SectionElement                                        |
| LayoutFooterSubscribe                        | SectionElement                                        |
| LayoutGalleryOverview                        | SectionElement                                        |
| LayoutGalleryScroll                          | SectionElement                                        |
| LayoutGallerySlider                          | SectionElement                                        |
| LayoutHeroHeadingCenter                      | SectionElement                                        |
| LayoutHeroHeadingLeft                        | SectionElement                                        |
| LayoutHeroHeadingRight                       | SectionElement                                        |
| LayoutHeroStack                              | SectionElement                                        |
| LayoutHeroSubscribeLeft                      | SectionElement                                        |
| LayoutHeroSubscribeRight                     | SectionElement                                        |
| LayoutHeroWithoutImage                       | SectionElement                                        |
| LayoutLogosQuoteBlock                        | SectionElement                                        |
| LayoutLogosQuoteDivider                      | SectionElement                                        |
| LayoutLogosTitleLarge                        | SectionElement                                        |
| LayoutLogosTitleSmall                        | SectionElement                                        |
| LayoutLogosWithoutTitle                      | SectionElement                                        |
| LayoutNavbarLogoCenter                       | SectionElement                                        |
| LayoutNavbarLogoLeft                         | SectionElement                                        |
| LayoutNavbarNoShadow                         | SectionElement                                        |
| LayoutPricingComparison                      | SectionElement                                        |
| LayoutPricingItems                           | SectionElement                                        |
| LayoutPricingOverview                        | SectionElement                                        |
| LayoutTeamCircles                            | SectionElement                                        |
| LayoutTeamSlider                             | SectionElement                                        |
| LayoutTestimonialColumnDark                  | SectionElement                                        |
| LayoutTestimonialColumnLight                 | SectionElement                                        |
| LayoutTestimonialImageLeft                   | SectionElement                                        |
| LayoutTestimonialSliderLarge                 | SectionElement                                        |
| LayoutTestimonialSliderSmall                 | SectionElement                                        |
| LayoutTestimonialStack                       | SectionElement                                        |
| LightboxWrapper                              | LightboxWrapperElement                                |
| LinkBlock                                    | [LinkElement](/designer/reference/link-element)       |
| List                                         | ListElement                                           |
| ListItem                                     | ListItemElement                                       |
| LogIn                                        | UserLogInFormWrapperElement                           |
| MapWidget                                    | MapWidgetElement                                      |
| NavbarWrapper                                | NavbarWrapperElement                                  |
| Pagination                                   | PaginationElement                                     |
| Paragraph                                    | ParagraphElement                                      |
| QuickStack                                   | LayoutElement                                         |
| ResetPassword                                | UserResetPasswordFormWrapperElement                   |
| RichText                                     | RichTextElement                                       |
| Row                                          | RowElement                                            |
| SearchForm                                   | AnyElement                                            |
| Section                                      | SectionElement                                        |
| SignUp                                       | UserSignUpFormWrapperElement                          |
| SliderWrapper                                | SliderWrapperElement                                  |
| Spline                                       | AnyElement                                            |
| StructureLayoutQuickStack1plus2              | SectionElement                                        |
| StructureLayoutQuickStack1x1                 | SectionElement                                        |
| StructureLayoutQuickStack2plus1              | SectionElement                                        |
| StructureLayoutQuickStack2x1                 | SectionElement                                        |
| StructureLayoutQuickStack2x2                 | SectionElement                                        |
| StructureLayoutQuickStack3x1                 | SectionElement                                        |
| StructureLayoutQuickStack4x1                 | SectionElement                                        |
| StructureLayoutQuickStackMasonry             | SectionElement                                        |
| TabsWrapper                                  | TabsWrapperElement                                    |
| TextBlock                                    | BlockElement                                          |
| TextLink                                     | [LinkElement](/designer/reference/link-element)       |
| Twitter                                      | TwitterElement                                        |
| UpdatePassword                               | UserUpdatePasswordFormWrapperElement                  |
| UserAccount                                  | UserAccountWrapperElement                             |
| UserAccountSubscriptionList                  | UserAccountSubscriptionListWrapperElement             |
| UserLogOutLogIn                              | UserLogOutLogInElement                                |
| VFlex                                        | VFlexElement                                          |
| Video                                        | VideoElement                                          |
| YouTubeVideo                                 | YouTubeVideoElement                                   |

---

# DOM Element

> The custom element, also known as the DOM Element, is a placeholder element that you can add any HTML custom attribute, tag, or text to — thereby “creating” that element on the canvas.

The [custom element](https://university.webflow.com/lesson/custom-element?topics=elements), also known as the DOM Element, is a placeholder element that you can add any HTML custom attribute, tag, or text to — thereby "creating" that element on the canvas. This is useful for adding HTML elements to the canvas that aren't available as native Webflow elements.

Once you add the custom element to the canvas, you're able to use the below methods, which are only available to the DOM element, as well as the more general element methods to manage children, styles, and text content.

## Methods

The DOM Element supports the following specific methods:

<CardGroup>
  <Card title="Get HTML Tag" href="/designer/reference/dom-element/getTag">
    Retrieve the HTML tag of the element.
  </Card>

  <Card title="Set HTML Tag" href="/designer/reference/dom-element/setTag">
    Set the value of the specified HTML tag of the DOMElement.
  </Card>

  <Card title="Get All Attributes" href="/designer/reference/dom-element/getAllAttributes">
    Retrieve all HTML attributes for the DOMElement.
  </Card>

  <Card title="Get Attribute" href="/designer/reference/dom-element/getAttribute">
    Retrieve the value of the named HTML attribute of the DOMElement.
  </Card>

  <Card title="Set Attribute" href="/designer/reference/dom-element/setAttribute">
    Set the value of the specified HTML attribute of the DOMElement.
  </Card>

  <Card title="Remove Attribute" href="/designer/reference/dom-element/removeAttribute">
    Remove the specified HTML attribute from the DOMElement.
  </Card>
</CardGroup>

## Properties

| Property           | Description                                                                                       | Type      | Example                                                 |
| :----------------- | :------------------------------------------------------------------------------------------------ | :-------- | :------------------------------------------------------ |
| `id`               | Unique identifier for the element composed of two identifiers, the `component `and the `element`. | `object`  | `{component: "64c813...", element: "5edf8e59-71f9..."}` |
| `type`             | Specifies the type of the element.                                                                | `string`  | "DOM"                                                   |
| `styles`           | Indicates whether the element can contain styles.                                                 | `boolean` | `true`                                                  |
| `children`         | Indicates whether an element can contain child elements.                                          | `boolean` | `true`                                                  |
| `textContent`      | Indicates whether an element can contain text content.                                            | `boolean` | `true`                                                  |
| `customAttributes` | Indicates whether an element can contain custom attributes.                                       | `boolean` | `false`                                                 |

---

# Get Tag

> Retrieve the HTML tag of the element.

## `element.getTag()`

Retrieve the [HTML tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) of the element.

## Syntax

```typescript
element.getTag(): Promise<null | string>
```

## Returns

* **Promise\<*String*>** : If the element has a tag, a promise that resolves to the tag value.
* **Promise\<`null`>**: If the element does not have a tag, a promise that resolves to `null`

## Example

```typescript
// Get All Elements and find first DOM Element
const elements = await webflow.getAllElements()
const DOMElement = elements.find(element => element.type === "DOM")

if (DOMElement?.type === "DOM") {

  // Get DOM Element's Tag
  const tag = await DOMElement.getTag()
  console.log(tag)

} else {
  console.log('No DOM Element Found')
}
```

## Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

```
```

---

# Set Tag

> Set the value of the specified HTML tag of the DOMElement.

## `element.setTag(tag)`

Set the value of the specified [HTML tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) of the DOMElement.

## Syntax

```typescript
element.setTag(tag: string): Promise<null>
```

## Parameters

* tag : `string` - The [HTML tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) to set for the element

## Returns

**Promise\<`null`>**

A promise that resolves to `null`

## Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement?.children) {

  // Create and append DOM Element
  const DOMElement = await selectedElement.append(webflow.elementPresets.DOM);
  console.log(DOMElement)

  // Set Tag
  await DOMElement?.setTag('img');
  const tag = await DOMElement.getTag()
  }
```

## Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

```
```

---

# Get All Attributes

> Retrieve all HTML attributes for the DOMElement.

## `element.getAllAttributes()`

Retrieve all [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) for the DOMElement. Use this method instead of the 'Custom Attribute' methods.

## Syntax

```typescript
element.getAllAttributes(): Promise<Array<NamedValue>>
```

## Returns

**Promise\<Array\<*NamedValue*>>** - `[{name: string, value:string }]`

A promise that resolves to an array of, `NamedValue` attribute objects.

## Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement?.type === "DOM") {

  const customAttributes = await selectedElement.getAllAttributes()
  console.log(customAttributes)
}
```

## Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

```
```

---

# Get Attribute

> Retrieve the value of the named HTML attribute of the DOMElement.

## `element.getAttribute(name)`

Retrieve the value of the named [HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) of the DOMElement. Use this method instead of the 'Custom Attribute' methods.

## Syntax

```typescript
element.getAttribute(name: string): Promise<null | string>
```

## Parameters

* name : `string` - The name of the attribute

## Returns

* **Promise\<*String*>**:  A promise that resolves to the value of the named HTML attribute for the DOMElement.
* **Promise\<`null`>**: If the attribute doesn't exist, this method will return `null`.

## Example

```typescript
// Get All Elements and find first DOM Element
const elements = await webflow.getAllElements()
const DOMElement = elements.find(element => element.type === "DOM")

if (DOMElement?.type === "DOM") {

  // Get DOM Element's Attribute by Name
  const attribute = await DOMElement.getAttribute("MyAttribute")
  console.log(attribute)

} else {
  console.log('No DOM Element Found')
}
```

## Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

```
```

---

# Set Attribute

> Set the value of the specified HTML attribute of the DOMElement.

## `element.setAttribute(name, value)`

Set the value of the specified [HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) of the DOMElement. Use this method instead of the 'Custom Attribute' methods.

## Syntax

```typescript
element.setAttribute(name: string, value: string): Promise<null>
```

## Parameters

* name : `string` - The name of the attribute to set
* value : `string` - The value of the attribute to set

## Returns

**Promise\<`null`>**

A promise that resolves to `null`

## Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement?.children) {

  // Create and append DOM Element
  const DOMElement = await selectedElement.append(webflow.elementPresets.DOM);
  
  if (DOMElement?.type === "DOM") {
    // Set Tag
    await DOMElement.setTag('img');
    
    // Set HTML Attribute
    await DOMElement.setAttribute('src', 'https://example.com/image.jpg');
    await DOMElement.setAttribute('alt', 'Example image');
    await DOMElement.setAttribute('width', '300');
    
    // Get all attributes to verify
    const attributes = await DOMElement.getAllAttributes();
    console.log(attributes);
  }
}
```

## Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

```
```

---

# Remove Attribute

> Remove the specified HTML attribute from the DOMElement.

## `element.removeAttribute(name)`

Remove the specified [HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) from the DOMElement. Use this method instead of the 'Custom Attribute' methods.

## Syntax

```typescript
element.removeAttribute(name: string): Promise<null>
```

## Parameters

* name : `string` - The name of the attribute to remove

## Returns

**Promise\<`null`>**

A promise that resolves to `null`

## Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement?.type === "DOM") {
  // Get current attributes
  const beforeAttributes = await selectedElement.getAllAttributes();
  console.log('Before removal:', beforeAttributes);
  
  // Remove an attribute
  await selectedElement.removeAttribute('width');
  
  // Get attributes after removal to verify
  const afterAttributes = await selectedElement.getAllAttributes();
  console.log('After removal:', afterAttributes);
}
```

## Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |

```
```

---

# String Element

> The String element represents a string value within the Webflow Designer

The String element represents text content of an element within the Webflow Designer.

String elements can't be created directly, and are only created when adding elements that contain text content.

## Methods

You can get and set the text value of a string element using the following methods:

<CardGroup>
  <Card title="Get Text" href="/designer/reference/string-element/getText">
    Retrieves the text value from a String element.
  </Card>

  <Card title="Set Text" href="/designer/reference/string-element/setText">
    Sets the text value on a String element, overwriting any prior text value.
  </Card>
</CardGroup>

{" "}

## Properties

| Property           | Description                                                                                       | Type      | Example                                                 |
| :----------------- | :------------------------------------------------------------------------------------------------ | :-------- | :------------------------------------------------------ |
| `id`               | Unique identifier for the element composed of two identifiers, the `component `and the `element`. | `object`  | `{component: "64c813...", element: "5edf8e59-71f9..."}` |
| `type`             | Specifies the type of the element.                                                                | `string`  | 'String'                                                |
| `children`         | Indicates whether an element can contain child elements.                                          | `boolean` | `false`                                                 |
| `styles`           | Indicates if the element can be styled.                                                           | `boolean` | `false`                                                 |
| `textContent`      | Indicates if the element can contain text content                                                 | `boolean` | `false`                                                 |
| `customAttributes` | Indicates whether an element can have custom attributes                                           | `boolean` | `false`                                                 |

## Supported Elements

The following elements contain string elements as children, which can be accessed using the String element methods.

* `DOMElement`
* `BlockquoteElement`
* `EmphasizedElement`
* `HeadingElement`
* `LinkElement`
* `ParagraphElement`
* `SpanElement`
* `StrongElement`
* `SuperscriptElement`
* `SubscriptElement`
* `InlineCodeElement`
* `CommerceBuyNowButtonElement`
* `CommerceCartOpenLinkElement`
* `CommerceCartCheckoutButtonElement`
* `CommerceCartCloseLinkElement`
* `CommerceCartRemoveLinkElement`
* `CommerceCartOptionListItemLabelElement`
* `CommerceCartOptionListItemValueElement`
* `CommerceCartQuickCheckoutButtonElement`
* `CommerceCartApplePayButtonElement`
* `CommerceCheckoutLabelElement`
* `CommerceLabelElement`
* `CommerceCheckoutPlaceOrderButtonElement`
* `CommerceCheckoutBillingAddressToggleLabelElement`
* `CommerceCheckoutOrderItemOptionListItemLabelElement`
* `CommerceCheckoutOrderItemOptionListItemValueElement`
* `CommerceCheckoutSummaryLabelElement`
* `CommerceCheckoutDiscountsButtonElement`
* `CommerceCheckoutDiscountsLabelElement`
* `DropdownLinkElement`
* `LightboxWrapperElement`
* `FormBlockLabelElement`
* `FormInlineLabelElement`
* `NavbarLinkElement`
* `TabsLinkElement`
* `UserFormBlockLabelElement`

---

# Get Text

> Retrieves the text value from a String element.

## `element.getText()`

Retrieves the text value from a String element.

## Syntax

```typescript
element.getText(): Promise<null | string>
```

## Returns

**Promise\<`string`>**

A Promise that always resolves to a *String* value, which is the text content of the string element.

## Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement?.textContent && selectedElement?.children) {

  // Get Child Elements
  const children = await selectedElement.getChildren();

  // Filter string elements from children
  const strings = children.filter(child => child.type === "String");

  // Initialize an array to hold text content
  let textContent = [];

  // Loop over string elements to get text
  for (const myString of strings) {
    if (myString.type === "String") {
      const text = await myString.getText();
      textContent.push(text);
    }
  }

  // Print text
  console.log(textContent);
}
```

## Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

```
```

---

# Set Text

> Sets the text value on a String element, overwriting any prior text value.

## `element.setText(text)`

Sets the text value on a String element, overwriting any prior text value.

## Syntax

```typescript
element.setText(text: string): Promise<null>
```

## Parameters

* text: `string` - The new text for your `StringElement`

## Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

## Example

```typescript
// Get all elements and find the first StringElement
const allElements = await webflow.getAllElements();
const foundElement = allElements.find(el => el.type === "String");

if (foundElement) {
    // Check that element has the method in order to use it
    if ('setText' in foundElement) {
        const elementText = foundElement.setText("Hello Element 🚀"); // Set Text
    }
} else {
    console.log('Element not found on page');
}
```

## Designer Ability

| Designer Ability | Locale | Branch | Workflow | Sitemode |
| :--------------- | :----- | :----- | :------- | :------- |
| **canEdit**      | Any    | Any    | Canvas   | Any      |

```
```

---

# Component Instances

> 

The component element represents a [component instance](/designer/reference/components-overview#component-instance) within the Webflow Designer.

## Methods

You can get the associated component definition of a component instance using the following method:

<Card title="Get Component" href="/designer/reference/component-element/getComponent">
  Retrieves the associated component definition of the component instance.
</Card>

<Card
  title="Creating & managing components"
  href="/designer/reference/components-overview"
  icon={
    <>
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Components.svg" alt="" className="hidden dark:block" />
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Components.svg" alt="" className="block dark:hidden" />
    </>
  }
  iconPosition="left"
  iconSize="12"
>
  Learn more about creating and managing component definitions in the [Components Overview](/designer/reference/components-overview).
</Card>

## Properties

| Property           | Description                                                                                       | Type      | Example                                                 |
| :----------------- | :------------------------------------------------------------------------------------------------ | :-------- | :------------------------------------------------------ |
| `id`               | Unique identifier for the element composed of two identifiers, the `component `and the `element`. | `object`  | `{component: "64c813...", element: "5edf8e59-71f9..."}` |
| `type`             | Specifies the type of the element.                                                                | `string`  | "ComponentInstance"                                     |
| `children`         | Indicates whether the element can contain child elements.                                         | `boolean` | `false`                                                 |
| `customAttributes` | Indicates whether the element can have custom attributes.                                         | `boolean` | `false`                                                 |
| `styles`           | Indicates whether the element can contain styles.                                                 | `boolean` | `false`                                                 |
| `textContent`      | Indicates whether the element can contain text content                                            | `boolean` | `false`                                                 |

---

# Get Component

> Retrieves the associated component of the element.

## `element.getComponent()`

Retrieves the associated [component definition](/designer/reference/components-overview#component-definition) of the component instance.

## Syntax

```typescript
element.getComponent(): Promise<Component>
```

## Returns

**Promise\<*Component*>**

A Promise that resolves to a [Component Object](/designer/reference/components-overview)

## Example

```typescript
// Select Component Element on Page
const elements = await webflow.getAllElements()
const componentInstance = elements.find(el => el.type === 'ComponentInstance')

if (componentInstance?.type === "ComponentInstance") {

  // Get Component object from instance
  const component = await componentInstance?.getComponent()
  const componentName = await component.getName()
  console.log(componentName)
} else {
  console.log("No component element found")
}
```

## Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

```
```

---

# Heading Element

> 

The Heading element represents an Headings the Webflow Designer. Create a Heading element using the [Heading element preset](/designer/reference/element-presets).

## Methods

You can get and set the heading level of a heading element using the following methods:

<CardGroup>
  <Card title="Get Heading Level" href="/designer/reference/heading-element/getHeadingLevel">
    Retrieves the heading level of a heading element.
  </Card>

  <Card title="Set Heading Level" href="/designer/reference/heading-element/setHeadingLevel">
    Set the heading level of a heading element.
  </Card>
</CardGroup>

{" "}

## Properties

| Property           | Description                                                                                       | Type      | Example                                                 |
| :----------------- | :------------------------------------------------------------------------------------------------ | :-------- | :------------------------------------------------------ |
| `id`               | Unique identifier for the element composed of two identifiers, the `component `and the `element`. | `object`  | `{component: "64c813...", element: "5edf8e59-71f9..."}` |
| `type`             | Specifies the type of the element.                                                                | 'string'  | 'Heading'                                               |
| `children`         | Indicates if the element can contain child elements.                                              | `boolean` | `true`                                                  |
| `customAttributes` | Indicates if the element can contain custom attributes.                                           | `boolean` | `true`                                                  |
| `styles`           | Indicates if the element can contain styles.                                                      | `boolean` | `true`                                                  |
| `textContent`      | Indicates if the element can contain text content                                                 | `boolean` | `true`                                                  |

---

# Get Heading Level

> Retrieves the heading level of a heading element.

## `element.getHeadingLevel()`

Retrieves the heading level of a heading element.

## Syntax

```typescript
element.getHeadingLevel(): Promise<null | 1 | 2 | 3 | 4 | 5 | 6>
```

## Returns

**Promise\<`level`>**: *Number* - 1 | 2 | 3 | 4 | 5 | 6

A Promise that resolves to the value of the heading level.

## Example

```typescript
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.type === 'Heading'){

  const headingLevel = await selectedElement.getHeadingLevel()
  console.log(headingLevel)

} else {
  console.log("Selected Element is not a Heading Element")
}
```

## Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

```
```

---

# Set Heading Level

> Set the heading level of a heading element.

## `element.setHeadingLevel(level)`

Set the heading level of a heading element.

## Syntax

```typescript
element.setHeadingLevel(level: 1 | 2 | 3 | 4 | 5 | 6): Promise<null>
```

## Parameters

* `level`: *Number* - 1 | 2 | 3 | 4 | 5 | 6

## Returns

**Promise\<`null`>**

A Promise that resolves to `null`

## Example

```typescript
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.type === 'Heading'){

  const headingLevel = await selectedElement.setHeadingLevel(1)
  console.log(headingLevel)

} else {
  console.log("Selected Element is not a Heading Element")
}
```

## Designer Ability

| Designer Ability | Locale | Branch | Workflow | Sitemode |
| :--------------- | :----- | :----- | :------- | :------- |
| **canEdit**      | Any    | Any    | Canvas   | Any      |

```
```

---

# Image Element

> 

The Image element represents an [image](https://university.webflow.com/lesson/image?topics=elements) in the Webflow Designer. Create an Image element using the [Image element preset](/designer/reference/element-presets).

## Methods

You can get and set the asset and alt text of an image element using the following methods:

<CardGroup>
  <Card title="Get Asset" href="/designer/reference/image-element/getAsset">
    Retrieve an asset from an Image element.
  </Card>

  <Card title="Set Asset" href="/designer/reference/image-element/setAsset">
    Add an asset to an Image element.
  </Card>

  <Card title="Get Alt Text" href="/designer/reference/image-element/getAltText">
    Retrieve the alt text for an Image element on the canvas.
  </Card>

  <Card title="Set Alt Text" href="/designer/reference/image-element/setAltText">
    Set the Alt Text for an Image element on the canvas.
  </Card>
</CardGroup>

{" "}

---

# Properties

| Property           | Description                                                                                               | Type      | Example                                                 |
| :----------------- | :-------------------------------------------------------------------------------------------------------- | :-------- | :------------------------------------------------------ |
| `id`               | Unique identifier for the element composed of two identifiers, the `component `and the `element`.         | `object`  | `{component: "64c813...", element: "5edf8e59-71f9..."}` |
| `type`             | Specifies the type of the element.                                                                        | `string`  | "Image"                                                 |
| `children`         | Indicates whether the element can contain child elements.                                                 | `boolean` | `false`                                                 |
| `customAttributes` | Indicates whether the element can have custom attributes.                                                 | `boolean` | `true`                                                  |
| `styles`           | Indicates whether the element can contain styles.                                                         | `boolean` | `true`                                                  |
| `textContent`      | Indicates whether the element can contain text content                                                    | `boolean` | `false`                                                 |
| `appConnections`   | Indicates whether the element supports [App Connections](/designer/reference/app-intents-and-connections) | `boolean` | `true`                                                  |

---

# Get Asset

> Retrieve an asset from an Image element.

## `element.getAsset()`

Retrieve an asset from an Image element.

## Syntax

```typescript
element.getAsset(): Promise<Asset | null>
```

## Returns

**Promise\<*Asset*>** | `null`

A Promise that resolves to an Asset. If an element doesn't have an asset, the method will return `null`

## Example

```typescript
// Get Selected Element
const el = await webflow.getSelectedElement()

// Check if element can have children
if (el?.children) {
  // Create a new Image Element using Element Presets
  const imgEl = await el.append(webflow.elementPresets.Image)

  // Check element type
  if (imgEl.type === 'Image') {
    // Get asset from Image element
    const myAsset = await imgEl.getAsset()
    console.log(myAsset)
    }
}
```

## Designer Ability

Checks for authorization only

| Designer Ability | Locale | Branch | Workflow | Sitemode |
| :--------------- | :----- | :----- | :------- | :------- |
| canAccessAssets  | any    | any    | any      | any      |

```
```

---

# Set Asset

> Add an asset to an Image element.

## `element.setAsset(asset)`

Add an asset to an Image element.

## Syntax

```typescript
element.setAsset(asset: Asset | null): Promise<null>
```

## Parameters

* **Asset**:  *Asset* - The asset to be inserted into the Image Element. Can be retrieved with the method `webflow.getAssetById`

## Returns

**Promise\<`null`>**

A Promise that resolves to `null`

## Example

```typescript
// Get Selected Element
const el = await webflow.getSelectedElement()

// Check if element can have children
if (el?.children) {
  // Create a new Image Element using Element Presets
  const imgEl = await el.append(webflow.elementPresets.Image)

  // Get asset by ID
  const asset = await webflow.getAssetById(assetId)

  // Check element type
  if (imgEl.type === 'Image') {
    // Set asset as the "src" of the Image Element
    await imgEl.setAsset(asset)
  }
}
```

## Designer Ability

| Designer Ability      | Locale | Branch | Workflow | Sitemode |
| :-------------------- | :----- | :----- | :------- | :------- |
| canModifyImageElement | any    | main   | canvas   | any      |

```
```

---

# Get Alt Text

> Retrieve the Alt Text for an Image element on the canvas.

## `element.getAltText()`

Retrieve the alt text for an Image element on the canvas. If the Image element doesn't have alt text, the API will retrieve the alt text from the associated Asset.

## Syntax

```typescript
element.getAltText(): Promise<string>
```

## Returns

**Promise\<*String*>**

A Promise that resolves to the string of alt text.

## Example

```typescript
// Get Selected Element
const el = await webflow.getSelectedElement()
if (el?.type === 'Image') {
  // Get alt text
  const alt = await el.getAltText()
  console.log(alt)
} else {
  console.error('Please select an image element')
  await webflow.notify({
    type: 'Error',
    message: 'Please select an Image Element',
  })
}
```

## Designer Ability

Checks for authorization only

| Designer Ability | Locale | Branch | Workflow | Sitemode |
| :--------------- | :----- | :----- | :------- | :------- |
| canAccessAssets  | any    | any    | any      | any      |

```
```

---

# Set Alt Text

> Set the Alt Text for an Image element on the canvas.

## `element.setAltText(altText)`

Set the Alt Text for an Image element on the canvas.

## Syntax

```typescript
element.setAltText(altText: string | null): Promise<null>
```

## Parameters

* **alt text**:  *string* - The alternate text for an image

## Returns

**Promise\<`null`>**

A Promise that resolves to `null`

## Example

```typescript
// Get Selected Element
const el = await webflow.getSelectedElement()

// Check element type
if (el?.type === 'Image') {
  // Set alt text
  await el.setAltText('Descriptive alternative text for this image')
  
  // Verify by getting the alt text
  const alt = await el.getAltText()
  console.log(alt)
} else {
  console.error('Please select an image element')
  await webflow.notify({
    type: 'Error',
    message: 'Please select an Image Element',
  })
}
```

## Designer Ability

| Designer Ability      | Locale | Branch | Workflow | Sitemode |
| :-------------------- | :----- | :----- | :------- | :------- |
| canModifyImageElement | any    | main   | canvas   | any      |

```
```

---

# Link Element

> 

The Link element represents a [Link Block](https://university.webflow.com/lesson/link-block?topics=elements) in the Webflow Designer. Create a link element using any of the listed presets.

## Supported presets

The following presets create link elements.

* [LinkBlock](/designer/reference/element-presets)
* [TextLink](/designer/reference/element-presets)
* [Button](/designer/reference/element-presets)
* [LinkBlock](/designer/reference/element-presets)

## Methods

You can get and set the target value of a link element using the following methods.

<CardGroup>
  <Card title="Get Link Target" href="/designer/reference/link-element/getTarget">
    Get the target value of the link block element.
  </Card>

  <Card title="Set Link Settings" href="/designer/reference/link-element/setSettings">
    Apply settings for a Link Block element.
  </Card>
</CardGroup>

{" "}

---

# Properties

| Property           | Description                                                                                       | Type      | Example                                                 |
| :----------------- | :------------------------------------------------------------------------------------------------ | :-------- | :------------------------------------------------------ |
| `id`               | Unique identifier for the element composed of two identifiers, the `component `and the `element`. | `object`  | `{component: "64c813...", element: "5edf8e59-71f9..."}` |
| `type`             | Specifies the type of the element.                                                                | `string`  | "Link"                                                  |
| `children`         | Indicates whether the element can contain child elements.                                         | `boolean` | `false`                                                 |
| `customAttributes` | Indicates whether the element can have custom attributes.                                         | `boolean` | `true`                                                  |
| `styles`           | Indicates whether the element can contain styles.                                                 | `boolean` | `true`                                                  |
| `textContent`      | Indicates whether the element can contain text content                                            | `boolean` | `false`                                                 |

---

# Get Link Target

> Get the target value of the link block element.

## `element.getTarget()`

Get the target value of the link block element. Links can target URLs emails, and phone numbers, as well as pages within a site, elements on a page, and attachments.

## Syntax

```typescript
element.getTarget(): Promise<null | string | Page | AnyElement | Asset>;
```

## Returns

**Promise\<*null | string | Page | AnyElement | Asset*>**

A Promise that resolves to the target value of the link. The target value can be a string, Page, Element, or an Asset object.

## Example

```typescript
const elements = await webflow.getAllElements(); // Get All Elements
const links = elements.filter((element) => element.type === "Link"); // Filter for Link elements

// Print target value of each link element
for (const link of links) {
  const targetValue = await link.getTarget();
  console.log(`ID: ${link.id.element}, Target Value: ${targetValue}`);
}
```

## Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | any    | any    | any      | any      |

```
```

---

# Set Link Settings

> Apply settings for a Link Block element.

## `element.setSettings(mode, target, metadata)`

Apply settings for a Link Block element. Including the type of link, its value, and metadata settings.

## Syntax

```typescript
element.setSettings(
  mode: 'url' | 'page' | 'pageSection' | 'email' | 'phone' | 'attachment';
  target: string | Page | Element | Asset;
  metadata?: {openInNewTab?: boolean; subject?: string;}
): Promise<null>
```

## Parameters

| Parameter  | Type                                                                                           | Description                                                                                                                                                  |
| ---------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `mode`     | enum <br /> `'url'` \| `'page'` \| `'pageSection'` \| `'email'` \| `'phone'` \| `'attachment'` | The type of link to set. Can be a URL, email, phone number, link to another page or page section, or an attachment.                                          |
| `target`   | `string` \| `Page` \| `Element` \| `Asset`                                                     | The value of the link. The value type is determined by the selected mode. For example, if the link mode is "attachment", the method expects an Asset object. |
| `metadata` | object (optional)                                                                              | Optional metadata for link settings. See fields below.                                                                                                       |

**metadata fields:**

| Field          | Type    | Description                           |
| -------------- | ------- | ------------------------------------- |
| `openInNewTab` | boolean | Choose to open the link in a new tab. |
| `subject`      | string  | The subject line of an `email` link.  |

## Returns

**Promise\<`null`>**

A Promise that resolves to `null`

## Example

```typescript
// Get Selected Element
const element = await webflow.getSelectedElement();

if (element) {
  const newLink = await element.after(webflow.elementPresets.LinkBlock); // Create new link element
  await newLink.setSettings("url", "https://www.webflow.com", {
    openInNewTab: true,
  }); // Set link element settings
  const targetValue = await newLink.getTarget(); // Get target value
  console.log(targetValue);
}
```

## Designer ability

| Designer Ability | Locale | Branch | Workflow | Sitemode |
| :--------------- | :----- | :----- | :------- | :------- |
| **canEdit**      | Any    | Any    | Canvas   | Any      |

```
```

---

# Forms

> Learn how to create and manage forms with the Designer API.

Webflow Forms enable users to capture and collect information from visitors on a site.

## Creating a form

<div>
  <div>
    Use the `FormForm` [element preset](/designer/reference/element-presets) to create a form.

    <CodeBlocks>
      ```javascript
      // Get the currently selected element
      let el = await Webflow.getSelectedElement();

      // Create a form element
      let form = await el.after(webflow.elementPresets.FormForm);

      ```
    </CodeBlocks>

    When you create a form using the `FormForm` preset, it automatically generates a complete [form structure](#form-structure) with default form fields, as well as a success and error message.
  </div>

  <div>
    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/45b5e84f6c1581d2b6acb9531d5355689eda82ff445e762e1acc3cfe7bc38cab/products/designer/pages/Elements/element-methods/form-element/assets/FormForm.png" alt="Form Element Preset" />
    </Frame>
  </div>
</div>

## Form structure

A Webflow form consists of several nested elements that work together:

| Element              | Description                                                                 | Parent Element |
| -------------------- | --------------------------------------------------------------------------- | -------------- |
| `FormWrapper`        | The outermost container element that encapsulates the entire form structure |                |
| `FormForm`           | The main form element containing all form fields and inputs                 | `FormWrapper`  |
| `FormSuccessMessage` | The success message after successful form submission                        | `FormWrapper`  |
| `FormErrorMessage`   | The error message if form submission fails                                  | `FormWrapper`  |
| `FormInput`          | An individual form field.                                                   |                |
| `FormBlockLabel`     | The label for a `FormInput`                                                 | `FormInput`    |
| `FormButton`         | The submit button for the form                                              | `FormForm`     |

## Form inputs

Form inputs are the individual fields that collect user information. It's recommended to create a wrapper to contain each input and it's corresponding [label](#form-labels).

You can create form inputs using the following element presets:

* `FormTextInput`
* `FormTextarea`
* `FormSelect`
* `FormCheckboxInput`
* `FormRadioInput`

It's a best practice to wrap each input and its corresponding label (e.g. `FormBlockLabel`) in a container element, such as a `DivBlock`, to keep them organized.

**Example**

<CodeBlocks>
  ```javascript title="Inline"
  // Get the currently selected element
  let el = await Webflow.getSelectedElement();

  // Create a form element
  let formWrapper = await el.after(webflow.elementPresets.FormForm);

  // Add a text input with a label
  let formWrapperChildren = await formWrapper.getChildren(); // Get the form element
  let formInputs = formWrapperChildren[0]; // Get the form element
  let inputWrapper = await formInputs.append(webflow.elementPresets.DOMElement); // Create a wrapper for the input and label
  let label = await inputWrapper.append(webflow.elementPresets.FormBlockLabel); // Create a label
  let input = await inputWrapper.append(webflow.elementPresets.FormTextInput); // Create a text input

  ```
</CodeBlocks>

### Form labels

Each input should have a label that describes the information it collects. Create a label using the `FormBlockLabel` element preset to label each input.

## Methods

### Form element methods

<Note>
  The methods documented below apply specifically to the `FormForm` and
  `FormWrapper` elements.
</Note>

The Form Element supports the following specific methods:

<CardGroup>
  <Card title="Get form name" href="/designer/reference/form-element/get-form-name">
    Retrieves the name of the form.
  </Card>

  <Card title="Set form name" href="/designer/reference/form-element/set-form-name">
    Sets the name of the form.
  </Card>

  <Card title="Get form settings" href="/designer/reference/form-element/get-form-settings">
    Retrieves the settings of the form.
  </Card>

  <Card title="Set form settings" href="/designer/reference/form-element/set-form-settings">
    Sets the settings of the form.
  </Card>
</CardGroup>

### Form input methods

The following methods apply to form input elements:

<CardGroup>
  <Card title="Get required status" href="/designer/reference/form-element/get-required-status">
    Retrieves the required status of a form input.
  </Card>

  <Card title="Set required status" href="/designer/reference/form-element/set-required-status">
    Sets the required status of a form input.
  </Card>

  <Card title="Get input name" href="/designer/reference/form-element/get-name-input-field">
    Retrieves the name of the input field.
  </Card>

  <Card title="Set input name" href="/designer/reference/form-element/set-name-input-field">
    Sets the name of the input field.
  </Card>

  <Card title="Get input type" href="/designer/reference/form-element/get-type-input-field">
    Retrieves the type of the input field.

    <span>
      Only supported by `FormTextInput`.
    </span>
  </Card>

  <Card title="Set input type" href="/designer/reference/form-element/set-type-input-field">
    Sets the type of the input field.

    <span>
      Only supported by `FormTextInput`.
    </span>
  </Card>
</CardGroup>

{" "}

## Properties

| Property           | Description                                             | Type      | Example                                                 |
| ------------------ | ------------------------------------------------------- | --------- | ------------------------------------------------------- |
| `id`               | The unique identifier for the form.                     | `object`  | `{component: "64c813...", element: "5edf8e59-71f9..."}` |
| `type`             | The type of the element.                                | `string`  | `"FormForm" \|\| "FormWrapper`                          |
| `children`         | Indicates if the element can contain child elements.    | `boolean` | `true`                                                  |
| `customAttributes` | Indicates if the element can contain custom attributes. | `boolean` | `true`                                                  |
| `styles`           | Indicates if the element can contain styles.            | `boolean` | `true`                                                  |
| `textContent`      | Indicates if the element can contain text content.      | `boolean` | `false`                                                 |
| `appConnections`   | Indicates if the element can contain app connections.   | `boolean` | `true`                                                  |

---

# Get Form Name

> Retrieves the name of the form.

## `FormForm.getName()`

Retrieves the name of the form.

## Syntax

```typescript
form.getName(): Promise<string>
```

## Returns

**Promise\<`name`>**: *String* - The name of the form.

## Example

```typescript
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.type === 'FormForm' || selectedElement?.type === 'FormWrapper'){

  const name = await selectedElement.getName()
  console.log(name)

} else {
  console.log("Selected Element is not a Form Element")
}
```

## Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

```
```

---

# Set Form Name

> Sets the name of the form.

## `FormForm.setName(name)`

Sets the name of the form.

## Syntax

```typescript
form.setName(name: string): Promise<null>
```

## Parameters

* `name`: *String* - The name of the form.

## Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

## Example

```typescript
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.type === 'FormForm' || selectedElement?.type === 'FormWrapper'){

  await selectedElement.setName("My Form")

} else {
  console.log("Selected Element is not a Form Element")
}
```

## Designer Ability

| Designer Ability | Locale | Branch | Workflow | Sitemode |
| :--------------- | :----- | :----- | :------- | :------- |
| **canEdit**      | Any    | Any    | canvas   | Any      |

```
```

---

# Get Form Settings

> Retrieves the settings of the form.

## `FormForm.getSettings()`

Retrieves the settings of the form.

<Note>
  To get the settings of the form in a specific state, first use the `form.setSettings()` method to set form to the desired `state`. Then use `form.getSettings()` to retrieve the settings of the form.
</Note>

## Syntax

```typescript
form.getSettings(): Promise<FormSettings>
```

## Returns

**Promise\<`FormSettings`>**: *Object* - A promise that resolves to the settings of the form.

**`FormSettings` Properties**

| Property | Type       | Description                                                     |
| -------- | ---------- | --------------------------------------------------------------- |
| state    | FormState  | The current state of the form ('normal', 'success', or 'error') |
| name     | string     | The name of the form                                            |
| redirect | string     | The URL to redirect to after form submission                    |
| action   | string     | The URL where the form data will be submitted                   |
| method   | FormMethod | The HTTP method used for form submission ('get' or 'post')      |

## Example

```typescript
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.type === 'FormForm' || selectedElement?.type === 'FormWrapper'){

  const formSettings = await selectedElement.getSettings()
  console.log(formSettings)

  /* Example Response
  {
    state: "success",
    name: "My Form",
    redirect: "https://my-site.com/thank-you",
    action: "https://{dc}.api.mailchimp.com/3.0/lists/{list_id}/members",
    method: "post"
  } */

} else {
  console.log("Selected Element is not a Form Element")
}
```

## Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

```
</rewritten_file>
```

---

# Set Form Settings

> Sets the settings of the form.

## `FormForm.setSettings(settings)`

Sets the settings of the form.

## Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    FORM_STATE: "FormState",
    FORM_METHOD: "FormMethod",
  }}
  tooltips={{
    FORM_STATE: "The current state of the form ('normal', 'success', or 'error')",
    FORM_METHOD: "The HTTP method used for form submission ('get' or 'post')",
  }}
>
  ```typescript
  form.setSettings(
    settings:{
      state: {{FORM_STATE}},
      name: string,
      redirect: string,
      action: string,
      method: {{FORM_METHOD}},
    }
  ): Promise<null> 
  ```
</Template>

{/* <!-- vale on --> */}

## Parameters

* `settings`: *Partial\<`FormSettings`>* - The settings to set for the form.

**`FormSettings` Properties**

| Property | Type       | Description                                                     |
| -------- | ---------- | --------------------------------------------------------------- |
| state    | FormState  | The current state of the form ('normal', 'success', or 'error') |
| name     | string     | The name of the form                                            |
| redirect | string     | The URL to redirect to after form submission                    |
| action   | string     | The URL where the form data will be submitted                   |
| method   | FormMethod | The HTTP method used for form submission ('get' or 'post')      |

## Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

## Example

```typescript
const selectedElement = await webflow.getSelectedElement()  

if (selectedElement?.type === 'FormForm' || selectedElement?.type === 'FormWrapper'){

  await selectedElement.setSettings({
    state: "success",
    name: "My Form",
    redirect: "https://www.my-site.com/thank-you",
    action: "https://{dc}.api.mailchimp.com/3.0/lists/{list_id}/members", 
    method: "post"
  })

} else {
  console.log("Selected Element is not a Form Element")
}
```

## Designer Ability

| Designer Ability | Locale | Branch | Workflow | Sitemode |
| :--------------- | :----- | :----- | :------- | :------- |
| **canEdit**      | Any    | Any    | canvas   | Any      |

---

# Form Inputs

> An overview of form input elements and how to create and manage them with the Designer API.

Form inputs are the individual fields within a form that collect information from site visitors. With the Designer APIs, you can create various types of inputs, configure their properties, and manage their behavior.

## Creating Form Inputs

You can create different types of form inputs using the following `elementPresets`:

* `FormTextInput`
* `FormTextarea`
* `FormSelect`
* `FormCheckboxInput`
* `FormRadioInput`

It's a best practice to wrap each input and its corresponding label (e.g. `FormBlockLabel`) in a container element, such as a `DivBlock`, to keep them organized.

### Example

This example demonstrates how to add a new `FormTextInput` with a `FormBlockLabel` to an existing form.

```javascript
// Get the form element on the page
const formEl = await webflow.getSelectedElement();

// Ensure we have a form element selected
if (formEl && formEl.type === "FormForm") {
  // Create a wrapper for the new input and label
  const inputWrapper = await formEl.append(webflow.elementPresets.DivBlock);

  // Add a label to the wrapper
  const label = await inputWrapper.append(
    webflow.elementPresets.FormBlockLabel
  );
  await label.setText("Your Email");

  // Add a text input to the wrapper
  const input = await inputWrapper.append(webflow.elementPresets.FormTextInput);

  // Configure the new input
  await input.setName("Email");
  await input.setInputType("email");
  await input.setRequired(true);
}
```

## Form Input Methods

The following methods are available for interacting with form input elements. Note that supported element types may vary by method.

<CardGroup>
  <Card title="Get required status" href="/designer/reference/form-element/get-required-status">
    Retrieves the required status of a form input.
  </Card>

  <Card title="Set required status" href="/designer/reference/form-element/set-required-status">
    Sets the required status of a form input.
  </Card>

  <Card title="Get input name" href="/designer/reference/form-element/get-name-input-field">
    Retrieves the name of the input field.
  </Card>

  <Card title="Set input name" href="/designer/reference/form-element/set-name-input-field">
    Sets the name of the input field.
  </Card>

  <Card title="Get input type" href="/designer/reference/form-element/get-type-input-field">
    Retrieves the type of the input field.{" "}

    <span>
      Only supported by `FormTextInput`.
    </span>
  </Card>

  <Card title="Set input type" href="/designer/reference/form-element/set-type-input-field">
    Sets the type of the input field.{" "}

    <span>
      Only supported by `FormTextInput`.
    </span>
  </Card>
</CardGroup>

## FAQs

<Accordion title="Can I set placeholder text on a form input field?">
  Yes, you can set placeholder text using custom attributes. This overrides any placeholder text configured in the Designer's Input Field settings.

  For example:

  ```javascript
  const el = await webflow.getSelectedElement()
  const input = await el.append(webflow.elementPresets.FormTextInput);

  await input.setCustomAttribute("placeholder", "Enter your email");
  ```
</Accordion>

<Accordion title="Can I set the options for a preset select input field?">
  No, currently setting the options for a preset select input field isn't supported via the Designer API.

  You can add a select input field with options by using the [custom DOM element](/designer/reference/dom-element) method to create a select input field with choices as children.

  For example:

  ```javascript
    const selectedElement = await webflow.getSelectedElement()

    if (selectedElement && selectedElement.children) {
      // Create a wrapper div using the element builder
      const wrapper = webflow.elementBuilder(webflow.elementPresets.DOM)
      wrapper.setTag('div')

      // Create a select element using the DOM preset and append it to the wrapper
      const select = wrapper.append(webflow.elementPresets.DOM)
      select.setTag('select')
      select.setAttribute('name', 'custom-select')

      // Define the options for the select field
      const choices = [
        { name: 'First choice', value: 'first' },
        { name: 'Second choice', value: 'second' },
        { name: 'Third choice', value: 'third' },
      ]

      // Create and append option elements
      choices.forEach((choice) => {
        const option = select.append(webflow.elementPresets.DOM)
        option.setTag('option')
        option.setAttribute('value', choice.value)
        option.setTextContent(choice.name)
      })

      // Add the wrapper with the custom select element to the page
      const wrapperElement = await selectedElement.append(wrapper)

      if (wrapperElement && wrapperElement.children) {
        // Prepend a FormBlockLabel to the wrapper
        const label = await wrapperElement.prepend(
          webflow.elementPresets.FormBlockLabel,
        )
        if (label.type === 'FormBlockLabel') {
          await label.setTextContent('Custom Select Field')
        }
      }

      console.log(
        'Custom select field with wrapper and label created successfully.',
      )
    } else {
      console.log('Please select an element that can contain child elements.')
    }

  ```
</Accordion>

<Accordion title="Can I create a form with the Element Builder?">
  No, currently only DOM elements can be created with the Element Builder.
</Accordion>

---

# Get Required Status

> Retrieves the required status of a form input.

## `formInput.getRequired()`

Retrieves the required status of a form input.

This method is applicable to the following form input types:

* `FormCheckboxInput`
* `FormFileUploadWrapper`
* `FormRadioInput`
* `FormSelect`
* `FormTextarea`
* `FormTextInput`

## Syntax

```typescript
formInput.getRequired(): Promise<boolean>
```

## Returns

**Promise\<`boolean`>**: *Boolean* - A promise that resolves to the required status of the form input.

## Example

```typescript
const selectedElement = await webflow.getSelectedElement()

const formInputTypes = [
  'FormCheckboxInput',
  'FormFileUploadWrapper', 
  'FormRadioInput',
  'FormSelect',
  'FormTextarea',
  'FormTextInput'
];

if (selectedElement?.type && formInputTypes.includes(selectedElement.type)) {

  const required = await selectedElement.getRequired()
  console.log(required)

} else {
  console.log("Selected Element is not a Form Input Element")
}
```

## Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

```
```

---

# Set Required Status

> Sets the required status of a form input.

## `formInput.setRequired(value)`

Sets the required status of a form input.

This method is applicable to the following form input types:

* `FormCheckboxInput`
* `FormFileUploadWrapper`
* `FormRadioInput`
* `FormSelect`
* `FormTextarea`
* `FormTextInput`

## Syntax

```typescript
formInput.setRequired(value: boolean): Promise<null>
```

## Parameters

* `value`: *Boolean* - The required status of the form input.

## Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

## Example

```typescript
const selectedElement = await webflow.getSelectedElement()

const formInputTypes = [
  'FormCheckboxInput',
  'FormFileUploadWrapper', 
  'FormRadioInput',
  'FormSelect',
  'FormTextarea',
  'FormTextInput'
];

if (selectedElement?.type && formInputTypes.includes(selectedElement.type)) {
  await selectedElement.setRequired(true)

} else {
  console.log("Selected Element is not a Form Input Element")
}
```

## Designer Ability

| Designer Ability | Locale | Branch | Workflow | Sitemode |
| :--------------- | :----- | :----- | :------- | :------- |
| **canEdit**      | Any    | Any    | canvas   | Any      |

```
```

---

# Get input name

> Retrieves the name of the input field.

## `formInput.getName()`

Retrieves the name of the input field.

This method supports the following `FormInput` elements:

* `FormCheckboxInput`
* `FormFileUploadWrapper`
* `FormRadioInput`
* `FormSelect`
* `FormTextarea`
* `FormTextInput`

#

### Syntax

```typescript
formInput.getName(): Promise<string>;
```

### Returns

**A Promise that resolves to a string**

The name of the input field.

#

### Example

```typescript
// Get the currently selected element
let formInput = await Webflow.getSelectedElement();

// Get the name of the input field
let name = await formInput.getName();

console.log(name);
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Set input name

> Sets the name of the input field.

## `formInput.setName(name)`

Sets the name of the input field.

This method supports the following `FormInput` elements:

* `FormCheckboxInput`
* `FormFileUploadWrapper`
* `FormRadioInput`
* `FormSelect`
* `FormTextarea`
* `FormTextInput`

#

### Syntax

```typescript
formInput.setName(name: string): Promise<null>;
```

### Returns

**A Promise that resolves to `null`**

#

### Example

```typescript
// Get the currently selected element
let formInput = await Webflow.getSelectedElement();

// Set the name of the input field
await formInput.setName("Email");
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Get input type

> Retrieves the type of the input field.

## `formInput.getInputType()`

Retrieves the HTML type of a FormTextInput field.

Supported element:

* `FormTextInput`

#

### Syntax

```typescript
formInput.getInputType(): Promise<'text' | 'email' | 'password' | 'tel' | 'number' | 'url' | null>;
```

### Returns

**A Promise resolving to a string or null**

Returns the HTML type of the `FormTextInput` element (`'text'`, `'email'`, etc.). Returns `null` if the type isn't found.

#

### Example

```typescript
// Get the currently selected element
let formTextInput = await webflow.getSelectedElement();

// Get the input type
let type = await formTextInput.getInputType();

console.log(type); // e.g., "email"
```

### Designer ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Set input type

> Sets the type of the input field.

## `formInput.setInputType()`

Sets the HTML type of a FormTextInput field.

Supported element:

* `FormTextInput`

#

### Syntax

```typescript
formInput.setInputType(type: 'text' | 'email' | 'password' | 'tel' | 'number' | 'url'): Promise<null>;
```

### Returns

**A Promise that resolves to `null`**

#

### Example

```typescript
// Get the currently selected element
let formTextInput = await webflow.getSelectedElement();

// Set the input type
await formTextInput.setInputType("email");
```

### Designer ability

| Designer Ability | Locale | Branch | Workflow | Sitemode |
| :--------------- | :----- | :----- | :------- | :------- |
| **canEdit**      | Any    | Any    | Canvas   | Any      |

---

# Styles

> 

Customize the look and feel of Elements with Styles. Styles, [also referred to as Classes in the Designer](https://university.webflow.com/lesson/web-styling-using-classes?topics=layout-design), save styling information that can be applied to as many elements as you want across a site.

## Working with styles

<Steps>
  <Step title="Create a style">
    To create a style, you need to provide a unique name. The Webflow API prevents creating styles with duplicate names to maintain uniqueness across your project.

    ```typescript
    // Create new style
    const newStyle = await webflow.createStyle(styleName);
    ```
  </Step>

  <Step title="Add style properties">
    Add CSS properties to a style. [Refer to this list of Style Properties](/designer/reference/style-properties) for a full index of properties that can added to a style in Webflow.

    You can add properties to a style in two ways:

    <Tabs>
      <Tab title="Set a single property">
        The [`set property`](/designer/reference/set-style-property) method requires you to pass a single property name and its corresponding value as `string` parameters. Additionally, you can include an optional `options`  parameter, [which we cover below.](#responsive-styling-with-breakpoints-and-pseudo-states)

        ```typescript
        // Create new style
        const newStyle = await webflow.createStyle("My Custom Style");

        // Set a single property
        await newStyle.setProperty("background-color", "blue")
        ```
      </Tab>

      <Tab title="Set multiple properties">
        The [set properties](/designer/reference/set-style-properties) method allows you to set multiple properties at once through  a *PropertyMap* parameter.

        A ***PropertyMap*** is a TypeScript object that maps CSS property names to their corresponding values. Each key in the object represents a CSS property name, while the value can be either a string literal (like "16px" or "bold") or a Webflow Variable (like a ColorVariable or SizeVariable).

        ```typescript
        // Create new style
        const newStyle = await webflow.createStyle("My Custom Style");

        // Create a variable
        const collection = await webflow.getDefaultVariableCollection()
        const webflowBlue = await collection?.createColorVariable('Webflow Blue', '#146EF5')

        // Create a PropertyMap object
        const propertyMap : PropertyMap = {
                        'background-color': webflowBlue as ColorVariable,
                        'font-size': "16px",
                        'font-weight': "bold",
                      }

        // Set style properties
        await newStyle.setProperties(propertyMap)
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Apply styles to elements">
    Once you've created and modified a style, you can apply it to one or more elements.

    <CodeBlock>
      ```typescript
      // Get selected element
      const selectedElement = await webflow.getSelectedElement()

      // Get style
      const myStyle = await webflow.getStyleByName("My Custom Style");

      // Apply style to element
      await selectedElement.setStyles([newStyle])
      ```
    </CodeBlock>
  </Step>
</Steps>

## Responsive styling with [breakpoints and pseudo states](https://university.webflow.com/lesson/intro-to-breakpoints?topics%3Dlayout-design\&sa=D\&source=docs\&ust=1706631470173943\&usg=AOvVaw1itdh_-wDf_3NgNzP2w-N8)

Webflow's responsive design features enable customization of style properties for different contexts, such as varying screen sizes or specific states like `:hover` or `:active`.

Pass the `options` parameter when setting style properties to customize the style for different breakpoints and pseudo-states.

```typescript
{
  breakpoint?: BreakpointId
  pseudo?: PseudoStateKey
}
```

* **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
  ```typescript
  type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
  ```

* **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
  ```typescript
  type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
    "first-child" | "last-child" | "hover" | "active" | "pressed" | 
    "visited" | "focus" | "focus-visible" | "focus-within" | 
    "placeholder" | "empty" | "before" | "after"
  ```

**Example**

```typescript
// Create new style
const newStyle = await webflow.createStyle("My Custom Style");

// Property Map for XXL Breakpoint
const propertyMapXXL = {
  'font-size': "16px",
  'font-weight': "bold",
}

// Property Map for Medium Breakpoint
const propertyMapMedium = {
  'font-size': "12px",
  'font-weight': "bold",
}

// Set style properties for XXL Breakpoint and hover state
await newStyle.setProperties(propertyMapXXL, {breakpoint: "xxl", pseudo: "hover"})

// Set styles for Medium Breakpoint and hover state
await newStyle.setProperties(propertyMapMedium, {breakpoint: "medium", pseudo: "hover"})
```

### Breakpoint IDs

| Breakpoint ID | Description                                    |
| :------------ | :--------------------------------------------- |
| `xxl`         | Very large screens or high-resolution monitors |
| `xl`          | Large desktop monitors                         |
| `large`       | Standard desktop monitors                      |
| `main`        | Suitable for smaller desktops or large tablets |
| `medium`      | Suitable for tablets and some large phones     |
| `small`       | Suitable for larger mobile devices             |
| `tiny`        | Suitable for the smallest mobile devices       |

### Pseudo-State Keys

| Pseudo-State      | Designer State     | Description                                        |
| :---------------- | :----------------- | :------------------------------------------------- |
| `hover`           | Hover              | Element is hovered over by the mouse               |
| `pressed`         | Pressed            | Element is in pressed state                        |
| `visited`         | Visited            | **Link** element has been visited                  |
| `focus`           | Focused            | Element has keyboard/input focus                   |
| `focus-visible`   | Focused (Keyboard) | Element has keyboard focus with visible indicator  |
| `focus-within`    | --                 | Element or its descendant has focus                |
| `placeholder`     | Placeholder        | Placeholder text in form block inputs              |
| `first-child`     | First Item         | First Collection Item in a collection list         |
| `last-child`      | Last Item          | Last Collection Item in a collection list          |
| `nth-child(odd)`  | Odd Items          | Odd-numbered Collection Item in a collection list  |
| `nth-child(even)` | Even Items         | Even-numbered Collection Item in a collection list |

## FAQs

<Accordion title="Can I style HTML Tags with the Webflow API?">
  No, you can't style HTML Tags with the Designer API. Currently, the Designer API only supports creating and applying CSS Classes.
</Accordion>

---

# Get all styles

> 

## **`webflow.getAllStyles()`**

[Retrieve all Styles, also known as Classes](https://university.webflow.com/lesson/web-styling-using-classes?topics=layout-design), present on the Webflow site.

### Syntax

```typescript
webflow.getAllStyles(): Promise<Array<Style>>
```

### Returns

**Promise\<Array\<*Style*>>**

A Promise that resolves to an array of *Style* objects representing all the styles present on the current site.

### Example

```typescript
// Get all Styles
const allStyles = await webflow.getAllStyles();

// List Styles
if (allStyles.length > 0) {

  console.log("List of all styles:");

  allStyles.forEach(async (style, index) => {

    // Print style names and ids
    console.log(`${index + 1}. Style Name: ${await style.getName()}, Style ID: ${style.id}`);
  });
} else {
  console.log("No styles found in the current context.");
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Get style by name

> 

## **`webflow.getStyleByName(name)`**

Retrieve a Style by its name.

### Syntax

```typescript
webflow.getStyleByName(name: string): Promise<Style | null>
```

### Parameters

* **`name`**: *string* - The name of the style to retrieve.

### Returns

**Promise\<*`Style`* | `null`>**

A Promise that resolves to a style object, or `null` if the named style doesn't exist.

### Example

```typescript
getStyleByName: async (styleName: string) => {
  // Retrieve the style by name
  const retrievedStyle = await webflow.getStyleByName(styleName);

  if (retrievedStyle) {
    // Get and print properties of the retrieved style
    const styleProperties = await retrievedStyle.getProperties();
    console.log("Style properties:", styleProperties);
  } else {
    console.log(`Style ${styleName} not found.`);
  }
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Create style

> 

## **`webflow.createStyle(name, options?)`**

Create a new style with a provided name. Provide a parent style to create a [combo class](https://help.webflow.com/hc/en-us/articles/33961311094419-Classes#how-to-create-a-combo-class).

### Syntax

```typescript
webflow.createStyle(
  name: string, 
  options?: {
    parent?: Style
  }
): Promise<Style>
```

### Parameters

* **`name`**: *String* - The name of the style.
* **`options`**: *Object* - An object containing the following properties:
  * **`parent`**: *Style* - A style object that will be the parent of the combo class style.

### Returns

**Promise\<*Style*>**

A Promise that resolves to a Style object.

### Example

```typescript
// Create new style
const newStyle = await webflow.createStyle(styleName);

// Set properties for the style
newStyle.setProperties({
  "background-color": "blue",
  "font-size": "16px",
  "font-weight": "bold",
});

// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.styles) {

  // Apply style to selected element
  await selectedElement.setStyles([newStyle])

} else {
  console.log("No element selected")
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer ability         | Locale  | Branch | Workflow | Sitemode |
| :----------------------- | :------ | :----- | :------- | :------- |
| **canCreateStyleBlocks** | Primary | Any    | Canvas   | Design   |

---

# Remove style

> 

## **`webflow.removeStyle(Style)`**

Remove an unused style from a site. In order to remove the style, it must not be used by any elements throughout the site.

### Syntax

```typescript
webflow.removeStyle(style: Style): Promise<void>
```

### Parameters

* **`Style`**: *StyleObject* - The style to remove.

### Returns

**Promise\<void>**

A Promise that resolves to `undefined`.

### Example

```typescript
// Retrieve the style by name
const retrievedStyle = await webflow.getStyleByName(styleName)

if (retrievedStyle) {

  // Remove Style
  await webflow.removeStyle(retrievedStyle)
  console.log(`Style: ${styleName} was removed`)

} else {
  console.log(`Style ${styleName} not found.`)
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |

---

# Check if a style is a combo class

> Check if a style is a combo class

## `style.isComboClass()`

Check if a style is a combo class.

#

### Syntax

```typescript
style.isComboClass(): Promise<boolean>
```

### Returns

**Promise\<boolean>**

A Promise that resolves to a boolean value.

#

### Example

```typescript
// Check if a style is a combo class
const isComboClass = await style.isComboClass()
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Style Properties

> Reference guide for CSS style properties supported by the Webflow Designer API

Style properties define the visual appearance and layout of web page elements. Using the Webflow Designer API, you can programmatically set these CSS properties to control design aspects like colors, typography, spacing, and positioning.

## How to use style properties

The Designer API accepts style properties as a `PropertyMap` object. A `PropertyMap` is a key-value collection where keys are CSS property names and values are their corresponding settings.

```typescript title="PropertyMap Example"
{
    "color": "#ff5733",
    "font-size": "16px", 
    "font-weight": "bold",
    "text-align": "center",
    "background-color": "#e0e0e0",
    "border-radius": "5px",
    "border-color": "#000000",
}
```

<Note title="Property naming">
  Use the long-form CSS property names when setting styles. For example, use `grid-row-gap` instead of `row-gap`. See the [MDN CSS Properties reference](https://developer.mozilla.org/en-US/docs/Web/CSS) for complete property names.
</Note>

## Supported properties

The following properties are organized by functional category for reference. Each property accepts either a string value or, where noted, a Webflow variable reference.

### Layout & positioning

| Property     | Type                   | Example    |
| ------------ | ---------------------- | ---------- |
| `display`    | string                 | `flex`     |
| `position`   | string                 | `absolute` |
| `top`        | string or SizeVariable | `100px`    |
| `right`      | string or SizeVariable | `0px`      |
| `bottom`     | string or SizeVariable | `0`        |
| `left`       | string or SizeVariable | `50px`     |
| `width`      | string or SizeVariable | `50%`      |
| `height`     | string or SizeVariable | `100vh`    |
| `min-width`  | string or SizeVariable | `60px`     |
| `max-width`  | string or SizeVariable | `80%`      |
| `min-height` | string or SizeVariable | `100px`    |
| `max-height` | string or SizeVariable | `200px`    |
| `z-index`    | string                 | `10`       |

### Flex layout

| Property          | Type                   | Example         |
| ----------------- | ---------------------- | --------------- |
| `flex-direction`  | string                 | `row`           |
| `flex-wrap`       | string                 | `wrap`          |
| `flex-basis`      | string or SizeVariable | `auto`          |
| `flex-grow`       | string                 | `1`             |
| `flex-shrink`     | string                 | `1`             |
| `justify-content` | string                 | `space-between` |
| `align-items`     | string                 | `flex-start`    |
| `align-content`   | string                 | `center`        |
| `align-self`      | string                 | `stretch`       |

### Grid

| Property                | Type                   | Example           |
| ----------------------- | ---------------------- | ----------------- |
| `grid-template-columns` | string                 | `50px 100px`      |
| `grid-template-rows`    | string                 | `auto`            |
| `grid-template-areas`   | string                 | `'header header'` |
| `grid-column-start`     | string                 | `1`               |
| `grid-column-end`       | string                 | `span 2`          |
| `grid-row-start`        | string                 | `1`               |
| `grid-row-end`          | string                 | `3`               |
| `grid-column-gap`       | string                 | `10px`            |
| `grid-row-gap`          | string or SizeVariable | `20px`            |
| `grid-auto-flow`        | string                 | `row dense`       |

### Typography

| Property         | Type                         | Example             |
| ---------------- | ---------------------------- | ------------------- |
| `font-family`    | string or FontFamilyVariable | `Arial, sans-serif` |
| `font-size`      | string or SizeVariable       | `16px`              |
| `font-weight`    | string                       | `bold`              |
| `font-style`     | string                       | `italic`            |
| `line-height`    | string or SizeVariable       | `1.5`               |
| `text-align`     | string                       | `justify`           |
| `text-transform` | string                       | `uppercase`         |
| `letter-spacing` | string or SizeVariable       | `0.5em`             |
| `word-spacing`   | string or SizeVariable       | `5px`               |
| `color`          | string or ColorVariable      | `#FF9800`           |

### Colors & backgrounds

| Property                | Type                    | Example            |
| ----------------------- | ----------------------- | ------------------ |
| `background-color`      | string or ColorVariable | `#e0e0e0`          |
| `background-image`      | string                  | `url('image.jpg')` |
| `background-size`       | string                  | `cover`            |
| `background-position`   | string                  | `top right`        |
| `background-repeat`     | string                  | `repeat-x`         |
| `background-attachment` | string                  | `fixed`            |
| `background-blend-mode` | string                  | `multiply`         |
| `accent-color`          | string or ColorVariable | `#ff5733`          |
| `caret-color`           | string or ColorVariable | `blue`             |

### Borders

| Property                     | Type                    | Example   |
| ---------------------------- | ----------------------- | --------- |
| `border-top-width`           | string or SizeVariable  | `2px`     |
| `border-top-style`           | string                  | `ridge`   |
| `border-top-color`           | string or ColorVariable | `#3F51B5` |
| `border-top-left-radius`     | string or SizeVariable  | `20px`    |
| `border-top-right-radius`    | string or SizeVariable  | `20px`    |
| `border-bottom-width`        | string or SizeVariable  | `1px`     |
| `border-bottom-style`        | string                  | `groove`  |
| `border-bottom-color`        | string or ColorVariable | `#f44336` |
| `border-bottom-left-radius`  | string or SizeVariable  | `4px`     |
| `border-bottom-right-radius` | string or SizeVariable  | `4px`     |
| `border-left-width`          | string or SizeVariable  | `2px`     |
| `border-left-style`          | string                  | `dashed`  |
| `border-left-color`          | string or ColorVariable | `#9C27B0` |
| `border-right-width`         | string or SizeVariable  | `1px`     |
| `border-right-style`         | string                  | `double`  |
| `border-right-color`         | string or ColorVariable | `#FFEB3B` |

### Spacing

| Property         | Type                   | Example |
| ---------------- | ---------------------- | ------- |
| `margin-top`     | string or SizeVariable | `10px`  |
| `margin-right`   | string or SizeVariable | `30px`  |
| `margin-bottom`  | string or SizeVariable | `20px`  |
| `margin-left`    | string or SizeVariable | `30px`  |
| `padding-top`    | string or SizeVariable | `10px`  |
| `padding-right`  | string or SizeVariable | `10px`  |
| `padding-bottom` | string or SizeVariable | `15px`  |
| `padding-left`   | string or SizeVariable | `10px`  |

### Effects & transforms

| Property           | Type   | Example              |
| ------------------ | ------ | -------------------- |
| `box-shadow`       | string | `10px 5px 5px black` |
| `text-shadow`      | string | `2px 2px 5px grey`   |
| `filter`           | string | `blur(2px)`          |
| `backdrop-filter`  | string | `blur(5px)`          |
| `transform`        | string | `rotate(45deg)`      |
| `transform-origin` | string | `top left`           |
| `opacity`          | string | `0.5`                |
| `mix-blend-mode`   | string | `multiply`           |

### Transitions & animations

| Property                     | Type   | Example       |
| ---------------------------- | ------ | ------------- |
| `transition-property`        | string | `opacity`     |
| `transition-duration`        | string | `300ms`       |
| `transition-timing-function` | string | `ease-in-out` |
| `transition-delay`           | string | `0.5s`        |
| `animation-name`             | string | `slidein`     |
| `animation-duration`         | string | `1s`          |
| `animation-timing-function`  | string | `ease-in-out` |
| `animation-delay`            | string | `2s`          |
| `animation-iteration-count`  | string | `infinite`    |
| `animation-direction`        | string | `alternate`   |
| `animation-fill-mode`        | string | `forwards`    |
| `animation-play-state`       | string | `paused`      |

### Complete property reference

For a comprehensive list of all supported properties, see the [W3Schools CSS Properties reference](https://www.w3schools.com/cssref/index.php).

{/* <!-- vale off --> */}

| Style Property              | Value                        | Example                         |
| --------------------------- | ---------------------------- | ------------------------------- |
| accent-color                | string or ColorVariable      | `#ff5733`                       |
| align-content               | string                       | `center`                        |
| align-items                 | string                       | `flex-start`                    |
| align-self                  | string                       | `stretch`                       |
| animation-delay             | string                       | `2s`                            |
| animation-direction         | string                       | `alternate`                     |
| animation-duration          | string                       | `1s`                            |
| animation-fill-mode         | string                       | `forwards`                      |
| animation-iteration-count   | string                       | `infinite`                      |
| animation-name              | string                       | `slidein`                       |
| animation-play-state        | string                       | `paused`                        |
| animation-timing-function   | string                       | `ease-in-out`                   |
| appearance                  | string                       | `none`                          |
| backdrop-filter             | string                       | `blur(5px)`                     |
| backface-visibility         | string                       | `hidden`                        |
| background-attachment       | string                       | `fixed`                         |
| background-blend-mode       | string                       | `multiply`                      |
| background-clip             | string                       | `border-box`                    |
| background-color            | string or ColorVariable      | `#e0e0e0`                       |
| background-image            | string                       | `url('image.jpg')`              |
| background-origin           | string                       | `padding-box`                   |
| background-position         | string                       | `top right`                     |
| background-position-x       | string or SizeVariable       | `50%`                           |
| background-position-y       | string or SizeVariable       | `50%`                           |
| background-repeat           | string                       | `repeat-x`                      |
| background-size             | string                       | `cover`                         |
| block-size                  | string or SizeVariable       | `100px`                         |
| border-block-end-color      | string or ColorVariable      | `#000000`                       |
| border-block-end-style      | string                       | `dotted`                        |
| border-block-end-width      | string or SizeVariable       | `3px`                           |
| border-block-start-color    | string or ColorVariable      | `#333333`                       |
| border-block-start-style    | string                       | `solid`                         |
| border-block-start-width    | string or SizeVariable       | `2px`                           |
| border-bottom-color         | string or ColorVariable      | `#f44336`                       |
| border-bottom-left-radius   | string or SizeVariable       | `4px`                           |
| border-bottom-right-radius  | string or SizeVariable       | `4px`                           |
| border-bottom-style         | string                       | `groove`                        |
| border-bottom-width         | string or SizeVariable       | `1px`                           |
| border-collapse             | string                       | `collapse`                      |
| border-end-end-radius       | string or SizeVariable       | `10px`                          |
| border-end-start-radius     | string or SizeVariable       | `10px`                          |
| border-image-outset         | string or SizeVariable       | `5px`                           |
| border-image-repeat         | string                       | `stretch`                       |
| border-image-slice          | string                       | `30%`                           |
| border-image-source         | string                       | `url('border.png')`             |
| border-image-width          | string or SizeVariable       | `10px`                          |
| border-inline-end-color     | string or ColorVariable      | `#4CAF50`                       |
| border-inline-end-style     | string                       | `inset`                         |
| border-inline-end-width     | string or SizeVariable       | `4px`                           |
| border-inline-start-color   | string or ColorVariable      | `#2196F3`                       |
| border-inline-start-style   | string                       | `outset`                        |
| border-inline-start-width   | string or SizeVariable       | `3px`                           |
| border-left-color           | string or ColorVariable      | `#9C27B0`                       |
| border-left-style           | string                       | `dashed`                        |
| border-left-width           | string or SizeVariable       | `2px`                           |
| border-right-color          | string or ColorVariable      | `#FFEB3B`                       |
| border-right-style          | string                       | `double`                        |
| border-right-width          | string or SizeVariable       | `1px`                           |
| border-start-end-radius     | string or SizeVariable       | `5px`                           |
| border-start-start-radius   | string or SizeVariable       | `5px`                           |
| border-top-color            | string or ColorVariable      | `#3F51B5`                       |
| border-top-left-radius      | string or SizeVariable       | `20px`                          |
| border-top-right-radius     | string or SizeVariable       | `20px`                          |
| border-top-style            | string                       | `ridge`                         |
| border-top-width            | string or SizeVariable       | `2px`                           |
| bottom                      | string or SizeVariable       | `0`                             |
| box-shadow                  | string                       | `10px 5px 5px black`            |
| box-sizing                  | string                       | `border-box`                    |
| break-after                 | string                       | `auto`                          |
| break-before                | string                       | `always`                        |
| break-inside                | string                       | `avoid`                         |
| caption-side                | string                       | `bottom`                        |
| caret-color                 | string or ColorVariable      | `blue`                          |
| clear                       | string                       | `both`                          |
| clip                        | string                       | `rect(0,0,0,0)`                 |
| clip-path                   | string                       | `circle(50%)`                   |
| clip-rule                   | string                       | `evenodd`                       |
| color                       | string or ColorVariable      | `#FF9800`                       |
| color-interpolation         | string                       | `sRGB`                          |
| color-interpolation-filters | string                       | `linearRGB`                     |
| column-count                | string                       | `3`                             |
| column-gap                  | string or SizeVariable       | `20px`                          |
| column-rule-color           | string or ColorVariable      | `#607D8B`                       |
| column-rule-style           | string                       | `solid`                         |
| column-rule-width           | string or SizeVariable       | `1px`                           |
| column-span                 | string                       | `all`                           |
| column-width                | string or SizeVariable       | `200px`                         |
| content                     | string                       | `'Hello'`                       |
| cursor                      | string                       | `pointer`                       |
| cx                          | string                       | `50`                            |
| cy                          | string                       | `50`                            |
| direction                   | string                       | `ltr`                           |
| display                     | string                       | `flex`                          |
| dominant-baseline           | string                       | `alphabetic`                    |
| empty-cells                 | string                       | `show`                          |
| fill                        | string                       | `#f00`                          |
| fill-opacity                | string                       | `0.5`                           |
| fill-rule                   | string                       | `nonzero`                       |
| filter                      | string                       | `blur(2px)`                     |
| flex-basis                  | string or SizeVariable       | `auto`                          |
| flex-direction              | string                       | `row`                           |
| flex-grow                   | string                       | `1`                             |
| flex-shrink                 | string                       | `1`                             |
| flex-wrap                   | string                       | `wrap`                          |
| float                       | string                       | `right`                         |
| flood-color                 | string or ColorVariable      | `#00BCD4`                       |
| flood-opacity               | string                       | `0.7`                           |
| font-family                 | string or FontFamilyVariable | `Arial, sans-serif`             |
| font-kerning                | string                       | `normal`                        |
| font-optical-sizing         | string                       | `auto`                          |
| font-size                   | string or SizeVariable       | `16px`                          |
| font-stretch                | string                       | `condensed`                     |
| font-style                  | string                       | `italic`                        |
| font-variant-alternates     | string                       | `normal`                        |
| font-variant-caps           | string                       | `small-caps`                    |
| font-variant-east-asian     | string                       | `normal`                        |
| font-variant-ligatures      | string                       | `none`                          |
| font-variant-numeric        | string                       | `ordinal`                       |
| font-weight                 | string                       | `bold`                          |
| grid-auto-columns           | string                       | `minmax(100px, auto)`           |
| grid-auto-flow              | string                       | `row dense`                     |
| grid-auto-rows              | string                       | `auto`                          |
| grid-column-end             | string                       | `span 2`                        |
| grid-column-gap             | string                       | `10px`                          |
| grid-column-start           | string                       | `1`                             |
| grid-row-end                | string                       | `3`                             |
| grid-row-gap                | string or SizeVariable       | `20px`                          |
| grid-row-start              | string                       | `1`                             |
| grid-template-areas         | string                       | `'header header'`               |
| grid-template-columns       | string                       | `50px 100px`                    |
| grid-template-rows          | string                       | `auto`                          |
| height                      | string or SizeVariable       | `100vh`                         |
| image-orientation           | string                       | `90deg`                         |
| image-rendering             | string                       | `auto`                          |
| inline-size                 | string or SizeVariable       | `200px`                         |
| inset-block-end             | string or SizeVariable       | `20px`                          |
| inset-block-start           | string or SizeVariable       | `5px`                           |
| inset-inline-end            | string or SizeVariable       | `10px`                          |
| inset-inline-start          | string or SizeVariable       | `10px`                          |
| isolation                   | string                       | `isolate`                       |
| justify-content             | string                       | `space-between`                 |
| justify-items               | string                       | `stretch`                       |
| justify-self                | string                       | `center`                        |
| left                        | string or SizeVariable       | `50px`                          |
| letter-spacing              | string or SizeVariable       | `0.5em`                         |
| lighting-color              | string or ColorVariable      | `white`                         |
| line-break                  | string                       | `strict`                        |
| line-height                 | string or SizeVariable       | `1.5`                           |
| list-style-image            | string                       | `url('star.png')`               |
| list-style-position         | string                       | `inside`                        |
| list-style-type             | string                       | `disc`                          |
| margin-block-end            | string or SizeVariable       | `15px`                          |
| margin-block-start          | string or SizeVariable       | `15px`                          |
| margin-bottom               | string or SizeVariable       | `20px`                          |
| margin-inline-end           | string or SizeVariable       | `10px`                          |
| margin-inline-start         | string or SizeVariable       | `10px`                          |
| margin-left                 | string or SizeVariable       | `30px`                          |
| margin-right                | string or SizeVariable       | `30px`                          |
| margin-top                  | string or SizeVariable       | `10px`                          |
| marker-end                  | string                       | `url('arrowhead.svg')`          |
| marker-mid                  | string                       | `url('dot.svg')`                |
| marker-start                | string                       | `url('circle.svg')`             |
| mask-type                   | string                       | `luminance`                     |
| max-block-size              | string or SizeVariable       | `100px`                         |
| max-height                  | string or SizeVariable       | `200px`                         |
| max-inline-size             | string or SizeVariable       | `300px`                         |
| max-width                   | string or SizeVariable       | `80%`                           |
| min-block-size              | string or SizeVariable       | `50px`                          |
| min-height                  | string or SizeVariable       | `100px`                         |
| min-inline-size             | string or SizeVariable       | `150px`                         |
| min-width                   | string or SizeVariable       | `60px`                          |
| mix-blend-mode              | string                       | `multiply`                      |
| object-fit                  | string                       | `cover`                         |
| object-position             | string                       | `center top`                    |
| offset-anchor               | string                       | `auto`                          |
| offset-distance             | string or SizeVariable       | `10px`                          |
| offset-path                 | string                       | `path('M10 80 Q 95 10 180 80')` |
| offset-rotate               | string                       | `auto`                          |
| opacity                     | string                       | `0.5`                           |
| order                       | string                       | `2`                             |
| outline-color               | string or ColorVariable      | `#FF5722`                       |
| outline-offset              | string or SizeVariable       | `2px`                           |
| outline-style               | string                       | `dashed`                        |
| outline-width               | string or SizeVariable       | `3px`                           |
| overflow-wrap               | string                       | `break-word`                    |
| overflow-x                  | string                       | `auto`                          |
| overflow-y                  | string                       | `scroll`                        |
| overscroll-behavior-block   | string                       | `contain`                       |
| overscroll-behavior-inline  | string                       | `none`                          |
| padding-block-end           | string or SizeVariable       | `25px`                          |
| padding-block-start         | string or SizeVariable       | `25px`                          |
| padding-bottom              | string or SizeVariable       | `15px`                          |
| padding-inline-end          | string or SizeVariable       | `20px`                          |
| padding-inline-start        | string or SizeVariable       | `20px`                          |
| padding-left                | string or SizeVariable       | `10px`                          |
| padding-right               | string or SizeVariable       | `10px`                          |
| padding-top                 | string or SizeVariable       | `10px`                          |
| paint-order                 | string                       | `fill stroke markers`           |
| perspective                 | string or SizeVariable       | `500px`                         |
| perspective-origin          | string                       | `50% 50%`                       |
| pointer-events              | string                       | `none`                          |
| position                    | string                       | `absolute`                      |
| r                           | string or SizeVariable       | `50px`                          |
| resize                      | string                       | `both`                          |
| right                       | string or SizeVariable       | `0px`                           |
| rotate                      | string                       | `45deg`                         |
| row-gap                     | string or SizeVariable       | `20px`                          |
| rx                          | string or SizeVariable       | `10px`                          |
| ry                          | string or SizeVariable       | `10px`                          |
| scale                       | string                       | `1.2`                           |
| scroll-behavior             | string                       | `smooth`                        |
| scroll-margin-block-end     | string or SizeVariable       | `10px`                          |
| scroll-margin-block-start   | string or SizeVariable       | `10px`                          |
| scroll-margin-inline-end    | string or SizeVariable       | `10px`                          |
| scroll-margin-inline-start  | string or SizeVariable       | `10px`                          |
| scroll-padding-block-end    | string or SizeVariable       | `20px`                          |
| scroll-padding-block-start  | string or SizeVariable       | `20px`                          |
| scroll-padding-inline-end   | string or SizeVariable       | `20px`                          |
| scroll-padding-inline-start | string or SizeVariable       | `20px`                          |
| shape-image-threshold       | string                       | `0.3`                           |
| shape-margin                | string or SizeVariable       | `15px`                          |
| shape-outside               | string                       | `circle(50%)`                   |
| shape-rendering             | string                       | `auto`                          |
| stop-color                  | string or ColorVariable      | `#0D47A1`                       |
| stop-opacity                | string                       | `0.8`                           |
| stroke                      | string or ColorVariable      | `black`                         |
| stroke-dasharray            | string                       | `5, 10`                         |
| stroke-dashoffset           | string or SizeVariable       | `5px`                           |
| stroke-linecap              | string                       | `round`                         |
| stroke-linejoin             | string                       | `bevel`                         |
| stroke-miterlimit           | string                       | `10`                            |
| stroke-opacity              | string                       | `1`                             |
| stroke-width                | string or SizeVariable       | `3px`                           |
| tab-size                    | string or SizeVariable       | `4`                             |
| table-layout                | string                       | `fixed`                         |
| text-align                  | string                       | `justify`                       |
| text-align-last             | string                       | `center`                        |
| text-anchor                 | string                       | `start`                         |
| text-decoration             | string                       | `underline`                     |
| text-decoration-color       | string or ColorVariable      | `red`                           |
| text-decoration-line        | string                       | `overline`                      |
| text-decoration-skip-ink    | string                       | `auto`                          |
| text-decoration-style       | string                       | `dotted`                        |
| text-emphasis-color         | string or ColorVariable      | `green`                         |
| text-emphasis-position      | string                       | `under right`                   |
| text-emphasis-style         | string                       | `filled circle`                 |
| text-indent                 | string or SizeVariable       | `20px`                          |
| text-overflow               | string                       | `ellipsis`                      |
| text-rendering              | string                       | `optimizeLegibility`            |
| text-shadow                 | string                       | `2px 2px 5px grey`              |
| text-transform              | string                       | `uppercase`                     |
| text-underline-position     | string                       | `under`                         |
| top                         | string or SizeVariable       | `100px`                         |
| touch-action                | string                       | `pan-right`                     |
| transform                   | string                       | `rotate(45deg)`                 |
| transform-origin            | string                       | `top left`                      |
| transform-style             | string                       | `preserve-3d`                   |
| transition-delay            | string                       | `0.5s`                          |
| transition-duration         | string                       | `300ms`                         |
| transition-property         | string                       | `opacity`                       |
| transition-timing-function  | string                       | `ease-in-out`                   |
| translate                   | string or SizeVariable       | `10px, 20px`                    |
| unicode-bidi                | string                       | `bidi-override`                 |
| vector-effect               | string                       | `non-scaling-stroke`            |
| vertical-align              | string                       | `middle`                        |
| visibility                  | string                       | `hidden`                        |
| white-space                 | string                       | `nowrap`                        |
| width                       | string or SizeVariable       | `50%`                           |
| will-change                 | string                       | `transform`                     |
| word-break                  | string                       | `break-word`                    |
| word-spacing                | string or SizeVariable       | `5px`                           |
| writing-mode                | string                       | `vertical-rl`                   |
| x                           | string or SizeVariable       | `5px`                           |
| y                           | string or SizeVariable       | `10px`                          |
| z-index                     | string                       | `10`                            |
| -webkit-line-clamp          | string                       | `3`                             |
| -webkit-text-fill-color     | string or ColorVariable      | `#FF5722`                       |
| -webkit-text-stroke-color   | string or ColorVariable      | `#4CAF50`                       |
| -webkit-text-stroke-width   | string or SizeVariable       | `1px`                           |

{/* <!-- vale on --> */}

---

# Get style properties

> 

## **`style.getProperties(options?)`**

Retrieves the CSS properties of the specified Style Object. Additionally, you can get properties on a style for a specific breakpoint or pseudo-state.

See the [style properties list](/designer/reference/style-properties) for an index of CSS properties to set on a style.

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
    PROPERTY_MAP: "PropertyMap",
  }}
  tooltips={{
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to get styles for.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to get styles for.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
    PROPERTY_MAP: (
      <p>A dictionary of style properties and their values.
      <br />
      <code>{`{
        'background-color': "blue",
        'font-size': "16px",
        'font-weight': "bold",
      }`}</code>
    </p>),
  }}
>
  ```typescript
  style.getProperties(
    options?: {
      breakpoint?: {{BREAKPOINT_ID}}, 
      pseudo?: {{PSEUDO_STATE_KEY}}
    }
  ): Promise<{{PROPERTY_MAP}}>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **options**:  An object that lets you filter properties by breakpoint and pseudo-state. (optional)

  * **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
      "visited" | "focus" | "focus-visible" | "focus-within" | 
      "placeholder" | "empty" | "before" | "after"
    ```

### Returns

**Promise\<*PropertyMap*>**

A Promise that resolves to a [*PropertyMap* ](/designer/reference/style-properties)object. A dictionary of style properties and their values.

#### Example

```typescript
// Get selected element
const element = await webflow.getSelectedElement()

if (element?.styles) {

  // Get Element Styles
  const styles = await element.getStyles()

  // Initialize an empty object to store all properties
  const allProperties: { [key: string]: any } = {};

  for (let style of styles) {
    // Use string type for styleName
    const styleName: string = await style.getName();
    const breakpoint : BreakpointAndPseudo = {breakpoint: 'xxl'}
    const properties = await style.getProperties(breakpoint);
    allProperties[styleName] = properties;
  }

  console.log(allProperties);

}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | An       |

---

# Set style properties

> 

## **`style.setProperties(props, options?)`**

Set multiple style-properties on a Style object.

<Warning title="Webflow only supports long-form names of CSS properties">
  Use the long-form CSS property names when setting styles. For example, use `grid-row-gap` instead of `row-gap`. See the [MDN CSS Properties reference](https://developer.mozilla.org/en-US/docs/Web/CSS) for complete property names.
</Warning>

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    PROPERTY_MAP: "PropertyMap",
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
  }}
  tooltips={{
    PROPERTY_MAP: (
      <p>An object of style properties and their values. See the <a href="/designer/reference/style-properties">Style Properties</a> reference for a list of supported properties.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{
        'background-color': "blue",
        'font-size': "16px",
        'font-weight': "bold",
      }`}</code>
    </p>),
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to set the properties for.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to set the properties for.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
  }}
>
  ```typescript
   style.setProperties( 
    props: {{PROPERTY_MAP}}, 
    options?: {
      breakpointId?: {{BREAKPOINT_ID}},
      pseudoStateKey?: {{PSEUDO_STATE_KEY}}
    }
  ): Promise<void>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **`props`**: *PropertyMap* - An object of style properties and their values. See the [Style Properties](/designer/reference/style-properties) reference for a list of supported properties.
* **`options`**: *BreakpointAndPseudo* - An object that lets you filter properties by breakpoint and/or pseudo-state. (Optional)

  * **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
      "visited" | "focus" | "focus-visible" | "focus-within" | 
      "placeholder" | "empty" | "before" | "after"
    ```

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`

### Example

```typescript
// Create a new style 
const newStyle = await webflow.createStyle('MyCustomStyle')

const propertyMap : PropertyMap = {
    'background-color': "blue",
    'font-size': "16px",
    'font-weight': "bold",
  }
const myBreakpoint = {breakpoint: "medium"} as BreakpointAndPseudo

// Set and save properties for the style
await newStyle.setProperties(propertyMap, myBreakpoint);
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |

---

# Get style property

> 

## **`style.getProperty(prop, options?)`**

Retrieve the value of a specific css property in a Style object.

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    STYLE_PROPERTY: "StyleProperty",
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
    PROPERTY_MAP: "PropertyMap[p]",

  }}
  tooltips={{
    STYLE_PROPERTY: (
      <p>The property to get. See the <a href="/designer/reference/style-properties">Style Properties</a> reference for a list of supported properties.
    </p>),
      BREAKPOINT_ID: (
      <p>The responsive breakpoint to get styles for.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to get styles for.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
    PROPERTY_MAP: (
      <p>The value of the provided style property, if one exists.
    </p>),
  }}
>
  ```typescript
  style.getProperty(
    prop: {{STYLE_PROPERTY}}, 
    options?: {
      breakpointId?: {{BREAKPOINT_ID}},
      pseudoStateKey?: {{PSEUDO_STATE_KEY}}
    }
  ): Promise<null | {{PROPERTY_MAP}}>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **`prop`**: *StyleProperty* - The property to get. See the [Style Properties](/designer/reference/style-properties) reference for a list of supported properties.
* **options**: An object that lets you filter properties by breakpoint and/or pseudo-state.

  * **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
      "visited" | "focus" | "focus-visible" | "focus-within" | 
      "placeholder" | "empty" | "before" | "after"
    ```

### Returns

**Promise\<*PropertyMap\[p]* | *Variable* | `null`>**

Returns a Promise that resolves to:

* *PropertyMap\[p]* - The value of the provided style property, if one exists.
* A [Variable](/designer/reference/variables-overview) representing the value of the provided style property, if a variable is used as the value of the provided style property.
* `null` - If value doesn't exist for the provided style property, this method will return `null`.

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

// Get Element Styles
if (selectedElement?.styles) {

    const styles = await selectedElement.getStyles()
    const selectedPropertyList = await Promise.all(styles.map(async style => {

      const styleName = await style.getName()
      const property = await style.getProperty(`box-shadow`)
      console.log(`Style Name: ${styleName}, box-shadow: ${property}`)

    }))

  }
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | An       |

---

# Set style property

> 

## **`style.setProperty(prop, value, options?)`**

Manage the CSS of a Style by setting a specific style property at the given breakpoint and pseudo-state.

<Warning title="Webflow only supports long-form names of CSS properties">
  Use the long-form CSS property names when setting styles. For example, use `grid-row-gap` instead of `row-gap`. See the [MDN CSS Properties reference](https://developer.mozilla.org/en-US/docs/Web/CSS) for complete property names.
</Warning>

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    STYLE_PROPERTY: "StyleProperty",
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
  }}
  tooltips={{
    STYLE_PROPERTY: (
      <p>The property to set. See the <a href="/designer/reference/style-properties">Style Properties</a> reference for a list of supported properties.
    </p>),
    VALUE: (
      <p>The value to set. You can set the value to a string or a [variable reference](/designer/reference/variables-overview).
    </p>),
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to set the style property for.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to set the style property for.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
  }}
>
  ```typescript
   style.setProperty(
    prop: {{STYLE_PROPERTY}}, 
    value: string | VariableReference,
    options?: {
      breakpointId?: {{BREAKPOINT_ID}},
      pseudoStateKey?: {{PSEUDO_STATE_KEY}}
    }
  ): Promise<void>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **`prop`**: *StyleProperty* - The property to set. See the [Style Properties](/designer/reference/style-properties) reference for a list of supported properties.
* **`value`**: *String* | *VariableReference* - The value to set. You can set the value to a string or a [variable reference](/designer/reference/variables-overview).
* **`options`**: *BreakpointAndPseudo* - An object that lets you filter properties by breakpoint and/or pseudo-state. (Optional)

  * **`BreakpointId`**: Identifies the responsive breakpoint to set the style property for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to set the style property for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
      "visited" | "focus" | "focus-visible" | "focus-within" | 
      "placeholder" | "empty" | "before" | "after"
    ```

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`

### Example

```typescript
// Retrieve the style by name
const retrievedStyle = await webflow.getStyleByName(styleName);

// Set Style Properties
const options: BreakpointAndPseudo = { breakpoint: "xl", pseudo: "hover" }
await retrievedStyle?.setProperty('background-color', 'blue', options)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |

---

# Remove a style property

> 

## **`style.remove(prop, options?)`**

Remove a single style-property from a Style object.

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    STYLE_PROPERTY: "StyleProperty",
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
  }}
  tooltips={{
    STYLE_PROPERTY: (
      <p>The property to remove. See the <a href="/designer/reference/style-properties">Style Properties</a> reference for a list of supported properties.
    </p>),
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to remove the property from.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to remove the property from.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
  }}
>
  ```typescript
  style.removeProperty(
    prop: {{STYLE_PROPERTY}}, 
    options?: {
      breakpointId?: {{BREAKPOINT_ID}},
      pseudoStateKey?: {{PSEUDO_STATE_KEY}}
    }
  ): Promise<void>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **`prop`**: *StyleProperty* - The name of the property to remove from the style. See the [Style Properties](/designer/reference/style-properties) reference for a list of supported properties.
* **`options`**: *BreakpointAndPseudo* - An object that lets you filter properties by breakpoint and/or pseudo-state. (Optional)

  * **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
      "visited" | "focus" | "focus-visible" | "focus-within" | 
      "placeholder" | "empty" | "before" | "after"
    ```

### Returns

**Promise\<`void`>**

A Promise that resolves to `undefined`

### Example

```typescript
removeSingleStyleProperty: async (property: StyleProperty) => {

  // Get Selected Element
  const selectedElement = await webflow.getSelectedElement()

  if (selectedElement?.styles) {

    // Get Element Styles
    const styles = await selectedElement.getStyles()
    const primaryStyle = styles[0]
    await primaryStyle.removeProperty(property) // Remove the property from the style

  }
},
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |

---

# Remove style properties

> 

## **`style.removeProperties(props, options?)`**

Remove multiple style properties from a Style object.

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    STYLE_PROPERTY: "StyleProperty",
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
  }}
  tooltips={{
    STYLE_PROPERTY: (
      <p>The properties to remove. See the <a href="/designer/reference/style-properties">Style Properties</a> reference for a list of supported properties.
    </p>),
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to remove the properties from.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to remove the properties from.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
  }}
>
  ```typescript
  style.removeProperties(
    props: Array<{{STYLE_PROPERTY}}>,
    options?: {
      breakpointId?: {{BREAKPOINT_ID}},
      pseudoStateKey?: {{PSEUDO_STATE_KEY}}
    }
  ): Promise<void>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **`props`**: *Array\<StyleProperty>* - The properties to remove from the style. See the [Style Properties](/designer/reference/style-properties) reference for a list of supported properties.

* **`options`**: *BreakpointAndPseudo* - An object that lets you filter properties by breakpoint and/or pseudo-state. (Optional)

  * **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
      "visited" | "focus" | "focus-visible" | "focus-within" | 
      "placeholder" | "empty" | "before" | "after"
    ```

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.styles) {

  // Get Element Styles
  const styles = await selectedElement.getStyles()
  const primaryStyle = styles[0]
  const properties : StyleProperty[] = ['background-color', 'accent-color',"font-family"]
  await primaryStyle.removeProperties(properties)

}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |

---

# Remove all style properties

> 

## **`style.removeAllProperties()`**

Remove all style properties from a Style.

### Syntax

```typescript
style.removeAllProperties(): Promise<void>
```

### Returns

**Promise\<`null`>**

A promise that resolves to `null`

### Example

```typescript
// Retrieve the style by name
const retrievedStyle = await webflow.getStyleByName(styleName);

// Clear Style Properties
await retrievedStyle?.removeAllProperties()
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |

---

# Managing variable modes on styles

> Learn how variable modes work with styles to create efficient design systems and themes

Use [variable modes](/designer/reference/variable-modes) with styles to create multiple design themes programmatically. Variable modes let you define different values for the same [variable](/designer/reference/variables-overview), enabling you to switch between complete design systems like light and dark themes. This approach reduces variable management overhead and streamlines design workflows through the Designer API.

## How variable modes work with styles

When you apply a variable mode to a style that uses variables, the applied variables inherit all variable values from that mode. This creates a unified design system where changes to the mode automatically update all dependent styles.

## Creating and applying variable modes

<Steps>
  ### Create a variable mode

  Create a variable mode for a specific collection using the [`collection.createVariableMode()` method](/designer/reference/create-variable-mode). All variable modes created with the Designer API are created as 'manual' modes.

  ```typescript
  // Get the default variable collection
  const collection = await webflow.getDefaultVariableCollection()

  // Create a variable mode
  const darkMode = await collection.createVariableMode("Dark Mode")
  ```

  ### Set a mode-specific value on a variable

  Once you've created a variable mode, you can set a mode-specific value on a variable using the [`variable.set()` method](/designer/reference/set-variable-value).

  ```typescript
  // Get the default variable collection
  const collection = await webflow.getDefaultVariableCollection()

  // Create variables for the default mode
  const primaryColor = await collection.createColorVariable("Primary Color", "#2563eb") // blue-600
  const secondaryColor = await collection.createColorVariable("Secondary Color", "#64748b") // slate-500
  const backgroundColor = await collection.createColorVariable("Background Color", "#ffffff") // white
  const accentColor = await collection.createColorVariable("Accent Color", "#f59e42") // orange-400

  // Set dark mode values for all variables
  await primaryColor.set("#3b82f6", {mode: darkMode}) // blue-500
  await secondaryColor.set("#94a3b8", {mode: darkMode}) // slate-400
  await backgroundColor.set("#0f172a", {mode: darkMode}) // slate-900
  await accentColor.set("#fb923c", {mode: darkMode}) // orange-400
  ```

  ### Apply a variable mode to a style

  Apply a variable mode to a style using the [`style.setVariableMode()` method](/designer/reference/set-variable-mode-style). Each variable mode is associated with a variable collection. To apply a variable mode, you must provide the variable collection that belongs to the variable mode.

  ```typescript
  // Get Selected Element
  const selectedElement = await webflow.getSelectedElement()

  if (selectedElement?.styles) {
      // Get Styles
      const styles = await selectedElement.getStyles()
      const primaryStyle = styles[0] // Get the primary style

      // Get Variable Collection
      const variableCollections = await webflow.getAllVariableCollections();
      const collectionsByName = Object.fromEntries(
          await Promise.all(
              variableCollections.map(async col => [await col.getName(), col])
          )
      );
      const variableCollection = collectionsByName['My Collection Name']

      // Set Variable Mode
      if (primaryStyle && variableCollection) {
          await primaryStyle.setVariableMode(variableCollection, variableMode)
          console.log('Variable mode set successfully')
      }
  }
  ```

  <Warning title="Set variable modes on primary styles">
    Currently, you can only set variable modes on primary styles. Variable modes aren't supported for combo classes through the Designer API.
  </Warning>
</Steps>

---

# Get variable mode

> Learn how to get a variable mode applied to a style.

## `style.getVariableMode(VariableCollecton, options?)`

Retrieve the [variable mode](/designer/reference/variable-modes) applied to a style for a given [variable collection](/designer/reference/variable-collections-overview). A collection can define multiple modes, but a style can have only one variable mode applied per collection.

<br />

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
    VARIABLE_COLLECTION: "VariableCollection",
    VARIABLE_MODE: "VariableMode",
  }}
  tooltips={{
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to get the variable mode for.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to get the variable mode for.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
    VARIABLE_COLLECTION: (
      <p>The variable collection to get the variable mode for.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "collection-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    VARIABLE_MODE: (
      <p>The variable mode object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "mode-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
  }}
>
  ```typescript
  style.getVariableMode(
      collection: {{VARIABLE_COLLECTION}}, 
      options?: {
        breakpointId?: {{BREAKPOINT_ID}},
        pseudoStateKey?: {{PSEUDO_STATE_KEY}}
      }
  ): Promise<{{VARIABLE_MODE}} | null>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **collection**: *VariableCollection* - The variable collection of the variable mode.
* **options?**: *BreakpointAndPseudo* - The [breakpoint and pseudo state](/designer/reference/styles-overview#responsive-styling-with-breakpoints-and-pseudo-states) for the style.
  * **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
    ```

### Returns

A Promise that resolves to a `VariableMode` object or `null` if the variable mode isn't found.

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

    if (selectedElement?.styles) {
    // Get Styles
    const styles = await selectedElement.getStyles()
    const primaryStyle = styles[0] // Get the primary style

    // Get Variable Mode
    if (primaryStyle && variableCollection) {
        const variableMode =
        await primaryStyle.getVariableMode(variableCollection)
        const variableModeName = await variableMode?.getName()
        console.log(variableModeName)
    }
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Get variable modes

> Retrieve all variable modes applied to a style

## `style.getVariableModes(options?)`

Retrieve all [variable modes](/designer/reference/variable-modes) applied to a style across all [variable collections](/designer/reference/variable-collections-overview). Returns a map of collection IDs to their applied mode IDs.

<br />

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
    VARIABLE_MODE_STYLE_PROPERTY_MAP: "VariableModeStylePropertyMap",
  }}
  tooltips={{
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to get the variable modes for.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to get the variable modes for.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
    VARIABLE_MODE_STYLE_PROPERTY_MAP: (
      <p>The variable mode style property map object.
      <br />
      <code>{`{"collection-81b8fa46-aa26-f1ef-e265-a87ef3be63a5": "mode-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
  }}
>
  ```typescript
  style.getVariableModes(
    options?: {
      breakpointId?: {{BREAKPOINT_ID}},
      pseudoStateKey?: {{PSEUDO_STATE_KEY}}
    }
  ): Promise<{{VARIABLE_MODE_STYLE_PROPERTY_MAP}}>;
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **options?**: *BreakpointAndPseudo* - An object that lets you filter properties by breakpoint and/or pseudo-state. (Optional)

  * **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
      "visited" | "focus" | "focus-visible" | "focus-within" | 
      "placeholder" | "empty" | "before" | "after"
    ```

### Returns

A Promise that resolves to a `VariableModeStylePropertyMap` object containing variable modes applied to the style, keyed by variable collection ID.

```typescript title="VariableModeStylePropertyMap"
interface VariableModeStylePropertyMap {  
  [variableCollectionId: string]: string;  
}  

// Example
{
  "collection-09e4110d-f4b6-45f9-3c1b-614c748a01c6": "mode-2a4f8a4e-eb9b-be56-f773-9e88c3669955",
  "collection-b799d4ac-670a-8296-0f2c-e153c4b1b46b": "base",
  "collection-cd77d4e3-58e8-aac2-e2e4-4f567d399c4b": "mode-f780f7e7-1b41-b353-f931-13de2c4a1234",
  "collection-e4fba320-a8ce-aad6-a302-8f95cdac2c6a": "mode-a4a9e6df-f2a6-f5e8-97e9-59f264e37b90"
}
```

#

### Example

```typescript
// Get selected element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.styles) {
    // Get styles
    const styles = await selectedElement.getStyles()
    if (styles) {
        // Get the primary style
        const primaryStyle = styles[0]

        // Get the variable modes
        const variableModes = await primaryStyle?.getVariableModes()
        console.log(variableModes)
    }
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Set variable mode on a style

> Set a variable mode for a style

## `style.setVariableMode(collection, mode, options?)`

Apply a [variable mode](/designer/reference/variable-modes) to a style. Each variable mode belongs to a [variable collection](/designer/reference/variable-collections-overview). To apply a variable mode, you must provide the variable collection that belongs to the variable mode.

<br />

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    VARIABLE_MODE: "VariableMode",
    VARIABLE_COLLECTION: "VariableCollection",
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
  }}
  tooltips={{
    VARIABLE_MODE: (
      <p>The variable mode object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "mode-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    VARIABLE_COLLECTION: (
      <p>The variable collection object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "collection-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to set the variable mode for.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to set the variable mode for.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
  }}
>
  ```typescript
   style.setVariableMode(
      collection: {{VARIABLE_COLLECTION}},
      mode: {{VARIABLE_MODE}},
      options?: {
        breakpointId?: {{BREAKPOINT_ID}},
        pseudoStateKey?: {{PSEUDO_STATE_KEY}}
      }
    ): Promise<null>;
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **collection**: *VariableCollection* - The [variable collection](/designer/reference/variable-collections-overview) that belongs to the variable mode.
* **mode**: *VariableMode* - The [variable mode](/designer/reference/variable-modes) to set.
* **options?**: *BreakpointAndPseudo* - An object that lets you filter properties by breakpoint and/or pseudo-state. (Optional)

  * **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
      "visited" | "focus" | "focus-visible" | "focus-within" | 
      "placeholder" | "empty" | "before" | "after"
    ```

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

#

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

    if (selectedElement?.styles) {
    // Get Styles
    const styles = await selectedElement.getStyles()
    const primaryStyle = styles[0] // Get the primary style

    // Get Variable Collection
    const variableCollection = await webflow.getDefaultVariableCollection()
    const variableModes = await variableCollection?.getAllVariableModes()
    const variableMode = variableModes[0]

    // Set Variable Mode
    if (primaryStyle && variableCollection) {
        await primaryStyle.setVariableMode(variableCollection, variableMode)
        console.log('Variable mode set successfully')
    }
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |

---

# Set variable modes on a style

> Apply multiple variable modes to a style

## `style.setVariableModes(props, options?)`

Apply multiple [variable modes](/designer/reference/variable-modes) to a style. Each variable mode belongs to a [variable collection](/designer/reference/variable-collections-overview). To apply multiple variable modes, you must provide a map of variable collection IDs to their corresponding variable mode IDs.

<br />

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    VARIABLE_MODE_STYLE_PROPERTY_MAP: "VariableModeStylePropertyMap",
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
  }}
  tooltips={{
    VARIABLE_MODE_STYLE_PROPERTY_MAP: (
      <p>The variable mode style property map object.
      <br />
      <code>{`{"collection-81b8fa46-aa26-f1ef-e265-a87ef3be63a5": "mode-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to set the variable modes for.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to set the variable modes for.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
  }}
>
  ```typescript
  style.setVariableModes(
      props: {{VARIABLE_MODE_STYLE_PROPERTY_MAP}},
      options?: {
        breakpointId?: {{BREAKPOINT_ID}},
        pseudoStateKey?: {{PSEUDO_STATE_KEY}}
      }
  ): Promise<null>;
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **props**: *VariableModeStylePropertyMap* - A map of variable collection IDs to their corresponding variable mode IDs.
  ```typescript title="VariableModeStylePropertyMap"
  // Example  
  const props: VariableModeStylePropertyMap = {
  "collection-09e4110d-f4b6-45f9-3c1b-614c748a01c6": "mode-2a4f8a4e-eb9b-be56-f773-9e88c3669955",
  "collection-b799d4ac-670a-8296-0f2c-e153c4b1b46b": "base",
  "collection-cd77d4e3-58e8-aac2-e2e4-4f567d399c4b": "mode-f780f7e7-1b41-b353-f931-13de2c4a1234",
  "collection-e4fba320-a8ce-aad6-a302-8f95cdac2c6a": "mode-a4a9e6df-f2a6-f5e8-97e9-59f264e37b90"
  }
  ```
* **options?**: *BreakpointAndPseudo* - An object that lets you filter properties by breakpoint and/or pseudo-state. (Optional)

  * **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
      "visited" | "focus" | "focus-visible" | "focus-within" | 
      "placeholder" | "empty" | "before" | "after"
    ```

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

#

### Example

```typescript
// This example gets variable modes from the style of the currently selected element, then sets them a chosen style

// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.styles) {
    // Get Styles
    const styles = await selectedElement.getStyles()
    const primaryStyle = styles?.[0] // Get the primary style
    const variableModes = await primaryStyle?.getVariableModes()

    // Set Variable Modes on Selected Style
    if (variableModes) {
        await selectedStyle?.setVariableModes(variableModes)
    }
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |

---

# Remove variable mode on a style

> Remove a variable mode from a style

## `style.removeVariableMode(collection, options)`

Remove a [variable mode](/designer/reference/variable-modes) from a style, by using the [variable collection](/designer/reference/variable-collections-overview) that belongs to the variable mode.

<br />

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    VARIABLE_COLLECTION: "VariableCollection",
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
  }}
  tooltips={{
    VARIABLE_COLLECTION: (
      <p>The variable collection to remove the variable mode from.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "collection-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to remove the variable mode from.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to remove the variable mode from.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
  }}
>
  ```typescript
  style.removeVariableMode(
    collection: {{VARIABLE_COLLECTION}},
    options?: {
      breakpointId?: {{BREAKPOINT_ID}},
      pseudoStateKey?: {{PSEUDO_STATE_KEY}}
    }
  ): Promise<null>;
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **collection**: *VariableCollection* - The variable collection that belongs to the variable mode.
* **options?**: *BreakpointAndPseudo* - The [breakpoint and pseudo state](/designer/reference/styles-overview#responsive-styling-with-breakpoints-and-pseudo-states) for the style.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

#

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.styles) {
// Get Styles
const styles = await selectedElement.getStyles()
const primaryStyle = styles[0] // Get the primary style

await primaryStyle?.removeVariableMode(variableCollection)
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |

---

# Remove variable modes

> Remove multiple variable modes from a style

## `style.removeVariableModes(props, options)`

Remove multiple [variable modes](/designer/reference/variable-modes) from a style. Each variable mode is associated with a [variable collection](/designer/reference/variable-collections-overview). To remove multiple variable modes, provide an array of variable mode objects.

<br />

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    VARIABLE_MODES: "VariableModes",
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
  }}
  tooltips={{
    VARIABLE_MODES: (
      <p>The variable modes to remove.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`[{"id": "mode-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}]`}</code>
    </p>),
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to remove the variable modes from.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to remove the variable modes from.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
  }}
>
  ```typescript
  style.removeVariableModes(
      modes: Array<{{VARIABLE_MODES}}>,
      options?: {
        breakpointId?: {{BREAKPOINT_ID}},
        pseudoStateKey?: {{PSEUDO_STATE_KEY}}
      }
  ): Promise<null>;
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **`modes`**: *Array\<VariableMode>* - An array of [variable modes](/designer/reference/variable-modes) to remove.
* **`options?`**: *BreakpointAndPseudo* - An object t hat lets you filter properties by breakpoint and/or pseudo-state. (Optional)

  * **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
      "visited" | "focus" | "focus-visible" | "focus-within" | 
      "placeholder" | "empty" | "before" | "after"
    ```

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.styles) {
// Get Styles
const styles = await selectedElement.getStyles()
const primaryStyle = styles[0] // Get the primary style

// Get Variable Modes from Collection
const variableModes = await variableCollection?.getAllVariableModes()
const remove = await primaryStyle?.removeVariableModes(variableModes)

}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |

---

# Remove all variable modes

> Remove all variable modes from a style

## `style.removeAllVariableModes(options)`

Remove all [variable modes](/designer/reference/variable-modes) from a style.

<br />

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    BREAKPOINT_ID: "BreakpointId",
    PSEUDO_STATE_KEY: "PseudoStateKey",
  }}
  tooltips={{
    BREAKPOINT_ID: (
      <p>The responsive breakpoint to remove the variable modes from.
      <br />
      <code>{`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"`}</code>
    </p>),
    PSEUDO_STATE_KEY: (
      <p>The CSS pseudo-class to remove the variable modes from.
      <br />
      <code>{`"noPseudo" | "nth-child(odd)" | "nth-child(even)" | "first-child" | "last-child" | "hover" | "active" | "pressed" | "visited" | "focus" | "focus-visible" | "focus-within" | "placeholder" | "empty" | "before" | "after"`}</code>
    </p>),
  }}
>
  ```typescript
  style.emoveAllVariableModes(
    options?: {
      breakpointId?: BreakpointId
      pseudoStateKey?: PseudoStateKey
    }
  ): Promise<null>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **options?**: *BreakpointAndPseudo* - The [breakpoint and pseudo state](/designer/reference/styles-overview#responsive-styling-with-breakpoints-and-pseudo-states) for the style.
  * **`BreakpointId`**: Identifies the responsive breakpoint to get styles for.
    ```typescript
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"
    ```

  * **`PseudoStateKey`**: Specifies a CSS pseudo-class to get styles for.
    ```typescript
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 
      "visited" | "focus" | "focus-visible" | "focus-within" | 
      "placeholder" | "empty" | "before" | "after"
    ```

### Returns

**Promise\<`null`>**

A promise that resolves to `null`.

#

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement?.styles) {

// Get Styles
const styles = await selectedElement.getStyles()
const primaryStyle = styles[0] // Get the primary style

// Get Variable Modes
const remove = await primaryStyle?.removeAllVariableModes()
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability         | Locale | Branch | Workflow | Sitemode |
| :----------------------- | :----- | :----- | :------- | :------- |
| **canModifyStyleBlocks** | Any    | Any    | Canvas   | Design   |

---

# Components

> Learn how to Create and Edit Components using Webflow APIs

[Webflow Components](https://university.webflow.com/lesson/components?topics=layout-design) are customizable blocks created from [Elements](/designer/reference/elements-overview). They serve as the foundation for structuring visual hierarchies on a Webflow site, ensuring that designs are modular, reusable, and consistent.

<Frame caption="A Card Component">
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/e06f0465a47c22ac130ab79c17c07414af1348a379f500555ae026dea17f8350/assets/images/41019fc-Devimage_Components_650px_2.png" />
</Frame>

## Key concepts

<Accordion title="Component definition">
  Also known as the component object, the **component definition** is the blueprint for a component. It defines the structure of elements within the component, as well as properties that can be used to customize the component instance. Any modifications made to the component definition will propagate to all associated component instances. This ensures consistency across instances while allowing for centralized changes.
</Accordion>

<Accordion title="Component instance">
  A **component instance** is a "carbon-copy" of the component definition. While it retains the core design and structure of the definition, each instance can be [customized through unique properties.](https://university.webflow.com/lesson/components?topics=layout-design#how-to-define-component-properties) This allows designers and users to assign custom values to a component instance’s properties, tailoring its appearance and behavior, without modifying the underlying component definition.
</Accordion>

<Accordion title="Component properties">
  **Component properties** are pre-defined attributes within a Component Definition that can be assigned a specific value in the Component Instance. They allow designers or users to modify specific aspects of an Instance - text, images, links, and more - without affecting its foundational design.

  <Warning title="Component properties are not yet supported">
    Currently, our APIs don't support the creation and management of Component Properties.

    We understand the importance of this feature for our users, and we're excited to share that it's on our development roadmap. We're committed to enhancing our API capabilities and will provide updates as we make progress. Thank you for your patience and understanding!
  </Warning>
</Accordion>

## Methods

### Create a component definition

To [create a component definition](/designer/reference/create-component-definition) you'll need a root element - or top-level element - that has child elements within its element hierarchy.

After identifying the root element, you can use [`webflow.registerComponent(rootElement)`](/designer/reference/create-component-definition) to register the component definition. In the above card component example, the root element would be the container DIV element, which has  the `img`, `div`, and `button` as child elements.

```typescript
// Get selected element 
const rootElement = await webflow.getSelectedElement();

if (rootElement) {

  // Create a component from the Root Element
  const component = await webflow.registerComponent('Card Component', rootElement);
  console.log(`Component registered with ID: ${component.id}`);

} else {
  console.log("No element is currently selected. Please select a root element first.");
}
```

### Edit a component definition

To make changes to a component definition, its component instance must be present on the page. You'll then need to get the Component Instance, and use the `enterComponent` method to focus Webflow on the component definition. Once the component definition is in focused, you can get the root element of the component, and then insert / remove child elements from the root element.

```typescript
enterComponent: async () => {
  // Step 1: Fetch the currently selected element
  const selectedElement = await webflow.getSelectedElement()

  if (selectedElement && selectedElement.type === 'ComponentInstance') {
    //  Step 2: Enter the context of the selected ComponentElement
    await webflow.enterComponent(selectedElement as ComponentElement)
    console.log('Successfully entered the component context.')

    // Step 3: After entering the component's context, fetch the root element
    const rootElement = await webflow.getRootElement()
    if (rootElement) {
      // Check if element supports child elements
      if (rootElement?.children) {
        // Append newElement as a child to of the selected element
        const newElement = await rootElement?.append(webflow.elementPresets.DivBlock)
        console.log('Added new child element:', newElement)
      } else {
        console.log('Root element does not support child elements')
      }
    } else {
      console.log('No root element found in this component context.')
    }
  } else {
    console.log('The selected element is not a ComponentElement.')
  }
}
```

### Add a component instance to a page

Use `webflow.createInstance(componentDefinition)` to [add a component instance](/designer/reference/create-component-instance) to the page. Component instances can be nested as part of element hierarchies, including under other component instances.

---

# Get all components

> 

## `webflow.getAllComponents()`

Retrieves all component objects registered to the site.

### Syntax

```typescript
webflow.getAllComponents(): Promise<Array<Component>>
```

### Returns

**Promise\<Array\<*Component*>>**

A Promise that resolves to an array of components.

### Example

```typescript
// Get all components
const components = await webflow.getAllComponents();

// Print Component Details
if (components.length > 0) {

  console.log("List of registered components:");

  for (let component in components) {
    const currentComponentName = await components[component].getName();
    console.log(`${component + 1}. Component Name: ${currentComponentName}, Component ID: ${components[component].id}`);
  }
} else {
  console.log("No components are currently registered.");
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

***

### Designer Ability

Checks for authorization only

| Designer Ability    | Permission | Locale | Branch | Workflow | Sitemode |
| :------------------ | :--------- | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | any        | any    | any    | any      | any      |

---

# Create a component

> 

## `webflow.registerComponent(name, root)`

Registers a new [component definition](/designer/reference/components-overview#component-definition) with the specified name and root element.

### Syntax

```typescript
webflow.registerComponent(
  name: string, 
  root: AnyElement | ElementPreset<AnyElement> | Component
): Promise<Component>
```

### Parameters

* **`name`** :   *string* - The name of the component.
* **`root`** :   *AnyElement* - The root element of the component.

### Returns

**Promise\< *Component*>**

A Promise that resolves to the registered component.

### Example

```typescript
// Get selected element 
const rootElement = await webflow.getSelectedElement();

if (rootElement) {

  // Create a component from the Root Element
  const component = await webflow.registerComponent('MyCustomComponent', rootElement);
  console.log(`Component registered with ID: ${component.id}`);

} else {
  console.log("No element is currently selected. Please select a root element first.");
}

},~
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

***

### Designer Ability

| Designer Ability        | Locale  | Branch | Workflow | Sitemode |
| :---------------------- | :------ | :----- | :------- | :------- |
| **canCreateComponents** | Primary | any    | Canvas   | any      |

---

# Delete a component

> 

## `webflow.unregisterComponent(component)`

Removes a component definition from the site.

### Syntax

```typescript
webflow.unregisterComponent(component: Component): Promise<null>
```

### Parameters

* **`component`** :   *Component* - The component to delete

### Returns

**Promise\<`null`>**

A promise that resolves to `null`.

### Example

```typescript
// Get selected element 
const selectedElement = await webflow.getSelectedElement();

if (selectedElement) {

  // Create component from selected element
  const myNewComponent = await webflow.registerComponent('Hero Component', selectedElement);

  // Delete Component
  await webflow.unregisterComponent(myNewComponent);

} else {
  console.log("No element is currently selected. Please select a root element first.");
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

***

### Designer Ability

| Designer Ability        | Locale  | Branch | Workflow | Sitemode |
| :---------------------- | :------ | :----- | :------- | :------- |
| **canCreateComponents** | Primary | any    | Canvas   | any      |

---

# Create a component instance

> 

Adding a component instance, also known as a *ComponentElement*, to the canvas resembles the same process as adding any element to the canvas. Use the [element creation methods](/designer/reference/insert-element-after) in combination with a Component Object to create a new Component Instance.

### Example

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

// Get Component
const allComponents = await webflow.getAllComponents()
const firstComponent = allComponents[0]

// Add Component instance onto a page
await selectedElement?.before(firstComponent)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

***

### Designer Ability

| Designer Ability        | Locale  | Branch | Workflow | SiteMode |
| :---------------------- | :------ | :----- | :------- | :------- |
| **canCreateComponents** | primary | any    | canvas   | any      |

---

# Enter into a component

> 

## `webflow.enterComponent(instance)`

Focus the Designer on a component definition to [make changes](/designer/reference/components-overview#editing-a-component-definition) to a component definition. When a component is in focus, all supported Designer APIs and methods operate specifically on that component definition, not the entire Site.

### Syntax

```typescript
webflow.enterComponent(
  instance: ComponentElement
): Promise<null>
```

### Parameters

* **instance**: *ComponentElement* -  A Component Instance that's present on the page. If there’s no current instance, you’ll need to create one first.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null` when the context switch is successful.

### Example

```typescript
// Step 1: Fetch the currently selected element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement && selectedElement.type === "ComponentInstance") {

  //  Step 2: Enter the context of the selected ComponentElement 
  await webflow.enterComponent(selectedElement as ComponentElement);
  console.log("Successfully entered the component context.");

  // Step 3: After entering the component's context, fetch the root element
  const rootElement = await webflow.getRootElement();
  if (rootElement) {
    console.log("Root element of the component:", rootElement);
  } else {
    console.log("No root element found in this component context.");
  }

} else {
  console.log("The selected element is not a ComponentElement.");
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

***

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | SiteMode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canModifyComponents** | any    | any    | canvas   | Design   |

---

# Exit out of a component

> 

## `webflow.exitComponent()`

Exit the focus of the Designer from a component definition. After exiting out of a component, the focus of the Designer will return to the `body` of the page.

### Syntax

```typescript
webflow.exitComponent(): Promise<null>
```

### Returns

**Promise\<`null`>**

A Promise that resolves to `null` when the context switch is successful.

### Example

```typescript
await webflow.exitComponent()
const rootElement = await webflow.getRootElement()
const rootElementType = rootElement?.type

// Print Root Element Type. If element type is Body, the Designer has exited out of the Component context
console.log(`Element Type: ${rootElementType}`)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

***

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | any    | any    | any      | any      |

---

# Get root element

> 

## `component.getRootElement()`

Retrieves the root element of the component.

### Syntax

```typescript
webflow. getRootElement(): Promise<null | AnyElement>;
```

### Returns

**Promise\< *AnyElement*>**

A Promise that resolves to the root element.

### Example

```typescript
// Get Component
const all = await webflow.getAllComponents()
const firstComponent = all[0]

// Get Root Element of Component
const root = await firstComponent?.getRootElement()
console.log(root)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | any    | any    | any      | any      |

---

# Get component name

> 

## **`component.getName()`**

Get the name of the Component Object.

### Syntax

```typescript
component.getName(): Promise<string>
```

### Returns

**Promise\<`string`>**

A Promise that resolves to a `string` representing the name of a component.

```typescript
const myComponentName = "Hero-Component";
const components = await webflow.getAllComponents();

// Check if component exists
for (const c in components) {
  const currentComponentName = await components[c].getName();
  if (myComponentName === currentComponentName) {
    console.log("Found Hero Component");
  }
}
```

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | any    | any    | any      | any      |

---

# Get component

> 

## **`ComponentElement.getComponent()`**

Get the Component Definition associated to a Component Instance

### Syntax

```typescript
element.getComponent(): Promise<Component>
```

### Returns

**Promise\<*Component*>**

A promise that resolves to a Component Object associated with a Component Instance.

```typescript
//Get User Selected Element from the Designer
const parent = await webflow.getSelectedElement();

// Check if this selected element is a Component Instance
if(parent && !parent.configurable && parent.type === 'ComponentInstance'){
      console.log(await parent.getComponent().getName());
    }
```

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | any    | any    | any      | any      |

---

# Set component name

> 

## **`component.setName(name)`**

Set the name of the Component Object.

### Syntax

```typescript
component.setName(name: string): Promise<void>
```

### Parameters

* **`name`** : *string* - Then name you wish to give your component

### Returns

**Promise\<null>**

A promise that resolves to `null` once the name has been set.

```typescript
// Get Component
const components = await webflow.getAllComponents()
const myComponent = components[0]

// Set Component Name
await myComponent.setName("My New Component Name")
```

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canModifyComponents** | any    | any    | Canvas   | Design   |

---

# Variables & Collections

> Learn how to create and manage variables and collections with the Designer API.

Variables are reusable design tokens that let you [define and manage values across your Webflow projects](https://university.webflow.com/lesson/variables?topics=layout-design). They enable you to create a single source of truth for common values like colors, spacing, and typography. When you update a variable's value, that change automatically propagates everywhere the variable is used, making it easy to maintain consistency and make global design updates.

<video autoplay loop muted>
    

  <source src="https://dhygzobemt712.cloudfront.net/Web/developers/videos/24005_API%20Documentation_Variables.webm" type="video/webm" />

    Your browser doesn't support HTML video.
</video>

---

# Variable collections

Variable collections provide an organizational structure for managing related variables. Collections enable you to group variables logically - for example, you might create separate collections for brand colors, typography, or spacing variables.

<a href="/designer/reference/variable-collections-overview">
  <button class="button cc-primary">
    Learn more about variable collections
  </button>
</a>

---

# Variables

Webflow supports five different types of variables, each with their own syntax for creating and updating them. Once you've created a variable, you can use it in your project by assigning it to a style property.

<CardGroup cols={3}>
  <Card
    title="Color"
    href="/designer/reference/create-color-variable"
    iconPosition="left"
    iconSize="10"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Variable.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Variable.svg" alt="" className="light-icon" />
      </>
    }
  >
    <p>
      Define colors.
    </p>
  </Card>

  <Card
    title="Size"
    href="/designer/reference/create-size-variable"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/GlobalCDN.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/GlobalCDN.svg" alt="" className="light-icon" />
      </>
    }
  >
    <p>
      Define sizes and spacing.
    </p>
  </Card>

  <Card
    title="Font"
    href="/designer/reference/create-font-family-variable"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Typography.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Typography.svg" alt="" className="light-icon" />
      </>
    }
  >
    <p>
      Define fonts.
    </p>
  </Card>

  <Card
    title="Number"
    href="/designer/reference/create-number-variable"
    iconPosition="left"
    iconSize="7"
    icon={"fa-thin fa-hashtag"
    }
  >
    <p>
      Define number.
    </p>
  </Card>

  <Card
    title="Percentage"
    href="/designer/reference/create-percentage-variable"
    iconPosition="left"
    iconSize="7"
    icon={"fa-thin fa-percent"
    }
  >
    <p>
      Define percentages.
    </p>
  </Card>
</CardGroup>

<br />

<a href="/designer/reference/variables-detail-overview">
  <button class="button cc-primary">
    Learn more about variables
  </button>
</a>

---

# Variable collections

> Learn how to create and manage variable collections with the Designer API.

Variable collections provide an organizational structure for managing related variables. Collections allow you to group variables logically - for example, you might create separate collections for brand colors, typography, or spacing variables. Collections help maintain a clean and organized variable system, making it easier to manage design tokens at scale across your projects.

## Creating a collection

Create a collection using the [create variable collection](/designer/reference/create-variable-collection) endpoint.

{/* <!-- vale off --> */}

```typescript
// Create a collection
const collection = await webflow.createVariableCollection('Brand Styles')
```

{/* <!-- vale on --> */}

## Selecting a collection

Select a collection in multiple ways. Either, get all collections or get a specific collection by name or ID.

{/* <!-- vale off --> */}

```typescript
// Get all collections
const collections = await webflow.getAllVariableCollections()

// Get a collection by ID
const collection = await webflow.getVariableCollectionById('collection-4a393cee-14d6-d927-f2af-44169031a25')
```

{/* <!-- vale on --> */}

## Working with variables

Once a collection is selected, you can use the collection methods to [create, retrieve, and manage variables](/designer/reference/variables-overview).

{/* <!-- vale off --> */}

```typescript
// Get collection
const collection = await webflow.getDefaultVariableCollection()

// Create a variable
const variable = await collection?.createColorVariable('primary', 'red')

// Get all variables
const variables = await collection?.getAllVariables()
```

{/* <!-- vale on --> */}

---

# Create a variable collection

> Learn how to create a variable collection with the Designer API.

## `webflow.createVariableCollection(collectionName)`

Creates a new variable collection with the given name.

#

### Syntax

```typescript
webflow.createVariableCollection(collectionName: string)
```

### Parameters

* **collectionName**: *string* - The name of the variable collection to create.

### Returns

**Promise\<*VariableCollection*>**

The newly created collection object.

#

### Example

```typescript
const collection = webflow.createVariableCollection("My Collection");

// returns a collection object
// {"id": "collection-4a393cee-14d6-d927-f2af-44169031a25b"}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Get all variable collections

> Learn how to get all variable collections with the Designer API.

## `webflow.getAllVariableCollections()`

Retrieves all variable collections for a site.

#

### Syntax

```typescript
webflow.getAllVariableCollections()
```

### Returns

**`Promise<Array<VariableCollection>>`**

A Promise that resolves to an array of variable collection objects.

#

### Example

```typescript
const collections = webflow.getAllVariableCollections();

// returns an array of collection objects
// [
//     {
//         "id": "collection-4a393cee-14d6-d927-f2af-44169031a25b",
//     },
//     {
//         "id": "collection-4a393cee-14d6-d927-f2af-44169031a49c",
//     }
// ]
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Get default variable collection

> Retrieves the default variable collection. The default collection is the first variable collection created with your site.

## `webflow.getDefaultVariableCollection()`

Retrieves the default variable collection. The default collection is the first variable collection created with your site.

### Syntax

```typescript
webflow.getDefaultVariableCollection(): Promise<null | VariableCollection>;
```

### Returns

**Promise\<*VariableCollection*>**

A Promise that resolves to the default Variable Collection or null if not found.

### Example

```typescript
// Get Collection
const defaultVariableCollection = await webflow.getDefaultVariableCollection();

// Fetch all variables within the default collection
const variables = await defaultVariableCollection?.getAllVariables();
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for Authorization only

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Get a variable collection by ID

> Learn how to get a variable collection by ID with the Designer API.

## `webflow.getVariableCollectionById(collectionId)`

Retrieves a variable collection by its ID.

#

### Syntax

```typescript
webflow.getVariableCollectionById(collectionId: string)
```

### Parameters

* **collectionId**: *string* - The ID of the variable collection to retrieve.

### Returns

**Promise\<*VariableCollection*>**

The a promise that resolves to a variable collection object.

#

### Example

```typescript
const collection = webflow.getVariableCollectionById("collection-4a393cee-14d6-d927-f2af-44169031a25b");

// returns a collection object
// {
//     "id": "collection-4a393cee-14d6-d927-f2af-44169031a25b",
// }
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Remove a variable collection

> Learn how to remove a variable collection with the Designer API.

## `webflow.removeVariableCollection(collectionId)`

Removes a variable collection by its ID.

#

### Syntax

```typescript
webflow.removeVariableCollection(collectionId: string)
```

### Parameters

* **collectionId**: *string* - The ID of the variable collection to remove.

### Returns

**`Promise<Boolean>`**

`true` if the variable collection was removed successfully, `false` otherwise.

#

### Example

```typescript
const success = webflow.removeVariableCollection("collection-4a393cee-14d6-d927-f2af-44169031a25b");

// returns true
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Get collection name

> Get the name of a variable collection using the Webflow Designer API.

## `collection.getName()`

Retrieves the name of the variable collection.

### Syntax

```typescript
collection.getName(): Promise<string>
```

### Returns

**Promise\< `string`>**

A Promise that resolves to a `string` of the Variable Collection's name

### Example

```typescript
// Get Collection
const defaultVariableCollection = await webflow.getDefaultVariableCollection();

// Get Collection Name
const collectionName = await defaultVariableCollection?.getName()
console.log(collectionName)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for Authorization only

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Set a variable collection name

> Learn how to set a variable collection name with the Designer API.

## `collection.setName(name)`

Sets the name of a variable collection.

#

### Syntax

```typescript
collection.setName(name: string)
```

### Parameters

* **name**: *string* - The new name for the variable collection.

### Returns

**`null`**

Returns `null` if the name was set successfully.

### Example

```typescript
const collection = webflow.getVariableCollectionById("collection-4a393cee-14d6-d927-f2af-44169031a25b");

collection.setName("My New Collection");

// returns null
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Variables

> Learn how to create and manage variables with the Designer API.

Variables are reusable design tokens that let you [define and manage values across your Webflow projects](https://university.webflow.com/lesson/variables?topics=layout-design). They enable you to create a single source of truth for common values like colors, spacing, and typography. When you update a variable's value, that change automatically propagates everywhere the variable is used, making it easy to maintain consistency and make global design updates.

Assign variables to any compatible [style property](/designer/reference/style-properties). For example, you can use color variables for background colors, size variables for padding and margins, or font variables for typography. When the variable's value changes, all style properties using that variable will automatically update, providing a powerful way to maintain design consistency and make global updates efficiently.

## Variable types

Webflow currently supports five types of variables:

<CardGroup cols={3}>
  <Card
    title="Color"
    href="/designer/reference/create-color-variable"
    iconPosition="left"
    iconSize="10"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Variable.svg"
          alt=""
          className="dark-icon"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Variable.svg"
          alt=""
          className="light-icon"
        />
      </>
    }
  >
    <p>
      Define colors.
    </p>
  </Card>

  <Card
    title="Size"
    href="/designer/reference/create-size-variable"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/GlobalCDN.svg"
          alt=""
          className="dark-icon"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/GlobalCDN.svg"
          alt=""
          className="light-icon"
        />
      </>
    }
  >
    <p>
      Define sizes and spacing.
    </p>
  </Card>

  <Card
    title="Font"
    href="/designer/reference/create-font-family-variable"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Typography.svg"
          alt=""
          className="dark-icon"
        />
        <img
          src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Typography.svg"
          alt=""
          className="light-icon"
        />
      </>
    }
  >
    <p>
      Define fonts.
    </p>
  </Card>

  <Card title="Number" href="/designer/reference/create-number-variable" iconPosition="left" iconSize="7" icon={"fa-thin fa-hashtag"}>
    <p>
      Define number.
    </p>
  </Card>

  <Card title="Percentage" href="/designer/reference/create-percentage-variable" iconPosition="left" iconSize="7" icon={"fa-thin fa-percent"}>
    <p>
      Define percentages.
    </p>
  </Card>
</CardGroup>

## Creating a variable

Variables belong to a collection. To create a variable, you need to get the collection first.

```typescript
const collection = await webflow.getVariableCollectionById(
  "Your Collection ID"
);
```

Each variable type has its own creation function. Below are the available variable types and how to create them:

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Color">
    ```typescript
    collection.createColorVariable(name: string, value: string | ColorVariable | CustomValue): Promise<ColorVariable>
    ```

    | Accepted Formats for Value | Examples                                                 |
    | -------------------------- | -------------------------------------------------------- |
    | Color name                 | `collection.createColorVariable("primary", "red");`      |
    | RGB Hex                    | `collection.createColorVariable("primary", "#ffcc11");`  |
    | RGBA Hex                   | `collection.createColorVariable("primary", "#fffcc11");` |
  </Tab>

  <Tab title="Size">
    ```typescript
    collection.createSizeVariable(name: string, value: SizeValue | SizeVariable | CustomValue): Promise<SizeVariable>
    ```

    | Format                | Unit  | Examples                        |
    | --------------------- | ----- | ------------------------------- |
    | Pixels                | `px`  | `{ unit: "px", value: 50 });`   |
    | Root EM               | `rem` | `{ unit: "rem", value: 2 });`   |
    | EM Units              | `em`  | `{ unit: "em", value: 1.5 });`  |
    | Viewport Width        | `vw`  | `{ unit: "vw", value: 100 });`  |
    | Viewport Height       | `vh`  | `{ unit: "vh", value: 100 });`  |
    | Small Viewport Height | `svh` | `{ unit: "svh", value: 100 });` |
    | Small Viewport Width  | `svw` | `{ unit: "svw", value: 100 });` |
    | Character Units       | `ch`  | `{ unit: "ch", value: 80 });`   |
  </Tab>

  <Tab title="Number & Percentage">
    ```typescript
    collection.createNumberVariable(name: string, value: number | NumberVariable | CustomValue): Promise<NumberVariable>
    ```

    | Accepted Formats for Value     | Examples                                              |
    | ------------------------------ | ----------------------------------------------------- |
    | Number value between 0 and 100 | `collection.createPercentageVariable("opacity", 50);` |
  </Tab>

  <Tab title="FontFamily">
    ```typescript
    collection.createFontFamilyVariable(name: string, value: string | FontFamilyVariable | CustomValue): Promise<FontFamilyVariable>
    ```

    | Accepted Formats for Value                       | Examples                                                         |
    | ------------------------------------------------ | ---------------------------------------------------------------- |
    | String of the font family name (e.g., "Verdana") | `collection.createFontFamilyVariable("defaultFont", "Verdana");` |
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

### Variable aliases

Variable aliases allow you to create references between variables, making it easier to maintain consistent design systems and create dynamic relationships between your variables. When you update the original variable, all aliases automatically reflect the change.

```typescript
// Get the default variable collection
const collection = await webflow.getDefaultVariableCollection();

// Create primary brand color variable
const primaryColor = await collection.createColorVariable(
  "primary-brand",
  "#0066FF"
);

// Create aliases that reference the primary color
const buttonColor = await collection.createColorVariable(
  "button-primary",
  primaryColor
);
const linkColor = await collection.createColorVariable(
  "link-color",
  primaryColor
);

// When primaryColor changes, buttonColor and linkColor will automatically update
await primaryColor.set("#FF0066");
```

### Custom values

Webflow's variable system supports a limited set of CSS functions, enabling you to create dynamic, responsive, and mathematically derived values.

#### Available functions

Webflow supports these CSS functions in variables:

<div id="available-functions">
  | Function                                                                                | Purpose                                 | Example                                         |
  | --------------------------------------------------------------------------------------- | --------------------------------------- | ----------------------------------------------- |
  | [`calc()`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc\(\))                   | Perform mathematical calculations       | `calc(100vh - var(--header-height))`            |
  | [`clamp()`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp\(\))                 | Create fluid values with min/max bounds | `clamp(1rem, 5vw, 3rem)`                        |
  | [`min()`](https://developer.mozilla.org/en-US/docs/Web/CSS/min\(\))                     | Use the smallest of multiple values     | `min(50%, 300px)`                               |
  | [`max()`](https://developer.mozilla.org/en-US/docs/Web/CSS/max\(\))                     | Use the largest of multiple values      | `max(100px, 20%)`                               |
  | [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) | Blend colors together                   | `color-mix(in srgb, var(--primary) 75%, white)` |
</div>

#### Using functions with custom values

To use functions in variables, you need to create or set them as custom values. Custom values work with any variable type.

<Note title="Variable References">
  When using functions, you can reference other variables using the `var()` syntax. This allows you to create dynamic relationships between your design tokens. To dynamically get this syntax, you can use the [`getBinding()`](/designer/reference/get-variable-binding) method on a variable.

  ```typescript
  variable.set({
    type: "custom",
    value: "calc(var(--spacing-base) * 2)",
  });
  ```
</Note>

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Create a custom value" id="createCustomValue">
    ```typescript
    // Get collection
    const collection = await webflow.getDefaultVariableCollection()

    // Create a Color Variable
    const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")

    // Get the binding for the variable
    const binding = await colorVariable.getBinding()

    // Create a Color Variable with a custom value
    await colorVariable.set({
        type: "custom",
        value: `color-mix(in srgb, ${binding}, white 75%)`
    });
    ```
  </Tab>

  <Tab title="Set a custom value" id="setCustomValue">
    ```typescript
    variable.set({
        type: "custom",
        value: "clamp(1rem, 2vw, 2rem)"
    });
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

## Selecting variables

Select variables from their Collection by their name or ID.

{/* <!-- vale off --> */}

```typescript
// Get Default Collection
const collection = await webflow.getDefaultVariableCollection();

// Get variable by ID
const variableById = await collection?.getVariable("id-123");

// Get Variable by Name
const variableByName = await collection?.getVariableByName("Space Cadet");
```

{/* <!-- vale on --> */}

## Updating variables

Renaming and setting new values on a variable.

### Renaming variables

Variables in Webflow can be renamed for better clarity or organization. After you've successfully renamed a variable, all instances where this variable is used will automatically reference the new name.

{/* <!-- vale off --> */}

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection();

if (collection) {
  // Get variable and reset name
  const variable = await collection.getVariableByName("Space Cadet");
  await variable?.setName("Our awesome bg color");
}
```

{/* <!-- vale on --> */}

### Setting variable values

You can't change a variable's type once it's created. However, you can change its value. The format for updating the value is consistent with its initial declaration.

{/* <!-- vale off --> */}

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection();

// Get Variable
const variable = await collection?.getVariable("id-123");

// Check Variable type and set color
if (variable?.type === "Color") await variable.set("#fffcc11");
```

{/* <!-- vale on --> */}

## Applying variables to styles

After defining your variables, you can incorporate them into your styles. To do this, simply use the variable as the property value in the style you're customizing.

{/* <!-- vale off --> */}

```typescript
// Get collection
const collection = await webflow.getDefaultVariableCollection();

// Get Style and desired variable
const style = await webflow.getStyleByName(styleName);
const variable = await collection?.getVariablebyName(variableName);

// Check variable type and set property
if (variable?.type === "Size")
  await style?.setProperties({ "font-size": variable });
```

{/* <!-- vale on --> */}

---

# Create number variable

> Create a number variable with a name and value for the variable.

## `collection.createNumberVariable(name, value)`

Create a number variable with a name and value for the variable.

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    VARIABLE_MODE:"VariableMode",
    VARIABLE_REFERENCE:"NumberVariable",
    CUSTOM_VALUE:"CustomValue"
  }}
  tooltips={{
    VARIABLE_MODE: (
      <p>The variable mode object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "mode-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    VARIABLE_REFERENCE: (
      <p>A reference to another number variable
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "variable-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    CUSTOM_VALUE: (
      <p>A custom value for the variable
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"type": "custom", "value": calc(100vh - var(--header-height))"}`}</code>
    </p>)
  }}
>
  ```typescript
  collection.createNumberVariable(
    name: string, 
    value: number | {{VARIABLE_REFERENCE}} | {{CUSTOM_VALUE}},
    options?: {
      mode?: {{VARIABLE_MODE}}
    }
  ): Promise<NumberVariable>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **name** : *string* - Name of the variable
* **value**: *number* | *NumberVariable* | [*CustomValue*](/designer/reference/variables-detail-overview#custom-values) - Value of the variable.
* **options**: *object* - Optional parameters for the variable.
  * **mode**: *VariableMode* - The [variable mode](/designer/reference/variable-modes) object. Get the variable mode by using the [`collection.getVariableModeByName()`](/designer/reference/get-variable-mode-by-name) method.

### Returns

**Promise\<*NumberVariable*>**

A Promise that resolves to a NumberVariable object.

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Create Number Variable of 50
const myNumberVariable = await collection?.createNumberVariable("small", 50)
console.log(myNumberVariable)

// Create a Number Variable with a Custom Value
const myCustomNumberVariable = await collection?.createNumberVariable("h1-font-size", {
  type: "custom",
  value: "clamp(1, 2, 2)",
})
console.log(myCustomNumberVariable)

```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Create color variable

> Create a color variable with a name and value for the variable.

## `collection.createColorVariable(name, value)`

Create a color variable with a name and value for the variable.

Once created, you can set color variables for: Text colors, Background colors, Border and text stroke colors, and Gradient color stops

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    VARIABLE_MODE:"VariableMode",
    VARIABLE_REFERENCE:"ColorVariable",
    CUSTOM_VALUE:"CustomValue"
  }}
  tooltips={{
    VARIABLE_MODE: (
      <p>The variable mode object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "mode-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    VARIABLE_REFERENCE: (
      <p>A reference to another color variable
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "variable-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    CUSTOM_VALUE: (
      <p>A custom value for the variable
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"type": "custom", "value": "color-mix(in srgb, #146EF5, white 75%)"}`}</code>
    </p>)
  }}
>
  ```typescript
  collection.createColorVariable(
    name: string, 
    value: string | {{VARIABLE_REFERENCE}} | {{CUSTOM_VALUE}},
    options?: {
      mode?: {{VARIABLE_MODE}}
    }
  ): Promise<ColorVariable>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **name** : *string* - Name of the variable
* **value**: *string* | *ColorVariable* | [*CustomValue*](/designer/reference/variables-detail-overview#custom-values) - Value of the variable. Value can be a string in one of four formats:
  * Color Name
  * Color RGB hex value
  * Color RGBA hex value
  * [Custom value](/designer/reference/variables-detail-overview#custom-values)
* **options**: *object* - Optional parameters for the variable.
  * **mode**: *VariableMode* - The [variable mode](/designer/reference/variable-modes) object. Get the variable mode by using the [`collection.getVariableModeByName()`](/designer/reference/get-variable-mode-by-name) method.

### Returns

**Promise\<*ColorVariable*>**

A Promise that resolves to a ColorVariable object.

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Create Color Variable with a HEX Codre
const myColorVariable = await collection?.createColorVariable("primary", "#ffcc11")
console.log(myColorVariable)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Create font family variable

> Create a Font Family variable with a name for the variable, and name for the Font Family.

## `collection.createFontFamilyVariable(name, value)`

Create a Font Family variable with a name for the variable, and name for the Font Family.

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    VARIABLE_MODE:"VariableMode",
    VARIABLE_REFERENCE:"FontFamilyVariable"
  }}
  tooltips={{
    VARIABLE_MODE: (
      <p>The variable mode object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "mode-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    VARIABLE_REFERENCE: (
      <p>A reference to another font family variable
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "variable-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>)
  }}
>
  ```typescript
  collection.createFontFamilyVariable(
    name: string, 
    value: string | {{VARIABLE_REFERENCE}},
    options?: {
      mode?: {{VARIABLE_MODE}}
    }
  ): Promise<FontFamilyVariable>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **name** : *string* - Name of the variable
* **value**: *string* | FontFamilyVariable  - Font Name
* **options**: *object* - Optional parameters for the variable.
  * **mode**: *VariableMode* - The [variable mode](/designer/reference/variable-modes) object. Get the variable mode by using the [`collection.getVariableModeByName()`](/designer/reference/get-variable-mode-by-name) method.

### Returns

**Promise\<*FontFamilyVariable*>**

A Promise that resolves to a FontFamilyVariable object

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Create Font Family Variable with a Font Family Name
const myFontFamilyVariable = await collection?.createFontFamilyVariable("Default Font", "Inter")
console.log(myFontFamilyVariable)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Create size variable

> Create a Size variable with a name for the variable, and size value.

## `collection.createSizeVariable(name, value)`

Create a Size variable with a name for the variable, and size value.

Once created, you can set size variables for:

| Area                       | Properties                             |
| -------------------------- | -------------------------------------- |
| Margin and padding         | Top, bottom, left, right               |
| Position                   | Top, bottom, left, right               |
| Column and row gaps        | Display settings, Quick Stack          |
| Dimensions                 | Height, width (including min and max)  |
| Grid                       | Column and row sizes                   |
| Typography                 | Font size, line height, letter spacing |
| Border                     | Radius, width                          |
| Filter and backdrop filter | Blur radius                            |

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    VARIABLE_MODE:"VariableMode",
    VARIABLE_REFERENCE:"SizeVariable",
    CUSTOM_VALUE:"CustomValue",
    SIZE_VALUE:"SizeValue"
  }}
  tooltips={{
    VARIABLE_MODE: (
      <p>The variable mode object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "mode-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    VARIABLE_REFERENCE: (
      <p>A reference to another size variable
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "variable-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    CUSTOM_VALUE: (
      <p>A custom value for the variable
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"type": "custom", "value": "clamp(1rem, 2vw, 2rem)"}`}</code>
    </p>),
    SIZE_VALUE: (
      <p>The size value object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{ value: 16, unit: "px" }`}</code>
    </p>)
  }}
>
  ```typescript
  collection.createSizeVariable(
    name: string, 
    value: {{SIZE_VALUE}} | {{VARIABLE_REFERENCE}} | {{CUSTOM_VALUE}},
    options?: {
      mode?: {{VARIABLE_MODE}}
    }
  ): Promise<SizeVariable>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **name** : *string* - Name of the variable

* **value**:
  * *SizeValue* - Object with the unit and value of the size. `{unit: SizeUnit, value: number}`
    * **SizeUnit** See the accordion below for the list of supported units.

      <Accordion title="Size Units">
        #### Absolute Units

        | Unit | Name   | Description                                       | Example Usage      |
        | ---- | ------ | ------------------------------------------------- | ------------------ |
        | `px` | Pixels | Absolute unit, 1px equals one pixel on the screen | `font-size: 16px;` |

        #### Relative Units

        | Unit  | Name                | Description                                                   | Example Usage     |
        | ----- | ------------------- | ------------------------------------------------------------- | ----------------- |
        | `em`  | Element-relative Em | Relative to parent element's font size (2em = 2× parent font) | `padding: 1.5em;` |
        | `rem` | Root Em             | Relative to root element's font size                          | `margin: 2rem;`   |
        | `ch`  | Character Units     | Relative to width of '0' (zero) character                     | `width: 20ch;`    |

        #### Viewport-based Units

        | Unit   | Name             | Description                        | Example Usage    |
        | ------ | ---------------- | ---------------------------------- | ---------------- |
        | `vh`   | Viewport Height  | 1% of viewport height              | `height: 50vh;`  |
        | `vw`   | Viewport Width   | 1% of viewport width               | `width: 80vw;`   |
        | `vmin` | Viewport Minimum | 1% of viewport's smaller dimension | `margin: 2vmin;` |
        | `vmax` | Viewport Maximum | 1% of viewport's larger dimension  | `margin: 2vmax;` |

        #### Dynamic Viewport Units

        | Unit  | Name                    | Description                                          | Example Usage         |
        | ----- | ----------------------- | ---------------------------------------------------- | --------------------- |
        | `dvh` | Dynamic Viewport Height | Adjusts to viewport height changes (mobile browsers) | `min-height: 100dvh;` |
        | `dvw` | Dynamic Viewport Width  | Adjusts to viewport width changes                    | `max-width: 50dvw;`   |
        | `svh` | Small Viewport Height   | Viewport height for small screens                    | `height: 60svh;`      |
        | `svw` | Small Viewport Width    | Viewport width for small screens                     | `width: 40svw;`       |
        | `lvh` | Large Viewport Height   | Viewport height for large screens                    | `height: 75lvh;`      |
        | `lvw` | Large Viewport Width    | Viewport width for large screens                     | `width: 100lvw;`      |
      </Accordion>
  * *SizeVariable* - A reference to another size variable
  * [*CustomValue*](/designer/reference/variables-detail-overview#custom-values) - A custom value for the variable

* **options**: *object* - Optional parameters for the variable.
  * **mode**: *VariableMode* - The [variable mode](/designer/reference/variable-modes) object. Get the variable mode by using the [`collection.getVariableModeByName()`](/designer/reference/get-variable-mode-by-name) method.

### Returns

**Promise\<*SizeVariable*>**

A Promise that resolves to a SizeVariable object

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Create Size Variable with a Size Value
const mySizeVariable = await collection?.createSizeVariable("Defualt Padding", { unit: "px", value: 50 })
console.log(mySizeVariable)

// Create a Size Variable with a Custom Value
const myCustomSizeVariable = await collection?.createSizeVariable("h1-font-size", {
  type: "custom",
  value: "clamp(1rem, 2vw, 2rem)",
})
console.log(myCustomSizeVariable)


```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Create percentage variable

> Create a percentage variable with a name and value for the variable.

## `collection.createPercentageVariable(name, value)`

Create a percentage variable with a name and value for the variable.

### Syntax

{/* <!-- vale off --> */}

<Template
  data={{
    VARIABLE_MODE:"VariableMode",
    VARIABLE_REFERENCE:"PercentageVariable",
    CUSTOM_VALUE:"CustomValue"
  }}
  tooltips={{
    VARIABLE_MODE: (
      <p>The variable mode object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "mode-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    VARIABLE_REFERENCE: (
      <p>A reference to another percentage variable
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "variable-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    CUSTOM_VALUE: (
      <p>A custom value for the variable
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"type": "custom", "value": calc(100vh - var(--header-height))"}`}</code>
    </p>)
  }}
>
  ```typescript
  collection.createPercentageVariable(
    name: string, 
    value: number | {{VARIABLE_REFERENCE}} | {{CUSTOM_VALUE}},
    options?: {
      mode?: {{VARIABLE_MODE}}
    }
  ): Promise<PercentageVariable>
  ```
</Template>

{/* <!-- vale on --> */}

### Parameters

* **name** : *string* - Name of the variable
* **value**: *number* | *PercentageVariable* | [*CustomValue*](/designer/reference/variables-detail-overview#custom-values) - Value of the variable.
* **options**: *object* - Optional parameters for the variable.
  * **mode**: *VariableMode* - The [variable mode](/designer/reference/variable-modes) object. Get the variable mode by using the [`collection.getVariableModeByName()`](/designer/reference/get-variable-mode-by-name) method.

### Returns

**Promise\<*PercentageVariable*>**

A Promise that resolves to a PercentageVariable object.

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Create Percentage Variable of 50 Percent
const myPercentageVariable = await collection?.createPercentageVariable("50%", 50)
console.log(myPercentageVariable)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Get all variables

> Get all variables in a collection using the Webflow Designer API.

## `collection.getAllVariables()`

Get all variables in a collection

### Syntax

```typescript
collection.getAllVariables(): Promise<Array<Variable>>
```

### Returns

**Promise\<*Variable*>**

A Promise that resolves to an array of Variable objects

### Example

```typescript
// Fetch the default variable collection
const defaultVariableCollection = await webflow.getDefaultVariableCollection();

if (defaultVariableCollection) {

  // Print Collection ID
  console.log("Default Variable Collection ID:", defaultVariableCollection.id);

  // Fetch all variables within the default collection
  const variables = await defaultVariableCollection.getAllVariables();

  if (variables.length > 0) {

    console.log("List of Variables in Default Collection:");

    // Print variable details
    for (var i in variables) {
      console.log(`${i}. Variable Name: ${await variables[i].getName()}, Variable ID: ${variables[i].id}`);
    };
  } else {
    console.log("No variables found in the default collection.");
  }
} else {
  console.log("Default Variable Collection not found.");
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for Authorization only

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Get variable by name

> Retrieve a variable by its name with the Webflow Designer API.

## `collection.getVariableByName(name)`

Retrieve a variable by its name.

### Syntax

```typescript
collection.getVariableByName(name: string): Promise<null | Variable>>
```

### Parameters

* **name** : *string* - Name of the variable you'd like to retrieve

### Returns

**Promise\< *Variable* | `null`>**

A Promise that resolves to a Variable object, or `null` if not found

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Get Variable by Name
const variableByName = await collection?.getVariableByName('Space Cadet')
console.log(variableByName)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for Authorization only

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Get variable by ID

> Retrieve a variable by its ID with the Webflow Designer API.

## `collection.getVariable(id)`

Retrieve a variable by its ID.

### Syntax

```typescript
collection.getVariable(id: VariableId): Promise<null | Variable>
```

### Parameters

* **ID** : *string* - ID of the variable you'd like to retrieve

### Returns

**Promise\<*Variable* | `null`>**

A promise that resolves to a Variable object, or `null` if not found

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Get variable by ID
const variableById = await collection?.getVariable('id-123')
console.log(variableById)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for Authorization only

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Set variable value

> 

## `variable.set(value, options?)`

Set the value of the selected variable.

**Syntax**

<Template
  data={{
    VARIABLE_MODE: "VariableMode",
    CUSTOM_VALUE: "CustomValue",
    SIZE_VALUE: "SizeValue",
  }}
  tooltips={{
    VARIABLE_MODE: (
      <p>The variable mode object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"id": "mode-81b8fa46-aa26-f1ef-e265-a87ef3be63a5"}`}</code>
    </p>),
    CUSTOM_VALUE: (
      <p>The custom value object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{"type": "custom", "value": "color-mix(in srgb, #146EF5, white 75%)"}`}</code>
    </p>),
    SIZE_VALUE: (
      <p>The size value object.
      <br />
      <strong>Example:</strong>
      <br />
      <code>{`{ value: 16, unit: "px" }`}</code>
    </p>),
  }}
>
  ```typescript
  variable.set(
      value: string | number | {{SIZE_VALUE}} | Variable | {{CUSTOM_VALUE}},
      options?: {
          mode: {{VARIABLE_MODE}},
      }
  ): Promise<null>;
  ```
</Template>

### Parameters

| Parameter   | Description                                                                                                                                                                                                                                                                         | Type                                                                         |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| **value**   | The value to set for the variable. Must match the variable's type. You can also pass a Variable object to create an alias, a [CustomValue](/designer/reference/variables-detail-overview#custom-values) for custom values, or `null` to reset a mode-specific value to its default. | `string` \| `number` \| `SizeValue` \| `Variable` \| `CustomValue` \| `null` |
| **options** | An optional parameter to set the [mode value](/designer/reference/variable-modes) of the variable.                                                                                                                                                                                  | `{mode: VariableMode}`                                                       |

<Note title="Resetting a mode-specific value">
  To reset a mode-specific value back to the default base value, pass `null`
  when calling `variable.set()` along with the mode you want to reset. Variables
  without a mode-specific value won't be affected.
</Note>

<br />

### Variable values by type

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Color">
    ```typescript
    collection.createColorVariable(name: string, value: string | ColorVariable | CustomValue): Promise<ColorVariable>
    ```

    | Accepted Formats for Value | Examples                                                 |
    | -------------------------- | -------------------------------------------------------- |
    | Color name                 | `collection.createColorVariable("primary", "red");`      |
    | RGB Hex                    | `collection.createColorVariable("primary", "#ffcc11");`  |
    | RGBA Hex                   | `collection.createColorVariable("primary", "#fffcc11");` |
  </Tab>

  <Tab title="Size">
    ```typescript
    collection.createSizeVariable(name: string, value: SizeValue | SizeVariable | CustomValue): Promise<SizeVariable>
    ```

    | Format                | Unit  | Examples                        |
    | --------------------- | ----- | ------------------------------- |
    | Pixels                | `px`  | `{ unit: "px", value: 50 });`   |
    | Root EM               | `rem` | `{ unit: "rem", value: 2 });`   |
    | EM Units              | `em`  | `{ unit: "em", value: 1.5 });`  |
    | Viewport Width        | `vw`  | `{ unit: "vw", value: 100 });`  |
    | Viewport Height       | `vh`  | `{ unit: "vh", value: 100 });`  |
    | Small Viewport Height | `svh` | `{ unit: "svh", value: 100 });` |
    | Small Viewport Width  | `svw` | `{ unit: "svw", value: 100 });` |
    | Character Units       | `ch`  | `{ unit: "ch", value: 80 });`   |
  </Tab>

  <Tab title="Number & Percentage">
    ```typescript
    collection.createNumberVariable(name: string, value: number | NumberVariable | CustomValue): Promise<NumberVariable>
    ```

    | Accepted Formats for Value     | Examples                                              |
    | ------------------------------ | ----------------------------------------------------- |
    | Number value between 0 and 100 | `collection.createPercentageVariable("opacity", 50);` |
  </Tab>

  <Tab title="FontFamily">
    ```typescript
    collection.createFontFamilyVariable(name: string, value: string | FontFamilyVariable | CustomValue): Promise<FontFamilyVariable>
    ```

    | Accepted Formats for Value                       | Examples                                                         |
    | ------------------------------------------------ | ---------------------------------------------------------------- |
    | String of the font family name (e.g., "Verdana") | `collection.createFontFamilyVariable("defaultFont", "Verdana");` |
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`

### Examples

<Tabs>
  <Tab title="Color">
    ```typescript
    // Get Collection
    const collection = await webflow.getDefaultVariableCollection();

    // Get Variable
    const variable = await collection?.getVariableByName("MyColorVariable");

    // Check Variable type and set color
    if (variable?.type === "Color") await variable.set("#fffcc11");
    ```
  </Tab>

  <Tab title="Size">
    ```typescript
    // Get Collection
    const collection = await webflow.getDefaultVariableCollection();

    // Get Variable
    const variable = await collection?.getVariableByName("MySizeVariable");

    // Check Variable type and set size
    if (variable?.type === "Size") await variable.set({ value: 16, unit: "px" });
    ```
  </Tab>

  <Tab title="Number & Percentage">
    ```typescript
    // Get Collection
    const collection = await webflow.getDefaultVariableCollection();

    // Get Variable
    const variable = await collection?.getVariableByName("MyNumberVariable");

    // Check Variable type and set number
    if (variable?.type === "Number") await variable.set(100);
    ```
  </Tab>

  <Tab title="Font family">
    ```typescript
    // Get Collection
    const collection = await webflow.getDefaultVariableCollection();

    // Get Variable
    const variable = await collection?.getVariableByName("MyFontVariable");

    // Check Variable type and set font family
    if (variable?.type === "FontFamily") await variable.set("Verdana");
    ```
  </Tab>

  <Tab title="Alias">
    ```typescript
    // Get Collection
    const collection = await webflow.getDefaultVariableCollection();

    // Get Variables
    const variableToSet = await collection?.getVariableByName("MyAliasVariable");
    const variableToAlias = await collection?.getVariableByName("MyColorVariable");

    // Check that Variable types are compatible and set alias
    if (variableToSet?.type === "Color" && variableToAlias) {
        await variableToSet.set(variableToAlias);
    }
    ```
  </Tab>

  <Tab title="Custom value">
    ```typescript
    // Get Collection
    const collection = await webflow.getDefaultVariableCollection();

    // Get Variable
    const variable = await collection?.getVariableByName("MyCustomVariable");

    // Check Variable type and set custom value
    if (variable?.type === "Color") {
        await variable.set({
            type: "custom",
            value: "color-mix(in srgb, var(--blue-500), #fff 60%)"
        });
    }
    ```
  </Tab>
</Tabs>

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Get variable value

> 

## `variable.get(options?)`

Retrieves the value of the variable.

### Syntax

```typescript
variable.get(
    options?: {
        mode: VariableMode,
        customValues: boolean,
        doNotInheritFromBase: boolean}
): Promise<string | number | SizeValue | Variable | CustomValue>;
```

### Parameters

* **options**: *object* - An optional parameter to include get specific information.

  | Parameter              | Type         | Description                                                                                                                                 | Default |
  | ---------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
  | `mode`                 | VariableMode | The value of the variable in the specified [variable mode](/designer/reference/variable-modes).                                             | —       |
  | `customValues`         | boolean      | Indicates whether to return the custom value of the variable.                                                                               | `false` |
  | `doNotInheritFromBase` | boolean      | Indicates whether to return the value of the variable without inheriting from the base [variable mode](/designer/reference/variable-modes). | `false` |

{/* <!-- vale off --> */}

<Warning>
  Calling `variable.get()` without `customValues: true` will throw an error if the variable has a [custom value](/designer/reference/variables-detail-overview#custom-values).
</Warning>

{/* <!-- vale on --> */}

### Returns

Returns a Promise that resolves to the current value of the variable. The exact return type depends on the variable’s type, whether it's an alias or a custom value, and the selected variable mode.

See the table below for details on return types for each scenario.

<br />

<Tabs>
  <Tab title="Color">
    Returns a value in one of these formats:

    {/* <!-- vale off --> */}

    | Format         | Examples                                                                     | Return Type     |
    | -------------- | ---------------------------------------------------------------------------- | --------------- |
    | String         | `"red"`, `"#ffcc11"`, `"#fffcc11"`                                           | `string`        |
    | Variable alias | `{ "id": "variable-xyz-123" }`                                               | *ColorVariable* |
    | Custom value   | `{"type":"custom","value":"color-mix(in srgb, var(--blue-500) , #fff 60%)"}` | *CustomValue*   |

    {/* <!-- vale on --> */}
  </Tab>

  <Tab title="Size">
    Returns a value in one of these formats:

    | Format            | Examples                                                    | Return Type    |
    | ----------------- | ----------------------------------------------------------- | -------------- |
    | Size value object | `{ value: 16, unit: "px" }`                                 | *SizeValue*    |
    | Variable alias    | `{ "id": "variable-xyz-123" }`                              | *SizeVariable* |
    | Custom value      | `{ "type": "custom", "value": "calc(var(--spacing) * 2)" }` | *CustomValue*  |

    **Size value example**

    ```typescript
    {
      value: number,  // The size value
      unit: "px" | "rem" | "em" | "vw" | "vh" | "svh" | "svw" | "ch"  // The unit type
    }
    ```
  </Tab>

  <Tab title="Number & Percentage">
    Returns a value in one of these formats:

    | Format         | Examples                                                   | Return Type                              |
    | -------------- | ---------------------------------------------------------- | ---------------------------------------- |
    | Number         | `100`                                                      | `number`                                 |
    | Percentage     | `50`                                                       | `number`                                 |
    | Variable alias | `{ "id": "variable-xyz-123" }`                             | *NumberVariable* or *PercentageVariable* |
    | Custom value   | `{ "type": "custom", "value": "calc(var(--number) * 2)" }` | *CustomValue*                            |
  </Tab>

  <Tab title="FontFamily">
    Returns a value in one of these formats:

    | Format         | Examples                       | Return Type          |
    | -------------- | ------------------------------ | -------------------- |
    | String         | `"Verdana"`                    | `string`             |
    | Variable alias | `{ "id": "variable-xyz-123" }` | *FontFamilyVariable* |
  </Tab>
</Tabs>

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection();

// Get All Variables
const variables = await collection.getAllVariables();

// Get Value of first Variable
const variable = variables[0];
const value = await variable.get();
// value = "#146EF5"

// Get Value of first Variable with custom value
const variable = variables[1];
const value = await variable.get({ customValues: true });
// value = { type: 'custom', value: 'color-mix(in srgb, var(--blue-500), white 50%)' }
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

Checks for Authorization only

{/* <!-- vale off --> */}

| Designer ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Get variable name

> 

## `variable.getName()`

Retrieves the name of the variable.

### Syntax

```typescript
variable.getName(): Promise<string>;
```

### Returns

**Promise\<`string`>**

A Promise that resolves to a `string` with the variable name

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Get All Variables
const variables = await collection.getAllVariables()

// Get Value of first Variable
const variable = variables[0]
const value = await variable.getName()
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for Authorization only

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Set variable name

> 

## `variable.setName(name)`

Sets the name of the variable.

### Syntax

```typescript
variable.setName(name: string): Promise<null>;
```

### Parameters

* **name** : *string*   - Name of the variable

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Get All Variables
const variables = await collection.getAllVariables()

// Get Value of first Variable
const variable = variables[0]
const value = await variable.setName("Primary")
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Get variable binding

> Get the binding of a variable

## `variable.getBinding()`

Returns a binding value for the variable. Use the binding value when creating or updating variables with [custom values.](/designer/reference/variables-detail-overview#custom-values)

### Syntax

```typescript
variable.getBinding(): Promise<string>
```

### Returns

**Promise\<*string*>**

A Promise that resolves to a string representing the variable's binding.

### Example

```typescript
// Create a variable
const webflowBlue = await collection?.createColorVariable(
  "blue-500",
  "#146EF5"
);

// Get the binding value for a variable
const binding = await webflowBlue.getBinding();
// binding = "var(--blue-500)"

// Use the binding value to create a variable with a custom value
const webflowBlue400 = await collection.createColorVariable("blue-400", {
  type: "custom",
  value: `color-mix(in srgb, ${binding}, white 50%)`,
});
```

### Designer Ability

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Get CSS name

> Learn how to get the CSS name of a variable in the Designer.

## `variable.getCSSName()`

Returns the custom property name of a variable (e.g., `--primary`).

<Note>
  This is distinct from
  [`variable.getBinding()`](/designer/reference/get-variable-binding), which
  returns the variable wrapped in a `var()` function (e.g., `var(--primary)`).
  Use `getCSSName()` when you need a reference to the variable's name, for
  example, to override its value in a custom stylesheet.
</Note>

### Syntax

```typescript
variable.getCSSName(): Promise<string>
```

### Returns

**Promise\<*string*>**

A Promise that resolves to the variable's CSS name.

### Example

```typescript
// Create a variable
const webflowBlue = await collection?.createColorVariable(
  "blue-500",
  "#146EF5"
);

// Get the CSS name for the variable
const cssName = await webflowBlue.getCSSName();
// cssName = "--blue-500"
```

### Designer ability

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Remove variable

> 

## `variable.remove()`

Delete and remove variable from collection.

### Syntax

```typescript
variable.remove(): Promise<boolean>
```

### Returns

**Promise\<`boolean`>**

A Promise that resolves to a `boolean` value

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Get All Variables
const variables = await collection.getAllVaraiables

// Remove first variable
const variable = variables[0]
await variable.remove()
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Variable Modes

> Learn how to create and manage variable modes with the Designer API.

Variable modes let you define multiple values for individual variables, creating distinct sets of values (“modes”) that can be switched and applied across a site.

![Variable Modes](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/5423fb175d908862510c828470828d7cb30aa612f2e3e3d3632534f44c7a04ae/assets/images/variable-modes.jpg)

## Create a variable mode

Create a variable mode for a specific collection using the [`collection.createVariableMode()` method](/designer/reference/create-variable-mode). All variable modes created with the Designer API will be created as 'manual' modes.

```typescript
// Get the default variable collection
const collection = await webflow.getDefaultVariableCollection()

// Create a variable mode
const variableMode = await collection.createVariableMode("Dark Mode")

```

## Set a mode-specific value on a variable

Once you've created a variable mode, you can set a mode-specific value on a variable using the [`variable.set()` method](/designer/reference/set-variable-value).

To reset a mode-specific value back to the default base value, pass `null` when calling `variable.set()` along with the mode you want to reset.

```typescript

// Get the default variable collection
const collection = await webflow.getDefaultVariableCollection()

// Create variable for the collection with a default value
const colorVariable = await collection.createColorVariable("Body Text", "#ccc")

// Create a variable mode
const variableMode = await collection.createVariableMode("Dark Mode")

// Set a mode-specific value on the variables
await colorVariable.set("#FFF", {mode: variableMode})

// Reset the mode-specific value back to the default base value
await colorVariable.set(null, {mode: variableMode}) // This mode value is now "#ccc"

```

---

# Get all variable modes

> Learn how to get all variable modes.

## `collection.getAllVariableModes()`

Get all variable modes in a collection.

#

### Syntax

```typescript
collection.getAllVariableModes(): Promise<Array<VariableMode>>
```

### Returns

**Promise\<*Array\<VariableMode>*>**

A Promise that resolves to an array of VariableMode objects.

#

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Get All Variable Modes
const variableModes = await collection.getAllVariableModes()
console.log(variableModes)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Get variable mode by name

> Learn how to get a variable mode by its name.

## `collection.getVariableModeByName(string: modeName)`

Get a variable mode by its name.

#

### Syntax

```typescript
collection.getVariableModeByName(modeName: string): Promise<VariableMode>
```

### Parameters

* **modeName**: *string* - The name of the variable mode to get.

### Returns

**Promise\<*VariableMode*>**

A Promise that resolves to a variable mode object.

#

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Get Variable Mode by Name
const variableMode = await collection.getVariableModeByName(modeName)
console.log(variableMode)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Get variable mode by ID

> Learn how to get a variable mode by its ID.

## `collection.getVariableModeById(string: modeId)`

Get a variable mode by its ID.

#

### Syntax

```typescript
collection.getVariableModeById(modeId: string): Promise<VariableMode>
```

### Parameters

* **modeId**: *string* - The ID of the variable mode to get.

### Returns

**Promise\<*VariableMode*>**
A Promise that resolves to a variable mode object.

#

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Get Variable Mode by ID
const variableMode = await collection?.getVariableModeById(modeId)
console.log(variableMode)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Create variable mode

> Learn how to create a variable mode.

## `collection.createVariableMode(name)`

Create a variable mode in a collection. Variable modes created with the Designer API are always created as "Manual" modes.

#

### Syntax

```typescript
collection.createVariableMode(name: string): Promise<VariableMode>
```

### Parameters

* **name**: *string* - The name of the variable mode to create.

### Returns

**Promise\<*VariableMode*>**

A Promise that resolves to a VariableMode object.

#

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Create Variable Mode
const variableMode = await collection?.createVariableMode("Dark Mode")
console.log(variableMode)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Remove variable mode

> Learn how to remove a variable mode.

## `mode.remove()`

Remove a variable mode from a collection

#

### Syntax

```typescript
mode.remove(): Promise<boolean>
```

### Returns

**Promise\<*boolean*>**

A Promise that resolves to boolean.

#

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Get Variable Mode
const variableMode = await collection?.getVariableModeByName(modeName)

// Remove Variable Mode
variableMode?.remove()
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Get variable mode name

> Learn how to get the name of a variable mode.

## `mode.getName()`

Get the name of a variable mode

#

### Syntax

```typescript
mode.getName(): Promise<string>
```

### Returns

**Promise\<*string*>**

A Promise that resolves to the name of the variable mode.

#

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Get Variable Mode
const variableMode = await collection?.getVariableModeById(modeId)

// Get Variable Mode Name
const name = await variableMode?.getName()
console.log(name)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability     | Locale | Branch | Workflow | Sitemode |
| :------------------- | :----- | :----- | :------- | :------- |
| **canReadVariables** | Any    | Any    | Any      | Any      |

---

# Set variable mode name

> Learn how to set the name of a variable mode.

## `mode.setName(name)`

Set the name of a variable mode. Variable mode names must be unique within a collection.

#

### Syntax

```typescript
mode.setName(name: string): Promise<null>
```

### Parameters

* **name**: *string* - The name of the variable mode to set.

### Returns

**Promise\<*null*>**

A Promise that resolves to null.

#

### Example

```typescript
// Get Collection
const collection = await webflow.getDefaultVariableCollection()

// Get Variable Mode
const variableMode = await collection?.getVariableModeByName(modeName)

// Set Variable Mode Name
variableMode?.setName("My Variable Mode")
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability       | Locale | Branch | Workflow | Sitemode |
| :--------------------- | :----- | :----- | :------- | :------- |
| **canModifyVariables** | Any    | Main   | Canvas   | Design   |

---

# Assets

> 

The Asset APIs enable you to manage and interact with your site's media files through the [Designer's Assets panel](https://university.webflow.com/lesson/assets-panel?topics=elements).

These APIs let you:

* Upload new assets to your Webflow site
* Retrieve existing assets and their metadata
* Update asset properties like names and alt text
* Organize assets into folders
* Get direct URLs to hosted assets

## Using assets on a site

To display an asset on a page, you can:

1. [Create](/designer/reference/create-an-asset) or [select](/designer/reference/get-asset-by-id) an asset
2. [Create an image element](/designer/reference/insert-element-after) using the `webflow.elementPresets.Image` element preset
3. [Set the asset](/designer/reference/image-element/setAsset) on the image element
4. Optionally set additional properties like alt text for accessibility

**Example**

```typescript
// Get a file from a remote URL
const response = await fetch("https://fastly.picsum.photos/id/336/200/300.jpg?hmac=FYvgN5rqQdtTh1q0wSE75sgfBRdhD-qNJwP12mTVXTc")
const blob = await response.blob()
const file = new File([blob], "bikelocks.jpg", { type: 'image/jpeg' });

// Create an asset from the file and set alt text
const asset = await webflow.createAsset(file)
await asset.setAltText('Candid photo of Marvin the Paranoid Android')

// Get Selected Element
const selectedElement = await webflow.getSelectedElement()
if (selectedElement) {           
  
  // Insert Image after selected Element
  const newImage = await selectedElement.after(webflow.elementPresets.Image)

  // Set the asset on the image element
  await newImage.setAsset(asset)
}
```

## Supported file types

The Asset APIs support various file types including images, documents, and Lottie animations. Refer to the accepted MIME types listed below for compatibility. Pass Lottie files as `application/json` MIME types.

```Text MIME Types
'image/jpeg'
'image/jpg'
'image/png'
'image/gif'
'image/svg+xml'
'image/bmp'
'image/webp'
'application/pdf'
'application/msword'
'application/vnd.ms-excel'
'application/vnd.ms-powerpoint'
'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
'application/vnd.openxmlformats-officedocument.presentationml.presentation'
'text/plain'
'text/csv'
'application/vnd.oasis.opendocument.text'
'application/vnd.oasis.opendocument.spreadsheet'
'application/vnd.oasis.opendocument.presentation'
'application/json'
```

<Note>
  Files upload to the Assets panel aren't restricted. They're publicly available and discoverable, but won't necessarily be discovered or indexed by search engines if the file isn't on a publicly viewable webpage or linked elsewhere. [Learn more about asset privacy in Webflow.](https://university.webflow.com/lesson/asset-privacy)
</Note>

## Properties

| Property | Description                    |
| :------- | :----------------------------- |
| `id`     | Unique identifier of the Asset |

---

# Create an Asset

> Create a new asset on your Webflow site.

## `webflow.createAsset(fileBlob)`

Create a new asset on your Webflow site.

This method is specifically for creating new assets - if you need to update an existing asset, use the [set asset file](/designer/reference/set-asset-file) method instead. Be sure to review the [limits](#limits) and [MIME types](#mime-types) sections to ensure your files meet the requirements.

<Accordion title="Adding assets to pages">
  To add an asset to a page:

  1. Create an asset
  2. Create an [image element](/designer/reference/image-element)
  3. Use the [`element.setAsset(asset)`](/designer/reference/image-element/setAsset) method to set the asset
</Accordion>

### Syntax

```typescript
webflow.createAsset(fileBlob:File): Promise<Asset>
```

### Parameters

* **`fileBlob`**:`File` -  Represents a valid [File](https://developer.mozilla.org/en-US/docs/Web/API/File) to upload. Refer to the examples below for guidance on uploading an asset from a remote source and directly from a file picker.

### Returns

**Promise\<*Asset*>**

A Promise that resolves to the new Asset.

### Example

<Tabs>
  <Tab title="Remote File">
    ```typescript
    // Fetch image from remote source and build a Blob object
        const response = await fetch(url)
        const blob = await response.blob()
        const file = new File([blob], fileName, {
          type: 'image/png',
        })

        // Create and upload the asset to webflow
        const asset = await webflow.createAsset(file);
        console.log(asset)
    ```

    <div>
      <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
        Try this example
      </a>
    </div>
  </Tab>

  <Tab title="Direct Upload">
    ```html HTML
    <!-- Add a file picker to your interface -->
    <input type="file" id="fileInput" />
    ```

    ```javascript
    // Reference the file input element
    const fileInput = document.getElementById('fileInput');

    // Add change event listener
    fileInput.addEventListener('change', async function () {
      try {
        // Check if the file input element is indeed an input element
        if (fileInput instanceof HTMLInputElement) {
          // Get the selected file from the file input
          const file = fileInput.files[0];
          
          // Check if a file is selected
          if (!file) {
            return; // Exit the function if no file is selected
          }
          
          // Upload the selected file and create an asset
          const asset = await webflow.createAsset(file);
        } else {
          console.error('Not an input element'); // Log an error if the file input is not an input element
        }
      } catch (err) {
        console.error('Something went wrong', err); // Log any errors that occur during the process
      }
    });
    ```
  </Tab>
</Tabs>

### Errors

If the method fails to create an asset, the method will return an error with the following cause and message.

| Tag                    | Message                                   |
| :--------------------- | :---------------------------------------- |
| ResourceCreationFailed | Failed to create asset for \$\{File.name} |

### Designer ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canManageAssets** | any    | any    | any      | any      |

## Limits

Uploaded assets must adhere to specific size limitations:

* Images must not exceed 4MB
* Documents must not exceed 10MB

## MIME types

Refer to the accepted MIME types listed below for compatibility. Pass Lottie files as `application/json` MIME types.

```Text MIME Types
'image/jpeg'
'image/jpg'
'image/png'
'image/gif'
'image/svg+xml'
'image/bmp'
'image/webp'
'application/pdf'
'application/msword'
'application/vnd.ms-excel'
'application/vnd.ms-powerpoint'
'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
'application/vnd.openxmlformats-officedocument.presentationml.presentation'
'text/plain'
'text/csv'
'application/vnd.oasis.opendocument.text'
'application/vnd.oasis.opendocument.spreadsheet'
'application/vnd.oasis.opendocument.presentation'
'application/json'
```

---

# Get All Assets

> 

## `webflow.getAllAssets()`

Retrieve all assets on a site.

### Syntax

```typescript
webflow.getAllAssets(): Promise<Asset[]>
```

### Returns

**Promise\<*Asset\[]*>**

A Promise that resolves to an array of Assets.

### Example

```typescript
// Get all assets
const assets = await webflow.getAllAssets()

// Loop to list assets in the console
for (const asset of assets) {
  const name = await asset.getName()
  const mimeType = await asset.getMimeType()
  console.log(name, mimeType)
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessAssets** | any    | any    | any      | any      |

---

# Get Asset by ID

> 

## `webflow.getAssetById(id)`

Retrieve an asset by its unique identifier.

### Syntax

```typescript
webflow.getAssetById(id:string): Promise<Asset>
```

### Parameters

* **id**:`string` -  The unique identifier of the asset

### Returns

**Promise\<*Asset*>** | `null`

A Promise that resolves to an Asset. If an invalid ID is entered, the method will return `null`

### Example

```typescript
const asset = await webflow.getAssetById(id)
 console.log(asset)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessAssets** | any    | any    | any      | any      |

---

# Get Asset Name

> 

## `asset.getName()`

Retrieve name of specified asset.

### Syntax

```typescript
asset.getName(): Promise<string>
```

### Returns

**Promise\<*string*>**

A Promise that resolves to the name of the Asset

### Example

```typescript
// Get Selected Element
const el = await webflow.getSelectedElement()

// Check if element is selected and its type
if (!el || el.type !== 'Image') {
  console.error('Please select an Image element on the canvas')
  await webflow.notify({
    type: 'Error',
    message: 'Please select an Image element on the canvas',
  })
} else {
  const asset = await el.getAsset() // Get Asset
  const assetName = await asset?.getName() // Get Asset Name
  console.log(`Asset Name: ${assetName}`)
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessAssets** | any    | any    | any      | any      |

---

# Set Asset Name

> Set the name of an asset.

## `asset.setName(name)`

Set the name of an asset.

## Syntax

```typescript
asset.setName(name: string): Promise<null>
```

### Parameters

* **name**: *string* - The name of the asset.

### Returns

A Promise that resolves to `null`.

#

### Example

```typescript
const assets = await webflow.getAllAssets()
const asset = assets[0]
await asset.setName("Marvin the Paranoid Android")
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canManageAssets** | Any    | Any    | Any      | Any      |

---

# Get Alt Text

> 

## `asset.getAltText()`

This method retrieves the Alt Text for a specific Asset.

### Syntax

```typescript
asset.getAltText(): Promise<string>
```

### Returns

**Promise\<*string*>**

A Promise that resolves to the Alt Text string.

### Example

```typescript
// Get Asset by ID
const asset = await webflow.getAssetById(asset_id)
console.log(asset)

if (asset) {
  // Get asset URL
  const altText = await asset.getAltText()
  console.log(`Asset Alt Text: ${altText}`)
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessAssets** | any    | any    | any      | any      |

---

# Set Alt Text

> 

## `asset.setAltText(altText, localeId?)`

This method sets the Alt Text for a specific Asset.

### Syntax

```typescript
asset.setAltText(altText: string | null; localeId?: string): Promise<null>
```

### Parameters

* **`altText`**:  *string* - The alt text for the Asset. If null is passed as this parameter, Webflow will set the asset alt text to "decorative."
* **`localeId`** *string* (optional) - The Locale ID for the Alt Text.

### Returns

**Promise\<*null*>**

A Promise that resolves to `null`.

### Example

```typescript
// Get Asset by ID
const asset = await webflow.getAssetById(assetId)
console.log(asset)

if (asset) {
  // Get asset URL
  const originalAltText = await asset.getAltText()
  await asset.setAltText(altText)
  const newAltText = await asset.getAltText()
  console.log(`Original Asset Alt Text: ${originalAltText}`)
  console.log(`New Asset Alt Text: ${newAltText}`)
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canManageAssets** | any    | any    | any      | any      |

---

# Set Asset File

> Set the file of an asset.

## `asset.setFile(fileBlob)`

Set the file of an asset. Use this method to replace the file of an existing asset with a new file.

## Syntax

```typescript
asset.setFile(fileBlob: File): Promise<null>
```

## Parameters

* **`fileBlob`**: *File* - The file to set the asset to.

## Returns

A Promise that resolves to `null`.

#

### Example

```typescript
const assets = await webflow.getAllAssets();
const asset = assets[0];
const newFile = new File([blob], 'marvin-smiling.png', { type: 'image/png' });
await asset.setFile(newFile);
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canManageAssets** | Any    | Any    | Any      | Any      |

---

# Get Asset MIME Type

> 

## `asset.getMimeType()`

Retrieve the [MIME Type ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)of a specified asset.

### Syntax

```typescript
asset.getMimeType(): Promise<string>
```

### Returns

**Promise\<*string*>**

A Promise that resolves to the MIME type of the Asset

### Example

```typescript
// Get Selected Element
const el = await webflow.getSelectedElement()

// Check if element is selected and its type
if (!el || el.type !== 'Image') {
  console.error('Please select an Image element on the canvas')
  await webflow.notify({
    type: 'Error',
    message: 'Please select an Image element on the canvas',
  })
} else {
  const asset = await el.getAsset() // Get Asset
  const assetMimeType = await asset?.getMimeType() // Get Asset MIME Type
  console.log(`Asset MIME type: ${assetMimeType}`)
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessAssets** | any    | any    | any      | any      |

---

# Get Asset URL

> 

## `asset.getUrl()`

This method retrieves the hosted URL of an asset hosted on Webflow's CDN.

### Syntax

```typescript
asset.getUrl(): Promise<string>
```

### Returns

**Promise\<*string*>**

A Promise that resolves to the URL string of the hosted asset.

### Example

```typescript
// Get Asset by ID
const asset = await webflow.getAssetById(asset_id)
console.log(asset)

if (asset) {
  // Get asset URL
  const url = await asset.getUrl()
  console.log(`Asset URL: ${url}`)
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessAssets** | any    | any    | any      | any      |

---

# Get folder of an Asset

> Get the folder of the current Asset in the Webflow Designer

## `Asset.getParent()`

Gets the folder of the current Asset in the Webflow Designer

#

### Syntax

```typescript
Asset.getParent(): Promise<AssetFolder | null>
```

### Returns

**`AssetFolder` | `null`**

A Promise that resolves to the parent Asset folder, or `null` if a parent folder does not exist for the Asset.

#

### Example

```typescript
// Get all Assets
const assets = await webflow.getAllAssets()
const asset = assets[0]

const folder = await asset.getParent()

if (folder) {
    console.log(folder)
} else {
    console.log("A parent folder does not exist for this asset")
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessAssets** | Any    | Any    | Any      | Any      |

---

# Set folder for an Asset

> Set the folder of the current Asset in the Webflow Designer

## `Asset.setParent(assetFolder)`

Sets the folder of the current Asset in the Webflow Designer

#

### Syntax

```typescript
Asset.setParent(assetFolder: AssetFolder): Promise<null>
```

### Returns

**`null`**

A Promise that resolves to `null`.

#

### Example

```typescript
// Get all Assets
const assets = await webflow.getAllAssets()
const myAsset = assets[0]

const folders = await webflow.getAllAssetFolders()
const folder = folders[0]

if (folder) {
await myAsset.setParent(folder)
console.log(`Asset: ${myAsset.id} moved to ${folder.id}`)
} else {
webflow.notify({ type: 'Error', message: 'Folder not found' })
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canManageAssets** | Any    | Any    | Any      | Any      |

---

# Get all Asset folders

> Get all Asset folders for a site in the designer

## `webflow.getAllAssetFolders()`

Get all folders in the Assets panel.

#

### Syntax

```typescript
getAllAssetFolders(): Promise<Array<AssetFolder>>
```

### Returns

**Array\<AssetFolder>**

An array of AssetFolders

#

### Example

```typescript
const folders = await webflow.getAllAssetFolders()
    console.log(folders)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessAssets** | Any    | Any    | Any      | Any      |

---

# Create an Asset folder

> Create an Asset Folder in a Designer Extension

## `webflow.createAssetFolder(name, parentFolderId)`

Creates a folder in the Assets panel, which can also be nested within an existing folder for better organization.

#

### Syntax

```typescript
createAssetFolder(name: string, parentFolderId?: string): Promise<AssetFolder>
```

### Parameters

* **name**: *string* - The display name of the new folder
* **parentFolderId**: *string* - (optional) - The ID of the desired parent folder. Get existing folder IDs from [webflow.getAllAssetFolders()](/designer/reference/get-all-asset-folders)

### Returns

**Return Value**

A Promise resolving to an *AssetFolder* object.

#

### Example

```typescript
// Get All Asset Folders
    const folders = await webflow.getAllAssetFolders()

    const parentFolderName = "My Parent Folder Name"

    // Find Parent Folder by Name
    if (parentFolderName && parentFolderName !== '') {
      const parentFolder = await Promise.all(
        folders.map(async (folder) => {
          const folderName = await folder.getName()
          if (folderName === parentFolderName) {
            return folder
          }
          return null
        }),
      ).then((results) => results.find((folder) => folder !== null))

      // Create Asset Folder with parent folder
      if (parentFolder) {
        const newFolder = await webflow.createAssetFolder(name, parentFolder.id)
        console.log(newFolder)
      }
    } else {
      // Crate Asset Folder
      const newFolder = await webflow.createAssetFolder(name)
      console.log(newFolder)
    }
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canManageAssets** | Any    | Any    | Any      | Any      |

---

# Get Asset folder name

> Get the name of the current Asset folder

## `assetFolder.getName()`

Get the name of the current AssetFolder object

#

### Syntax

```typescript
AssetFolder.getName(): Promise<string>
```

### Returns

**String**

A Promise that returns the name of the AssetFolder object

#

### Example

```typescript
// Create Asset Folder
const newFolder = await webflow.createAssetFolder(name)
const folderName = await newFolder.getName()

console.log(folderName)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessAssets** | Any    | Any    | Any      | Any      |

---

# Pages & Folders

> 

<video autoplay loop muted>
    

  <source src="https://dhygzobemt712.cloudfront.net/Web/developers/videos/24005_API%20Documentation_Pages%20Overview_v1_24fps.webm" type="video/webm" />

    Your browser does not support HTML video.
</video>

The Pages and Folders APIs provide access to the organizational structure of a site, as well as the settings and metadata of individual pages.

## Pages

The Pages APIs provide access to general page information, enabling Apps to update a page name, slug, and title. Additionally, Apps can programmatically manage SEO and Open Graph information through the Pages APIs, which is essential for improving search engine visibility and ranking, as well as controlling how content looks when shared on social media platforms.

Lastly, the Pages APIs also allow visibility into the current setting of a page, allowing Apps to determine whether a page is a draft, or if it's password protected and more.

## Folders

The Folders APIs allow Apps to [organize pages within folders, also known as directories.](https://university.webflow.com/lesson/page-folders?topics=site-settings) You can create and nest folders – subfolders, or subdirectories – for sites with deep hierarchy (i.e., sites with information organized into more sub-levels).

<Info title="Folders affect page URLs">
  Moving pages or folders to a new folder will result in a URL update. This will cause the old URLs to return a 404 page. If you want the old URLs to redirect to the new location, you’ll need to use 301 redirects.
</Info>

---

# Create folder

> 

## `webflow.createPageFolder()`

Creates a new folder on the site.

### Syntax

```typescript
webflow.createPageFolder(): Promise<Folder>
```

### Returns

**Promise\<*Folder*>**

A Promise that resolves to the newly created folder.

### Example

```typescript
// Create and name new folder
const newFolder = await webflow.createPageFolder()
await newFolder.setName(name)

// Print details
const folderName = await newFolder.getName()
console.log(folderName)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability  | Locale | Branch | Workflow | Sitemode |
| :---------------- | :----- | :----- | :------- | :------- |
| **canCreatePage** | Any    | Any    | Any      | Design   |

---

# Create page

> 

## `webflow.createPage()`

Create a new page in the Designer. This method will return an error if the App tries to create more pages than a User's plan allows.

### Syntax

```typescript
webflow.createPage(): Promise<Page>
```

### Returns

**Promise\<*Page*>**

A Promise that resolves to the created page.

### Example

```typescript
// Create new page and set page name
const newPage = await webflow.createPage() as Page
await newPage.setName('My New Page')

// Switch to new page
await webflow.switchPage(newPage)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability  | Locale | Branch | Workflow | Sitemode |
| :---------------- | :----- | :----- | :------- | :------- |
| **canCreatePage** | Any    | Any    | Any      | Design   |

---

# Get all pages and folders

> 

## `webflow.getAllPagesAndFolders()`

Retrieves all pages and folders in the current site.

### Syntax

```typescript
webflow.getAllPagesAndFolders(): Promise<Array<Page | Folder>>
```

### Returns

**Promise\<Array\<*Folder* | *Page*>>**

A Promise that resolves to an array of page and/or folder objects.

### Example

```typescript
// Get all pages and folders
const pagesAndFolders = await webflow.getAllPagesAndFolders()

// Print Page Details
const pages = pagesAndFolders?.filter(i => i.type === "Page")
await Promise.all(pages.map(async page => {

  const pageName = await page.getName()
  console.log(`Page: ${pageName}`)

}))

const folders = pagesAndFolders?.filter(i => i.type === "PageFolder")
await Promise.all(folders.map(async folder => {

  const folderName = await folder.getName()
  console.log(`Folder: ${folderName}`)

}))
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Get the current page

> 

## `webflow.getCurrentPage()`

Retrieves the current page open in the Designer.

### Syntax

```typescript
webflow.getCurrentPage(): Promise<Page>
```

### Returns

**Promise\<*Page*>**

A Promise that resolves to the current page.

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage()
const pageName = await currentPage?.getName()

// Print page details
console.log(currentPage, pageName)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Switch to a page

> 

## `webflow.switchPage(page)`

Switch the Designer to a specified page.

### Syntax

```typescript
webflow.switchPage(page: Page): Promise<null>
```

### Parameters

**`page`** :   *Page* - The page to switch to.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null` when the page switch is complete.

### Example

```typescript
// Get All Pages and Folders
const pagesAndFolders = await webflow.getAllPagesAndFolders()
const pages = pagesAndFolders?.filter((i): i is Page => i.type === "Page")

// Switch Page
const newPage = pages[2]
await webflow.switchPage(newPage)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

Checks for authorization only

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | An       |

---

# Set page metadata

> Set the metadata of a page.

## `page.setMetadata(parameters)`

Updates the metadata of a page, including SEO-related properties, OpenGraph settings, and search configurations. For more information on the information and properties, see all methods in the Managing Pages section of the API Reference.

### Syntax

```typescript
page.setMetadata(metadata: PageMetadata): void

type PageMetadata = {
  name: string;
  slug: string;
  title: string;
  description: string;
  isDraft: boolean;
  usesTitleAsOpenGraphTitle: boolean;
  openGraphTitle: string;
  usesDescriptionAsOpenGraphDescription: boolean;
  openGraphDescription: string;
  openGraphImage: string;
  isExcludedFromSearch: boolean;
  usesTitleAsSearchTitle: boolean;
  searchTitle: string;
  usesDescriptionAsSearchDescription: boolean;
  searchDescription: string;
  usesOpenGraphImageAsSearchImage: boolean;
  searchImage: string;
}
```

### Parameters

* **metadata**: *PageMetadata* - An object containing the page metadata properties:
  * **name**: *string* - The name of the page
  * **slug**: *string* - The URL-friendly identifier for the page
  * **title**: *string* - The page title
  * **description**: *string* - The page description
  * **isDraft**: *boolean* - Whether the page is in draft status
  * **usesTitleAsOpenGraphTitle**: *boolean* - Whether to use the page title as the OpenGraph title
  * **openGraphTitle**: *string* - Custom OpenGraph title
  * **usesDescriptionAsOpenGraphDescription**: *boolean* - Whether to use the page description as the OpenGraph description
  * **openGraphDescription**: *string* - Custom OpenGraph description
  * **openGraphImage**: *string* - URL of the OpenGraph image
  * **isExcludedFromSearch**: *boolean* - Whether to exclude the page from search results
  * **usesTitleAsSearchTitle**: *boolean* - Whether to use the page title as the search title
  * **searchTitle**: *string* - Custom search title
  * **usesDescriptionAsSearchDescription**: *boolean* - Whether to use the page description as the search description
  * **searchDescription**: *string* - Custom search description
  * **usesOpenGraphImageAsSearchImage**: *boolean* - Whether to use the OpenGraph image as the search image
  * **searchImage**: *string* - Custom search image URL

### Returns

**Promise\<`null`>**

A promise that resolves to `null`.

### Example

```typescript
// Update page metadata
page.setMetadata({
  name: "Product Features",
  slug: "product-features",
  title: "Awesome Product Features",
  description: "Discover our product's amazing features",
  isDraft: false,
  usesTitleAsOpenGraphTitle: true,
  openGraphTitle: "",
  usesDescriptionAsOpenGraphDescription: true,
  openGraphDescription: "",
  openGraphImage: "https://example.com/og-image.jpg",
  isExcludedFromSearch: false,
  usesTitleAsSearchTitle: true,
  searchTitle: "",
  usesDescriptionAsSearchDescription: true,
  searchDescription: "",
  usesOpenGraphImageAsSearchImage: true,
  searchImage: ""
});
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability      | Locale | Branch | Workflow | Sitemode |
| :-------------------- | :----- | :----- | :------- | :------- |
| canManagePageSettings | Any    | Any    | Any      | Any      |

---

# Get page name

> Get the name of the page.

## `page.getName()`

Get the name of the page.

#

### Syntax

```typescript
page.getName(): Promise<string>
```

### Returns

**Promise\<`string`>**

A promise that resolves to the name of the page.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Get page name
const pageName = await currentPage.getName()
console.log(pageName)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set page name

> Set the name of the page.

## `page.setName(name)`

Set the name of the page.

#

### Syntax

```typescript
page.setName(name: string): Promise<null>
```

### Parameters

* **name**: `string` - The new name of the page.

### Returns

**Promise\<`null`>**

A promise that resolves to `null`.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Set page name
await currentPage.setName("My New Page")
console.log(pageName)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Get page title

> Get the title of the page.

## `page.getTitle()`

Get the title of the page.

#

### Syntax

```typescript
page.getTitle(): Promise<string>
```

### Returns

**Promise\<`string`>**

A promise that resolves to the title of the page.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Get page title
const pageTitle = await currentPage.getTitle()
console.log(pageTitle)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set page title

> Set the title of the page.

## `page.setTitle(title)`

Set the title of the page.

#

### Syntax

```typescript
page.setTitle(title: string | null): Promise<null>
```

### Parameters

* **title**: `string | null` - The new title of the page.

### Returns

**Promise\<`null`>**

A promise that resolves to `null`.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Set page Title
await currentPage.setTitle("My New Title")
console.log(pageTitle)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Get page slug

> Get the slug of the page.

## `page.getSlug()`

Get the slug of the page.

#

### Syntax

```typescript
page.getSlug(): Promise<string>
```

### Returns

**Promise\<`string`>**

A promise that resolves to the slug of the page.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Get page slug
const pageSlug = await currentPage.getSlug()
console.log(pageSlug)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set page slug

> Set the slug of the page.

## `page.setSlug(slug)`

Set the slug of the page.

#

### Syntax

```typescript
page.setSlug(slug: string): Promise<null>
```

### Parameters

* **slug**: `string` - The new slug of the page.

### Returns

**Promise\<`null`>**

A promise that resolves to `null`.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Set page Description
await currentPage.setSlug(slug)
const newSlug = await currentPage.getSlug()
console.log("Slug",newSlug)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Get page description

> Get the description of the page.

## `page.getDescription()`

Get the description of the page.

#

### Syntax

```typescript
page.getDescription(): Promise<null | string>
```

### Returns

**Promise\<`null | string`>**

A promise that resolves to the description of the page.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Get page Description
const pageDescription = await currentPage.getDescription()
console.log(pageDescription)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set page description

> Set the description of the page.

## `page.setDescription(description)`

Set the description of the page.

#

### Syntax

```typescript
page.setDescription(description: string | null): Promise<null>
```

### Parameters

* **description**: `string | null` - The new description of the page.

### Returns

**Promise\<`null`>**

A promise that resolves to `null`.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Set page Description
await currentPage.setDescription("My New Description")
console.log(pageDescription)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Get page publish path

> Get the publish path of the page.

## `page.getPublishPath()`

Get the publish path of the page.

#

### Syntax

```typescript
page.getPublishPath(): Promise<null | string>
```

### Returns

**Promise\<`null | string`>**

A promise that resolves to the publish path of the page.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Get page publish path
const pagePublishPath = await currentPage.getPublishPath()
console.log(pagePublishPath)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Get page category

> Get the category of the page.

## `page.getKind()`

Get the category of the page.

#

### Syntax

```typescript
page.getKind(): Promise<string>
```

### Returns

**Promise\<`string`>**

A promise that resolves to a string indicating the kind of the current page. The possible values are:

* `'static'`
* `'ecommerce'`
* `'cms'`
* `'userSystems'`
* `'utility'`
* `'staticTemplate'`

#

### Example

```typescript
// Get Current Page
const currentPage = (await webflow.getCurrentPage()) as Page

// Get the page
const pageKind = await currentPage.getKind()
console.log(`Page Category: ${pageKind}`)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Get utility page key

> Get the utility page key of the page.

## `page.getUtilityPageKey()`

Get the page key of a [Webflow utility page.](https://help.webflow.com/hc/en-us/articles/33961362705171-Page-URLs#utility-pages)

#

### Syntax

```typescript
page.getUtilityPageKey(): Promise<null | UtilKey>
```

### Returns

**Promise\<`null` | `UtilKey`>**

A promise that resolves to one of the following utility page keys, or `null` if the page is not a utility page:

* `'401'` - Unauthorized access page
* `'404'` - Not found page
* `'search'` - Search results page
* `'ecommerce-checkout'` - Main checkout page
* `'ecommerce-paypal-checkout'` - PayPal checkout flow
* `'ecommerce-confirmation'` - Order confirmation page
* `'usys-log-in'` - User login page
* `'usys-sign-up'` - User registration page
* `'usys-reset-password'` - Password reset request page
* `'usys-user-account'` - User account management
* `'usys-update-password'` - Password update page
* `'usys-access-denied'` - Access denied error page

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Get utility page key
const utilityKey = await currentPage.getUtilityPageKey()
console.log("Utility Key", utilityKey)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Get collection ID from a CMS page

> Get the collection ID from a CMS page.

## `page.getCollectionID()`

Get the collection ID from a page generated by a collection.

#

### Syntax

```typescript
page.getCollectionID(): Promise<string>
```

### Returns

**Promise\<`string`>**

A promise that resolves to the ID of the collection that generated the page.

#

### Example

```typescript
try {
  // Get Current Page
  const currentPage = (await webflow.getCurrentPage()) as Page

  // Get Collection ID if page belongs to a collection
  const collectionId = await currentPage.getCollectionId()
  console.log(collectionId)
} catch (error) {
  console.error([error.cause.tag, error.message])
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Error Handling

If the method fails to find a collection, the method will return an error with the following tag and message.

| Tag               | Message              |
| :---------------- | :------------------- |
| `ResourceMissing` | `Missing ${page.id}` |

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Get collection name from a CMS page

> Get the name of the collection that generated the page.

## `page.getCollectionName()`

Get the name of the collection that generated the collection-generated page.

#

### Syntax

```typescript
page.getCollectionName(): Promise<string>
```

### Returns

**Promise\<`string`>**

A promise that resolves to the name of the collection that generated the page.

#

### Example

```typescript
try{
    // Get Current Page
    const currentPage = (await webflow.getCurrentPage()) as Page

    // Get Collection ID if page belongs to a collection
    const collectionName = await currentPage.getCollectionName()
    console.log(collectionName)
    }
catch (error) {
      console.error([error.message, error.cause.tag])
    }
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Error Handling

If the method fails to find a collection, the method will return an error with the following tag and message.

| Tag               | Message              |
| :---------------- | :------------------- |
| `ResourceMissing` | `Missing ${page.id}` |

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Check if page is draft

> Method for checking if a page is a draft.

## `page.isDraft()`

Check if the page is a draft.

#

### Syntax

```typescript
page.isDraft(): Promise<boolean>;
```

### Returns

**Promise\<Boolean>**

A promise that resolves to a boolean value indicating whether the page is a draft.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Check page status
const isDraft = await currentPage.isDraft()

// Print page status
if (isDraft) {

  console.log('Page is draft')
} else {
  console.log('Page is not a draft')
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **designerAbility** | Any    | Any    | Any      | Any      |

---

# Set draft status

> Set the draft status of the page.

## `page.setDraft()`

Set the draft status of the page.

#

### Syntax

```typescript
page.setDraft(isDraft: boolean): Promise<null>
```

### Parameters

* **isDraft**: *boolean* - Whether the page should be set to draft mode.

### Returns

**Promise\<`null`>**

A promise that resolves to `null`.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Set page as draft
await currentPage.setDraft(true)
const isDraft = await currentPage.isDraft()

// Print status
console.log(isDraft)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Check if page is homepage

> Check if the page is the homepage.

## `page.isHomepage()`

Check if the page is set as the homepage.

#

### Syntax

```typescript
page.isHomepage(): Promise<boolean>
```

### Returns

**Promise\<`boolean`>**

A promise that resolves to a boolean value indicating whether the page is the homepage.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Check if current page is the homepage
const isHomepage = await currentPage.isHomepage()

if (isHomepage) {
  console.log('Current page is the Homepage')
} else {
  console.log('Current page is not the Homepage')
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Check if page is password protected

> Check if the page is password protected.

## `page.isPasswordProtected()`

Check if the page is password protected.

#

### Syntax

```typescript
page.isPasswordProtected(): Promise<boolean>
```

### Returns

**Promise\<`boolean`>**

A promise that resolves to a boolean value indicating whether the page is password protected.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Check if current page is the homepage
const isPasswordProtected = await currentPage.isPasswordProtected()

if (isPasswordProtected) {
  console.log('Current page is PasswordProtected')
} else {
  console.log('Current page is not PasswordProtected')
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Get search title

> Method for getting the search title of a page.

## `page.getSearchTitle()`

Get the search title of the page.

#

### Syntax

```typescript
page.getSearchTitle(): Promise<string>;
```

### Returns

**Promise\<`string`>**

A Promise that resolves to a `string` value.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Get Search engine title and print details
const searchEngineTitle = currentPage.getSearchTitle()
console.log(searchEngineTitle)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set search title

> Method for setting the search title of a page.

## `page.setSearchTitle(title)`

Set the search title of the page.

#

### Syntax

```typescript
page.setSearchTitle(title: string | null): Promise<null>;
```

### Parameters

* **title**: *`string | null`* - The search title of the page.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Set search engine title and print details
await currentPage.setSearchTitle("My New Title")
const searchTitle = await currentPage.getSearchTitle()
console.log(searchTitle)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Check if page uses title as search title

> Method for checking if a page uses the page title as the search title.

## `page.usesTitleAsSearchTitle()`

Check if the page uses the page title as the search title.

#

### Syntax

```typescript
page.usesTitleAsSearchTitle(): Promise<boolean>;
```

### Returns

**Promise\<`boolean`>**

A Promise that resolves to a `boolean` value.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage()

// Check title
const usesTitle = await currentPage?.usesTitleAsSearchTitle()

if (usesTitle){
  console.log('This page uses its Title as the Search Engine title')
} else {
  console.log( "This page has a custom search engine title")
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Use page title as search title

> Method for setting the page title as the search title.

## `page.useTitleAsSearchTitle(shouldUseTitle)`

Set the page title as the search title.

#

### Syntax

```typescript
page.useTitleAsSearchTitle(use: boolean): Promise<null>;
```

### Parameters

* **shouldUseTitle**: *`boolean`* - Whether the page title should be used as the search title.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage()

// Set title as search title
await currentPage?.useTitleAsSearchTitle(true)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Get search description

> Method for getting the search description of a page.

## `page.getSearchDescription()`

Get the search description of the page.

#

### Syntax

```typescript
page.getSearchDescription(): Promise<string>;
```

### Returns

**Promise\<`string`>**

A Promise that resolves to a `string` value.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Get search engine description and print details
const searchEngineDescription = await currentPage.getSearchDescription()
console.log(searchEngineDescription)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set search description

> Method for setting the search description of a page.

## `page.setSearchDescription(description)`

Set the search description of the page.

#

### Syntax

```typescript
page.setSearchDescription(description: string | null): Promise<null>;
```

### Parameters

* **description**: *`string | null`* - The search description to set.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Set search engine description and print details
await currentPage.setSearchDescription("My New Description")
const searchDescription = await currentPage.getSearchDescription()
console.log(searchDescription)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Check if page description is used as search description

> Method for checking if the page description is used as the search description.

## `page.usesDescriptionAsSearchDescription()`

Check if the page description is used as the search description.

#

### Syntax

```typescript
page.usesDescriptionAsSearchDescription(): Promise<boolean>;
```

### Returns

**Promise\<`boolean`>**

A Promise that resolves to a `boolean` value.

#

### Example

```typescript
// Get current page
const currentPage = await webflow.getCurrentPage()

// Check search engine description
const isSearchDescription = await currentPage?.usesDescriptionAsSearchDescription()

if(isSearchDescription){
  console.log("This page uses its description as the search engine description")
} else {
  console.log("This page has a custom search engine description")
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Use page description as search description

> Method for setting the page description as the search description.

## `page.useDescriptionAsSearchDescription(use)`

Set the page description as the search description.

#

### Syntax

```typescript
page.useDescriptionAsSearchDescription(use: boolean): Promise<null>;
```

### Parameters

* **use**: *`boolean`* - Whether the page description should be used as the search description.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Set description as search description
await currentPage.useDescriptionAsSearchDescription(true)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability               | Locale | Branch | Workflow | Sitemode |
| :----------------------------- | :----- | :----- | :------- | :------- |
| \*\*canManagePageSettings	\*\* | Any    | Any    | Any      | Any      |

---

# Get search image

> Method for getting the search image of a page.

## `page.getSearchImage()`

Get the search image of the page.

#

### Syntax

```typescript
page.getSearchImage(): Promise<string>;
```

### Returns

**Promise\<`string`>**

A Promise that resolves to a `string` value.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Get search engine Image and print details
const searchEngineImage = await currentPage.getSearchImage()
console.log(searchEngineImage)`
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set search image

> Method for setting the search image of a page.

## `page.setSearchImage(url)`

Set the search image of the page.

#

### Syntax

```typescript
page.setSearchImage(url: string | null): Promise<null>;
```

### Parameters

* **url**: *`string | null`* - The URL of the image to set as the search image.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

#

### Example

```typescript
// Get current page
const currentPage = await webflow.getCurrentPage()

// Set search image
await currentPage?.setSearchImage('https://example.com/image.jpg')
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Use Open Graph image as search image

> Method for using the Open Graph image as the search image.

## `page.useOpenGraphImageAsSearchImage(use)`

Use the Open Graph image as the search image.

#

### Syntax

```typescript
page.useOpenGraphImageAsSearchImage(use: boolean): Promise<null>;
```

### Parameters

* **use**: *`boolean`* - Whether to use the Open Graph image as the search image.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

#

### Example

```typescript
// Get current page
const currentPage = await webflow.getCurrentPage()

// Set Open Graph image as search image
await currentPage?.useOpenGraphImageAsSearchImage(true)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Check if page is excluded from search

> Method for checking if a page is excluded from internal site search.

## `page.isExcludedFromSearch()`

Check if the page is excluded from [internal site search.](https://help.webflow.com/hc/en-us/articles/33961242348179-Site-search)

#

### Syntax

```typescript
page.isExcludedFromSearch(): Promise<boolean>;
```

### Returns

**Promise\<`boolean`>**

A Promise that resolves to a `boolean` value.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage()

// Check if page is excluded from webflow's internal site search
const isExcluded = await currentPage?.isExcludedFromSearch()

if (isExcluded){
  console.log("Current page is excluded from Webflow's internal site search")
} else {
  "Current page is included in included in Webflow's internal site search"
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Exclude page from search

> Method for excluding a page from internal site search.

## `page.excludeFromSearch(shouldExclude)`

Exclude the page from [internal site search.](https://help.webflow.com/hc/en-us/articles/33961242348179-Site-search)

#

### Syntax

```typescript
page.excludeFromSearch(shouldExclude: boolean): Promise<null>;
```

### Parameters

* **shouldExclude**: *`boolean`* - Whether the page should be excluded from search engine indexing.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage()

// Exclude from search engine indexing
await currentPage.excludeFromSearch(true)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Get Open Graph title

> Method for getting the open graph title of a page.

## `page.getOpenGraphTitle()`

Retrieves the Open Graph title of the page.

#

### Syntax

```typescript
page.getOpenGraphTitle(): Promise<string>
```

### Returns

**Promise\<`string`>**

A Promise that resolves to a string with the Open Graph title of the page.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Get Open Graph Title
const openGraphTitle = await currentPage.getOpenGraphTitle()
console.log("Open Graph Title", openGraphTitle)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set Open Graph title

> Method for setting the open graph title of a page.

## `page.setOpenGraphTitle(title)`

Sets the Open Graph title of the page.

#

### Syntax

```typescript
page.setOpenGraphTitle(title: string | null): Promise<null>
```

### Parameters

* **title**: *string | null* - The new Open Graph title for the page.

### Returns

**Promise\<`null`>**

Returns `null` if successful.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Set Open Graph Title
await currentPage.setOpenGraphTitle("My New Title")

// Print results
const openGraphTitle = await currentPage.getOpenGraphTitle()
console.log("Open Graph Title", openGraphTitle)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Check if page uses title as Open Graph title

> Method for checking if the title is used as the open graph title in Webflow.

## `page.usesTitleAsOpenGraphTitle()`

Checks if the page uses the page title as the Open Graph title.

#

### Syntax

```typescript
page.usesTitleAsOpenGraphTitle(): Promise<boolean>
```

### Returns

**Promise\<`boolean`>**

Returns `true` if the page uses the page title as the Open Graph title, otherwise returns `false`.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page
// Check if page is using the Title as the Open Graph title
const isOpenGraphTitle = await currentPage.usesTitleAsOpenGraphTitle()
// Print results
if (isOpenGraphTitle) {
  console.log('Page uses Title as Open Graph Title')
} else {
  console.log('This page has a custom Open Graph Title')
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set page to use title as Open Graph title

> Method for setting the page to use the page title as the Open Graph title.

## `page.setUsesTitleAsOpenGraphTitle(value)`

Indicate whether the page should use its title as the Open Graph (OG) title.

#

### Syntax

```typescript
page.useTitleAsOpenGraphTitle(use: boolean): Promise<null>
```

### Parameters

* **use**: *boolean* - Set to `true` to use the page title as the Open Graph title, otherwise set to `false`.

### Returns

**Promise\<`null`>**

Returns `null` if successful.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page
// Set page title as open graph title
await currentPage.useTitleAsOpenGraphTitle(true)
const title = await currentPage.getOpenGraphTitle()
console.log(title)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Get Open Graph description

> Method for getting a page's Open Graph description.

## `page.getOpenGraphDescription()`

Retrieves the Open Graph description of the page.

#

### Syntax

```typescript
page.getOpenGraphDescription(): Promise<string>
```

### Returns

**Promise\<`string`>**

A Promise that resolves to a string containing the Open Graph description of the page.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Get Open Graph Description
const openGraphDescription = await currentPage.getOpenGraphDescription()
console.log("Open Graph Description", openGraphDescription)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set Open Graph description

> Method for setting a page's Open Graph description.

## `page.setOpenGraphDescription(description)`

Sets a page's Open Graph description.

#

### Syntax

```typescript
page.setOpenGraphDescription(description: string | null): Promise<null>
```

### Parameters

* **description**: *string | null* - The Open Graph description to set.

### Returns

**Promise\<`null`>**

A Promise that resolves to null.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Set Open Graph Description
await currentPage.setOpenGraphDescription(description)

// Print results
const openGraphDescription = await currentPage.getOpenGraphDescription()
console.log("Open Graph Description", openGraphDescription)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Check if page uses description as Open Graph description

> Method for checking if a page uses its description as its open graph description.

## `page.usesDescriptionAsOpenGraphDescription()`

Checks if the page uses its description as its Open Graph description.

#

### Syntax

```typescript
page.usesDescriptionAsOpenGraphDescription(): Promise<boolean>
```

### Returns

**Promise\<`boolean`>**

A Promise that resolves to a boolean indicating whether the page uses its description as its Open Graph description.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Check page status
const isOpenGraphDescription = await currentPage.usesDescriptionAsOpenGraphDescription()

// Print page status
if (isOpenGraphDescription) {

  console.log('Page uses Page Description as Open Graph Description')
} else {
  console.log('This page has a custom Open Graph Description')
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Use description as Open Graph description

> Method for setting a page's description as its Open Graph description.

## `page.useDescriptionAsOpenGraphDescription()`

Sets a page's description as its Open Graph description.

#

### Syntax

```typescript
page.usesDescriptionAsOpenGraphDescription(): Promise<boolean>
```

### Returns

**Promise\<`boolean`>**

A Promise that resolves to a boolean indicating whether the page uses its description as its Open Graph description.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

// Check page status
const isOpenGraphDescription = await currentPage.usesDescriptionAsOpenGraphDescription()

// Print page status
if (isOpenGraphDescription) {

  console.log('Page uses Page Description as Open Graph Description')
} else {
  console.log('This page has a custom Open Graph Description')
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Get Open Graph image

> Method for getting a page's Open Graph image.

## `page.getOpenGraphImage()`

Retrieves the Open Graph image of the page.

#

### Syntax

```typescript
page.getOpenGraphImage(): Promise<string>
```

### Returns

**Promise\<`string`>**

A Promise that resolves to a string containing the Open Graph image of the page.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

//  Get Open Graph image and Print Details
const openGraphImage = await currentPage.getOpenGraphImage()
console.log(openGraphImage)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set Open Graph image URL

> Method for setting a page's Open Graph image URL.

## `page.setOpenGraphImageUrl(url)`

Sets a page's Open Graph image URL.

#

### Syntax

```typescript
page.setOpenGraphImage(url: string | null): Promise<null>
```

### Parameters

* **url**: *string | null* - The URL of the Open Graph image to set.

### Returns

**Promise\<`null`>**

A Promise that resolves to null.

#

### Example

```typescript
// Get Current Page
const currentPage = await webflow.getCurrentPage() as Page

//  Set open graph image and print details
await currentPage.setOpenGraphImage("example.com/image.jpg")
const openGraphImage = currentPage.getOpenGraphImage()
console.log(openGraphImage)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Get folder name

> 

## `folder.getName()`

Retrieve the name of the folder.

### Syntax

```typescript
folder.getName(): Promise<string>
```

### Returns

**Promise\<*String*>**

A Promise that resolves to a `string` value of the folder name.

### Example

```typescript
// Get all Pages and folders
const pagesAndFolders = await webflow.getAllPagesAndFolders()

for (let folder of pagesAndFolders) {

  const folderName = await folder.getName()
  const type = folder.type
  console.log(folderName, type)
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Get folder slug

> 

## `folder.getSlug()`

Get the folder's slug.

### Syntax

```typescript
folder.getSlug(): Promise<string>
```

### Returns

**Promise\<`string`>**

A Promise that resolves to a `string` value of the folder slug.

### Example

```typescript
// Get all Pages and folders
const pagesAndFolders = await webflow.getAllPagesAndFolders()

for (let folder of pagesAndFolders) {

  const folderSlug = await folder.getSlug()
  console.log("Slug", folderSlug)
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Get parent folder

> 

## `folder.getParent()`

Get parent folder of selected folder.

### Syntax

```typescript
folder.getParent(): Promise<null | Folder>
```

### Returns

**Promise\<`null` | *Folder*>**

A Promise that resolves to a `Folder` object if a parent exists, or `null` if no parent is found.

### Example

```coffeescript TypeScript
// Get all Pages and folders
const pagesAndFolders = await webflow.getAllPagesAndFolders()

for (let folder of pagesAndFolders) {

  const childName = await folder.getName()
  const parent = await folder.getParent()
  const parentName = await parent?.getName()
  console.log(`Folder: ${childName}`, `Parent: ${parentName}`)
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability        | Locale | Branch | Workflow | Sitemode |
| :---------------------- | :----- | :----- | :------- | :------- |
| **canReadPageSettings** | Any    | Any    | Any      | Any      |

---

# Set folder name

> 

## `folder.setName(name)`

Set the folder name.

### Syntax

```typescript
folder.setName(name: string): Promise<null>
```

### Parameters

* **name**: `string` - The new name to set for the folder.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

### Example

```coffeescript TypeScript
// Create and name new folder
const newFolder = await webflow.createPageFolder()
await newFolder.setName(name)

// Print details
const folderName = await newFolder.getName()
console.log("My New Folder", folderName)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Set folder slug

> 

## `folder.setSlug(slug)`

Choose a new slug for your folder.

### Syntax

```typescript
folder.setSlug(slug: string): Promise<null>
```

### Parameters:

* **slug**: `string` - The new slug to set for the folder.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

### Example

```coffeescript TypeScript
// Create and give slug to new folder
const newFolder = await webflow.createPageFolder()
await newFolder.setSlug(slug)

// Print details
const newSlug = await newFolder.getSlug()
console.log("My New Slug", newSlug)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Set parent folder

> 

## `folder.setParent(parent: Folder)`

Assign a new parent folder to the selected folder.

### Syntax

```typescript
folder.setParent(parent: Folder): Promise<null>
```

### Parameters

* **parent** : `Folder` - The parent folder to set for the current folder.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null` when the parent folder is set.

### Example

```typescript
// Get all Pages and folders
const pagesAndFolders = await webflow.getAllPagesAndFolders()

// Create and name new folder
const newFolder = await webflow.createPageFolder()
await newFolder.setName("Parent Folder")

for (let folder of pagesAndFolders) {

  await folder.setParent(newFolder)

}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canManagePageSettings** | Any    | Any    | Any      | Any      |

---

# Extension utilities

> Essential utilities for managing your Designer Extension's interaction with Webflow

The Designer API offers essential utilities to manage your extension's behavior and interaction with the Designer.

<CardGroup>
  <Card
    title="Site information"
    href="/designer/reference/get-site-info"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/LayoutDashboard.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/LayoutDashboard.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
  >
    Access site details and configure how your extension appears in the Designer
  </Card>

  <Card
    title="User events"
    href="/designer/reference/events"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Interactions.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Interactions.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
  >
    Subscribe to Designer events to create responsive extensions
  </Card>

  <Card
    title="App discovery"
    href="/designer/reference/app-intents-and-connections"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Export.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Export.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
  >
    Make your extension discoverable in element settings
  </Card>

  <Card
    title="User authentication"
    href="/designer/reference/get-user-id-token"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Encryption.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Encryption.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
  >
    Authenticate users with the Data API, and access Data API resources
  </Card>
</CardGroup>

## Best practices

<CardGroup cols={1}>
  <Card title="Dynamic updates">
    [Subscribe to relevant events](/designer/reference/events) like when a user selects a new element to keep your extension in sync with the Designer state.
  </Card>

  <Card title="Appropriate sizing">
    [Size your extension appropriately](/designer/reference/resize-extension) with `resizeExtension()`. Too large and it dominates the UI; too small and it's hard to use.
  </Card>
</CardGroup>

<Callout type="success">
  For a comprehensive guide to building effective extensions, check out our [Quick Start Guide](/designer/docs/getting-started-designer-extensions) and [App Setup](/designer/reference/app-structure) documentation.
</Callout>

---

# Get site information

> 

## `webflow.getSiteInfo()`

Get metadata about the current site.

### Syntax

```typescript
webflow.getSiteInfo(): Promise<{
    siteId: string;
    siteName: string;
    shortName: string;
    isPasswordProtected: boolean;
    isPrivateStaging: boolean;
    workspaceId: string;
    workspaceSlug: string;
    domains: Array<{
        url: string;
        lastPublished: string | null;
        default: boolean;
        stage: "staging" | "production";
    }>;
}>
```

### Returns

A Promise that resolves to a record containing information about the site that's currently open in the Designer. The record has the following properties:

| Property              | Type                                                                                                        | Description                                                                                    |
| --------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| `siteId`              | *string*                                                                                                    | The unique ID of the current Webflow site.                                                     |
| `siteName`            | *string*                                                                                                    | The name of the current Webflow site.                                                          |
| `shortName`           | *string*                                                                                                    | The short name of the current Webflow site.                                                    |
| `isPasswordProtected` | *boolean*                                                                                                   | Whether the current site is password protected.                                                |
| `isPrivateStaging`    | *boolean*                                                                                                   | Whether the current site is private staging.                                                   |
| `domains`             | *Array`<{url: string, lastPublished: string \| null, default: boolean, stage: "staging" \| "production"}>`* | An array of objects containing information about the domains associated with the current site. |
| `workspaceId`         | *string*                                                                                                    | The unique ID of the workspace that the current site belongs to.                               |
| `workspaceSlug`       | *string*                                                                                                    | The unique slug of the workspace that the current site belongs to.                             |

### Example

```typescript
const siteInfo = await webflow.getSiteInfo();

console.log("Site ID:", siteInfo.siteId);
console.log("Site Name:", siteInfo.siteName);
console.log("Short Name:", siteInfo.shortName);
console.log("Is Password Protected:", siteInfo.isPasswordProtected);
console.log("Is Private Staging:", siteInfo.isPrivateStaging);
console.log("Domains:", siteInfo.domains);
console.log("Workspace ID:", siteInfo.workspaceId);
console.log("Workspace Slug:", siteInfo.workspaceSlug);
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

---

# Resize the extension

> 

## `webflow.setExtensionSize(size)`

Set the desired size of the Extension UI.

Need more room in your app for certain tasks? You can easily make your Designer Extension bigger. But remember, bigger isn't always better. Make it large only when you really need additional surface area and then go back to a smaller size. This way, your users can work smoothly with your app and the Designer at the same time.

### Syntax

```typescript
webflow.setExtensionSize(
  size: 'default' | 'comfortable' | 'large' | {width: number; height: number}
): Promise<null>
```

### Parameters

**size**: *"default"* | *"comfortable"* | *"large"* | `{height: number, width: number}`

The desired size for the Extension UI.  The three available sizes are:

* **Default:** 240px by 360px\
  Great for simple apps that don't require much real estate
* **Comfortable:** 320px by 460px\
  For apps like form submissions that may require a bit more room
* **Large:** 800px by 600px\
  For apps that require in-depth work flows, previews, or in depth control

If passing an object to create a custom size, please note the following size limits.

* **min:** 240x360
* **max:** 1200x800

### Returns

**Promise\<`null`>**

A Promise that resolves to `null` when the size is set.

### Example

```typescript
// Set the desired size for the extension UI
const newSize = "large"; // You can change this to "default," "comfortable," or provide { width, height }

// Set the Extension UI size
await webflow.setExtensionSize(newSize);

console.log(`Extension UI size set to: ${newSize}`);
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

---

# Close the extension

> Close the Designer Extension using the Webflow object

## `webflow.closeExtension()`

Close the Designer Extension using the Webflow object.

### Syntax

```typescript
webflow.closeExtension(): Promise<null>
```

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

### Example

This ReactJSexample shows how to close the extension using a button.

```tsx
function CloseExtensionButton() {
    const handleCloseExtension = async () => {
        try {
            await webflow.closeExtension();
            console.log("Extension closed successfully.");
        } catch (error) {
            console.error("Failed to close the extension:", error);
        }
    };

    return (
        <button onClick={handleCloseExtension}>
            Close Extension
        </button>
    );
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

---

# Get the current breakpoint

> 

## `webflow.getMediaQuery()`

Retrieves the current [breakpoint](https://university.webflow.com/lesson/intro-to-breakpoints?topics=layout-design) setting in the Designer.  Webflow's built-in responsive breakpoints - also known as media queries - allow users to customize site designs for different screen sizes. Knowing the current breakpoint can help your app build responsive content that's applicable to different screen sizes and contexts.

### Syntax

```typescript
webflow.getMediaQuery(): Promise<BreakpointId>
```

### Returns

**Promise\<*BreakpointID* >**:`"xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"` - Identifier for the breakpoint size, also known as media query, in the designer.

A Promise that resolves to the value of the Breakpoint ID.

### Example

```typescript
const breakpointId = await webflow.getMediaQuery();

  switch (breakpointId) {
    case 'xxl':
      console.log("The current view is for very large screens or high-resolution monitors.");
      break;
    case 'xl':
      console.log("The current view is suitable for large desktop monitors.");
      break;
    case 'large':
      console.log("The current view fits standard desktop monitors.");
      break;
    case 'main':
      console.log("The current view is suitable for smaller desktops or large tablets.");
      break;
    case 'medium':
      console.log("The current view is suitable for tablets and some large phones.");
      break;
    case 'small':
      console.log("The current view is designed for larger mobile devices.");
      break;
    case 'tiny':
      console.log("The current view is for the smallest mobile devices.");
      break;
  }
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

---

# Get user ID token

> 

## `webflow.getIdToken()`

Retrieves a [JSON Web Token (JWT)](https://jwt.io) that uniquely identifies the current user of your Designer Extension. This ID token contains encoded user information that can be used for authentication and authorization purposes.

<Card
  title="Authenticating users with the Data API"
  href="/apps/docs/authenticating-users-with-id-tokens"
  icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Encryption.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Encryption.svg" alt="" className="block dark:hidden" />
        </>
    }
  iconPosition="left"
  iconSize="12"
>
  To decode and verify the token, send a POST request to the [Resolve ID Token endpoint](/data/v2.0.0-beta/reference/token/resolve). The endpoint will return the user's details, which you can use to implement permission-based features or personalized experiences in your extension.

  <br />

  <a href="/apps/docs/authenticating-users-with-id-tokens">
    <button class="cc-primary">Read the guide</button>
  </a>
</Card>

### Syntax

```typescript
webflow.getIdToken(): Promise<string>;
```

### Returns

**Promise\<*String*>**

A Promise that resolves to the value of the ID Token. The ID token will remain valid for 15 minutes.

### Example

```typescript
// Get ID Token
const idToken = await webflow.getIdToken()

// Print ID Token
console.log(idToken)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

---

# Get user's Designer capabilities

> 

## `webflow.canForAppMode()`

Determine if the user has a specified list of App abilities.

<Note title="What are App Modes?">
  Designer Extensions enhance user functionality while adhering to the Designer's current mode. Each method within the Designer API provides specific capabilities, aligning with actions available in each mode. For more context on this API, see the [App Modes](https://developers.webflow.com/designer/reference/app-modes) docs.
</Note>

### Querying User Capabilities by Designer Mode

Use this API to proactively query a user’s capabilities based on the Designer mode they are in, to see if they can use a certain feature of your App. There are a number of scenarios when you may use this method, including, but not limited to:

#### Scenarios

1. **On App Launch:**\
   Determine the appropriate UI to display to the user based on the mode they are in.<br />\
   ***Example:*** If your App’s core functionality requires the user to be in the “Editing” role, you can either show UI prompting them to switch to the “Designer” role or notify them that the App can only function in a “Designer” role.<br /><br />
2. **Dynamic UI/UX Adjustments**\
   Adjust the App’s UI/UX dynamically to match the user's current capabilities.<br />\
   ***Example:*** If your App can only show a subset of the UI/features based on the user's current mode, you can alter the App UI/UX to cater to their current capabilities.<br /><br />
3. **User Actions**\
   Surface error notifications if a user attempts an action beyond their current capabilities.<br />\
   ***Example:*** If a user starts your App in Design mode but switches to Editing mode mid-session and attempts to insert new elements, use `canForAppMode()` to check their capabilities before proceeding. This allows you to notify them that the action cannot be performed in the current mode.<br /><br />

### Syntax

```typescript
webflow.canForAppMode(appModes: Array<AppMode>): Promise<{[key in AppMode]: boolean}>
```

### Parameters

* **appModes:** `Array<AppMode>`\
  A list of AppMode enums to request and see if the user has these abilities. You can find the list here:<br />

  ```json
  {
    "canAccessCanvas": "canAccessCanvas",
    "canManageAssets": "canManageAssets",
    "canAccessAssets": "canAccessAssets",
    "canDesign": "canDesign",
    "canEdit": "canEdit",
    "canCreateComponents": "canCreateComponents",
    "canModifyComponents": "canModifyComponents",
    "canCreateStyles": "canCreateStyles",
    "canModifyStyles": "canModifyStyles",
    "canCreatePage": "canCreatePage",
    "canReadPageSettings": "canReadPageSettings",
    "canManagePageSettings": "canManagePageSettings",
    "canReadVariables": "canReadVariables",
    "canModifyVariables": "canModifyVariables",
    "canModifyImageElement": "canModifyImageElement"
  }
  ```

  These AppMode strings can be accessed via `webflow.appModes` (e.g., `webflow.appModes.canDesign`).

<br />

### Returns

**Promise\<*\{\[key in AppMode]}: boolean*>**

A Promise that resolves to a record containing the ability being requested, which maps to whether or not the user has that ability.

### Example

```typescript
const capabilities  = await webflow.canForAppMode([
  webflow.appModes.canEdit, 
  webflow.appModes.canDesign
]);

// User in "Editing" mode
// {capabilities.canEdit: true, capabilities.canDesign: false }
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Example: Checking and Executing Based on Capabilities

Let's build a function that checks if the app can perform the action of inserting an element. If yes, then perform the function; if not, trigger a notification.

```typescript
async function insertElementIfAllowed() {
  const capabilities = await webflow.canForAppMode([
    webflow.appModes.canDesign,
    webflow.appModes.canEdit
  ]);

  if (capabilities.canDesign) {
    try {
      // Get Selected Element
      const selectedElement = await webflow.getSelectedElement();

      if (selectedElement) {
        // Insert DIV before selected Element
        const newDiv = await selectedElement.before(webflow.elementPresets.DivBlock);

        // Print element details
        console.log(`Element inserted: ${JSON.stringify(newDiv)}`);
        // Notify success
        await webflow.notify({ type: 'Success', message: 'Element inserted successfully!' });
      } else {
        // Notify error: No selected element
        await webflow.notify({ type: 'Error', message: 'No element selected!' });
      }
    } catch (error) {
      // Notify error
      await webflow.notify({ type: 'Error', message: 'Failed to insert element!' });
      console.error(error);
    }
  } else {
    // Notify error: User does not have the required capabilities
    await webflow.notify({ type: 'Error', message: 'You do not have the required permissions to insert elements!' });
  }
}

// Execute the function
await insertElementIfAllowed();
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

---

# Get the pseudo state

> Get the current pseudo-class state (e.g. hover, focus, pressed) of the designer.

## `webflow.getPseudoMode()`

Get the current [pseudo-class state](https://help.webflow.com/hc/en-us/articles/33961301727251-States) (e.g. hover, focus, pressed) of the designer.

### Syntax

```typescript
webflow.getPseudoMode(): Promise<null | PseudoStateKey>
```

### Returns

A Promise that resolves to the current pseudo-class state of the designer, or `null` if no pseudo-state is active.

**Promise\<*PseudoStateKey* | null>**

### Example

```typescript
const pseudoState = await webflow.getPseudoMode();  
console.log(pseudoState);
// Output: "hover"
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

### Pseudo-State Keys

| Pseudo-State      | Designer State     | Description                                        |
| :---------------- | :----------------- | :------------------------------------------------- |
| `hover`           | Hover              | Element is hovered over by the mouse               |
| `pressed`         | Pressed            | Element is in pressed state                        |
| `visited`         | Visited            | **Link** element has been visited                  |
| `focus`           | Focused            | Element has keyboard/input focus                   |
| `focus-visible`   | Focused (Keyboard) | Element has keyboard focus with visible indicator  |
| `focus-within`    | --                 | Element or its descendant has focus                |
| `placeholder`     | Placeholder        | Placeholder text in form block inputs              |
| `first-child`     | First Item         | First Collection Item in a collection list         |
| `last-child`      | Last Item          | Last Collection Item in a collection list          |
| `nth-child(odd)`  | Odd Items          | Odd-numbered Collection Item in a collection list  |
| `nth-child(even)` | Even Items         | Even-numbered Collection Item in a collection list |

---

# Get Launch Context

> Identifies how the Designer Extension was launched and provides context about the launching element.

## `webflow.getLaunchContext()`

The `getLaunchContext` API helps you understand how your Designer Extension was launched and provides contextual information about the launching element.

Use this method on initial load to identify how the extension was launched and provide context about the launching element. The App can use this information to show a customized UI or behavior to manage the element from where it was launched.

**Launch Types**

Your extension can be launched in three ways:

1. **Apps Panel** - Launched directly from the Webflow Designer's Apps Panel
2. **App Connection** - Launched through an existing [App Connection](/designer/reference/app-intents-and-connections)
3. **App Intent** - Launched with a specific intent (e.g., to create/manage a form or image)

### Syntax

```typescript
 webflow.getLaunchContext(): Promise<LaunchContext | null>;
```

### Returns

A Promise that resolves to a `LaunchContext` object or null.

**LaunchContext**

```typescript
{
  type: 'AppIntent',
  value: { form: 'create' }
}
```

An object with the following properties:

* **type:** `'AppConnection' | 'AppIntent' | 'AppsPanel'`\
  Indicates how the extension was launched.

* **value:** `null | string | Record<'form' | 'image', 'create' | 'manage'>`\
  Additional context about the launch:
  * `null` - For basic App Panel launches
  * `string` - For deep links or custom values
  * Object with form/image context - For specific creation or management intents

### Example

```typescript
async function getLaunchContext() {
      const context = await webflow.getLaunchContext();
      if (context) {
        await webflow.notify({ type: "Success", message: `App was launched through ${context.type}` });
      }
    }
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability      | Locale | Branch | Workflow | Sitemode |
| :-------------------- | :----- | :----- | :------- | :------- |
| **canDEAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Get element snapshot

> 

## `webflow.getElementSnapshot()`

Captures a snapshot of the specified element.

### Syntax

```typescript
webflow.getElementSnapshot(element: AnyElement): Promise<null | string>
```

### Parameters

| Parameter | Type         | Description                           |
| --------- | ------------ | ------------------------------------- |
| `element` | *AnyElement* | The element to capture a snapshot of. |

### Returns

A Promise that resolves to a [base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64) string representing the snapshot of the element, or `null` if the snapshot could not be captured. The string is a PNG image and includes the `data:image/png;base64,` prefix, making it ready to use directly as an image source.

### Examples

#### Get a snapshot

```typescript
const selectedElement = await webflow.getSelectedElement();

if (selectedElement) {
  const snapshot = await webflow.getElementSnapshot(selectedElement);
  console.log("Snapshot:", snapshot); // base64 string
} else {
  console.log("No element selected");
}
```

#### Render snapshot as an image

```typescript
const selectedElement = await webflow.getSelectedElement();
const img = document.getElementById("snapshot-image") as HTMLImageElement;

if (selectedElement) {
  const snapshot = await webflow.getElementSnapshot(selectedElement);

  if (snapshot) {
    // Get an existing image element and set the base64 string as source
    img.src = snapshot;
  }
}
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# User events & notifications

> 

Listen for certain events based on a user's behavior in the Webflow Designer, or notify a user of important events.

## Notify a user

Send a notification to a user to alert them of important information and events.

Notifications will appear in the top right corner of the designer. Style notifications as either a success, error, or general information message. Notifications are helpful to let a user know that they have - or haven't - completed a task successfully. Additionally, it's helpful to let a user know about any unexpected errors your app may encounter.

To notify a user, use the [`webflow.notify()`](/designer/reference/notify-user) method.

<video autoplay loop muted>
    

  <source src="https://dhygzobemt712.cloudfront.net/Web/developers/videos/24005_API%20Documentation_User%20Events.webm" type="video/webm" />

    Your browser does not support HTML video.
</video>

## Subscribe to an event

Additionally, you can subscribe to events in the designer using the `subscribe` method by subscribing to different event types. Including:

{/* <!-- vale off --> */}

* [`selectedelement`](/designer/reference/user-selects-element): Listen for when a user selects an element on a page.
* [`mediaquery`](/designer/reference/user-changes-breakpoint): Get notified when a user changes breakpoints in the Designer.
* [`currentpage`](/designer/reference/user-changes-current-page): Get notified when a user navigates to a different page.
* [`currentcmsitem`](/designer/reference/user-changes-cms-page): Triggers when a user selects a Collection page or a new item on a Collection page.
* [`currentappmode`](/designer/reference/user-changes-mode): Detect when a user switches modes in the Designer.
* [`pseudomode`](/designer/reference/user-changes-pseudo-mode): Listen for changes to the pseudo-state of the Designer.

{/* <!-- vale on --> */}

### Using callbacks

Callback functions are used to handle and respond to events triggered by the Webflow Designer. Add your callback function as a parameter to the `subscribe` function to determine how to handle events in the designer. Here are some general tips for writing callbacks to handle events:

* **Keep them lightweight:** Callbacks should be fast to execute to ensure a responsive user experience.
* **Error handling:** Always include error handling in your callbacks to manage exceptions gracefully.
* **Unsubscribe when necessary:** Remember to unsubscribe from events when your app no longer needs to listen to them, to prevent memory leaks and unnecessary processing.

```javascript
// Example of setting up and using callbacks for event subscriptions
try {
  // Store unsubscribe functions to clean up later
  const unsubscribeFunctions = [];
  
  // Subscribe to element selection with error handling
  // webflow.subscribe returns an unsubscribe function directly
  const unsubscribeElement = webflow.subscribe('selectedElement', (element) => {
    try {
      // Process the selected element
      if (element) {
        const elementType = element.type;
        const elementId = element.id;
        
        // Perform different actions based on element type
        if (elementType === 'Image') {
          // Handle image element selection
          console.log(`Selected image element: ${elementId}`);
        } else if (elementType === 'DOM') {
          // Handle DOM element selection
          console.log(`Selected DOM element: ${elementId}`);
        }
      }
    } catch (error) {
      console.error('Error in selectedElement callback:', error);
    }
  });
  
  // Add the unsubscribe function to our array
  unsubscribeFunctions.push(unsubscribeElement);
  
  // Detect and respond to breakpoint changes
  const unsubscribeBreakpoint = webflow.subscribe('mediaquery', (breakpoint) => {
    try {
      // Update UI based on breakpoint
      if (breakpoint.name === 'xxl') {
        // Handle xxl view
      } else if (breakpoint.name === 'xl') {
        // Handle xl view
      } else if (breakpoint.name === 'large') {
        // Handle large view
      }
    } catch (error) {
      console.error('Error in mediaquery callback:', error);
    }
  });
  
  // Add the unsubscribe function to our array
  unsubscribeFunctions.push(unsubscribeBreakpoint);
  
  // Cleanup function to unsubscribe when your app is done
  function cleanupSubscriptions() {
    // Call each unsubscribe function
    unsubscribeFunctions.forEach(unsubscribe => {
      if (typeof unsubscribe === 'function') {
        unsubscribe();
      }
    });
    console.log('Successfully unsubscribed from all events');
  }
  
  // Call cleanup when your app is closing or switching modes
  // For example: yourApp.on('beforeClose', cleanupSubscriptions);
} catch (error) {
  console.error('Error setting up event subscriptions:', error);
  webflow.notify({
    message: 'Failed to set up event monitoring',
    type: 'error'
  });
}
```

---

# Send notification to user

> 

## `notify(opts)`

Send an in-Designer notification to the user. The notification can be styled as either a success, error, or general information message. Error messages provide users with the opportunity to close the Designer Extension.

<video autoplay loop muted>
    

  <source src="https://dhygzobemt712.cloudfront.net/Web/developers/videos/24005_API%20Documentation_User%20Events.webm" type="video/webm" />

    Your browser doesn't support HTML video.
</video>

### Syntax

```typescript
webflow.notify(
  opts: {
    type: 'Error' | 'Info' | 'Success',
    message: string,
  }
): Promise<void>
```

### Parameters

**`opts`** :   `{message: string, type: 'Error' | 'Info' | 'Success'`

The options for the notification.

* **message**: string
* **type**: "Error" | "Info" | "Success"

### Returns

**Promise\<*Void*>**

A Promise that returns a value of `undefined`.

### Example

```typescript
webflow.notify({ type: 'Info', message: 'Great work!' }); // General notification
webflow.notify({ type: 'Error', message: 'Something went wrong, try again!' }); // Error notification
webflow.notify({ type: 'Success', message: 'Successfully did something!' }); // Success notification
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

***

---

# User selects element

> 

## `subscribe("selectedelement", callback)`

Use this method to start listening for specific events in your App. In this case, we're listening for when a user selects an element on a page.

### Syntax

```typescript
 webflow.subscribe(
  event: 'selectedelement',
  callback: (element: null | AnyElement) => void
): Unsubscribe;
```

### Parameters

**`event`** :   `"selectedlement"`

The name of the event to subscribe to.

***

**callback**:  `(element: null | AnyElement => void )`

This is the function that will be called each time the event occurs. It takes an `element` as a parameter. A `null` element signifies that no element is selected. Use this function to define what should happen when the event is triggered.

***

### Returns

#### ***`Unsubscribe`***

This is a special function you receive after subscribing. When you no longer want to listen to the event, call this function to stop receiving notifications.

### Example

```typescript
// Subscribe to changes in the selected element
const selectedElementCallback = (element: AnyElement | null) => {
  if (element) {
    console.log('Selected Element:', element);
  } else {
    console.log('No element is currently selected.');
  }
}

const unsubscribeSelectedElement = webflow.subscribe('selectedelement', selectedElementCallback);
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

---

# User changes breakpoint

> 

## `subscribe("mediaquery", callback)`

Use this method to start listening for specific events in your App. In this case, we're listening for when a user selects a different media query, also known as a [breakpoint](https://university.webflow.com/lesson/intro-to-breakpoints?topics=layout-design),  in the Designer.

Webflow's built-in responsive breakpoints allow users to customize site designs for different screen sizes. Knowing the current breakpoint can help your app build responsive content that's applicable to different screen sizes and contexts.

### Syntax

```typescript
 webflow.subscribe(
  event: 'mediaquery',
  callback: (element: null | AnyElement) => void
): Unsubscribe;
```

### Parameters

**`event`** :   `"mediaQuery"`

The name of the event to subscribe to.

***

**callback**:  `(breakpoint: BreakpointId) => void`

This is the function that will be called each time the event occurs. It takes a `breakpoint` as a parameter. Use this function to define what should happen when the event is triggered.

***

### Returns

#### ***`Unsubscribe`***

This is a special function you receive after subscribing. When you no longer want to listen to the event, call this function to stop receiving notifications.

### Example

```typescript
/**
 * Subscribe to the 'mediaquery' event and get the Unsubscribe function.
 * This event notifies when the breakpoint changes in the Webflow Designer.
 * @param {BreakpointId} breakpoint - The current breakpoint ID ('xxl', 'xl', 'large', 'main', 'medium', 'small', 'tiny').
 */
const unsubscribeMediaQuery = webflow.subscribe("mediaquery", (breakpoint) => {
  switch (breakpoint) {
    case 'xxl':
      console.log("The current view is for very large screens or high-resolution monitors.");
      break;
    case 'xl':
      console.log("The current view is suitable for large desktop monitors.");
      break;
    case 'large':
      console.log("The current view fits standard desktop monitors.");
      break;
    case 'main':
      console.log("The current view is suitable for smaller desktops or large tablets.");
      break;
    case 'medium':
      console.log("The current view is suitable for tablets and some large phones.");
      break;
    case 'small':
      console.log("The current view is designed for larger mobile devices.");
      break;
    case 'tiny':
      console.log("The current view is for the smallest mobile devices.");
      break;
    default:
      console.log("Unknown breakpoint:", breakpoint);
  }
});

/**
 * Later, when you want to unsubscribe from the 'mediaquery' event:
 * @function
 */
unsubscribeMediaQuery();
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

---

# User changes current page

> 

## `webflow.subscribe("currentpage", callback)`

Use this method to start listening for specific events in your App. In this case, we're listening for when a user selects a new page in the Designer.

### Syntax

```typescript
 webflow.subscribe(
  event: 'currentpage',
  callback: (element: null | AnyElement) => void
): Unsubscribe;
```

### Parameters

**`event`** :   `"currentpage"`

The name of the event to subscribe to.

***

**callback**: `(page: Page => void)`

The callback function to execute when the event occurs. The page parameter should be the page you're watching.

***

### Returns

#### ***`Unsubscribe`***

This is a special function you receive after subscribing. When you no longer want to listen to the event, call this function to stop receiving notifications.

### Example

```typescript
// Subscribe to changes in the selected page
const selectedPageCallback = (page: Page | null) => {
  if (page) {
    console.log('Selected Page:', page);
  } else {
    console.log('No element is currently selected.');
  }
}

const unsubscribeSelectedElement = webflow.subscribe('currentpage', selectedPageCallback);
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

---

# User changes CMS Page

> 

## `webflow.subscribe("currentcmsitem", callback)`

Use this method to listen for specific events in your app. When a user selects a [collection page](https://university.webflow.com/lesson/structure-and-style-collection-pages?topics=cms-dynamic-content) or chooses a new CMS item on a collection page, this event will trigger. This can be especially useful for determining the path of auto-generated pages from a CMS or Ecommerce collection.

### Syntax

```typescript
webflow.subscribe(
  event: 'currentcmsitem',
  callback: (element: null | AnyElement) => void
): Unsubscribe;
```

### Parameters

**`event`** :   `"currentpage"`

The name of the event to subscribe to.

***

**callback**: `(() => void)`

The callback function to execute when the event occurs.

***

### Returns

#### ***`Unsubscribe`***

This is a special function returned after subscribing. Call this function when you want to stop listening to the event and discontinue receiving notifications.

### Example

```typescript
// Callback for subscription
    const cmsCallback = async () => {
      const page = await webflow.getCurrentPage()
      console.log(await page.getPublishPath())
    }

// Subscribe to changes for CMS Pages
 const unsubscribeCmsPages = webflow.subscribe('currentcmsitem', cmsCallback)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

---

# User changes Designer mode

> 

## `webflow.subscribe("currentappmode", callback)`

Subscribe to this event to detect when a user switches modes in the Designer, such as changing to Edit mode or selecting a secondary locale. This event helps you track the user's current mode, allowing your app to adjust the UI or display relevant error messages based on the available actions.

Tracking mode changes ensures your app provides the right experience at the right time, managing user expectations and preventing actions that aren’t allowed in the current mode.

<Info title="What are App Modes?">
  Designer Extensions enhance user functionality while adhering to the Designer's current mode. Each method within the Designer API provides specific capabilities, aligning with actions available in each mode. For more context on this API, see the [App Modes](https://developers.webflow.com/designer/reference/app-modes) docs.
</Info>

### Syntax

```typescript
webflow.subscribe(
  event: 'currrentappmode',
  callback: () => void
): Unsubscribe;
```

### Parameters

**`event`** :   `"currentappmode"`

The name of the event to subscribe to.

***

**callback**: `(() => void)`

The callback function to execute when the event occurs.

***

### Returns

#### ***`Unsubscribe`***

This is a special function returned after subscribing. Call this function when you want to stop listening to the event and discontinue receiving notifications.

### Example

```typescript
// Callback for subscription
    const checkAppModes = async () => {
      const capabilities = await webflow.canForAppMode(Object.values(webflow.appModes))
      console.log(capabilities)
    }

// Subscribe to changes for CMS Pages
 const unsubscribeAppModes = webflow.subscribe('currentappmode', checkAppModes)
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

---

# User changes pseudo mode of Designer

> User Event. Use this method to start listening for specific events in your App. In this case, we're listening for when a user changes the pseudo mode of the Designer.

## `webflow.subscribe("pseudomode", callback)`

Use this method to start listening for when a user changes the [pseudo-state](https://help.webflow.com/hc/en-us/articles/33961301727251-States) of the Designer.

### Syntax

```typescript
webflow.subscribe(
  event: "pseudomode", 
  callback: (pseudoState: PseudoStateKey) => void
): Unsubscribe;
```

<Accordion title="Pseudo-State Key Values">
  | Pseudo-State      | Designer State     | Description                                        |
  | :---------------- | :----------------- | :------------------------------------------------- |
  | `hover`           | Hover              | Element is hovered over by the mouse               |
  | `pressed`         | Pressed            | Element is in pressed state                        |
  | `visited`         | Visited            | **Link** element has been visited                  |
  | `focus`           | Focused            | Element has keyboard/input focus                   |
  | `focus-visible`   | Focused (Keyboard) | Element has keyboard focus with visible indicator  |
  | `focus-within`    | --                 | Element or its descendant has focus                |
  | `placeholder`     | Placeholder        | Placeholder text in form block inputs              |
  | `first-child`     | First Item         | First Collection Item in a collection list         |
  | `last-child`      | Last Item          | Last Collection Item in a collection list          |
  | `nth-child(odd)`  | Odd Items          | Odd-numbered Collection Item in a collection list  |
  | `nth-child(even)` | Even Items         | Even-numbered Collection Item in a collection list |
</Accordion>

### Parameters

* **event**: `"pseudomode"` - The event to listen for.
* **callback**: `(pseudoState: PseudoStateKey) => void` - The callback function to execute when the event occurs. The `pseudoState` parameter is the new pseudo-state of the Designer.

### Returns

**Return Value**

***`Unsubscribe`***

This is a special function you receive after subscribing. When you no longer want to listen to the event, call this function to stop receiving notifications.

#

### Example

```typescript
// Subscribe to changes in the pseudo state
const pseudoStateCallback = (pseudoState: PseudoStateKey) => {
  console.log('Pseudo State:', pseudoState);
}

const unsubscribePseudoState = webflow.subscribe('pseudomode', pseudoStateCallback);
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# App Intents and Connections

> Use App Intents and Connections to launch Apps directly from a user's workflow in the Webflow Designer

Make your Apps more discoverable in the Designer with App Intents and Connections.

Use App Intents and Connections to give users more opportunities to find and launch your App in the designer. These features display links to your App in contextual locations like the 'Element Settings' panel, creating smoother and more relevant interactions when users are creating and editing elements on their sites.

<Tabs>
  <Tab title="App Intents">
    App Intents make your App discoverable when users create or modify elements. By adding an Intent to your App's `webflow.json` file, users will be prompted to use your App for managing element settings directly within their existing workflow. Adding an intent allows your App to stand out as a relevant tool in the Designer.
    ![App Intents](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/96ba921c7895e12f2afb0708d042a25ce90de0d6d6bb6d18369c75296242b950/assets/images/app-intent-image.png)
  </Tab>

  <Tab title="App Connections">
    App Connections link elements to your App via the Designer APIs. Once a connection is established, a button highlighting your App appears in the element's settings panel, prompting users to launch your App for managing element-specific settings.

    ![App Connections](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/84241e15ed6e4742fd27e37578396bacd01a31b558f322ec9a083f2a88856193/assets/images/app-connection-image.png)
  </Tab>
</Tabs>

<Note title="Supported Elements">
  App Intents and connections currently supports the following elements:
  `Image`, `FormForm`, and `FormWrapper`.
</Note>

## How App Intents and Connections work

<AccordionGroup>
  <Accordion title="App Intents">
    When your App is configured to use App Intents for a supported element, your App will appear in the "Connections" section in an element's settings panel.

    If a user has already installed your App to their site, but aren't already using connections to manage their elements, they'll see a "Connections" section in the element settings panel. If they click the "+" button in this section, they'll see your App listed in the "Connect an App" section.

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/f7f757f5f7c96eaec80ab142dd51769e8f542502913cf3d131623c8b5c9512a2/assets/images/app-intents-no-connection-found.png" alt="Connect an App" />

      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/de394466b893a030a6cdd550c2836b38b04d247a1c39e044f236865e77670a82/assets/images/app-intents-connect-an-app.png" alt="App Intents" />
    </Frame>

    When your App launches from the element settings panel, your App will receive important context about the element that triggered the launch, which you can access using the [`getLaunchContext()`](/designer/reference/get-launch-context) method.

    Use this context to show the most relevant interface for a user's workflow.

    <Frame caption="We've configured the API Playground to use App Intents for the Image element. When the API Playground is launched from the Element Settings Panel, the App will show the launch context in an info box and preselect the API Category to 'Elements' and the API Method to `getAltText()` ,">
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/5b75d1b0956a30c4974a38fe85afe464313da169632d30de3f212daa1d6afbd6/assets/images/api-playground-launch-context.png" />
    </Frame>
  </Accordion>

  <Accordion title="App Connections">
    App Connections establish links between supported elements and your App. Using the [`element.setAppConnection()`](/designer/reference/set-app-connection) method, you can create a direct connection that prompts users to manage that element's settings through your App. For example, you can connect an image element to your App so users choose to manage assets and alt text in your App rather than managing the settings themselves.

    ![App Connections](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/e8eda5bfd0808ae08ec1f49d8a918ea5d2861b015b25ffd721e9ca37f70f7613/assets/images/set-app-connection-diagram.png)

    When your App creates a connection with an element:

    * Webflow adds a button in the element's settings panel to launch your App
    * Webflow opens your App with context about the specific element

    Your App knows exactly which element launched it and can instantly show the most relevant interface for a user's workflow. Instead of dropping users at your App's home screen, you can welcome them with the tools and settings they need for that specific element; creating a personalized entrance for every connected element.

    ![App Connection Button](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/898884ced7aa62819e5ceaf253ef864cd4132fbe813ff7d01d7231dc6e5ff6a3/assets/images/app-connections-open.gif)

    <Info title="Try App Connections on Your Site">
      Explore App Connections firsthand. [Download and run our example App](https://github.com/Webflow-Examples/app-connections-tester) on your site to see how it integrates directly into your workflow.

      <a href="https://github.com/Webflow-Examples/app-connections-tester">
        <button class="button cc-primary">Test App Connections</button>
      </a>
    </Info>
  </Accordion>
</AccordionGroup>

## Setting up App Intents and Connections

In the steps below, we'll walk through the following:

<Accordion title="1. Configuring your App">
  With the addition of App Intents and Connections, your [`webflow.json`](/designer/reference/app-settings) can now use two additional properties: `appIntents` and `appConnections`.

  ### Adding App Intents

  In [`webflow.json`](/designer/reference/app-settings), add a new property called `appIntents`. Create an object with a key for each element type you'd like to support. Each key should have a value of an array of strings, where each string is a unique identifier for an App Intent.

  <Note>
    As we improve support for more elements and intents, you'll be able to add them to your App Intents list.
  </Note>

  ```json webflow.json
  {
      "appIntents": {
          "image": ["manage"],
          "form": ["manage"]
      }
  }
  ```

  Once this is added to your `webflow.json`, your App will appear in the "Connections" section of the supported elements' settings panels.

  ### Adding App Connections

  In [`webflow.json`](/designer/reference/app-settings), add a new property called `appConnections`. Set it to an array of strings, where each string is a unique identifier for an App Connection.

  ```json webflow.json
  {
    "appConnections": ["manageImageElement", "manageFormElement"]
  }
  ```
</Accordion>

<Accordion title="2. Listening for Launch Context from an App Intent">
  When your App launches from the element settings panel, Webflow will send information about how your App was launched back to your App. To get this information, you'll need to listen for launch context from the Webflow Designer by calling the [`getLaunchContext()`](/designer/reference/get-launch-context) method.

  When your App is launched from an App Intent, [`getLaunchContext()`](/designer/reference/get-launch-context) returns an object with the following structure:

  ```typescript
  type LaunchContext = {
      type: 'AppIntent';
      value: {
          image: 'manage'; // Will only be present if the App Intent is for managing images
          form: 'manage'; // Will only be present if the App Intent is for managing forms
      };
  };
  ```

  It's most appropriate to call [`getLaunchContext()`](/designer/reference/get-launch-context) on the main page of your App, such as the entry point of a React App.

  ```typescript main.tsx{9}
  // Initialize state to store the launch context
  const [launchContext, setLaunchContext] = React.useState(null);

  React.useEffect(() => {
      // Define async function to fetch launch context
      async function onLoad() {

          // Get context from Webflow Designer when App is launched
          const context = await webflow.getLaunchContext();
          setLaunchContext(context); // Update state with the received context

          // Determine which page to show based on launch context
          if (context?.type === 'AppIntent') {
              if (context.value?.image === 'manage') { 
                  navigate('/image-manager');
              } else if (context.value?.form === 'manage') {
                  navigate('/form-manager');
              } else {
                  navigate('/');
              }
          } else {
              navigate('/');
          }
      }

      // Call onLoad immediately when component mounts
      onLoad();
  }, []); // Empty dependency array means this effect runs once on mount
  ```
</Accordion>

<Accordion title="3. Create an App Connection">
  Now that you've retrieved the launch context, you can access the details of the element that launched your App. From there, you can [create an App Connection](#setting-up-an-app-connection) to the element so that users are prompted to use your App each time they open that element's settings panel.

  Since an element will always be selected in the Designer when accessing its settings, you can simply call the [`getSelectedElement()`](/designer/reference/get-selected-element) method to get the element that launched your App. Then you can create an App Connection to the element using the identifier you configured in [`webflow.json`](/designer/reference/app-settings).

  ```tsx main.tsx{13,19,22}
  // Initialize state to store the launch context and selected element
  const [launchContext, setLaunchContext] = React.useState(null);
  const [selectedElement, setSelectedElement] = React.useState(null);

  React.useEffect(() => {
      // Define async function to fetch launch context and selected element
      async function onLoad() {
          // Get context from Webflow Designer when App is launched
          const context = await webflow.getLaunchContext();
          setLaunchContext(context); // Update state with the received context

          // Get and set the selected element
          const element = await webflow.getSelectedElement();
          setSelectedElement(element);

          // Set the App Connection based on element type and determine which page to show your user
          if (context?.type === 'AppIntent') {
              if (context.value?.image === 'manage') { 
                  await element.setAppConnection('manageImageElement');
                  navigate('/image-manager');
              } else if (context.value?.form === 'manage') {
                  await element.setAppConnection('manageFormElement');
                  navigate('/form-manager');
              } else {
                  navigate('/');
              }
          } else {
              navigate('/');
          }
      }

      // Call onLoad immediately when component mounts
      onLoad();
  }, []); // Empty dependency array means this effect runs once on mount
  ```
</Accordion>

<Accordion title="4. Listening for Launch Context from an App Connection">
  As with App Intents, when your App is launched from an App Connection, Webflow will send information about how your App was launched back to your App. To get this information, you'll need to listen for launch context from the Webflow Designer by calling the [`getLaunchContext()`](/designer/reference/get-launch-context) method.

  When launched from an App Connection, the LaunchContext object will have the following structure:

  ```ts
  type LaunchContext = {
      type: 'AppConnection';
      value: string; // The identifier for the App Connection
  };
  ```

  Let's reconfigure our App to listen for launch context from either an App Intent or App Connection.

  ```ts main.tsx {9,28}
  // Initialize state to store the launch context and selected element
  const [launchContext, setLaunchContext] = React.useState(null);
  const [selectedElement, setSelectedElement] = React.useState(null);

  React.useEffect(() => {
      // Define async function to fetch launch context and selected element
      async function onLoad() {
          // Get context from Webflow Designer when App is launched
          const context = await webflow.getLaunchContext();
          setLaunchContext(context); // Update state with the received context

          // Get and set the selected element
          const element = await webflow.getSelectedElement();
          setSelectedElement(element);

          // Handle different launch contexts
          if (context?.type === 'AppIntent') {
              // Handle App Intent launches
              if (context.value?.image === 'manage') { 
                  await element.setAppConnection('manageImageElement');
                  navigate('/image-manager');
              } else if (context.value?.form === 'manage') {
                  await element.setAppConnection('manageFormElement');
                  navigate('/form-manager');
              } else {
                  navigate('/');
              }
          } else if (context?.type === 'AppConnection') {
              // Handle App Connection launches
              switch (context.value) {
                  case 'manageImageElement':
                      navigate('/image-manager');
                      break;
                  case 'manageFormElement':
                      navigate('/form-manager');
                      break;
                  default:
                      navigate('/');
              }
          } else {
              // Handle direct launches (not from Intent or Connection)
              navigate('/');
          }
      }

      // Call onLoad immediately when component mounts
      onLoad();
  }, []); // Empty dependency array means this effect runs once on mount
  ```
</Accordion>

<Accordion title="5. Listing App Connections">
  If your App manages multiple resources, you may want to organize and list them in your App for users to reference. You can retrieve a list of all App Connections for a given element using the [`getAppConnections()`](/designer/reference/get-app-connections) method on an individual element.

  To do this, let's get a list of all elements on the page and then retrieve the App Connections for each element.

  ```ts
  async function findConnectedElements() {
      // Get all elements on the page
      const elements = await webflow.getAllElements();
      const connectedElements = [];

      // Iterate through elements and check for connections
      for (const element of elements) {
          try {
              // Check if element supports App Connections
              if (element.getAppConnections) {
                  const connections = await element.getAppConnections();
                  
                  // If element has connections, store it with relevant info
                  if (connections && connections.length > 0) {
                      connectedElements.push({
                          connections,
                          type: element.type,
                          id: element.id
                      });
                  }
              }
          } catch (error) {
              console.error(`Error checking connections for element: ${element.id}`, error);
          }
      }

      return connectedElements;
  }
  ```
</Accordion>

---

# Set App Connection

> Create a connection between an element and an App

## `element.setAppConnection()`

Enables the connection between an element and an App.

<Note title="Supported Elements">
  App Connections supports the following elements: `Image`, `FormForm`, and
  `FormWrapper`.
</Note>

### Syntax

```typescript
element.setAppConnection(value: string): Promise<null>
```

### Parameters

* **value**: *string* - An identifier for specific element-App connection.

### Returns

**Promise\<`null`>**

A Promise that resolves to `null`.

### Example

```typescript
const el = await webflow.getRootElement(); // Get Root Element

// Check for an element
if (!el || !el.children) throw new Error("Expected an element");

// Append a form element to the root element
const formEl = await el.append(webflow.elementPresets.FormForm);

// Check for App Connection support
if (!formEl || !formEl.appConnections) {
  throw new Error("App Connections not supported");
}

// Set App Connection
await formEl.setAppConnection("myAwesomeAppManageFormElement");
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Get App Connections

> Get all App Connections associated with a specific element

## `element.getAppConnections()`

Retrieve a list of App Connections associated with the selected element. Only App connections created by the current App will be returned.

### Syntax

```typescript
getAppConnections(): Promise<Array<string>>
```

### Returns

**Promise\<Array\<string>>**

A Promise that resolves to an array of App Connection string identifiers for the element-App connection.

### Example

```typescript
const el = await webflow.getRootElement(); // Get Root Element

// Check for an element
if (!el || !el.children) throw new Error('Expected an element');

// Create a form element
const formEl = await el.append(webflow.elementPresets.FormForm); 

// Check for App Connections
if (!formEl || !formEl.appConnections) { 
  throw new Error('App Connections not supported'); 
}

// Set App Connections
await formEl.setAppConnection('myAwesomeAppManageFormElement');

// Get App Connections
const connections = await formEl.getAppConnections();

// Expected return value
// connections should return an array with the app connection set earlier:
console.log(connections); // ['myAwesomeAppManageFormElement']
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Remove App Connection

> Remove an App Connection from an element

## `element.removeAppConnection()`

Remove an App Connection for a specific element. Only App Connections associated with the current App can be removed.

### Syntax

```typescript
removeAppConnection(value: string): Promise<null>
```

### Parameters

* **value**: *String* - The string identifier for the App Connection to be removed.

### Returns

**Promise\<`null`>**

A promise that returns to `null`.

### Example

```typescript
const el = await webflow.getRootElement(); // Get root element

// Check for an element
if (!el || !el.children) throw new Error("Expected an element");

// Create a form element
const formEl = await el.append(webflow.elementPresets.FormForm);

// Check for App Connections
if (!formEl || !formEl.appConnections) {
  throw new Error("App Connections not supported");
}

// Set App Connection
await formEl.setAppConnection("myAwesomeAppManageFormElement");

//  Get existing App Connections
const connections = await formEl.getAppConnections();

// Remove first App Connection
const connection = connections[0];
await removeAppConnection(connection);
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Get Current App Connection

> Get the current App Connection identifier

## `webflow.getCurrentAppConnection()`

Get the current App Connection identifier, if any.

Use this method on initial load of an App to determine whether the App was launched via an "App Connection" button in the Designer. The App can then choose to show a different experience based on the information received.

### Syntax

```typescript
webflow.getCurrentAppConnection(): Promise<null | string>
```

### Returns

**Promise\<`string` | `null`>**

If the App was launched from an App connection, this method will return a Promise that resolves to the string identifier for the App Connection. Otherwise, it returns a Promise resolving to `null`.

### Example

*This example is for an App written in React. This code would be placed on the index page of the App*

```typescript
React.useEffect(() => {
  async function onLoad() {
    /*
    Await the current App Connection information. If the App was launched via a specific App Connection button, this will return a string with the connection name; otherwise, it returns null.
    */
    const appConnection = await webflow.getCurrentAppConnection();

    /*
    Check if the App Connection matches 'myAwesomeAppManageFormElement'.
    If it does, the App will redirect to the '/editForms' page to provide a tailored experience based on the App Connection.
    */
    if (appConnection === "myAwesomeAppManageFormElement") {
      redirectToPage("/editForms");
    }
  }

  // Call the onLoad function when the component mounts.
  onLoad();
}, []);
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Get Current App Connection Element

> Retrieve element that triggered the App Connection

## `webflow.getCurrentAppConnectionResource()`

Get the element that triggered the App Connection.

Use the `webflow.getCurrentAppConnection()` method to verify the App Launch location. If the App was launched from the element settings panel, you can use this method to get information on the resource this App was initiated by.

### Syntax

```typescript
getCurrentAppConnectionResource(): Promise<null | AppConnectionResource>
```

### Returns

**Promise\<AppConnectionResource | `null`>**

A Promise that resolves to the AppConnectionResource of for the App. If there is not a resource associated with the App, then the Promise resolves to \`null1.

### Example

This example is for an App written in React. This code would be placed on the `editForms` page of the App

```typescript
React.useEffect(() => {
  async function onLoad() {
    // Await the App Connection to determine where the App was launched from.
    // If the App was launched from an Element with the App Connection 'myAwesomeAppManageFormElement', proceed with additional actions.
    const appConnection = await webflow.getCurrentAppConnection();

    if (appConnection === "myAwesomeAppManageFormElement") {
      // Retrieve resource details about the element associated with this App Connection.
      // The resource provides information on the specific element initiating the App launch.
      const resource = await webflow.getCurrentAppConnectionResource();

      // Check if the resource exists and is of type 'Element'.
      // This ensures that the App can act specifically on an element within the Designer.
      if (resource && resource.type === "Element") {
        const element = resource.value;

        // As an example, set a custom attribute on the element.
        // Here, you can call any appropriate API method to interact with the element, depending on your App's functionality.
        await element.setCustomAttribute("foo", "bar");
      }
    }
  }

  // Execute the onLoad function upon component mount to check the App launch location and take action accordingly.
  onLoad();
}, []);
```

<div>
  <a href="https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62">
    Try this example
  </a>
</div>

### Designer Ability

| Designer Ability    | Locale | Branch | Workflow | Sitemode |
| :------------------ | :----- | :----- | :------- | :------- |
| **canAccessCanvas** | Any    | Any    | Any      | Any      |

---

# Designer API & Extensions

> An overview of how Webflow Apps work within the Designer to manipulate Elements on the Canvas

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/53e647a7afdd983ee0428ad7cd5475417a56edb0a62afe1b90499db3eb819c17/assets/images/7500640-New_Apps_Screengram.gif" alt="A Designer Extension creating elements on the canvas." />

Designer Extensions are web applications that run directly inside the Webflow Designer. Using the [Designer APIs](/designer/reference/introduction), you can create powerful new tools that integrate seamlessly with a user's workflow, helping them design, create, and optimize their sites faster than ever.

## What you can build

Using the [Designer APIs](/designer/reference/introduction), you can build extensions that programmatically interact with a user's design and content in real-time. This opens up a world of possibilities for workflow automation and creative tooling.

<CardGroup>
  <Card
    title="Automate layout and content creation"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Blog.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Blog.svg" alt="" className="block dark:hidden" />
            </>
        }
    iconPosition="left"
    iconSize="12"
  >
    Generate complex components, populate data from third-party sources, or build entire page structures with a single click.
  </Card>

  <Card
    title="Manage design systems"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DesignSystems.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DesignSystems.svg" alt="" className="block dark:hidden" />
            </>
        }
    iconPosition="left"
    iconSize="12"
  >
    Create tools that allow users to apply and maintain consistent branding, manage variables, and swap themes.
  </Card>

  <Card
    title="Streamline asset management"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/ImageControls.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/ImageControls.svg" alt="" className="block dark:hidden" />
            </>
        }
    iconPosition="left"
    iconSize="12"
  >
    Build extensions that connect to external asset libraries, optimize images, or automate asset organization.
  </Card>

  <Card
    title="Create dynamic site structures"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Folders.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Folders.svg" alt="" className="block dark:hidden" />
            </>
        }
    iconPosition="left"
    iconSize="12"
  >
    Programmatically add and organize pages and folders, perfect for sites with complex information architecture.
  </Card>
</CardGroup>

## How they work

Designer Extensions are single-page applications that run inside a secure `iframe` within the Webflow Designer. They use Webflow's client-side **Designer APIs** to communicate with the Designer, allowing your app to perform actions that would typically require manual user intervention. For more advanced use cases, your extension can also integrate with your own backend services and third-party APIs including Webflow's [Data APIs](/data/reference/introduction).

## The development workflow

From your first line of code to a public Marketplace launch, here's an overview of the development process.

<Steps>
  <Step title="Register your App in Webflow">
    Before you can start building, you need to register a new app within your Webflow Workspace settings.

    <a href="/data/docs/register-an-app">
      <button class="cc-primary">Register your App</button>
    </a>
  </Step>

  <Step title="Create a Designer Extension from the CLI">
    Use the Webflow CLI to scaffold a starter project and run a local development server for live testing.

    <a href="/apps/designer-extensions/getting-started">
      <button class="cc-primary">Create a Designer Extension from the CLI</button>
    </a>
  </Step>

  <Step title="Build with the Designer APIs">
    The Designer APIs are how your app will interact with the Webflow canvas, providing a robust interface to control the Designer.

    <a href="/designer/reference/introduction">
      <button class="cc-primary">Build with the Designer APIs</button>
    </a>
  </Step>

  <Step title="Publish to your Workspace">
    When you're ready, upload your extension to Webflow to share it with your team for testing and internal use in your Workspace.

    <a href="/apps/docs/publishing-your-app">
      <button class="cc-primary">Publish to your Workspace</button>
    </a>
  </Step>

  <Step title="Submit to the Marketplace">
    Share your creation with the world by submitting it to the Webflow Marketplace.

    <a href="/apps/docs/marketplace/submitting-your-app">
      <button class="cc-primary">Submit to the Marketplace</button>
    </a>
  </Step>
</Steps>

## FAQs

<Accordion title="Can I use the Data APIs in my Designer Extension?">
  Yes, you can use the [Data APIs](/data/reference/introduction) in your Designer Extension to access and update data from Webflow's servers. This is called a **Hybrid App**. When you setup your app, you'll need to select both the **Data Client** and **Designer Extension** options.
</Accordion>

<Accordion title="Which frameworks and libraries can I use to build my Designer Extension?">
  You can use any framework that outputs static resources and runs in a browser environment. Just make sure your extension fits within the iframe dimensions provided by Webflow.
</Accordion>

<Accordion title="How do I test my Designer Extension?">
  <Steps>
    <Step title="Install your extension on a test site">
      In the left sidebar of your workspace, navigate to <strong>Apps & Integrations</strong> > <strong>Develop</strong>. Click the "..." button next to your app and select <strong>Install App</strong>. You'll see an authorization screen where you can select the sites or workspace you want to install the app on.
    </Step>

    <Step title="Run the extension in development mode">
      In your terminal, navigate to your project folder and run the following command:

      ```bash
      webflow extension serve
      ```

      This will start development mode locally (port 1337).
    </Step>

    <Step title="Preview and interact with your extension in the Designer">
      On your test site, open the Apps pane and find your app. Click "Launch Development App" to preview and interact with your locally hosted extension in the Designer.
    </Step>
  </Steps>
</Accordion>

<Accordion title="Why isn't my extension interacting with Webflow as expected?">
  * Double-check your use of the [Designer APIs](/designer/reference/overview) and ensure you’re using the correct methods.
  * Check the browser console for errors and review our [error handling guidelines](/designer/reference/error-handling).
  * Designer APIs only access content on the current page, not other sites or pages.
  * Make sure your app has the right permissions and scopes.
  * For Data API issues, verify you’re using the correct endpoints and valid tokens.
</Accordion>

<Accordion title="Why does my app look different in Webflow than expected?">
  * Designer Extensions run in an iframe with controlled dimensions. Check your configuration and use [resizing methods](https://developers.webflow.com/designer/reference/resize-extension) if needed.
  * Use scoped CSS or scoped class names to avoid style conflicts with Webflow’s native styles.
  * Test at different viewport sizes to ensure responsive behavior.
</Accordion>

<Accordion title="Why can't I upload a new version of my Designer Extension Bundle?">
  Only Workspace admins can upload new bundles. If you’re not an admin, contact your Workspace administrator to upload the bundle or grant you the necessary permissions.
</Accordion>

<Accordion title="Why isn't my extension showing up in Webflow?">
  * Make sure you’ve [bundled your app with the Webflow CLI](/apps/docs/publishing-your-app#build-your-extension) and uploaded your Designer Extension via the Dashboard.
  * Confirm the app is installed on your site or workspace (check the App Development section in your workspace).
</Accordion>

---

# Configuring your Designer Extension

> A comprehensive guide to setting up and configuring your Webflow Designer Extension.

This guide provides an overview of how to configure your Webflow Designer Extension. You'll understand the project structure, and how to customize its behavior with `webflow.json`.

## Initializing your project

We strongly recommend starting your project with the <code>webflow extension init</code> command. This will create a project foundation tailored for Designer Extensions and ensure all necessary dependencies and configurations are installed correctly.

```bash
webflow extension init <your-project-name>
```

The CLI also supports templates for specific libraries and languages like React and TypeScript. You can view available templates by running `webflow extension list`.

## Understanding the project structure

After running the `init` command, your project will have a specific file structure. The `public` folder contains all the files needed to serve your Designer Extension.

### Key files

| File                 | Description                                                                                                        |
| :------------------- | :----------------------------------------------------------------------------------------------------------------- |
| `/src/index.ts`      | The entry point for your extension's logic. Write your TypeScript code here to interact with the Designer APIs.    |
| `/public/index.html` | The main HTML file for your extension's interface. This file should only contain the contents of the `<body>` tag. |
| `/public/index.js`   | The compiled JavaScript output from `/src/index.ts`. This file is automatically generated.                         |
| `/public/styles.css` | The CSS file for styling your extension.                                                                           |
| `webflow.json`       | The manifest file used to configure your extension's settings and behavior.                                        |

### Referencing assets

When linking to CSS and JavaScript files in `index.html`, always use relative paths (e.g., `./styles.css`) instead of absolute paths (e.g., `/styles.css`). This ensures your assets are loaded correctly.

## App settings (`webflow.json`)

The `webflow.json` file is the manifest that controls your app's behavior. Here are the available properties:

<div id="app-settings-parameters">
  <div id="/data/reference/custom-code/custom-code/register-hosted#request.body.hostedLocation" class="scroll-mt-content-padded fern-api-property">
    <div class="fern-api-property-header">
      <span class="fern-api-property-key" data-state="closed">
        name
      </span>

      <span class="fern-api-property-meta">
        <span>string</span>

        <span class="t-danger">Required</span>
      </span>
    </div>

    <div class="prose dark:prose-invert max-w-none break-words prose-sm dark:prose-invert-sm">
      <p>Specifies the name of the Webflow App. It should be a descriptive and unique name that helps identify the app.</p>
    </div>
  </div>

  <div id="/data/reference/custom-code/custom-code/register-hosted#request.body.hostedLocation" class="scroll-mt-content-padded fern-api-property">
    <div class="fern-api-property-header">
      <span class="fern-api-property-key" data-state="closed">
        apiVersion
      </span>

      <span class="fern-api-property-meta">
        <span>string</span>

        <span>Optional</span>
      </span>
    </div>

    <div class="prose dark:prose-invert max-w-none break-words prose-sm dark:prose-invert-sm">
      <p>The version of the Designer APIs your app is using. It's highly recommended to set this value to `"2"`</p>
    </div>
  </div>

  <div id="/data/reference/custom-code/custom-code/register-hosted#request.body.hostedLocation" class="scroll-mt-content-padded fern-api-property">
    <div class="fern-api-property-header">
      <span class="fern-api-property-key" data-state="closed">
        size
      </span>

      <span class="fern-api-property-meta">
        <span>string</span>

        <span>Optional</span>
      </span>
    </div>

    <div class="prose dark:prose-invert max-w-none break-words prose-sm dark:prose-invert-sm">
      Defines the size of the Designer Extension window. Available sizes include:

      * `default`: 240px by 360px
      * `comfortable`: 320px by 460px
      * `large`: 800px by 600px

      If a size is not declared, the window defaults to `default`. You can also dynamically change the size using the `webflow.setExtensionSize()` [API](/designer/reference/resize-extension).
    </div>
  </div>

  <div id="/data/reference/custom-code/custom-code/register-hosted#request.body.hostedLocation" class="scroll-mt-content-padded fern-api-property">
    <div class="fern-api-property-header">
      <span class="fern-api-property-key" data-state="closed">
        publicDir
      </span>

      <span class="fern-api-property-meta">
        <span>string</span>

        <span>Optional</span>
      </span>
    </div>

    <div class="prose dark:prose-invert max-w-none break-words prose-sm dark:prose-invert-sm">
      Determines the directory to build and serve the app from. If not declared, it defaults to `/public`.
    </div>
  </div>

  <div id="/data/reference/custom-code/custom-code/register-hosted#request.body.hostedLocation" class="scroll-mt-content-padded fern-api-property">
    <div class="fern-api-property-header">
      <span class="fern-api-property-key" data-state="closed">
        appIntents
      </span>

      <span class="fern-api-property-meta">
        <span>string</span>

        <span>Optional</span>
      </span>
    </div>

    <div class="prose dark:prose-invert max-w-none break-words prose-sm dark:prose-invert-sm">
      Defines the element types that can create connections to your App. [See the documentation on App Intents for more details.](/designer/reference/app-intents-and-connections)
    </div>
  </div>

  <div id="/data/reference/custom-code/custom-code/register-hosted#request.body.hostedLocation" class="scroll-mt-content-padded fern-api-property">
    <div class="fern-api-property-header">
      <span class="fern-api-property-key" data-state="closed">
        appConnections
      </span>

      <span class="fern-api-property-meta">
        <span>string</span>

        <span>Optional</span>
      </span>
    </div>

    <div class="prose dark:prose-invert max-w-none break-words prose-sm dark:prose-invert-sm">
      An array of unique identifiers for establishing connections between your app and elements on the canvas. [See the documentation on App Connections for more details.](/designer/reference/app-intents-and-connections)
    </div>
  </div>
</div>

<Aside>
  ```json title="webflow.json example"
  {
    "name": "My Webflow App",
    "apiVersion": "2",
    "size": "comfortable",
    "publicDir": "dist",
    "appIntents": {
      "image": ["manage"],
      "form": ["manage"]
    },
    "appConnections": [
      "myAppImageConnection",
      "myAppFormConnection"
    ]
  }
  ```
</Aside>

## Building and running locally

The scaffold for your extension includes a TypeScript file at `src/index.ts`. Use this file to interact with the Designer APIs.

When you're ready to test, run the `npm run build` command. This transpiles your TypeScript into JavaScript, outputting the result to `/public/index.js`. Do not modify `/public/index.js` directly, as it will be overwritten.

To run your extension locally, use the `webflow extension serve` command. This will allow you to interact with your extension within the Webflow Designer.

## Bundling for production

When you're ready to publish, you need to bundle your extension. This process compiles your code and creates a `bundle.zip` file. You can read more about how to bundle your extension in our [guide on publishing your extension](/apps/docs/publishing-your-app).

If you used `webflow extension init`, you can run:

```bash
npm run build
```

Otherwise, use the CLI command:

```bash
webflow extension bundle
```

<Note title="Working with Frameworks">
  For frameworks like Next.js that generate browser-ready files, build with the framework first, then run `webflow extension bundle` on the output directory.
</Note>

---

# Migrating to v2

> 

We're excited to introduce the new version of Webflow's Designer APIs, featuring enhanced functionality and more efficient methods for interacting with the Designer. To ensure your app remains compatible, please follow the simple steps provided for updating your app's configuration and codebase. [Check the details below.](#app-configuration-updates)

## Notable Changes

### Simplified edit semantics

We have removed the `.save()` method from many of our objects.  Rather than staging “local changes” and explicitly synchronizing via `element.save()`, we’re now making changes as they’re invoked.

### Accessing native Elements

Through the introduction of the [Element Presets Object](/designer/reference/element-presets), the API now allows Apps to insert [native Elements](https://university.webflow.com/lesson/add-elements-panel?topics=elements) onto the canvas.

### Inserting Elements

We’re **introducing** new helper methods that make it easier to insert elements into a hierarchy

* `element.append() `
* `element.prepend() `
* `element.before()`
* `element.after()`

We've **removed** element-specific methods for adding an element to a canvas including

* `createDOM()`
* `createString()`
* `createHeading()`

### Direct editing of Components

This API allows a more streamlined way to edit Component Objects, by[ accessing the root element of a Component Object.](/designer/reference/get-root-element)

### Clear and consistent naming

We've made minor changes to clarify Designer API functionality

* *“Folders” → “PageFolders”* to disambiguate versus other Page resources (e.g. Asset pages)
* *“og-” -> “openGraph-”* prefix for Open Graph Page Fields

### Clear and consistent return objects

* Most methods that aren't meant to return a value now return a Promise that resolves to `null`  instead of `undefined`
* Element IDs are now identified by their component and element ids, e.g. `id: {component: '63486e4622e33733b9002e9c', element: 'cafe0045-d304-79d9-8f68-af3adaed06e8'}`

***

## App configuration Updates

1. Install the latest version of the Webflow CLI
2. Install the latest type definitions for the Designer APIs

```bash
npm i @webflow/designer-extension-typings@0.2.0-beta.3
```

3. Update `webflow.json` to include the new `apiVersion` parameter.

```json webflow.json
{
  "name": "My Webflow App",
  "publicDir": "dist",
  "apiVersion": "2"
}
```

4. Start your development server.

***

## Code Adjustments

Remove any references to `.save()`

```typescript
// v1
await myElement.setStyles([styles])
await myElement.save()

// v2
await myElement.setStyles([styles])
```

Adjust logic to access Element IDs

```typescript
// v1
const selectedElement = await webflow.getSelectedElement()
console.log(selectedElement)
// Prints: 'cafe0045-d304-79d9-8f68-af3adaed06e8'

// v2
const selectedElement = await webflow.getSelectedElement()
console.log(selectedElement)
// Prints id: {component: '63486e4622e33733b9002e9c', element: 'cafe0045-d304-79d9-8f68-af3adaed06e8'}\`

const elementID = selectedElement?.id.element
// Returns: 'cafe0045-d304-79d9-8f68-af3adaed06e8'
```

Adjust logic for element insertion

```typescript
// v1
const newDiv = await webflow.createDOM('div')

// v2
const selectedElement = await webflow.getSelectedElement()
const newDiv = await selectedElement?.before(webflow.elementPresets.DivBlock)
```

---

# New Element Inspection API

> Introducing the new Element Inspection API with getElementSnapshot for capturing visual snapshots of elements.

We're introducing a new **Element Inspection** category in the Designer API, starting with the `getElementSnapshot` method that allows you to capture visual snapshots of elements on the canvas.

## What's new

### Element Inspection

A new API category focused on inspecting and capturing element data:

* **`webflow.getElementSnapshot(element)`** - Captures a visual snapshot of any element and returns it as a [base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64) encoded PNG string with the `data:image/png;base64,` prefix included

## Use cases

The `getElementSnapshot` method enables several powerful workflows:

* **Visual documentation**: Capture element snapshots for design documentation or style guides
* **AI-powered design analysis**: Send element snapshots to AI models for visual analysis and suggestions
* **Design comparison**: Capture before/after snapshots during design iterations
* **Thumbnail generation**: Create previews of components or sections

## Example usage

```typescript
const selectedElement = await webflow.getSelectedElement();
const img = document.getElementById("snapshot-image") as HTMLImageElement;

if (selectedElement) {
  const snapshot = await webflow.getElementSnapshot(selectedElement);

  if (snapshot) {
    // Set the base64 string as the image source
    img.src = snapshot;
  }
}
```

## Learn more

For complete documentation, see the [Get Element Snapshot](/designer/reference/get-element-snapshot) reference.

---

# Webflow's MCP server now supports the Designer

> Update: Webflow's MCP server now supports the Designer API, giving AI agents the ability to work with the Webflow Designer in real-time.

Webflow's MCP server now supports the Designer API, enabling AI agents to interact directly with the Webflow Designer canvas in real-time. This pivotal update expands the server's capabilities beyond content management, opening new possibilities for AI-assisted visual design.

## What's new

The MCP server now includes tools that connect directly to the Webflow Designer, allowing AI agents to:

* Create and modify design elements on the canvas
* Manage styles, variables, and components
* Work with responsive breakpoints and layouts
* Access real-time design data and structure

### Companion app for Designer connectivity

<div>
  <Frame>
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/02ae17428a9bc1c3d5ed26bc14b44a66d935ef85970e30b85f6c2b0d64c15ddb/products/designer/pages/Assets/bridge-app.png" alt="MCP Companion App" />
  </Frame>
</div>

A new companion app automatically installs during authorization and enables seamless communication between your AI agent and the Designer:

* **Automatic setup**: The companion app installs automatically when you authorize the MCP server
* **Real-time sync**: Maintains a persistent connection between your AI agent and active design sessions
* **Designer access**: Must remain open in the Designer for MCP tools to function

#### Companion app connectivity

**Keep the companion app open**: The MCP Companion App must remain open in the Webflow Designer for Designer API tools to function. Close the app, and you'll lose access to canvas-based operations.

## Getting started

To use the new Designer API features:

1. **Update your MCP configuration** following the [installation guide](/data/docs/ai-tools)
2. **Authorize your sites** through the OAuth flow (the companion app installs automatically)
3. **Open the Designer** and launch the "Webflow MCP Companion App" from the Apps panel
4. **Start designing** with AI-powered prompts like "Create a hero section with responsive design"

## Important requirements

### Node.js version 22.3.0+

The MCP server now requires Node.js version **22.3.0** or higher. If you're using an older version:

* Use `nvm` to install and switch to Node.js 22.3.0
* Clear your `npx` cache: `rm -rf ~/.npm/_npx`
* Restart your AI client after updating

See the [Node.js compatibility section](/docs/ai-tools#nodejs-compatibility) for detailed troubleshooting steps.

## Learn more

For complete setup instructions, tool documentation, and troubleshooting guides, see the [MCP server and AI tools documentation](/docs/ai-tools).

---

# Manage variable modes on styles

> Manage variable modes on styles

This release adds new API methods to manage variable modes on styles. These methods let you programmatically apply, retrieve, and remove variable modes from styles, enabling better control over design themes and variable management.

## New methods for managing variable modes on styles

* [Set variable mode](/designer/reference/set-variable-mode-style)
* [Set variable modes](/designer/reference/set-variable-modes-style)
* [Get variable mode](/designer/reference/get-variable-mode-style)
* [Get variable modes](/designer/reference/get-variable-modes-style)
* [Remove variable mode](/designer/reference/remove-variable-mode-style)
* [Remove variable modes](/designer/reference/remove-variable-modes-style)
* [Remove all variable modes](/designer/reference/remove-all-variable-modes)

## Try it out

Test these new methods in the [API Playground](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62).

---

# Enhanced element creation and form controls

> Designer API improvements for bulk element creation, workspace information, and form input controls

This release streamlines element creation workflows and provides better control over form inputs in the Designer API.

### Enhanced bulk element creation

* **Set text and style during creation**: The [element builder](/designer/reference/bulk-add-elements) now supports setting text and style properties during element creation, eliminating the need for separate API calls after creation. This improves developer experience and performance.

### Workspace information in site details

* **Access workspace context**: The [Get Site Information](/designer/reference/get-site-info) method now includes workspace details:
  * `workspaceId` - Unique identifier for the workspace
  * `workspaceSlug` - URL-friendly workspace identifier

### Improved form input controls

* **Better form customization**: New methods provide enhanced control over form inputs:
  * [Get input type](/designer/reference/form-element/get-type-input-field) - Retrieves the HTML type of a `FormTextInput` field
  * [Set input type](/designer/reference/form-element/set-type-input-field) - Sets the HTML type of a `FormTextInput` field

---

# Use functions in variables

> Use functions in variables

Variables now support using a set of CSS functions in their values, allowing you to create more flexible and dynamic design tokens.

Webflow supports the following [CSS functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#math_functions) in variables:

| Function      | Purpose                                 | Example                                         |
| ------------- | --------------------------------------- | ----------------------------------------------- |
| `calc()`      | Perform mathematical calculations       | `calc(100vh - var(--header-height))`            |
| `clamp()`     | Create fluid values with min/max bounds | `clamp(1rem, 5vw, 3rem)`                        |
| `min()`       | Use the smallest of multiple values     | `min(50%, 300px)`                               |
| `max()`       | Use the largest of multiple values      | `max(100px, 20%)`                               |
| `color-mix()` | Blend colors together                   | `color-mix(in srgb, var(--primary) 75%, white)` |

### Custom values

To use functions in variables, you need to create or set them as custom values. All variable creation methods accept a `CustomValue` object as the value parameter, and the `variable.set()` method can also update variable values with custom values. For the custom values object, the `type` property is always `"custom"` and the `value` property is a string containing the CSS function.

**CustomValue type**

```typescript
type CustomValue = {
  type: "custom";
  value: string;
};
```

<Tabs>
  <Tab title="Create a custom value" id="createCustomValue">
    {/* <!-- vale off --> */}

    ```typescript
    // Get collection
    const collection = await webflow.getDefaultVariableCollection()

    // Create a Color Variable
    const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")

    // Create a Color Variable with a custom value
    await colorVariable.set({
        type: "custom",
        value: `color-mix(in srgb, #146EF5, white 75%)`
    });
    ```
  </Tab>

  <Tab title="Set a custom value" id="setCustomValue">
    ```typescript
    variable.set({
        type: "custom",
        value: "clamp(1rem, 2vw, 2rem)"
    });
    ```

    {/* <!-- vale on --> */}
  </Tab>
</Tabs>

### Reference variables in functions

When using functions, you can reference other variables using the `var()` syntax. This allows you to create dynamic relationships between your design tokens. To dynamically get this syntax, use the new [`getBinding()`](/designer/reference/get-variable-binding) method on a variable.

```typescript
// Get collection
const collection = await webflow.getDefaultVariableCollection()

// Create a Color Variable
const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")

// Get the binding for the variable
const binding = await colorVariable.getBinding()

// Create a Color Variable with a custom value
await colorVariable.set({
    type: "custom",
    value: `color-mix(in srgb, ${binding}, white 75%)`
});
```

### Getting the value of a custom variable

To get the value of a custom variable, add the `customValues` property as an optional parameter to the `variable.get()` method.

```typescript
const myValue = await colorVariable.get({
    customValues: true
})

console.log(myValue)
// Returns a CustomValue object
// {
//     type: "custom",
//     value: "color-mix(in srgb, #146EF5, white 75%)"
// }
```

<Warning>
  Using `variable.get()` without setting `customValues: true` will throw an error if the variable has a custom value. It's recommend to always setting `customValues: true` when getting the value of a variable.
</Warning>

---

# Support for combo classes

> API Changelog: Introducing Workspace Audit Logs, Quality of Life updates, Combo Classes, and more

The Designer API now supports the creation of [combo classes](https://help.webflow.com/hc/en-us/articles/33961311094419-Classes#how-to-create-a-combo-class). Combo classes are a way to override the styles of an existing parent class. This is useful for creating unique variations of a style without having to create an entirely new class.

In the Designer API, you can now create combo classes using the [`createStyle` method](/designer/reference/create-style) and passing an existing style to the `parent` property. For example, if you have a parent class called `button` and you want to create a new style that applies a different color for a specific button, you can do the following:

```javascript title="my-app.ts"

// Create a style for the button
const buttonStyle = await webflow.createStyle('button')

// Add properties to the style
await buttonStyle.setProperties({
  "background-color": "grey",
  "font-size": "16px",
  "font-weight": "bold",
});

// Create a combo class that applies the new style to the button
const comboClass = await webflow.createStyle('button-primary', {parent: 'button'})

// Add properties to the combo class
await comboClass.setProperties({
  "background-color": "blue",
});

// Check if the class is a combo class
const isComboClass = await comboClass.isComboClass()

```

## Form and asset methods

Additionally, the Designer API now supports the following methods for forms and assets:

**Forms**

* [Get name for a form input element](/designer/reference/form-element/get-name-input-field)
* [Set name for a form input element](/designer/reference/form-element/set-name-input-field)

**Assets**

* [Replace asset](/designer/reference/set-asset-file)
* [Set asset name](/designer/reference/set-asset-name)

---

# Control form settings and fields

> Discover the latest enhancements to Webflow's APIs, including updates to the Data API and beta endpoints.

We've added new methods to manage form settings using the Designer API. This means you can now create forms using the [element creation methods](/designer/reference/elements-overview#creating-elements) with the `FormForm` element preset. Once the form is created, or if you already have a form created, you can use the new methods to manage the following settings:

* **Name:** the name of the form
* **Redirect URL:** the URL to redirect to after the form is submitted
* **Action:** the URL to send the form data to
* **Method:** the HTTP method to use when sending the form data

### Form settings

* [Get form settings](/designer/reference/form-element/get-form-settings)
* [Set form settings](/designer/reference/form-element/set-form-settings)

### Form fields

Additionally, you can manage required fields on forms.

* [Get "required" status of a form input](/designer/reference/form-element/get-required-status)
* [Set "required" status of a form input](/designer/reference/form-element/set-required-status)

---

# Support for variable modes and form elements

> Changelog for 03-12-2025

## Support for variable modes

Variable modes let you define multiple values for individual variables, creating distinct sets of values (“modes”) that can be switched and applied across a site.

Use the following endpoints to create and manage variable modes:

* [Create variable mode](/designer/reference/create-variable-mode)
* [Get all variable modes](/designer/reference/get-all-variable-modes)
* [Get variable mode by ID](/designer/reference/get-variable-mode-by-id)
* [Get variable mode by name](/designer/reference/get-variable-mode-by-name)
* [Remove variable mode](/designer/reference/remove-variable-mode)
* [Get variable mode name](/designer/reference/get-variable-mode-name)
* [Set variable mode name](/designer/reference/set-variable-mode-name)

Get and set variable values for a specific mode:

* **[Set mode-specific variable value](/designer/reference/set-variable-value)**<br />
  You can now include an option parameter to set a mode-specific variable value.
* **[Get mode-specific variable value](/designer/reference/get-variable-value)**<br />
  You can now include an option parameter to get a mode-specific variable value.

## Managing forms

Webflow's Designer API now supports the following methods for Form elements:

* [Get form name](/designer/reference/form-element/get-form-name)
* [Set form name](/designer/reference/form-element/set-form-name)

---

# Work with pseudo-states in the Designer

> Discover the latest enhancements to Webflow's APIs, including updates to the Data API and beta endpoints.

Get the current pseudo-state of the designer and subscribe to changes in the pseudo-state. This is helpful for showing specific [style properties](/designer/reference/set-style-properties) based on a pseudo-state like `:hover`, `:focus`, or `:active`.

* **[Get the pseudo-state of the designer](/designer/reference/get-pseudo-mode)**<br />
  Added the `webflow.getPseudoMode()` method to return the [pseudo-class state](https://help.webflow.com/hc/en-us/articles/33961301727251-States) of the designer.
* **[Subscribe to pseudo-state changes](/designer/user-changes-pseudo-mode)**<br />
  Added options to the `webflow.subscribe()` method to subscribe to changes in the pseudo-state of the designer.

## Get additional site details

* **[Get site information](/designer/reference/get-site-info)**<br />
  The `getSiteInfo` method now returns the `domains` object in the response.

---

# Create and manage variable collections

> Discover the latest enhancements to Webflow's APIs

Variable collections provide an organizational structure for managing related variables. Collections allow you to group variables logically - for example, you might create separate collections for brand colors, typography, or spacing variables. Collections help maintain a clean and organized variable system, making it easier to manage design tokens at scale across your projects.

Use the following endpoints to create and manage [variable collections](/designer/reference/variable-collections-overview).

* [Create variable collection](/designer/reference/create-variable-collection)
* [Get all variable collections](/designer/reference/get-all-variable-collections)
* [Get default variable collection](/designer/reference/get-default-variable-collection)
* [Get variable collection by ID](/designer/reference/get-variable-collection-by-id)
* [Remove variable collection](/designer/reference/remove-variable-collection)
* [Set variable collection name](/designer/reference/set-variable-collection-name)

---

# Enhanced page methods

> Discover the latest enhancements to Webflow's APIs, including updates to the Data API and beta endpoints.

Page methods for the designer API now accept `null` values. The following methods now accept `null` values:

* [setTitle](/designer/reference/set-page-title)
* [setDescription](/designer/reference/set-page-description)
* [setOpenGraphTitle](/designer/reference/set-open-graph-title)
* [setOpenGraphDescription](/designer/reference/set-open-graph-description)
* [setOpenGraphImage](/designer/reference/set-open-graph-image-url)
* [setSearchTitle](/designer/reference/set-search-title)
* [setSearchDescription](/designer/reference/set-search-description)
* [setSearchImage](/designer/reference/set-search-image)

---

# Enhanced extension management and variable types

> Update: New Designer API methods for extension management and expanded variable type support.

In this release, the Designer API introduces key enhancements to improve extension lifecycle management and expand the types of variables available in the Designer.

## Extension management

Programmatically close extensions and access contextual launch information

* **[`webflow.closeExtension()`](/designer/reference/close-extension)** <br />
  Close the current extension. This enables more control over the extension lifecycle and user experience flows.

* **[`webflow.getLaunchContext()`](/designer/reference/get-launch-context)** <br />
  Retrieve initialization context information when an extension is launched. This method provides critical data about how the extension was activated, whether through an [App Intent, App Connection](/designer/reference/app-intents-and-connections), or [deep link](/apps/deep-linking).

## Variable system enhancements

Create and manage **percentage** and **number** variables for more flexible design systems

* **[`webflow.createPercentageVariable(options)`](/designer/reference/create-percentage-variable)** <br />
  Create percentage-based variables for responsive design values such as opacity levels, width/height constraints, or other proportional measurements.

* **[`webflow.createNumberVariable(options)`](/designer/reference/create-number-variable)** <br />
  Create numeric variables for values that require precise control without measurement units, such as animation iterations, z-index values, or quantity indicators.

---

# Deep linking to Hybrid Apps

> Update: New deep linking capability enables seamless transitions between third-party platforms and Designer Extensions, improving user workflow efficiency.

This release introduces deep linking support for Hybrid Apps, enabling smooth transitions between third-party platforms and the Webflow Designer. Learn more about deep linking in the [Hybrid Apps documentation](/apps/deep-linking).

### Feature highlights

* **Direct access to Hybrid Apps** - Launch your app directly in the Designer after authenticating with Webflow
* **Streamlined user experience** - Eliminate manual navigation steps between platforms
* **Enhanced workflow efficiency** - Create seamless onboarding and integration flows

### Deep linking format

Deep linking requires the Site Short Name and Client ID.

* **Get the Site Short Name:** Retrieve the short name using the [Get Site](/data/reference/sites/get) endpoint.
* **Add Client ID:** Find the Client ID in the Webflow Dashboard under Apps & Integrations in your App’s settings.

```
<site short name>.design.webflow.com?app=<client id>
```

---

# Subscribe to mode changes in the Designer

> Update: New event subscription for tracking mode changes in the Designer, helping extensions adapt functionality based on available capabilities.

Designer Extensions now remain active across[ various modes in the Designer](/designer/reference/app-modes), including preview mode, across different locales, and on branched pages. Different capabilities are available depending on the mode, so it's important to know when a mode changes. This update introduces a new event subscription method to help you track mode changes in the Designer.

* **[Subscribe to mode changes in the Designer](/designer/reference/user-changes-mode)** <br />
  Receive real-time notifications when users switch between different Designer modes. Since each mode offers distinct capabilities based on user permissions, this subscription helps your app adapt its functionality accordingly. For detailed information about available modes and their capabilities, refer to the [App Modes documentation](/designer/reference/app-modes).

---

# Subscribe to CMS collection page changes

> Update: New Designer API event subscription for tracking CMS collection page interactions and item selections.

The Designer API now includes a new event subscription method for CMS collection pages:

* **[Subscribe to CMS Collection Page Events](/designer/reference/user-changes-cms-page)** <br />
  Track when users interact with CMS collection pages and items. This event triggers in two scenarios:
  * When a user navigates to a collection page
  * When a user selects a different CMS item within a collection page

<Note>
  This event subscription works with both CMS and Ecommerce collection pages.
</Note>

---

# Identify user capabilities in the Designer

> 

The Designer API introduces a method to detect user capabilities in the Designer. Designer Extensions can now dynamically adjust their functionality based on user permissions, ensuring appropriate feature access across different [App Modes](/designer/reference/app-modes).

* **[Get user's Designer capabilities](/designer/reference/get-users-designer-capabilities)**<br />
  Get list of user's abilities in the designer.

---

# Manage links in the Designer

> Update: Added new Data API endpoints to assist with programmatic Workspace administration, and introduced Designer API methods for adjusting links within the Designer.

In this release, the Designer API includes methods to manage links in the Designer.

* **[Get Link Target](/designer/reference/link-element/getTarget):** Get the target value of the link block element.
* **[Set Link Block Settings](/designer/reference/link-element/setSettings):** Apply settings for a Link Block element. Including the type of link, its value, and metadata settings.

---

# New methods for asset management, image element handling, and page type identification

> Update: New methods for asset management, image element handling, and page type identification in the Designer API.

This release introduces new capabilities for asset management, image element manipulation, and page type identification in the Designer API.

## Feature highlights

* **Enhanced asset management** - New methods to retrieve and work with assets throughout your site
* **Image element manipulation** - Programmatically control image elements, including setting assets and alt text
* **Page type identification** - Determine the category of any page in your Webflow project

## New endpoints

### Image element methods

* **[`element.getAsset()`](/designer/reference/image-element/getAsset)** <br />
  Retrieve the asset currently assigned to an Image element, enabling dynamic content management.

* **[`element.setAsset(asset)`](/designer/reference/image-element/setAsset)** <br />
  Assign an asset to an Image element programmatically, perfect for automated content updates.

* **[`element.getAltText()`](/designer/reference/image-element/getAltText)** <br />
  Retrieve the accessibility alt text for an Image element on the canvas.

* **[`element.setAltText(altText)`](/designer/reference/image-element/setAltText)** <br />
  Set the accessibility alt text for an Image element, improving the site's accessibility.

### Asset management methods

* **[`webflow.getAllAssets()`](/designer/reference/get-all-assets)** <br />
  Retrieve all assets available on a site, providing a complete inventory for management and selection.

* **[`asset.getName()`](/designer/reference/get-asset-name)** <br />
  Get the name of a specific asset, useful for identification and organization.

* **[`asset.getMimeType()`](/designer/reference/get-asset-mime-type)** <br />
  Retrieve the MIME type of an asset, allowing for proper handling based on file type.

* **[`asset.getAltText()`](/designer/reference/get-alt-text)** <br />
  Get the accessibility alt text associated with a specific asset.

* **[`asset.setAltText(altText)`](/designer/reference/set-alt-text)** <br />
  Set the accessibility alt text for a specific asset, ensuring it's available whenever the asset is used.

### Page identification

* **[`page.getKind()`](/designer/reference/get-page-category)** <br />
  Determine the type of a Webflow page. Returns one of: `static`, `ecommerce`, `cms`, `userSystems`, `utility`, or `staticTemplate`.

---

# Bulk element creation, asset management, and CMS integration

> Update: New Designer API features for element creation, asset management, and CMS integration.

In this release, Designer API includes new methods for bulk element creation, asset management, and CMS integration.

## Feature highlights

* **Performance enhancement with bulk element creation** - Use the new element builder API to create complex interfaces more efficiently
* **Complete asset management** - Create and manage assets with new dedicated endpoints
* **Enhanced CMS page integration** - Access collection details directly from CMS-generated pages

## New endpoints

### Elements

* **[`webflow.elementBuilder`](/designer/reference/bulk-add-elements)** <br />
  Create multiple elements efficiently in a single operation, significantly improving performance when building complex interfaces. This method is especially valuable for large-scale designs or applications requiring optimal rendering speed.

### Assets

* **[`webflow.createAsset`](/designer/reference/create-an-asset)** <br />
  Upload and create new assets on a site, supporting various file types including images, documents, and other media files.

* **[`asset.getAssetById`](/designer/reference/get-asset-by-id)** <br />
  Retrieve detailed information about a specific asset using its unique identifier.

* **[`asset.getUrl`](/designer/reference/get-asset-url)** <br />
  Get the direct URL for an asset, allowing seamless integration in your applications and designs.

### CMS page integration

* **[`page.getCollectionId`](/designer/reference/get-collection-id-from-cms-page)** <br />
  Retrieve the unique identifier of the collection that generated a CMS page.

* **[`page.getCollectionName`](/designer/reference/get-collection-name-from-cms-page)** <br />
  Get the human-readable name of the collection associated with a CMS-generated page.

---

# Designer API: Version 2

> Update: We're excited to introduce the new version of Webflow's Designer APIs, featuring enhanced functionality and more efficient methods for interacting with the Designer.

We're excited to introduce the new version of Webflow's Designer APIs, featuring enhanced functionality and more efficient methods for interacting with the Designer. [Refer to the migration guide](https://developers.webflow.com/designer/reference/migrating-to-v2) to learn more about configuring your App to work with version 2 of Webflow's Designer APIs.

* [New methods](#new-methods)
* [Removed methods](#removed-methods)

## Notable changes

### Simplified edit semantics

The `.save()` method has been removed from many of the API's objects. Rather than staging “local changes” and explicitly synchronizing via `element.save()`, the API now makes changes as they're invoked.

### Accessing native elements

Through the introduction of the [Element Presets Object](/designer/reference/element-presets), the API now allows Apps to insert [native elements](https://university.webflow.com/lesson/add-elements-panel?topics=elements) onto the canvas.

### Inserting elements

The new version of the Designer API **introduces** new helper methods that make it easier to insert elements into a hierarchy:

* [`element.append()`](/designer/reference/append)
* [`element.prepend()`](/designer/reference/prepend)
* [`element.before()`](/designer/reference/insert-element-before)
* [`element.after()`](/designer/reference/insert-element-after)

The Designer API v2 removes legacy element creation methods in favor of more flexible insertion methods.

* `createDOM()`
* `createString()`
* `createHeading()`

### Direct editing of components

This API enables a more streamlined approach to editing component objects. You can now access the root element of a component object by [using the `get-root-element` method](/designer/reference/get-root-element).

### Clear and consistent naming

Minor naming changes to clarify Designer API functionality:

* *“Folders”* → *“PageFolders”* to disambiguate versus other Page resources (for example, Asset pages)
* *“og-”* → *“openGraph-”* prefix for Open Graph Page Fields

### Clear and consistent return objects

* Most methods that aren't meant to return a value, like `remove`, now return a Promise that resolves to `null`  instead of `undefined`
* Element IDs are now identified by their component and element ids, for example:

```
id:  {component: '63486e4622e33733b9002e9c', element: 'cafe0045-d304-79d9-8f68-af3adaed06e8'}
```

***

## New methods and objects

### Elements

* [Element Presets](https://developers.webflow.com/designer/reference/element-presets)
* [Remove element](https://developers.webflow.com/designer/reference/remove-element)
* [Insert Element before target element](https://developers.webflow.com/designer/reference/insert-element-before)
* [Insert element after target element](https://developers.webflow.com/designer/reference/insert-element-after)
* [Nest element as first child](https://developers.webflow.com/designer/reference/prepend)
* [Nest element as last child](https://developers.webflow.com/designer/reference/prepend)

### Styles

* [Remove a single style property](https://developers.webflow.com/designer/reference/remove-a-style-property)
* [Remove multiple style properties](https://developers.webflow.com/designer/reference/remove-style-properties)

## Removed methods

* `.save()`
* `webflow.createDOM()`
* `webflow.createHeading()`
* `webflow.createString()`

---

# Support for Components & Variables

> Update: New Designer API endpoints for Components and Variables introduced with our October 5th, 2023 release.

We're excited to announce the expansion of Webflow's Designer API with comprehensive support for Components and Variables. This release introduces a suite of new endpoints that empower developers to implement component-based architecture and manage design systems through variable collections. These capabilities enable programmatic creation, modification, and management of components, alongside the ability to define and control design tokens such as colors, typography, and spacing variables.

## Feature highlights

* **Component creation and management** - Create, register, and manipulate components programmatically
* **Variable collections** - Work with design variables to maintain consistency across your projects
* **Component navigation** - Enter and exit component instances during development

## New endpoints

### Element methods

* **[`webflow.getRootElement()`](/designer/reference/get-root-element)** <br />
  Access the root element of the current context, enabling traversal of the element tree.

### Component methods

* **[`webflow.getAllComponents()`](/designer/reference/get-components)** <br />
  Retrieve all components available in the current project.

* **[`webflow.registerComponent(name, element)`](/designer/reference/create-component-definition)** <br />
  Register a new component with the specified name and root element.

* **[`webflow.unregisterComponent(component)`](/designer/reference/delete-component-definition)** <br />
  Remove a component from the registry.

* **[`webflow.enterComponent(instance)`](/designer/reference/enter-component)** <br />
  Enter a component instance to make edits to its structure.

* **[`webflow.exitComponent()`](/designer/reference/exit-component)** <br />
  Exit the current component context.

* **[`webflow.createInstance(component)`](/designer/reference/create-component-instance)** <br />
  Create a new instance of a component.

* **[`component.getName()`](/designer/reference/get-component-name)** <br />
  Get the name of a component.

* **[`component.setName(name)`](/designer/reference/set-component-name)** <br />
  Change the name of a component.

### Variables and collections

* **[`webflow.getDefaultVariableCollection()`](/designer/reference/get-default-variable-collection)** <br />
  Access the default variable collection for the current project.

* **[`collection.getName()`](/designer/reference/get-collection-name)** <br />
  Get the name of a variable collection.

* **[`collection.getVariable(id)`](/designer/reference/get-variable)** <br />
  Retrieve a variable by its unique identifier.

* **[`collection.getVariableByName(name)`](/designer/reference/get-variable-by-name)** <br />
  Retrieve a variable by its name.

* **[`collection.getAllVariables()`](/designer/reference/get-all-variables)** <br />
  Get all variables in a collection.

* **[`variable.getName()`](/designer/reference/get-variable-name)** <br />
  Get the name of a variable.

* **[`variable.setName(newName)`](/designer/reference/set-variable-name)** <br />
  Change the name of a variable.

* **[`variable.set(value)`](/designer/reference/set-variable-value)** <br />
  Set the value of a variable.

* **[`variable.get()`](/designer/reference/get-variable-value)** <br />
  Get the current value of a variable.

* **[`variable.remove()`](/designer/reference/remove-variable)** <br />
  Remove a variable from its collection.

---

# Browser API

> Introduction to the Webflow Browser API

The Browser API lets you control Webflow Analyze and Optimize features directly from your site's JavaScript. Use it to manage consent, track experiments, and personalize user experiences.

## What you can do with the Browser API

<CardGroup>
  <Card
    title="Manage consent"
    iconPosition="left"
    href="/browser/reference/consent-management"
    iconSize="12"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/OptimizeUser.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/OptimizeUser.svg" alt="" className="light-icon" />
            </>
        }
  >
    Manage user consent and privacy preferences in real time
  </Card>

  <Card
    title="Track variations"
    iconPosition="left"
    href="/browser/optimize/variations"
    iconSize="12"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Test.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Test.svg" alt="" className="light-icon" />
            </>
        }
  >
    Send optimization variations from experiments to third-party tools
  </Card>

  <Card
    title="Personalize experiences with custom attributes"
    iconPosition="left"
    iconSize="12"
    href="/browser/optimize/attributes"
    icon={  
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/SitePersonalization.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/SitePersonalization.svg" alt="" className="light-icon" />
            </>
        }
  >
    Set custom attributes based on user behavior and data
  </Card>
</CardGroup>

## Getting started

<Steps>
  ### Choose where to add your code

  You can use the Browser API by adding JavaScript in one of two ways:

  * **Directly in your site**\
    Add a script before the closing `</head>` tag using Webflow's [custom code settings](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags).\
    *Best for simple use cases.*

  * **With Google Tag Manager (or similar)**\
    Add a script as a [custom tag](https://support.google.com/tagmanager/answer/6107167?hl=en).\
    *Recommended for advanced tracking or integrations.*

  ### Wait for the API to be ready

  Wrap your code in [`wf.ready()`](/browser/reference/wf-ready) to ensure the API has loaded before you call any methods:

  ```javascript
  wf.ready(function() {
    // Your code here
  });
  ```

  ### Start building

  Once inside `wf.ready()`, you can call any Browser API methods to manage consent, track variations, or set custom attributes.

  ```javascript
  // Call wf.ready() to ensure the Browser API is available
  wf.ready(function() {
      // Retrieve variations
      wf.onVariationRecorded(function(result){
          // Do something with the result
          console.log(result);
      });
      // Set custom attributes
      wf.setAttributes("user",{
          userSegment: 'enterprise',
          userRole: 'technicalBuyer'
      });
  });
  ```
</Steps>

## FAQs

{/* <!-- vale off --> */}

<AccordionGroup>
  <Accordion title="What is the Browser API?">
    {/* <!-- vale on --> */}

    The Browser API is a JavaScript API that allows you to interact with Webflow features directly in the browser. It provides methods to retrieve Optimize variations, set custom attributes, and handle other Webflow features.

    {/* <!-- vale off --> */}
  </Accordion>

  <Accordion title="How do I add the Browser API to my site?">
    {/* <!-- vale on --> */}

    The Browser API is automatically included on all Webflow sites with Analyze and Optimize enabled, and handles loading the necessary code in an optimized way to minimize impact on page performance.

    {/* <!-- vale off --> */}
  </Accordion>

  <Accordion title="How do I use the Browser API?">
    {/* <!-- vale on --> */}

    The Browser API is available through the global `wf` object in your browser. You can access the API by adding a script using [custom code](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags) on your sites and pages or through external services that load scripts on your site like Google Tag Manager.

    The API can be called from any JavaScript code running on your site.

    {/* <!-- vale off --> */}
  </Accordion>
</AccordionGroup>

---

# wf.ready()

> The wf.ready() method is used to ensure the Browser API is available before calling any API methods.

This method ensures the Browser API is loaded on the page. It accepts a callback function that executes once the Browser API loads. Place any code you want to run after the Browser API is ready inside this callback function.

<Tip>
  To make sure your code runs, always wrap your Browser API logic in 

  `wf.ready()`

  . This ensures that the Browser API is loaded before your code runs.
</Tip>

### Syntax

```typescript
wf.ready(callback: () => void): void
```

### Parameters

* **callback**: `() => void` - A function that executes once the Browser API is ready to use. **Place any code using the Browser API methods inside of this callback function.**

### Example

```javascript
wf.ready( () => {
    // Your code here
    console.log("The Browser API is ready to use!");
    const consentStatus = wf.getUserTrackingChoice();
    console.log(consentStatus);
});
```

---

# Site Tracking and Consent Management

> Manage user tracking consent for Webflow Analyze and Optimize using the Browser API

Use Webflow's Browser APIs to manage user tracking consent for [Analyze](http://webflow.com/analyze) and [Optimize](http://webflow.com/optimize). Check consent status, control tracking, and integrate with your consent management platform—or build your own custom solution.

## Site tracking

Webflow's [Site tracking](https://help.webflow.com/hc/en-us/articles/33620965657107-Analyze-Optimize-tracking-settings) lets you record analytics, personalize experiences, and run AI-powered tests using Analyze and Optimize. Site tracking must be enabled to use the consent management APIs.

Privacy laws like GDPR and CCPA may require you to obtain visitor consent before tracking, depending on your site’s location and audience. It’s your responsibility to determine which requirements apply to your site. Webflow’s APIs provide the tools you need to implement consent flows for data tracking as needed. [Learn more about compliance requirements](https://help.webflow.com/hc/en-us/articles/34273101581715-Analyze-Optimize-compliance-with-privacy-laws).

## Consent management

A consent management solution lets visitors choose how their data is collected. Typically shown as a banner or menu, it allows users to opt in or out of tracking. Using a consent management solution helps you inform visitors and manage their preferences.

### Consent management apps in the Webflow Marketplace

Webflow offers third-party apps for consent management in the [Webflow Marketplace](https://webflow.com/apps/compliance). These apps help you set up and manage consent workflows without writing code. Additionally, Webflow provides detailed setup guides for the [DataGrail](https://help.webflow.com/hc/en-us/articles/34394688342035) and [Finsweet](https://help.webflow.com/hc/en-us/articles/34394790067859-Integrate-Finsweet-Components-Cookie-Consent-for-consent-management) apps.

### Consent Management using Webflow's APIs

Webflow's Browser APIs let you check a user's tracking preferences and manage consent directly. Use these APIs to build a custom consent management solution tailored to your site and user experience. This approach is ideal for:

* Site owners who need to manage consent themselves
* Developers integrating with existing Consent Management Platforms (CMPs)
* Teams requiring specific customization of the consent experience

## Consent management APIs

The following APIs are available in the Webflow Browser API:

* [Get consent status:](/browser/reference/get-user-tracking-choice) Returns the user's current consent state
* [Allow User Tracking:](/browser/reference/allow-user-tracking) Opts users into Webflow's tracking
* [Deny User Tracking:](/browser/reference/deny-user-tracking) Opts users out of Webflow's tracking

### Integrating with existing consent management platforms

If you already use a consent management platform like OneTrust or TrustArc, you can add [a custom code snippet](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags) using the consent management APIs in the header of your site to pass user consent choices to Webflow. The following examples show how to detect user consent choices in your consent management platform and update Webflow's tracking preferences in real time.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="General">
    To respect user consent, detect the visitor's choice in your consent management platform and update Webflow's tracking preferences with the appropriate API call. Most platforms provide a callback or event when consent changes—use this to trigger the `allowUserTracking` or `denyUserTracking` API calls.

    ```javascript
    <Script>
    wf.ready(() => {
       // First, detect the current state
       const isOptedOut = wf.getUserTrackingChoice() === 'deny';
       if (isOptedOut) {
          //
          // Your Consent Management Platform logic to detect an optIn signal goes here
          //
          // Then you call Webflow to let us know there's been an optIn
          wf.allowUserTracking();
       }
       else {
          //
          // Your Consent Management Platform logic to detect an optOut signal goes here
          //
          // Then you call Webflow to let us know there's been an optOut
          wf.denyUserTracking();
       }
    });
    </Script>
    ```
  </Tab>

  <Tab title="OneTrust">
    If you use OneTrust, the following code sample can help your team get started. It checks the OneTrust consent cookie and calls the Webflow Consent Management APIs accordingly.

    ```javascript
    <Script>
    wf.ready(() => {
    // Function to opt in or out based on consent preferences
    const handleWebflowAnalyticsConsent = () => {
       try {
          // Logic to check consent groups from the OneTrust cookie
          const otCookieKey = 'OptanonConsent=';
          const otCookie = document.cookie.split('; ').find(row => row.startsWith(otCookieKey));
          if (!otCookie) {
          throw new Error('OneTrust cookie not found.');
          }
          const otGroupsKey = 'groups=';
          const otGroups = decodeURIComponent(otCookie.split('&').find(row => row.startsWith(otGroupsKey)).split('=')[1]);
          // OneTrust groups: 1 = necessary, 2 = performance, 3 = functional, 4 = targeting
          const OT_FUNCTIONAL_CONSENT = '3:1'; // Ensure this matches your expected consent group
          // Check for functional cookies group
          const hasOptedIn = otGroups.indexOf(OT_FUNCTIONAL_CONSENT) !== -1;
          // Adjust Webflow Analytics opt-in/out based on consent
          if (hasOptedIn) {
          wf.allowUserTracking();
          } else {
          wf.denyUserTracking();
          }
       } catch (e) {
          console.error('Error handling OneTrust consent:', e);
       }
    };
    // Set up the OneTrust consent change listener to check when preferences change
    if (typeof OneTrust !== 'undefined' && OneTrust.OnConsentChanged) {
       OneTrust.OnConsentChanged(() => {
          handleWebflowAnalyticsConsent();
       });
    }
    // Initial check when the page loads
    handleWebflowAnalyticsConsent();
    });
    </Script>
    ```

    <Warning>
      This code sample is provided as-is and isn't supported by Webflow. Your team should customize it for your deployment of OneTrust, including which OneTrust group you check per your policy.
    </Warning>
  </Tab>

  <Tab title="TrustArc">
    If you use TrustArc, the following code sample can help your team get started. It checks the TrustArc consent preferences and calls the Webflow Consent Management APIs accordingly.

    ```javascript
    <Script>
    wf.ready(() => {
    try {
       // Logic to check consent preferences from TrustArc
       const ta_gdpr_prefs = JSON.parse(localStorage.getItem('truste.cookie.notice_gdpr_prefs')).value;
       // TrustArc levels: 0 = required, 1 = functional, 2 = advertising
       const TA_FUNCTIONAL = 1; // Ensure this matches your expected consent group
       // Check for functional cookies group
       const hasOptedIn = ta_gdpr_prefs.indexOf(TA_FUNCTIONAL) >= 0;
       // Adjust Webflow Analytics opt-in/out based on consent
       if (hasOptedIn) {
          wf.allowUserTracking();
       } else {
          wf.denyUserTracking();
       }
    } catch (e) {
       console.error('Error handling TrustArc consent:', e);
    }
    });
    </Script>
    ```

    <Warning>
      This code sample is provided as-is and isn't supported by Webflow. Your team should customize it for your deployment of TrustArc, including which TrustArc level you check per your policy.
    </Warning>
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

### Create your own consent management solution

If you don't use a consent management platform, you can build your own with Webflow's APIs. The following examples show how to add a cookie consent modal to your site and manage user consent.

1. **Add the modal in the Webflow Designer:**<br />
   This code will add a cookie consent modal to a page on your site.
   * Copy the "Designer API Example" code below
   * Open the [Designer API Playground](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62\&workspace=webflow-developers-b51a9d)
   * Paste the code into the Playground and run it to add the banner to your page.
   * Optional: To ensure the modal is displayed on every page, you can [convert it into a component](https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview) and add it to all pages on your site.

2. **Enable consent logic with custom code:** <br />
   This code will connect the modal buttons to Webflow's consent APIs, so clicking "Accept" or "Decline" updates the user's consent status. It also uses GSAP to animate the modal in and out.
   * Copy the "Custom Code Example" code below
   * In your Webflow project, go to your site settings
   * Paste the code into the Header section
   * [Enable GSAP](https://help.webflow.com/hc/en-us/articles/40538857574419-Getting-started-with-GSAP-in-Webflow) in your site settings
   * Publish your site and interact with the modal.

3. **Check consent status in your browser:**<br />
   You can see the current consent status using your browser's Developer Tools.
   * Open your website in a browser (such as Chrome).
   * Right-click anywhere on the page and select **Inspect** to open Developer Tools.
   * Click the **Console** tab at the top of the Developer Tools panel.
   * Paste and run the following command to display the consent status.

     ```javascript
     wf.getUserTrackingChoice();
     ```

<CodeBlocks>
  ```javascript title="Designer API Example" maxLines={15}
  // Webflow Designer API: Cookie Consent Banner Example
  // Paste and run this code in the Designer API Playground

  // 1. Create styles
  const popupStyle = await webflow.createStyle('popupWrapper');
  await popupStyle.setProperties({
      'position': 'fixed',
      'bottom': '2rem',
      'left': '0',
      'right': '0',
      'margin-left': 'auto',
      'margin-right': 'auto',
      'max-width': '420px',
      'z-index': '9999',
      'background-color': '#fff',
      'border-radius': '1rem',
      'box-shadow': '0 4px 24px rgba(0,0,0,0.12)',
      'padding-top': '1.5rem',
      'padding-bottom': '1.5rem',
      'padding-left': '1.5rem',
      'padding-right': '1.5rem',
      'display': 'flex',
      'flex-direction': 'column',
      'align-items': 'flex-start',
      'column-gap': '1rem'
    });

  const buttonStyle = await webflow.createStyle('consentButton');
  await buttonStyle.setProperties({
    'border-radius': '0.5rem',
    'padding-top': '0.5rem',
    'padding-bottom': '0.5rem',
    'padding-left': '1.25rem',
    'padding-right': '1.25rem',
    'font-weight': '500',
    'cursor': 'pointer',
    'border-width': '0px',
    'outline-style': 'none',
    'transition-property': 'background-color,color',
    'transition-duration': '0.2s',
    'transition-timing-function': 'ease-in-out'
  });

  const acceptStyle = await webflow.createStyle('acceptButton');
  await acceptStyle.setProperties({
    'background-color': '#2563eb',
    'color': '#fff'
  });

  // Accept button hover
  await acceptStyle.setProperties({
    'background-color': '#1749b1',
    'color': '#fff'
  }, { pseudo: 'hover' });

  // Accept button pressed/active
  await acceptStyle.setProperties({
    'background-color': '#11306e',
    'color': '#fff'
  }, { pseudo: 'active' });

  const declineStyle = await webflow.createStyle('declineButton');
  await declineStyle.setProperties({
    'background-color': '#f3f4f6',
    'color': '#222'
  });

  // Decline button hover
  await declineStyle.setProperties({
    'background-color': '#e5e7eb',
    'color': '#111827'
  }, { pseudo: 'hover' });

  // Decline button pressed/active
  await declineStyle.setProperties({
    'background-color': '#d1d5db',
    'color': '#111827'
  }, { pseudo: 'active' });

  const buttonRowStyle = await webflow.createStyle('buttonRow');
  await buttonRowStyle.setProperties({
    'display': 'flex',
    'column-gap': '0.75rem',
    'margin-top': '0.5rem'
  });

  const contentDivStyle = await webflow.createStyle('contentDiv');
  await contentDivStyle.setProperties({
    'display': 'flex',
    'flex-direction': 'column',
    'column-gap': '0.5rem'
  });

  const titleStyle = await webflow.createStyle('bannerTitle');
  await titleStyle.setProperties({
    'font-weight': '600',
    'font-size': '1.1rem'
  });

  const messageStyle = await webflow.createStyle('bannerMessage');
  await messageStyle.setProperties({
    'font-size': '0.98rem',
    'color': '#444'
  });

  const linkStyle = await webflow.createStyle('learnMoreLink');
  await linkStyle.setProperties({
    'color': '#2563eb',
    'text-decoration': 'underline'
  });

  // 2. Get the parent element (or use body)
  const parent = await webflow.getSelectedElement();

  // 3. Build the popup wrapper
  const popup = webflow.elementBuilder(webflow.elementPresets.DOM);
  popup.setTag('div');
  popup.setAttribute('id', 'consentPopup');
  popup.setStyles([popupStyle]);

  // 4. Banner content
  const contentDiv = popup.append(webflow.elementPresets.DOM);
  contentDiv.setTag('div');
  contentDiv.setStyles([contentDivStyle]);

  const title = contentDiv.append(webflow.elementPresets.DOM);
  title.setTag('span');
  title.setTextContent('We use cookies');
  title.setStyles([titleStyle]);

  const message = contentDiv.append(webflow.elementPresets.DOM);
  message.setTag('span');
  message.setStyles([messageStyle]);
  message.setTextContent('This site uses cookies to analyze traffic and enhance your experience. ');

  const learnMore = message.append(webflow.elementPresets.DOM);
  learnMore.setTag('a');
  learnMore.setAttribute('href', '/privacy-policy');
  learnMore.setAttribute('target', '_blank');
  learnMore.setAttribute('rel', 'noopener');
  learnMore.setStyles([linkStyle]);
  learnMore.setTextContent('Learn more');

  // 5. Button row
  const buttonRow = popup.append(webflow.elementPresets.DOM);
  buttonRow.setTag('div');
  buttonRow.setStyles([buttonRowStyle]);

  // Accept button
  const acceptBtn = buttonRow.append(webflow.elementPresets.DOM);
  acceptBtn.setTag('button');
  acceptBtn.setAttribute('id', 'optIn');
  acceptBtn.setAttribute('class', 'consentButton');
  acceptBtn.setStyles([buttonStyle, acceptStyle]);
  acceptBtn.setTextContent('Accept');

  // Decline button
  const declineBtn = buttonRow.append(webflow.elementPresets.DOM);
  declineBtn.setTag('button');
  declineBtn.setAttribute('id', 'optOut');
  declineBtn.setAttribute('class', 'consentButton');
  declineBtn.setStyles([buttonStyle, declineStyle]);
  declineBtn.setTextContent('Decline');

  // 6. Add the popup to the page
  if (parent?.children) {
    await parent.append(popup);
    console.log('Cookie consent banner created!');
  } 
  ```

  ```javascript title="Custom Code Example" maxLines={15}
  <Script>
  // Cookie Consent Logic with GSAP and Webflow Browser APIs
  // Paste as Custom Code in the <head> tag of your page or site

  // Wait for Webflow Browser APIs to be ready
  wf.ready(() => {
  console.log("Hello World")
    const popup = document.getElementById('consentPopup');
    const acceptBtn = document.getElementById('optIn');
    const declineBtn = document.getElementById('optOut');

    // Helper: Animate in
    function showBanner() {
      gsap.set(popup, { y: 40, opacity: 0, display: 'flex' });
      gsap.to(popup, { y: 0, opacity: 1, duration: 0.6, ease: 'power3.out' });
    }

    // Helper: Animate out
    function hideBanner() {
      gsap.to(popup, {
        y: 40,
        opacity: 0,
        duration: 0.5,
        ease: 'power3.in',
        onComplete: () => {
          popup.style.display = 'none';
        }
      });
    }

    // Check consent state
    const choice = wf.getUserTrackingChoice();
    if (choice === 'allow' || choice === 'deny') {
      popup.style.display = 'none';
    } else {
      showBanner();
    }

    // Accept: allow tracking, animate out
    acceptBtn.addEventListener('click', () => {
      wf.allowUserTracking({ activate: true });
      hideBanner();
    });

    // Decline: deny tracking, animate out
    declineBtn.addEventListener('click', () => {
      wf.denyUserTracking();
      hideBanner();
    });
  }); 
  </Script>
  ```
</CodeBlocks>

<Warning>
  This example is intended as a starting point and may not fully comply with all privacy laws. Customize and validate your consent management implementation to ensure it aligns with your site's privacy policy and the legal requirements applicable to your visitors.
</Warning>

---

# Get user tracking choice

> Retrieve the user's tracking preference for Webflow Analyze and Optimize.

## `wf.getUserTrackingChoice()`

Retrieves the user's current tracking preference. Returns one of three possible states: `allow`, `deny`, or `undefined`.

### Syntax

```typescript
wf.getUserTrackingChoice(): 'allow' | 'deny' | 
'none'
```

### Returns

The user's current tracking choice:

* `'allow'` User has opted in to tracking.
* `'deny'` User has opted out of tracking.
* `'none'` User hasn't made a choice.

### Example

```typescript
// Ensure Browser APIs are ready before calling
wf.ready(() => {
  // Retrieve the user's tracking choice
  const choice = wf.getUserTrackingChoice();
  console.log(choice); // 'allow', 'deny', or undefined
});
```

---

# Allow user tracking

> Enable user tracking for Webflow Analyze and Optimize.

## `wf.allowUserTracking(options)`

Enables user tracking for the current user.

### Syntax

```typescript
wf.allowUserTracking(options?: { reload?: boolean; activate?: boolean }): void
```

### Parameters

* **options**: *object* - Controls activation behavior. All properties are optional.
  * **reload**: *boolean* - Reloads the page after activating tracking. *Default: false*
  * **activate**: *boolean* - Activates tracking immediately. *Default: true*

### Returns

This method doesn't return a value to the caller.

### Example

```typescript
// Ensure Browser APIs are ready before calling
wf.ready(() => {
  // Enable user tracking and activate immediately
  wf.allowUserTracking({ activate: true });
});
```

---

# Deny user tracking

> Disable user tracking for Webflow Analyze and Optimize.

## `wf.denyUserTracking(options)`

Disables user tracking for the current user.

### Syntax

```typescript
wf.denyUserTracking(options?: { reload?: boolean }): void
```

### Parameters

* **options?**: *object* - Controls deactivation behavior. Optional.
  * **reload?**: *boolean* - Reloads the page after disabling tracking. *Default: false*

### Returns

This method doesn't return a value to the caller.

### Example

```typescript
// Ensure Browser APIs are ready before calling
wf.ready(() => {
  // Disable user tracking and reload the page
  wf.denyUserTracking({ reload: true });
});
```

---

# Optimize methods in the Browser API

> Introduction to the Optimize methods in the Browser API

{/* Optimize Hero Image */}

<div class="features-hero_bottom-img">
  <img src="https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707da8cde91dd9813b4aaba_hero.webp" loading="lazy" sizes="(max-width: 479px) 85vw, 90vw" srcset="https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707da8cde91dd9813b4aaba_hero-p-500.webp 500w, https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707da8cde91dd9813b4aaba_hero-p-800.webp 800w, https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707da8cde91dd9813b4aaba_hero-p-1080.webp 1080w, https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707da8cde91dd9813b4aaba_hero-p-1600.webp 1600w, https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707da8cde91dd9813b4aaba_hero-p-2000.webp 2000w, https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707da8cde91dd9813b4aaba_hero-p-2600.webp 2600w, https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707da8cde91dd9813b4aaba_hero-p-3200.webp 3200w, https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707da8cde91dd9813b4aaba_hero.webp 4320w" alt="" class="u-img-cover cc-top" />

  <img src="https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707dbd2416640c50f680a46_successrate.webp" loading="lazy" sizes="(max-width: 479px) 25vw, 27vw" srcset="https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707dbd2416640c50f680a46_successrate-p-500.webp 500w, https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/6707dbd2416640c50f680a46_successrate.webp 782w" alt="" class="optimize_conversions u-mega-shadow-light-bg" />

  <img src="https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/672296f31b581bfa0c5cc890_performancechart.webp" loading="lazy" sizes="(max-width: 479px) 34vw, 36vw" srcset="https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/672296f31b581bfa0c5cc890_performancechart-p-500.webp 500w, https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/672296f31b581bfa0c5cc890_performancechart-p-800.webp 800w, https://cdn.prod.website-files.com/650311fc2ebc7fe34237a592/672296f31b581bfa0c5cc890_performancechart.webp 1182w" alt="" class="optimize_performance u-mega-shadow-light-bg" />
</div>

#

[Webflow Optimize](https://webflow.com/optimize) enables you to customize the version of a page shown to visitors based on their characteristics. Think of it as a supercharged A/B testing tool that enables you to test numerous variations of your site to dynamically personalize a visitor's experience based on their attributes.

## Optimize methods in the Browser API

The Browser API includes Optimize-specific methods that enable you to extend this functionality to incorporate other tools you may use to track audiences and goals. With these Optimize methods, you can:

<CardGroup>
  <Card
    title="Track variations"
    iconPosition="left"
    href="/browser/optimize/variations"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Test.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Test.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    Send variations from Optimize experiments to third-party tools
  </Card>

  <Card
    title="Personalize experiences with custom attributes"
    iconPosition="left"
    href="/browser/optimize/attributes"
    icon={  
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/OptimizeUser.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/OptimizeUser.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    Set custom attributes to personalize experiences based on user behavior and data
  </Card>
</CardGroup>

## Get started with the Optimize in the Browser API

<Card
  title="Get started with Optimize"
  href="/browser/optimize/quickstart"
  iconPosition="left"
  icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CirclePlay.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CirclePlay.svg" alt="" className="block dark:hidden" />
            </>
        }
>
  Use the Quickstart guide to learn how to use the Optimize methods to track variations and set custom attributes.

  <br />

  <a href="/browser/optimize/quickstart">
    <button class="button cc-primary">Get started</button>
  </a>
</Card>

## FAQs

{/* <!-- vale off --> */}

<AccordionGroup>
  <Accordion title="What are the Optimize methods?">
    {/* <!-- vale on --> */}

    The Optimize methods are JavaScript functions available through the Webflow Browser API's `wf` namespace that enable you to track optimization variations and manage custom user attributes.

    You can use methods like [`wf.onVariationRecorded()`](/browser/optimize/onVariationRecorded) and [`wf.setAttributes()`](/browser/optimize/setAttributes) to send Webflow Optimize data to third-party analytics and marketing tools, helping you better understand user behavior and personalize experiences.

    {/* <!-- vale off --> */}
  </Accordion>

  <Accordion title="Is the Browser API already installed on my site?">
    {/* <!-- vale on --> */}

    The Webflow Browser APIs and Optimize methods are automatically available on all Webflow Optimize enabled sites with no manual installation required. See the [Quickstart guide](/browser/optimize/quickstart) for more information.

    {/* <!-- vale off --> */}
  </Accordion>

  <Accordion title="How can I use the Optimize methods?">
    {/* <!-- vale on --> */}

    The Optimize methods are available through the global `wf` object in your browser. You can access them through custom code in your site's pages or through services like Google Tag Manager. The APIs can be called from any JavaScript code running on your site. See the [Quickstart guide](/browser/optimize/quickstart) for more information.

    {/* <!-- vale off --> */}
  </Accordion>
</AccordionGroup>

{/* <!-- vale on --> */}

## Looking for more information?

Visit the [Webflow Help Center](https://help.webflow.com/hc/en-us/articles/33609390628243-Intro-to-Webflow-Optimize) to learn more about Optimize features, including experiments, personalization, and analytics. The Help Center provides detailed guides on:

* Setting up and configuring Optimize experiments
* Creating and managing audience segments
* Analyzing test results and insights
* Best practices for running effective experiments
* Enterprise-specific features and capabilities

You can also explore [Webflow University](https://university.webflow.com/videos/start-optimizing-your-site-with-webflow-optimize) for additional tutorials and resources on making the most of Webflow Optimize.

---

# Quickstart

> Quickstart: Making requests to the Webflow Optimize via the Browser API

This guide will help you get started making requests to Webflow Optimize through the Browser API. It will walk you through the process of creating a script and adding Optimize methods as callbacks.

<Note title="No installation required">
  The Browser API is automatically enabled on your site with no manual installation required. The Optimize methods are available through the global 

  `wf`

   object in your browser.
</Note>

## Prerequisites

* A Webflow site with [Optimize enabled](https://university.webflow.com/videos/start-optimizing-your-site-with-webflow-optimize)
* Ability to add [custom JavaScript](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags) to your site or use a tool like [Google Tag Manager](https://support.google.com/tagmanager/answer/6107167?hl=en)

## Getting started with the Optimize Browser APIs

There are two main approaches to implementing your Optimize code:

1. **Add code directly to your site**: Place your script in the `<head>` section of your site using Webflow's [Custom Code](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags) feature.
2. **Use Google Tag Manager**: Add the API call when configuring a custom tag

<Steps>
  ### Call `wf.ready()`

  Since the Webflow Browser API loads asynchronously, you need to ensure your code runs at the right time by using `wf.ready()`.

  ```javascript
  // Call wf.ready() to ensure the Browser API is available
  wf.ready(function() {
      // Your code here
  });
  ```

  Add this call to the `<head>` section of your site or page using Webflow's [Custom Code](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags) feature. Or, if using a tool like Google Tag Manager, add the API call when configuring the tag. Adding the call early ensures you won't miss any events on the page.

  {/* <!-- vale off --> */}

  <Accordion title="When should you call wf.ready() ?">
    {/* <!-- vale on --> */}

    To make sure your callback fires, call `wf.ready()` as early as possible to guarantee it's registered before Webflow Optimize returns any time sensitive events. Preferably, before the DOM starts rendering. This prevents the callback from missing any events. To illustrate:

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/a76a5dbf7d3368d177cfaa848d9753c3eabca61b88a0796be9bffdc7249bbf7d/products/browser/pages/Optimize/variations/assets/optimize-diagram.png" alt="Timing your script to run after a variation is recorded" />
    </Frame>

    We recommend adding the API call in before the closing `</head>` tag on your site or page using Webflow's [Custom Code](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags) feature. Or, if using a tool like Google Tag Manager, add the API call when configuring the tag.

    {/* <!-- vale off --> */}
  </Accordion>

  {/* <!-- vale on --> */}

  ### Add callbacks to `wf.ready()`

  Now you can start adding callbacks to your script to [retrieve variations](/browser/optimize/variations) and [set custom attributes.](/browser/optimize/attributes)

  <Tabs>
    <Tab title="Multiple callbacks">
      You can add multiple callbacks in `wf.ready()` to handle different Optimize functionality in a single script. This enables you to efficiently manage multiple operations like retrieving variations and setting attributes in one place. Each callback will execute once the Webflow Browser API is ready.

      **Example:**

      ```javascript
      // Call wf.ready() to ensure the Browser API is available
      wf.ready(function() {
          // Retrieve variations
          wf.onVariationRecorded(function(result){
              // Do something with the result
              console.log(result);
          });

          // Set custom attributes
          wf.setAttributes("user",{
              userSegment: 'enterprise',
              userRole: 'technicalBuyer'
          });
      });
      ```
    </Tab>

    <Tab title="Multiple API calls per page">
      You can include multiple `wf.ready()` API calls on the same page to organize your code and handle different Optimize functionality separately. Each callback will execute in the order they appear, allowing you to intersperse other page code between API calls. This gives you flexibility in structuring your code while maintaining proper execution order.

      **Example:**

      ```javascript
      // Call wf.ready() to ensure the Browser API is available
      wf.ready(function() {
          wf.onVariationRecorded(function(result) {
              // do something with result
              console.log(result);
      }, function(error) {
          // do something with error
          console.error(error);
      });
      });

      // Other page code
      wf.ready(function() {
          wf.setAttributes(scope, attributes);
      });
      ```
    </Tab>
  </Tabs>
</Steps>

## Next steps

Now that you're familiar with making requests to the Browser API, you can learn more about Optimize methods to add to your callbacks:

<CardGroup>
  <Card
    title="Track variations"
    iconPosition="left"
    href="/browser/optimize/variations"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Test.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Test.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    Send variations from Optimize experiments to third-party tools
  </Card>

  <Card
    title="Personalize experiences with custom attributes"
    iconPosition="left"
    href="/browser/optimize/attributes"
    icon={  
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/OptimizeUser.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/OptimizeUser.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    Set custom attributes to personalize experiences based on user behavior and data
  </Card>
</CardGroup>

---

# Variations

> Learn about applying and recording variations to send to third-party tracking tools.

Variations are alternate versions of a webpage shown to some visitors. By showing different variations to different visitors, you can test which version resonates best and drives more engagement. Variations are always part of either a test or personalization optimization.

For example, to test three new homepage headlines, you'd create an optimization for the homepage with three variations—one for each headline. To learn more about variations in Webflow Optimize, visit [the support documentation](https://help.webflow.com/hc/en-us/articles/33776880496275-Create-or-edit-optimization-variations).

## API callbacks

After each variation is recorded, the applied variation is passed to callback functions registered via [`onVariationRecorded()`](/browser/optimize/onVariationRecorded). Note that each time a variation is recorded, the callback fires (as opposed to just once per page).

Use the [`onVariationRecorded()`](/browser/optimize/onVariationRecorded) method to capture variation data and send it to custom in-house analytics tools.

## Looking for more information?

Visit the [Webflow Help Center](https://help.webflow.com/hc/en-us/articles/33776880496275-Create-or-edit-optimization-variations) to learn more about variations in Webflow Optimize, including:

* Creating and editing variations
* Setting variation strengths and traffic allocation
* Previewing variations before publishing
* Best practices for variation design
* Troubleshooting common variation issues

---

# Recording Variations

> Get recorded variations and send them to an external service

## `wf.onVariationRecorded()`

Registers a callback function that executes whenever a variation runs successfully on your page. This is useful for integrating Webflow Optimize's experiment data with external analytics services.

{/* <!-- vale off --> */}

<Note>
  Before using this method, make sure you've [created and published at least one variation in Webflow.](https://help.webflow.com/hc/en-us/articles/33776880496275-Create-or-edit-optimization-variations)
</Note>

{/* <!-- vale on --> */}

### Syntax

```javascript
wf.onVariationRecorded(function(result))
```

### Parameters

* **`function(result)`**: *function* - A callback function that receives a `result` object containing information about the variation.
  {/* <!-- vale off --> */}
  <Warning>
    The callback function will only trigger for variations that run after it has been registered on the page.
  </Warning>
  {/* <!-- vale on --> */}

### Example implementation

```javascript
// Call wf.ready() to ensure the Browser API is available
wf.ready(function(){
    // Register the callback function inside wf.ready()
    wf.onVariationRecorded(function(result){
      console.log(result) // Log the result to the console
    })
})
```

### Returns

A success callback which includes the results of the successful variation.

**Object properties**

| Property         | Type                       | Description                                                                                                              |
| ---------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| `experienceId`   | `string`                   | Unique identifier for the experience/experiment                                                                          |
| `experienceName` | `string`                   | Display name of the experience/experiment                                                                                |
| `experienceType` | `'ab' \| 'rbp' \| 'cc'`    | Type of experience: A/B Test (`ab`), Rules-Based Personalization (`rbp`), or Content Configuration (`cc`)                |
| `variationId`    | `string`                   | Unique identifier for the specific variation                                                                             |
| `variationName`  | `string`                   | Display name of the variation                                                                                            |
| `ccStatus`       | `'holdout' \| 'optimized'` | For Content Configuration experiences only: indicates if the user is in the holdout group or receiving optimized content |

#

### Example

```json
{
    "experienceId": "417228929",
    "experienceName": "Hero Optimization",
    "experienceType": "rbp",
    "variationId": "617106113",
    "variationName": "Desktop",
    "ccStatus": "optimized"
}
```

## FAQs

{/* <!-- vale off --> */}

<AccordionGroup>
  <Accordion title="When should you call `onVariationRecorded()`?">
    {/* <!-- vale on --> */}

    To make sure your callback fires, call `onVariationRecorded()` as early as possible to guarantee it's registered before Webflow returns any recorded variations. Preferably, before the DOM starts rendering. This prevents the callback from missing any variations. To illustrate:

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/a76a5dbf7d3368d177cfaa848d9753c3eabca61b88a0796be9bffdc7249bbf7d/products/browser/pages/Optimize/variations/assets/optimize-diagram.png" alt="Timing your script to run after a variation is recorded" />
    </Frame>

    We recommend adding the API call in before the closing `</head>` tag of your site or page using Webflow's [Custom Code](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags) feature. Or, if using a tool like Google Tag Manager, add the API call when configuring the tag.

    {/* <!-- vale off --> */}
  </Accordion>

  <Accordion title="When is a variation considered recorded?">
    {/* <!-- vale on --> */}

    A variation is considered recorded when the page loads and the variation has been displayed to the user. You can review the full logic that leads up to a recorded variation [in this help article](https://help.webflow.com/hc/en-us/articles/33776880496275-Create-or-edit-variations). A simplified version of the logic is as follows:

    * A variation is selected by Webflow Optimize
    * That variation is applied to the page
    * Events, like the selected variation and integrated analytics, are sent asynchronously
    * Webflow Optimize records the variation

    {/* <!-- vale off --> */}
  </Accordion>

  <Accordion title="How often do callbacks fire?">
    {/* <!-- vale on --> */}

    Each time a variation is recorded, the callback fires. You may have multiple variations on a page, so the callback will fire once for each variation.

    {/* <!-- vale off --> */}
  </Accordion>
</AccordionGroup>

{/* <!-- vale on --> */}

---

# Custom attributes

> An overview of custom attributes in Webflow Optimize

Attributes are different characteristics associated with your visitors (for example, demographics, behavior, etc.).

If you want to target anything that isn't available by default, you can use custom attributes to store and retrieve data about your visitors. Once a custom attribute is defined and set on a page visit, you can leverage it to [define a rules-based audience](https://help.webflow.com/hc/en-us/articles/34167397653523-Create-or-edit-a-rules-based-audience) or [filter optimization results by the attribute](https://help.webflow.com/hc/en-us/articles/34167118964883-Review-your-optimization-results).

## How custom attributes work

Custom attributes are first defined in Webflow Optimize, and then set for a user or pageview by using the [`wf.setAttributes()`](/browser/optimize/setAttributes) method of the Browser API. By setting an attribute, you're sending data to Webflow Optimize that can be used to [create a rules-based audience](https://help.webflow.com/hc/en-us/articles/34167397653523-Create-or-edit-a-rules-based-audience) or [filter optimization results](https://help.webflow.com/hc/en-us/articles/34167118964883-Review-your-optimization-results#01J9WN67STDYG61SRKX2HEAZZE).

## Configuring custom attributes

<Steps>
  ### Create a custom attribute in Webflow Optimize

  If you have an enterprise site, navigate to the **Insights** tab on your site and click **Integrations**. Find the **Custom JavaScript attributes** section and create a new entry.

  <Frame>
    ![Custom JavaScript attributes](https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/b87e2da2c34a5d54d8dcb5f2898143a627b333aa19f3c4cc08cffaa0e26c53bf/products/browser/pages/Optimize/attributes/assets/custom-attributes.png)
  </Frame>

  <Note title="Enterprise sites only">
    This method is only available on enterprise sites.
  </Note>

  ### Set a custom attribute using the Browser API

  Once configured, you can set custom attributes when a user visits your site by using [`wf.setAttributes()`](/browser/optimize/setAttributes). See the example below, and the [documentation for more details.](/browser/optimize/setAttributes)

  #### Scopes

  Custom attributes can be set for a specific scope, which determines the lifetime of the attribute.

  * **Pageview**: The attribute is available for the duration of a pageview.
  * **User**: The attribute is available for the duration of a user's session. A session begins when the visitor arrives on your site and ends after 30 minutes of sustained inactivity (like when the visitor stops engaging with your website).

  **Example:**

  ```javascript
  // Call wf.ready() to ensure the Browser API is available
  wf.ready(function() {
      // Set custom attributes
      wf.setAttributes("user", {
          customerSegment: 'enterprise',
          userRole: 'technicalBuyer'
      });
  });
  ```
</Steps>

## Using custom attributes in Optimize

Once you've created and set a custom attribute, you can use it to create a rules-based audience or filter optimization results.

<CardGroup>
  <Card
    title="Create a rules-based audience"
    href="https://help.webflow.com/hc/en-us/articles/34167397653523-Create-or-edit-a-rules-based-audience"
    icon={
    <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/TeamLarge.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/TeamLarge.svg" alt="" className="block dark:hidden" />
    </>
}
  >
    Create a rules-based audience to target visitors based on their custom attributes.
  </Card>

  <Card
    title="Filter optimization results"
    href="https://help.webflow.com/hc/en-us/articles/34167118964883-Review-your-optimization-results#01J9WN67STDYG61SRKX2HEAZZE"
    icon={
    <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Test.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Test.svg" alt="" className="block dark:hidden" />
    </>
}
  >
    Filter optimization results by custom attributes.
  </Card>
</CardGroup>

## Looking for more information?

Visit the [Webflow Help Center](https://help.webflow.com/hc/en-us/articles/34167397653523-Create-or-edit-a-rules-based-audience) to learn more about custom attributes and audiences in Webflow Optimize, including:

* Creating and managing custom attributes
* Building rules-based audiences
* Targeting visitors with custom attributes
* Best practices for audience segmentation
* Enterprise-specific features and capabilities

You can also explore [Webflow University](https://university.webflow.com/videos/start-optimizing-your-site-with-webflow-optimize) for additional tutorials and resources on making the most of Webflow Optimize's personalization features.

---

# Get Attributes

> Get attributes for the current user or page view

## `wf.getAttributes(scope, names)`

Retrieve a subset of attributes that have been previously stored using [`setAttributes()`](/browser/optimize/setAttributes). Only attributes that match the names parameter will be returned.

#

### Syntax

```typescript
wf.getAttributes(scope: 'user' | 'pageview', names: string[])
```

### Parameters

* **scope**: `'user'` | `'pageview'` - The scope of the attributes to retrieve.
* **names**: `string[]` - An array of attribute names to retrieve.

## Example implementation

```javascript
// Call the wf.ready() function the Browser API is available
wf.ready(function() {
  // Set attributes for the current user
  wf.setAttributes('user', {
    userSegment: 'enterprise'
  })
})

// Retrieve the attributes
const attributes = wf.getAttributes('user', ['userSegment'])
  console.log(attributes)
```

### Returns

An object containing the attributes that match the names parameter.

#

### Example

```json
{
  "userSegment": "enterprise"
}
```

---

# Get all attributes

> Get all attributes for the current user or page view

## `wf.getAllAttributes()`

Retrieve all attributes that have been previously stored using [`setAttributes()`](/browser/optimize/setAttributes).

#

### Syntax

```typescript
wf.getAllAttributes(scope: 'user' | 'pageview')
```

### Parameters

* **scope**: `'user'` | `'pageview'` - The scope of the attributes to retrieve.

## Example implementation

```javascript
// Call the wf.ready() function the Browser API is available
wf.ready(function() {
  // Set attributes for the current user
  wf.setAttributes('user', {
    userSegment: 'enterprise',
    userRole: 'technicalBuyer'
  })
})

// Retrieve the attributes
const attributes = wf.getAllAttributes('user')
  console.log(attributes)
```

### Returns

An object containing all attributes set for the current scope.

#

### Example

```json
{
  "userSegment": "enterprise",
  "userRole": "technicalBuyer"
}
```

---

# Set attributes

> Set attributes for the current user or page view

## `wf.setAttributes(scope, attributes)`

Set custom attributes for the current user or page view.

<Note title="Create a custom attribute in Webflow Optimize">
  Before setting a custom attribute and sending it to Webflow Optimize, you need to create the attribute in the **Insights > Integrations > Custom JavaScript attributes** section of your site. See [Creating custom attributes in Webflow Optimize](/browser/optimize/attributes#configuring-custom-attributes) for more information.
</Note>

### Syntax

```typescript
wf.setAttributes(scope: 'user' | 'pageview', attributes: {[attributeName: string]: attributeValue: string})
```

### Parameters

* **scope**: `'user'` | `'pageview'` - The scope of the attributes. You can choose to set attributes for the current user or the current page view.
* **attributes**: `{[attributeName: string]: attributeValue: string}` - An object containing key-value pairs of attributes to set. The attribute name must be less than 40 characters long and may not contain a “=” character

### Example implementation

```javascript
// Call the wf.ready() function to ensure the script is loaded before setting attributes
wf.ready(function() {
  // Set attributes for the current user
  wf.setAttributes('user', {
    userSegment: 'enterprise'
  })
})
```

### Returns

This method doesn't return a value to the client. Instead, it sends the attributes to Webflow Optimize, which records in the user or page view data in the dashboard. See more on [using custom attributes](/browser/optimize/attributes#targeting-visitors-with-custom-attributes) in the Optimize documentation.

### FAQs

{/* <!-- vale off --> */}

<AccordionGroup>
  <Accordion title="Can I use boolean and number values for attribute values?">
    {/* <!-- vale on --> */}

    `wf.setAttributes()` attempts to convert values from types like boolean and number into strings for convenience. Don't rely on this conversion and always pass in string values for attributes.

    {/* <!-- vale off --> */}
  </Accordion>

  <Accordion title="Why am I not seeing my attributes in my audience data?">
    {/* <!-- vale on --> */}

    Be sure to create the attribute in the **Insights > Integrations > Custom JavaScript attributes** section of your site before sending custom attributes to Webflow Optimize. See [Creating custom attributes in Webflow Optimize](/browser/optimize/attributes#creating-custom-attributes-in-webflow-optimize) for more information.

    <Note title="Enterprise sites only">
      This method is only available on enterprise sites.
    </Note>

    {/* <!-- vale off --> */}
  </Accordion>
</AccordionGroup>

{/* <!-- vale on --> */}

---

# Delete attributes

> Delete custom attributes for the current user or page view

## `wf.deleteAttributes(scope, names)`

Delete specified custom attributes for the current user or page view. This method removes previously set attributes from storage. If you attempt to delete an attribute that doesn't exist, the operation will be ignored and no error will be thrown.

### Syntax

```typescript
wf.deleteAttributes(scope: 'user' | 'pageview', names: string[])
```

### Parameters

* **scope**: `'user'` | `'pageview'` - The scope of the attributes. You can choose to set attributes for the current user or the current page view.
* **names**: `string[]` - An array of attribute names to delete.

### Example implementation

```javascript
// Call the wf.ready() function the Browser API is available
wf.ready(function() {
  // Set attributes for the current user
  wf.deleteAttributes('user', ['userSegment'])
})
```

### Returns

This method doesn't return a value. It only deletes the specified attributes from storage. To see updated attributes, use [`wf.getAttributes()`](/browser/optimize/getAttributes).

---

# Delete all attributes

> Delete all custom attributes for the current user or page view

## `wf.deleteAllAttributes(scope)`

Delete all custom attributes for the current user or page view. This method removes previously set attributes from storage.

### Syntax

```typescript
wf.deleteAllAttributes(scope: 'user' | 'pageview')
```

### Parameters

* **scope**: `'user'` | `'pageview'` - The scope of the attributes. You can choose to set attributes for the current user or the current page view.

### Example implementation

```javascript
// Call the wf.ready() function the Browser API is available
wf.ready(function() {
  // Set attributes for the current user
  wf.deleteAllAttributes('user')
})
```

### Returns

This method doesn't return a value. It only deletes the specified attributes from storage. To see updated attributes, use [`wf.getAttributes()`](/browser/optimize/getAttributes).

---

# Code Components

> Import reusable React components for use in Webflow via DevLink.

DevLink lets you import code components directly to Webflow, bridging the gap between code and visual development. Build advanced, interactive components in your codebase, and deploy them to Webflow. In Webflow, use code components directly on the canvas with props, slots, and variants for flexible composition.

***

### Get started

<CardGroup columns={2}>
  <Card
    title="Quick start"
    href="/code-components/introduction/quick-start"
    iconPosition="left"
    iconSize="12"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/PublishMarketing.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/PublishMarketing.svg" alt="" className="light-icon" />
            </>
        }
  >
    Create a code component and share an example library to your workspace
  </Card>

  <Card
    title="Configure your codebase"
    href="/code-components/installation"
    iconPosition="left"
    iconSize="12"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/ComponentsCode.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/ComponentsCode.svg" alt="" className="light-icon" />
            </>
        }
  >
    Update your existing library to work with DevLink and code components
  </Card>
</CardGroup>

***

## Key capabilities

With code components, you get full control over your React development:

* **Develop in React** <br />
  Use hooks, state, effects, and context to build advanced components
* **Visual composition** <br />
  Expose props and slots for designers to design visually in Webflow
* **Shared library distribution** <br />
  Share, update, and install code components on any site in your Workspace with Libraries

[Learn more about configuring your components for Webflow →](/code-components/define-code-component)

***

## How code components work in Webflow

{/* TODO: Add a diagram showing the flow from codebase → CLI → Webflow → Canvas. */}

{/* <!-- vale off --> */}

<Steps>
  <Step title="Build components in your codebase">
    Create React components with hooks, state management, and API integrations. Reference Webflow variables to allow components to adapt to an individual site's colors, typography, sizes, and spacing.
  </Step>

  <Step title="Declare a Webflow component in your codebase">
    Use `declareComponent` to wrap an existing React component, then define [prop types](/code-components/reference/prop-types) to make them available in the Webflow Designer.
  </Step>

  <Step title="Import components to Webflow">
    Use [DevLink](/devlink) to bundle and publish your components as a shared library for users to install across a workspace.
  </Step>

  <Step title="Install components to a site">
    Install code components as a [shared library](https://help.webflow.com/hc/en-us/articles/33961343551763-Libraries) on any Webflow site in your workspace.
  </Step>

  <Step title="Design visually">
    Drag and drop components onto the canvas, configure props and slots in the right panel, and customize styling through each site's variables to integrate with a specific design system.
  </Step>
</Steps>

{/* <!-- vale on --> */}

---

# How to import code components into Webflow

> Import React components into Webflow with DevLink

In this quickstart guide, we’ll discuss how to import React components from an external codebase into Webflow using DevLink.

**What you'll accomplish:**

* Set up your development environment
* Declare a Webflow code component with props
* Import your component library to Webflow
* Use your component in a Webflow project

## Before you start

Before running this quickstart, make sure you have:

* A Webflow account with either:
  * a Workspace on a Freelancer, Core, Growth, Agency, or Enterprise plan
  * a Webflow site with a CMS, Business, or Enterprise plan
* A Webflow site where you can test components
* Node.js 20+ and npm 10+ installed
* Basic familiarity with React components and TypeScript

## 1. Setup your development environment

Set up your local development environment to create and share React components.

<Steps>
  <Step title="Setup your React project">
    DevLink is compatible with a wide variety of local setups. To get started, create a new React project.

    **If you're working with an existing repository, you can skip this step.**

    ```bash
    npx create-react-app code-components
    cd code-components
    ```
  </Step>

  <Step title="Install the Webflow CLI">
    Install the Webflow CLI and the necessary dependencies to create a code component library.

    ```bash
    npm i --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react

    ```
  </Step>

  <Step title="Create a Webflow configuration file">
    Create a `webflow.json` file in the root of your repository. This file will define the configuration for your code component library.

    ```json title={"webflow.json"}
    {
        "library": {
            "name": "<Your Library Name>",
            "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"]
        }
    }

    ```

    Give your library a name and specify the path to your code component files.
  </Step>

  <Step title="Add an example component to your library">
    In your editor, navigate to your src or components directory. Create a new file called `Badge.tsx`, and paste the following code. In the next step, you'll create a code component definition file to map this component to a Webflow component.

    ```tsx title={"Badge.tsx"}
    import * as React from "react";

    interface BadgeProps {
      text: string;
      variant: 'Light' | 'Dark';
    }

    export const Badge = ({ text, variant }: BadgeProps) => (
      <span
        style={{
          backgroundColor: variant === 'Light' ? '#eee' : '#000',
          borderRadius: '1em',
          color: variant === 'Light' ? '#000' : '#fff',
          display: 'inline-block',
          fontSize: '14px',
          lineHeight: 2,
          padding: '0 1em',
        }}
      >
        {text}
      </span>
    );
    ```
  </Step>
</Steps>

## 2. Define a Webflow code component

Create a code component definition file to map a React component to a Webflow component. In this step, you'll create a `Badge` component with two props mapping to an example `Badge.tsx` component.

<Steps>
  <Step title="Create a code component file">
    In your editor, navigate to the your `src` or components directory where you added your Badge component. Create a new file called `Badge.webflow.tsx`. This file will define how your Badge component appears in Webflow.
  </Step>

  <Step title="Import the React component and Webflow functions">
    Import the necessary dependencies to create your code component: the React component, [prop types](/code-components/reference/prop-types) and the `declareComponent` function.

    ```tsx title={"Badge.webflow.tsx"}
    import { Badge } from './Badge'; // Import your React component here
    import { props } from '@webflow/data-types';
    import { declareComponent } from '@webflow/react';

    ```
  </Step>

  <Step title="Declare the component">
    Declare the code component using the `declareComponent` function.

    ```tsx title={"Badge.webflow.tsx"}
    import { Badge } from './Badge';
    import { props } from '@webflow/data-types';
    import { declareComponent } from '@webflow/react';

    export default declareComponent(Badge, {
        name: 'Badge',
        description: 'A badge with variants',
        group: 'Info',
    });
    ```

    The `declareComponent` function takes two parameters:

    * Your React component (`Badge`)
    * Configuration options:
      * `name`: The name of the component
      * `description?`: A description of the component (optional)
      * `group?`: The group the component belongs to (optional)
      * `props?`: The props of the component, **which we'll define in the next step.** (optional)
      * `options?`: The options of the component, (optional)

    For more information and detailed configuration options for code component imports, see the [component definition reference](/code-components/define-code-component).
  </Step>

  <Step title="Define the component props">
    Add configurable properties that users can edit in the Webflow designer.

    Add a `props` object to the `declareComponent` function. This object defines which properties designers can configure in the Webflow editor, and maps them to appropriate Webflow prop types using the `props` constructor.

    ```tsx title={"Badge.webflow.tsx"}
    import { Badge } from './Badge';
    import { props } from '@webflow/data-types';
    import { declareComponent } from '@webflow/react';

    export default declareComponent(Badge, {
        name: 'Badge',
        description: 'A badge with variants',
        group: 'Info',
        props: {
            text: props.Text({
                name: "Text",
                defaultValue: "Hello World",
            }),
            variant: props.Variant({
                name: "Variant",
                options: ["Light", "Dark"],
                defaultValue: "Light",
            }),
        },
    });
    ```

    This code component defines two props:

    * `text`: A text field for the Badge content
    * `variant`: A dropdown with predefined style options
  </Step>
</Steps>

## 3. Share your library to Webflow

In your terminal, run the following command to upload your library:

```bash
npx webflow library share
```

The Webflow CLI will:

* **Authorize your workspace:** The CLI will check for a Workspace authentication token in your `.env` file. If one is not found, the CLI will prompt you to authenticate by opening a browser window to the Workspace authorization page. **Authorize a workspace to continue.**
* **Bundle your library:** The CLI will bundle your library, and ask you to confirm the components you want to share.
* **Upload your library to your Workspace**

For more information and detailed configuration options for bundling and importing React components, see the [bundling and import reference. →](/code-components/bundling-and-import)

## 4. Use the component on your Webflow site

Add your component to the canvas and update the props to customize the component.

<Steps>
  <Step title="Install the library on your Webflow site">
    Install the library on any site in your Workspace to start using your React components.

    1. Open any Webflow site in your workspace.

    2. Open the Libraries panel by pressing "L" or clicking the <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/32px/Resources.png" alt="Resources icon" /> icon in the left sidebar.

       <div>
         <Frame>
           <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/63093f0bf09ae890383d04ab21aa8b08d9dd5bbdff4c0fcb1e6f1449b83da1ea/products/code-components/pages/introduction/assets/available-to-install.png" alt="Available to install" />
         </Frame>
       </div>

    3. Find your library in the list of available libraries.

    4. Install the library by clicking the **Install** icon next to your library.
  </Step>

  <Step title="Open the Components panel">
    Open the Components panel by pressing "⇧C" or clicking the
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/32px/Components.svg" alt="Components icon" /> icon in the left sidebar.

    Scroll to the section for the library you just installed. You should see your "Badge" component listed under the "Info" group.

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/5312cc35e343e04c22e3941469d4eeff2b2f9aba55da81cb6f6e97cc38448c08/products/code-components/pages/introduction/assets/components-panel.png" alt="Components panel" />
    </Frame>
  </Step>

  <Step title="Add the component to your page">
    Click and drag the Badge component from the components panel onto your page. The component will appear with its default text and styling.
  </Step>

  <Step title="Customize the component">
    Customize your component in the Properties panel on the right. You'll see two configurable properties:

    * **Text**: Change the text content of the Badge
    * **Variant**: Select from Light or Dark styling

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/440d5f187957844f2496c6558206e4b7ace3263df351d2bb77e68314997b685d/products/code-components/pages/introduction/assets/badge.png" alt="Badge component" />
    </Frame>

    Try changing the text to "Welcome!" and selecting a different variant to see your component update in real-time.
  </Step>
</Steps>

## Congratulations

You've successfully created and shared a code component library for your Webflow projects! You now know how to:

* Set up a development environment for React components
* Declare a Webflow React component with configurable properties
* Share component libraries to Webflow via DevLink
* Use custom components in your Webflow projects

## Next steps

Now that you've created your first code component, explore these resources to build more advanced components:

### Learn the fundamentals

* [**Define a code component**](/code-components/define-code-component)<br />
  Learn how code components work and their architecture
* [**Explore prop types**](/code-components/reference/prop-types)<br />
  Explore all available prop types for creating configurable components
* [**Learn about the Webflow CLI**](/code-components/reference/cli)<br />
  Learn more about the Webflow CLI commands

### Advanced configuration

* [**Installation and setup**](/code-components/installation)<br />
  Learn how to configure your existing codebase for component import.
* [**Configure code components to work with popular frameworks and libraries**](/code-components/frameworks-and-libraries)<br />
  Learn how to use CSS frameworks like **Tailwind CSS**, tools like **Shadcn/UI**, and component libraries like **Material UI** with code components.
* [**Configure bundling and import**](/code-components/bundling-and-import)<br />
  Explore advanced configuration options for bundling and importing React components.

---

# Component architecture

> Learn how code components work internally and their architectural constraints

**Code components run as isolated React applications.** Each one mounts in its own [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) container with a separate React root, creating a sandboxed environment that prevents conflicts with the main page or other components.

<Frame>
  <>
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/53f6828c777951435d9931a76ce28ea8559db3c09fc8d2c0c42c762553a144dc/products/code-components/pages/guides/assets/code-components-architecture-diagram_dark.svg" alt="Component architecture" />

    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/4de3b39ce2f01fed35446b459ef5f5249727a480cee2ed886c6d10a8ce4749a4/products/code-components/pages/guides/assets/code-components-architecture-diagram_light.svg" alt="Component architecture" />
  </>
</Frame>

Because of this isolation, each imported React component manages its own dependencies, state, and context. When building, it’s important to consider how your components handle state and communicate with each other.

#### Key concepts

* **Shadow DOM isolation** - Styles and DOM elements are contained.
* **Separate React roots** - No shared state or context between components.
* **Server-side rendering** - SSR provides initial HTML
* **Client-side execution** - All interactivity runs in the browser

This architecture affects how you handle state management, component communication, data fetching, and styling. Use the following patterns to manage these constraints when building your React components for import into Webflow.

## Shadow DOM and React roots

Each code component runs in its own Shadow DOM container with a separate React root. This sandboxed environment prevents conflicts with the main page and other components:

* Your component's styles won't leak to the page
* Page styles won't override your component's styles
* You must explicitly import external styles (site variables, tag selectors, etc.)

**Composing components with slots**

When composing code components using slots, parent and child components may not share state through React context. Each child component renders in its own Shadow DOM container, which isolates component state sharing.

Shadow DOM impacts how you style components as well as your ability to use third-party libraries. To learn more about styling components within the Shadow DOM, see the [styling components guide](/code-components/styling-components) and [frameworks and libraries guide](/code-components/frameworks-and-libraries).

## Server-side rendering (SSR)

Webflow supports server-side rendering (SSR) for code components. SSR generates initial HTML for the component on the server, which can improve perceived performance and SEO. After the page loads, Webflow automatically hydrates the component in the browser so that it becomes fully interactive.

Webflow enables SSR by default, but you can disable it by setting `ssr` to `false` in the component's definition file.

```typescript title="Chart.webflow.tsx"
declareComponent(Component, {
  name: "Chart",
  description: "An interactive chart component",
  group: "Data Visualization",
  options: {
    ssr: false
  },
});
```

### When to disable SSR

You’ll want to turn off SSR for code components that rely on client-only behavior or that don’t benefit from server-rendered HTML. Common cases include:

* **Browser APIs:** Components that use window, document, `localStorage`, or other APIs not available during SSR.
* **Dynamic or personalized content:** User-specific dashboards, authenticated views, or components that need client data to render correctly.
* **Heavy or interactive UI:** Charts, 3D scenes, maps, or animation-driven elements that would bloat the server-rendered HTML and be re-rendered anyway.
* **Non-deterministic output:** Anything that renders differently on the server vs. client (for example, random numbers, time-based values).

<Tip>
  If the HTML output helps with SEO or improves the first paint, keep SSR on. If the component is purely interactive, client-specific, or browser-dependent, disable SSR.
</Tip>

<Warning title="React Server Components are not supported">
  React Server Components aren't supported in code components. All code components must use standard React components.
</Warning>

## Communicating between components

Because each code component runs in its own React root, they can’t share React Context or state directly. Instead, use one of the following patterns to manage state across multiple components.

### Sharing state across components

#### URL parameters

Store state in the URL using `URLSearchParams` for shareable, bookmarkable state. This is useful for search queries, filters, navigation state, or pagination.

```tsx title="Filter.tsx"
// Set state
const url = new URL(window.location.href);
url.searchParams.set('filter', 'active');
window.history.pushState({}, '', url);

// Read state
const params = new URLSearchParams(window.location.search);
const filter = params.get('filter'); // 'active'
```

#### Browser storage

Use `localStorage` for persistent data or `sessionStorage` for session-only data. Only store non-sensitive information since this data is visible to users.

```tsx title="ThemePreference.tsx"
// localStorage - persists across browser sessions
window.localStorage.setItem('userPreferences', JSON.stringify({ theme: 'dark' }));
const prefs = JSON.parse(localStorage.getItem('userPreferences'));

// sessionStorage - cleared when tab closes
window.sessionStorage.setItem('tempData', 'value');
```

Best for: user preferences, form data, temporary state.

#### Nano Stores

[Nano stores](https://github.com/nanostores/nanostores) is a lightweight state management library for cross-component communication, and is a useful alternative to React Context for sharing state between components.

<Accordion title="Using Nano Stores">
  <Steps>
    <Step title="Install Nano Stores">
      In your React project, install Nano Stores by running the following command in your terminal:

      ```bash
      npm install nanostores @nanostores/react
      ```
    </Step>

    <Step title="Create a store">
      A store represents is external shared state: any component can access, modify, or subscribe to it. Create a file to create the store. Use Nano Stores' `atom()` to make a shared, reactive variable.

      ```tsx title={"Store.tsx"}
      import { atom } from 'nanostores';

      // Shared state store - any component can read/write to this
      export const $counter = atom(0);
      ```

      **Note:** This example uses an atomic store with a single value. See the [Nano Stores documentation](https://github.com/nanostores/nanostores) for more information on the different types of stores.
    </Step>

    <Step title="Read a store in a component">
      In your component, subscribe to the store using `useStore()` hook to automatically update when the value changes:

      ```tsx title={"Counter.tsx"}
      import React from 'react';

      import {useStore} from '@nanostores/react';
      import {$counter} from './store';

      // Displays the current count - automatically updates when store changes
      export const Counter = () => {
          const count = useStore($counter); // Subscribe to store changes

          return(
              <div style={{backgroundColor: 'lightblue', padding: '10px', borderRadius: '5px'}}>
                  <p>Count: {count}</p>
              </div>
          )
      };
      ```
    </Step>

    <Step title="Update the store from a separate component">
      In the `Clicker` component, update the store using `set()` to change the value:

      ```tsx title={"Clicker.tsx"}
      import React from 'react';
      import {Button} from './Button';
      import {$counter} from './Store';

      interface ClickerProps {
          text: string;
          variant: 'primary' | 'secondary';
      }

      // Button that increments the shared counter when clicked
      export const Clicker = ({text, variant}: ClickerProps) => {
          const clicked = React.useCallback(() => $counter.set($counter.get() + 1), []); // Update shared state
          return <Button 
              text={text} 
              variant={variant} 
              onClick={clicked}/>;
      };
      ```

      **Note:** This example uses the `useCallback` hook to update the store when the button once it's clicked.
    </Step>
  </Steps>
</Accordion>

### Custom events

To notify a component of an event or update another component, use [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to communicate across React components in Webflow:

<CodeBlocks>
  ```tsx title={"ThemeToggle.tsx"}
  import React from 'react';

  // Theme toggle component dispatches events
  export const ThemeToggle = () => {
      const handleClick = () => {
        // Dispatch custom event that other components can listen to
        window.dispatchEvent(new CustomEvent('theme-changed', { 
          detail: { theme: 'dark' },
        }));
      };
    
      return <button onClick={handleClick}>Switch to Dark Mode</button>;
    };
    
  ```

  ```tsx title={"ThemeDisplay.tsx"}
  import { useState, useEffect } from 'react';

  // Theme display component listens for events
  export const ThemeDisplay = () => {
      const [theme, setTheme] = useState('light');
    
          useEffect(() => {
        const handleThemeChange = (event: Event) => {
          const customEvent = event as CustomEvent<{ theme: string }>;
          setTheme(customEvent.detail.theme);
        };

        window.addEventListener('theme-changed', handleThemeChange);
        return () => window.removeEventListener('theme-changed', handleThemeChange);
      }, []);
    
      return <div>Current theme: {theme}</div>;
    };
    
  ```
</CodeBlocks>

## Data fetching

Code components support client-side data fetching. This means your React component can request live or real-time data from a public API after it renders in the browser.

To fetch data, use React’s `useEffect` hook when the component mounts:

```tsx title={"MyComponent.tsx"}
import React, { useEffect, useState } from "react";

interface ApiResponse {
  message: string;
}

export const MyComponent = () => {
  const [data, setData] = useState<ApiResponse | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/public-data")
      .then((res) => res.json())
      .then((json: ApiResponse) => setData(json))
      .catch((err) => console.error("Fetch failed:", err))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <div>Loading...</div>;
  if (!data) return <div>No data available</div>;

  return <div>{data.message}</div>;
};

```

### Key considerations

* **Public APIs only:** Never include secrets or sensitive API keys in your component code. All JavaScript runs in the browser and is visible to users.
* **CORS support required:** The API must accept cross-origin requests from your Webflow-hosted site.
* **No environment variables:** `.env` files aren’t supported. If you need to pass configuration values (like endpoint URLs, IDs, or feature flags), provide them as props instead of embedding them directly.

---

# Styling components

> Learn how to style code components for use in Webflow

Imported components support standard React styling approaches, but with important considerations for Shadow DOM isolation.

## How Shadow DOM affects styling

Code components render in [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), which creates an isolated styling boundary. This means:

* Your component styles won't affect the rest of the page
* Page styles won't affect your component
* You need to explicitly connect to external styles

Rendering components in Shadow DOM prevents style conflicts to ensure your component looks and behaves as expected. However, this also means you need to explicitly connect to external styles like site variables, inherited properties, or tag selectors.

## Adding styles to your code components

To ensure your code components are styled correctly, you can import your styles directly into your `*.webflow.tsx` file.

```tsx title={"Button.webflow.tsx"}
import { props } from '@webflow/data-types';
import { declareComponent } from '@webflow/react';
import { Button } from './Button';

```

### Adding global styles

If you want to apply styles across all components, you can import your styles into a global decorators file.

<CodeBlocks>
  ```ts title={"globals.ts"}
  import "./globals.css";


  ```

  ```css title={"globals.css"}
  :root {
    --primary-color: #007bff;
    --font-family: system-ui, sans-serif;
  }


  ```
</CodeBlocks>

Then reference it in your `webflow.json`. Once applied, all components will inherit the styles from the global css file.

```json title="webflow.json"
{
  "library": {
    "globals": "./src/globals.ts"
  }
}
```

## CSS capabilities

The following table shows which CSS features work within Shadow DOM:

| Feature              | Works in Shadow DOM | How to use                            |
| -------------------- | ------------------- | ------------------------------------- |
| Site variables       | ✅ Yes               | `var(--background-primary, fallback)` |
| Inherited properties | ✅ Yes               | `font-family: inherit`                |
| Tag selectors        | ✅ Yes               | Enable with `applyTagSelectors: true` |
| Site classes         | ❌ No                | Use component-specific classes        |

### Site variables

Reference a site's [variables](https://help.webflow.com/hc/en-us/articles/33961268146323-Variables) in your components:

```css title={"Button.module.css"}
.button {
    color: var(--background-primary, #000);
  }
```

To get the exact variable name, click "Copy CSS" in the three-dot menu next to any variable in the Variables panel.

### Inherited properties

CSS properties set to `inherit` work across Shadow DOM boundaries. Your component inherits styles from the parent HTML element:

```css title={"Button.module.css"}
.button {
    color: var(--background-primary, #000);
    font-family: inherit;
  }
```

For example, if your component is placed inside a `<div>` with `font-family: sans-serif`, setting `font-family: inherit` in your component will use sans-serif.

### Tag selectors

[Tag selectors](https://help.webflow.com/hc/en-us/articles/33961346359699-HTML-tags) (like `h1`, `p`, `button`) defined in your site's CSS can be automatically applied to your component. Enable this with the `applyTagSelectors` option in your component definition file.

```tsx title={"Button.webflow.tsx"}
import { declareComponent } from '@webflow/react';
import { Button } from './Button';

export default declareComponent(Button, {
    name: 'Button',
    options: {
        applyTagSelectors: true,
    },
});
```

## Advanced configuration

Code components support modern CSS frameworks and libraries, but some require specific configuration for Shadow DOM compatibility. For guidance on using CSS frameworks and component libraries with code components, see the [frameworks and libraries guide](/code-components/frameworks-and-libraries).

---

# Installation

> Learn how to configure your Component Library for code components.

This reference describes the configuration requirements to setup DevLink in a React project for component imports.

## Setup requirements

### Webflow CLI

Install the Webflow CLI and the necessary dependencies to import React components into Webflow:

```bash
npm i --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react
```

**What you get:**

* `@webflow/webflow-cli` - CLI used to publish components to Webflow
* `@webflow/data-types` - TypeScript definitions for Webflow props
* `@webflow/react` - React utilities for code components

See the [CLI reference](/code-components/reference/cli) for publishing commands.

### `webflow.json`

The `webflow.json` file is used to configure DevLink for component imports. Use this file to define the name of your library and the components that should be included in the library. Additionally, you can specify a custom webpack configuration file to use for [bundling your components.](/code-components/bundling-and-import)

Create or update `webflow.json` in the root of your project with the following configuration:

```json title={"webflow.json"}
{
    "library": {
        "name": "<Your Library Name>",
        "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
        "bundleConfig": "./webpack.webflow.js",
        "globals": "./src/globals.webflow.ts"
    }
}
  
```

| Field                  | Description                                                                                        | Required |
| ---------------------- | -------------------------------------------------------------------------------------------------- | -------- |
| `library.name`         | The name of your component library as it appears in Webflow                                        | Yes      |
| `library.components`   | Glob pattern matching your component files                                                         | Yes      |
| `library.bundleConfig` | Path to a [custom webpack configuration](/code-components/webpack-configuration-overrides) file    | No       |
| `library.globals`      | Path to a [Component Decorators](/code-components/define-code-component#component-decorators) file | No       |

## Authentication

When importing your component library to Webflow using the `npx webflow library share` command, the Webflow CLI will prompt you to authenticate with Webflow. Once authenticated, DevLink will save the token to your `.env` file.

### Manual authentication

To manually authenticate with Webflow, run the `webflow library share` command with the `--api-token` option and include a [Workspace API token](#workspace-api-token) in the command. This is useful when sharing your component library to a different workspace.

```bash
npx webflow library share --api-token <your-api-token>
```

### Workspace API token

DevLink publishes your component library to a Webflow workspace. To publish to the correct workspace, you must provide a [workspace API token](/data/reference/authentication/workspace-token) for authentication.

<Warning title="Workspace admin required">
  You must be a Workspace Admin to create a Workspace token.
</Warning>

To get your workspace API token:

1. Open your workspace and navigate to **Apps & Integrations.**
2. In the left sidebar. Click **Manage**
3. Scroll to the bottom section labeled **Workspace API Access**
4. Click **Generate API Token** and copy the token.
5. Add the token to your `.env` file.

<Warning title="Security best practices">
  Never commit your `.env` file to version control. Be sure to add `.env` to your `.gitignore` file.
</Warning>

## Next steps

After configuration, you can:

* [Define a code component](/code-components/define-code-component)
* [Publish your library](/code-components/reference/cli)

## Related topics

* [Getting started with code components](/code-components/introduction/quick-start)
* [Webflow CLI reference](/code-components/reference/cli)
* [Workspace API token](/data/reference/authentication/workspace-token)

---

# Frameworks and libraries

> Learn how to use frameworks and libraries with code components.

Code Components work with a wide range of styling approaches, including CSS preprocessors, utility frameworks, and component/style libraries.

Because Code Components render inside a [Shadow DOM](/code-components/component-architecture#shadow-dom-and-react-roots), some tools that inject styles into the global `document.head` need additional configuration to scope styles correctly. Webflow provides utilities for popular CSS-in-JS libraries (e.g. Emotion, styled-components) so they can inject styles directly into the Shadow Root.

Most setups just require a small addition to your [webpack configuration](/code-components/webpack-configuration-overrides) and an import in your component. For CSS-in-JS solutions, you’ll wrap your components in a Shadow DOM provider.

## CSS frameworks

<Accordion title="Tailwind CSS">
  To use Tailwind CSS with your code components, configure PostCSS to process Tailwind classes:

  <Steps>
    <Step title="Install Tailwind CSS">
      Install Tailwind CSS and its PostCSS plugin:

      ```bash
      npm install tailwindcss @tailwindcss/postcss postcss
      ```
    </Step>

    <Step title="Configure PostCSS">
      Add the Tailwind PostCSS plugin to your `postcss.config.mjs` file:

      ```mjs title={"postcss.config.mjs"}
      const config = {
        plugins: {
          "@tailwindcss/postcss": {},
        },
      };

      export default config;

      ```
    </Step>

    <Step title="Create Tailwind styles">
      Create a CSS file that imports Tailwind:

      ```css title={"globals.css"}
      @import "tailwindcss";

      ```
    </Step>

    <Step title="Configure global decorators">
      Create a global decorators file that imports your Tailwind CSS:

      ```ts title={"globals.ts"}
      import "./globals.css";


      ```

      Then reference it in your `webflow.json`:

      ```json title="webflow.json"
      {
        "library": {
          "globals": "./src/globals.ts"
        }
      }
      ```
    </Step>

    <Step title="Use Tailwind classes">
      Write your React components using Tailwind utility classes. The global styles are automatically applied to all components:

      <CodeBlocks>
        ```tsx title={"Badge.tsx"}
        import * as React from "react";

        interface BadgeProps {
          text: string;
          variant: 'Light' | 'Dark';
        }

        export const Badge = ({ text, variant }: BadgeProps) => (
          <span
            className={`inline-block rounded-full px-3 py-1 text-sm font-medium ${
              variant === 'Light' 
                ? 'bg-gray-100 text-gray-800' 
                : 'bg-gray-800 text-white'
            }`}
          >
            {text}
          </span>
        );
        ```

        ```tsx title={"Badge.webflow.tsx"}
        import { Badge } from "./Badge";
        import { props } from "@webflow/data-types";
        import { declareComponent } from "@webflow/react";

        export default declareComponent(Badge, {
          name: "Badge",
          props: {
            text: props.Text({
              name: "Text",
              defaultValue: "Hello World",
            }),
            variant: props.Variant({
              name: "Variant",
              options: ["Light", "Dark"],
              defaultValue: "Light",
            }),
          },
        });

        ```
      </CodeBlocks>
    </Step>
  </Steps>
</Accordion>

<Accordion title="styled-components">
  To use styled-components with code components, install the `@webflow/styled-components-utils` package and configure a global decorator to inject styles into the Shadow DOM.

  <Steps>
    <Step title="Install the styled-components utility library">
      Install the utility library:

      ```bash
      npm i @webflow/styled-components-utils
      ```

      <Tip>
        This package requires the following peer dependencies:

        ```bash
        npm i styled-components react react-dom
        ```
      </Tip>
    </Step>

    <Step title="Configure global decorators">
      Create a global decorators file that exports the styled-components decorator:

      ```ts title={"globals.ts"}
      import { styledComponentsShadowDomDecorator } from "@webflow/styled-components-utils";

      export const decorators = [styledComponentsShadowDomDecorator];


      ```

      Then reference it in your `webflow.json`:

      ```json title="webflow.json"
      {
        "library": {
          "globals": "./src/globals.ts"
        }
      }
      ```
    </Step>

    <Step title="Use styled-components in your component">
      Write your React component using styled-components. The global decorator automatically wraps all components:

      <CodeBlocks>
        ```tsx title={"Button.tsx"}
        import React from "react";
        import styled from "styled-components";

        const StyledButton = styled.button`
          background-color: #007bff;
        `;

        interface ButtonProps {
          buttonText: string;
        }

        export const Button = ({ buttonText }: ButtonProps) => {
          return <StyledButton>{buttonText}</StyledButton>;
        };

        ```

        ```tsx title={"Button.webflow.tsx"}
        import { declareComponent } from "@webflow/react";
        import { props } from "@webflow/data-types";
        import { Button } from "./Button";

        export default declareComponent(Button, {
          name: "Button",
          props: {
            buttonText: props.Text({
              name: "Button Text",
              defaultValue: "Click me",
            }),
          },
        });

        ```
      </CodeBlocks>
    </Step>
  </Steps>
</Accordion>

<Accordion title="Emotion">
  To use Emotion with code components, install the [`@webflow/emotion-utils`](https://www.npmjs.com/package/@webflow/emotion-utils?activeTab=readme) package and configure a global decorator to inject styles into the Shadow DOM.

  <Steps>
    <Step title="Install the Emotion utility library">
      In your terminal, run the following command to install the Emotion utility package:

      ```bash
      npm i @webflow/emotion-utils
      ```

      <Tip>
        This package requires the following peer dependencies:

        ```bash
        npm i @emotion/cache @emotion/react react react-dom
        ```
      </Tip>
    </Step>

    <Step title="Configure global decorators">
      Create a global decorators file that exports the Emotion decorator:

      ```ts title={"globals.ts"}
      import { emotionShadowDomDecorator } from "@webflow/emotion-utils";

      export const decorators = [emotionShadowDomDecorator];


      ```

      Then reference it in your `webflow.json`:

      ```json title="webflow.json"
      {
        "library": {
          "globals": "./src/globals.ts"
        }
      }
      ```
    </Step>

    <Step title="Use Emotion in your component">
      Write your React component using Emotion. The global decorator automatically wraps all components:

      <CodeBlocks>
        ```tsx title={"Button.tsx"}
        import React from "react";
        import styled from "@emotion/styled";

        const StyledButton = styled.button`
          background-color: #007bff;
        `;

        interface ButtonProps {
          buttonText: string;
        }

        export const Button = ({ buttonText }: ButtonProps) => {
          return <StyledButton>{buttonText}</StyledButton>;
        };

        ```

        ```tsx title={"Button.webflow.tsx"}
        import { declareComponent } from "@webflow/react";
        import { props } from "@webflow/data-types";
        import { Button } from "./Button";

        export default declareComponent(Button, {
          name: "Button",
          props: {
            buttonText: props.Text({
              name: "Button Text",
              defaultValue: "Click me",
            }),
          },
        });

        ```
      </CodeBlocks>
    </Step>
  </Steps>
</Accordion>

## Component libraries

<Accordion title="Material UI">
  Material UI uses Emotion for styling. Install the [`@webflow/emotion-utils`](https://www.npmjs.com/package/@webflow/emotion-utils?activeTab=readme) package and configure a global decorator to inject styles into the Shadow DOM.

  <Steps>
    <Step title="Install the Emotion utility library">
      In your terminal, run the following command to install the Emotion utility package:

      ```bash
      npm i @webflow/emotion-utils
      ```

      <Tip>
        This package requires the following peer dependencies:

        ```bash
        npm i @mui/material @emotion/react @emotion/cache
        ```
      </Tip>
    </Step>

    <Step title="Configure global decorators">
      Create a globals file that exports the Emotion decorator:

      ```ts title={"globals.ts"}
      import { emotionShadowDomDecorator } from "@webflow/emotion-utils";

      export const decorators = [emotionShadowDomDecorator];


      ```

      Then reference it in your `webflow.json`:

      ```json title="webflow.json"
      {
        "library": {
          "globals": "./src/globals.ts"
        }
      }
      ```
    </Step>

    <Step title="Use Material UI in your component">
      Write your React component using Material UI. The global decorator automatically wraps all components:

      <CodeBlocks>
        ```tsx title={"Button.tsx"}
        import React from "react";
        import { Button } from "@mui/material";

        interface ButtonProps {
          children: React.ReactNode;
          variant?: "text" | "outlined" | "contained";
          color?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
          onClick?: () => void;
        }

        export const CustomButton = ({
          children,
          variant = "contained",
          color = "primary",
          onClick,
        }: ButtonProps) => {
          return (
            <Button variant={variant} color={color} onClick={onClick}>
              {children}
            </Button>
          );
        };

        ```

        ```tsx title={"Button.webflow.tsx"}
        import { declareComponent } from "@webflow/react";
        import { props } from "@webflow/data-types";
        import { CustomButton } from "./Button";  

        export default declareComponent(CustomButton, {
          name: "Button",
          description: "A simple button component",
          group: "Forms",
          props: {
            children: props.Text({
              name: "Button Text",
              defaultValue: "Click me"
            }),
            variant: props.Variant({
              name: "Style",
              options: ["text", "outlined", "contained"],
              defaultValue: "contained"
            }),
            color: props.Variant({
              name: "Color",
              options: ["primary", "secondary", "error", "info", "success", "warning"],
              defaultValue: "primary"
            })
          },
        });
        ```
      </CodeBlocks>
    </Step>
  </Steps>
</Accordion>

<Accordion title="Shadcn/UI">
  Shadcn/UI is a component library built on Tailwind CSS that provides pre-built, accessible React components. It works with code components but requires path alias configuration. Follow these steps after setting up Tailwind CSS:

  <Steps>
    <Step title="Configure path aliases">
      Shadcn/UI uses path aliases that need to be configured in your webpack setup. Add this to your webpack configuration:

      ```js title={"webpack.webflow.js"}
      module.exports = {
          resolve: {
              alias: {
                  "@": process.cwd(), // Maps @ to your project root
              },
          },
      };
        
      ```

      For detailed webpack configuration options, see the [bundling and import guide](/code-components/bundling-and-import).
    </Step>
  </Steps>
</Accordion>

## Preprocessors & post-processing

<Accordion title="Sass">
  Configure your project to use Sass with the following steps:

  <Steps>
    <Step title="Install the Sass loaders">
      Install the loaders as development dependencies:

      ```bash
      npm install --save-dev sass sass-loader
      ```
    </Step>

    <Step title="Create a custom webpack configuration">
      Create a `webpack.webflow.js` file to customize the webpack configuration to use the Sass loader:

      ```js title={"webpack.webflow.js"}
      module.exports = {
      module: {
              rules: (currentRules) => {
              const currentCSSRule = currentRules.find(
                  (rule) =>
                  rule.test instanceof RegExp &&
                  rule.test.test("test.css") &&
                  Array.isArray(rule.use)
              );
              return [
                  ...currentRules,
                  {
                  test: /\.scss$/,
                  use: [...currentCSSRule.use, "sass-loader"],
                  },
              ];
              },
          }
      }
      ```
    </Step>

    <Step title="Update your Webflow configuration">
      Update your `webflow.json` file to use the custom webpack configuration:

      ```json title={"webflow.json"}
      {
          "library": {
            "name": "React Components Library",
            "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
            "bundleConfig": "./webpack.webflow.js"
          }
        }
        
      ```
    </Step>

    <Step title="Use Sass in your code component">
      Import Sass in your code component definition file:

      ```tsx title="src/components/Button.webflow.tsx"
      import '../styles/button.scss';

      // Declare the component
      ```
    </Step>
  </Steps>
</Accordion>

<Accordion title="Less">
  Configure your project to use Less with the following steps:

  <Steps>
    <Step title="Install the Less loaders">
      Install the loaders as development dependencies:

      ```bash
      npm install --save-dev less less-loader
      ```
    </Step>

    <Step title="Create a custom webpack configuration">
      Create a `webpack.webflow.js` file to customize the webpack configuration to use the Sass loader:

      ```js title={"webpack.webflow.js"}
      // webpack.webflow.js
      module.exports = {
          module: {
            rules: (currentRules) => {
              const currentCSSRule = currentRules.find(
                (rule) =>
                  rule.test instanceof RegExp &&
                  rule.test.test("test.css") &&
                  Array.isArray(rule.use)
              );
        
              return [
                ...currentRules,
                {
                  test: /\.less$/i,
                  use: [...currentCSSRule.use, "less-loader"],
                },
              ];
            },
          },
        };
        
      ```
    </Step>

    <Step title="Update your Webflow configuration">
      Update your `webflow.json` file to use the custom webpack configuration:

      ```json title={"webflow.json"}
      {
          "library": {
            "name": "React Components Library",
            "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
            "bundleConfig": "./webpack.webflow.js"
          }
        }
        
      ```
    </Step>

    <Step title="Use less in your code component">
      Import less in your code component definition file:

      ```tsx title="src/components/Button.webflow.tsx"
      import '../styles/button.less';

      // Declare the component
      ```
    </Step>
  </Steps>
</Accordion>

Learn about additional configuration options in the [bundling and import guide](/code-components/bundling-and-import).

## Next steps

* [Declare your code component](/code-components/define-code-component)
* [Style your React component](/code-components/styling-components)
* [Deploy your code component](/code-components/bundling-and-import)

## Troubleshooting

<Accordion title="Errors when sharing to Webflow">
  If you're getting errors when sharing to Webflow, try the following:

  * Ensure you've installed the Webflow CLI locally within the project. If you have a global installation, try running the command with `npx` to ensure the correct version is being used.
</Accordion>

---

# Define a code component

> Learn about the structure and purpose of code component definition files

A code component definition is a file that tells Webflow how to use your React component on the Webflow canvas. It defines which properties designers can configure and how they’ll appear in the designer.

Every code component definition is a `.webflow.tsx` file that uses the `declareComponent` function to define the component.

<CodeBlocks>
  ```tsx title={"Button.webflow.tsx"}
  import { declareComponent } from '@webflow/react';
  import { props } from '@webflow/data-types';
  import { Button } from './Button';

  // Declare the component
  export default declareComponent(Button, {

    // Component metadata
    name: "Button",
    description: "A button component with a text and a style variant",
    group: "Interactive",

    // Prop definitions
    props: {
      text: props.Text({ 
          name: "Button Text",
          defaultValue: "Click me"
      }),
      variant: props.Variant({ 
          name: "Style", 
          options: ["primary", "secondary"],
          defaultValue: "primary"
      }),
    },
    // Optional configuration
    options: {
      applyTagSelectors: true,
    },
  });
  ```

  ```tsx title={"Button.tsx"}
  import React from 'react';
  import styles from './Button.module.css';

  interface ButtonProps {
    text: string;
    variant: 'primary' | 'secondary';
  }

  export const Button: React.FC<ButtonProps> = ({ text, variant }) => {
    return (
      <button 
        className={`${styles.button} ${styles[variant]}`}
        type="button"
      >
        {text}
      </button>
    );
  }; 
  ```
</CodeBlocks>

## File structure and naming

Code component definition files follow specific extension and naming patterns:

* **File extension**: `.webflow.tsx` or `.webflow.ts`
* **Naming pattern**: `ComponentName.webflow.tsx` (where `ComponentName` matches your React component)
* **Location**: Typically alongside your React component file

If you have specific naming needs, you can [configure this pattern in `webflow.json`.](/code-components/installation)  It's recommended to create your code component file alongside your React component, adding `.webflow` to the name. For example, `Button.webflow.tsx` for `Button.tsx`.

<Warning title="File names are the unique identifier of your code component">
  Renaming a definition file creates a new component and removes the old one from your library. If designers are already using the old component in their projects, those instances will break and need to be manually replaced.
</Warning>

## Imports

Every code component definition file needs to import your React component, Webflow functions, and any styles you want to apply to the component.

```tsx title={"Button.webflow.tsx"}
import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { Button } from './Button';

```

<Note title="Importing styles">
  To apply global styles or integrate CSS-in-JS libraries, configure a global decorators file with [component decorators](#component-decorators).
</Note>

## Declare component

The `declareComponent` function creates a code component definition. It takes two arguments: the React component and a configuration object.

```tsx title={"Button.webflow.tsx"}
import { declareComponent } from '@webflow/react';
import { Button } from './Button';
import { styledComponentsShadowDomDecorator } from "@webflow/styled-components-utils";
import { props } from '@webflow/data-types';

// Declare the component
export default declareComponent(Button, {

  // Component metadata
  name: "Button",
  description: "A button component with a text and a style variant",
  group: "Interactive",
  decorators: [styledComponentsShadowDomDecorator],
  props: {
    text: props.Text({
      name: "Button Text",
      defaultValue: "Click me"
    }),
  },
});
```

* **`name`**: The name designers see in the component panel
* **`description?`**: Description to provide context for the component's purpose (optional)
* **`group?`**: Organize components into groups in the component panel (optional)
* **`props?`**: Object defining the props of the component (optional)
* **`decorators?`**: Array of decorators to apply to the component (optional)
* **`options?`**: Object defining the options of the component (optional)

## Prop definitions

The `props` object defines which properties of your React component a designer can edit in Webflow. Declare a prop for each editable property in your React component and provide metadata that will appear in the designer. To see a list of all available prop types and their configuration options, see the [prop types reference. →](/code-components/reference/prop-types)

The below examples show a React component, its corresponding code component definition file, and how it appears in Webflow.

<Tabs>
  <Tab title="React component">
    This React component expects a `buttonText` property, and a `variant` property.

    ```tsx title={"Button.tsx"}
    import React from 'react';
    import styles from './Button.module.css';

    interface ButtonProps {
      text: string;
      variant: 'primary' | 'secondary';
    }

    export const Button: React.FC<ButtonProps> = ({ text, variant }) => {
      return (
        <button 
          className={`${styles.button} ${styles[variant]}`}
          type="button"
        >
          {text}
        </button>
      );
    }; 
    ```
  </Tab>

  <Tab title="Code component">
    This code component definition file declares a `buttonText` and `variant` prop for the `Button` component.

    ```tsx title={"Button.webflow.tsx"}
    import { declareComponent } from '@webflow/react';
    import { props } from '@webflow/data-types';
    import { Button } from './Button';

    // Declare the component
    export default declareComponent(Button, {

      // Component metadata
      name: "Button",
      description: "A button component with a text and a style variant",
      group: "Interactive",

      // Prop definitions
      props: {
        text: props.Text({ 
            name: "Button Text",
            defaultValue: "Click me"
        }),
        variant: props.Variant({ 
            name: "Style", 
            options: ["primary", "secondary"],
            defaultValue: "primary"
        }),
      },
    });
    ```
  </Tab>

  <Tab title="Component in Webflow">
    Once shared with designers, the component will appear in the component panel. And can be added to a page with editable props.

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/3c51c1cf23c2277a83f4c864587594d1e6498a20b24cb4051a821a7ad88c8d4c/products/code-components/pages/guides/assets/button.png" alt="Webflow props" />
      </Frame>
    </div>
  </Tab>
</Tabs>

See more examples in the [prop types reference. →](/code-components/reference/prop-types)

## Component decorators

Decorators are functions that wrap your React component with providers or other wrapper components. Use them to provide context like themes, internationalization, or feature flags, or to integrate CSS-in-JS libraries. For CSS-in-JS setup, see the [frameworks and libraries guide](/code-components/frameworks-and-libraries).

### Global styles

To apply global styles across all components, import your CSS in a global decorators file and reference it in `webflow.json`:

<CodeBlocks>
  ```ts title={"globals.ts"}
  import "./globals.css";


  ```

  ```css title={"globals.css"}
  :root {
    --primary-color: #007bff;
    --font-family: system-ui, sans-serif;
  }


  ```
</CodeBlocks>

```json title="webflow.json"
{
  "library": {
    "globals": "./src/globals.ts"
  }
}
```

### Custom decorators

Create a custom decorator when you need to wrap components with additional behavior. A decorator is a higher-order component that takes a component and returns a wrapped version. This example wraps a data-fetching component with an error boundary to handle API failures gracefully:

<CodeBlocks>
  ```tsx title={"ErrorBoundary.tsx"}
  // Custom error boundary component that catches JavaScript errors in child components and displays a fallback UI

  import React, { Component, ErrorInfo, ReactNode } from "react";

  interface Props {
    children: ReactNode;
  }

  interface State {
    hasError: boolean;
  }

  // Catches JavaScript errors in child components and displays a fallback UI
  class ErrorBoundary extends Component<Props, State> {
    state: State = { hasError: false };

    static getDerivedStateFromError(): State {
      return { hasError: true };
    }

    componentDidCatch(error: Error, info: ErrorInfo) {
      console.error("Component error:", error, info);
    }

    render() {
      if (this.state.hasError) {
        return <div>Something went wrong. Please refresh the page.</div>;
      }
      return this.props.children;
    }
  }

  // Decorator that wraps any component with error handling
  export const errorBoundaryDecorator = <P extends object>(
    Component: React.ComponentType<P>
  ): React.ComponentType<P> => {
    return (props: P) => (
      <ErrorBoundary>
        <Component {...props} />
      </ErrorBoundary>
    );
  };

  ```

  ```tsx title={"UserCard.tsx"}
  import React, { useEffect, useState } from "react";

  interface User {
    name: string;
    email: string;
  }

  interface UserCardProps {
    userId: string;
  }

  // Displays user data from an external API
  export const UserCard: React.FC<UserCardProps> = ({ userId }) => {
    const [user, setUser] = useState<User | null>(null);

    useEffect(() => {
      fetch(`https://api.example.com/users/${userId}`)
        .then((res) => res.json() as Promise<User>)
        .then((data) => setUser(data));
    }, [userId]);

    if (!user) return <div>Loading...</div>;

    return (
      <div>
        <h3>{user.name}</h3>
        <p>{user.email}</p>
      </div>
    );
  };


  ```

  ```tsx title={"UserCard.webflow.tsx"}
  import { declareComponent } from "@webflow/react";
  import { props } from "@webflow/data-types";
  import { UserCard } from "./UserCard";
  import { errorBoundaryDecorator } from "./ErrorBoundary";

  // Wrap with error boundary to gracefully handle API failures
  export default declareComponent(UserCard, {
    name: "User Card",
    decorators: [errorBoundaryDecorator], // Apply the error boundary decorator to the component
    props: {
      userId: props.Text({
        name: "User ID",
        defaultValue: "123",
      }),
    },
  });


  ```
</CodeBlocks>

To apply decorators globally, export a `decorators` array from your  decorators file:

```typescript title="src/globals.ts"
import "./globals.css";
import { errorBoundaryDecorator } from "./ErrorBoundary";

export const decorators = [errorBoundaryDecorator];
```

<Note title="Styling components">
  Code components render in Shadow DOM, encapsulating them from the rest of the page, which impacts several CSS capabilities.

  [Learn more about styling components →](/code-components/styling-components).
</Note>

## Options

The `options` object is used to configure the component for more advanced use cases. Options accepts the following properties:

| Option              | Type    | Default | Description                                      |
| ------------------- | ------- | ------- | ------------------------------------------------ |
| `applyTagSelectors` | boolean | `false` | Whether to apply tag selectors to the component. |
| `ssr`               | boolean | `true`  | Whether to disable server-side rendering.        |

### Tag selectors

Styles targeting a tag selector (for example, `h1`, `p`, `button`) can be automatically provided to the Shadow DOM with the `applyTagSelectors` option. This is helpful for styling components with CSS selectors.

[See more about styling components in the styling documentation. →](/code-components/styling-components)

### Server-side rendering (SSR)

By default, Webflow will load your component on the server. This means that the component will be rendered on the server, but the DOM will be hydrated on the client-side. This is helpful for improving the performance of your component.

You can disable this behavior by setting `ssr` to `false`.

## Best practices

<Accordion title="File naming and organization">
  * **Use consistent naming**: `ComponentName.webflow.tsx` for all code component definitions
  * **Keep code component definitions close**: Place `.webflow.tsx` files next to their React components
</Accordion>

<Accordion title="Component metadata">
  * **Use clear names**: Make it obvious what the component does
  * **Add descriptions**: Help designers understand the component's purpose
  * **Group logically**: Use groups to organize components in the panel
</Accordion>

<Accordion title="Prop definitions">
  * **Provide helpful defaults**: Make components work immediately when added
  * **Use descriptive names**: The `name` property appears in the designer
  * **Group related props**: Consider how props will appear together in the designer
</Accordion>

<Accordion title="Global styles">
  Import CSS once in a global decorators file rather than in each component. This keeps your component definitions clean and ensures consistent styling:

  ```typescript title="src/globals.ts"
  import "./globals.css";
  ```

  Then reference your global decorators file in `webflow.json`:

  ```json title="webflow.json"
  {
    "library": {
      "globals": "./src/globals.ts"
    }
  }
  ```
</Accordion>

## Next steps

Now that you understand code component definitions, you can:

* **[Understand styling](/code-components/styling-components)** - Learn about how to style your components.
* **[Explore prop types](/code-components/reference/prop-types)** - Learn about all available prop types
* **[Configure bundling](/code-components/bundling-and-import)** - Set up your build process
* **[Importing your components](/code-components/bundling-and-import)** - Share your components with designers and other developers

---

# Bundling and Import

> Learn how to bundle and import your React components into Webflow.

This reference covers bundling your React components and importing them to Webflow.

## Import

Import your components to Webflow using DevLink. DevLink bundles your component files and uploads them to your Workspace as a [shared library](https://help.webflow.com/hc/en-us/articles/33961343551763-Libraries).

Use the following command to import your components to Webflow:

```bash
npx webflow library share
```

### CI/CD pipelines

For automated workflows, add the `--no-input` flag to skip interactive prompts:

```bash
npx webflow library share --no-input
```

**Important:** Add change detection to prevent inadvertently removing components:

* Compare current library state with previous import
* Only share when components have actually changed

For more options, see the [Webflow CLI reference. →](/code-components/reference/cli).

## Bundling

Webflow uses Webpack to bundle your component libraries. During this process, the bundler handles TypeScript compilation, resolves all dependencies and imports, optimizes your code for production, and generates bundles ready for import.

The default configuration handles most use cases automatically. Extend it when you need:

* **Custom CSS processing**
* **Specialized file handling** (SVG, images, fonts)
* **Build optimizations** (tree shaking, code splitting)

To override the default configuration, see the guide on [Webpack configuration overrides](/code-components/bundling-and-import#overriding-the-default-webpack-configuration).

<Note title="Using CSS frameworks and component libraries">
  If you're using a CSS framework or component library, you may need to configure your project to handle the framework's CSS. See the [frameworks and libraries guide](/code-components/frameworks-and-libraries) for more information.
</Note>

### Bundle limits

Maximum bundle size: 50MB

## Debugging

This section provides common debugging techniques for troubleshooting the bundling process and resolving configuration issues.

### Disable minification

By default, the bundler minifies your code to reduce file size for production. To troubleshoot issues, you can disable minification in your webpack configuration.

This keeps your bundled code readable and ensures that any errors you see in the **browser's developer console** will have accurate line numbers that map back to your original source code.

```js title={"webpack.webflow.js"}
module.exports = {
    mode: "development",
  };
  
```

<Warning title="Include the Webpack configuration file in your `webflow.json">
  When using a custom webpack configuration file, you must include the file in your `webflow.json` file by passing the path to the file in the `bundleConfig` property.

  ```json
  {
    "library": {
      "name": "My Library",
      "components": ["./src/components/**/*.webflow.{js,ts,tsx}"],
      "bundleConfig": "./webpack.webflow.js"
    }
  }
  ```
</Warning>

### CSS modules

CSS Modules scope styles by generating unique class names, preventing conflicts between components.

By default, you must use bracket notation to access CSS classes:

```tsx title={"Button.tsx"}
import * as styles from "./Button.module.css";

export const Button = (text: string) => {
    return (
        <a className={(styles as any)["my-button"]}>
            {text}
        </a>
    );
};

```

To enable dot notation, and to use the default import syntax for CSS modules, update the `css-loader` configuration:

```js title={"webpack.webflow.js"}
module.exports = {
    module: {
      // Override the existing rules to modify CSS processing
      rules: (currentRules) => {
        return currentRules.map((rule) => {
          // Find the rule that handles CSS files
          if (
            rule.test instanceof RegExp &&
            rule.test.test("test.css") &&
            Array.isArray(rule.use)
          ) {
  
              for (const [index, loader] of rule.use.entries()) {
                
              // Find the css-loader
              if (typeof loader === "object" && loader?.ident === "css-loader") {
                
                // Preserve existing options and add a custom configuration
                const options =
                  typeof loader.options === "object" ? loader.options : {};
                rule.use[index] = {
                  ...loader,
                  options: {
                    ...options,
                    modules: {
                      exportLocalsConvention: "as-is", // Use original class names
                      namedExport: false, // ⚠️ Allow dot notation access
                    },
                  },
                };
              }
            }
          }
          return rule;
        });
      },
    },
  };
  
```

## Bundle locally

To test and debug your React components locally, you can bundle your library using the Webflow CLI command.

```bash
npx webflow library bundle --public-path http://localhost:4000/
```

The public path is the URL where you can serve your bundled library. The CLI will generate a `dist` folder with your bundled library.

To inspect the final configuration being used by webpack, use the `--debug-bundler` option.

---

# Webpack Configuration Overrides

> Customize your webpack configuration for advanccode components

This guide covers how to customize your webpack configuration for advanced implementation of code components.

## Overview

The CLI uses an internal webpack configuration optimized for Webflow's requirements, including Module Federation, CSS extraction, TypeScript/React support, and other optimizations. When you need to customize this configuration, you can provide an override configuration file that will be merged with the base configuration.

### Review the default configuration

To view the webpack configuration used to bundle your library, use the `--debug-bundler` flag when running `library` commands:

```shell
npx webflow library bundle --debug-bundler
```

This will output the final merged webpack configuration to help you understand how your overrides are being applied.

## Configuration file setup

<Steps>
  <Step title="Specify the configuration path">
    In your [`webflow.json` manifest file](/code-components/installation#webflowjson), add a `bundleConfig` property pointing to your configuration file:

    ```json title="webflow.json"
    {
      "library": {
        "name": "My Library",
        "components": ["./src/components/**/*.webflow.{js,ts,tsx}"],
        "bundleConfig": "./webpack.override.js"
      }
    }
    ```
  </Step>

  <Step title="Create your override configuration">
    Create a CommonJS module that exports your webpack configuration overrides, for example:

    ```javascript title="webpack.override.js"
    module.exports = {
      resolve: {
        extensions: [".js", ".ts", ".tsx", ".json"],
      },
      // ...other custom configurations go here
    };
    ```
  </Step>
</Steps>

## Configuration API

Your override configuration should follow the standard [Webpack Configuration API](https://webpack.js.org/configuration/) with the following important exceptions and special handling:

### Blocked properties

The following properties are **automatically filtered out** and can't be overridden for security and compatibility reasons:

| Property | Description                                                                                                                      |
| -------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `entry`  | Specifies the entry points for the application bundle. Determines which files webpack starts building the dependency graph from. |
| `output` | Defines how and where webpack emits the bundled files, including output directory and filename patterns.                         |
| `target` | Sets the environment in which the bundle should run (e.g., `web`, `node`). Affects how webpack builds and optimizes the output.  |

If you attempt to override these properties, a warning will be logged and they will be ignored.

### Special property handling

#### Module rules

Instead of providing an array of rules, you must provide a **function** that receives the current rules and returns the modified rules array:

```javascript
module.exports = {
  module: {
    rules: (currentRules) => {
      // Your custom logic adding/modifying loaders goes here
      return modifiedRules;
    },
  },
};
```

#### Plugins

Your custom `plugins` array is merged with the default configuration using `webpack-merge`.

To prevent common build errors, the following plugins are automatically de-duplicated, ensuring only one instance is present in the final configuration:

* `ModuleFederationPlugin`
* `MiniCssExtractPlugin`

## Examples

### Add a new loader

To handle file types that build on existing configurations (like SCSS extending CSS), you can add a new rule that reuses parts of an existing loader chain. This ensures consistency and compatibility.

<Note title="Support for common CSS frameworks">
  Code components support popular CSS frameworks and libraries, including Tailwind CSS, styled-components, and Emotion, material UI, shadcn/ui, and more. For detailed guidance on using these frameworks with code components, see the [frameworks and libraries guide](/code-components/frameworks-and-libraries).
</Note>

The example below adds a rule for `.scss` files by finding the existing CSS rule and appending `sass-loader` to it:

```javascript title="webpack.override.js"
module.exports = {
  module: {
    rules: (currentRules) => {
      const currentCSSRule = currentRules.find(
        (rule) =>
          rule.test instanceof RegExp &&
          rule.test.test("test.css") &&
          Array.isArray(rule.use)
      );
      return [
        ...currentRules,
        {
          test: /\.scss$/,
          use: [...currentCSSRule.use, "sass-loader"],
        },
      ];
    },
  },
};
```

### Add a new rule

To process custom file types not handled by the default configuration, add a new rule. The following example adds `markdown-loader` to handle `.md` files:

```javascript title="webpack.override.js"
module.exports = {
  module: {
    rules: (currentRules) => {
      return [
        ...currentRules,
        {
          test: /\.md$/,
          use: ["markdown-loader"],
        },
      ];
    },
  },
};
```

### Extend an existing loader

You can modify the options for an existing loader to customize its behavior. This requires finding the specific rule and then updating its `options` object.

The following example shows how to modify the `css-loader` to change its configuration for CSS Modules:

```javascript title="webpack.override.js"
module.exports = {
  module: {
    // Override the existing rules to modify CSS processing
    rules: (currentRules) => {
      return currentRules.map((rule) => {
        // Find the rule that handles CSS files
        if (
          rule.test instanceof RegExp &&
          rule.test.test("test.css") &&
          Array.isArray(rule.use)
        ) {
          for (const [index, loader] of rule.use.entries()) {
            // Find the css-loader
            if (typeof loader === "object" && loader?.ident === "css-loader") {
              // Preserve existing options and add a custom configuration
              const options =
                typeof loader.options === "object" ? loader.options : {};
              rule.use[index] = {
                ...loader,
                options: {
                  ...options,
                  modules: {
                    exportLocalsConvention: "as-is", // Use original class names
                    namedExport: false, // ⚠️ Allow dot notation access
                  },
                },
              };
            }
          }
        }
        return rule;
      });
    },
  },
};
```

### Add custom plugins

To add custom build-time functionality, provide an array of plugins. This example shows how to add a custom plugin to the configuration:

```javascript title="webpack.override.js"
const MyCustomPlugin = require("./my-custom-plugin");

module.exports = {
  plugins: [
    new MyCustomPlugin({
      option: "value",
    }),
  ],
};
```

### Provide aliases

To create shorter, more convenient import paths, define aliases in the `resolve.alias` object. This example creates an `@` alias that points to the project's root directory:

```javascript title="webpack.override.js"
module.exports = {
  resolve: {
    alias: {
      "@": process.cwd(),
    },
  },
};
```

## Best practices

1. **Use functions for module rules**: Always provide a function for `module.rules` to ensure proper integration with existing rules
2. **Minimal changes**: Only override what you absolutely need to customize
3. **Check for conflicts**: Ensure your custom loaders don't conflict with existing ones

## Troubleshooting

<Accordion title="Configuration not loading">
  * Ensure the `bundleConfig` path in your `webflow.json` is correct and relative to your project root.
  * Verify your configuration file exports a valid object using `module.exports`.
</Accordion>

<Accordion title="Rules not working">
  * Make sure you're providing a function for `module.rules`, not an array.
  * Check that your rule matching logic correctly identifies the rules you want to modify.
</Accordion>

<Accordion title="Plugins conflicting">
  * Remember that `ModuleFederationPlugin` and `MiniCssExtractPlugin` are automatically de-duplicated.
  * Ensure custom plugins don't conflict with the base configuration.
</Accordion>

For more information about webpack configuration options, refer to the [official Webpack documentation](https://webpack.js.org/configuration/).

---

# FAQs and troubleshooting

> Frequently asked questions about code components

Find answers to common questions about code components, from setup to troubleshooting.

## Getting started

<Accordion title="How do I create my first code component?">
  <Steps>
    <Step title="Install the Webflow CLI and dependencies">
      ```bash
      npm i --save-dev @webflow/webflow-cli @webflow/react @webflow/data-types
      ```

      <Note title="Install the Webflow CLI locally">
        Install the Webflow CLI locally to your project to use the `npx webflow library share` command.
      </Note>
    </Step>

    <Step title="Declare your Webflow component">
      [Declare your code component](/code-components/define-code-component) to map your React component to Webflow
    </Step>

    <Step title="Import">
      ```bash
      npx webflow library share
      ```
    </Step>
  </Steps>

  See the [getting started guide](/code-components/introduction/quick-start) for detailed steps.
</Accordion>

<Accordion title="Which frameworks can I use?">
  Imported components support React with TypeScript. You can use:

  * React hooks and functional components
  * TypeScript for type safety
  * Popular React libraries (with some limitations)
  * CSS-in-JS solutions (with configuration)
</Accordion>

<Accordion title="How many components can I share in a library?">
  There's no strict limit on the number of components per library, but keep your bundle size under 50MB for optimal performance.
</Accordion>

## Development and styling

<Accordion title="Why can't I see my component styles?">
  Code components render in Shadow DOM, which isolates styles. Common issues:

  * **Site classes don't work** - Use component-specific CSS classes
  * **CSS-in-JS libraries need configuration** - See [bundling guide](/code-components/bundling-and-import)
</Accordion>

<Accordion title="How do I use my site variables?">
  Reference site variables in your component CSS:

  ```css
  .my-component {
    color: var(--background-primary, #000);
  }
  ```

  Get the exact variable name from the Variables panel in Webflow Designer.
</Accordion>

<Accordion title="Can I use external APIs in my components?">
  Yes, but with important limitations:

  * **Client-side requests only** - All API requests are executed in the browser
  * **Public APIs only** - Don't include auth tokens or secrets
  * **CORS considerations** - APIs must allow cross-origin requests

  Example of safe API usage:

  ```tsx
  useEffect(() => {
    fetch('/api/public-data')
      .then(response => response.json())
      .then(setData);
  }, []);
  ```
</Accordion>

## Imports and updates

<Accordion title="How do I update a component in my library?">
  1. Make your changes locally
  2. Run `npx webflow library share` to deploy
  3. The updated component replaces the previous version

  **Note:** You can't update individual components - the entire library is deployed as one unit.
</Accordion>

<Accordion title="Can I test components locally before importing?">
  Yes, use the local bundling feature:

  ```bash
  npx webflow library bundle --public-path http://localhost:4000/ --dev
  ```

  This creates a `dist` folder you can serve locally for testing.
</Accordion>

<Accordion title="How do I handle component versioning?">
  Currently, code components don't support versioning. Each import replaces the previous version. Consider:

  * Using Git for version control
  * Testing thoroughly before import
  * Keeping import logs for rollback reference
</Accordion>

## Troubleshooting

<Accordion title="My component isn't rendering">
  Check these common issues:

  1. **Build errors** - Check your terminal for compilation errors
  2. **Missing dependencies** - Ensure all imports are available
  3. **Bundle size** - Keep under 50MB limit
  4. **Single root element** - Components must have one root element (no fragments)
</Accordion>

<Accordion title="Styles aren't applying correctly">
  Shadow DOM limitations can cause styling issues:

  * **Site classes** - Use component-specific classes instead
  * **CSS-in-JS** - Configure for Shadow DOM (see [bundling guide](/code-components/bundling-and-import))
  * **Inheritance** - Use `inherit` values for cross-boundary styling
</Accordion>

<Accordion title="Component state isn't persisting">
  Each code component runs in its own React root, so:

  * **React Context doesn't work** across components
  * **Redux/global state** isn't shared between components
  * **Use alternatives** like URL parameters, `localStorage`, or external state management

  Learn more about [component architecture](/code-components/component-architecture) and [state management](/code-components/component-architecture#state-management) when building React components for import into Webflow.
</Accordion>

<Accordion title="Library import fails">
  Common import issues:

  * **Authentication** - Ensure your Workspace token is valid in your `.env` file
  * **Bundle size** - Check if you're under the 50MB limit
  * **Build errors** - Fix any compilation issues first
  * **Network issues** - Check your internet connection
</Accordion>

## Performance and limitations

<Accordion title="What's the bundle size limit?">
  Maximum bundle size is 50MB. To optimize:

  * Use tree shaking
  * Minimize dependencies
  * Remove unused code
  * Optimize images and assets
</Accordion>

<Accordion title="How do I share state between components?">
  Since each component has its own React root, use:

  * **URL parameters** for simple state
  * **`localStorage`/`sessionStorage`** for persistent data
  * **External state management** libraries compatible with isolated roots
  * **Custom events** for component communication

  Learn more about [component architecture](/code-components/component-architecture) and [state management](/code-components/component-architecture#state-management) when building React components for import into Webflow.
</Accordion>

<Accordion title="Can I use third-party libraries?">
  Most React libraries work, but some have limitations:

  * **Multiple entry points** - Libraries with ESM + CJS may not work
  * **Style injection** - CSS-in-JS libraries need Shadow DOM configuration
  * **Global dependencies** - Libraries that modify `window` or `document` may conflict

  Learn more about [styling components](/code-components/styling-components) when building React components for import into Webflow.
</Accordion>

## Advanced topics

<Accordion title="How do I debug my components?">
  1. **Browser developer tools** - Inspect the Shadow DOM
  2. **Console logging** - Add `console.log` statements
  3. **Local bundling** - Use `--dev` flag for better error messages
  4. **Source maps** - Enable for easier debugging
</Accordion>

<Accordion title="Can I use TypeScript?">
  Yes, TypeScript is fully supported. Use `.tsx` files for your components and configure `tsconfig.json` for your project.
</Accordion>

<Accordion title="How do I handle responsive design?">
  Use standard CSS media queries within your component:

  ```css
  .my-component {
    width: 100%;
  }

  @media (min-width: 768px) {
    .my-component {
      width: 50%;
    }
  }
  ```
</Accordion>

<Accordion title="Can I use animations and transitions?">
  Yes, CSS animations and transitions work normally within the Shadow DOM boundary. Use standard CSS animation properties and `@keyframes`.
</Accordion>

---

# Webflow CLI

> Learn about the Webflow CLI and DevLink.

The Webflow CLI is the command line interface for developers to interact with Webflow. Use the CLI to manage DevLink by:

* Authenticating with your Webflow workspace or site
* Bundling components into importable libraries
* Exporting components from Webflow
* Importing components into Webflow

You can use the CLI directly in your project or in CI/CD pipelines to automate library imports.

## Installation

The Webflow CLI is available as a package on npm. You can install it to your project with the following command:

```bash
npm i --save-dev @webflow/webflow-cli
```

{/* <!-- vale on --> */}

## Commands

### Import

To share your library to your Workspace, use the following command:

```bash
npx webflow library share
```

This command will:

* **Authorize your workspace:** The CLI will check for a Workspace authentication token in your `.env` file. If one isn't found, the CLI will prompt you to authenticate by opening a browser window to the Workspace authorization page.
* **Bundle your library:** The CLI will bundle your library, and ask you to confirm the components you want to share.
* **Upload your library to your Workspace**

#### Options

You can use the following options to customize sharing:

| Command Option | Description                                                                                        | Default                                                  |
| -------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| `--manifest`   | Provide the path to the `webflow.json` file.                                                       | Scans the current directory for `webflow.json`.          |
| `--api-token`  | Pass a Workspace API token.                                                                        | Uses `WEBFLOW_WORKSPACE_API_TOKEN` from the `.env` file. |
| `--no-input`   | Avoid prompting or doing anything interactive. Useful for CI/CD pipelines.                         | No                                                       |
| `--verbose`    | Display more information for debugging purposes.                                                   | No                                                       |
| `--dev`        | Bundle in development mode for debugging purposes. This will disable minification and source maps. | No                                                       |

### Bundle

Bundle your library locally for debugging and testing. The `share` command automatically bundles your library, but you can use `bundle` for local development.

```bash
npx webflow library bundle --public-path http://localhost:4000/
```

#### Options

| Command Option    | Description                                                                                        |
| ----------------- | -------------------------------------------------------------------------------------------------- |
| `--public-path`   | Required. The URL where you can serve your library.                                                |
| `--force`         | Forces the bundler to finish compiling, even if there are warnings.                                |
| `--dev`           | Bundle in development mode for debugging purposes. This will disable minification and source maps. |
| `--debug-bundler` | Print the final configuration being used by webpack.                                               |

### Log

Get the logs with debug information for your last library import.

```bash
npx webflow library log
```

## CI/CD workflows

{/* <!-- vale on --> */}

Use the CLI in automated workflows by adding the `--no-input` option to avoid interactive prompts.

**Important:** Implement change detection before sharing to avoid unintentionally removing components:

* Compare current library state with previous import
* Only share when components have actually changed

```bash
npx webflow library share --no-input
```

## Troubleshooting

<Accordion title="Authentication">
  If you're having trouble authenticating with your Workspace, try the following:

  * Check your `.env` file for the `WEBFLOW_WORKSPACE_API_TOKEN` variable. Be sure to use a Workspace API token, not a Site API token.

  * Try running the share command with the `--verbose` flag to see if there is additional information in the output.
    ```bash
    npx webflow library share --verbose
    ```

  * If you're still having trouble, try running the share command with the `--api-token` flag to manually pass in your API token.
    ```bash
    npx webflow library share --api-token <your-api-token>
    ```
</Accordion>

<Accordion title="Prompts for component removal">
  If the CLI is warning you that you're about to remove components, it's because the CLI is comparing the current library state with the previous import. Be sure your component name matches the name in the previous . Otherwise, the CLI will create a new component and remove the old one.
</Accordion>

---

# Define a code component

> Use the declareComponent function to create a code component definition

## `declareComponent(Component, data)`

The `declareComponent` function is used to create a code component declaration. See the [declare code component guide](/code-components/define-code-component) for more information.

## Syntax

```typescript
declareComponent(Component, data): void;
```

### Parameters

* **`Component`**: The React component to declare
* **`Data`**: An object with: Component metadata, prop definitions, and optional configurations

#### Data object

The `data` object is used to define the component's metadata, prop definitions, and optional configurations. It takes the following properties:

| Property       | Type   | Description                                                                                                                        |
| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| `name`         | string | The name of the component                                                                                                          |
| `description?` | string | A description of the component (optional)                                                                                          |
| `group?`       | string | Group of the component in the component panel (optional)                                                                           |
| `props`        | object | Props for the user to edit in Webflow. See the [prop types reference](/code-components/reference/prop-types) for more information. |
| `options?`     | object | Optional configurations including applying tag selectors, and managing SSR.                                                        |

## Example

```tsx title={"Button.webflow.tsx"}
import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { Button } from './Button';

// Declare the component
export default declareComponent(Button, {

  // Component metadata
  name: "Button",
  description: "A button component with a text and a style variant",
  group: "Interactive",

  // Prop definitions
  props: {
    text: props.Text({ 
        name: "Button Text",
        defaultValue: "Click me"
    }),
    variant: props.Variant({ 
        name: "Style", 
        options: ["primary", "secondary"],
        defaultValue: "primary"
    }),
  },
  // Optional configuration
  options: {
    applyTagSelectors: true,
  },
});
```

---

# Use Webflow Context

> Access the current Webflow context to understand the rendering environment and mode.

## `useWebflowContext()`

Call the `useWebflowContext` hook to get information about the current Webflow environment.

Webflow provides multiple modes to support different parts of the design process including designing, page building, previewing, and publishing. The `useWebflowContext` hook provides information about the current mode and locale to help you adapt your component's behavior and content accordingly.

Use `useWebflowContext` when you need to:

* **Adapt component behavior** depending on the mode, provide placeholders, expanded states, or guidance for designers.
* **Control interactivity** - When in a non-interactive state, provide
* **Handle localization** with locale-specific content and formatting

## Syntax

```typescript
useWebflowContext(): WebflowContext;

// Type definitions
type WebflowContext = {
  mode: WebflowMode;
  interactive: boolean;
  locale: string | null;
};

type WebflowMode = 
  | "design" 
  | "build" 
  | "edit" 
  | "preview" 
  | "component-preview" 
  | "comment" 
  | "analyze" 
  | "publish";
```

## Returns

**`WebflowContext`** - An object containing the current mode, interactive state, and locale.

### WebflowContext properties

| Property      | Type             | Description                                                                      |
| ------------- | ---------------- | -------------------------------------------------------------------------------- |
| `mode`        | `WebflowMode`    | The current Webflow mode                                                         |
| `interactive` | `boolean`        | Whether the component is in an interactive state                                 |
| `locale`      | `string \| null` | The current ISO string for the current locale, or `null` if the locale isn't set |

## Examples

### Conditional rendering based on interactive state

In this example, the accordion component opens by default in design mode (when not interactive) so designers can see the full content while working.

```tsx title={"interactive.tsx"}
import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
import { useWebflowContext } from '@webflow/react';

const MyComponent =  ({
    text,
    variant,
}: {
    text: string;
    variant: string;
}) => {
  const { interactive } = useWebflowContext();
  
  // Open accordion by default in design mode (when not interactive)
  // so designers can see the full content while working
  return (
    <div>
      <h1>My Component</h1>
      <Accordion defaultExpanded={!interactive}>
        <AccordionSummary
          expandIcon={<span>▼</span>}
          aria-controls="content-section-content"
          id="content-section-header"
        >
          <Typography>Content Section</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            This content is visible by default in design mode.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

export default MyComponent;
```

### Locale-aware content

In this example, the component automatically switches to Spanish and French based on the locale.

```tsx title={"locale.tsx"}
import { useWebflowContext } from '@webflow/react';

const LocalizedComponent = () => {

// Get the current locale
  const { locale } = useWebflowContext();
  
//  Get the localized content based on the locale
  const getLocalizedContent = () => {
    switch (locale) {
      case 'es':
        return {
          title: 'Bienvenido a nuestro sitio',
          description: 'Descubre nuestros productos y servicios',
          cta: 'Comenzar ahora'
        };
      case 'fr':
        return {
          title: 'Bienvenue sur notre site',
          description: 'Découvrez nos produits et services',
          cta: 'Commencer maintenant'
        };
      default:
        return {
          title: 'Welcome to our site',
          description: 'Discover our products and services',
          cta: 'Get started'
        };
    }
  };
  
  const content = getLocalizedContent();
  
//  Render the localized content
  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <h2>{content.title}</h2>
      <p>{content.description}</p>
      <button 
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        {content.cta}
      </button>
    </div>
  );
}

export default LocalizedComponent;
```

---

# Prop Types

> Learn about the different prop types available for code components.

Prop types define the configurable properties that designers can edit in the Webflow designer. When you create a code component, you specify which React component properties to expose to designers, and how they should appear in Webflow.

## Defining props in your code component

In your `declareComponent` function, include a `props` property that maps your React component's properties to Webflow prop types. This tells Webflow:

* Which properties designers can configure.
* How each property should appear in the designer
* Which values are valid for each property
* Default values for each property (for certain prop types)

## Basic usage

```tsx title={"Button.webflow.tsx"}
import {Button} from './Button';
import { props } from '@webflow/data-types';
import { declareComponent } from '@webflow/react';

export default declareComponent(Button, {
  name: 'Button',
  description: 'A button component',
  group: 'Interaction',
  props: {
    // Expose the 'text' prop as a text field
    text: props.Text({
      name: 'Button text',
      defaultValue: 'Hello World!',
    }),
    
    // Expose the 'variant' prop as a dropdown named 'Style'
    variant: props.Variant({
      name: 'Style',
      options: ['primary', 'secondary'],
    }),
  },
});

```

## Available prop types

Choose the appropriate prop type based on what you want designers to configure:

### Text and content

* **[Text](/code-components/reference/prop-types/text)** - Single line text input
* **[Rich Text](/code-components/reference/prop-types/rich-text)** - Multi-line text with formatting
* **[Text Node](/code-components/reference/prop-types/text-node)** - Single and Multi-line text that designers can edit on the canvas
* **[Link](/code-components/reference/prop-types/link)** - URL input with validation

### Assets and data

* **[Image](/code-components/reference/prop-types/image)** - Image upload and selection
* **[Number](/code-components/reference/prop-types/number)** - Numeric input with validation
* **[Boolean](/code-components/reference/prop-types/boolean)** - True/false toggle

### Structure and styles

* **[Variant](/code-components/reference/prop-types/variant)** - Dropdown with predefined options
* **[Visibility](/code-components/reference/prop-types/visibility)** - Show/hide controls
* **[Slot](/code-components/reference/prop-types/slot)** - Content areas for other components
* **[ID](/code-components/reference/prop-types/id)** - HTML Element ID

## Prop values

Each prop type returns a value to your React component. For example, `props.Text` returns a string, while `props.Link()` returns an object with `href` and `target` properties.

Most times, you can map the prop values directly. For example, if your React component expects `text` as a string, you can map it to a `props.Text` prop.

However, if your React component expects specific properties from the returned object, you need to create a wrapper component that transforms the data. For example, the `props.Link()` prop type returns the following object:

```tsx title="Link prop value"
{
  href: string;
  target?: "_self" | "_blank" | string;
  preload?: "prerender" | "prefetch" | "none" | string;
}
```

If your React component expects `href` and `target` separately, you need to create a wrapper component that transforms the data:

{/* <!-- vale off --> */}

<CodeBlocks>
  ```tsx title={"Button.webflow.tsx"}
  import { props, PropType, PropValues } from "@webflow/data-types";
  import { declareComponent } from "@webflow/react";
  import React from "react";
  import Button, { ButtonProps } from "./Button";

  // Remove href and target from the props to prevent conflicts
  type WebflowButtonProps = {
    link: PropValues[PropType.Link];
  } & Omit<ButtonProps, "href" | "target">; // Remove buttonText from the props

  // Wrapper that destructures the object returned from `props.Link` and passes the href and target to the button component as expected.
  const WebflowButton = ({
    link: { href, target },
    ...props
  }: WebflowButtonProps) => {
    return (
      <Button href={href} target={target} {...props} />
    );
  };

  // Component declaration for Webflow
  export default declareComponent(WebflowButton, {
    name: "Button",
    props: {
      buttonText: props.Text({ 
        name: "Text", 
        defaultValue: "Lorem ipsum" 
      }),
      link: props.Link({ name: "Link" }),
    },
  });


  ```

  ```tsx title={"Button.tsx"}
  // React component expects href and target separately
  interface ButtonProps {
      buttonText: string;
      href: string;
      target: string;
  }

  export const Button = ({ buttonText, href, target }: ButtonProps) => {
      return <a href={href} target={target}>{buttonText}</a>;
    };
    
  ```
</CodeBlocks>

{/* <!-- vale on --> */}

This example definition file:

* Imports the `PropType` and `PropValues` types from the `@webflow/data-types` package.
* Defines a link prop for the `Button` component. This will provide a link picker in Webflow and return the `href` and `target` values.
* Adjusts the TypeScript types of the `Button` component to include the `link` object returned from the `props.Link` prop type.
* Wraps the `Button` component in a new component that gets the `href` and `target` values from the `link` object and passes them to the `Button` component as expected.

## Best practices

### Provide helpful defaults

Always set meaningful default values so components work immediately when added to a page. Some prop types have default values built in, like `props.Text` which defaults to an empty string. However, you may want to set a default value in your React component as well.

```tsx
title: props.Text({
  name: 'Button Text',
  defaultValue: 'Click me', // Component works out of the box
}),
```

### Use succinct names

The `name` property appears in the Webflow designer, keep them short and title case. Use descriptions to provide more context.

### Group related props

Consider how props will appear together in the designer. Use the `group` property to group related props together.

```tsx title="Card component"
props: {
  heroTitle: props.Text({ name: 'Hero Title', group: 'Content' }),
  text: props.Text({ name: 'Text', group: 'Button' }),
  style: props.Variant({ name: 'Style', group: 'Button' }),
  size: props.Variant({ name: 'Size', group: 'Button' }),
}
```

## Example: Complete component

Here's how you might define props for a button component:

```tsx title={"Card.webflow.tsx"}
import { props } from '@webflow/data-types';
import { declareComponent } from '@webflow/react';
import Card from './Card';

export default declareComponent(Card, {
  name: 'Card',
  description: 'A card component',
  group: 'Content',
  props: {
    variant: props.Variant({  
      name: 'Variant',  
      options: ['Horizontal', 'Vertical'],  
      }),  
    title: props.Text({  
      name: 'Title',  
      defaultValue: 'Card title',  
    }),  
    text: props.Text({  
      name: 'Text',  
      defaultValue: 'Hello World!'
    }),  
    buttonVisible: props.Visibility({  
      group: 'Button',  
      name: 'Visibility',  
      defaultValue: true,  
    }),  
    buttonVariant: props.Variant({  
      group: 'Button',  
      name: 'Variant',  
      options: ['Primary', 'Secondary', 'Outline'],  
    }),  
    buttonText: props.Text({  
      group: 'Button',  
      name: 'Text',  
      defaultValue: 'Click me',  
    }),  
    buttonLink: props.Link({  
      group: 'Button',  
      name: 'Link',  
    }),  
  },
});
```

---

# Text

> Configure a Text property for a code component

Add a Text property to your component for designers to input plain text content.

## Syntax

```tsx
// Prop definition
props.Text({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: string,
})

// Prop value
string
```

### Prop Definition

Define the Text prop in your Webflow code component with a name. Optionally, you can add a default value, group, and tooltip text.

```tsx
props.Text({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: string,
})
```

<Tip>
  You can use `props.String` as an alias for the `props.Text` prop type.
</Tip>

#### Properties

* `name`: The name for the property.
* `group`: The group for this property. (optional)
* `tooltip`: The tooltip for the property. (optional)
* `defaultValue`: Default value for all component instances. (optional)

#### Example

```tsx title={"MyComponent.Webflow.tsx"}
import { declareComponent } from '@webflow/react';    
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";

export default declareComponent(MyComponent, {
    name: "MyComponent",
    description: "A component with a Text property",
    props: {
        title: props.Text({
            name: "Title",
            group: "Content",
            defaultValue: "Hello World!"
        })
    }
});
```

### Prop Value

The Text prop provides a string value to your React component.

```tsx title="PropType.Text"
string
```

<div>
  <div>
    #### Properties

    * `n/a`
  </div>

  <div>
    #### Webflow properties panel

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/523987d0c97f665398ab5af2538991eef98a7caffee9aa3e5c2b9fd074e776f6/products/code-components/pages/reference/prop-types/assets/text.png" alt="Text property in the Webflow panel" />
      </Frame>
    </div>
  </div>
</div>

#### Example

```tsx title={"MyComponent.tsx"}
import React from "react";

interface MyComponentProps {
title?: string;
}

export const MyComponent = ({ title }: MyComponentProps) => {
return (
    <h1 className="title">
    {title}
    </h1>
);
}

```

## When to use

Use a Text prop when you want designers to:

* Input simple text content
* Set titles, labels, or descriptions

## Best practices

* Provide meaningful default values so the component renders when added to the canvas
* Use descriptive prop names

---

# Rich Text

> Configure a Rich Text property for a code component

Add a Rich Text property to your component so designers can create formatted content with HTML markup.

## Syntax

```tsx
// Prop definition
props.RichText({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: string,
})

// Prop value
ReactNode
```

### Prop definition

Define the Rich Text prop in your Webflow code component with a name. Optionally, you can add a group and tooltip text.

```tsx
props.RichText({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: string,
})
```

#### Properties

* `name`: The name for the property.
* `group`: The group for this property. (optional)
* `tooltip`: The tooltip for the property. (optional)
* `defaultValue`: Default value for all component instances. (optional)

#### Example

```tsx title={"MyComponent.webflow.tsx"}
import { declareComponent } from '@webflow/react';    
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";

export default declareComponent(MyComponent, {
    name: "MyComponent",
    description: "A component with a Rich Text property",
    props: {
        content: props.RichText({
            name: "Content",
            group: "Content"
        })
    }
});

```

### Prop value

The Rich Text prop provides formatted HTML content to your React component as a `ReactNode`.

```tsx title="PropType.RichText"
ReactNode
```

<div>
  <div>
    #### Properties

    * `n/a`
  </div>

  <div>
    #### Webflow properties panel

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/f74e012d1228098c4cc8bbe57887ce669374e58afc4608dd58db3a7c8af69644/products/code-components/pages/reference/prop-types/assets/rich-text.png" alt="Rich Text property in the Webflow panel" />
      </Frame>
    </div>
  </div>
</div>

#### Example

```tsx title={"MyComponent.tsx"}
import React from "react";

interface MyComponentProps {
content?: React.ReactNode;
}

export const MyComponent = ({ content }: MyComponentProps) => {
return (
    <div className="content-wrapper">
    {content}
    </div>
);
}

```

## When to use

Use a Rich Text prop when you want designers to:

* Create formatted content with bold, italic, links
* Add structured content like headings and lists
* Include HTML markup in their content

## Best practices

* Provide meaningful default values so the component renders when added to the canvas
* Handle missing content gracefully
* Consider content styling and layout
* Test with various HTML structures

---

# Text Node

> Configure a Text Node property for a code component

Add a Text Node property to your component. In the Webflow designer, designers can edit the text content of the component on the canvas or via the properties panel.

## Syntax

```tsx
// Prop definition
props.TextNode({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: string,
    multiline?: boolean,
})

// Prop value
ReactNode
```

### Prop definition

Define the Text Node prop in your Webflow code component with a name. Optionally, you can add a group and tooltip text.

```tsx
props.TextNode({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: string,
    multiline?: boolean,
})
```

#### Properties

* `name`: The name for the property.
* `multiline`: Whether the property allows multiple lines of text. (optional)
* `group`: The group for this property. (optional)
* `tooltip`: The tooltip for the property. (optional)
* `defaultValue`: Default value for all component instances. (optional)

#### Example

```tsx title={"InfoSection.webflow.tsx"}
import { declareComponent } from "@webflow/react";
import { props } from "@webflow/data-types";
import { InfoSection } from "./InfoSection";

export default declareComponent(InfoSection, {
  name: "Info Section",
  description: "A component with a Text Node property",
  props: {
    title: props.TextNode({
      name: "Title",
      group: "Content",
      defaultValue: "Hello World",
    }),
    description: props.TextNode({
      name: "Description",
      multiline: true,
      group: "Content",
      defaultValue: "This is my first Webflow Code Component",
    }),
  },
});

```

### Prop value

The Text Node prop provides formatted HTML content to your React component as a `ReactNode`.

```tsx
ReactNode
```

<div>
  <div>
    #### Properties

    * `n/a`
  </div>

  <div>
    #### Webflow properties panel

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/ca6b827c54df038d715bf193972ff729315317b440205a51b54c45b47a5ffff9/products/code-components/pages/reference/prop-types/assets/text-node.png" alt="Text Node property in the Webflow panel" />
      </Frame>
    </div>
  </div>
</div>

#### Example

```tsx title={"InfoSection.tsx"}
import React from "react";

interface InfoSectionProps {
  title: React.ReactNode;
  description: React.ReactNode;
}

export const InfoSection = ({ title, description }: InfoSectionProps) => {
  return (
    <>
      <h2>{title}</h2>
      <p>{description}</p>
    </>
  );
};

```

## When to use

Use a Text Node prop when you want designers to:

* Edit text content in the webflow editor
* Create text content with HTML markup
* Add structured content like headings and lists

## Best practices

* Provide meaningful default values so the component renders when added to the canvas
* Handle missing content gracefully
* Consider content styling and layout
* Test with various HTML structures

---

# Link

> Configure a Link property for a code component

Add a Link property to your component so designers can create clickable links with full control over URL, target behavior, and preload settings.

## Syntax

```tsx
// Prop definition
props.Link({
    name: string,
    group?: string,
    tooltip?: string,
})

// Prop value
{
    href: string,
    target?: "_self" | "_blank" | string,
    preload?: "prerender" | "prefetch" | "none" | string,
}   
```

### Prop definition

Define the Link prop in your Webflow code component with a name. Optionally, you can add a group and tooltip text.

```tsx
props.Link({
    name: string,
    group?: string,
    tooltip?: string,
})
```

#### Properties

* `name`: The name for the property.
* `group`: The group for this property (optional).
* `tooltip`: The tooltip for this property (optional).

### Prop value

The Link prop value provides an object to your React component with the following properties:

```tsx title="PropType.Link"
{
    href: string,
    target?: "_self" | "_blank" | string,
    preload?: "prerender" | "prefetch" | "none" | string,
}
```

<div>
  <div>
    #### Properties returned to the React component

    * `href`: The URL destination.
    * `target`: How the link opens (optional).
    * `preload`: Preload behavior (optional).
  </div>

  <div>
    #### Webflow properties panel

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/efa18be417a6ff044fe6eff73048c955739914bfa61685c867eeff54ab43dfbc/products/code-components/pages/reference/prop-types/assets/link.png" alt="Link property in the Webflow panel" />
      </Frame>
    </div>
  </div>
</div>

#### Examples

<Tabs>
  <Tab title="Direct mapping">
    Define a Link property in your Webflow component, that directly maps to a link property in your React component. If your React component expects a `href` and `target` property, see the [prop mapping](#prop-mapping) example below.

    <CodeBlocks>
      ```tsx title={"Button.webflow.tsx"}
      import { declareComponent } from '@webflow/react';    
      import { props } from '@webflow/data-types';
      import { Button } from "./Button";

      export default declareComponent(Button, {
      name: "Button",
      description: "A Button component with a Link property",
      props: {
          link: props.Link({
              name: "Button Link",
              group: "Navigation"
          }),
          text: props.Text({
              name: "Button Text",
              group: "Navigation"
          })
      }
      });

      ```

      ```tsx title={"Button.tsx"}
      import React from "react";

      export interface ButtonProps {
          text?: string;
          link?: {
              href: string;
              target?: "_self" | "_blank" | string;
              preload?: "prerender" | "prefetch" | "none" | string;
          };
      }

          export const Button = ({ text, link }: ButtonProps) => {
          if (!link) return null;

          return (
              <a 
              href={link.href}
              target={link.target}
              rel={link.target === "_blank" ? "noopener noreferrer" : undefined}
              >
              {text}
              </a>
          );
      }
      ```
    </CodeBlocks>
  </Tab>

  <Tab title="Prop mapping">
    This example shows how to define a Link property in your Webflow component, with a wrapper to map the link property to the `href` and `target` properties in your React component.

    <CodeBlocks>
      ```tsx title={"Button.webflow.tsx"}
      import { props, PropType, PropValues } from "@webflow/data-types";
      import { declareComponent } from "@webflow/react";
      import React from "react";
      import { Button, ButtonProps } from "./Button";

      // Remove href and target from the props to prevent conflicts
      type WebflowButtonProps = {
        link: PropValues[PropType.Link];
      } & Omit<ButtonProps, "href" | "target">; // Remove buttonText from the props

      // Wrapper that destructures the object returned from `props.Link` and passes the href and target to the button component as expected.
      const WebflowButton = ({
        link: { href, target },
        ...props
      }: WebflowButtonProps) => {
        return <Button href={href} target={target} {...props} />;
      };

      // Component declaration for Webflow
      export default declareComponent(WebflowButton, {
        name: "Button",
        props: {
          text: props.Text({
            name: "Text",
            defaultValue: "Lorem ipsum",
          }),
          link: props.Link({ name: "Link" }),
        },
      });

      ```

      ```tsx title={"Button.tsx"}
      import React from "react";

      export interface ButtonProps {
          text?: string;
          href?: string;
          target?: "_self" | "_blank" | string;
      }

      export const Button = ({ text, href, target }: ButtonProps) => {
          if (!href) return null;

          return (
              <a 
              href={href}
              target={target}
              rel={target === "_blank" ? "noopener noreferrer" : undefined}
              >
              {text}
              </a>
          );
      }
      ```
    </CodeBlocks>
  </Tab>
</Tabs>

## When to use

Use a Link prop when you want designers to:

* Set URLs for buttons or text links
* Control link behavior (same tab vs new tab)
* Create navigation components

## Best practices

* Handle missing links gracefully
* Add proper rel attributes for security
* Consider accessibility for link text

---

# Image

> Configure an Image property for a code component

Add an Image property to your component so designers can select images from their Webflow asset library.

## Syntax

```tsx
// Prop definition
props.Image({
    name: string,
    group?: string,
    tooltip?: string,
})

// Props returned to the React component
{
    src: string;
    alt?: string;
}
```

### Prop definition

Define the Image prop in your Webflow code component with a name. Optionally, you can add a group and tooltip text.

```tsx
props.Image({
    name: string,
    group?: string,
    tooltip?: string,
})
```

#### Properties

* `name`: The name for the property.
* `group`: The group for this property (optional).
* `tooltip`: The tooltip for this property (optional).

### Prop value

The Image prop provides both the image URL and alt text to your React component, making it easy to display dynamic images with proper accessibility.

```tsx title="PropType.Image"
{
    src: string;
    alt?: string;
}
```

<div>
  <div>
    #### Properties returned to the React component

    * `src`: The source URL of the image.
    * `alt`: The alt text for the image (optional).
  </div>

  <div>
    #### Webflow properties panel

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/34b3c448d91a85db2e2a34a9bd1b82d1b5d4f05f4e64e7a54fa53a00a10a7000/products/code-components/pages/reference/prop-types/assets/image.png" alt="Image property in the Webflow panel" />
      </Frame>
    </div>
  </div>
</div>

### Examples

<Tabs>
  <Tab title="Direct mapping">
    Define an Image property in your Webflow component, that directly maps to an image property in your React component.

    <CodeBlocks>
      ```tsx title={"Hero.webflow.tsx"}
      import { declareComponent } from '@webflow/react';    
      import { props } from '@webflow/data-types';
      import { Hero } from "./Hero";

      export default declareComponent(Hero, {
          name: "Hero",
          description: "A Hero component with an Image property",
          props: {
              image: props.Image({
                  name: "Hero Image",
                  group: "Content"
              })
          }
      });

      ```

      ```tsx title={"Hero.tsx"}
      import React from "react";

      interface HeroProps {
      image?: {
          src: string;
          alt?: string;
      };
      }

      export const Hero = ({ image }: HeroProps) => {
      if (!image) return null;

      return (
          <div className="image-container">
          <img 
              src={image.src} 
              alt={image.alt || ""} 
              className="component-image"
          />
          </div>
      );
      }

      ```
    </CodeBlocks>
  </Tab>

  <Tab title="Prop mapping">
    This example shows how to define an Image property in your Webflow component, with a wrapper to map the image property to the `src` and `alt` properties in your React component.

    <CodeBlocks>
      ```tsx title={"Hero.webflow.tsx"}
      import { props, PropType, PropValues } from "@webflow/data-types";
      import { declareComponent } from "@webflow/react";
      import React from "react";
      import { Hero, HeroProps } from "./Hero";


      // Declare type for the Webflow wrapper props
      type HeroWebflowComponentProps = {
        image: PropValues[PropType.Image]; // Imapge prop uses the Webflow Image prop type
      } & Omit<HeroProps, "src" | "alt">; // Remove src and alt from the props to prevent conflicts

      // Wrapper that destructures the object returned from `props.Image` and passes the src and alt to the image component as expected.
      const HeroWebflowComponent = ({
        image: { src, alt },
        ...props
      }: HeroWebflowComponentProps) => {
        return <Hero src={src} alt={alt} {...props} />;
      };

      // Component declaration for Webflow
      export default declareComponent(HeroWebflowComponent, {
        name: "Hero",
        props: {
          image: props.Image({ name: "Image" }),
        },
      });

      ```

      ```tsx title={"Hero.tsx"}
      import React from "react";

      export interface HeroProps {
          src?: string;
          alt?: string;
      }

      export const Hero = ({ src, alt }: HeroProps) => {
      if (!src) return null;

      return (
          <div className="image-container">
          <img 
              src={src} 
              alt={alt || ""} 
              className="component-image"
          />
          </div>
      );
      }

      ```
    </CodeBlocks>
  </Tab>
</Tabs>

## When to use

Use an Image prop when you want designers to:

* Select images from their asset library
* Change images without touching code
* Set alt text for accessibility

## Best practices

* Handle missing images
* Use alt text for accessibility
* Consider responsive design needs

---

# Number

> Configure a Number property for a code component

Add a Number property to your component so designers can input numeric values.

## Syntax

```tsx
// Prop definition
props.Number({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: number,
    min?: number,
    max?: number,
    decimals?: number,
})

// Prop value
number
```

### Prop definition

Define the Number prop in your Webflow code component with a name. Optionally, you can add a group, tooltip text, and a default value, as well as numeric constraints like min, max, and decimals.

```tsx
props.Number({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: number,
    min?: number,
    max?: number,
    decimals?: number,
})
```

#### Properties

* `name`: The name for the property.
* `group`: The group for this property. (optional)
* `tooltip`: The tooltip for the property. (optional)
* `defaultValue`: Default value for all component instances. (optional)
* `min`: Minimum value allowed. (optional)
* `max`: Maximum value allowed. (optional)
* `decimals`: Maximum number of decimal places. (optional)

#### Example

```tsx title={"MyComponent.webflow.tsx"}
import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";

export default declareComponent(MyComponent, {
    name: "MyComponent",
    description: "A component with a Number property",
    props: {
        count: props.Number({
            name: "Item Count",
            group: "Settings",
            defaultValue: 5,
            min: 1,
            max: 100,
            decimals: 0
        })
    }
});

```

### Prop value

The Number prop provides a numeric value to your React component.

```tsx title="PropType.Number"
number
```

<div>
  <div>
    #### Properties

    * `n/a`
  </div>

  <div>
    #### Webflow properties panel

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/e04f00d5f53fbbfd75c3b29788fad129e83b95e9c352e0cb9d4411fd7a40c5b1/products/code-components/pages/reference/prop-types/assets/number.png" alt="Number property in the Webflow panel" />
      </Frame>
    </div>
  </div>
</div>

#### Example

```tsx title={"MyComponent.tsx"}
import React from "react";

interface MyComponentProps {
count?: number;
}

export const MyComponent = ({ count }: MyComponentProps) => {
return (
    <div className="counter">
    <span>Count: {count}</span>
    </div>
);
}

```

## When to use

Use a Number prop when you want designers to:

* Set numeric values like counts, sizes, or durations
* Control values within specific ranges
* Provide sensible defaults for components
* Limit decimal precision for cleaner data

## Best practices

* Set appropriate min/max values for your use case
* Use decimals: 0 for whole numbers, 1-2 for currency/percentages
* Provide meaningful default values
* Consider the range designers will need

---

# Boolean

> Configure a Boolean property for a code component

Add a Boolean property to your component to change behavior, interactivity, or styles.

Use a Boolean prop when you want designers to:

* Enable or disable a feature
* Toggle styling variations
* Create behavior variations

## Syntax

```tsx
// Prop definition
props.Boolean({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: boolean,
    trueLabel?: string,
    falseLabel?: string,
})

// Prop value
boolean
```

### Prop definition

Define the Boolean prop in your Webflow code component with a name.

Optionally, you can add a default value and labels for the true and false values. Additionally, you can add a group and tooltip text.

```tsx
props.Boolean({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: boolean,
    trueLabel?: string,
    falseLabel?: string,
})
```

#### Properties

* `name`: The name for the property.
* `group`: The group for this property (optional).
* `tooltip`: The tooltip for this property (optional).
* `defaultValue`: Default value for all component instances. (optional)
* `trueLabel`: Label for the `true` value in the props panel. (optional)
* `falseLabel`: Label for the `false` value in the props panel. (optional)

#### Example

```tsx title={"MyComponent.webflow.tsx"}
import { declareComponent } from '@webflow/react';    
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";

export default declareComponent(MyComponent,    {
    name: "MyComponent",
    description: "A component with boolean and text properties",
    props: {
        showDetails: props.Boolean({
            name: "Show Details",
            group: "Content",
            defaultValue: false,
            trueLabel: "Show Details",
            falseLabel: "Hide Details"
        })
    }
});
```

### Prop value

The Boolean prop provides a `boolean` value to your React component:

```tsx title="PropType.Boolean"
boolean
```

<div>
  <div>
    #### Properties

    * `n/a`
  </div>

  <div>
    #### Webflow properties panel

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/325aa820f6e581dbd23fc8e09b85d44904f9b788dea371b0217a06979c6a58c5/products/code-components/pages/reference/prop-types/assets/boolean.png" alt="Boolean property in the Webflow panel" />
      </Frame>
    </div>
  </div>
</div>

#### Example

```tsx title={"MyComponent.tsx"}
import React from "react";

interface MyComponentProps {
  showDetails?: boolean;
}

export const MyComponent = ({ showDetails }: MyComponentProps) => {
  return (
    <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
      <h3>Welcome Explorers!</h3>
      <p>Unlock your potential with our amazing features.</p>
      
      {/* When showDetails is true, reveal additional content */}
      {showDetails && (
        <div style={{ marginTop: '12px', padding: '12px', backgroundColor: '#f0f8ff', borderRadius: '4px' }}>
          <p><strong>🚀 Ready to soar higher?</strong></p>
          <ul>
            <li>Discover hidden capabilities that transform your experience</li>
            <li>Access exclusive insights that drive success</li>
            <li>Unleash the full power of what's possible</li>
          </ul>
        </div>
      )}
    </div>
  );
}
```

---

# Variant

> Configure a Variant property for a code component

Add a Variant property to your component for designers to choose from a predefined list of options.

## Syntax

```tsx
// Prop definition
props.Variant({
    name: string,
    options: string[],
    group?: string,
    tooltip?: string,
    defaultValue?: string,
})

// Prop value
string
```

### Prop Definition

Define the Variant prop in your Webflow code component with a name and list of options. Optionally, you can add a group, tooltip text, and a default value that matches one of the pre-defined options.

```tsx
props.Variant({
    name: string,
    options: string[],
    group?: string,
    tooltip?: string,
    defaultValue?: string,
})
```

#### Properties

* `name`: The name for the property.
* `group`: The group for this property. (optional)
* `tooltip`: The tooltip for the property. (optional)
* `options`: Array of available variant options.
* `defaultValue`: Default selected option. (optional)

#### Example

```tsx title={"MyComponent.webflow.tsx"}
import { declareComponent } from '@webflow/react';    
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";

export default declareComponent(MyComponent, {
    name: "MyComponent",
    description: "A component with a Variant property",
    props: {
        style: props.Variant({
            name: "Button Style",
            group: "Style",
            options: ["Primary", "Secondary", "Tertiary"],
            defaultValue: "Primary"
        })
    }
});
```

### Prop Value

The Variant prop provides a string value representing the selected option to your React component.

```tsx title="PropType.Variant"
string
```

<div>
  <div>
    #### Properties

    * `n/a`
  </div>

  <div>
    #### Webflow properties panel

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/46b3b9ebd245d3ef0a174be1b5d5651381db000b008210b1a91f4afeeeafdc59/products/code-components/pages/reference/prop-types/assets/variant.png" alt="Variant property in the Webflow panel" />
      </Frame>
    </div>
  </div>
</div>

#### Example

```tsx title={"MyComponent.tsx"}
import React from "react";

interface MyComponentProps {
    style?: "Primary" | "Secondary" | "Tertiary";
}

export const MyComponent = ({ style }: MyComponentProps) => {
    return (
        <button className={`button button--${style?.toLowerCase()}`}>
        Click me
        </button>
    );
}
```

## When to use

Use a Variant prop when you want designers to:

* Choose from predefined visual styles
* Switch between component variations / themes
* Control component appearance

## Best practices

* Use clear, descriptive option names
* Provide a sensible default value
* Keep options list manageable

---

# Visibility

> Configure a Visibility property for a code component

Add a Visibility property to your component to choose whether to show or hide elements in Webflow.

## Syntax

```tsx
// Prop definition
props.Visibility({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: boolean,
})

// Prop value
boolean
```

### Prop definition

Define the Visibility prop in your Webflow code component with a name. Optionally, you can add a group, tooltip text, and a default value.

```tsx
props.Visibility({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: boolean,
})
```

#### Properties

* `name`: The name for the property.
* `group`: The group for this property. (optional)
* `tooltip`: The tooltip for the property. (optional)
* `defaultValue`: Default visibility state. (optional)

#### Example

```tsx title={"MyComponent.webflow.tsx"}
import { declareComponent } from '@webflow/react';    
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";

export default declareComponent(MyComponent, {
    name: "MyComponent",
    description: "A component with a Visibility property",
    props: {
        isVisible: props.Visibility({
            name: "Show Element",
            group: "Display",
            defaultValue: true
        })
    }
});
```

### Prop value

The Visibility prop provides a `boolean` value to your React component.

```tsx title="PropType.Visibility"
boolean
```

<div>
  <div>
    #### Properties

    * `n/a`
  </div>

  <div>
    #### Webflow properties panel

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/9b7b102b642ca7093522bcf31663a7936e1b21a30580e6dca96cea526fd310af/products/code-components/pages/reference/prop-types/assets/visibility.png" alt="Visibility property in the Webflow panel" />
      </Frame>
    </div>
  </div>
</div>

#### Example

```tsx title={"MyComponent.tsx"}
import React from "react";

interface MyComponentProps {
isVisible?: boolean;
}

export const MyComponent = ({ isVisible }: MyComponentProps) => {
if (!isVisible) return null;

return (
    <div className="element">
    This element is visible
    </div>
);
}
```

```

## When to use

Use a Visibility prop when you want designers to:
- Show or hide elements conditionally
- Control component display states
- Create toggled content
- Build conditional layouts

## Best practices
- Provide sensible default values
- Handle hidden states gracefully
- Consider accessibility implications
```

---

# Slot

> Configure a Slot property for a code component

Add a Slot property to your component so designers can insert any child component

## Syntax

```tsx
// Prop definition
props.Slot({
    name: string,
    group?: string,
    tooltip?: string,
}) 

// Prop value
ReactNode
```

### Prop definition

Define the Slot prop in your Webflow code component with a name. Optionally, you can add a group and tooltip text.

```tsx
props.Slot({
    name: string,
    group?: string,
    tooltip?: string,
})
```

<Tip>
  You can use `props.Children` as an alias for the `props.Slot` prop type.
</Tip>

#### Properties

* `name`: The name for the property.
* `group`: The group for this property. (optional)
* `tooltip`: The tooltip for the property. (optional)

#### Example

```tsx title={"MyComponent.webflow.tsx"}
import { declareComponent } from '@webflow/react';    
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";

export default declareComponent(MyComponent, {
    name: "MyComponent",
    description: "A component with a Slot property",
    props: {
        children: props.Slot({
            name: "Content",
            group: "Content"
        })
    }
});

```

### Prop value

The Slot prop provides child components to your React component as a single `ReactNode` object.

```tsx title="PropType.Slot"
ReactNode
```

<div>
  <div>
    #### Properties

    * `n/a`
  </div>

  <div>
    #### Webflow properties panel

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/8b2b448950fc5ebc7ccded33ce24ac1cbe0612a150a53fbf5b51e3dcdc1fad11/products/code-components/pages/reference/prop-types/assets/slot.png" alt="Slot property in the Webflow panel" />
      </Frame>
    </div>
  </div>
</div>

#### Example

```tsx title={"MyComponent.tsx"}
import React from "react";

interface MyComponentProps {
children?: React.ReactNode;
}

export const MyComponent = ({ children }: MyComponentProps) => {
return (
    <div className="container">
    {children}
    </div>
);
}

```

## When to use

Use a Slot prop when you want designers to:

* Insert child components
* Create flexible layout containers
* Build wrapper components

## Best practices

* Handle missing children gracefully
* Consider layout and spacing for child content
* Test with various component types

---

# ID

> Configure an ID property for a code component

Add an ID property to your component so designers can set unique identifiers on HTML elements.

The ID prop creates a text input for element IDs, making it easy to target elements with CSS or JavaScript.

## Syntax

```tsx
// Prop definition
props.Id({
    name: string,
    group?: string,
    tooltip?: string,
})

// Prop value
string
```

### Prop definition

Define the ID prop in your Webflow code component with a name. Optionally, you can add a group and tooltip text.

```tsx
props.Id({
    name: string,
    group?: string,
    tooltip?: string,
})
```

#### Properties

* `name`: The name for the property.
* `group`: The group for this property (optional).
* `tooltip`: The tooltip for this property (optional).

#### Example

```tsx title={"MyComponent.webflow.tsx"}
import { declareComponent } from '@webflow/react';    
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";

export default declareComponent(MyComponent,    {
    name: "MyComponent",
    description: "A component with an ID property",
    props: {
        id: props.Id({
            name: "Element ID",
            group: "Info"
        })
    }
});
```

### Prop value

The ID prop provides a string to your React component:

```tsx title="PropType.Id"
string
```

<div>
  <div>
    #### Properties

    * `n/a`
  </div>

  <div>
    #### Webflow properties panel

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/ac1bd8660e095d93d30bffb6bd0110b6a24b5162317aab3f60a734d1f494bdc6/products/code-components/pages/reference/prop-types/assets/id.png" alt="ID property in the Webflow panel" />
      </Frame>
    </div>
  </div>
</div>

#### Example

```tsx title={"MyComponent.tsx"}
import React from "react";

interface MyComponentProps {
id?: string;
}

export const MyComponent = ({ id }: MyComponentProps) => {
return (
    <div id={id}>
    {/* Component content */}
    </div>
);      
}
```

## When to use

Use an ID prop when you want designers to:

* Set unique identifiers for CSS targeting
* Connect form labels to inputs
* Enable JavaScript interactions

---

# Component decorators

> Configure decorators to apply global styles and wrap components with providers

This update introduces component decorators, a new pattern for applying global styles and wrapping components with providers. Configure globally to apply to every component in your library or locally to a single component.

**Packages:**

* `@webflow/webflow-cli` `1.9.0`
* `@webflow/react` `1.1.0`
* `@webflow/data-types` `1.1.0`
* `@webflow/emotion-utils` `1.1.0`
* `@webflow/styled-components-utils` `1.1.0`

## Global component decorators

Instead of importing styles or adding decorators to each component individually, you can now configure them once in a global decorators file.

**Configure in `webflow.json`:**

```json title="webflow.json"
{
  "library": {
    "globals": "./src/globals.ts"
  }
}
```

### Global styles

Import CSS once and apply it to all components:

```typescript title="src/globals.ts"
import "./globals.css";
```

### CSS-in-JS libraries

For Emotion and styled-components, export the pre-built decorators to inject styles into the Shadow DOM:

```typescript title="src/globals.ts"
import { emotionShadowDomDecorator } from "@webflow/emotion-utils";

export const decorators = [emotionShadowDomDecorator];
```

**Pre-built decorators:**

* **`emotionShadowDomDecorator`** from `@webflow/emotion-utils`
* **`styledComponentsShadowDomDecorator`** from `@webflow/styled-components-utils`

See more on pre-built decorators in the [frameworks and libraries guide](/code-components/frameworks-and-libraries).

### Custom decorators

Create custom decorators for error handling, analytics, or other cross-cutting concerns:

```typescript title="src/globals.ts"
import "./globals.css";
import { errorBoundaryDecorator } from "./ErrorBoundary";

export const decorators = [errorBoundaryDecorator];
```

### Apply decorators to a single component

To apply decorators to a single component, add a `decorators` property to the `declareComponent` configuration object.

```typescript title="Button.webflow.tsx"
import { declareComponent } from '@webflow/react';
import { Button } from './Button';
import { errorBoundaryDecorator } from "./ErrorBoundary";

export default declareComponent({Button,{
  name: "Button",
  decorators: [errorBoundaryDecorator],
});
```

Learn more in the [component decorators documentation](/code-components/define-code-component#component-decorators).

---

# Prop type aliases and workflow improvements

> Improved prop type aliases and better developer experience for Code Components

This update includes developer experience improvements across the Code Components suite of packages. Including `@webflow/data-types`, `@webflow/react`, and `@webflow/webflow-cli`.

## `@webflow/data-types` and `@webflow/react` `1.0.3`

We've added aliases to the prop types that match common React patterns you already know, so you can use the naming conventions that feel natural to your team.

**New aliases for prop types:**

* **`props.String`** - Use interchangeably with `props.Text` for text-based props
* **`props.Children`** - Use interchangeably with `props.Slot` for child content

These aliases work seamlessly with existing prop types, giving you flexibility in how you structure your component definitions.

```tsx
// Both of these work identically in your .webflow.tsx file
buttonText: props.Text({ name: "Button Text" })
// or
buttonText: props.String({ name: "Button Text" })

// And for child content:
children: props.Slot({ name: "Children" })
// or
children: props.Children({ name: "Children" })
```

### `@webflow/webflow-cli` `1.8.50`

The `webflow library share` command now displays your Workspace name in the confirmation prompt. This helps you verify you're sharing to the correct workspace before proceeding, especially useful when working across multiple workspaces.

For more updates on the Webflow CLI, see the [CLI changelog](/cli/changelog).

---

# Webflow Cloud

> Learn about Webflow Cloud, a platform for building and deploying web applications on Webflow

**Deploy full-stack applications alongside your Webflow sites.** Design visually in Webflow, export production-ready code with [DevLink](/devlink/docs/component-export), and deploy full-stack, server-rendered applications with **Webflow Cloud**. Get the best of both worlds:
Webflow's visual design tools combined with the power of modern web frameworks—all hosted on a blazing fast global edge network.

<CardGroup cols={2}>
  <Card
    title="Webflow Cloud"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CloudHosting.svg" alt="" className="dark-icon" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CloudHosting.svg" alt="" className="light-icon" />
        </>
    }
    href="/webflow-cloud/getting-started"
  >
    Deploy and scale effortlessly with Webflow's integrated hosting platform for modern web applications.<br /><br />
    [Get started with Webflow Cloud →](/webflow-cloud/getting-started)
  </Card>

  <Card
    title="DevLink"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/PackageCode.svg" alt="" className="dark-icon" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/PackageCode.svg" alt="" className="light-icon" />
        </>
    }
    href="/devlink/docs/component-export"
  >
    Generate production-ready code from your Webflow site. Seamlessly sync from your design to your codebase.<br /><br />
    [Get Started with DevLink →](/devlink/docs/quick-start/quick-start-component-export)
  </Card>
</CardGroup>

***

{/* <!-- vale off --> */}

## Get Started

{/* <!-- vale on --> */}

<CardGroup cols={2}>
  <Card
    title="Getting Started"
    href="/webflow-cloud/getting-started"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/PublishDesigner.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/PublishDesigner.svg" alt="" className="light-icon" />
      </>
    }
  >
    Deploy your first app in minutes with our step-by-step guide.
  </Card>

  <Card
    title="Bring your own app"
    href="/webflow-cloud/bring-your-own-app"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Migration.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Migration.svg" alt="" className="light-icon" />
      </>
    }
  >
    Already have a codebase? Follow these steps to deploy it on Webflow Cloud.
  </Card>
</CardGroup>

{/* Webflow Cloud is a serverless hosting and deployment platform that seamlessly integrates web applications with Webflow sites. Deploy full-stack applications using modern frameworks directly to your existing domain without managing separate hosting services or dealing with complex DNS configurations.

Webflow Cloud deploys your applications using Cloudflare Workers on the Edge runtime to deliver low-latency, high-performance web experiences. Built with developers in mind, Webflow Cloud provides multiple environments for development, and a native GitHub integration to support continuous integration and deployment workflows. 

Webflow Cloud offers developers a complete platform with features designed to enhance both performance and productivity:

* **Edge-powered performance**: Sub-50ms global response times via a global Edge network.
* **Serverless hosting**: Deploy full-stack apps without managing separate hosting services.
* **Framework flexibility**: Build with modern web frameworks like Next.js and Astro.
* **Modern workflows**: Manage CI/CD across multiple environments with a native GitHub integration. */}

***

## Storage

Webflow Cloud provides built-in, flexible storage for modern web apps.

<CardGroup cols={3}>
  <Card
    title="SQLite"
    href="/webflow-cloud/storing-data/sqlite"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg" alt="" className="block dark:hidden" />
        </>
        }
  >
    Reliable, relational storage for structured data
  </Card>

  <Card
    title="Key Value Store"
    href="/webflow-cloud/storing-data/key-value-store"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DeveloperToolsSDK.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DeveloperToolsSDK.svg" alt="" className="block dark:hidden" />
        </>
    }
  >
    Fast, edge-cached storage for unstructured data
  </Card>

  <Card
    title="Object Storage"
    href="/webflow-cloud/storing-data/object-storage"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/App.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/App.svg" alt="" className="block dark:hidden" />
        </>
    }
  >
    Scalable, secure storage for files and media
  </Card>
</CardGroup>

***

## Supported frameworks

Webflow Cloud currently supports Next.js and Astro, with plans to expand framework support to give developers more flexibility to use the tools they love.

<CardGroup cols={2}>
  <Card
    title="Next.js"
    iconPosition="left"
    iconSize="12"
    icon={
     <>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/206637381803051eba5a835c0ff5004eb43680e7b79fec1522ea6a900515efd9/products/webflow-cloud/pages/introduction/assets/nextjs-dark.svg" alt="" className="dark-icon" />
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/d59be117e8dea3837a9689a6f96b6af75257a135cda0c581f7d336725abb9755/products/webflow-cloud/pages/introduction/assets/nextjs.svg" alt="" className="light-icon" />
     </>
  }
    href="/webflow-cloud/getting-started"
  >
    Deploy full-stack Next.js applications with powerful server-side rendering, intelligent page optimization, and seamless integration with Webflow components.
  </Card>

  <Card
    title="Astro"
    iconPosition="left"
    iconSize="12"
    icon={
     <>
        <img src="https://astro.build/assets/press/astro-icon-light.svg" alt="" className="dark-icon" />
        <img src="https://astro.build/assets/press/astro-icon-dark.svg" alt="" className="light-icon" />
     </>
  }
    href="/webflow-cloud/getting-started"
  >
    Create high-performance, content-focused websites that ship minimal JavaScript by default while preserving Webflow's design capabilities.
  </Card>
</CardGroup>

***

## Webflow CLI

<div>
  Bridge the gap between design and development with Webflow's tools for creating visually designed, full-stack applications on **Webflow Cloud**.

  ```bash
  npm install -g @webflow/webflow-cli
  ```
</div>

***

{/* <!-- vale off --> */}

## Working with Webflow Cloud

{/* <!-- vale on --> */}

<Card>
  <h3>
    Projects
  </h3>

  <p>
    Projects are the foundational building blocks in Webflow Cloud. Each project represents a distinct application or service that you want to deploy alongside your Webflow site.
  </p>
</Card>

<Card href="/webflow-cloud/environments">
  <h3>
    Environments
  </h3>

  <p>
    Environments enable you to maintain different versions of your application for development, testing, and production use. Key features include:
  </p>

  <ul>
    <li>
      Multiple environments per project
    </li>

    <li>
      Separate environment variables and configurations
    </li>

    <li>
      Branch-based deployments
    </li>
  </ul>

  <a href="/webflow-cloud/environments">
    Learn more about environments →
  </a>
</Card>

<Card href="/webflow-cloud/deployments">
  <h3>
    Deployments
  </h3>

  <p>
    Deployments represent the process of pushing your code to an environment. Webflow Cloud provides:
  </p>

  <ul>
    <li>
      Automated build and deployment pipelines
    </li>

    <li>
      Deployment logs and monitoring
    </li>
  </ul>

  <a href="/webflow-cloud/deployments">
    Learn more about deployments →
  </a>
</Card>

<br />

***

<div>
  <p>
    Vercel, the Vercel design, Next.js and related marks, designs and logos are trademarks or registered trademarks of Vercel, Inc. or its affiliates in the United States and other countries. 
  </p>
</div>

---

# Getting Started

> Build and deploy your first Webflow Cloud app

In this guide, you'll learn how to create projects and environments, deploy your app to your Webflow site, and integrate your Webflow design system with your app.

**Time Estimate:** 30 minutes

**Prerequisites:**

* A Webflow account
* A GitHub account
* Node.js 20.0.0 or higher and `npm` installed

## Getting started

### 1. Install the Webflow CLI

In your terminal, run the following command to use the CLI globally:

```bash
npm install -g @webflow/webflow-cli
```

You can run the command `webflow --version` to verify that the CLI tool installed successfully.

### 2. Create a new Webflow site

Create a new Webflow site by cloning the [Astral Fund template.](https://webflow.com/made-in-webflow/website/astralfund-919afdc1091df68b8dc1347f952a) This site is pre-configured with styles, variables, and components optimized for Webflow Cloud and DevLink.

<Steps>
  <Step title="Open the [Astral Fund template](https://webflow.com/made-in-webflow/website/astralfund-919afdc1091df68b8dc1347f952a)">
    View the AstralFund template in "Made in Webflow"
  </Step>

  <Step title="Clone the template">
    Click the "Clone in Webflow" button, then in the next window click "Create site."
  </Step>

  <Step title="Add site details">
    Give your site a name and determine who should have access to your site. Once you've created your site, it will open in Webflow.
  </Step>

  <Step title="Review styles, components, and variables">
    Optionally, review the [styles](https://help.webflow.com/hc/en-us/articles/33961362040723-Style-panel-overview), [variables](https://help.webflow.com/hc/en-us/articles/33961268146323-Variables), and [components](https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview) included in the site. You will export these to your new app in the following steps.
  </Step>

  <Frame>
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/91708b33e8f975a03d72eafa153c7ec0caf1804aec693b43e86944b652f97e02/products/webflow-cloud/pages/introduction/assets/astralfund.png" alt="Webflow site" />
  </Frame>
</Steps>

### 3. Create a new app

Use the Webflow CLI to create a new Astro or Next.js application. The CLI will generate a project scaffold that's synced with your Webflow site's design system through [DevLink.](/devlink/reference/overview)

<div>
  <Frame>
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/0303fa14075c25c3a2fa083cbb2de654fb6f9d09d646311cf9b2cd73b2b9bdd6/products/webflow-cloud/pages/introduction/assets/webflow-cli.png" alt="Webflow CLI" />
  </Frame>
</div>

<Steps>
  <Step title="Initialize your project">
    In your terminal, run the command

    ```bash
    webflow cloud init
    ```
  </Step>

  <Step title="Select your framework">
    When prompted in the terminal, choose a supported framework to create a starter project (Astro or Next.js)
  </Step>

  <Step title="Select your mount path">
    When prompted in the terminal, enter the path where you plan to mount your app on your Webflow site (for example, /app → mysite.webflow\.io/app).
  </Step>

  <Step title="Authenticate with Webflow">
    When prompted, authenticate with Webflow and select the site you just created for your Webflow Cloud project.
  </Step>

  <Step title="Import your Webflow design system">
    When prompted in the terminal, select the same Webflow site you used to authenticate. Once selected, the Webflow CLI will import any available styles, variables, and components via DevLink. DevLink will show a success message upon successful export to your app.
  </Step>

  <Step title="Publish your project to a GitHub repository">
    In your terminal, run the following commands to navigate to your new project, and create a git repository. [**Once created, publish the repository to GitHub.**](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github) You will need to publish your local project to GitHub to create a new Webflow Cloud project as outlined in the next step.

    ```bash
        cd your-project-name
        git init
    ```
  </Step>
</Steps>

### 4. Create a new Webflow Cloud project

Connect GitHub to Webflow Cloud, create a project, and configure an environment for automated deployments.

<div>
  <Frame>
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/f349396b97fbcd8de4691b6350fea896df1fef56a3c8dc7e0307119b9f38bf63/products/webflow-cloud/pages/introduction/assets/project-setup-05-20.png" alt="Webflow Cloud project creation" />
  </Frame>
</div>

<Steps>
  <Step title="Open Webflow Cloud">
    In Webflow, navigate to your site's settings and select "Webflow Cloud" from the sidebar.
  </Step>

  <Step title="Authenticate with Github">
    Click the "Login to GitHub" button to connect your GitHub account. Then click the "Install GitHub" button. Follow the instructions to enable Webflow Cloud to access your GitHub repositories.
  </Step>

  <Step title="Create a new Webflow Cloud project">
    Click "Create New Project"
  </Step>

  <Step title="Add project details">
    * Choose a **name** for your Webflow Cloud project.
    * Provide the URL of your newly created **GitHub repository.**
    * Optionally, enter a **description** and **directory** path for your app.
    * Click **"Create project"** to save your project.
  </Step>

  <Step title="Create a new Environment">
    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/2036670eb1d95bef297542eeb93354e0f844a3a31ccf92d3f4841c2e5c114874/products/webflow-cloud/pages/introduction/assets/github-setup.png" alt="Webflow Cloud environment creation" />
      </Frame>
    </div>

    * Choose a **branch** to deploy your project from.
    * Choose a **mount path** for your project (for example, /admin → mysite.webflow\.io/admin).
    * Click **"Create environment"** to save a new environment for the project.
  </Step>

  <Step title="Publish your Webflow Site">
    To make your new project and environment live, you'll need to publish your Webflow site. Click the "Publish" button in the top right corner of your Webflow Dashboard.

    <Warning title="You won't see your app yet!">
      We need to build and deploy your Astro or Next.js before you see your project on your mount path. Follow the steps below to deploy your project.
    </Warning>
  </Step>
</Steps>

### 5. Add your Webflow design system to your Webflow Cloud app

Add Webflow components to your app by importing them from the DevLink folder, which contains assets synced from your Webflow design system.

Your scaffolded app already includes your global styles, and the [DevLinkProvider](/devlink/docs/component-export/whats-exported#devlinkprovider) to manage Webflow interactions in your project's layout files.

<Tabs>
  <Tab title="Astro">
    <Steps>
      <Step title="Install dependencies and run your project locally">
        Run the following commands in your terminal:

        ```bash
        npm install
        npm run dev
        ```

        <Note>
          Currently, Webflow Cloud only supports using the 

          `npm`

           package manager
        </Note>
      </Step>

      <Step title="Add Webflow components to your Astro project">
        In the `pages` directory, update `index.astro` to include the `Navbar` and `Footer` components from the `/devlink` folder in the root of your project. Import the components, and include them within the page structure.

        ```typescript title="index.astro" maxLines={15}
          ---
          import Layout from '../layouts/Layout.astro';
          import { Section, Container, Block, Link } from '../../devlink/_Builtin/Basic';
          import { Navbar } from '../../devlink/Navbar'; // Import the Navbar component
          import { Footer } from '../../devlink/Footer'; // Import the Footer component
          ---

          <Layout>
          {/* Add Navbar with props. Be sure to include the client load directive */}
            <Navbar 
                navbarLinkFeatures="Hello"
                navbarLinkProducts="Webflow"
                navbarLinkResources="Cloud"
                navbarLinkContact=""
            client:load /> 
            <Section
              client:load
              tag="section"
              className="margin-bottom-24px"
              style={{
                minHeight: '100vh',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}
            >
              <Container>
                <Block
                  tag="div"
                  className="hero-split"
                  style={{
                    textAlign: 'center',
                    maxWidth: '600px',
                    margin: '0 auto'
                  }}
                >
                  <h1 class="margin-bottom-24px">Welcome to Webflow Cloud</h1>
                  <p class="margin-bottom-24px">This is a simple test using Basic components with enhanced styling.</p>
                  <div>
                    <Link
                      button={true}
                      options={{
                        href: "#"
                      }}
                      className="button-primary"
                    >
                      Get Started
                    </Link>
                  </div>
                </Block>
              </Container>
            </Section>
            <Footer client:load /> {/* Add Footer with Client load directive */}
          </Layout>

          <style>
            h1 {
              font-size: 2.5rem;
              font-weight: 700;
              background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
            }
          </style>

        ```

        <Note>
          Add the `client:load` directive to each component, to indicate Astro should load this component on the page.
        </Note>
      </Step>

      <Step title="Test your changes in a local preview environment">
        In your terminal, run the following command to start your project in a local preview environment that mimics your Webflow Cloud environment:

        ```bash
        npm run preview
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Next.js">
    <Steps>
      <Step title="Install dependencies and run your project locally">
        Run the following commands in your terminal:

        ```bash
        npm install
        npm run dev
        ```

        <Note>
          Currently, Webflow Cloud only supports using the 

          `npm`

           package manager
        </Note>
      </Step>

      <Step title="Add Webflow components to your Next.js project">
        Update `/src/page.tsx` to include the `Navbar` and `Footer` components from the `/devlink` folder. Import the components, and include them within the page structure.

        ```typescript title="page.tsx" maxLines={15}
        "use client";

        import { Section, Block, Link } from "@/devlink/_Builtin";
        import { Navbar } from "@/devlink/Navbar"; // Import the Navbar component
        import { Footer } from "@/devlink/Footer"; // Import the Footer component

        export default function Home() {
          return (
            <Section
              tag="section"
              style={{
                minHeight: "100vh",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Block tag="div" className="container">
              {/* Add Nav Bar with props*/}
                <Navbar
                  navbarLinkFeatures="Hello"
                  navbarLinkProducts="Webflow"
                  navbarLinkResources="Cloud"
                  navbarLinkContact=""
                /> 
                <Block
                  tag="div"
                  className="hero-split"
                  style={{
                    textAlign: "center",
                    maxWidth: "600px",
                    margin: "0 auto",
                  }}
                >
                  <h1
                    className="margin-bottom-24px"
                    style={{
                      fontSize: "2.5rem",
                      fontWeight: 700,
                      background: "linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%)",
                      WebkitBackgroundClip: "text",
                      WebkitTextFillColor: "transparent",
                      backgroundClip: "text",
                    }}
                  >
                    Welcome to Webflow Cloud
                  </h1>
                  <Block tag="p" className="margin-bottom-24px">
                    This is a simple test using Basic components with enhanced styling.
                  </Block>
                  <div>
                    <Link
                      button={true}
                      options={{
                        href: "#",
                      }}
                      className="button-primary"
                    >
                      Get Started
                    </Link>
                  </div>
                </Block>
                <Footer /> {/* Add Footer */}
              </Block>
            </Section>
          );
        }

        ```
      </Step>

      <Step title="Test your changes in a local preview environment">
        In your terminal, run the following command to start your project in a local preview environment that mimics your Webflow Cloud environment:

        ```bash
        npm run preview
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

### 6. Deploy your project to Webflow Cloud

<Steps>
  <Step title="Authenticate with Webflow">
    In your terminal, run the following command to authenticate with Webflow:

    ```bash
    webflow auth login
    ```

    This command opens a browser window to authenticate your Webflow account. After you grant access, you'll be prompted in your terminal to select a site for deployment. The CLI then creates/updates a `.env` file at the root of your project with the necessary `WEBFLOW_SITE_ID` and `WEBFLOW_API_TOKEN`.
  </Step>

  <Step title="Deploy using the Webflow CLI">
    In your terminal, run the following command to deploy your project to Webflow Cloud:

    ```bash
    webflow cloud deploy
    ```

    Additionally, when you commit your changes to your GitHub branch, Webflow Cloud will automatically detect the changes and deploy your project to your environment. Learn more on [deployments in the documentation.](/webflow-cloud/deployments)

    <Warning title=" Your deployment may take up to 2 minutes to complete">
      Your deployment may take up to 2 minutes to complete. You can view the status of your deployment in your [Environment Details](/webflow-cloud/deployments#deployment-history) dashboard, and see details of your build and deployment in the [build logs.](/webflow-cloud/deployments#build-logs)
    </Warning>
  </Step>

  <Step title="View your app at your site's URL + mount path">
    Once your app has been successfully deployed, navigate to your site's domain and mount path to see your newly deployed Webflow Cloud app!

    **🎉Congratulations! 🎉**<br />
    You've successfully created and deployed a Webflow Cloud project that is seamlessly integrated with your Webflow design system. Pat yourself on the back!
  </Step>
</Steps>

## Next steps

Now that you've successfully created and deployed a Webflow Cloud project, here's what you can do next.

<CardGroup>
  <Card
    title="Bring your app to Webflow Cloud"
    href="/webflow-cloud/bring-your-own-app"
    iconSize="12"
    iconPosition="left"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Apps.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Apps.svg" alt="" className="light-icon" />
            </>
        }
  >
    Learn about project configuration options to work seamlessly with Webflow Cloud, and add advanced functionality to your new project.
  </Card>

  <Card
    title="Optimize your workflow"
    href="/webflow-cloud/environments"
    iconSize="12"
    iconPosition="left"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Optimize.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Optimize.svg" alt="" className="light-icon" />
            </>
        }
  >
    Learn how to manage environments for different stages of development
  </Card>

  <Card
    title="Manage deployments"
    href="/webflow-cloud/deployments"
    iconSize="12"
    iconPosition="left"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CloudUpload.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CloudUpload.svg" alt="" className="light-icon" />
            </>
        }
  >
    Explore deployment options and Webflow Cloud's CI/CD integration with GitHub to streamline your release process
  </Card>

  <Card
    title="Add a SQLite database to your app"
    href="/webflow-cloud/add-sqlite"
    iconSize="12"
    iconPosition="left"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg" alt="" className="light-icon" />
            </>
        }
  >
    Add a SQLite database to your app to store and retrieve user data.
  </Card>
</CardGroup>

## Troubleshooting

<Accordion title="I'm seeing a 404 error when I try to access my app">
  After creating a new environment, you'll need to publish your Webflow site to make your environment live.
</Accordion>

<Accordion title="A deployment doesn't start when I push to my Github repo">
  The [Webflow Cloud GitHub App](https://github.com/apps/webflow-cloud/installations/select_target) may not have access to your repository. To check, go to the `Webflow Cloud` tab in your Webflow site settings and click "Install GitHub App." Follow the prompts on GitHub to make sure Webflow has access to read from your repository. Once you grant access, try committing to the branch that Webflow Cloud should be monitoring for deployments in your app.
</Accordion>

<Accordion title="I can't see assets in my app">
  If you're referencing assets in your project, you'll need to reference the mount path of your project (`/app` → `mysite.webflow.io/app`) to serve them correctly.

  [See more on referencing assets →](/webflow-cloud/bring-your-own-app#manage-assets-and-apis)
</Accordion>

---

# Bring your own app

> Configure your Next.js or Astro app to work with Webflow Cloud

Webflow Cloud deploys your app using on the [Edge runtime](/webflow-cloud/environment), enabling fast, globally distributed hosting. Before deploying to Webflow Cloud, your project may require some configuration to ensure compatibility with the Edge environment.

In this guide, you'll learn how to create projects and environments, configure your app for Webflow Cloud, and deploy your app to your Webflow site,

<Note title="Get Started with Webflow Cloud">
  To familiarize yourself with Webflow Cloud, it's recommended to create your first Webflow Cloud project from the Webflow CLI before configuring a custom project.

  [Get started with Webflow Cloud → ](/webflow-cloud/getting-started).
</Note>

**Time Estimate:** 30 minutes

**Prerequisites:**

* A Webflow account
* A Webflow site with components
* A GitHub account
* One of the following:
  * An Astro project
  * A Next.js project (version 15 or higher)
* Node.js 20.0.0 or higher and `npm` installed
  * **Note:** Currently, Webflow Cloud only supports using the `npm` package manager

## 1. Create a new Webflow Cloud project

Connect GitHub to Webflow Cloud, create a project, and configure an environment for automated deployments.

<div>
  <Frame>
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/30d8677b2c56ca954b661772eaaff5eb0fd48441a118f5cf59f1d11c7808268c/products/webflow-cloud/pages/introduction/assets/project-setup-05-09.png" alt="Webflow Cloud project creation" />
  </Frame>
</div>

<Steps>
  <Step title="Open Webflow Cloud">
    In Webflow, navigate to your site's settings and select "Webflow Cloud" from the sidebar.
  </Step>

  <Step title="Authenticate with Github">
    Click the “Login to GitHub” button to connect your GitHub account. Then click the “Install GitHub” button. Follow the instructions to allow Webflow Cloud to access your GitHub repositories.
  </Step>

  <Step title="Create a new Webflow Cloud project">
    Click "Create New Project"
  </Step>

  <Step title="Add project details">
    * Choose a **name** for your Webflow Cloud project.
    * Provide the URL of your newly created **GitHub repository.**
    * Optionally, enter a **description** for your app.
    * Click **"Create project"** to save your project.
  </Step>

  <Step title="Create a new Environment">
    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/2036670eb1d95bef297542eeb93354e0f844a3a31ccf92d3f4841c2e5c114874/products/webflow-cloud/pages/introduction/assets/github-setup.png" alt="Webflow Cloud environment creation" />
      </Frame>
    </div>

    * Choose a **branch** to deploy your project from.
    * Choose a **mount path** for your project (for example, /admin → mysite.webflow\.io/admin).
    * Click **"Create environment"** to save a new environment for the project.
  </Step>

  <Step title="Publish your Webflow Site">
    To make your new project and environment live, you'll need to publish your Webflow site. Click the "Publish" button in the top right corner of your Webflow Dashboard.
  </Step>
</Steps>

## 2. Configure your project for Webflow Cloud

Webflow Cloud deploys your app on the [Edge runtime](/webflow-cloud/environment), enabling fast, globally distributed hosting. The Edge runtime environment differs from traditional Node.js servers, requiring specific configurations for compatibility.

The following steps outline common migration patterns to help you adapt your application for Webflow Cloud. Depending on your application's specific requirements, you may need to make additional adjustments beyond these configurations.

<Tabs>
  <Tab title="Next.js">
    <Warning title="Webflow Cloud is compatible with Next.js 15 and higher">
      Webflow Cloud is compatible with Next.js 15 and higher. If you're using a version of Next.js lower than 15, please upgrade to the latest version.
    </Warning>

    <Steps>
      <Step title="Configure your base path">
        In Webflow Cloud, your application is served from the mount path you configured in your environment settings. For example, if your mount path is `/app`, your application will be accessible at `yourdomain.webflow.io/app`. To ensure proper routing and asset loading, you must configure the `basePath` and `assetPrefix` properties in your `next.config.ts` file to match this mount path exactly.

        ```ts title="next.config.ts"
        module.exports = {
            // Configure the base path and asset prefix to reflect the mount path of your environment
            // For example, if your app is mounted at /app, set basePath and assetPrefix to '/app'
            basePath: '/app',
            assetPrefix: '/app',
            
            // Additional Next.js configuration options can be added here
            // For example:
            // output: 'standalone',
            // reactStrictMode: true,
        }
        ```
      </Step>

      <Step title="Install and configure OpenNext">
        OpenNext is an adapter designed specifically for deploying Next.js applications to cloud environments like Webflow Cloud. By using OpenNext, you can deploy your Next.js app without managing complex infrastructure configurations yourself.

        1. **Install OpenNext**<br />
           In your terminal, navigate to your project and run the following command to install OpenNext:

           ```bash
           npm install @opennextjs/cloudflare@1.6.5
           ```

        2. **Configure OpenNext**<br />
           Create a new configuration file named `open-next.config.ts` in your project's root directory. This file configures OpenNext to work with Webflow Cloud's deployment environment.

           ```ts title="open-next.config.ts"
           import type { NextConfig } from "next";

           import { defineCloudflareConfig } from "@opennextjs/cloudflare";

           export default defineCloudflareConfig({
           });

           ```
      </Step>

      <Step title="Set up local testing for Webflow Cloud">
        Webflow Cloud uses Wrangler - Cloudflare's CLI tool - to bridge the gap between local development and cloud deployment. By integrating Wrangler into your workflow, you can identify and resolve compatibility issues early, significantly reducing debugging time after deployment.

        1. **Install Wrangler**<br />
           To get started, install and configure Wrangler as a dev dependency in your project.

           ```bash
           npm install wrangler --save-dev
           ```

        2. **Set up your Wrangler configuration**<br />
           Create a `wrangler.jsonc` file in your project root that defines how your application will run in development.

           ```jsonc title="wrangler.jsonc"
           {
               "$schema": "node_modules/wrangler/config-schema.json",
               "name": "nextjs",
               "main": ".open-next/worker.js",
               "compatibility_date": "2025-03-01",
               "compatibility_flags": [
                   "nodejs_compat"
               ],
               "assets": {
                   "binding": "ASSETS",
                   "directory": ".open-next/assets"
               },
               "observability": {
                   "enabled": true
               }
               /** Rest of Code **/
           }
           ```

           See the Cloudflare documentation for [more details on how to configure Wrangler](https://developers.cloudflare.com/workers/wrangler/configuration/).

        3. **Create a Cloudflare environment file**<br />
           Create a new file named `cloudflare-env.d.ts` in your project's root directory. This file will allow you to use environment variables defined in your Webflow Cloud environment.

           ```ts title="cloudflare-env.d.ts"
           interface CloudflareEnv {
           }
           ```

        4. **Add the development preview command**<br />
           Add this script to your `package.json` file to enable local testing with Wrangler. This command builds your Next.js app and immediately serves it using the Edge runtime, giving you an exact preview of how your app will perform in production on Webflow Cloud:

           ```json title="package.json"
           "scripts": {
               // Existing scripts...
               "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview", // 
           }
           ```
      </Step>

      <Step title="Define your Webflow Cloud framework configuration">
        Create a `webflow.json` file at the root of your project to inform Webflow Cloud about your app's framework.

        ```json title="webflow.json"
        {
            "cloud": {
                "framework": "nextjs"
            }
        }
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Astro">
    <Steps>
      <Step title="Configure Astro for Webflow Cloud">
        Configure Astro for deployment on Webflow Cloud by adding the following to your `astro.config.js` file:

        ```js title={"astro.config.js"}
        import { defineConfig } from "astro/config";
        import cloudflare from "@astrojs/cloudflare"; // Import the Cloudflare adapter
        import react from "@astrojs/react";

        // https://astro.build/config
        export default defineConfig({

        // Server you app and assets from the correct mount path
          base: "/YOUR_MOUNT_PATH",
          build: {
            assetsPrefix: "/YOUR_MOUNT_PATH",
          },
          output: "server", // Use the server output mode

          // Use the Cloudflare adapter
          adapter: cloudflare({
            platformProxy: {
              enabled: true,
            },
          }),

        // Enable React components
          integrations: [react()],

          // Optimize the build configuration for the Edge runtime
          vite: {
            resolve: {
              // Use react-dom/server.edge instead of react-dom/server.browser for React 19.
              // Without this, MessageChannel from node:worker_threads needs to be polyfilled.
              alias: import.meta.env.PROD
                ? {
                    "react-dom/server": "react-dom/server.edge",
                  }
                : undefined,
            },
          },
        });

        ```

        This configuration is essential for deploying your Astro app to Webflow Cloud. Here’s a breakdown of what each part does:

        * **Sets the correct mount path**: Your app is served from a specific subdirectory in your Webflow Cloud environment (e.g., `/app`). The `base` and `build.assetsPrefix` options must match this path to ensure all routes and assets load correctly.

        * **Enables Edge runtime compatibility**: Webflow Cloud uses an [Edge runtime](/webflow-cloud/environment), not a traditional Node.js server. The `@astrojs/cloudflare` adapter compiles your app to be compatible with this serverless environment.

        * **Optimizes React for the Edge**: To prevent build errors, the `vite` configuration includes a production-specific alias for React. This forces the build to use `react-dom/server.edge`, which is designed for non-Node.js environments like Webflow Cloud.
      </Step>

      <Step title="Set up local testing for Webflow Cloud">
        Webflow Cloud uses Wrangler - Cloudflare's CLI tool - to bridge the gap between local development and cloud deployment. By integrating Wrangler into your workflow, you can identify and resolve compatibility issues early, significantly reducing debugging time after deployment.

        1. **Install Wrangler**<br />
           To get started, install and configure Wrangler as a dev dependency in your project.

           ```bash
           npm install wrangler --save-dev
           ```

        2. **Set up your Wrangler configuration**<br />
           Create a `wrangler.jsonc` file in your project root that defines how your application will run in development.

           ```jsonc title="wrangler.jsonc"
           {
               "$schema": "node_modules/wrangler/config-schema.json",
               "name": "astro",
               "main": "./dist/_worker.js/index.js",
               "compatibility_date": "2025-04-15",
               "compatibility_flags": [
                   "nodejs_compat"
               ],
               "assets": {
                   "binding": "ASSETS",
                   "directory": "./dist"
               },
               "observability": {
                   "enabled": true
               }
           }
           ```

           See the Cloudflare documentation for [more details on how to configure Wrangler](https://developers.cloudflare.com/workers/wrangler/configuration/).

           <Warning title="wrangler.jsonc">
             While you can make local changes to the `wrangler.jsonc` file, Webflow Cloud will generate a default configuration when you deploy. This production file is generated automatically and can't be edited directly.
           </Warning>

        3. **Create a Cloudflare environment file**<br />
           Create a new file named `worker-configuration.d.ts` in your project's root directory. This file will allow you to use environment variables defined in your Webflow Cloud environment.

           ```ts title="worker-configuration.d.ts"
           /* eslint-disable @typescript-eslint/no-empty-interface */
           // Generated by Wrangler
           // After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
           interface Env {}
           ```

        4. **Add the development preview command**<br />
           Add this script to your `package.json` file to enable local testing with Wrangler. This command builds your Astro app and immediately serves it using the Cloudflare Workers runtime, giving you an exact preview of how your app will perform in production on Webflow Cloud:

           ```json title="package.json"
           "scripts": {
               // Existing scripts...
               "preview": "astro build && wrangler dev", // 
           }
           ```
      </Step>

      <Step title="Define your Webflow Cloud framework configuration">
        Create a `webflow.json` file at the root of your project to inform Webflow Cloud about your application's framework.

        ```json title="webflow.json"
        {
            "cloud": {
                "framework": "astro"
            }
        }
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

## 3. Manage assets and APIs

<Tabs>
  <Tab title="Next.js">
    <Steps>
      <Step title="Asset references">
        How you reference assets depends on which component you're using:

        **Next.js Image component**: Local images are automatically optimized and served through Webflow's CDN.

        ```tsx title="src/app/components/Logo.tsx"
        import Image from "next/image";

        export function Logo() {
            return (
                <Image 
                    src="/images/logo.png" // No prefix needed - automatically optimized
                    alt="Logo" 
                    width={180} 
                    height={40} 
                    priority
                />
            );
        }
        ```

        **Plain img tags**: Must include `assetPrefix` to load correctly and enable CDN caching.

        ```tsx title="src/app/components/Icon.tsx"
        import config from "../../../next.config";

        // Get the asset prefix from config
        const assetPrefix = config.assetPrefix || config.basePath || '';

        export function Icon() {
            return (
                <img 
                    src={`${assetPrefix}/icons/star.svg`} // Prefix required for CDN caching
                    alt="Star icon" 
                />
            );
        }
        ```
      </Step>

      <Step title="APIs">
        When using Next.js with a configured base path, there's an important distinction between API route definitions and client-side requests:

        1. **Server-side API route handlers** are automatically mounted at your base path by Next.js. To ensure your API routes run on the Edge runtime, add the `export const runtime = 'edge';` directive to your API route.
        2. **Client-side fetch calls** must ***manually*** include the base path to correctly reach your endpoints

        Without these adjustments, your API routes will not build properly and your client-side fetch calls will fail by targeting the wrong URL. Implement these patterns in all your APIs and client-side data fetching functions:

        <CodeBlocks>
          ```tsx title="API Routes"
          // /src/pages/api/data.ts
          import { NextRequest, NextResponse } from 'next/server';

          export async function GET(request: NextRequest) {
              return NextResponse.json({ message: 'Hello, world!' });
          }
          ```

          ```tsx title="Client-side fetch call"
          import config from "../next.config";

          // Get the base path from config
          const basePath = config.basePath || '';

          export async function fetchData() {
          const response = await fetch(`${basePath}/api/data`);
          return response.json();
          }
          ```
        </CodeBlocks>

        <Warning title="Edge Runtime: Use `fetch` API">
          The Edge runtime has limited API support. Stick to `fetch` for API calls and avoid third-party clients like `axios` which may not be compatible.
        </Warning>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Astro">
    <Steps>
      <Step title="Asset references">
        When deployed to Webflow Cloud, all your static assets must include the configured mount path to load correctly. Without this path prefix, browsers will request assets from the root domain, resulting in 404 errors.

        We recommend constructing asset paths using the `import.meta.env.ASSETS_PREFIX` variable, which references the `build.assetsPrefix` value you configured. Webflow Cloud will automatically configure a CDN for assets that use `import.meta.env.ASSETS_PREFIX` for improved loading performance.
        Implement this pattern in your components for reliable asset loading:

        ```tsx title="layouts/Layout.astro"
        ---
        // Get the assets prefix from config
        const assetsPrefix = import.meta.env.ASSETS_PREFIX || import.meta.env.BASE_URL || '';
        ---

        <!doctype html>
        <html lang="en">
            <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width" />
                <link 
                    rel="icon" 
                    type="image/svg+xml" 
                    // Add assets prefix to asset path
                    href={`${assetsPrefix}/favicon.svg`}
                />
                <meta name="generator" content={Astro.generator} />
                <title>Astro Basics</title>
            </head>
            <body>
                <slot />
            </body>
        </html>

        <style>
            html,
            body {
                margin: 0;
                width: 100%;
                height: 100%;
            }
        </style>
        ```
      </Step>

      <Step title="APIs">
        1. **Server-side API route handlers** are automatically mounted at your base path by Astro. However, **you must add** the following code to your API route to ensure it runs on the Edge runtime:

        ```tsx
        // Add this line to your route to ensure it runs on the Edge runtime
        export const config = {
            runtime: "edge",
        };
        ```

        2. **Client-side fetch calls** must ***manually*** include the base path to correctly reach your endpoints

        Without these adjustments, your API routes will not build properly and your client-side fetch calls will fail by targeting the wrong URL. Implement these patterns in all your APIs and client-side data fetching functions:

        <CodeBlocks>
          ```tsx title="Server-side API route" {1-4}
          // Add this line to your route to ensure it runs on the Edge runtime
          export const config = {
              runtime: "edge",
          };

          import type { APIRoute } from 'astro';

          // Sample data
          const users = [
          { id: 1, name: 'Arthur Dent', email: 'arthur@earth.com' },
          { id: 2, name: 'Ford Prefect', email: 'ford@betelgeuse.com' },
          { id: 3, name: 'Zaphod Beeblebrox', email: 'zaphod@heartofgold.com' },
          { id: 4, name: 'Trillian', email: 'trillian@earth.com' },
          { id: 5, name: 'Marvin', email: 'marvin@paranoidandroid.com' }
          ];
          export const GET: APIRoute = async ({ params, request, context }) => {
          const url = new URL(request.url);
          const id = url.searchParams.get('id');


          if (id) {
              const user = users.find(user => user.id === parseInt(id));
              
              if (!user) {
              return new Response(JSON.stringify({ 
                  error: 'User not found' 
              }), {
                  status: 404,
                  headers: {
                  'Content-Type': 'application/json'
                  }
              });
              }
              
              return new Response(JSON.stringify(user), {
              status: 200,
              headers: {
                  'Content-Type': 'application/json'
              }
              });
          }

          return new Response(JSON.stringify(users), {
              status: 200,
              headers: {
              'Content-Type': 'application/json'
              }
          });
          };
          ```

          ```tsx title="Client-side fetch call"
          ---
          // src/components/ViewProfile.jsx
          import { useState } from 'react';

          export function ViewProfile({ userId }) {
          const [user, setUser] = useState(null);
          const [loading, setLoading] = useState(false);

          const fetchUserProfile = async () => {
              setLoading(true);
              
              try {
              // Get the base path for API requests
              const basePath = import.meta.env.BASE_URL || '';
              
              // Include the base path in the fetch URL
              const response = await fetch(`${basePath}/api/users.json?id=${userId}`);
              
              if (!response.ok) {
                  throw new Error('Failed to fetch user');
              }
              
              const userData = await response.json();
              setUser(userData);
              } catch (error) {
              console.error('Error fetching user:', error);
              } finally {
              setLoading(false);
              }
          };

          return (
              <div>
              <button 
                  onClick={fetchUserProfile} 
                  disabled={loading}
              >
                  {loading ? 'Loading...' : 'View Profile'}
              </button>
              
              {user && (
                  <div className="profile-modal">
                  <h3>{user.name}</h3>
                  <p>Email: {user.email}</p>
                  <button onClick={() => setUser(null)}>Close</button>
                  </div>
              )}
              </div>
          );
          }
          ```
        </CodeBlocks>

        <Warning title="Edge Runtime: Use `fetch` API">
          The Edge runtime has limited API support. Stick to `fetch` for API calls and avoid third-party clients like `axios` which may not be compatible.
        </Warning>
      </Step>
    </Steps>
  </Tab>
</Tabs>

## 4. Configure environment variables

<Steps>
  <Step title="Access environment variable settings">
    In Webflow Cloud, navigate to your project's environment settings:

    * Click your project name in the dashboard
    * Select the specific environment you want to configure
    * Click the **"Environment Variables"** tab
  </Step>

  <Step title="Add and configure environment variables">
    Add each environment variable that your application requires:

    * Click **"Add Variable"**
    * Enter a descriptive **"Variable Name"** (e.g., `DATABASE_URL`, `API_KEY`)
    * Enter the corresponding **"Variable Value"**
    * Toggle **"Secret"** for sensitive values that should be encrypted (API keys, tokens, etc.)
    * Click **"Add Variable"** to save

    Repeat this process for all required variables.

    <Warning title="Environment variables are only available at runtime">
      Environment variables in Webflow Cloud are injected at runtime only and are not accessible during the build process. Keep the following in mind to avoid build failures:

      * Do not include environment variable validation or required checks that run during build time
      * Use conditional logic to handle cases where environment variables might be undefined during builds
    </Warning>
  </Step>

  <Step title="Access environment variables in your code">
    Your environment variables are accessible in your code using the following methods.

    <Tabs>
      <Tab title="Next.js">
        Next.js provides environment variables through the `process.env` object.

        ```ts title="Next.js"
        process.env.VARIABLE_NAME
        ```
      </Tab>

      <Tab title="Astro">
        Astro provides several ways to access environment variables, depending on where your code runs:

        * Use `import.meta.env` for built-in variables like `BASE_URL` and `ASSETS_PREFIX`, and for any custom variables prefixed with `PUBLIC_`. Using the `PUBLIC` prefix will make the variable available on both the server and the client.
        * Use `Astro.locals.runtime.env`  in Astro server-side components to access custom environment variables.
        * Use `locals.runtime.env`  in API routes to access custom environment variables.

        To use `locals.runtime.env` variables during local development, create a `dev.vars` file in your project root. Use the same format as a standard `.env` file to define your environment variables.

        ```ts title="Accessing environment variables in Astro"
        // 1. Built-in environment variables (available everywhere)
        import.meta.env.BASE_URL
        import.meta.env.ASSETS_PREFIX

        // 2. In Astro components (e.g., src/pages/foo.astro)
        Astro.locals.runtime.env.VARIABLE_NAME

        // 3. In API routes (e.g., src/pages/api/foo.ts)
        import type { APIRoute } from 'astro';

        export const GET: APIRoute = async ({ locals }) => {
          const siteId = locals.runtime.env.WEBFLOW_SITE_ID;
          const accessToken = locals.runtime.env.WEBFLOW_SITE_API_TOKEN;
          // Use siteId and accessToken as needed
        };
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## 5. Deploy your project

After configuring your project:

<Steps>
  <Step title="Test your app in the local preview environment">
    Before deploying, test your app locally in an environment that simulates Webflow Cloud. The `preview` script uses Wrangler to serve your app from the correct mount path.

    ```bash
    npm run preview
    ```

    Your app will be available at `http://localhost:PORT/YOUR_MOUNT_PATH`, where `PORT` is the port number shown in your terminal and `YOUR_MOUNT_PATH` is the one you configured.
  </Step>

  <Step title="Authenticate with Webflow">
    In your terminal, run the following command to authenticate with Webflow:

    ```bash
    webflow auth login
    ```

    This command opens a browser window to authenticate your Webflow account. After you grant access, you'll be prompted in your terminal to select a site for deployment. The CLI then creates/updates a `.env` file at the root of your project with the necessary `WEBFLOW_SITE_ID` and `WEBFLOW_API_TOKEN`.
  </Step>

  <Step title="Deploy using the Webflow CLI">
    After authenticating, run the following command to deploy your project:

    ```bash
    webflow cloud deploy
    ```

    Additionally, when you commit your changes to your GitHub branch, Webflow Cloud will automatically detect the changes and deploy your project to your environment. Learn more about [deployments in the documentation.](/webflow-cloud/deployments)

    <Warning title="Your deployment may take up to 2 minutes to complete">
      View your deployment in the ["Environment Details"](/webflow-cloud/deployments#deployment-history) dashboard. Review the status of your deployment by viewing the [build logs](/webflow-cloud/deployments#build-logs).
    </Warning>
  </Step>

  <Step title="View your app at your site's URL + mount path">
    Once your app has been successfully deployed, navigate to your site's domain and mount path to see your newly deployed Webflow Cloud app!
  </Step>
</Steps>

## Next steps

Now that you've successfully deployed your app on Webflow Cloud, here's what you can do next.

<CardGroup>
  <Card
    title="Sync your Webflow design system"
    href="/devlink/reference/overview"
    iconSize="12"
    iconPosition="left"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DevLink.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DevLink.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    Learn how to use DevLink to sync your Webflow styles, variables, and components with your app
  </Card>

  <Card
    title="Optimize your app for Webflow Cloud"
    href="/webflow-cloud/environment/framework-customization"
    iconSize="12"
    iconPosition="left"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Optimize.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Optimize.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    Explore how to optimize and tailor your deployment for the best experience on Webflow Cloud.
  </Card>

  <Card
    title="Manage deployments"
    href="/webflow-cloud/deployments"
    iconSize="12"
    iconPosition="left"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CloudUpload.svg" alt="" className="hidden dark:block" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CloudUpload.svg" alt="" className="block dark:hidden" />
            </>
        }
  >
    Explore deployment options and Webflow Cloud's CI/CD integration with GitHub to streamline your release process
  </Card>

  <Card
    title="Add a SQLite database to your app"
    href="/webflow-cloud/add-sqlite"
    iconSize="12"
    iconPosition="left"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg" alt="" className="light-icon" />
            </>
        }
  >
    Add a SQLite database to your app to store and retrieve user data.
  </Card>
</CardGroup>

## Troubleshooting

<Accordion title="I'm seeing a 404 error when I try to access my app">
  After creating a new environment, you'll need to publish your Webflow site to make your environment live.
</Accordion>

<Accordion title="A deployment doesn't start when I push to my Github repo">
  The [Webflow Cloud GitHub App](https://github.com/apps/webflow-cloud/installations/select_target) may not have access to your repository. To check, go to the `Webflow Cloud` tab in your Webflow site settings and click "Install GitHub App." Follow the prompts on GitHub to ensure Webflow has access to read from your repository. Once you grant access, try committing to the branch that Webflow Cloud should be monitoring for deployments in your app.
</Accordion>

<Accordion title="My assets or API routes aren't loading correctly">
  Check that you're correctly using the base path in all asset and API references. Look for fixed paths that might be missing the base path prefix.
</Accordion>

<Accordion title="Authentication isn't working properly">
  Verify that your callback URLs include the correct base path and that you're not duplicating the base path in your code references.
</Accordion>

<Accordion title="My build is failing in Webflow Cloud">
  Check your project's [build logs](/webflow-cloud/deployments#build-logs) in the Webflow Cloud dashboard. Common issues include:

  * Incompatible Node.js version
  * Environment variables not configured correctly
  * Missing or incorrect framework configuration in the following files:
    * `webflow.json`
    * `next.config.js` or `Astro.config.js`
    * `wrangler.jsonc`
    * `cloudflare-env.d.ts` or `worker-configuration.d.ts`
  * Custom build commands not supported (Webflow Cloud only uses `Astro build` or `next build`)
</Accordion>

<Accordion title="Caching is not working as expected">
  Webflow Cloud overrides custom cache headers from your application. Once content is cached, you can't control caching behavior through standard HTTP headers like `Cache-Control`. See more on header behavior limitations [here](/webflow-cloud/limits#header-behavior-limitations).

  This means traditional cache invalidation methods won't work - you'll need to work within Webflow Cloud's caching behavior rather than trying to override it.
</Accordion>

---

# Add a SQLite database to your app

> Add a SQLite database to your app

This tutorial guides you through connecting a [SQLite database](/webflow-cloud/storing-data/sqlite)
to your Webflow Cloud app, defining your schema, and building API routes to store
and retrieve user data.

**What you’ll learn:**

* How to add a SQLite database to your Webflow Cloud project
* How to define and manage your schema with Drizzle ORM
* How to run and apply database migrations
* How to create API routes to add and fetch data

## Prerequisites

Before you begin, make sure you have:

* A Webflow Cloud project linked to a GitHub repository
* A Webflow Cloud environment set up
* Node.js 20+ and npm 10+
* Basic familiarity with JavaScript/TypeScript

<Note title="New to Webflow Cloud?">
  If you haven’t already, follow the [Quick Start guide](/webflow-cloud/getting-started) to set up your project and environment.
</Note>

## Add a SQLite database

Set up a SQLite database so your Webflow Cloud app can store data. This step connects your project to a reliable, easy-to-use SQLite database.

<Steps>
  <Step title="Open your project in your IDE.">
    Navigate to your project in your IDE, and open the `wrangler.json` file.
  </Step>

  <Step title="Add a SQLite database binding to the `d1_databases` array in `wrangler.json`.">
    Add the `d1_databases` array to the `wrangler.json` file, and declare a new database binding.

    ```json
    "d1_databases": [
      {
        "binding": "DB", // A valid JavaScript variable name
        "database_name": "db",
        "database_id": "1234", // Webflow Cloud will generate this for you once you deploy your app
        "migrations_dir": "drizzle" // We'll create this directory later
      }
    ]
    ```

    This tells Webflow Cloud to create a SQLite database for your project and to apply any migrations found in the `drizzle` directory.

    | Property         | Description                                                                                                      |
    | ---------------- | ---------------------------------------------------------------------------------------------------------------- |
    | `binding`        | The variable name you’ll use to access the database in your code. This must be a valid JavaScript variable name. |
    | `database_name`  | The name for your database.                                                                                      |
    | `database_id`    | A unique identifier for your database (Webflow Cloud will generate this for you once you deploy your app).       |
    | `migrations_dir` | The directory where your migration files are stored.                                                             |
  </Step>

  <Step title="Generate TypeScript types for your binding.">
    <Tabs>
      <Tab title="Astro">
        ```bash title="Terminal"
        wrangler types
        ```
      </Tab>

      <Tab title="Next.js">
        ```bash
        npm run cf-typegen
        ```
      </Tab>
    </Tabs>

    This command updates your project’s type definitions so you can safely access the database in your code.
  </Step>
</Steps>

## Add Drizzle ORM

[Drizzle ORM](https://orm.drizzle.team/docs/overview) is a tool that helps you work with your database using JavaScript or TypeScript code, instead of writing raw SQL. It makes it easier to define your database structure, run migrations, and interact with your data safely and reliably.

<Steps>
  <Step title="Install Drizzle ORM and Drizzle Kit.">
    Install the required packages for working with Drizzle ORM and managing migrations:

    ```bash
    npm i drizzle-orm
    npm i -D drizzle-kit tsx better-sqlite3
    ```

    * `drizzle-orm`: The ORM for interacting with your database.
    * `drizzle-kit`: CLI for migrations and schema generation.
    * `tsx` and `better-sqlite3`: Required for local development and SQLite support.
  </Step>

  <Step title="Create the Drizzle config file.">
    In the root of your project, create a file named `drizzle.config.ts`. Configure the schema path and output path:

    <CodeBlocks>
      ```typescript title="drizzle.config.ts"
      import { defineConfig } from "drizzle-kit";

      export default defineConfig({
          schema: "./src/db/schema/index.ts",
          out: "./drizzle",
          dialect: "sqlite",
      });
      ```
    </CodeBlocks>
  </Step>

  <Step title="Add local migration scripts to your package.json.">
    Add the following scripts to your `package.json` to manage **local** migrations:

    ```json
    "scripts": {
        // ... existing scripts ...
        "db:generate": "drizzle-kit generate",
        "db:apply:local": "wrangler d1 migrations apply DB --local",
    }
    ```

    * `db:apply:local`: Applies migrations to your local database.
    * `db:generate`: Generates migration files from your schema.
  </Step>
</Steps>

## Create a schema

A database schema defines the data your app can store. Here, you’ll set up your first table to keep things organized as your project grows.

<Steps>
  <Step title="Create the schema directory.">
    To keep your schema organized, create a `db/schema` folder inside your `src` directory to hold all your schema files.

    ```bash
    cd src
    mkdir -p db/schema
    ```
  </Step>

  <Step title="Define your first table.">
    Create an `index.ts` file in `src/db/schema` Import the necessary Drizzle ORM methods use them to define a `usersTable`:

    <CodeBlocks>
      ```typescript title="src/db/schema/index.ts"
      // Import the necessary Drizzle ORM functions
      import { sqliteTable, text, int } from "drizzle-orm/sqlite-core";

      // Define the users table with the following fields:
      // - id: The primary key of the table
      // - name: The name of the user
      // - age: The age of the user
      // - email: The email of the user

      export const usersTable = sqliteTable("users_table", {
          id: int().primaryKey({ autoIncrement: true }),
          name: text().notNull(),
          age: int().notNull(),
          email: text().notNull().unique(),
      });
      ```
    </CodeBlocks>

    This code defines a `usersTable` with multiple fields.

    By defining your schema in code, you ensure your database structure is always documented and version-controlled. To learn more about defining schemas with Drizzle ORM, see the [Drizzle ORM documentation](https://orm.drizzle.team/docs/sql-schema-declaration).
  </Step>

  <Step title="Initialize the database">
    Whenever you change your schema, you need to generate a migration. A migration is a set of instructions for updating the database structure. Migrations let you evolve your database structure safely over time, without losing data or breaking your app.

    Since you just created a new table, you need to generate a migration file to update the database. In your terminal, run the following commands to generate a new migration file in the `drizzle` directory from your schema defined in `src/db/schema/index.ts`, and apply it to the local database:

    ```bash
    npm run db:generate
    npm run db:apply:local
    ```
  </Step>
</Steps>

## Connect to the database

Now you’ll connect your app to the database. This makes it easy to add, find, and update information as your users interact with your app.

<Steps>
  <Step title="Create a helper function to get the database instance.">
    To avoid repeating connection logic, create a reusable helper that returns a Drizzle ORM instance. This ensures you always use the correct schema and [environment](/webflow-cloud/environment), and improves performance by reusing connections.

    In `src/db`, create a `getDb.ts` file and add the following code:

    <Tabs>
      <Tab title="Astro">
        ```typescript title="src/db/getDb.ts"
        import { drizzle } from "drizzle-orm/d1";
        import * as schema from "./schema";

        // For dynamic routes
        export const getDb = (locals: App.Locals) => {
        const { env } = locals.runtime;
        return drizzle(env.DB, { schema });
        };

        // For static routes
        export const getDbAsync = async (locals: App.Locals) => {
        const { env } = locals.runtime;
        return drizzle(env.DB, { schema });
        };
        ```
      </Tab>

      <Tab title="Next.js">
        ```typescript title="src/db/getDb.ts"
        import { getCloudflareContext } from "@opennextjs/cloudflare";
        import { drizzle } from "drizzle-orm/d1";
        import { cache } from "react";
        import * as schema from "./schema";

        // For dynamic routes
        export const getDb = cache(() => {
        const { env } = getCloudflareContext();
        return drizzle(env.DB, { schema });
        });

        // For static routes
        export const getDbAsync = cache(async () => {
        const { env } = await getCloudflareContext({ async: true });
        return drizzle(env.DB, { schema });
        });
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Create a route to add users to the users table.">
    To allow your app to add new users, create an API route that accepts user details and inserts them into the `usersTable`. This pattern is common for building RESTful APIs and helps keep your data layer organized.

    <Tabs>
      <Tab title="Astro">
        In `src/pages/api`, create a `users.ts` file with the following code:

        ```typescript title="src/pages/api/users.ts"
        import { APIRoute } from "astro";
        import { getDb } from "../../db/getDb";
        import { usersTable } from "../../db/schema";

        // Define the expected shape of the request body
        type UserInput = {
        name: string;
        age: number;
        email: string;
        };

        // Define CORS headers
        const corsHeaders = {
        "Access-Control-Allow-Origin": "*", // Or specify your domain instead of *
        "Access-Control-Allow-Methods": "GET,POST,OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type",
        };

        // Handle OPTIONS requests for CORS preflight
        export const OPTIONS: APIRoute = async ({ request }) => {
            return new Response(null, {
                headers: corsHeaders,
            });
        };

        // Handle POST requests to add a new user
        export const POST: APIRoute = async ({ request, locals }) => {
        const db = getDb(locals); // Get the database instance
        const { name, age, email }: UserInput = await request.json();
        try {
            // Insert the new user into the usersTable
            const newUser = await db
            .insert(usersTable)
            .values({ name, age, email })
            .returning();
            // Return the created user
            return Response.json(newUser[0], { status: 201 });
        } catch (error) {
            // Handle errors (e.g., duplicate email)
            return Response.json({ error: "Failed to create user" }, { status: 500 });
        }
        };
        ```
      </Tab>

      <Tab title="Next.js">
        In `src/app/api/users`, create a `route.ts` file:

        ```typescript title="src/app/api/users/route.ts"
        import { NextRequest, NextResponse } from "next/server";
        import { getDb } from "@/db/getDb";
        import { usersTable } from "@/db/schema";

        type UserInput = {
        name: string;
        age: number;
        email: string;
        };

        export async function POST(request: NextRequest) {
        const db = getDb();
        const { name, age, email }: UserInput = await request.json();
        try {
            const newUser = await db
            .insert(usersTable)
            .values({ name, age, email })
            .returning();
            return NextResponse.json(newUser[0], { status: 201 });
        } catch (error) {
            return NextResponse.json({ error: "Failed to create user" }, { status: 500 });
        }
        }
        ```
      </Tab>
    </Tabs>

    **What’s happening?**

    * The route receives a POST request with user data.
    * It inserts the data into the `usersTable`.
    * On success, it returns the new user; on error, it returns a failure message.
  </Step>

  <Step title="Create a route to get users from the users table.">
    To retrieve data, create a GET route that returns all users from the database.

    <Tabs>
      <Tab title="Astro">
        In the same `users.ts` file, add:

        ```typescript title="src/pages/api/users.ts"
        export const GET: APIRoute = async ({ locals }) => {
          const db = getDb(locals);
          try {
            const users = await db.select().from(usersTable);
            return Response.json(users, { status: 200 });
          } catch (error) {
            return Response.json({ error: "Failed to fetch users" }, { status: 500 });
          }
        };
        ```
      </Tab>

      <Tab title="Next.js">
        In the same `route.ts` file, add:

        ```typescript title="src/app/api/users/route.ts"
        export async function GET(request: NextRequest) {
          const db = getDb();
          try {
            const users = await db.select().from(usersTable);
            return NextResponse.json(users, { status: 200 });
          } catch (error) {
            return NextResponse.json(
              { error: "Failed to fetch users" },
              { status: 500 }
            );
          }
        }
        ```
      </Tab>
    </Tabs>

    **What’s happening?**

    * The route receives a GET request.
    * It queries all users from the database.
    * Returns the list of users or an error message.
  </Step>

  <Step title="Test your routes.">
    Test your API routes to make sure you can add and retrieve users from your database.

    1. Start your app by running the following command in your terminal:

       ```bash
       npm run dev
       ```

    2. Add a user by sending a POST request (replace `<YOUR_PORT>` with your actual port number, for example, `4321`):

       ```bash
       curl -X POST http://localhost:<YOUR_PORT>/{YOUR_APP_MOUNT_PATH}/api/users \
         -H "Content-Type: application/json" \
         -d '{"name": "Arthur Dent", "age": 33, "email": "arthur.dent@bbc.co.uk"}'
       ```

       A successful response returns the new user as JSON, for example:

       ```json
       {
         "id": 1,
         "name": "Arthur Dent",
         "age": 33,
         "email": "arthur.dent@bbc.co.uk"
       }
       ```

       Try adding more users with different data to populate your database.

    3. Retrieve all users by sending a GET request:
       ```bash
       curl http://localhost:<YOUR_PORT>/{YOUR_APP_MOUNT_PATH}/api/users
       ```
       You should see a list of users in the response.
  </Step>
</Steps>

## Deploy and view your app

When you deploy to Webflow Cloud, your database migrations are applied automatically and your remote database is updated. From here, you can connect to your database through your app’s endpoints, and any data you add will persist. You can also view and manage your data directly in the Webflow Cloud UI.

<Steps>
  <Step title="Deploy your app.">
    Use the Webflow CLI to trigger a new deployment of your app. Additionaly, you can commit and push your changes to your GitHub repository to trigger a new deployment as well.

    <CodeBlocks>
      ```bash title="Webflow CLI"
      webflow cloud deploy
      ```

      ```bash title="GitHub"
      git add .
      git commit -m "Add users table"
      git push
      ```
    </CodeBlocks>
  </Step>

  <Step title="View your app and database in Webflow Cloud">
    1. Open your project’s environment in Webflow Cloud.
    2. After your deployment completes, click the "Storage" tab in your environment.
       <Frame>
         <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/2ab4fecbc3e9a35cb90853ab6f598b60f62f65d5cb095ab660f60fc9b2c74ff1/products/webflow-cloud/pages/concepts/storing-data/assets/storage-sql-lite.png" />
       </Frame>
    3. Select the `DB` binding to view your database.
    4. You should see the `users_table`. For now, it will be empty, since all the previous changes were local. In the "Storage" tab, you can add and update users through the UI.

       <Frame>
         <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/29730530f2a03935c0930c5f7c7a4a8c5ac70f3d892e15408572a49717914399/products/webflow-cloud/pages/concepts/assets/database-viewer.png" alt="Database viewer in Webflow Cloud" />
       </Frame>

    <Tip title="Try calling your API routes">
      You can also try calling your API routes to add and retrieve users from your deployed app.

      ```bash
      curl -X POST https://<your-app-url>/<your-app-mount-path>/api/users \
      -H "Content-Type: application/json" \
      -d '{"name": "Arthur Dent", "age": 33, "email": "arthur.dent@bbc.co.uk"}'
      ```
    </Tip>
  </Step>
</Steps>

You’ve now added persistent storage to your Webflow Cloud app using SQLite and Drizzle ORM. You learned how to:

* Connect a SQLite database to your project
* Define and manage your schema in code
* Run and apply migrations
* Build API routes to add and retrieve data

## Next steps

Ready to build more? Check out related guides and resources to keep growing your app’s capabilities.

* Learn more about [SQLite in Webflow Cloud](/webflow-cloud/storing-data/sqlite)
* Learn about other [storage options in Webflow Cloud](/webflow-cloud/storing-data/overview)
* See examples for [adding authentication to your app](/webflow-cloud/examples)

---

# Add a Key Value Store to your app

> Add a Key Value Store to your app

**What you’ll learn:**

* How to add a Key Value Store to your Webflow Cloud project
* How to use a Key Value Store as a caching layer for third-party API data
* How to improve performance and reduce external requests

## Prerequisites

Before you begin, make sure you have:

* A Webflow Cloud project linked to a GitHub repository
* A Webflow Cloud environment set up
* Node.js 20+ and npm 10+
* Basic familiarity with JavaScript/TypeScript

<Note title="New to Webflow Cloud?">
  If you haven’t already, follow the [Quick Start guide](/webflow-cloud/getting-started) to set up your project and environment.
</Note>

## Add a Key Value Store binding

Before you can use a Key Value Store in your Webflow Cloud app, you need to declare a binding in your project’s configuration. This binding tells your app how to connect to the storage resource.

Once the binding is declared, your app can use simple methods like `.get()`, `.put()`, and `.delete()` to read from and write to the Key Value Store directly in your code.

<Steps>
  <Step title="Update your project in Webflow Cloud (Optional)">
    If you created a Webflow Cloud prior to 7/16/2025, you'll need to update your project in the Webflow Cloud dashboard to use Webflow Cloud's new storage system.

    1. Go to your project in the Webflow Cloud dashboard.
    2. Select the "..." icon in the "Actions" section of the menu.
    3. Select "Edit" (you don't actually need to edit anything).
    4. Press "Save Changes" to update your project.

       <Frame>
         <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/97a23431a8bc1c17dfca0fe41f64dc3417e79faf969fd07d89b3b1fc809a86bc/products/webflow-cloud/pages/concepts/assets/update-project.png" />
       </Frame>
  </Step>

  <Step title="Open your project.">
    Launch your project in your preferred code editor.
  </Step>

  <Step title="Declare the Key Value Store binding.">
    In your project’s `wrangler.json` file, add a `kv_namespaces` array to define your Key Value Store binding:

    ```json title="wrangler.json"
    "kv_namespaces": [
        {
            "binding": "WEATHER_CACHE",
            "id": "1234567890", // Webflow Cloud will generate this for you once you deploy your app
        }
    ]
    ```

    * `binding`: The variable name you’ll use to access the database in your code. This must be a valid JavaScript variable name.
    * `id`: A unique identifier for your database (Webflow Cloud will generate this for you once you deploy your app).
  </Step>

  <Step title="Generate type definitions for your binding.">
    Update your project’s type definitions to enable autocomplete and type safety:

    <Tabs>
      <Tab title="Astro">
        ```bash title="Terminal"
        wrangler types
        ```
      </Tab>

      <Tab title="Next.js">
        ```bash
        npm run cf-typegen
        ```
      </Tab>
    </Tabs>

    This ensures your code editor recognizes the Key Value Store binding.
  </Step>
</Steps>

## Get weather data

Now that your Key Value Store binding is set up, you can use it to cache data in your app. In this section, you’ll build an API route that fetches weather information based on the user’s location. Each response will be stored in your Key Value Store for 10 minutes, so repeated requests are fast and reduce calls to the external weather API.

<Steps>
  <Step title="Create a new API route">
    Set up an API endpoint that will fetch weather data for your users.

    <Tabs>
      <Tab title="Astro">
        1. In your Astro project, go to the `src/pages/api` directory. If this directory doesn’t exist, create it.

        2. Inside this directory, create a new file called `weather.ts`.

        3. Add the following code into your new file:

        ```ts title="src/pages/api/weather.ts"
        import { APIRoute } from "astro";

        // Get api/weather
        export const GET: APIRoute = async ({ request, locals }) => {
            
        //... Implementation will be added in the next steps
        }
        ```
      </Tab>

      <Tab title="Next.js">
        1. In your Next.js project, go to the `src/app/api` directory. If this directory doesn’t exist, create it.

        2. Inside this directory, create a new file called `weather/route.ts`.

        3. Add the following code into your new file:

        ```ts title="src/app/api/weather/route.ts"
        import type { NextRequest } from "next/server";
        import { getCloudflareContext } from "@opennextjs/cloudflare";

        // Get api/weather
        export async function GET(request: NextRequest) {
            
            //... Implementation will be added in the next steps
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Get the Key Value Store binding">
    Access your Key Value Store binding in your API route so you can read from and write to the store.

    <Tabs>
      <Tab title="Astro">
        In your `weather.ts` file, access the binding from the runtime environment:

        ```ts title="src/pages/api/weather.ts" {5-7}
        import { APIRoute } from "astro";

        export const GET: APIRoute = async ({ request, locals }) => {

            // Access the environment bindings
            { env } = locals.runtime;
            const weatherCache = env.WEATHER_CACHE;
                
            //... continue with the next steps
        }
        ```

        * `env.WEATHER_CACHE` gives you access to the Key Value Store you declared in `wrangler.json`.
      </Tab>

      <Tab title="Next.js">
        In your `weather/route.ts` file, access the binding using the Cloudflare context:

        ```ts title="src/app/api/weather/route.ts" {6-8}
        import type { NextRequest } from "next/server";
        import { getCloudflareContext } from "@opennextjs/cloudflare";

        export async function GET(request: NextRequest) {

            // Access the environment bindings and cloudflare request context
            const { env, cf } = getCloudflareContext();
            const weatherCache = env.WEATHER_CACHE;
            
            //... continue with the next steps
        }
        ```

        * `env.WEATHER_CACHE` gives you access to the Key Value Store you declared in `wrangler.json`.
        * `cf` contains the user's location information, we'll use this in the next step.
      </Tab>
    </Tabs>
  </Step>

  <Step title="Get user's location">
    Extract the user's location from the request headers. This information will be used to fetch location-specific weather data.

    <Tabs>
      <Tab title="Astro">
        In your `weather.ts` file, add the following code to get the user's latitude and longitude from the Cloudflare request headers:

        ```ts title="src/pages/api/weather.ts" {9-12}
        import { APIRoute } from "astro";

        export const GET: APIRoute = async ({ request, locals }) => {

            { env } = locals.runtime;
            const weatherCache = env.WEATHER_CACHE;
                
            // Get User's location from Cloudflare headers
            if (!request.cf) {
                return new Response("No Cloudflare headers found", { status: 400 });
            }
            const { latitude, longitude } = request.cf;
            

            //... continue with the next steps
        }
        ```

        * `request.cf` contains the user's location information.
        * If the headers are missing, return a 400 error.
      </Tab>

      <Tab title="Next.js">
        In your `weather/route.ts` file, add the following code to get the user's latitude and longitude from Cloudflare's request headers:

        ```ts title="src/app/api/weather/route.ts" {13-17}
        import type { NextRequest } from "next/server";
        import { getCloudflareContext } from "@opennextjs/cloudflare";

        type WeatherCache = { data: any; timestamp: number };

        // Get Request
        export async function GET(request: NextRequest) {

            // Get binding and cloudflare request context
            const { env, cf } = getCloudflareContext();
            const weatherCache = env.WEATHER_CACHE;
            
            // Get User's location from Cloudflare headers
            if (!cf) {
                return new Response("No Cloudflare headers found", { status: 400 });
            }
            const { latitude, longitude } = cf;
            

            //... continue with the next steps
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Check for cached data">
    Before making an external API call, check if the weather data for the user’s location is already stored in your Key Value Store. If cached data exists, return it immediately to improve performance and reduce external requests.

    Use the `.get()` method on the binding to check for cached data.

    <Tabs>
      <Tab title="Astro">
        In your `weather.ts` file, add the following logic after retrieving the user's location:

        ```ts title="src/pages/api/weather.ts" {8}
        // ...previous code

            // Create a cache key from latitude and longitude
            const cacheKey = `${latitude}-${longitude}`;

            try {
                // Try to get the weather data from the cache
                const cachedWeather = await weatherCache.get(cacheKey);

                // If the cached data exists, return it
                if (cachedWeather) {
                    return new Response(cachedWeather, {
                    status: 200,
                    headers: { 
                        "Content-Type": "application/json",
                        "X-Cache-Status": "HIT"
                    },
                    });
                }

                //... continue with fetching weather data from the API if not cached

        ```

        * This creates a unique cache key for each location.
        * If data is found, return it with a `X-Cache-Status: HIT` header.
        * If not, continue to the next step to fetch and cache new data.
      </Tab>

      <Tab title="Next.js">
        In your `weather/route.ts` file, add the following logic after retrieving the user's location:

        ```ts title="src/app/api/weather/route.ts" {8}
        // ...previous code

            // Create a cache key from latitude and longitude
            const cacheKey = `${latitude}-${longitude}`;

            try {
                // Try to get the weather data from the cache
                const cachedWeather = await weatherCache.get(cacheKey);

                // If the cached data exists, return it
                if (cachedWeather) {
                    return new Response(cachedWeather, {
                    status: 200,
                    headers: { 
                        "Content-Type": "application/json",
                        "X-Cache-Status": "HIT"
                    },
                    });
                }

                //... continue with fetching weather data from the API if not cached

        ```

        * This creates a unique cache key for each location.
        * If data is found, return it with a `X-Cache-Status: HIT` header.
        * If not, continue to the next step to fetch and cache new data.
      </Tab>
    </Tabs>
  </Step>

  <Step title="Fetch and cache fresh weather data">
    If no cached weather data is found, fetch fresh data from the Open-Meteo API, store it in your Key Value Store, and return it to the user.

    Store the fresh data in your Key Value Store using the `.put()` method.

    <Tabs>
      <Tab title="Astro">
        In your `weather.ts` file, add the following logic after checking for cached data:

        ```ts title="src/pages/api/weather.ts"
        // ...previous code

        // If NOT cached, fetch weather data from Open-Meteo API
        const weatherUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true&temperature_unit=fahrenheit`;
        const weatherData = await fetch(weatherUrl);

        // If error, return error message
        if (!weatherData.ok) {
            throw new Error(`Weather API error: ${weatherData.status}`);
        }

        // Parse the weather data
        const weatherDataJson = await weatherData.json();

        // Cache the weather data for 10 minutes (600 seconds)
        await weatherCache.put(cacheKey, JSON.stringify(weatherDataJson), {
            expirationTtl: 600,
        });

        // Return the weather data with a cache status header
        return new Response(JSON.stringify(weatherDataJson), {
            status: 200,
            headers: { 
                "Content-Type": "application/json",
                "X-Cache-Status": "MISS"
                    },
        });

        // Add error handling
        } catch (error) {
            console.error("Error fetching or caching weather data:", error);
            return new Response(
                JSON.stringify({ error: "Failed to fetch weather data" }),
                {
                    status: 502,
                    headers: { "Content-Type": "application/json" },
                }
            );
        }
        };
        ```

        * Fetches weather data for the user’s location.
        * Stores the result in your Key Value Store for 10 minutes.
        * Returns the data with a `X-Cache-Status: MISS` header.
        * If error, return error message.
      </Tab>

      <Tab title="Next.js">
        ```ts title="src/app/api/weather/route.ts"
        // ...previous code

        // If NOT cached, fetch weather data from Open-Meteo API
        const weatherUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true&temperature_unit=fahrenheit`;
        const weatherData = await fetch(weatherUrl);

        // If error, return error message
        if (!weatherData.ok) {
            throw new Error(`Weather API error: ${weatherData.status}`);
        }

        // Parse the weather data
        const weatherDataJson = await weatherData.json();

        // Cache the weather data for 10 minutes (600 seconds)
        await weatherCache.put(cacheKey, JSON.stringify(weatherDataJson), {
            expirationTtl: 600,
        });

        // Return the weather data with a cache status header
        return new Response(JSON.stringify(weatherDataJson), {
            status: 200,
            headers: { "Content-Type": "application/json" },
        });

        // Add error handling
        } catch (error) {
        console.error("Error fetching or caching weather data:", error);
        return new Response(
            JSON.stringify({ error: "Failed to fetch weather data" }),
            {
                status: 502,
                headers: { "Content-Type": "application/json" },
            }
        );
        }
        };
        ```

        * Fetches weather data for the user’s location.
        * Stores the result in your Key Value Store for 10 minutes.
        * Returns the data with a `X-Cache-Status: MISS` header.
        * If error, return error message.
      </Tab>
    </Tabs>
  </Step>

  <Step title="Test your weather API endpoint">
    Make sure your API route works as expected by sending a request from your terminal.

    1. In your terminal, start your dev server using Cloudflare's context.

       ```bash
       npm run preview
       ```

    2. In a new terminal, run:

       ```bash
       curl http://localhost:<YOUR_PORT_NUMBER>/<YOUR_BASE_PATH>/api/weather
       ```

       * `<YOUR_PORT_NUMBER>` is the port number of your dev server.
       * `<YOUR_BASE_PATH>` is the base path of your project.

    3. Check the response headers:
       * The first request should include `X-Cache-Status: MISS` (data fetched from the API and cached).
       * Subsequent requests should include `X-Cache-Status: HIT` (data returned from the cache).
       If you see the expected headers and weather data in the response, your endpoint and caching are working!
  </Step>
</Steps>

## Update your home page

Now that your API is returning weather data, let’s display it directly on your home page. In this section, you’ll add a weather widget that shows the current temperature and a matching weather icon for your user’s location. This gives users instant, dynamic feedback and demonstrates how to connect your frontend to your new API.

<Steps>
  <Step title="Add weather icons to your project">
    Add weather icons to your project so you can visually represent the current weather.

    ```bash
    npm install weather-icons
    ```

    * Run this command in your project's root directory.
    * The `weather-icons` package provides a set of CSS classes for common weather conditions
  </Step>

  <Step title="Map weather codes to icon classes">
    Create a utility to translate weather codes from your API into icon classes for display.

    1. In your project’s `src` directory, create a `utils` folder if it doesn’t already exist.
    2. Inside `utils`, create a file named `iconMap.ts`.
    3. Copy and paste the following code into `iconMap.ts`:

    ```ts title="src/utils/iconMap.ts" maxLines=10
        const ICON_MAP: { [key: number]: string } = {
            0: "wi-day-sunny", // Clear
            1: "wi-day-sunny-overcast", // Mostly Clear
            2: "wi-day-cloudy", // Partly Cloudy
            3: "wi-cloudy", // Overcast

            45: "wi-fog", // Fog
            48: "wi-fog", // Icy Fog

            51: "wi-sprinkle", // Light Drizzle
            53: "wi-showers", // Drizzle
            55: "wi-rain", // Heavy Drizzle

            56: "wi-rain-mix", // Light Freezing Drizzle
            57: "wi-rain-mix", // Freezing Drizzle

            61: "wi-raindrops", // Light Rain
            63: "wi-rain", // Rain
            65: "wi-rain-wind", // Heavy Rain

            66: "wi-rain-mix", // Light Freezing Rain
            67: "wi-rain-mix", // Freezing Rain

            71: "wi-snow", // Light Snow
            73: "wi-snow", // Snow
            75: "wi-snow-wind", // Heavy Snow

            77: "wi-snowflake-cold", // Snow Grains

            80: "wi-raindrops", // Light Showers
            81: "wi-rain", // Showers
            82: "wi-rain-wind", // Heavy Showers

            85: "wi-snow", // Light Snow Showers
            86: "wi-snow-wind", // Snow Showers

            95: "wi-thunderstorm", // Thunderstorm
            96: "wi-storm-showers", // Light T-storm w/ Hail
            99: "wi-storm-showers", // T-storm w/ Hail
        };

        export default ICON_MAP;

    ```
  </Step>

  <Step title="Call the weather API from your home page">
    Fetch the latest weather data from your API and display it on your home page, along with the appropriate weather icon.

    <Tabs>
      <Tab title="Astro">
        1. Open your home page file. (for example, `src/pages/index.astro`)

        2. Import the weather icons CSS and your icon map utility at the top of the file.

           ```ts title="src/pages/index.astro"
           import 'weather-icons/css/weather-icons.css';
           import ICON_MAP from '../utils/iconMap.js';
           ```

        3. Fetch the weather data from your API and extract the temperature and weather code. Then, use the weather code to get the appropriate icon class from your icon map utility.

           ```ts title="src/pages/index.astro"
           // Get the base URL for your API
           const url = Astro.url.origin + import.meta.env.BASE_URL;

           // Fetch weather data
           const weather = await fetch(`${url}/api/weather`);
           const weatherData = await weather.json();
           const { temperature, weathercode } = weatherData?.current_weather;

           // Map the weather code to an icon class
           const iconClass = ICON_MAP[weathercode];
           ---
           ```

        4. Display the weather data and icon in your page’s markup, below the welcome message:

           ```tsx title="src/pages/index.astro" {3}
           <h1 class="margin-bottom-24px">Welcome to Webflow Cloud</h1>
           <p class="margin-bottom-24px">This is a simple test using Basic components with enhanced styling.</p>
           <h2>{temperature}°F <i class={`wi ${iconClass}`}></i></h2>
           <div>
           ```

        See the full code example below:

        ```ts title="src/pages/index.astro" maxLines=10
        ---
        import Layout from '../layouts/Layout.astro';
        import { Navbar } from '../../devlink/Navbar.jsx';
        import { Section, Container, Block, Link } from '../../devlink/_Builtin/Basic';
        import 'weather-icons/css/weather-icons.css';
        import ICON_MAP from '../utils/iconMap.js';

        // Get base url for API calls
        const url = Astro.url.origin + import.meta.env.BASE_URL;

        //  Get weather data
        const weather = await fetch(`${url}/api/weather`);
        console.log(weather);
        const weatherData = await weather.json();
        const { temperature, weathercode }: { temperature: number; weathercode: number } = weatherData?.current_weather;

        const iconClass = ICON_MAP[weathercode];

        ---

        <Layout>
        <Navbar
        />
        <Section
            client:load
            tag="section"
            className="margin-bottom-24px"
            style={{
            minHeight: '100vh',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
            }}
        >
            <Container>
            <Block
                tag="div"
                className="hero-split"
                style={{
                textAlign: 'center',
                maxWidth: '600px',
                margin: '0 auto'
                }}
            >
                <h1 class="margin-bottom-24px">Welcome to Webflow Cloud</h1>
                <p class="margin-bottom-24px">This is a simple test using Basic components with enhanced styling.</p>
                <h2>{temperature}°F <i class={`wi ${iconClass}`}></i></h2>
                <div>
                <Link
                    button={true}
                    options={{
                    href: "#"
                    }}
                    className="button-primary"
                >
                    Get Started
                </Link>
                </div>
            </Block>
            </Container>
        </Section>
        </Layout>

        <style>
        h1 {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        </style>

        ```
      </Tab>

      <Tab title="Next.js">
        1. Open your home page file (e.g., src/pages/page.tsx).

        2. Import the weather icons CSS and your icon map utility at the top of the file.

           ```ts title="src/pages/page.tsx"
           import "weather-icons/css/weather-icons.css";
           import ICON_MAP from "./utils/iconMap";
           ```

        3. Use a React effect to fetch weather data from your API and store it in state:

           ```ts title="src/pages/page.tsx"
           const [weather, setWeather] = useState<{ temperature: number; weathercode: number } | null>(null);

           useEffect(() => {
           fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/weather`)
               .then((res) => res.json())
               .then((data) => {
               setWeather((data as any).current_weather);
               })
               .catch((err) => {
               console.error("Weather API error:", err);
               });
           }, []);
           ```

        4. Display the weather data and icon in your component’s TSX:

           ```tsx title="src/pages/page.tsx"
           {weather ? (
           <h2>
           {weather.temperature}°F <i className={`wi ${ICON_MAP[weather.weathercode] || "wi-na"}`}></i>
           </h2>
           ) : (
               <div>Loading...</div>
           )}
           ```

        See the full code example below:

        ```ts title="src/pages/page.tsx"
            "use client";

            import { useEffect, useState } from "react";
            import { Section, Block, Link } from "@/devlink/_Builtin";
            import ICON_MAP from "./utils/iconMap";
            import "weather-icons/css/weather-icons.css";

            export default function Home() {

                // State for weather data
                const [weather, setWeather] = useState<{ temperature: number; weathercode: number } | null>(null);

                // Call the weather API and get the weather data for the user's location
                useEffect(() => {
                // Fetch weather data from your API
                fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/weather`)
                .then((res) => res.json())
                .then((data) => {
                    // Set weather state from API response
                    setWeather((data as any).current_weather);
                })
                .catch((err) => {
                    console.error("Weather API error:", err);
                    });
                }, []);


                return (
                <main style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <div style={{ textAlign: "center", maxWidth: 600, margin: "0 auto" }}>
                    <h1 className="margin-bottom-24px" style={{
                    fontSize: "2.5rem",
                    fontWeight: 700,
                    background: "linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%)",
                    WebkitBackgroundClip: "text",
                    WebkitTextFillColor: "transparent",
                    backgroundClip: "text"
                    }}>
                    Welcome to Webflow Cloud
                    </h1>
                    <p className="margin-bottom-24px">
                    This is a simple test using Basic components with enhanced styling.
                    </p>
                    <h2>
                    {weather.temperature}°F <i className={`wi ${ICON_MAP[weather.weathercode] || "wi-na"}`}></i>
                    </h2>
                    <div>
                    <a href="#" className="button-primary">
                        Get Started
                    </a>
                    </div>
                </div>
                </main>
            );
            }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Test and deploy your app

Make sure your app is working as expected by running it locally and verifying the weather widget displays correctly.

<Steps>
  <Step title="Start your development server">
    Start your app in development mode with the Cloudflare context.

    ```bash
    npm run preview

    ```
  </Step>

  <Step title="Open your app in the browser">
    Visit your app in a web browser.

    * Go to `http://<YOUR_PORT_NUMBER>/<YOUR_BASE_PATH>` to see your app running locally.

      * `<YOUR_PORT_NUMBER>` is the port number of your dev server.
      * `<YOUR_BASE_PATH>` is the base path of your project.

      You should see your app running locally with the weather widget displaying the current temperature and weather icon.

      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/1251fbeb41ff27040e411120967ebd2d410c813add0801ac24a2a3f7013a1c13/products/webflow-cloud/pages/concepts/assets/weather.png" />
      </Frame>
  </Step>

  <Step title="Deploy your app">
    Deploy your app to Webflow Cloud. You can deploy your app in two ways:

    1. Use the Webflow CLI
       ```bash
       webflow cloud deploy
       ```

    2. Commit and push your changes to your GitHub repository.

       ```bash
       git add .
       git commit -m "Deploying app to Webflow Cloud"
       git push
       ```

    Go to your environment in Webflow Cloud to see your app deployed. Once deployed, you can access your app at `https://<YOUR_DOMAIN>/<YOUR_BASE_PATH>`.
  </Step>
</Steps>

## Next steps

Congratulations! You’ve successfully added a Key Value Store to your Webflow Cloud app, built a weather API with caching, and displayed live weather data on your home page.

<CardGroup>
  <Card
    title="Explore more Key Value Store features"
    href="/webflow-cloud/storing-data/key-value-store"
    iconPosition="left"
    iconSize="12"
    icon={
                <>
                    <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DeveloperToolsSDK.svg" alt="" className="dark-icon" />
                    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DeveloperToolsSDK.svg" alt="" className="light-icon" />
                </>
            }
  >
    Learn how to manage data, set advanced expiration rules, and handle larger datasets in the Key Value Store documentation.
  </Card>

  <Card
    title="Compare storage options"
    href="/webflow-cloud/storing-data/overview"
    iconPosition="left"
    iconSize="12"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg" alt="" className="light-icon" />
            </>
        }
  >
    See how Key Value Store fits alongside other storage solutions in Webflow Cloud.
  </Card>
</CardGroup>

---

# Add Object Storage to your app

> Add Object Storage to your app

This guide will show you how to add [Object Storage](/webflow-cloud/storing-data/object-storage) to your project and use it to store and serve files. You'll learn how to:

* Set up an Object Storage binding
* List and display files from your bucket
* Upload files to your bucket with proper validation
* Handle large file uploads using multipart uploads

## Prerequisites

Before you begin, make sure you have:

* A GitHub account
* A code editor like [Cursor](https://www.cursor.com/) or [VS Code](https://code.visualstudio.com/)
* Node.js 20+ and npm 10+
* Basic familiarity with JavaScript/TypeScript

## Set up your project

This tutorial uses a repository with pre-built UI, backend endpoints, and helper utilities for file uploads and management. Follow along with the steps below and reference the code in the example project to see how Object Storage is used in this Webflow Cloud app. You may need to make some code changes to the project to get it working with your Webflow Cloud environment.

<Steps>
  <Step title="Fork and clone the example repository">
    To start, [fork the project on Github](https://github.com/Webflow-Examples/webflow-cloud-object-storage/fork) so you have your own copy to work with.

    Next, clone your fork of the starter repository to your local machine and install dependencies:

    ```bash
    git clone https://github.com/<YOUR-GITHUB-USERNAME>/webflow-cloud-object-storage.git
    cd webflow-cloud-object-storage
    npm install
    ```

    The project uses Astro with TypeScript and includes all necessary dependencies for Object Storage operations.
  </Step>

  <Step title="Create a new Webflow Cloud project">
    Go to the Webflow Cloud dashboard in your site settings and create a new Webflow Cloud project.

    1. Go to your Webflow Cloud dashboard
    2. Click "Install Github app" to authorize Webflow Cloud for your fork of this repo - follow the prompts on Github
    3. Click "Create new project"
    4. Name your project
    5. Choose the `webflow-cloud-object-storage` repository
    6. Click "Create project"

    <Note title="Repository linking">
      Once the project is created, it will automatically deploy when you push changes to the linked GitHub repository.
    </Note>
  </Step>

  <Step title="Create an environment">
    Create a new environment for the main branch

    1. In the same modal, choose the `main` branch
    2. Choose a mount path for the environment (for example, /app → mysite.webflow\.io/app)
    3. Click "Create environment"
    4. Publish your Webflow site to make your environment live
    5. A new row should appear in the table with your new environment. Click into it to see the environment details

    <Note title="Mount paths">
      Mount paths are unique to each environment and are used to route traffic to the correct environment. Each mount path must be unique across all environments within a project.
    </Note>
  </Step>

  <Step title="Add environment variables">
    On your environment page, click the "Environment Variables" tab and add the following environment variable:

    * `Variable Key`: ORIGIN
    * `Variable Value`: Your Webflow Cloud domain (for example, `https://your-site-name.webflow.io`)

    Click "Add variable" to save the variable.
  </Step>

  <Step title="Update your project configuration">
    Now, with your locally cloned project, open it in your preferred code editor and update the following files:

    * `astro.config.mjs` to include the base path for your environment and the `assetsPrefix` to match the mount path of your environment.
    * Create a new `.env` file at the root of the project to include the `ORIGIN` environment variable.

    <CodeBlocks>
      ```ts title="astro.config.mjs"
      export default defineConfig({
        base: "/YOUR_MOUNT_PATH",
        build: {
          assetsPrefix: "/YOUR_MOUNT_PATH",
        },

        // Additional configuration options...
      });
      ```

      ```bash title=".env"
      ORIGIN=YOUR_WEBFLOW_CLOUD_DOMAIN
      ```
    </CodeBlocks>
  </Step>
</Steps>

## Add Object Storage binding

Before you can use Object Storage in your Webflow Cloud app, you need to declare a binding in your project's configuration. This binding tells your app how to connect to the storage resource.

Once the binding is declared, your app can use simple methods like `.list()`, `.put()`, and `.delete()` to read from and write to the Object Storage bucket directly in your code.

<Steps>
  <Step title="Declare a binding in `wrangler.json`">
    Open your project's `wrangler.json` file and add an `r2_buckets` array to define your Object Storage buckets with the following information:

    * `binding`: The variable name you'll use to access the bucket in your code. This must be a valid JavaScript variable name.
    * `bucket_name`: The name of the bucket wher you'll store files

    ```json title={"wrangler.json"}
    {
        "r2_buckets": [
           {
              "binding": "CLOUD_FILES",
              "bucket_name": "cloud-files"
           }
        ]
     }
    ```
  </Step>

  <Step title="Generate type definitions for your binding.">
    Update your project's type definitions to enable autocomplete and type safety:

    ```bash
    npx wrangler types
    ```

    This ensures your code editor recognizes the Object Storage binding.
  </Step>

  <Step title="Deploy your app">
    Commit and push any local changes to your remote Github repo to automatically deploy your app.

    <Warning title="CLI deployments will not apply changes to binding configurations">
      To create a new binding, you'll need to commit and push your changes to your linked repository.
    </Warning>
  </Step>

  <Step title="Access your binding in your Environment Dashboard">
    In Webflow, navigate to your site's settings and click on the "Webflow Cloud" tab. Navigate to your project's environment dashboard. Once your project is deployed, you'll see a "Storage" tab appear in the dashboard.

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/38e6be519c147a1dc02afa5b59d2288301a14742a50f1218cb991420e87ad3f6/products/webflow-cloud/pages/concepts/storing-data/assets/storage-cloud-files.png" alt="Upload files to Object Storage bucket" />
    </Frame>

    Click on the "Storage" tab and you'll see your Object Storage binding listed.
  </Step>

  <Step title="Add test files to your bucket">
    Add a couple of test files to your bucket using the Webflow Cloud dashboard. Click on the "Upload" button and select the files you want to upload. Later, you'll create a route to upload files to your bucket.

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/37df4e368cb6fe9f0cd40a920a315ecf76da2701c2df8d10cf8bc0acb63a0c2d/products/webflow-cloud/pages/concepts/storing-data/assets/upload-object.png" alt="Upload files to Object Storage bucket" />
    </Frame>

    You'll see the file appear in your bucket in the dashboard.

    <Accordion title="Uploading files to your local bucket">
      In your local project, you can upload files to a local bucket by running the following command in your terminal:

      ```bash
      npx wrangler r2 object put <YOUR_BUCKET_NAME>/<YOUR_FILE_NAME> --file=<PATH_TO_YOUR_FILE>
      ```

      This will upload the file to your local bucket, which you can then access when developing your project.
    </Accordion>
  </Step>
</Steps>

## List files in your bucket

Get familiar with accessing your Object Storage bucket in your code by creating a new route that lists the files in your bucket. This route will return all files stored in your bucket with their metadata.

<Steps>
  <Step title="Create an API directory">
    In your project's `src/pages` directory, create an `api` directory.
  </Step>

  <Step title="Create a list files route">
    In your `api` directory, create a new file called `list-assets.ts`. This file will contain the logic for listing the files in your bucket.

    <iframe src="https://webflow-cms-api-docs.netlify.app/object-storage/list" allow="clipboard-write" loading="lazy" />
  </Step>
</Steps>

## Serve files from your bucket

Now that you can list files, create a route to serve individual files from your bucket. This route will handle file requests and return the file content with appropriate headers.

<Steps>
  <Step title="Create a file serving route">
    In your `api` directory, create a new file called `asset.ts`. This file will contain the logic for serving individual files from your bucket.

    <iframe src="https://webflow-cms-api-docs.netlify.app/object-storage/asset" allow="clipboard-write" loading="lazy" />
  </Step>

  <Step title="(Optional) View files in your app">
    If you added assets to your [local bucket](#uploading-files-to-your-local-bucket) in your local project, you can view them now.

    To see your app locally, run the following command:

    ```bash
    npm run dev
    ```

    This will start the development server and you can view your app at `http://localhost:4321/YOUR_BASE_PATH`.

    You should see the files you added to your bucket appear in the list of files.

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/dfd2bcb44f569f4d412e8d26ad019173cd93e5d5949187b67af26a0d22bf0738/products/webflow-cloud/pages/concepts/storing-data/examples/file-uploader.png" alt="View files in your app" />
      </Frame>
    </div>
  </Step>

  <Step title="Deploy your app">
    To deploy your app to Webflow Cloud, commit and push your changes to your GitHub repository.

    <CodeBlocks>
      ```bash
      git add .
      git commit -m "Add asset endpoints"
      git push
      ```
    </CodeBlocks>

    Go to your environment in Webflow Cloud to see your app deployed. Once deployed, you can access your app at `https://<YOUR_DOMAIN>/<YOUR_BASE_PATH>` and see the files you uploaded via the Webflow Cloud dashboard.

    To upload files from the App, you'll create a new upload route in the next step.
  </Step>
</Steps>

## Upload files to your bucket

Next you'll walk through the route to handle file uploads from your frontend. This route will process form data, validate files, and store them in your bucket. **This approach is best for smaller files less than 1MB.** For larger files, see the multipart upload route in the next section.

<Warning title="File uploads should be executed on the domain of your worker">
  To avoid size upload limits, file upload endpoints should be executed on the domain of your worker using the `ASSETS_PREFIX` environment variable, and not your custom Webflow Cloud domain. Because of this, you'll need to handle CORS requests for this route.
</Warning>

<Steps>
  <Step title="Create an upload route">
    In your `api` directory, step into the file called `upload.ts`. This file will contain the logic for uploading files to your bucket.

    <iframe src="https://webflow-cms-api-docs.netlify.app/object-storage/upload" allow="clipboard-write" loading="lazy" />
  </Step>

  <Step title="Test your upload route">
    The frontend is already set up to use the upload route. You can test it by navigating to the file uploader page and uploading a file in your development environment. You should see the file appear in the list of files.
  </Step>

  <Step title="Deploy your app">
    Deploy your app to Webflow Cloud to start uploading files from the frontend. Commit and push your changes to your GitHub repository to start a deployment.

    ```bash
    git add .
    git commit -m "Add upload endpoints"
    git push
    ```

    Once your app is deployed, navigate to the file uploader page and upload a file. You should see the file appear in the list of files.

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/dfd2bcb44f569f4d412e8d26ad019173cd93e5d5949187b67af26a0d22bf0738/products/webflow-cloud/pages/concepts/storing-data/examples/file-uploader.png" alt="Test your upload route" />
      </Frame>
    </div>

    <Note>
      You may see a `413 Content Too Large` error if you attempt to upload large files. For these cases, see the multipart upload route in the next section.
    </Note>
  </Step>
</Steps>

<br />

## Handle large files with multipart uploads

Webflow Cloud apps have a [500MB request body limit](/webflow-cloud/limits) and require requests to complete within 30 seconds. The direct upload approach from the previous section is good for small files. For larger files, use the multipart upload approach shown below.

Multipart uploads break large files into smaller chunks that can be uploaded concurrently, improving upload performance and reliability. This approach allows browsers to upload multiple parts simultaneously and resume interrupted uploads. To achieve this, you'll need to set up logic on both the server and the browser to handle the multipart upload process.

### Create the server endpoints

The **server** handles three main operations:

* **Create** - Initialize upload session and get upload ID from the bucket
* **Upload Parts** - Accept individual file chunks
* **Complete** - Combine all parts into final file and return the file metadata

This guide will cover the creation of the POST and PUT endpoints on the `src/pages/api/multipart-upload.ts` file to handle these operations.

<Steps>
  <Step title="Create the POST endpoint">
    First, review the POST endpoint that handles the creation of a new multipart upload session, as well as the completion once all parts are uploaded.

    <iframe src="https://webflow-cms-api-docs.netlify.app/object-storage/multipart-post" allow="clipboard-write" loading="lazy" />
  </Step>

  <Step title="Create the PUT endpoint">
    Next, observe how the PUT endpoint handles the uploading of individual file parts.

    <iframe src="https://webflow-cms-api-docs.netlify.app/object-storage/multipart-put" allow="clipboard-write" loading="lazy" />
  </Step>
</Steps>

### Create the browser logic

The browser handles the chunking of the file and the uploading of the parts to the server. To do this, the client-side logic will need to:

* **Initiate** - Get an `uploadId` from the server
* **Upload Parts** - Send file chunks with the `uploadId`
* **Complete** - Tell the server to combine all parts

The example repository already implements this logic, however below is a walk through of the code to understand how it works.

<iframe src="https://webflow-cms-api-docs.netlify.app/object-storage/utility-class" allow="clipboard-write" loading="lazy" />

### Test your multipart upload route

Now that your routes are setup, you can test your multipart upload route by uploading a large file.

<Steps>
  <Step title="Start your development server">
    Start your development server by running the following command:

    ```bash
    npm run dev
    ```

    Your server should be running at `http://localhost:4321/YOUR_BASE_PATH`.
  </Step>

  <Step title="Upload a large file">
    Navigate to the file uploader page and upload a large file. You should see the file appear in the list of files.

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/dfd2bcb44f569f4d412e8d26ad019173cd93e5d5949187b67af26a0d22bf0738/products/webflow-cloud/pages/concepts/storing-data/examples/file-uploader.png" alt="Test your upload route" />
      </Frame>
    </div>
  </Step>

  <Step title="Deploy your app">
    Deploy your app to Webflow Cloud to start uploading large files. Commit and push your changes to your GitHub repository to start a deployment.

    ```bash
    git add .
    git commit -m "Add multipart upload endpoints"
    git push
    ```
  </Step>

  <Step title="Test your multipart upload route in your Webflow Cloud environment">
    Navigate to the file uploader page in your Webflow Cloud environment and upload a large file. You should see the file appear in the list of files.
  </Step>
</Steps>

## FAQs

<Accordion title="How do I handle CORS requests for the upload route?">
  Since upload requests are made directly to the worker domain (not your Webflow Cloud domain), you need to handle CORS properly. Add these headers to your response:

  ```
  Access-Control-Allow-Origin: <YOUR_WEBFLOW_CLOUD_DOMAIN>
  Access-Control-Allow-Methods: POST, PUT, DELETE, OPTIONS
  Access-Control-Allow-Headers: Content-Type
  ```

  If you're looking to upload files from an authenticated user with session credentials, you'll need to generate temporary upload URLs with embedded authentication tokens. Since CORS prevents passing session cookies directly, you can create a secure token that contains user information and embed it in the upload URL.

  This approach involves:

  * Generating a temporary upload URL with an embedded authentication token
  * Validating the token on the upload endpoint
  * Using the worker domain for the actual file upload
</Accordion>

<Accordion title="What's the difference between the `BASE_URL` and `ASSETS_PREFIX` environment variables?">
  Both the `BASE_URL` and `ASSETS_PREFIX` environment variables are automatically set by Webflow Cloud to help with routing logic in your app. You can access these variables as you would any other environment variable in your app.

  * `BASE_URL` is automatically set to the [mount path](/webflow-cloud/environments#mount-paths) of your environment (for example, `/app`). This is useful for setting up redirects and other routing logic in your app.
  * `ASSETS_PREFIX` is set to the domain of the Worker your app is deployed to (for example, `https://YOUR_ENV_HASH.wf-app-prod.cosmic.webflow.services`). This link is essential for uploading large files to your bucket, and serving files directly from your app. Because this link will always be a different domain than your app's domain, you'll need to handle CORS requests for the upload route.

  Learn more about [built in environment variables in Webflow Cloud](/webflow-cloud/environment/configuration#mount-path-configuration).
</Accordion>

<Accordion title="Can I create presigned URLs to upload directly to my bucket?">
  No, presigned URLs require credentials that aren't available in Webflow Cloud's secure environment. Instead, use the multipart upload endpoints to upload files through your app's API routes.
</Accordion>

<Accordion title="Can I expose a public bucket to the web?">
  No, public buckets aren't supported in Webflow Cloud. All bucket access must go through your app's API routes, which gives you control over access permissions and allows you to implement proper authentication and authorization.
</Accordion>

<Accordion title="Why do I get a 413 Content Too Large error when uploading to my bucket?">
  Likely the file being uploaded is hitting current Webflow Cloud request limits. You should upload these larger files through the multipart upload strategy.
</Accordion>

---

# Configuration

> Configure your project for deployment on Webflow Cloud.

Webflow Cloud is designed to handle most of your deployment configuration, so you can focus on building your app. This page explains what's configured automatically  and what you need to know if you want to understand or troubleshoot the process.

For step-by-step setup use the following guides:

<CardGroup>
  <Card
    title="Getting Started"
    href="/webflow-cloud/getting-started"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/PublishDesigner.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/PublishDesigner.svg" alt="" className="light-icon" />
      </>
    }
  >
    Get started with Webflow Cloud by following our step-by-step guide.
  </Card>

  <Card
    title="Bring your own app"
    href="/webflow-cloud/bring-your-own-app"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Migration.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Migration.svg" alt="" className="light-icon" />
      </>
    }
  >
    Migrate an existing project to Webflow Cloud.
  </Card>
</CardGroup>

## Deployment details

Webflow Cloud hosts your app on [Cloudflare Workers](https://developers.cloudflare.com/workers/), running it at a base path within your Webflow Cloud [environment](/webflow-cloud/environments) (for example, `/app`). This base path serves as the mount point for your application.

When you [deploy your environment](/webflow-cloud/deployments), Webflow Cloud uses [Wrangler](https://developers.cloudflare.com/workers/wrangler/), Cloudflare’s official CLI, to deploy your app to the Workers platform with a standard configuration.

## Default configuration

When you [deploy an environment](/webflow-cloud/deployments) in Webflow Cloud, Webflow automatically sets up the necessary configuration for deployment to the Workers platform.

During deployment, Webflow Cloud generates a `wrangler.json` configuration file based on the framework specified in your `webflow.json` file. This file includes recommended defaults for:

* Asset handling
* Node.js API compatibility
* Observability (for example, logging and metrics)

**This production file is generated automatically and can't be edited directly.** For more details on Wrangler configuration, see the [Wrangler documentation](https://developers.cloudflare.com/workers/wrangler/configuration/).

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Next.js">
    ```json title="wrangler.json"
    {
      "$schema": "node_modules/wrangler/config-schema.json",
      "name": "nextjs",
      "main": ".open-next/worker.js",
      "compatibility_date": "2025-03-01",
      "compatibility_flags": [
        "nodejs_compat"
        ],
      "assets": {
        "binding": "ASSETS",
        "directory": ".open-next/assets"
      },
      "observability": {
        "enabled": true
      },

      "kv_namespaces": [
        {
          "binding": "KV",
          "id": "1234567890" // Webflow Cloud will automatically generate an ID for your environment
        }
      ],
      "d1_databases": [
        {
          "binding": "DB",
          "database_name": "my-database", 
          "database_id": "1234567890", // Webflow Cloud will automatically generate an ID for your environment,
          "migrations_dir": "./migrations" // Specify the directory containing your migrations
        }
      ]
    }
    ```
  </Tab>

  <Tab title="Astro">
    ```json title="wrangler.json"
    {
      "$schema": "node_modules/wrangler/config-schema.json",
      "name": "astro",
      "main": "./dist/_worker.js/index.js",
      "compatibility_date": "2025-04-15",
      "compatibility_flags": [
        "nodejs_compat"
        ],
      "assets": {
        "binding": "ASSETS",
        "directory": "./dist"
      },
      "observability": {
        "enabled": true
      }
      "kv_namespaces": [
        {
          "binding": "KV",
          "id": "1234567890" // Webflow Cloud will automatically generate a KV namespace for your environment
        }
      ],
      "d1_databases": [
        {
          "binding": "DB",
          "database_name": "my-database", 
          "database_id": "1234567890" // Webflow Cloud will automatically generate a D1 database for your environment,
          "migrations_dir": "./migrations" // Optional: specify the directory containing your migrations
        }
      ]
    }
    ```
  </Tab>
</Tabs>

{/* <!-- vale on --> */}

### Storage resources

If your app requires storage, you can declare [storage bindings](/webflow-cloud/storing-data/overview) in your `wrangler.json` file. Webflow Cloud reads these bindings during deployment and automatically creates the corresponding storage resources in your environment. All other configuration values remain managed by Webflow Cloud and can't be modified directly. Learn more about [storage in Webflow Cloud.](/webflow-cloud/storing-data/overview).

## Framework configuration

Some frameworks require additional configuration to run on Webflow Cloud and the [Workers runtime](/webflow-cloud/environment). If you've created a new project using the Webflow Cloud CLI, Webflow Cloud will automatically add the necessary configuration files to your project. If you've brought your own app, you'll need to add the necessary files to your project.

{/* <!-- vale off --> */}

<Tabs>
  <Tab title="Next.js">
    Next.js apps require the following files:

    * `next.config.js`: Configures your environment's [mount path](/webflow-cloud/environments#mount-paths) and adapter settings.
    * `.open-next.config.ts`: Optimizes Next.js for the [edge runtime](/webflow-cloud/environment).
    * `cloudflare.env.ts`: Enables your app to access your [environment variables](/webflow-cloud/environments#managing-environment-variables).

    <CodeBlocks>
      ```ts title="next.config.js"
      import type { NextConfig } from "next";

      const nextConfig: NextConfig = {
        basePath: "/YOUR_BASE_PATH", // your environment's mount path
        assetPrefix: '/YOUR_BASE_PATH', // ensure this matches your environment's mount path
      };

      export default nextConfig;
      // added by create cloudflare to enable calling `getCloudflareContext()` in `next dev`
      import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
      initOpenNextCloudflareForDev();

      ```

      ```ts title=".open-next.config.ts"
      import { defineCloudflareConfig } from "@opennextjs/cloudflare";

      export default defineCloudflareConfig({

      });


      ```

      ```ts title="cloudflare.env.ts"
      /* eslint-disable @typescript-eslint/no-empty-interface */
      // Generated by Wrangler
      // by running `wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts`

      interface CloudflareEnv {}

      ```
    </CodeBlocks>
  </Tab>

  <Tab title="Astro">
    Astro apps require the following files:

    * `astro.config.mjs`: Configures your app's [mount path](/webflow-cloud/environments#mount-paths) and adapter settings.
    * `worker.configuration.ts`: Enables your app to access your [environment variables](/webflow-cloud/environments#managing-environment-variables).

    <CodeBlocks>
      ```ts title="astro.config.mjs"
      import { defineConfig } from "astro/config";

      import cloudflare from "@astrojs/cloudflare";

      import react from "@astrojs/react";

      // https://astro.build/config
      export default defineConfig({
        base: "/YOUR_BASE_PATH", // your environment's mount path
        build: {
          assetsPrefix: "/YOUR_BASE_PATH", // ensure this matches your environment's mount path
        },
        output: "server",
        adapter: cloudflare({  // Use the Cloudflare adapter to run your app on the Workers runtime
          platformProxy: {
            enabled: true,
          },
        }),
        integrations: [react()], // Enable React integration
        vite: {
          resolve: {
            // Use react-dom/server.edge instead of react-dom/server.browser for React 19.
            // Without this, MessageChannel from node:worker_threads needs to be polyfilled.
            alias: import.meta.env.PROD
              ? {
                  "react-dom/server": "react-dom/server.edge",
                }
              : undefined,
          },
        },
      });
      ```

      ```ts title="worker.configuration.ts"
      /* eslint-disable @typescript-eslint/no-empty-interface */
      // Generated by Wrangler
      // After adding bindings to `wrangler.json`, regenerate this interface via `npm run cf-typegen`
      interface Env {}
      ```
    </CodeBlocks>
  </Tab>
</Tabs>

## Mount path configuration

When you create an [environment](/webflow-cloud/environments), you set a mount path, which is the subpath where your app will be accessible.
For example, with a mount path of `/app`, your app lives at:

```
https://your-webflow-cloud-domain.com/app
```

In your framework configuration, make sure you set your app's base path and asset prefix to the mount path of your environment. When building your app, use the provided `BASE_URL` and `ASSETS_PREFIX` environment variables to construct correct paths instead of hard-coding them.

### `BASE_URL`

The `BASE_URL` variable represents the mount path of your environment. Combine this with your Webflow Cloud domain to create the URL where your application is accessible to users.

Use for:

* Navigation links and client-side routing
* Form actions and redirects

<Tabs>
  <Tab title="Next.js">
    ```ts
    // Access BASE_URL in Next.js
    import config from "../next.config";

    const baseUrl = config.basePath || '';

    // Navigation button
    <Link href={`${baseUrl}/`}>
      <button>Back to Home</button>
    </Link>

    // API fetch
    const response = await fetch(`${baseUrl}/api/users`);
    ```
  </Tab>

  <Tab title="Astro">
    ```ts
    // Access BASE_URL in Astro
    const baseUrl = import.meta.env.BASE_URL;

    // Navigation button
    <a href={`${baseUrl}/`}>
      <button>Back to Home</button>
    </a>

    // API fetch
    const response = await fetch(`${baseUrl}/api/users`);
    ```
  </Tab>
</Tabs>

### `ASSETS_PREFIX`

`ASSETS_PREFIX` is the URL for static assets and some direct API calls. The `ASSETS_PREFIX` URL points directly to the Worker handling your app.

Use for:

* Referencing static assets (images, CSS, JavaScript files)
* Uploading large files to your app

<Tabs>
  <Tab title="Next.js">
    ```ts
    // Access ASSETS_PREFIX in Next.js
    import config from "../next.config";

    const assetsPrefix = config.assetPrefix || config.basePath || '';

    // Reference an image asset
    <img src={`${assetsPrefix}/images/logo.png`} alt="Logo" />
    ```
  </Tab>

  <Tab title="Astro">
    ```ts
    // Access ASSETS_PREFIX in Astro
    const assetsPrefix = import.meta.env.ASSETS_PREFIX;

    // Reference an image asset
    <img src={`${assetsPrefix}/images/logo.png`} alt="Logo" />
    ```
  </Tab>
</Tabs>

## Troubleshooting and common questions

<Accordion title="Why can’t I edit `wrangler.json`?">
  Webflow Cloud manages this file to ensure compatibility and security.
</Accordion>

<Accordion title="How do I migrate an existing project?">
  If you're migrating an existing project, follow the steps in the [Bring your own app guide](/webflow-cloud/bring-your-own-app).
</Accordion>

---

# Environments

> Learn about environments in Webflow Cloud

Environments are unique, isolated containers where your app is deployed. Deploy your app to multiple environments—such as production, staging, or development—using branches from your GitHub repository. Each environment is fully separate, giving you the flexibility to test, preview, and release features independently.

Environments automatically update when a deployment succeeds, with zero-downtime between versions. If a deployment fails, the environment continues serving your last successful deployment, ensuring continuous availability.

[Learn more about deployments →](/webflow-cloud/deployments)

***

See the below documentation for guidance on:

* [Creating environments](#creating-environments)
* [Managing environments](#managing-environments)
* [Creating environment variables](#create-an-environment-variable)
* [Managing environment variables](#managing-environment-variables)

***

---

# Managing environments

<Frame>
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/15f4ce278e763bd111bd8b9576b7b582a3990d0c712a01de5120e4a3645e129c/products/webflow-cloud/pages/introduction/assets/environment-dashboard-05-20.png" alt="Environment dashboard" />
</Frame>

## Creating environments

When you create a Webflow Cloud project, you'll be prompted to add your first environment. You can create additional environments (like staging and development) to support your development workflow.

**To set up additional environments:**<br />

* In Webflow Cloud, select your project name to open the Environments Dashboard.
* Click “Create New Environment.”
* Select the GitHub branch you want this environment to track.
* Define the mount path (URL path) for your environment.
* Click Create Environment.

Every push to the selected branch will trigger a deployment to this environment.

## Mount paths

Each environment is assigned a unique URL path under your Webflow domain. When you deploy to an environment, your application becomes accessible at its designated path. This path-based routing allows you to:

* Host multiple environments under a single domain
* Maintain separate URLs for staging, development, and production versions
* Seamlessly integrate with Webflow's existing routing system

Mount paths are unique to each environment and are used to route traffic to the correct environment. Each mount path must be unique across all environments within a project.

## Changing mount paths

If you've already deployed an environment to your site with a mount path and you want to change it, you should:

* Click the ellipsis icon “...” for the environment
* Select "Edit"
* Change the mount path to your desired new path and save the changes
* **Publish your Webflow site**
* Trigger a deployment to the environment to propagate the mount path change

## Route conflicts

If a route conflict occurs between your Webflow Cloud application and your Webflow site, the Webflow Cloud application route takes precedence.

For instance, if you have a Webflow site at `mydomain.com` with the following:

1. A Webflow Cloud app mounted at `/users`
2. A Webflow page also created at `/users`

When a user visits `mydomain.com/users`, they will see the Webflow Cloud app, not the static page on your Webflow site.

To avoid conflicts:

* Choose mount paths that don't conflict with existing or planned Webflow pages
* Consider using distinct paths like `/app` for your Webflow Cloud applications
* Document your app routes to prevent future conflicts when creating new Webflow pages

## Edit an environment

* Click the ellipsis icon “...” next to the environment.
* Select Edit.
* Modify the mount path or other details.
* Save your changes.
* **Re-publish** your site to reflect updates.

## Unpublish an environment

To remove the environment from your domain entirely, you must delete the Webflow Cloud project **and** republish the Webflow site.

**Deleting the environment by itself doesn't remove it from your domain.**

## Delete an environment

Delete an environment to remove it from Webflow Cloud。 Deleting an environment doesn't delete the GitHub branch. Conversely, deleting a GitHub branch doesn't delete the environment - you must delete the environment manually from the dashboard.

* Click the ellipsis icon “...” next to the environment.
* Select Delete.
* Confirm the deletion.

<Warning>
  To remove the environment from your domain entirely, you must delete the Webflow Cloud project **and** republish the Webflow site.
</Warning>

<Warning>
  If you delete a GitHub branch, the associated environment won't automatically be deleted. You must remove it manually from the dashboard.
</Warning>

<Warning>
  Deleting an environment permanently removes all deployments associated with it.
</Warning>

## Access control and permissions

Anyone with access to your deployed mount path can view the environment. For example, if deployed to /staging, anyone with the URL can access the staging version of your site.

---

# Managing environment variables

Environment variables enable secure storage and management of sensitive data and configuration settings. Each environment supports up to 110 environment variables, which are accessible exclusively during runtime. For enhanced security, you can mark variables as secrets, which are then encrypted and masked in the Environment Variables dashboard. To view the value of a secret variable, click the eye icon to toggle its visibility.

## Create an environment variable

* Open the Deployments Dashboard for the environment.
* Click Environment Variables.
* Click Add Variable.
* Enter a Key and Value.
* (Optional) Mark as a Secret to mask sensitive values like API keys or client secrets.
* Push a commit to trigger a new deployment using the updated variables.

<Note title="Environment variables are available at runtime only">
  Environment variables aren't available at build time—only during runtime. If your app requires build-time configuration, consider alternative strategies.
</Note>

## Edit an environment variable

* In the Environment Variables dashboard, click the “...” next to a variable.
* Select Edit.
* Modify the Key and Value.
* (Optional) Mark as a Secret to mask sensitive values like API keys or client secrets.
* Make changes to your code and push a new commit to apply the updated environment variables.

## Delete an environment variable

* In the Environment Variables dashboard, click the “...” next to a variable.
* Select Delete.
* Make changes to your code and push a new commit to apply the removal of this environment variable.

## Visibility of environment variables

Anyone with access to the Webflow Cloud project can view environment variables. Keep sensitive values stored as Secrets.

---

# Frequently asked questions

## Projects

<Accordion title="I'm having trouble connecting to GitHub">
  Follow these steps to connect your GitHub repository:

  1. Ensure you have admin access to the repository
  2. Check that you've granted the necessary permissions to Webflow Cloud
  3. Try disconnecting and reconnecting the GitHub integration
</Accordion>

<Accordion title="Why don't I see a list of my GitHub repositories?">
  If you have access to over 100 repositories, you may not see a list of your repositories. To create a project from a repository, paste the link to your repository into the GitHub repository field.
</Accordion>

<Accordion title="Can I use BitBucket or GitLab to deploy to Webflow Cloud?">
  No, currently only GitHub is supported for deployments to Webflow Cloud.
</Accordion>

<Accordion title="Can I load my Webflow site data into my app?">
  Yes, you can access your Webflow site data using our [APIs and SDKs](/data/reference/rest-introduction).
</Accordion>

<Accordion title="How do I deploy an API/backend to Webflow Cloud without a frontend?">
  Today, Webflow Cloud doesn't support pure API/backend frameworks, though we plan to in the future. Currently only Next.js and Astro are supported - both of which are designed for full stack development (frontend and backend).

  However, you can still use any of these full-stack frameworks to build an API without needing to add page/frontend files.
</Accordion>

## Environment access and visibility

<Accordion title="Who can see my environments?">
  Any user with access to your Webflow site can view your projects and environments.
</Accordion>

<Accordion title="Who can see my environment variables?">
  Any user with access to your Webflow site can view your projects and environments.
</Accordion>

<Accordion title="What happens if my path route conflicts with my Webflow site's structure?">
  When a route conflict occurs between your Webflow Cloud application and your Webflow site, the Webflow Cloud app route takes precedence. The system will first check for matching routes in your Webflow site pages, and if found, serve the Webflow Cloud page instead of your Webflow site page.
</Accordion>

<Accordion title="Can I see environment variables on previous deployments?">
  No, environment variables are only available for the current deployment.
</Accordion>

<Accordion title="How do I unpublish my environment from my Webflow site?">
  To unpublish an environment from your domain, you must delete the Webflow Cloud project **and** republish the Webflow site.
</Accordion>

---

# Deployments

> Learn about deployments in Webflow Cloud

Deployments automatically build and publish your application to Webflow Cloud. Each deployment creates a new version of your app in the associated environment. Webflow Cloud automatically triggers deployments when you push changes to the branch linked to that environment.

<Note>
  Publishing your Webflow site won't trigger a Webflow Cloud deployment. The deployment process for Webflow Cloud apps is decoupled from the Webflow site publishing process.
</Note>

[Learn more about environments →](/webflow-cloud/environments)

***

See the below documentation for guidance on:

* [Continuous deployment](#continuous-deployment)
* [Deployment process](#deployment-process)
* [Deployment history](#deployment-history)
* [Build logs](#build-logs)
* [Runtime logs](#runtime-logs)
* [Rolling back deployments](#rolling-back-deployments)

***

## Continuous deployment

Webflow Cloud supports continuous integration and deployment (CI/CD) through GitHub. When you connect your GitHub repository, Webflow Cloud automatically:

* Watches for changes in your connected branches
* Triggers new deployments when changes are detected
* Updates your environments with the latest code

<Tip title="Deploying using the Webflow CLI">
  You can also manually deploy your local environment using the Webflow CLI. In your terminal, run the following command to deploy your project to Webflow Cloud:

  ```bash
  webflow cloud deploy
  ```
</Tip>

### Setting up continuous deployment with GitHub

1. Navigate to Webflow Cloud and select your project
2. Click "Connect GitHub"
3. Follow the instructions to connect your GitHub repository or multiple repositories
4. Select a GitHub repository to connect your Webflow Cloud app to
5. Create or select an [environment](/webflow-cloud/environments) to deploy to
6. Choose the branch you want to deploy to the selected environment

<Warning>
  If you have access to over 100 repositories, you may not see a list of your repositories to select from. To create a project from a repository, paste the link to your repository into the GitHub repository field.
</Warning>

## Manual deployments

There are two ways to manually deploy your environment:

1. **Deploy using the Webflow CLI**<br />
   Run the following command in your terminal:

   ```bash
   webflow cloud deploy
   ```

2. **Deploy in the Webflow Cloud dashboard**<br />
   Navigate to your environments dashboard and click the "Deploy latest build" button.

## Deployment process

Webflow Cloud serves your app through a streamlined deployment process:

1. Clones your GitHub repository
2. Detects your app's framework
3. Installs dependencies
4. Builds your application
5. Deploys to your specified environment

Each step is logged and available for review in the [build logs.](#build-logs)

## Deployment history

<Frame>
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/ec9ca2a494f9489838b169e0d71fb9b2155796105ee6c9ed90b9e7fbaf29ecf8/products/webflow-cloud/pages/introduction/assets/deployment-dashboard-05-20.png" alt="Deployment history" />
</Frame>

Each deployment appears in your environment's deployment history. The history provides:

* Deployment status (building, deploying, success, cancelled,failure)
* Deployment date and time
* Build and deployment duration
* Build and runtime logs

**In the event of a failed deployment, your environment continues running your last successful deployment**, ensuring zero downtime.

## Build logs

Build logs provide detailed information about how Webflow Cloud builds and deploys your app. To view build logs:

1. In Webflow Cloud, click your project name to open the Environments Dashboard
2. Click the environment name to open the Deployment Dashboard
3. Click the Deployment ID (Commit SHA) to view the build log for that deployment

Build logs are particularly helpful for:

* Debugging failed deployments
* Optimizing build performance
* Understanding dependency installation issues
* Tracking build progress

## Runtime logs

<Frame background="subtle">
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/17df44d6bc6b8361df2b6113413d185e6837f4c1949ff35c3d74e7a4fc448fc5/products/webflow-cloud/pages/introduction/assets/runtime-logs.png" alt="Runtime logs" />
</Frame>

Runtime logs show you what's happening on your application's server after deployment. These logs capture server-side activity, including:

* Server-side function execution
* Application errors and exceptions
* Server-side console logs and debugging output

For example, if your application includes an API endpoint and a user makes a request to that endpoint, you'll see the corresponding server-side activity in the runtime logs.

To view runtime logs:

1. In Webflow Cloud, click your project name to open the Environments Dashboard
2. Click the environment name to open the Deployment Dashboard
3. Select the "Runtime Logs" tab

<Note>
  Runtime logs are helpful for debugging server-side issues and monitoring your application's API behavior in production.
</Note>

## Rolling back deployments

If you need to revert to a previous version of your app:

1. Navigate to your GitHub repository
2. Revert your working branch to the desired commit
3. Push the changes to trigger a new deployment

<Warning>
  Rolling back a deployment creates a new deployment with the previous code version. It doesn't restore the exact state of the previous deployment.
</Warning>

## Deployment locations

---

# Frequently asked questions

### Build issues

<Accordion title="Why is Webflow Cloud not identifying my project at build?">
  Webflow Cloud currently supports Next.js and Astro projects. Make sure:

  * Your project is using one of these frameworks
  * You have included a configuration file (`next.config.js` or `astro.config.mjs`) with the necessary Webflow Cloud-specific configurations.
</Accordion>

<Accordion title="Why aren't my environment variables used at build?">
  Environment variables are only available at runtime, not during the build process.
</Accordion>

<Accordion title="Why are my assets not showing up?">
  This is typically related to base path configuration. Check your asset paths and ensure they're configured for your environment. For more information on base path configuration, see [base path configuration](/webflow-cloud/bring-your-own-app#3-manage-assets-and-apis) section of the Bring Your Own App documentation.
</Accordion>

<Accordion title="Which build runs on my production site if I had a successful build followed by a failed build?">
  The most recent successful build will continue running. Failed deployments never impact your live site.
</Accordion>

### Deployment issues

<Accordion title="How do I rollback to a previous deployment?">
  To rollback to a previous deployment:

  1. Revert your branch to the desired commit in GitHub
  2. Push the changes to trigger a new deployment with the previous version
</Accordion>

<Accordion title="Why can't I see my latest deployment in my dashboard?">
  Try refreshing your page - new deployments may not appear immediately in the dashboard.
</Accordion>

<Accordion title="Can I preview specific deployments?">
  No, only the most recent successful deployment for each environment can be previewed.
</Accordion>

<Accordion title="Can I share deployment previews?">
  Preview access is limited to the most recent successful deployment for each environment.
</Accordion>

<Accordion title="Why doesn't a deployment start when I push to my Github repo?">
  The [Webflow Cloud GitHub App](https://github.com/apps/webflow-cloud/installations/select_target) may not have access to your repository. To check, go to the `Webflow Cloud` tab in your Webflow site settings and click "Install GitHub App." Follow the prompts on GitHub to ensure Webflow has access to read from your repository. Once you grant access, try committing to the branch that Webflow Cloud should be monitoring for deployments in your app.
</Accordion>

### Publishing issues

<Accordion title="Will my Webflow Cloud app deployment automatically publish my Webflow site, and vice versa?">
  No, the deployment process for Webflow Cloud apps is separate from the Webflow site publishing process. Publishing your Webflow site will also not trigger a Webflow Cloud deployment.
</Accordion>

---

# Storing data in Webflow Cloud

> Overview of storage options and setup in Webflow Cloud.

Webflow Cloud lets you build and deploy modern web applications with built-in support for persistent data storage. Whether you need to store structured records or simple key-value pairs, Webflow Cloud provides flexible options to match your app’s needs.

## Storage options in Webflow Cloud

Webflow Cloud offers three storage solutions, each designed for different types of data and use cases:

<CardGroup cols={2}>
  <Card
    title="SQLite"
    href="/webflow-cloud/storing-data/sqlite"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
  >
    Best for structured, relational data - like user profiles, product catalogs, or transactional records.
  </Card>

  <Card
    title="Key Value Store"
    href="/webflow-cloud/storing-data/key-value-store"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DeveloperToolsSDK.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DeveloperToolsSDK.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
  >
    Best for unstructured, dynamic data - like user preferences, session data, or temporary settings.
  </Card>

  <Card
    title="Object Storage"
    href="/webflow-cloud/storing-data/object-storage"
    icon={
        <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/App.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/App.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
  >
    Best for large files and unstructured data - like images, videos, or PDF files.
  </Card>
</CardGroup>

***

<Card
  title="Add a database to your app"
  icon={
    <>
      <img
        src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Code.svg"
        alt=""
        className="hidden dark:block"
      />
      <img
        src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Code.svg"
        alt=""
        className="block dark:hidden"
      />
    </>
  }
  iconPosition="left"
  iconSize="12"
>
  Ready to add your first database to your app? Jump into the quickstart and
  start building with real data in minutes.

  <div>
    <a href="/webflow-cloud/add-sqlite">
      <button class="button cc-primary">
        Start building
      </button>
    </a>
  </div>
</Card>

## How storage works in Webflow Cloud

Webflow Cloud connects your app to storage resources using **bindings.**

A binding is a configuration that grants your app secure, direct access to a specific resource managed by Webflow Cloud. When you declare a binding in your `wrangler.json` file and deploy your app, Webflow Cloud automatically creates a resource and grants your app permission to use it.

With bindings, you can:

* **Access resources automatically.** No secret keys required.
* **Reference bindings** as environment variables in your app.
* **Maintain isolated environments.** Each binding is specific to a project's [environment](/webflow-cloud/environments).
* **Manage bindings and resources** in the Webflow Cloud dashboard.

Bindings combine permission and API access in a single step, so you can read and write data securely and efficiently.

## Declaring a binding

Declaring a binding is the first step to using storage in your app. You can declare a binding in the Webflow Cloud dashboard or in your `wrangler.json` file.

### Before you start

Before you can declare a binding, you need to have a project in Webflow Cloud and an environment for your app. If you don't have a project or an environment, you can create by following the steps in the [getting started guide](/webflow-cloud/getting-started).

<Tabs>
  <Tab title="Dashboard">
    <Steps>
      <Step title="Open the environment dashboard">
        In Webflow Cloud, select your project and the environment where you plan to deploy your app.

        <Frame>
          <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/515b2971296baca2447480b5d065beeaed449637c70df5f8cbb2cdaf17d365f2/products/webflow-cloud/pages/concepts/storing-data/assets/environment-dashboard.png" alt="Example screenshot of the environment dashboard" />
        </Frame>
      </Step>

      <Step title="Go to the storage tab">
        In the environment dashboard, click the **Storage** tab to view all storage resources for the selected environment.

        <Frame>
          <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/9378d34e2be97f453e399771630e599672bd5db3d75413f35526b9830fc505dc/products/webflow-cloud/pages/concepts/storing-data/assets/storage-tab.png" alt="Example screenshot of the Storage tab in the environment dashboard" />
        </Frame>
      </Step>

      <Step title="Add a storage resource">
        Click the **Add Storage** button to add a new storage resource. Choose the storage type you want to use from the dropdown menu.

        <div>
          <Frame>
            <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/3550764fd2c30eb6d0ae20beffda45e3a6e4a474647c00310daac00cdc4c09c6/products/webflow-cloud/pages/concepts/storing-data/assets/storage-quickstart.png" alt="Example screenshot of adding a storage resource in the Webflock 1app" />
          </Frame>
        </div>
      </Step>

      <Step title="Copy the provided snippet to `wrangler.json`">
        Copy the provided snippet, and paste it into the `wrangler.json` file in your project's root. Replace the placeholder values with values you want to use.

        <Tabs>
          <Tab title="SQLite">
            <div class="my-6">
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 items-center">
                {" "}

                <Frame>
                  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/862cafba68f0c97dcb23fea6f14a3a1664fe1569320eb3a54fc420e46f41c70a/products/webflow-cloud/pages/concepts/storing-data/assets/sql-snippet.png" alt="Example snippet for adding a SQLite database" />
                </Frame>

                <div>
                  | Property         | Description                                                                                                     |
                  | ---------------- | --------------------------------------------------------------------------------------------------------------- |
                  | `binding`        | The name of the binding to use in your app.                                                                     |
                  | `database_name`  | The name of the database to create.                                                                             |
                  | `database_id`    | The ID of the database to create. **Webflow Cloud will generate a unique ID for you once you deploy your app.** |
                  | `migrations_dir` | The directory containing your migration files.                                                                  |

                  <Tip title="Prepare your database schema">
                    Before deploying your app, [you need to prepare your database schema and create a migration file](http://localhost:3000/webflow-cloud/storing-data/sqlite#manage-schema-and-migrations). You can create SQL migration files manually or generate them with a migration tool such as [Drizzle ORM](https://orm.drizzle.team/). On each deployment, Webflow Cloud will apply the migrations to your database.
                  </Tip>
                </div>
              </div>
            </div>
          </Tab>

          <Tab title="Key Value Store">
            <div class="my-6">
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 items-center">
                {" "}

                <Frame>
                  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/079cb135119c8c59694408e459378b72e85e9c6bf8f9c040852a3ecbfef28915/products/webflow-cloud/pages/concepts/storing-data/assets/kv-snippet.png" alt="Example snippet for adding a Key Value Store" />
                </Frame>

                <div>
                  | Property  | Description                                                                                                      |
                  | --------- | ---------------------------------------------------------------------------------------------------------------- |
                  | `binding` | The name of the binding to use in your app.                                                                      |
                  | `id`      | The ID of the Key Value Store to create. **Webflow will generate a unique ID for you once you deploy your app.** |
                </div>
              </div>
            </div>
          </Tab>

          <Tab title="Object Storage">
            <div class="my-6">
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 items-center">
                {" "}

                <Frame>
                  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/d260bb849338ce8cc9bf5240777271939e8ea0c7b653eab4154f049b4c1af08a/products/webflow-cloud/pages/concepts/storing-data/assets/object-snippet.png" alt="Example snippet for adding a Object Storage" />
                </Frame>

                <div>
                  | Property      | Description                                                                                                   |
                  | ------------- | ------------------------------------------------------------------------------------------------------------- |
                  | `binding`     | The name of the binding to use in your app.                                                                   |
                  | `bucket_name` | The name of the bucket to create.                                                                             |
                  | `bucket_id`   | The ID of the bucket to create. **Webflow Cloud will generate a unique ID for you once you deploy your app.** |
                </div>
              </div>
            </div>
          </Tab>
        </Tabs>
      </Step>

      <Step title="Generate types for your binding">
        Generate TypeScript types for your bindings to enable autocomplete and type safety in your code editor:

        ```bash
        npx wrangler types
        ```

        This creates/updates a `worker-configuration.d.ts` file with your binding types.
      </Step>

      <Step title="Deploy your app">
        Deploy your app to Webflow Cloud by committing and pushing your changes to your linked GitHub repository. After deployment, you can [view and manage your storage resources in the Webflow Cloud dashboard](/webflow-cloud/storing-data/overview#managing-storage-in-the-webflow-cloud-dashboard).
      </Step>
    </Steps>
  </Tab>

  <Tab title="wrangler.json">
    <Steps>
      <Step title="Add a binding to your `wrangler.json` file">
        In your `wrangler.json` file, add a binding for the storage resource you want to use.

        <Tabs>
          <Tab title="SQLite">
            To use SQLite, add a `d1_databases` array to your `wrangler.json` file. Declare a binding for each database you want to use inside the array.

            **Note:** Webflow Cloud will assign a unique ID for each resource on deployment.

            ```json title="wrangler.json"
            {
            "d1_databases": [
                {
                "binding": "DB",
                "database_name": "MY_DATABASE",
                "database_id": "1234567890" // Webflow Cloud will assign a unique ID for each resource on deployment
                }
            ]
            }
            ```

            See the [SQLite overview](/webflow-cloud/storing-data/sqlite) for full details.
          </Tab>

          <Tab title="Key Value Store">
            To use a Key Value Store, add a `kv_namespaces` array to your `wrangler.json` file. Declare a binding for each namespace you want to use inside the array.

            **Note:** Webflow Cloud will assign a unique ID for each resource on deployment.

            ```json title="wrangler.json"
            {
            "kv_namespaces": [
                {
                "binding": "CACHE",
                "id": "8e83a86e33b541338700795162251e43" // Replace after deployment
                }
            ]
            }
            ```

            See the [Key Value Store overview](/webflow-cloud/storing-data/key-value-store) for full details.
          </Tab>

          <Tab title="Object Storage">
            To use Object Storage, add a `r2_buckets` array to your `wrangler.json` file. Declare a binding for each bucket you want to use inside the array.

            **Note:** Webflow Cloud will assign a unique ID for each resource on deployment.

            ```json title="wrangler.json"
            {
                "r2_buckets": [
                    {
                    "binding": "WEBFLOW_CLOUD_MEDIA",
                    "bucket_name": "Media",
                    }
                ]
            }
            ```
          </Tab>
        </Tabs>
      </Step>

      <Step title="Generate types for your binding">
        Generate TypeScript types for your bindings to enable autocomplete and type safety in your code editor:

        ```bash
        npx wrangler types
        ```

        This creates/updates a `worker-configuration.d.ts` file with your binding types.
      </Step>

      <Step title="Deploy your app">
        Deploy your app to Webflow Cloud. After deployment, you can view and manage your storage resources in the Webflow Cloud dashboard.
      </Step>
    </Steps>
  </Tab>
</Tabs>

For a complete walkthrough of using storage in your app, see the guides on [adding a SQLite database to your app](/webflow-cloud/add-sqlite) and [adding a Key Value Store to your app](/webflow-cloud/add-key-value-store).

## Accessing storage in your app

Once you've declared a binding, access the resource in your app using the binding name as an environment variable. Environment variables for bindings are automatically available in your app and don't need to be manually created in your environment dashboard.

<Tabs>
  <Tab title="Next.js">
    In a Next.js app, you must access the environment variables for your bindings through the [Workers runtime](/webflow-cloud/environment) using the `getCloudflareContext()` function.

    #### How to use `getCloudflareContext()`

    * **Always** call `getCloudflareContext()` inside a function (not at the top level of your module) to ensure the binding is available in the correct context.
    * **For static routes or use outside of request handlers** (such as Incremental Static Regeneration or Static Site Generation), use `getCloudflareContext({ async: true })` and await the result. This ensures the environment bindings are correctly resolved in all environments.

    {/* <!-- vale off --> */}

    ```javascript title="src/db/getDB.ts" {7-10}
    import { getCloudflareContext } from "@opennextjs/cloudflare"; // Import the function
    import { drizzle } from "drizzle-orm/d1";
    import { cache } from "react";
    import * as schema from "./schema";

    // Use in a request handler (e.g. API route)
    export const getDb = cache(() => {
      const { env } = getCloudflareContext(); // Access the cloudflare environment
      return drizzle(env.DB, { schema }); // Access the DB binding
    });

    // Use for static routes (i.e. ISR/SSG)
    export const getDbAsync = cache(async () => {
      const { env } = await getCloudflareContext({ async: true });
      return drizzle(env.DB, { schema });
    });
    ```

    {/* <!-- vale on --> */}
  </Tab>

  <Tab title="Astro">
    Access your storage resource using the binding name as an environment variable.

    ```javascript title="src/pages/index.astro" {5} maxLines=10
    import { desc } from "drizzle-orm";
    import { drizzle } from "drizzle-orm/d1";
    import { linkShare } from "../schema";

    const db = drizzle(Astro.locals.runtime.env.DB);

    const links = await db
    	.select()
    	.from(linkShare)
    	.orderBy(desc(linkShare.created));
    ---

    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    		<meta name="viewport" content="width=device-width" />
    		<meta name="generator" content={Astro.generator} />
    		<title>Astro</title>
    	</head>
    	<body>
    		<h1>Shared Links</h1>
    		<ul>
    			{
    				links.map((link) => (
    					<li>
    						<a href={link.url}>{link.title}</a>
    					</li>
    				))
    			}
    		</ul>
    	</body>
    </html>

    ```
  </Tab>
</Tabs>

<Card
  title="Start working with real data"
  icon={
    <>
      <img
        src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Code.svg"
        alt=""
        className="hidden dark:block"
      />
      <img
        src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Code.svg"
        alt=""
        className="block dark:hidden"
      />
    </>
  }
  iconPosition="left"
  iconSize="12"
>
  Ready to add your first database to your app? Jump into the quickstart and
  start building with real data in minutes.

  <div>
    <a href="/webflow-cloud/add-sqlite">
      <button class="button cc-primary">
        Start building
      </button>
    </a>
  </div>
</Card>

## Managing storage in the Webflow Cloud dashboard

Once you've deployed your app with the declared bindings, you can view and manage your storage resources directly in the Webflow Cloud dashboard:

<Steps>
  <Step title="Open the environment dashboard">
    In Webflow Cloud, select your project and environment where your app is
    deployed with storage bindings configured in `wrangler.json`.
  </Step>

  <Step title="Go to the storage tab">
    In the environment dashboard, click the **Storage** tab to view all storage
    resources for the selected environment. Each storage binding shows its name, type,
    and creation date.

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/9378d34e2be97f453e399771630e599672bd5db3d75413f35526b9830fc505dc/products/webflow-cloud/pages/concepts/storing-data/assets/storage-tab.png" alt="Storage tab in Webflow Cloud environment dashboard" />
    </Frame>
  </Step>

  <Step title="View and manage data">
    Click a binding to open the database viewer. You can: - Create, read,
    update, and delete records (CRUD) - Search and sort data

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/29730530f2a03935c0930c5f7c7a4a8c5ac70f3d892e15408572a49717914399/products/webflow-cloud/pages/concepts/assets/database-viewer.png" alt="Database viewer in Webflow Cloud" />
    </Frame>
  </Step>
</Steps>

## Next steps

* [Learn more about SQLite](/webflow-cloud/storing-data/sqlite)
* [Learn more about Key Value Store](/webflow-cloud/storing-data/key-value-store)
* [See how to configure storage bindings in your project](/webflow-cloud/storing-data/overview#declaring-a-binding)
* [Learn about storage limits in Webflow Cloud](/webflow-cloud/limits)

## FAQs

<Accordion title="Where can I see my storage resources?">
  Once you've deployed your app with the declared bindings, you can view and manage your storage resources directly in the Webflow Cloud dashboard.

  <Frame>
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/3f00ba97f6c70901fbe87e4b568038f47e1a2a4972ff65811de42db817fba2b2/products/webflow-cloud/pages/concepts/assets/bindings-tab.png" alt="Storage tab in Webflow Cloud environment dashboard" />
  </Frame>
</Accordion>

<Accordion title="I declared a binding in my `wrangler.json` file, but I can't see it in the dashboard.">
  If you have an existing Webflow Cloud project, you may need to edit your project settings to enable storage

  1. Go to your project in the Webflow Cloud dashboard.
  2. Select the "..." icon in the "Actions" section of the menu.
  3. Select "Edit" (you don't actually need to edit anything).
  4. Press "Save Changes" to update your project.

  <Frame>
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/0996c151f75ca00b6658a1728cd0b48dfe9f037c925307371d99ebf54d039219/products/webflow-cloud/pages/concepts/assets/edit-project.png" alt="Project settings in Webflow Cloud" />
  </Frame>

  Save the changes and redeploy your app. Once your app deploys you should see the storage tab in the dashboard.
</Accordion>

<Accordion title="I can't access the API methods on my binding">
  After declaring a binding, make sure you've generated the types for your binding. After running the following command, you'll be able to access the API methods on your binding.

  <CodeBlocks>
    ```bash title="Astro"
    wrangler types
    ```

    ```bash title="Next.js"
    npm run cf-typegen
    ```
  </CodeBlocks>

  This creates/updates a `worker-configuration.d.ts` file with your binding types.
</Accordion>

---

# SQLite storage

> Deep dive on using SQLite for structured data in Webflow Cloud.

Webflow Cloud lets you store and manage structured data using SQLite, a lightweight, serverless database engine. This managed solution gives you familiar [SQL syntax](https://developers.cloudflare.com/d1/sql-api/sql-statements/), secure access at the edge, and seamless integration with modern frameworks, without the need to manage servers or credentials.

Webflow Cloud handles database provisioning, security, and scaling, so you can focus on building features, not infrastructure.

<Card
  title="Add storage to your app"
  icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg" alt="" className="hidden dark:block" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg" alt="" className="block dark:hidden" />
    </>
  }
  iconPosition="left"
  iconSize="12"
>
  Ready to add your first database to your app? Jump into the quickstart and start building with real data in minutes.

  <div>
    <a href="/webflow-cloud/add-sqlite">
      <button>
        Start building
      </button>
    </a>
  </div>
</Card>

***

## Key benefits

* **Familiar SQL syntax** - Use standard SQL for queries and data manipulation.
* **Automatic authentication** - No credential management, secure by default.
* **Flexible multi-database architecture** - Create thousands of small, isolated databases per account, ideal for multi-tenant SaaS or per-user data isolation.
* **ORM and driver compatibility** - Works with popular tools like Prisma and Drizzle for type-safe queries and schema management.
* **Data security** - All data is encrypted at rest and in transit.
* **Automatic daily backups** - Webflow Cloud manages backups for you.

***

## Add SQLite to your app

Create a SQLite database by declaring [bindings](/webflow-cloud/storing-data/overview#declaring-a-binding) in your `wrangler.json` file in the root of your project. Once declared and deployed, Webflow Cloud automatically connects your app to a managed SQLite instance.

<Steps>
  <Step title="Add a binding to your `wrangler.json` file">
    In your `wrangler.json` file, add a `d1_databases` array. Declare a binding for each database you want to use inside the array.

    **Note:** Webflow Cloud will assign a unique ID for each resource on deployment.

    ```json title="wrangler.json"
    {
    "d1_databases": [
        {
        "binding": "DB",
        "database_name": "MY_DATABASE",
        "database_id": "1234567890", // Replace after deployment
        "migrations_dir": "./migrations" // Specify the directory for your migrations
        }
    ]
    }
    ```
  </Step>

  <Step title="Generate types for your binding">
    Generate TypeScript types for your bindings to enable autocomplete and type safety in your code editor:

    <CodeBlocks>
      ```bash title="Astro"
      npx wrangler types
      ```

      ```bash title="Next.js"
      npx wrangler types
      npm run cf-typegen
      ```
    </CodeBlocks>

    This creates/updates a `worker-configuration.d.ts` file with your binding types. **Note:** in Next.js you'll also need to update the types for the `cloudflare-env.d.ts` file to avoid type errors.
  </Step>

  <Step title="Deploy your app">
    Deploy your app to Webflow Cloud. After deployment, you can view and manage your storage resources [in the Webflow Cloud dashboard.](/webflow-cloud/storing-data/overview#accessing-storage-in-webflow-cloud)
  </Step>
</Steps>

## Work with a SQLite database

### Access the binding

Webflow Cloud exposes your SQLite database to your app as an environment variable, known as a binding. This lets you interact with your database directly from your application code.

Always access the environment variable in your app’s runtime environment. This variable exposes methods from the [Cloudflare Workers Bindings API](https://developers.cloudflare.com/workers/runtime-apis/bindings/), allowing you to run SQL statements directly from your code.

For full details on available methods and advanced usage, see the [Cloudflare D1 Bindings API documentation](https://developers.cloudflare.com/d1/worker-api/).

<Tabs>
  <Tab title="Astro">
    In Astro, you can access the binding in your code using the `locals` object.

    ```typescript title="src/pages/api/users.ts" {7-9, 11-12}
    import type { APIRoute } from "astro";
    import type { D1Database } from "@cloudflare/workers-types";

    // 👀 GET request to create users table and insert users
    export const GET: APIRoute = async ({ request, locals }) => {

      // Access the runtime environment and get the database binding
      const env = (locals as any).runtime.env;
      const db = env.DB as D1Database;

      // Query users using the binding
      const { results } = await DB.prepare("SELECT * FROM users_table;").all();

      // Return the results
      return new Response(JSON.stringify(results), {
        headers: { "Content-Type": "application/json" },
        });
    };
    ```
  </Tab>

  <Tab title="Next.js">
    In Next.js, access the binding in your code using the `getCloudflareContext()` function.

    ```typescript title="src/app/api/users/route.ts" {9-11, 13-14}
    // Import getCloudflareContext and types for D1Database
    import { getCloudflareContext } from "@opennextjs/cloudflare";
    import type { D1Database } from "@cloudflare/workers-types";
    import { NextRequest, NextResponse } from "next/server";

    // 👀 GET request to create users table and insert users
    export async function GET(request: NextRequest) {

      // Access the runtime environment and get the database binding
      const { env } = getCloudflareContext();
      const DB = env.DB as D1Database;

      // Query users using the binding
      const { results } = await DB.prepare("SELECT * FROM users_table;").all();

      // Return the results
      return new Response(JSON.stringify(results), {
        headers: { "Content-Type": "application/json" },
        });
    }
    ```

    <Warning title="Accessing bindings in Next.js">
      Next.js requires you to access bindings through the [Workers runtime](/webflow-cloud/environment) using the `getCloudflareContext()` function. Import `getCloudflareContext` at the top of your file, then use it to access the binding.
    </Warning>

    * **Always** call `getCloudflareContext()` inside a function to ensure the binding is available in the correct context.
    * **For static routes or use outside of request handlers** (such as Incremental Static Regeneration or Static Site Generation), use `getCloudflareContext({ async: true })` and await the result. This ensures the environment bindings are correctly resolved in all environments.
  </Tab>
</Tabs>

### Manage schema and migrations

Webflow Cloud uses migrations to manage changes to your SQLite database schema over time. Migrations are versioned `.sql` files that describe how your database structure should evolve as your app changes.

When you declare your SQLite binding in `wrangler.json`, use the `migrations_dir` property to specify the directory containing your migration files. Webflow Cloud will automatically apply those migrations to your database when you deploy your app.

Additionally, Webflow Cloud supports popular ORM libraries like Drizzle ORM and Prisma-Edge for type-safe queries and schema management. See more on [using an ORM with Webflow Cloud.](/webflow-cloud/storing-data/sqlite#using-an-orm)

<Tip title="Testing migrations locally">
  You can use Cloudflare’s Wrangler CLI to test migrations locally before deploying to Webflow Cloud. See more on [local development with SQLite.](/webflow-cloud/storing-data/sqlite#local-development-with-sqlite)
</Tip>

#### Key concepts

* **Migration files:** Place `.sql` files in the migrations directory you defined in `wrangler.json`. Each file should contain SQL statements that create or modify tables, indexes, or other schema elements.
* **Automatic application:** When you deploy your app, Webflow Cloud automatically applies any new migration files to your database. This keeps your schema up to date with your codebase.
* **Additive changes only:** Migrations **must** be additive. You can’t “undo” a migration by editing or deleting a migration file in your directory. To change your schema, always add a new migration file with the required SQL.

**Example migration file:**

```sql title="migrations/001_init.sql"
CREATE TABLE IF NOT EXISTS users_table (
  id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
  name TEXT NOT NULL,
  age INTEGER NOT NULL,
  email TEXT NOT NULL
);
```

#### Best practices

* Use clear, sequential filenames (for example, `001_init.sql`, `002_add_email_index.sql`).
* Never edit or remove existing migration files after they’ve been deployed.
* Test migrations locally before deploying to production.

### ORM support for SQLite

Webflow Cloud’s SQLite databases support [edge-compatible](/webflow-cloud/environment) ORM libraries, letting you write type-safe queries and manage schema changes with familiar tools. [Drizzle ORM](https://orm.drizzle.team/docs/get-started/d1-new) and [Prisma-Edge](https://www.prisma.io/docs/orm/overview/databases/cloudflare-d1) are popular choices for seamless integration with Webflow Cloud.

When using an ORM, you’ll typically add a dedicated folder (such as `/migrations` or `/drizzle`) to your project to store migration files and schema definitions. Be sure to specify this directory in your `wrangler.json` using the `migrations_dir` property for your SQLite binding.

```json title="wrangler.json"

{
  "d1_databases": [
      {
          "binding": "DB",
          "database_name": "MY_DATABASE",
          "database_id": "1234567890",
          "migrations_dir": "drizzle"
      }
  ]
}
```

### Local development with SQLite

You can use Cloudflare’s Wrangler CLI to develop and test your SQLite database locally before deploying to Webflow Cloud.

When you run your project locally, Wrangler creates a SQLite database in your `.wrangler` directory. This local database lets you test SQL statements and migrations in a safe environment. Use Wrangler CLI commands, either directly in your terminal or as scripts in `package.json` to run your project and execute SQL statements or files on your local database.

You can use Cloudflare’s Wrangler CLI to:

* **Run your project locally**<br />

  {/* <!-- vale off --> */}

  <CodeBlocks>
    ```bash title="Astro"
    npx wrangler dev
    ```

    ```bash title="Next.js"
    npx opennextjs-cloudflare preview
    ```
  </CodeBlocks>

  {/* <!-- vale on --> */}

  This command starts your app locally, simulating the [Workers runtime](/webflow-cloud/environment) with your declared bindings, and creates a local SQLite database in your `.wrangler` directory.

* **Apply migrations to your local database:**
  ```bash
  wrangler d1 migrations apply <DATABASE_NAME> --local
  ```
  Updates your local SQLite schema with any new migration files in the `migrations` directory defined in your `wrangler.json` file. Replace `<DATABASE_NAME>` with the name of your binding.

* Execute SQL statements or files on your **local** database:

  ```bash
  wrangler d1 execute <DATABASE_NAME> --local --command "<SQL_STATEMENT>"
  wrangler d1 execute <DATABASE_NAME> --local --file ./migrations/001_init.sql
  ```

  Run ad-hoc queries or apply SQL files directly to your local database.

  <Note>
    These commands won't affect your remote database.
  </Note>

<Tip>
  Add these commands as scripts in your `package.json` for convenience. See the following example for Next.js:

  {/* <!-- vale off --> */}

  <CodeBlocks>
    ```json title="package.json - Astro"
    "scripts": {
      "preview": "astro build && wrangler dev",
      "db:apply:local": "wrangler d1 migrations apply DB --local",
    }
    ```

    ```json title="package.json - Next.js"
    "scripts": {
      "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
      "db:apply:local": "wrangler d1 migrations apply DB --local",
    }
    ```
  </CodeBlocks>

  {/* <!-- vale on --> */}
</Tip>

## Next steps

* [Learn about Webflow Cloud Key Value store](/webflow-cloud/storing-data/key-value-store)<br />
  Explore how to store and retrieve unstructured data using Webflow Cloud’s Key Value store.

* [Review Limits for Webflow Cloud SQLite](/webflow-cloud/limits)<br />
  Understand the limits for your databases and storage usage.

* [Set up a SQLite database with Drizzle ORM](/webflow-cloud/storing-data/sqlite#local-development-with-sqlite)<br />
  Follow the guide to set up a SQLite database with Drizzle ORM.

* [Learn more about Webflow Cloud](/webflow-cloud/intro)
  Explore the full capabilities of Webflow Cloud and how it can help you build your next project.

<div>
  # Notes

  D1 is designed for horizontal scale out across multiple, smaller (10 GB) databases, such as per-user, per-tenant or per-entity databases. D1 allows you to build applications with thousands of databases at no extra cost for isolating with multiple databases, as the pricing is based only on query and storage costs.

  Each D1 database can store up to 10 GB of data, and you can create up to thousands of separate D1 databases. This allows you to split a single monolithic database into multiple, smaller databases, thereby isolating application data by user, customer, or tenant.
  SQL queries over a smaller working data set can be more efficient and performant while improving data isolation.
</div>

---

# Key Value Store

> Conceptual overview of using Key Value Store (KV) for unstructured data in Webflow Cloud.

Key Value Store is a globally distributed, low-latency data store for unstructured or semi-structured data in Webflow Cloud. It enables Webflow Cloud apps to store and retrieve data at the edge, close to users, for instant access.

{/* <!-- vale off --> */}

Use Key Value Store when you need to quickly read or write individual values by key, rather than perform complex queries or transactions. It complements structured storage solutions like SQLite by providing fast, scalable access to unstructured data. This enables:

* **Low-latency, global reads** - Cache data near users for fast response times.
* **Automatic scaling** - Handles high read volumes without manual intervention.
* **Simple API** - Easy methods for storing, retrieving, and deleting data.
* **Resilience** - Replicate data for high availability and zero downtime.

{/* <!-- vale on --> */}

## Use cases

Key Value Store is best suited for:

<ul>
  * **Caching API responses**
  * **Storing user preferences**
  * **Managing tokens and sessions**
  * **Serving static or semi-static assets**
  * **Feature flags and A/B testing**
</ul>

Use Key Value Store for read-heavy workloads that can tolerate [eventual consistency](#eventual-consistency). Avoid Key Value Store for workloads that require strong consistency, transactional guarantees, or advanced querying.

## Add a Key Value Store to your app

Create a Key Value Store by declaring [bindings](/webflow-cloud/storing-data/overview#quick-start-defining-a-binding) in your `wrangler.json` file in the root of your project.

A namespace is a logical container for key-value pairs. Think of it as a separate bucket or database for your app’s data. For each Key Value Store you want to use, add a binding in the `kv_namespaces` array to define a unique namespace.

Once declared and deployed, Webflow Cloud automatically connects your app to the namespace, allowing you to store and retrieve data by key.

<Steps>
  <Step title="Add a binding to your `wrangler.json` file">
    In your `wrangler.json` file, add a `kv_namespaces` array. Declare a binding for each Key Value Store you want to use inside the array.

    **Note:** Webflow Cloud will assign a unique ID for each resource on deployment.

    ```json title="wrangler.json"
    {
      "kv_namespaces": [
          {
            "binding": "CACHE_KV",
            "id": "1234567890", // Replace after deployment
          }
      ]
    }
    ```
  </Step>

  <Step title="Generate types for your binding">
    Generate TypeScript types for your bindings to enable autocomplete and type safety in your code editor:

    <CodeBlocks>
      ```bash title="Astro"
      npx wrangler types
      ```

      ```bash title="Next.js"
      npx wrangler types
      npx wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts
      ```
    </CodeBlocks>

    This creates/updates a `worker-configuration.d.ts` file with your binding types. **Note:** in Next.js you'll also need to update the types for the `cloudflare-env.d.ts` file to avoid type errors.
  </Step>

  <Step title="Deploy your app">
    Deploy your app to Webflow Cloud. After deployment, you can view and manage your namespaces [in the Webflow Cloud dashboard.](/webflow-cloud/storing-data/overview#accessing-storage-in-webflow-cloud)
  </Step>
</Steps>

## Working with Key Value Store

### Access the binding

Webflow Cloud exposes your Key Value Store to your app as an environment variable, known as a binding, allowing you to interact with it directly from your application code.

Always access the environment variable in your app’s runtime environment. This variable exposes methods from the [Cloudflare's KV Bindings API](https://developers.cloudflare.com/kv/examples/workers-kv-to-serve-assets/), allowing you to run [data operations](#data-operations) directly from your code.

<Tabs>
  <Tab title="Astro">
    In Astro, access the binding in your code using the `locals` object.

    <CodeBlocks>
      ```typescript title="src/pages/api/weather.ts"
      import type { APIRoute } from "astro";
      import type { KVNamespace } from "@cloudflare/workers-types";

      type WeatherCache = { data: any; timestamp: number };

      export const GET: APIRoute = async ({ request, locals }) => {

        // Get binding from locals runtime env
        const env = (locals as any).runtime.env;
        const kv = env.CACHE_KV as KVNamespace;

      //  Rest of code...
      ```
    </CodeBlocks>
  </Tab>

  <Tab title="Next.js">
    In Next.js, access the binding in your code using the `getCloudflareContext()` function.

    <CodeBlocks>
      ```typescript title="src/app/api/weather.ts"
      import type { NextRequest } from "next/server";
      import { getCloudflareContext } from "@opennextjs/cloudflare";
      import type { KVNamespace } from "@cloudflare/workers-types";

      export async function GET(request: Request) {

        // Get binding from Workers runtime env
        const { env } = getCloudflareContext();
        const kv = env.CACHE_KV as KVNamespace;

        // Rest of code...
      ```
    </CodeBlocks>

    <Warning title="Accessing bindings in Next.js">
      Next.js requires you to access bindings through the [Workers runtime](/webflow-cloud/environment) using the `getCloudflareContext()` function. Import `getCloudflareContext` at the top of your file, then use it to access the binding.
    </Warning>

    * **Always** call `getCloudflareContext()` inside a function to ensure the binding is available in the correct context.
    * **For static routes or use outside of request handlers** (such as Incremental Static Regeneration or Static Site Generation), use `getCloudflareContext({ async: true })` and await the result. This ensures the environment bindings are correctly resolved in all environments.
  </Tab>
</Tabs>

### Data operations

After accessing the binding, you can use the it to read and write data to your Key Value Store with the [Cloudflare KV API](https://developers.cloudflare.com/kv/api/) methods.

#### List keys

To list all keys in a namespace, call the `list()` method of the binding. This method returns a promise you can await on to get the list of keys for the namespace.

##### Syntax

```typescript
env.NAMESPACE.list({options?}): Promise<{ keys: {name: string}[], expiration?: number, metadata?: object}[],list_complete: boolean, cursor: string>
```

For all parameters and options for the `list()` method, see the [Cloudflare KV API documentation](https://developers.cloudflare.com/kv/api/list-keys/#list-method).

##### Example

```typescript
// Get binding from locals runtime env
const env = (locals as any).runtime.env;
const kv = env.CACHE_KV as KVNamespace;

// List all keys in the namespace
const { keys } = await kv.list();

// Rest of code...
```

***

#### Write key-value pairs

To create or update a key-value pair in a namespace, use the `.put()` method on your binding.

**How it works:**

* Calling `.put(key, value)` stores or updates the value for the given key in the namespace.
* Writes are [eventually consistent](#eventual-consistency): changes are visible immediately in the same region, but may take up to 60 seconds to propagate globally.
* If multiple writes to the same key occur at the same time, the last write wins.

##### Syntax

```typescript
env.NAMESPACE.put(key, value, options?): Promise<void>
```

For all parameters and options for the `.put()` method, see the [Cloudflare KV API documentation](https://developers.cloudflare.com/kv/api/write-key-value-pairs/#reference).

<Warning title="Bulk writes">
  The `.put()` method does **not** support bulk operations. To write multiple pairs in your app, call `.put()` in a loop or with `Promise.all`.
</Warning>

##### Example

```typescript
const pairs = [
  { key: "user:1", value: "Zaphod" },
  { key: "user:2", value: "Ford" },
];

await Promise.all(
  pairs.map(({ key, value }) => env.NAMESPACE.put(key, value))
);
```

***

#### Read key-value pairs

To retrieve values from your Key Value Store, use the `.get()` method on your binding. You can read a single key or an array of keys in one call.

```typescript
// Read a single key
const value = await env.NAMESPACE.get(key, options?);

// Read multiple keys (up to 100)
const values = await env.NAMESPACE.get([key1, key2, key3], options?);
```

**How it works:**

* Reading a single key returns the value (or `null` if not found).
* Reading multiple keys returns a map of key-value pairs, with missing keys mapped to `null`.
* You can specify the return type (`text`, `json`, etc.) as an option.
* Reads may return stale values due to [eventual consistency](#eventual-consistency); updates from other regions may take up to 60 seconds to appear.

##### Syntax

```typescript
env.NAMESPACE.get(key, type?, options?): Promise<string | Object | ArrayBuffer | ReadableStream | null>
```

For all parameters, options, and advanced usage, see the [Cloudflare KV API documentation](https://developers.cloudflare.com/kv/api/read-key-value-pairs/).

##### Example

```typescript
// List all keys with the "user:" prefix
const { keys } = await env.NAMESPACE.list({ prefix: "user:" });

// Extract key names
const userKeys = keys.map((k) => k.name);

// Read all user values as text (default)
const users = await env.NAMESPACE.get(userKeys);
// users is a Map: { "user:1" => "Zaphod", "user:2" => "Ford" }
```

***

#### Delete key-value pairs

To delete a key-value pair from your namespace, use the `.delete()` method on your binding. This method removes the key and its value from the namespace.

```typescript
await env.NAMESPACE.delete("user:1");
```

**How it works:**

* The `.delete()` method only deletes one key at a time. To delete multiple keys, call `.delete()` for each key.
* Deleting a key that doesn't exist is treated as a successful operation.
* Deletions are **eventually consistent**: the key is removed immediately in the current region, but it may take up to 60 seconds to propagate globally.

##### Syntax

```typescript
env.NAMESPACE.delete(key): Promise<void>
```

For all parameters and options for the `.delete()` method, see the [Cloudflare KV API documentation](https://developers.cloudflare.com/kv/api/delete-key-value-pairs/#reference).

##### Example

{/* <!-- vale off --> */}

<CodeBlocks>
  ```typescript title="Single key"
  // Delete a single key
  await env.NAMESPACE.delete("user:1");
  ```

  ```typescript title="Multiple keys"
  // Delete multiple keys
  await Promise.all([env.NAMESPACE.delete("user:2"), env.NAMESPACE.delete("user:3")]);
  ```
</CodeBlocks>

{/* <!-- vale on --> */}

### Eventual consistency

Key Value Store is eventually consistent: when you write or delete a key, the change is visible immediately in the same region, but may take up to 60 seconds to propagate globally.

**What this means for Webflow Cloud apps**

* If you read a key from a different region shortly after writing or deleting it, you may see stale data.
* This applies to all operations: `.put()`, `.delete()`, etc.
* Eventual consistency is usually not an issue for caching, session data, or other non-critical use cases.

**Best practices**

* Avoid relying on immediate global consistency for critical workflows.
* Design your application to tolerate stale reads, or use other storage solutions if you require strong consistency.
* For time-sensitive data, consider using a different mechanism or adding a version/timestamp to your values.

For more information, see the [Cloudflare KV API documentation](https://developers.cloudflare.com/kv/concepts/how-kv-works/).

## Related resources

* [How to add a Key Value Store to your app](/webflow-cloud/add-key-value-store)
* [Cloudflare Workers KV documentation](https://developers.cloudflare.com/kv/)
* [Webflow Cloud storage overview](/webflow-cloud/storing-data/overview)
* [Learn about SQLite storage](/webflow-cloud/storing-data/sqlite)
* [Review storage limits and quotas](/webflow-cloud/limits)

***

[Back to overview](/webflow-cloud/storing-data/overview)

---

# Object Storage

> Learn about Webflow Cloud's Object Storage service.

Object Storage is a scalable, high-performance storage solution for large files and unstructured data in Webflow Cloud. It enables you to store, retrieve, and manage objects, like images, videos, documents, and backups—without the complexity or egress fees of traditional cloud storage.

Use Object Storage when you need to store and serve large, binary, or unstructured data that doesn't fit well in a database or key-value store.

## How Object Storage works

Object Storage organizes data as objects, each identified by a unique key within a bucket, a container for objects.

Objects are stored and retrieved via a simple API, supporting direct uploads, downloads, and deletions. Data is distributed and replicated for durability and high availability.

**Key features:**

* **No egress fees** - Download your data without extra costs.
* **S3-compatible API** - Use familiar tools and SDKs.
* **Scalable and performant** - Handles large files and high request volumes.
* **CORS and public buckets** - Serve assets directly to the web.

## When to use object storage

Object Storage is ideal for:

* Storing and serving static assets (images, videos, PDF files)
* Backups and large data exports
* Data lakes and analytics workloads
* Any scenario requiring scalable, unstructured storage

## Add Object Storage to your app

Create a bucket by adding a [binding](/webflow-cloud/storing-data/overview#quick-start-defining-a-binding) to the `r2_buckets` array in your `wrangler.json` file at the root of your project.

A bucket is a logical container for objects. Think of it as a dedicated database for your app’s files and media. Add a separate binding for each bucket you need for storing and serving files.

After deployment, Webflow Cloud automatically connects your app to each bucket, so you can store and retrieve objects by key.

<Steps>
  <Step title="Add a binding to your `wrangler.json` file">
    In your `wrangler.json` file, add a `r2_buckets` array. Declare a binding for each bucket you want to use inside the array. Binding names must be valid JavaScript variable names.

    ```json title="wrangler.json"
    {
      "r2_buckets": [
          {
            "binding": "WEBFLOW_CLOUD_MEDIA",
            "bucket_name": <YOUR_BUCKET_NAME>, // Replace after deployment
          }
      ]
    }
    ```
  </Step>

  <Step title="Generate types for your binding">
    Generate TypeScript types for your bindings to enable autocomplete and type safety in your code editor:

    <CodeBlocks>
      ```bash title="Astro"
      npx wrangler types
      ```

      ```bash title="Next.js"
      npx wrangler types
      npx wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts
      ```
    </CodeBlocks>

    This creates/updates a `worker-configuration.d.ts` file with your binding types. **Note:** in Next.js you'll also need to update the types for the `cloudflare-env.d.ts` file to avoid type errors.
  </Step>

  <Step title="Deploy your app">
    Deploy your app to Webflow Cloud. After deployment, you can view and manage your buckets [in the Webflow Cloud dashboard.](/webflow-cloud/storing-data/overview#accessing-storage-in-webflow-cloud)
  </Step>
</Steps>

## Working with Object Storage

### Access the binding

Webflow Cloud exposes Object Storage buckets to your app as an environment variable, known as a binding, allowing you to interact with it directly from your application code without the need for API keys and credentials.

Always access the environment variable in your app’s runtime environment. This variable exposes methods from [Cloudflare's R2 Bindings API](https://developers.cloudflare.com/r2/api/workers/workers-api-reference/#create-a-binding), allowing you to run [data operations](#data-operations) directly from your code.

<Tabs>
  <Tab title="Astro">
    In Astro, access the binding in your code using the `locals` object.

    <CodeBlocks>
      ```typescript title="src/pages/api/weather.ts"
      import type { APIRoute } from "astro";
      import type { R2Bucket } from "@cloudflare/workers-types";

      type WeatherCache = { data: any; timestamp: number };

      export const GET: APIRoute = async ({ request, locals }) => {

        // Get binding from locals runtime env
        const env = (locals as any).runtime.env;
        const bucket = env.WEBFLOW_CLOUD_MEDIA as R2Bucket;

      //  Rest of code...
      ```
    </CodeBlocks>
  </Tab>

  <Tab title="Next.js">
    In Next.js, access the binding in your code using the `getCloudflareContext()` function.

    <CodeBlocks>
      ```typescript title="src/app/api/weather.ts"
      import type { NextRequest } from "next/server";
      import { getCloudflareContext } from "@opennextjs/cloudflare";

      export async function GET(request: Request) {

        // Get binding from Workers runtime env
        const { env } = getCloudflareContext();
        const bucket = env.WEBFLOW_CLOUD_MEDIA

        // Rest of code...
      ```
    </CodeBlocks>

    <Warning title="Accessing bindings in Next.js">
      Next.js requires you to access bindings through the [Workers runtime](/webflow-cloud/environment) using the `getCloudflareContext()` function. Import `getCloudflareContext` at the top of your file, then use it to access the binding.
    </Warning>

    * **Always** call `getCloudflareContext()` inside a function to ensure the binding is available in the correct context.
    * **For static routes or use outside of request handlers** (such as Incremental Static Regeneration or Static Site Generation), use `getCloudflareContext({ async: true })` and await the result. This ensures the environment bindings are correctly resolved in all environments.
  </Tab>
</Tabs>

### Data operations

Manage objects in your bucket using the [R2 API](https://developers.cloudflare.com/r2/api/workers/workers-api-reference/) methods available on the binding. The most common operations are uploading, downloading, deleting, and listing objects. Each method is designed for fast, reliable access to your files and data directly from your app, with no need for external API keys.

Object Storage also supports S3-compatible API operations, making it easy to integrate with existing S3 tools and workflows. [Learn more about S3 API compatibility.](https://developers.cloudflare.com/r2/api/s3/api/)

#### Upload an object

To upload (store) an object in your bucket, use the `.put()` method on your binding. This method stores the provided data under the specified key and creates an [`R2Object`](https://developers.cloudflare.com/r2/api/workers/workers-api-reference/#r2object-definition) containing the object's metadata.

`.put()` returns a promise that resolves to an `R2Object` with metadata about the stored object. If a precondition in `options` fails, `.put()` returns `null` and the object isn't stored.

##### Syntax

```typescript
await env.WEBFLOW_CLOUD_MEDIA.put(key, value, options?): Promise<R2Object | null>;
```

* `key`: Unique name for the object (string)
* `value`: Data to store (string, ArrayBuffer, ReadableStream, Blob, etc.)
* `options`: (Optional) Metadata, HTTP headers, or storage class

Object Storage writes are **strongly consistent**: once the promise resolves, all subsequent reads will see the new object globally.

For all parameters and advanced options, see the [Cloudflare R2 API documentation](https://developers.cloudflare.com/r2/api/workers/workers-api-reference/#bucket-method-definitions).

##### Example

<CodeBlocks>
  ```typescript title="Astro" {19-22} maxLines=15
  import type { APIRoute } from "astro";
  import type { R2Bucket } from "@cloudflare/workers-types";

  export const PUT: APIRoute = async ({ request, locals }) => {

      // Get binding from locals runtime env
      const env = (locals as any).runtime.env;
      const bucket = env.WEBFLOW_CLOUD_MEDIA as R2Bucket;

      const url = new URL(request.url);
      const key = url.pathname.slice(1); // for example, "uploads/photo.jpg"

      if (request.method === "PUT") {

      // Get the file data from the request body
      const fileStream = request.body;
      const contentType = request.headers.get("content-type") || "application/octet-stream";

      // Store the object in the bucket with metadata
      const result = await bucket.put(key, fileStream, {
          httpMetadata: { contentType }
      });

      // Return a JSON response with the object metadata
      if (result) {
          return new Response(
          JSON.stringify({
              message: `File uploaded successfully.`,
              key: result.key,
              size: result.size,
              uploadedAt: result.uploaded
          }),
          { status: 201, headers: { "Content-Type": "application/json" } }
          );
      } else {
          return new Response("Upload failed due to precondition.", { status: 412 });
      }
      }

      return new Response("Method Not Allowed", { status: 405, headers: { Allow: "PUT" } });
  }
  };
  ```

  ```typescript title="Next.js" maxLines=15 {170-20}
  import type { NextRequest } from "next/server";
  import { getCloudflareContext } from "@opennextjs/cloudflare";
  import type { R2Bucket } from "@cloudflare/workers-types";

  export async function PUT(request: NextRequest) {

  // Get binding from Workers runtime env
  const { env } = getCloudflareContext();
  const bucket = env.WEBFLOW_CLOUD_MEDIA as R2Bucket;

          if (request.method === "PUT") {

  // Get the file data from the request body
  const fileStream = request.body;
  const contentType = request.headers.get("content-type") || "application/octet-stream";

  // Store the object in the bucket with metadata
  const result = await bucket.put(key, fileStream, {
      httpMetadata: { contentType }
  });

  // Return a JSON response with the object metadata
  if (result) {
      return new Response(
      JSON.stringify({
          message: `File uploaded successfully.`,
          key: result.key,
          size: result.size,
          uploadedAt: result.uploaded
      }),
      { status: 201, headers: { "Content-Type": "application/json" } }
      );
  } else {
      return new Response("Upload failed due to precondition.", { status: 412 });
  }
  }

  return new Response("Method Not Allowed", { status: 405, headers: { Allow: "PUT" } });
  }
  ```
</CodeBlocks>

***

#### Download an object

To retrieve an object from your bucket, use the `.get()` method on your binding. This method fetches the object body and metadata if the key exists, or returns `null` if not found.

`.get()` returns a promise that resolves to an `R2ObjectBody` that contains the object's data and metadata, or `null` if the object doesn't exist.

##### Syntax

```typescript
env.WEBFLOW_CLOUD_MEDIA.get(key, options?): Promise<R2ObjectBody | null>;
```

* `key`: The object key (string)
* `options`: (Optional) Conditional headers or response options

For all parameters and advanced options, see the [Cloudflare R2 API documentation](https://developers.cloudflare.com/r2/api/workers/workers-api-reference/#bucket-method-definitions).

##### Example

<CodeBlocks>
  ```typescript title="Astro" maxLines=10
  import type { APIRoute } from "astro";
  import type { R2Bucket } from "@cloudflare/workers-types";

  export const GET: APIRoute = async ({ request, locals }) => {

      // Get binding from locals runtime env
      const env = (locals as any).runtime.env;
      const bucket = env.WEBFLOW_CLOUD_MEDIA as R2Bucket;

      // Get the object key from the request URL
      const url = new URL(request.url);
      const key = url.pathname.slice(1); // for example, "uploads/photo.jpg"

      // Get the object from the bucket
      const object = await bucket.get(key);
      if (object) {
          return new Response(object.body, {
              headers: { "Content-Type": object.httpMetadata?.contentType || "application/octet-stream" }
          });
      } else {
          return new Response("Not found", { status: 404 });
      }
  };
  ```

  ```typescript title="Next.js" maxLines=10
  import type { NextRequest } from "next/server";
  import { getCloudflareContext } from "@opennextjs/cloudflare";
  import type { R2Bucket } from "@cloudflare/workers-types";

  export async function GET(request: NextRequest) {

      // Get binding from Workers runtime env
      const { env } = getCloudflareContext();
      const bucket = env.WEBFLOW_CLOUD_MEDIA as R2Bucket;

      // Get the object key from the request URL
      const url = new URL(request.url);
      const key = url.pathname.slice(1); // for example, "uploads/photo.jpg"

      // Get the object from the bucket
      const object = await bucket.get(key);
      if (object) {
          return new Response(object.body, {
              headers: { "Content-Type": object.httpMetadata?.contentType || "application/octet-stream" }
          });
      } else {
          return new Response("Not found", { status: 404 });
      }
  }
  ```
</CodeBlocks>

***

#### Delete an object

To delete an object from your bucket, use the `.delete()` method on your binding. You can delete a single object by key or multiple objects by passing an array of keys (up to 1000 per call).

`.delete()` returns a promise that resolves when the objects have been deleted. Deleting a key that doesn't exist is treated as a successful operation.

##### Syntax

```typescript
env.WEBFLOW_CLOUD_MEDIA.delete(key): Promise<void>;
```

* `key`: The object key (string) or an array of keys

For all parameters and advanced options, see the [Cloudflare R2 API documentation](https://developers.cloudflare.com/r2/api/workers/workers-api-reference/#bucket-method-definitions).

##### Example

<CodeBlocks>
  ```typescript title="Astro" maxLines=8
  import type { APIRoute } from "astro";
  import type { R2Bucket } from "@cloudflare/workers-types";

  export const DELETE: APIRoute = async ({ request, locals }) => {
      // Get binding from locals runtime env
      const env = (locals as any).runtime.env;
      const bucket = env.WEBFLOW_CLOUD_MEDIA as R2Bucket;
      // Get the object key from the request URL
      const url = new URL(request.url);
      const key = url.pathname.slice(1); // for example, "uploads/photo.jpg"

      await bucket.delete(key);
      return new Response("Deleted", { status: 204 });
  };
  ```

  ```typescript title="Next.js" maxLines=8
  import type { NextRequest } from "next/server";
  import { getCloudflareContext } from "@opennextjs/cloudflare";
  import type { R2Bucket } from "@cloudflare/workers-types";

  export async function DELETE(request: NextRequest) {
      // Get binding from Workers runtime env
      const { env } = getCloudflareContext();
      const bucket = env.WEBFLOW_CLOUD_MEDIA as R2Bucket;
      // Get the object key from the request URL
      const url = new URL(request.url);
      const key = url.pathname.slice(1); // for example, "uploads/photo.jpg"

      await bucket.delete(key);
      return new Response("Deleted", { status: 204 });
  }
  ```
</CodeBlocks>

***

#### List objects

To list objects in your bucket, use the `.list()` method on your binding. This method returns an array of objects and supports options such as prefix filtering, result limits, and pagination.

`.list()` returns a promise that resolves to an object containing an array of `R2Object` entries, a `truncated` boolean indicating if more results are available, and a `cursor` for pagination.

##### Syntax

```typescript
env.WEBFLOW_CLOUD_MEDIA.list(options?: R2ListOptions): Promise<R2Objects>;
```

* `options`: (Optional) Object with properties like `prefix`, `limit`, `cursor`, and `delimiter`

For all parameters and advanced options, see the [Cloudflare R2 API documentation](https://developers.cloudflare.com/r2/api/workers/workers-api-reference/#bucket-method-definitions).

##### Example

<CodeBlocks>
  ```typescript title="Astro" maxLines=10
  import type { APIRoute } from "astro";
  import type { R2Bucket } from "@cloudflare/workers-types";

  export const GET: APIRoute = async ({ request, locals }) => {
      // Get binding from locals runtime env
      const env = (locals as any).runtime.env;
      const bucket = env.WEBFLOW_CLOUD_MEDIA as R2Bucket;
      // List all objects with the prefix "images/"
      const { objects, truncated, cursor } = await bucket.list({ prefix: "images/", limit: 100 });
      const keys = objects.map(obj => obj.key);
      return new Response(JSON.stringify({ keys, truncated, cursor }), {
          headers: { "Content-Type": "application/json" }
      });
  };
  ```

  ```typescript title="Next.js" maxLines=10
  import type { NextRequest } from "next/server";
  import { getCloudflareContext } from "@opennextjs/cloudflare";
  import type { R2Bucket } from "@cloudflare/workers-types";

  export async function GET(request: NextRequest) {
      // Get binding from Workers runtime env
      const { env } = getCloudflareContext();
      const bucket = env.WEBFLOW_CLOUD_MEDIA as R2Bucket;
      // List all objects with the prefix "images/"
      const { objects, truncated, cursor } = await bucket.list({ prefix: "images/", limit: 100 });
      const keys = objects.map(obj => obj.key);
      return new Response(JSON.stringify({ keys, truncated, cursor }), {
          headers: { "Content-Type": "application/json" }
      });
  }
  ```
</CodeBlocks>

For more information on object storage, see the [Cloudflare R2 API documentation](https://developers.cloudflare.com/r2/api/workers/workers-api-reference/).

## Related resources

* [Storage options for Webflow Cloud](/webflow-cloud/storing-data/overview)
* [Add a SQLite database to your app](/webflow-cloud/add-sqlite)
* [Webflow Cloud limits](/webflow-cloud/limits)

***

[Back to overview](/webflow-cloud/storing-data/overview)

### FAQs

<Accordion title="Can a bucket be public?">
  Public buckets aren't currently supported in Webflow Cloud. To serve files publicly, add them to your public folder.
</Accordion>

---

# About the Webflow Cloud edge environment

> Learn about Webflow Cloud's edge runtime environment

Webflow Cloud runs your app on [Cloudflare Workers](https://developers.cloudflare.com/workers/), executing code at edge locations worldwide using the [Workers runtime](https://developers.cloudflare.com/workers/runtime-apis/). While it shares some concepts with traditional serverless platforms, Workers differs from Node.js environments.

This guide outlines those key differences and provides best practices to prepare your code for deployment on Webflow Cloud.

## Understanding the workers runtime

Unlike traditional serverless platforms built on containers or virtual machines, [Workers use lightweight V8 isolates](https://developers.cloudflare.com/workers/reference/how-workers-works/) to deliver fast, scalable, and secure performance. The Workers runtime is designed to start code instantly with minimal overhead, allowing each function to run in its own isolated environment. This reduces cold start times and provides strong security boundaries between executions.

Because of this architecture, there are important differences in how your app runs—especially around API support, state management, resource limits, and deployment workflows. The guides below outline what to expect and how to prepare your code for Webflow Cloud.

<Note title="Edge runtime vs Workers runtime">
  Throughout the documentation, you may encounter the term "edge runtime." The Workers runtime is a specific implementation of the edge runtime, and the terms are often used interchangeably.
</Note>

<CardGroup cols={2}>
  <Card title="Configuration" href="/webflow-cloud/environment/configuration">
    Configure your project for deployment on Webflow Cloud.
  </Card>

  <Card title="Framework setup" href="/webflow-cloud/environment/framework-customization">
    Some frameworks need additional configuration to run as expected on Webflow Cloud.
  </Card>

  <Card title="Node.js compatibility" href="/webflow-cloud/environment/nodejs-compatibility">
    Webflow Cloud partially supports Node.js APIs. Review your code and dependencies for compatibility.
  </Card>

  <Card title="Environment variables" href="/webflow-cloud/environments/#managing-environment-variables">
    Define environment variables in <a href="/webflow-cloud/environments">Webflow Cloud Environments</a>.
  </Card>

  <Card title="Resource limits" href="/webflow-cloud/limits">
    The runtime enforces strict limits on memory, CPU, and bundle size.
  </Card>
</CardGroup>

Before deploying, review your code and dependencies for compatibility. If you're migrating, pay close attention to API routes, authentication, and third-party libraries.

---

# Optimizing your app for Webflow Cloud

> How to adapt and optimize supported frameworks for deployment on Webflow Cloud.

Webflow Cloud supports the Next.js and Astro frameworks, though running either on the Workers runtime may require specific configuration or adjustments. This page offers guidance on framework-specific setup, limitations, and best practices to help you get the most out of your deployment.

<Tip title="Environment configuration">
  For general deployment and environment configuration, see the [configuration guide](/webflow-cloud/environment/configuration). This page focuses on requirements and recommendations unique to each supported framework.
</Tip>

## Next.js

Webflow Cloud deploys Next.js apps using the [OpenNext Cloudflare adapter](https://opennext.js.org/cloudflare), an open-source tool that brings Next.js to the edge. It handles translating Next.js's server-side features to the edge runtime, including routing, API routes, static assets, and server functions, enabling modern Next.js apps to run with minimal changes.

To run your Next.js app on Webflow Cloud, you may need to adapt some features and provide custom configuration. See the sections below for details.

### Images

Webflow Cloud automatically optimizes images for better performance and reduced bandwidth usage. Here's how different image types are handled:

#### Next.js Image component with local images

When you use the `<Image />` component with local images Webflow Cloud automatically:

* Resizes images for optimal performance
* Serves images through Webflow's CDN for faster loading
* Reduces bandwidth usage

**Example:**

```jsx
import Image from 'next/image';

// This image will be automatically optimized
<Image 
  src="/my-image.jpg" 
  alt="Description" 
  width={500} 
  height={300} 
/>
```

<Note>
  Webflow Cloud automatically handles routing through your base path when using the Next.js Image component, so you don't need to manually add `assetPrefix` to your image paths.
</Note>

#### Next.js Image component with external images

When you use the `<Image />` component with external images, including those from your main Webflow site, Webflow Cloud doesn't automatically resize the image. However, you can still benefit from other Image component features like lazy loading.

```jsx
// External images are not automatically optimized
<Image 
  src="https://example.com/image.jpg" 
  alt="External image" 
  width={500} 
  height={300} 
/>
```

#### Plain `img` tags

When using regular `<img>` tags, no automatic optimization occurs. For assets in your `/public` folder, include `assetPrefix` in the src path to ensure proper CDN caching:

```jsx
// Include assetPrefix for CDN caching
<img src={`${assetPrefix}/my-image.jpg`} alt="Description" />
```

### Limitations

Some Next.js features have limitations when running on Webflow Cloud:

* **Middleware:** [Node.js runtime middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware#runtime) isn't supported. Only Edge runtime middleware works on the Workers runtime
* **ISR & On-demand revalidation:** Incremental Static Regeneration and on-demand revalidation are experimental
* **Composable caching:** The `use cache` directive isn't yet supported

See the [OpenNext Cloudflare adapter documentation](https://opennext.js.org/cloudflare#supported-nextjs-features) for current feature support.

### Additional resources

* [Cloudflare Adapter for Next.js](https://blog.cloudflare.com/deploying-nextjs-apps-to-cloudflare-workers-with-the-opennext-adapter/)
* [Next.js Edge Runtime Documentation](https://nextjs.org/docs/pages/api-reference/edge)
* [Cloudflare Workers Next.js Guide](https://developers.cloudflare.com/workers/frameworks/framework-guides/nextjs/)
* [OpenNext x Cloudflare Images](https://opennext.js.org/cloudflare/howtos/image)

## Astro

Webflow Cloud deploys Astro apps using the [@astrojs/cloudflare adapter](https://docs.astro.build/en/guides/integrations-guide/cloudflare/). The adapter supports server-side rendering, API routes, and advanced features like server islands and sessions—translating Astro's server functionality to the Workers runtime for seamless edge deployment.

Most features work out of the box, but some Node.js APIs and integrations may need additional configuration. For details and advanced usage, see the [Astro Cloudflare integration guide](https://docs.astro.build/en/guides/integrations-guide/cloudflare/). However, we've outlined the most common adjustments below.

### Loading React components

Be sure to add the `client:load` directive to your components to load your components.

```astro title="src/pages/index.astro" {6}
---
import HelloWorld from '../components/HelloWorld';
---

<div class="container">
  <HelloWorld client:load />
</div>
```

### Static pages

By default, all Astro routes are server-rendered on the edge. For static routes (such as a custom 404 page or privacy policy), enable pre-rendering to generate and serve them as static assets for faster loading.

```javascript title="src/pages/404.astro" {2}
---
export const prerender = true; // Pre-render the page for best performance
---
<html>
  <body>
    <h1>404: Not Found</h1>
    <p>This page does not exist.</p>
  </body>
</html>
```

### Environment variables

Astro provides several ways to access environment variables, depending on where your code runs:

* Use `import.meta.env` for built-in variables like `BASE_URL` and `ASSETS_PREFIX`, and for any custom variables prefixed with `PUBLIC_`. Using the `PUBLIC` prefix will make the variable available on both the server and the client.
* Use `Astro.locals.runtime.env`  in Astro server-side components to access custom environment variables.
* Use `locals.runtime.env`  in API routes to access custom environment variables.

To use `locals.runtime.env` variables during local development, create a `dev.vars` file in your project root. Use the same format as a standard `.env` file to define your environment variables.

```ts title="Accessing environment variables in Astro"
// 1. Built-in environment variables (available everywhere)
import.meta.env.BASE_URL
import.meta.env.ASSETS_PREFIX

// 2. In Astro components (e.g., src/pages/foo.astro)
Astro.locals.runtime.env.VARIABLE_NAME

// 3. In API routes (e.g., src/pages/api/foo.ts)
import type { APIRoute } from 'astro';

export const GET: APIRoute = async ({ locals }) => {
  const siteId = locals.runtime.env.WEBFLOW_SITE_ID;
  const accessToken = locals.runtime.env.WEBFLOW_SITE_API_TOKEN;
  // Use siteId and accessToken as needed
};
```

### API routes

#### Enable Edge runtime for API routes

To ensure Astro API routes work on the [Edge runtime](/webflow-cloud/environment), add the following line to the top of your route:

```javascript title="src/routes/api/hello.ts" {1-4}
// Add this line to your route to ensure it runs on the Edge runtime
export const config = {
    runtime: "edge",
};

import type { APIRoute } from 'astro';


export const GET: APIRoute = async ({ locals }) => {
  return new Response(JSON.stringify({ message: 'Hello from the edge!', runtime }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' }
  });
};
```

#### Disable Astro's CSRF protection (if needed)

You may encounter issues with POST requests containing form data. Disable Astro's built-in [CSRF protection](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/CSRF) and implement your own CSRF handling.

In your `astro.config.mjs` file, add the following:

```javascript title="astro.config.mjs" {10}
{
  security: {
    checkOrigin: false,
  },
}
```

### Assets

Astro serves all static assets (such as images, stylesheets, and icons) from the `public` directory. Be sure to place all static files (images, CSS, fonts, etc.) in the `public` directory at your project root.

```
public/
├── images/
│   └── logo.png
├── styles/
│   └── global.css
└── favicon.ico
```

{/* ### Image optimization

Astro's default image optimization service isn't supported on Webflow Cloud, but you can enable edge image optimization by configuring the [Cloudflare image service](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#imageservice) in your `astro.config.mjs`. This lets you serve optimized images globally via Cloudflare's infrastructure.

```js title="astro.config.mjs" {7-8}
import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";
import cloudflareImages from "@astrojs/image/cloudflare";

export default defineConfig({
  adapter: cloudflare(),
  image: {
    service: cloudflareImages(),
  },
});
``` */}

### Tailwind CSS

To use Tailwind CSS in your Astro project, use the `@tailwindcss/vite` plugin to ensure compatibility. Once you've created your Astro project from the CLI, follow the instructions in the [Tailwind CSS integration for Astro](https://tailwindcss.com/docs/installation/framework-guides/astro) guide to set up Tailwind CSS.

<Warning title="@astrojs/tailwind is not supported on Webflow Cloud">
  `@astrojs/tailwind` is deprecated and not supported on Webflow Cloud.

  Third-party templates and guides may still reference it, but it's not recommended to use it. Instead, upgrade to the latest version of Tailwind CSS and use the `@tailwindcss/vite` plugin to ensure compatibility.
</Warning>

## Additional resources

* [Deploying Astro to Cloudflare](https://docs.astro.build/en/guides/deploy/cloudflare/)
* [Cloudflare Workers framework guide for Astro](https://developers.cloudflare.com/workers/frameworks/framework-guides/astro/)
* [Hybrid rendering in Astro](https://blog.logrocket.com/hybrid-rendering-astro-guide/)

---

# Node.js compatibility

> Understanding Node.js compatibility in the Workers runtime.

Node.js is a popular JavaScript runtime for building server-side apps, offering access to system resources and core modules like `fs`, `path`, and `http`. Many npm packages depend on these modules or other Node.js-specific APIs.

Edge environments, such as Webflow Cloud, run code closer to users for better speed, scalability, and security. Instead of full Node.js support, Webflow Cloud relies on Web APIs such as `fetch`, `Request`, and `Response`. While Workers runtime compatibility with Node.js APIs is improving, key differences and limitations remain.

Understanding these differences is essential for building apps on Webflow Cloud.

## Node.js compatibility in Webflow Cloud

The Workers runtime is steadily expanding support for Node.js APIs, but there are still limitations.

* **Native support:** Many Node.js APIs are now natively supported, including modules like `Buffer`, `crypto`, `stream`, and `path`. See the [Cloudflare Node.js compatibility matrix](https://workers-nodejs-compat-matrix.pages.dev/) for the full list.
* **Polyfills:** For unsupported APIs, Cloudflare provides [polyfills](https://dev.to/sandeepnautiyal/polyfills-explained-making-modern-javascript-work-everywhere-34lc). These partial implementations enable many packages to run, but unsupported methods may throw errors at runtime.

When you deploy to Webflow Cloud, Node.js compatibility settings are automatically applied to your Worker.

```json title="wrangler.json"
{
  "compatibility_date": "2025-04-15",
  "compatibility_flags": [
    "nodejs_compat"
  ]
}
```

**You can't edit or override these settings when deploying to Webflow Cloud.**

* Node.js compatibility and polyfills are enabled by default.
* You can't add, remove, or customize polyfills or compatibility flags.
* Some npm packages that require unsupported Node.js APIs or extra configuration may not work as expected. If you encounter issues, use native Web APIs instead.

### Common errors

If you use an unsupported Node.js API, you may see errors in your [build logs](/webflow-cloud/deployments#build-logs):

* **Module not found or import errors**
  ```bash title="Build log"
  Could not resolve 'fs'
  Unexpected external import of 'fs', 'http'
  Could not access built-in Nodejs modules
  ```
* **Runtime exceptions**
  ```bash title="Build log"
  Worker threw a JavaScript exception (Cloudflare error code 1101)
  Uncaught Error: No such module 'buffer' imported from 'index.js'
  ```
* **Silent failure or incomplete functionality**
  ```bash title="Build log"
  Uncaught Error: No such module 'buffer' imported from 'index.js'
  ```

If you encounter these errors, switch to native Web APIs or supported APIs. For more details, see the [Cloudflare Node.js compatibility matrix](https://workers-nodejs-compat-matrix.pages.dev/) and the [official Cloudflare Workers Node.js API docs](https://developers.cloudflare.com/workers/runtime-apis/nodejs/).

## Best practices for edge compatibility

### Use Web APIs for network and data operation

Node.js APIs aren’t always supported in the edge runtime. When that’s the case, use the equivalent Web API. See below for a list of common Node.js APIs and their Web counterparts.

| ✅ Use (Web APIs)                           | ❌ Avoid (Node.js APIs)            | Notes / alternatives                                                                                      |
| ------------------------------------------ | --------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `fetch`, `Request`, `Response`             | `http`, `https`, `net`            | Use `fetch` for all HTTP requests.                                                                        |
| `crypto.subtle`                            | `crypto`                          | Use [SubtleCrypto](https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto) for hashing/encryption. |
| `FormData`, `URL`, `URLSearchParams`       | `querystring`, `form-data`        | Use Web APIs for URL and form data.                                                                       |
| `Uint8Array`, `TextEncoder`, `TextDecoder` | `Buffer`                          | Prefer Web APIs for binary/text data.                                                                     |
| External storage                           | `fs`, `path`, `os`                | No file system access; use external storage.                                                              |
| Edge-native concurrency (stateless)        | `child_process`, `worker_threads` | No process spawning or threads.                                                                           |
| Streams                                    | `stream`                          | Use the [Web Streams API](https://developers.cloudflare.com/workers/runtime-apis/streams/).               |
| `setTimeout`, `setInterval`                | N/A                               | Supported, but limited by worker/request lifetime.                                                        |

### Choose edge-compatible libraries

Many popular libraries now rely on Web APIs instead of Node.js core modules. When possible, choose libraries built for edge environments or with pure JavaScript implementations.

To help, we've compiled a list of popular libraries and their edge-compatible alternatives.

{/* <!-- vale off --> */}

| Use case           | Node.js library   | Edge-compatible alternatives                                                                                                                                                                                                         | Notes                                                                                                                                 |
| ------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| Password hashing   | `bcrypt`          | [`bcryptjs`](https://www.npmjs.com/package/bcryptjs), [`bcrypt-edge`](https://www.npmjs.com/package/bcrypt-edge)                                                                                                                     | `bcrypt-edge` is optimized for Cloudflare Workers and other edge environments.                                                        |
| Image manipulation | `sharp`           | [`pica`](https://www.npmjs.com/package/pica), [`jimp`](https://www.npmjs.com/package/jimp), [`ImageScript`](https://www.npmjs.com/package/imagescript)                                                                               | No native Node.js; use WASM or pure JS alternatives.                                                                                  |
| File uploads       | `multer`          | Browser [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) + direct upload to R2/S3                                                                                                                             | Use browser-native FormData and direct upload to object storage (R2/S3). For server-side, avoid Node.js streams.                      |
| Database ORM       | `Prisma`          | [`@prisma/client`](https://www.npmjs.com/package/@prisma/client) (with [Prisma Edge](https://www.prisma.io/docs/orm/prisma-client/deployment/edge/deploy-to-cloudflare)), [`drizzle-orm`](https://www.npmjs.com/package/drizzle-orm) | Prisma Edge requires compatible drivers and edge support.                                                                             |
| Authentication     | `NextAuth.js`     | [`Clerk`](https://clerk.com/), [`Auth0`](https://auth0.com/), [`Auth.js`](https://authjs.dev/guides/edge-compatibility)                                                                                                              | Use providers with edge support. [`Auth.js`](https://authjs.dev/guides/edge-compatibility) is working toward full edge compatibility. |
| Email              | `nodemailer`      | [`Resend`](https://resend.com/), [`SendGrid`](https://sendgrid.com/), [Cloudflare Email](https://developers.cloudflare.com/email-routing/)                                                                                           | Use a service that supports edge environments.                                                                                        |
| JWT auth           | `jsonwebtoken`    | [`jose`](https://www.npmjs.com/package/jose)                                                                                                                                                                                         | Lightweight, edge-compatible JWT library.                                                                                             |
| ID generation      | `uuid`, `shortid` | [`nanoid`](https://www.npmjs.com/package/nanoid)                                                                                                                                                                                     | Fast, secure, and edge-compatible.                                                                                                    |

{/* <!-- vale on --> */}

### Troubleshoot library compatibility

* Check for errors like `ReferenceError: process is not defined` or `Module not found: fs`. These indicate Node.js dependencies that aren't supported in the Workers runtime.
* Polyfills using `unenv` or custom `wrangler.json` aren't currently supported on Webflow Cloud.

## Resources

* [Cloudflare Node.js compatibility matrix](https://workers-nodejs-compat-matrix.pages.dev/)
* [Cloudflare Workers Node.js API docs](https://developers.cloudflare.com/workers/runtime-apis/nodejs/)
* [Polyfills explained](https://dev.to/sandeepnautiyal/polyfills-explained-making-modern-javascript-work-everywhere-34lc)

---

# Tracking usage in Webflow Cloud

> 

The Webflow Cloud dashboard lets you monitor your app’s resource usage each month so you can optimize performance and avoid exceeding your plan’s limits. Regularly reviewing these metrics helps you prevent service interruptions and plan for growth. For details on usage limits and available resources, see the [pricing](https://webflow.com/pricing) and [limits](/webflow-cloud/limits) pages.

## Metrics

### Requests

Counts each incoming HTTP or API request that runs your app’s code. Every time a user or client sends a request to an endpoint handled by your app, it counts as one request.

* Each page load, API call, or repeated request increments the count.
* Only requests that execute your app’s code are counted.
* Subrequests, requests your app makes to other services, don't count toward this total.

**Example**\
10 users each load a page that runs your app: 10 requests. If your app fetches data from another API during execution, those subrequests aren't included in the request count.

### CPU time

Measures the total time your app’s code actively runs on the server’s CPU during each request. Only periods when your code is executing, such as parsing, processing, or calculations, are counted.

* Time spent waiting for external resources (like network requests or timers) isn't included.
* Only active code execution is counted; idle or waiting periods are excluded.

**Example**\
Your app processes data for 2 ms, waits 100 ms for an API response, then processes for another 3 ms. Total CPU time: 5 ms (not 105 ms).

### Bandwidth

Bandwidth for your Webflow Cloud app is counted together with your site’s overall bandwidth. Any bandwidth your app uses will show up in your site’s bandwidth metrics, which you can view in the Site Usage tab under Webflow Site Settings > Usage. For more details, see the [Bandwidth overview](https://help.webflow.com/hc/en-us/articles/33961410031507-Bandwidth-overview).

#### Optimizing bandwidth usage

To get the best performance and keep bandwidth usage in check, make sure your app serves assets (like images, videos, and files) directly from your app, rather than proxying assets from your site. This helps reduce unnecessary data transfer and ensures your assets are delivered quickly and reliably. See more details in our [optimization tips for Webflow Cloud.](/webflow-cloud/environment/framework-customization)

### Memory

***

## How to view your usage

Usage metrics reset at the start of each billing period. In the Webflow Cloud dashboard, you can view your current request and CPU time usage, and see how close you are to your plan’s limits.

<Steps>
  <Step title="Select a site">
    In your Webflow dashboard, select a site and view the site settings.
  </Step>

  <Step title="Navigate to Usage > Plan usage">
    In the left sidebar, go to <strong>Usage</strong> and select <strong>Plan usage</strong> menu to open the usage dashboard.
  </Step>

  <Step title="Review your usage metrics">
    In the dashboard, you’ll see key metrics like requests, CPU time, and memory usage. You can also track how your usage changes over time and see how close you are to reaching your plan’s limits.

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/913b08132d9856237ce65db49a9b77715f82add34fba6189c9ba7b137bd9ee50/products/webflow-cloud/pages/concepts/assets/usage.png" alt="Webflow Cloud usage dashboard" />
    </Frame>
  </Step>
</Steps>

## Best practices for monitoring usage

* **Check usage regularly:** Review your dashboard at least once per billing cycle.
* **Monitor trends:** Use the dashboard’s charts to spot spikes or unusual patterns.
* **Understand your limits:** Refer to the [pricing and limits page](https://webflow.com/pricing) for details on your plan’s included resources.

## Related resources

* [Webflow Cloud pricing](https://webflow.com/pricing)
* [Webflow Cloud limits](/webflow-cloud/limits)

---

# Limits

> Resource limits and constraints for Webflow Cloud

## Overview

This page lists the resource limits and constraints for Webflow Cloud projects. Use these tables to understand the maximums for projects, environments, assets, storage, and other resources. Limits may vary by plan and are subject to change.

## App limits

### Project limits

| Type                          | Limit                                                          | Description                                                                     |
| :---------------------------- | :------------------------------------------------------------- | :------------------------------------------------------------------------------ |
| Projects per site             | 5 (Free, Basic)<br /> 15 (CMS, Business)<br /> 50 (Enterprise) | Projects are connected to a GitHub repository and contain environments.         |
| GitHub repository connections | 1 per site                                                     | A GitHub repository can only be connected to one project within a Webflow site. |
| Active environments           | 10                                                             | Maximum number of environments per project.                                     |
| Supported frameworks          | Next.js, Astro                                                 | Currently supported web frameworks.                                             |

### Environment limits

| Resource              | Limit      | Notes                               |
| :-------------------- | :--------- | :---------------------------------- |
| Worker size           | 10 MB      | Maximum bundle size per deployment. |
| Worker CPU time       | 30 seconds | Maximum execution time per request. |
| Worker memory         | 128 MB     | Maximum memory per worker instance. |
| Worker startup time   | 400 ms     | Maximum cold start time.            |
| Environment variables | 100        | Maximum per environment.            |

See [Cloudflare Workers documentation](https://developers.cloudflare.com/workers/platform/limits/#memory) for more details.

### Asset limits

| Asset type         | Size limit | Description                           |
| :----------------- | :--------- | :------------------------------------ |
| Images             | 20 MB      | Maximum size per image file.          |
| Videos             | 1 GB       | Maximum size per video file.          |
| 3D Models          | 500 MB     | Maximum size per 3D model file.       |
| Other static files | 20 MB      | Maximum size for other static assets. |

### Request handling limits

| Limit type                     | Value                         |
| :----------------------------- | :---------------------------- |
| Request body size              | 500 MB                        |
| Request headers                | 32 KB total, 16 KB per header |
| Response body size             | Unlimited                     |
| Response headers               | 32 KB total, 16 KB per header |
| Request timeout                | 30 seconds                    |
| URL size                       | 16 KB                         |
| Simultaneous outgoing requests | 6                             |
| Subrequests per request        | 1,000                         |

<Warning>
  Requests exceeding these limits are rejected with a 413 (Request Entity Too Large) error.
</Warning>

### Header behavior limitations

Webflow Cloud's infrastructure enforces specific header behaviors that can override custom settings. These behaviors are:

| Header type                                                                                                   | Direction | Behavior                                                                                             |
| :------------------------------------------------------------------------------------------------------------ | :-------- | :--------------------------------------------------------------------------------------------------- |
| `Cache-Control`                                                                                               | Response  | Always replaced with `private, no-cache`                                                             |
| `Cache-Control`                                                                                               | Request   | Stripped by Webflow Cloud                                                                            |
| `cache-tag`                                                                                                   | Response  | Removed from responses                                                                               |
| `x-wf-usys-gate-group-access`                                                                                 | Response  | Removed from responses                                                                               |
| `x-wf-usys-variant`                                                                                           | Response  | Removed from [Vary header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Vary) |
| [HSTS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Strict-Transport-Security) | Response  | Conditionally added by Webflow                                                                       |

#### Caching implications

Webflow Cloud overrides custom cache headers from your application. Once content is cached, you can't control caching behavior through standard HTTP headers like `Cache-Control`.

This means traditional cache invalidation methods won't work - you'll need to work within Webflow Cloud's caching behavior rather than trying to override it.

### Retention periods

The following table shows how long different types of deployment and log data are retained, based on your Webflow Cloud plan:

| Type                 | Starter, Basic | CMS, Business | Enterprise |
| :------------------- | :------------: | :-----------: | :--------: |
| Previous deployments |     1 hour     |     1 day     |   3 days   |
| Deployment logs      |     1 hour     |     1 day     |   3 days   |
| Runtime logs         |     1 hour     |     1 day     |   3 days   |

## Storage limits

### Bindings

| Feature                                | Limit |
| :------------------------------------- | :---- |
| Maximum bindings per Webflow Cloud app | 5,000 |

### SQLite

| Feature                    | Limit                                                                                                                            |
| :------------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
| Databases per app          | Unlimited                                                                                                                        |
| Maximum database size      | 100MB (Free, Basic, CMS)<br /> 1GB (Business, Enterprise)<br /> [See Pricing page for more details](https://webflow.com/pricing) |
| Queries per invocation     | 1,000                                                                                                                            |
| Columns per table          | 100                                                                                                                              |
| Rows per table             | Unlimited (subject to storage limits)                                                                                            |
| String/BLOB/table row size | 2 MB                                                                                                                             |
| SQL statement length       | 100 KB                                                                                                                           |
| Bound parameters per query | 100                                                                                                                              |
| Arguments per SQL function | 32                                                                                                                               |
| LIKE/GLOB pattern length   | 50 bytes                                                                                                                         |
| SQL query duration         | 30 seconds                                                                                                                       |
| File import size           | 5 GB                                                                                                                             |

### Key Value Store

| Feature                          | Limit                                                                                                                                          |
| :------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
| Namespaces                       | Unlimited                                                                                                                                      |
| Storage per namespace            | 100MB (Free, Basic, CMS)<br /> 500MB (Business)<br /> 2.5GB (Enterprise)<br />[See Pricing page for more details](https://webflow.com/pricing) |
| Reads per day                    | 100K (Free, Basic, CMS)<br /> 500k (Business)<br /> 5M (Enterprise)<br />[See Pricing page for more details](https://webflow.com/pricing)      |
| Writes to different keys per day | 10K (Free, Basic, CMS)<br /> 50k (Business)<br /> 500k (Enterprise)<br />[See Pricing page for more details](https://webflow.com/pricing)      |
| Writes to same key               | 1 per second                                                                                                                                   |
| Operations per invocation        | 1,000                                                                                                                                          |
| Keys per namespace               | Unlimited <br /> (Subject to storage limits)                                                                                                   |
| Key size                         | 512 bytes                                                                                                                                      |
| Key metadata                     | 1,024 bytes                                                                                                                                    |
| Value size                       | 25 MiB                                                                                                                                         |
| Minimum cache TTL (Time to live) | 60 seconds                                                                                                                                     |

### Object Storage

| Feature                           | Limit                                                                                                                                     |   |
| :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | - |
| Buckets per app                   | Unlimited                                                                                                                                 |   |
| Data storage per bucket           | 1GB (Free, Basic, CMS)<br /> 5GB (Business)<br /> 25GB (Enterprise)<br />[See Pricing page for more details](https://webflow.com/pricing) |   |
| Management operations per bucket¹ | 50/sec                                                                                                                                    |   |
| Object key length                 | 1,024 bytes                                                                                                                               |   |
| Object metadata size              | 8,192 bytes                                                                                                                               |   |
| Object size                       | 5 TiB per object                                                                                                                          |   |
| Upload size                       | 5 GiB (multipart uploads supported)                                                                                                       |   |
| Upload parts                      | 10,000                                                                                                                                    |   |
| Concurrent writes to same object  | 1/sec                                                                                                                                     |   |

---

# Storage for Webflow Cloud is now generally available

> Storage for Webflow Cloud is now generally available.

We're excited to announce that storage for Webflow Cloud is now generally available.

With storage, you’re no longer required to connect to external data stores to save or retrieve data. Now, you can use built-in connections to securely store, manage, and access your data right inside your Webflow Cloud project.

Try it out today and start building with real data in minutes.

<CardGroup cols={2}>
  <Card
    title="SQLite"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
    href="/webflow-cloud/storing-data/sqlite"
  >
    Store and manage structured, relational data using a familiar SQL database. Webflow Cloud handles provisioning, scaling, and security, so you can focus on building features.
  </Card>

  <Card
    title="Key Value Store"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DeveloperToolsSDK.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DeveloperToolsSDK.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
    href="/webflow-cloud/storing-data/key-value-store"
  >
    Instantly store and retrieve unstructured or semi-structured data at the edge. Perfect for caching API responses, managing sessions, or saving user preferences.
  </Card>

  <Card
    title="Object Storage"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/App.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/App.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
    href="/webflow-cloud/storing-data/object-storage"
  >
    Upload, store, and serve large files and media directly from your app. Object Storage is scalable, S3-compatible, and has no egress fees.
  </Card>
</CardGroup>

---

# Introducing storage for Webflow Cloud

> Webflow Cloud now supports storage for your apps, allowing you to store and manage data in a secure and scalable way.

We’re excited to announce that storage is now available in Webflow Cloud.

With storage, you’re no longer limited to stateless apps or forced to connect to external APIs just to save or retrieve data. Now, you can use built-in bindings to securely store, manage, and access your data right inside your Webflow Cloud project.

## What’s new?

You can now choose from multiple storage options, each designed for different types of data and use cases:

<CardGroup cols={2}>
  <Card
    title="SQLite"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CMS.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CMS.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
    href="/webflow-cloud/storing-data/sqlite"
  >
    Store and manage structured, relational data using a familiar SQL database. Webflow Cloud handles provisioning, scaling, and security, so you can focus on building features.
  </Card>

  <Card
    title="Key Value Store"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DeveloperToolsSDK.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DeveloperToolsSDK.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
    href="/webflow-cloud/storing-data/key-value-store"
  >
    Instantly store and retrieve unstructured or semi-structured data at the edge. Perfect for caching API responses, managing sessions, or saving user preferences.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card
    title="Object Storage"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/App.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/App.svg" alt="" className="block dark:hidden" />
        </>
    }
    iconPosition="left"
    iconSize="12"
    href="/webflow-cloud/storing-data/object-storage"
  >
    Upload, store, and serve large files and media directly from your app. Object Storage is scalable, S3-compatible, and has no egress fees.
  </Card>
</CardGroup>

## Why it matters

* **More power, less hassle** <br />
  Build dynamic, data-driven apps without worrying about external databases or third-party APIs.

* **Secure and scalable** <br />
  All storage is managed by Webflow Cloud, with built-in security, backups, and scaling.

* **Easy to use** <br />
  Declare a binding in your `wrangler.json` file, and your app can read and write data using environment variables—no secret keys or manual setup required.

## How to get started

* Check out the [Storing data in Webflow Cloud](/webflow-cloud/storing-data/overview) overview for a quick start.
* Dive into the guides for [SQLite](/webflow-cloud/storing-data/sqlite), [Key Value Store](/webflow-cloud/storing-data/key-value-store), and [Object Storage](/webflow-cloud/storing-data/object-storage).
* Add a SQLite database to your app using the [quickstart](/webflow-cloud/add-sqlite).

***

---

# DevLink

> DevLink is the bridge between design and code for teams working in Webflow.

DevLink is the interface between external codebases and Webflow.

With DevLink, you can:

<CardGroup cols={2}>
  <Card
    title="Import React components to Webflow"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/ComponentsCode.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/ComponentsCode.svg" alt="" className="light-icon" />
      </>
    }
    href="/code-components/introduction"
  >
    Bring your custom React components into Webflow.
  </Card>

  <Card title="Export Webflow components to React" iconPosition="left" iconSize="10" icon="fa-brands fa-react" href="/devlink/docs/component-export">
    Transform your Webflow designs into React code.
  </Card>

  <Card
    title="Deploy apps to Webflow Cloud"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CloudHosting.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CloudHosting.svg" alt="" className="light-icon" />
      </>
    }
    href="/webflow-cloud/intro"
  >
    Host Next.js and Astro apps on Webflow Cloud.
  </Card>
</CardGroup>

***

## Who is DevLink for?

DevLink is ideal for **front-end developers** building custom UI components and applications in React, and **Webflow designers** who want to maintain design consistency between their apps and Webflow sites.

Typical use cases include:

* **Custom Webflow enhancements:**<br />
  Add bespoke functionality like multi-step forms, data visualizations, or interactive dashboards that go beyond native Webflow elements.
* **Design system consistency:**<br />
  Ensure your React component library is consistently represented and usable within Webflow, maintaining a unified design system.
* **Rapid prototyping and development:**<br />
  Quickly prototype new features in Webflow, then export designs as React components for further development.
* **Collaborative workflows:**<br />
  Facilitate smooth handoffs and improve teamwork between designers and developers.
* **Simplified deployment:**<br />
  Publish client-side React applications directly to [Webflow Cloud](/webflow-cloud/intro) for easy hosting and management.

***

## Get started with DevLink

To get started with DevLink, you'll need a Webflow account and project, site Admin or Owner permissions, and a React development environment.

Then, choose how you want to use DevLink.

<CardGroup cols={2}>
  <Card
    title="Import React components into Webflow"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
          <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/ComponentsCode.svg" alt="" className="dark-icon" />
          <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/ComponentsCode.svg" alt="" className="light-icon" />
        </>
      }
    href="/code-components/introduction/quick-start"
  >
    Learn how to bring your custom React components into Webflow.
  </Card>

  <Card
    title="Export Webflow components as React components"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
          <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DevLink.svg" alt="" className="dark-icon" />
          <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DevLink.svg" alt="" className="light-icon" />
        </>
      }
    href="/devlink/docs/quick-start/quick-start-component-export"
  >
    Discover how to transform your Webflow designs into React code.
  </Card>

  <Card
    title="Deploy web applications to Webflow Cloud"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
          <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CloudHosting.svg" alt="" className="dark-icon" />
          <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CloudHosting.svg" alt="" className="light-icon" />
        </>
      }
    href="/webflow-cloud/getting-started"
  >
    Understand how to host your external web apps on Webflow Cloud.
  </Card>
</CardGroup>

---

# Getting Started with Exported Components

> Export your Webflow components to a React project with DevLink

In this guide, you'll learn how to configure DevLink and export components to a React project. While this guide uses Next.js, Code Export works with any React-based framework.

#### Before you start

Before running this quickstart, make sure you have:

* A Webflow account and Webflow site with components to export. Or, use a [Code Export template](https://webflow.com/made-in-webflow/devlink?cloneable=true) from the Webflow marketplace. DevLink templates are pre-configured with components and styles optimized for React.
* Node.js v20.0.0 or higher and `npm` installed
* Basic familiarity with React

## 1. Configure DevLink in your app

<Steps>
  <Step title="Create a Next.js project">
    To start with a fresh Next.js project, run the following command in your terminal:

    ```bash
    npx create-next-app@latest my-devlink-app
    cd my-devlink-app
    ```

    Follow the prompts to configure your project with your preferred options.
  </Step>

  <Step title="Install the Webflow CLI">
    In your React project, install the Webflow CLI as a development dependency:

    ```bash
    npm install -D @webflow/webflow-cli
    ```
  </Step>

  <Step title="Authenticate with Webflow">
    DevLink requires API access to your site to export your design system. To grant access, run the following command in your terminal to start an authentication workflow:

    ```bash
    webflow auth login
    ```

    This command will open an authentication screen in your browser. Follow the prompts to authenticate with Webflow. Once authenticated, the CLI will create a `.env` file in the root of your project with your Site ID and API token.

    <Warning title="Existing .env file">
      If you already have a `.env` file in your project, the CLI will require you to add a `--force` flag to make changes.
    </Warning>
  </Step>

  <Step title="Configure DevLink settings">
    Create a `webflow.json` file in the root of your project and paste the following configuration:

    ```json title="webflow.json"
    {
      "devlink":{
        "host": "https://api.webflow.com",
        "rootDir": "./devlink",
        "cssModules": true,
        "relativeHrefRoot": "/"
      }
    }
    ```

    This configuration file tells DevLink where to export your components and how to handle CSS modules. Learn more about the configuration file in the [configuration file reference](/devlink/docs/component-export/installation#create-a-configuration-file).
  </Step>
</Steps>

## 2. Prepare your Webflow components

In your Webflow project, prepare any components you want to export to your React project by:

* Selecting an element or group of elements
* Right-clicking and selecting "Create Component"
* Naming your component (use clear, descriptive names)

<Frame>
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/ea77e26ac048f7f3e87a6049ad86965c35148ba93910c3c9abe5aefc950c26b1/products/devlink/pages/exported-components/assets/webflow-component.png" alt="Creating a Component in Webflow" width="500px" />
</Frame>

<Note>
  Only elements that have been converted to [Components](https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview) can be exported via DevLink.
</Note>

## 3. Export and use your components

<Steps>
  <Step title="Export your components">
    Run the DevLink `sync` command to export your Webflow components to your React project:

    ```bash
     webflow devlink sync
    ```

    This will create a `devlink` directory in your project containing:

    * React components for each of your Webflow components
    * CSS modules for component-specific styling
    * A global CSS file for shared styles
    * A `DevLinkProvider` component for handling interactions
  </Step>

  <Step title="Add the global DevLink styles">
    <Tip>
      Many of the code snippets import from the DevLink directory with the `@/devlink` alias. See the [troubleshooting guide](/devlink/docs/component-export/usage/troubleshooting#devlink-not-found) for more information on how to set this up in your project.
    </Tip>

    In your `app/layout.tsx` file, import the global CSS file generated by DevLink to ensure all Webflow components have access to necessary styles and Webflow style resets. Additionally, if your Webflow components have interactions set on elements, wrap your application in the `DevLinkProvider` component to enable those interactions at runtime:

    ```tsx title="app/layout.tsx"
    import './globals.css';
    import "@/devlink/global.css";
    import { DevLinkProvider } from '@/devlink/DevLinkProvider';

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <DevLinkProvider>{children}</DevLinkProvider>
          </body>
        </html>
      );
    }
    ```
  </Step>

  <Step title="Use your components">
    Now you can import and use your Webflow components in your application. In this particular example, it uses three components exported from Webflow via DevLink: `Hero`, `Card`, and `Button`. You can use them in your application like so:

    ```tsx title="app/page.tsx"
    import { Button } from '@/devlink/Button';
    import { Card } from '@/devlink/Card';
    import { Hero } from '@/devlink/Hero';

    export default function Home() {
      return (
        <main>
          <Hero
            heading="Welcome to My App"
            subheading="Built with Webflow and DevLink"
          />
          <Card
            title="DevLink Card"
            description="This card was designed in Webflow"
          >
            <Button>Get Started</Button>
          </Card>
        </main>
      );
    }
    ```

    <Note>
      The props set on these React components depend on the design and properties set up on the Webflow components
    </Note>
  </Step>

  <Step title="Start your development server">
    Run your application to see your Webflow components in action:

    ```bash
    npm run dev
    ```

    Visit `http://localhost:3000` in your browser to see your application with the Webflow components.
  </Step>
</Steps>

## Updating your components

When you make changes to your components in Webflow, simply run the sync command again to update them in your React project:

```bash
webflow devlink sync
```

This will update all your components while preserving any custom code or props you've added in your React application.

## Common issues and solutions

<AccordionGroup>
  <Accordion title="Authentication Error">
    If you encounter authentication issues:

    * Verify your API token has the correct permissions
    * Ensure your environment variables are properly loaded
    * Check that the `webflow.json` file is in the root directory
  </Accordion>

  <Accordion title="Missing Styles">
    If your components don't look the same as in Webflow:

    * Ensure you've imported `global.css` in your application
    * Import any additional fonts used on your site to your layout file
    * Verify that the `DevLinkProvider` is properly set up
    * Check for CSS conflicts with other styles in your project
  </Accordion>

  <Accordion title="Component Not Found">
    If a component isn't available after syncing:

    * Make sure it's properly created as a Component in Webflow
    * Check if it uses only [supported elements](/devlink/docs/component-export/design-guidelines/component-architecture#supported-elements)
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={1}>
  <Card
    title="Deploy with Webflow Cloud"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CloudUpload.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CloudUpload.svg" alt="" className="block dark:hidden" />
        </>
    }
    href="/webflow-cloud/getting-started"
  >
    Learn how to deploy your React application with Webflow Cloud.
  </Card>

  <Card
    title="Design Guidelines"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Interactions.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Interactions.svg" alt="" className="block dark:hidden" />
        </>
    }
    href="/devlink/docs/component-export/design-guidelines/component-architecture"
  >
    Learn how DevLink preserves styling and interactions.
  </Card>

  <Card
    title="Props"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/ComponentsCode.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/ComponentsCode.svg" alt="" className="block dark:hidden" />
        </>
    }
    href="/devlink/docs/component-export/design-guidelines/props-slots"
  >
    Learn how to use props to customize your components.
  </Card>
</CardGroup>

---

# Component Export

> Bridge design and code by exporting Webflow components to React applications.

With DevLink, you can export Webflow designs directly to React. Designers create reusable components visually in Webflow, and developers use DevLink to bring those components into React projects, including Webflow Cloud apps, with ease.

<CardGroup cols={2}>
  <Card
    title="Design visually"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Favicon.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Favicon.svg" alt="" className="light-icon" />
      </>
    }
  >
    Create components using Webflow's visual editor with no code required.
  </Card>

  <Card
    title="Export to React"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/ComponentsCode.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/ComponentsCode.svg" alt="" className="light-icon" />
      </>
    }
  >
    Transform Webflow components into React components with a single command.
  </Card>

  <Card
    title="Preserve design systems"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Styles.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Styles.svg" alt="" className="light-icon" />
      </>
    }
  >
    Preserve styles, variables, components and interactions from your Webflow design.
  </Card>

  <Card
    title="Stay in sync"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DevLink.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DevLink.svg" alt="" className="light-icon" />
      </>
    }
  >
    Update your design system in Webflow, then sync changes to your codebase.
  </Card>
</CardGroup>

***

## Get started with Exported Components

<Card
  title="Get Started"
  iconPosition="left"
  iconSize="12"
  icon={
  <>
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CirclePlay.svg" alt="" className="dark-icon" />
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CirclePlay.svg" alt="" className="light-icon" />
  </>
}
>
  Follow the [Getting Started](/devlink/docs/quick-start/quick-start-component-export) guide to configure your project for DevLink and export your components.

  <br />

  <div>
    <Button href="/devlink/docs/quick-start/quick-start-component-export">
      Get Started
    </Button>
  </div>
</Card>

***

## Working with Exported Components

DevLink translates your Webflow components into React components through a simple workflow:

<Steps>
  <Step title="Design in Webflow">
    Create styles, variables, and components in Webflow's best-in-class visual editor.
  </Step>

  <Step title="Configure DevLink">
    [Set up the connection](/devlink/docs/component-export/installation) between your Webflow project and your React application.
  </Step>

  <Step title="Sync your design system">
    Use the Webflow CLI to export and [sync styles, variables, and components](/devlink/docs/component-export/whats-exported) to your project.
  </Step>

  <Step title="Use your design system in your React app">
    Import the global styles and generated React components into your application code.
  </Step>

  <Step title="Add functionality">
    Enhance the components with [custom logic, state, and interactivity.](/devlink/usage/framework-guides)
  </Step>
</Steps>

## Learn more

Explore to use Exported Components in your React projects:

<CardGroup cols={2}>
  <Card
    title="Design Guidelines"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DevLink.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DevLink.svg" alt="" className="light-icon" />
      </>
    }
    href="/devlink/docs/component-export/design-guidelines/component-architecture"
  >
    Learn how to structure and design components in Webflow for clean export to React.

    <br />

    <Button href="/devlink/docs/component-export/design-guidelines/component-architecture">
      Learn more
    </Button>
  </Card>

  <Card
    title="Usage Documentation"
    iconPosition="left"
    iconSize="12"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/ComponentsCode.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/ComponentsCode.svg" alt="" className="light-icon" />
    </>
  }
    href="/devlink/usage/framework-guides"
  >
    Discover how to integrate and extend DevLink components in your React projects.

    <br />

    <Button href="/devlink/usage/framework-guides">
      Learn more
    </Button>
  </Card>
</CardGroup>

---

# Installation

> Learn how to configure your React project for exported components.

This reference covers the configuration required to export Webflow components into a React project using DevLink.

## Install the Webflow CLI

Install the CLI as a development dependency to your React project to bundle and publish your component library:

```bash
npm i --save-dev @webflow/webflow-cli
```

<Note title="DevLink supports React v16.18.0 and higher">
  The minimum version of React supported to use exported components is v16.18.0.
</Note>

## Create a configuration file

DevLink looks for a `webflow.json` file in the root of your project, which defines settings for DevLink setup and sync.

<CodeBlocks>
  ```json title="webflow.json"
  {
    "devlink": {
      "rootDir": "./devlink",
      "cssModules": true,
      "fileExtensions": {
        "js": "jsx"
      }
    }
  }
  ```

  ```javascript title=".webflowrc.js"
  module.exports = {
    devlink: {
      directory: "./devlink",
      importGlobalCSS: true
    }
  }
  ```
</CodeBlocks>

<Note>
  `webflow.json` is a newer configuration file that supports configuration for Webflow Cloud and DevLink. DevLink also supports the older `.webflowrc.js` file for backwards compatibility.
</Note>

### Configuration options

| Option             | Description                                           | Default                              |
| :----------------- | :---------------------------------------------------- | :----------------------------------- |
| `host`             | Webflow API host URL                                  | `https://api.webflow.com`            |
| `rootDir`          | Directory to export components into                   | `./devlink`                          |
| `siteId`           | Webflow site ID                                       | `process.env.WEBFLOW_SITE_ID`        |
| `authToken`        | Webflow API authentication token                      | `process.env.WEBFLOW_SITE_API_TOKEN` |
| `cssModules`       | Enable CSS modules for component styles               | `true`                               |
| `allowTelemetry`   | Allow anonymous usage analytics                       | `true`                               |
| `envVariables`     | Inject environment variables into exported components | `{}`                                 |
| `components`       | Regex pattern to match components to export           | `.*`                                 |
| `overwriteModule`  | Whether to overwrite the module file                  | `true`                               |
| `fileExtensions`   | File extensions for exported components               | `{ js: ".js", css: ".css" }`         |
| `skipTagSelectors` | Exclude tag/ID/attribute selectors from global CSS    | `false`                              |
| `relativeHrefRoot` | Control how relative `href` attributes are resolved   | `/`                                  |

While DevLink will try to assume reasonable defaults for most of the settings, you can specify certain options to customize the behavior of DevLink management and setup.

#### `skipTagSelectors`

When `true`, DevLink filters out global CSS rules with certain selectors, producing a smaller `global.css` file. Specifically, it removes:

{/* <!-- vale off --> */}

* Tag selectors (e.g., `div`, `p`, `h1`)
* ID selectors (e.g., `#myId`)
* Attribute selectors (e.g., `[type="text"]`)
* Pseudo-class selectors (e.g., `:hover`, `:focus`) - except for `:root`

{/* <!-- vale on --> */}

This is useful when you only want class-based styles from Webflow and prefer to exclude global tag defaults. Empty rules are dropped entirely.

<Tip title="Define height/widths of parent elements">
  When using `skipTagSelectors: true`, ensure parent elements of DevLink components have defined heights/widths, or set height: 100% on your HTML and body elements to allow proper rendering of  components.
</Tip>

#### `relativeHrefRoot`

Controls how relative `href` values are rewritten in exported Link and Image components.

| Value            | Description                                 | Notes               |
| :--------------- | :------------------------------------------ | :------------------ |
| `false`          | No modification (export as-is)              | Default behavior    |
| `/`              | Treat all relative paths as root-relative   |                     |
| **A string URL** | Rewrite all relative paths as absolute URLs | Must be a valid URL |

##### Example:

* With `"/"`:
  * Page link to "About" → `href="/about"`
  * Section link → `href="#contact-section"`
  * CMS page link → `href="/blog/my-blog-post"`

* With `"https://my-site.com"`:
  * Page link to "About" → `href="https://my-site.com/about"`
  * Section link → `href="https://my-site.com#contact-section"`
  * CMS page link → `href="https://my-site.com/blog/my-blog-post"`

#### `envVariables`

Inject environment variables into components. Useful for APIs like Maps or Recaptcha.

```json title="webflow.json"
{
  "devlink": {
    "envVariables": {
      "GOOGLE_MAPS_API_KEY": process.env.MY_GOOGLE_MAPS_API_KEY,
      "GOOGLE_RECAPTCHA_API_KEY": "MY_GOOGLE_RECAPTCHA_API_KEY"
    }
  }
}
```

#### `fileExtensions`

Customize the extensions used for exported component files.

```json title="webflow.json"
{
  "devlink": {
    "fileExtensions": {
      "js": ".jsx",
      "css": ".less"
    }
```

## Next steps

<CardGroup cols={2}>
  <Card title="Styling Components" href="/devlink/usage/styling-and-theming-overrides">
    Learn how to style components for reliable export
  </Card>
</CardGroup>

---

# What DevLink Exports

> A detailed breakdown of the files and configurations exported by DevLink for use in React projects.

Export your files from Webflow with DevLink and import them into your React project

```bash
npx webflow devlink sync
```

DevLink will generate a set of files designed for seamless integration into your React application. These exports typically reside in a `devlink` folder within your project, providing a clear structure for your design system assets.

## Exported files

Here's a breakdown of what DevLink creates and exports:

<Accordion title="React components">
  For each Webflow component you export, DevLink generates a ready-to-use React component. These exports include:

  * **A JavaScript implementation**: the React component itself, complete with built-in Webflow utilities and styles.
  * **TypeScript definitions**: to provide type safety and autocompletion in modern editors.
  * **Scoped CSS modules**: ensuring styles are isolated and easy to maintain.

  This means you can drop the exported component straight into your React project and use it like any other React component; all while keeping the structure, styles, and functionality defined in Webflow.

  <CodeBlocks>
    ```jsx title="Footer.jsx" maxLines=15
    "use client";
    import React from "react";
    import * as _Builtin from "./_Builtin";   // Webflow built-in primitives (Block, Link, Image, etc.)
    import * as _utils from "./utils";        // Utility functions, including className helpers
    import _styles from "./Footer.module.css"; // Scoped CSS module for styles

    // React component with props
    export function Footer({ as: _Component = _Builtin.Block }) {
      return (
        // `as` prop lets you override the top-level wrapper element
        <_Component className={_utils.cx(_styles, "footer-wrap")} tag="div">
          
          {/* Nested element: Block */}
          <_Builtin.Block tag="div">
            
            {/* Link element with attributes preserved from Webflow */}
            <_Builtin.Link
              className={_utils.cx(_styles, "webflow-link")} // Scoped CSS class applied
              button={false}
              block="inline"
              options={{
                href: "https://webflow.com/",   // Preserved link attribute
                target: "_blank",
              }}
            >
              {/* Image element with src, width, height, alt carried over */}
              <_Builtin.Image
                className={_utils.cx(_styles, "webflow-logo-tiny")}
                width="15"
                height="auto"
                loading="auto"
                alt=""
                src="https://cdn.prod.website-files.com/686431ad597a0e8140e9a6b2/686431ad597a0e8140e9a70e_webflow-w-small%402x.png"
              />
              {/* Static text content preserved */}
              <_Builtin.Block
                className={_utils.cx(_styles, "paragraph-tiny")}
                tag="div"
              >
                {"Powered by Webflow"}
              </_Builtin.Block>
            </_Builtin.Link>
          </_Builtin.Block>

          {/* Another nested Block containing multiple Link children */}
          <_Builtin.Block className={_utils.cx(_styles, "footer-links")} tag="div">
            <_Builtin.Link
              className={_utils.cx(_styles, "footer-item")}
              button={false}
              block=""
              options={{
                href: "https://www.facebook.com/webflow/",
                target: "_blank",
              }}
            >
              {"Facebook"}  {/* Static text content */}
            </_Builtin.Link>
            <_Builtin.Link
              className={_utils.cx(_styles, "footer-item")}
              button={false}
              block=""
              options={{
                href: "https://twitter.com/webflow",
                target: "_blank",
              }}
            >
              {"Twitter"}
            </_Builtin.Link>
            <_Builtin.Link
              className={_utils.cx(_styles, "footer-item")}
              button={false}
              block=""
              options={{
                href: "https://www.instagram.com/webflowapp/",
                target: "_blank",
              }}
            >
              {"Instagram"}
            </_Builtin.Link>
          </_Builtin.Block>
        </_Component>
      );
    }
    ```

    ```typescript title="Footer.d.ts" maxLines=15
    /*
    * This file contains the TypeScript definition for the Footer component providing type safety and autocompletion for your exported components.
    */
    import * as React from "react";

    declare function Footer(props: { as?: React.ElementType }): React.JSX.Element;
    ```

    ```css title="Footer.module.css" maxLines=15
    .footer-wrap {
    display: flex;
    padding: 40px 50px;
    justify-content: space-between;
    align-items: center;
    }

    @media screen and (max-width: 767px) {
    .footer-wrap {
      flex-direction: column;
      text-align: center;
    }
    }

    @media screen and (max-width: 479px) {
    .footer-wrap {
      flex-direction: column;
    }
    }

    .webflow-link {
    display: flex;
    align-items: center;

    opacity: 0.5;

    transition: opacity 400ms ease;

    text-decoration: none;
    text-transform: uppercase;
    }

    .webflow-link:hover {
    opacity: 1;
    }

    .webflow-link:active {
    opacity: 0.8;
    }

    @media screen and (max-width: 767px) {
    .webflow-link {
      margin-bottom: 15px;
    }
    }

    .webflow-logo-tiny {
    margin-top: -2px;
    margin-right: 8px;
    }

    .paragraph-tiny {
    font-size: 12px;
    line-height: 20px;
    }

    .paragraph-tiny.cc-paragraph-tiny-light {
    opacity: 0.7;
    }

    .footer-links {
    display: flex;
    margin-right: -20px;
    align-items: center;
    }

    @media screen and (max-width: 767px) {
    .footer-links {
      flex-direction: column;
    }
    }

    .footer-item {
    margin-right: 20px;
    margin-left: 20px;

    opacity: 0.6;

    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    }

    .footer-item:hover {
    opacity: 0.9;
    }

    .footer-item:active {
    opacity: 0.8;
    }

    @media screen and (max-width: 767px) {
    .footer-item {
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 0px;
    }
    }
    ```
  </CodeBlocks>

  Inside the generated React component, you'll find:

  * **Props**: including an `as` prop for overriding the top-level wrapper element.
  * **Scoped classes**: Webflow classes mapped to CSS modules with a utility function (`_utils.cx`).
  * **Nested elements**: a JSX hierarchy that mirrors your Webflow design, built with Webflow's primitives ( `Block`, `Link`, `Image`, etc.).
  * **Assets and media**: images, dimensions, alt text, and link attributes are carried over automatically.
  * **Text content**: any static text from your Webflow design is included in the output.

  <Tip>
    This means what you design in Webflow is translated into React code, with flexibility for developers to integrate, extend, and style as needed.
  </Tip>
</Accordion>

<Accordion title="Global Styles">
  When you export with DevLink, you also get a **global stylesheet** that makes your React app render Webflow components consistently with what you designed.

  The global stylesheet normalizes browser defaults, provides Webflow's core utility classes, and sets responsive breakpoints—so exported components look right the moment you import them.

  <CodeBlocks>
    ```css title="global.css" maxLines=15
    /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
    /**
     * 1. Set default font family to sans-serif.
     * 2. Prevent iOS and IE text size adjust after device orientation change,
     *    without disabling user zoom.
     */
    html {
      font-family: sans-serif;
      /* 1 */
      -ms-text-size-adjust: 100%;
      /* 2 */
      -webkit-text-size-adjust: 100%;
      /* 2 */
    }
    /**
     * Remove default margin.
     */
    body {
      margin: 0;
    }
    /* HTML5 display definitions
       ========================================================================== */
    /**
     * Correct `block` display not defined for any HTML5 element in IE 8/9.
     * Correct `block` display not defined for `details` or `summary` in IE 10/11
     * and Firefox.
     * Correct `block` display not defined for `main` in IE 11.
     */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    menu,
    nav,
    section,
    summary {
      display: block;
    }
    /**
     * 1. Correct `inline-block` display not defined in IE 8/9.
     * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
     */
    audio,
    canvas,
    progress,
    video {
      display: inline-block;
      /* 1 */
      vertical-align: baseline;
      /* 2 */
    }
    /**
     * Prevent modern browsers from displaying `audio` without controls.
     * Remove excess height in iOS 5 devices.
     */
    audio:not([controls]) {
      display: none;
      height: 0;
    }
    /**
     * Address `[hidden]` styling not present in IE 8/9/10.
     * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
     */
    [hidden],
    template {
      display: none;
    }
    /* Links
       ========================================================================== */
    /**
     * Remove the gray background color from active links in IE 10.
     */
    a {
      background-color: transparent;
    }
    /**
     * Improve readability of focused elements when they are also in an
     * active/hover state.
     */
    a:active,
    a:hover {
      outline: 0;
    }
    /* Text-level semantics
       ========================================================================== */
    /**
     * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
     */
    abbr[title] {
      border-bottom: 1px dotted;
    }
    /**
     * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
     */
    b,
    strong {
      font-weight: bold;
    }
    /**
     * Address styling not present in Safari and Chrome.
     */
    dfn {
      font-style: italic;
    }
    /**
     * Address variable `h1` font-size and margin within `section` and `article`
     * contexts in Firefox 4+, Safari, and Chrome.
     */
    h1 {
      font-size: 2em;
      margin: 0.67em 0;
    }
    /**
     * Address styling not present in IE 8/9.
     */
    mark {
      background: #ff0;
      color: #000;
    }
    /**
     * Address inconsistent and variable font size in all browsers.
     */
    small {
      font-size: 80%;
    }
    /**
     * Prevent `sub` and `sup` affecting `line-height` in all browsers.
     */
    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    sup {
      top: -0.5em;
    }
    sub {
      bottom: -0.25em;
    }
    /* Embedded content
       ========================================================================== */
    /**
     * Remove border when inside `a` element in IE 8/9/10.
     */
    img {
      border: 0;
    }
    /**
     * Correct overflow not hidden in IE 9/10/11.
     */
    svg:not(:root) {
      overflow: hidden;
    }
    /* Grouping content
       ========================================================================== */
    /**
     * Address margin not present in IE 8/9 and Safari.
     */
    figure {
      margin: 1em 40px;
    }
    /**
     * Address differences between Firefox and other browsers.
     */
    hr {
      box-sizing: content-box;
      height: 0;
    }
    /**
     * Contain overflow in all browsers.
     */
    pre {
      overflow: auto;
    }
    /**
     * Address odd `em`-unit font size rendering in all browsers.
     */
    code,
    kbd,
    pre,
    samp {
      font-family: monospace, monospace;
      font-size: 1em;
    }
    /* Forms
       ========================================================================== */
    /**
     * Known limitation: by default, Chrome and Safari on OS X allow very limited
     * styling of `select`, unless a `border` property is set.
     */
    /**
     * 1. Correct color not being inherited.
     *    Known issue: affects color of disabled elements.
     * 2. Correct font properties not being inherited.
     * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
     */
    button,
    input,
    optgroup,
    select,
    textarea {
      color: inherit;
      /* 1 */
      font: inherit;
      /* 2 */
      margin: 0;
      /* 3 */
    }
    /**
     * Address `overflow` set to `hidden` in IE 8/9/10/11.
     */
    button {
      overflow: visible;
    }
    /**
     * Address inconsistent `text-transform` inheritance for `button` and `select`.
     * All other form control elements do not inherit `text-transform` values.
     * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
     * Correct `select` style inheritance in Firefox.
     */
    button,
    select {
      text-transform: none;
    }
    /**
     * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
     *    and `video` controls.
     * 2. Correct inability to style clickable `input` types in iOS.
     * 3. Improve usability and consistency of cursor style between image-type
     *    `input` and others.
     * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
     *    specificity and defer to the .w-button selector
     */
    button,
    html input[type="button"],
    input[type="reset"] {
      -webkit-appearance: button;
      /* 2 */
      cursor: pointer;
      /* 3 */
    }
    /**
     * Re-set default cursor for disabled elements.
     */
    button[disabled],
    html input[disabled] {
      cursor: default;
    }
    /**
     * Remove inner padding and border in Firefox 4+.
     */
    button::-moz-focus-inner,
    input::-moz-focus-inner {
      border: 0;
      padding: 0;
    }
    /**
     * Address Firefox 4+ setting `line-height` on `input` using `!important` in
     * the UA stylesheet.
     */
    input {
      line-height: normal;
    }
    /**
     * It's recommended that you don't attempt to style these elements.
     * Firefox's implementation doesn't respect box-sizing, padding, or width.
     *
     * 1. Address box sizing set to `content-box` in IE 8/9/10.
     * 2. Remove excess padding in IE 8/9/10.
     */
    input[type='checkbox'],
    input[type='radio'] {
      box-sizing: border-box;
      /* 1 */
      padding: 0;
      /* 2 */
    }
    /**
     * Fix the cursor style for Chrome's increment/decrement buttons. For certain
     * `font-size` values of the `input`, it causes the cursor style of the
     * decrement button to change from `default` to `text`.
     */
    input[type='number']::-webkit-inner-spin-button,
    input[type='number']::-webkit-outer-spin-button {
      height: auto;
    }
    /**
     * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
     * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
     *    (similar to normalize.css >=4.0.0)
     */
    input[type='search'] {
      -webkit-appearance: none;
      /* 1 */
    }
    /**
     * Remove inner padding and search cancel button in Safari and Chrome on OS X.
     * Safari (but not Chrome) clips the cancel button when the search input has
     * padding (and `textfield` appearance).
     */
    input[type='search']::-webkit-search-cancel-button,
    input[type='search']::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    /**
     * Define consistent border, margin, and padding.
     */
    fieldset {
      border: 1px solid #c0c0c0;
      margin: 0 2px;
      padding: 0.35em 0.625em 0.75em;
    }
    /**
     * 1. Correct `color` not being inherited in IE 8/9/10/11.
     * 2. Remove padding so people aren't caught out if they zero out fieldsets.
     */
    legend {
      border: 0;
      /* 1 */
      padding: 0;
      /* 2 */
    }
    /**
     * Remove default vertical scrollbar in IE 8/9/10/11.
     */
    textarea {
      overflow: auto;
    }
    /**
     * Don't inherit the `font-weight` (applied by a rule above).
     * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
     */
    optgroup {
      font-weight: bold;
    }
    /* Tables
       ========================================================================== */
    /**
     * Remove most spacing between table cells.
     */
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    td,
    th {
      padding: 0;
    }




    /* ==========================================================================
       Start of base Webflow CSS - If you're looking for some ultra-clean CSS, skip the boilerplate and see the unminified code below.
       ========================================================================== */


    @font-face {
      font-family: 'webflow-icons';
      src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    [class^="w-icon-"],
    [class*=" w-icon-"] {
      /* use !important to prevent issues with browser extensions that change fonts */
      font-family: 'webflow-icons' !important;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .w-icon-slider-right:before {
      content: "\e600";
    }
    .w-icon-slider-left:before {
      content: "\e601";
    }
    .w-icon-nav-menu:before {
      content: "\e602";
    }
    .w-icon-arrow-down:before,
    .w-icon-dropdown-toggle:before {
      content: "\e603";
    }
    .w-icon-file-upload-remove:before {
      content: "\e900";
    }
    .w-icon-file-upload-icon:before {
      content: "\e903";
    }
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    html {
      height: 100%;
    }
    body {
      margin: 0;
      min-height: 100%;
      background-color: #fff;
      font-family: Arial, sans-serif;
      font-size: 14px;
      line-height: 20px;
      color: #333;
    }
    img {
      max-width: 100%;
      vertical-align: middle;
      display: inline-block;
    }
    html.w-mod-touch * {
      background-attachment: scroll !important;
    }
    .w-block {
      display: block;
    }
    .w-inline-block {
      max-width: 100%;
      display: inline-block;
    }
    .w-clearfix:before,
    .w-clearfix:after {
      content: " ";
      display: table;
      grid-column-start: 1;
      grid-row-start: 1;
      grid-column-end: 2;
      grid-row-end: 2;
    }
    .w-clearfix:after {
      clear: both;
    }
    .w-hidden {
      display: none;
    }
    .w-button {
      display: inline-block;
      padding: 9px 15px;
      background-color: #3898EC;
      color: white;
      border: 0;
      line-height: inherit;
      text-decoration: none;
      cursor: pointer;
      border-radius: 0;
    }
    input.w-button {
      -webkit-appearance: button;
    }
    html[data-w-dynpage] [data-w-cloak] {
      color: transparent !important;
    }
    .w-code-block {
      margin: unset;
    }
    pre.w-code-block code {
      all: inherit;
    }
    .w-optimization {
      display: contents;
    }
    .w-webflow-badge,
    .w-webflow-badge > img {
      box-sizing: unset;
      width: unset;
      height: unset;
      max-height: unset;
      max-width: unset;
      min-height: unset;
      min-width: unset;
      margin: unset;
      padding: unset;
      float: unset;
      clear: unset;
      border: unset;
      border-radius: unset;
      background: unset;
      background-image: unset;
      background-position: unset;
      background-size: unset;
      background-repeat: unset;
      background-origin: unset;
      background-clip: unset;
      background-attachment: unset;
      background-color: unset;
      box-shadow: unset;
      transform: unset;
      transition: unset;
      direction: unset;
      font-family: unset;
      font-weight: unset;
      color: unset;
      font-size: unset;
      line-height: unset;
      font-style: unset;
      font-variant: unset;
      text-align: unset;
      letter-spacing: unset;
      text-decoration: unset;
      text-indent: unset;
      text-transform: unset;
      list-style-type: unset;
      text-shadow: unset;
      vertical-align: unset;
      cursor: unset;
      white-space: unset;
      word-break: unset;
      word-spacing: unset;
      word-wrap: unset;
    }
    .w-webflow-badge {
      position: fixed !important;
      display: inline-block !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 2147483647 !important;
      top: auto !important;
      right: 12px !important;
      bottom: 12px !important;
      left: auto !important;
      color: #aaadb0 !important;
      background-color: #fff !important;
      border-radius: 3px !important;
      padding: 6px !important;
      font-size: 12px !important;
      line-height: 14px !important;
      text-decoration: none !important;
      transform: none !important;
      margin: 0 !important;
      width: auto !important;
      height: auto !important;
      overflow: unset !important;
      white-space: nowrap;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }
    .w-webflow-badge > img {
      position: unset;
      display: inline-block !important;
      visibility: unset !important;
      opacity: 1 !important;
      vertical-align: middle !important;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: bold;
      margin-bottom: 10px;
    }
    h1 {
      font-size: 38px;
      line-height: 44px;
      margin-top: 20px;
    }
    h2 {
      font-size: 32px;
      line-height: 36px;
      margin-top: 20px;
    }
    h3 {
      font-size: 24px;
      line-height: 30px;
      margin-top: 20px;
    }
    h4 {
      font-size: 18px;
      line-height: 24px;
      margin-top: 10px;
    }
    h5 {
      font-size: 14px;
      line-height: 20px;
      margin-top: 10px;
    }
    h6 {
      font-size: 12px;
      line-height: 18px;
      margin-top: 10px;
    }
    p {
      margin-top: 0;
      margin-bottom: 10px;
    }
    blockquote {
      margin: 0 0 10px 0;
      padding: 10px 20px;
      border-left: 5px solid #E2E2E2;
      font-size: 18px;
      line-height: 22px;
    }
    figure {
      margin: 0;
      margin-bottom: 10px;
    }
    figcaption {
      margin-top: 5px;
      text-align: center;
    }
    ul,
    ol {
      margin-top: 0px;
      margin-bottom: 10px;
      padding-left: 40px;
    }
    .w-list-unstyled {
      padding-left: 0;
      list-style: none;
    }
    .w-embed:before,
    .w-embed:after {
      content: " ";
      display: table;
      grid-column-start: 1;
      grid-row-start: 1;
      grid-column-end: 2;
      grid-row-end: 2;
    }
    .w-embed:after {
      clear: both;
    }
    .w-video {
      width: 100%;
      position: relative;
      padding: 0;
    }
    .w-video iframe,
    .w-video object,
    .w-video embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    fieldset {
      padding: 0;
      margin: 0;
      border: 0;
    }
    button,
    [type='button'],
    [type='reset'] {
      border: 0;
      cursor: pointer;
      -webkit-appearance: button;
    }
    .w-form {
      margin: 0 0 15px;
    }
    .w-form-done {
      display: none;
      padding: 20px;
      text-align: center;
      background-color: #dddddd;
    }
    .w-form-fail {
      display: none;
      margin-top: 10px;
      padding: 10px;
      background-color: #ffdede;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .w-input,
    .w-select {
      display: block;
      width: 100%;
      height: 38px;
      padding: 8px 12px;
      margin-bottom: 10px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #333333;
      vertical-align: middle;
      background-color: #ffffff;
      border: 1px solid #cccccc;
    }
    .w-input::placeholder,
    .w-select::placeholder {
      color: #999;
    }
    .w-input:focus,
    .w-select:focus {
      border-color: #3898EC;
      outline: 0;
    }
    .w-input[disabled],
    .w-select[disabled],
    .w-input[readonly],
    .w-select[readonly],
    fieldset[disabled] .w-input,
    fieldset[disabled] .w-select {
      cursor: not-allowed;
    }
    .w-input[disabled]:not(.w-input-disabled),
    .w-select[disabled]:not(.w-input-disabled),
    .w-input[readonly],
    .w-select[readonly],
    fieldset[disabled]:not(.w-input-disabled) .w-input,
    fieldset[disabled]:not(.w-input-disabled) .w-select {
      background-color: #eeeeee;
    }
    textarea.w-input,
    textarea.w-select {
      height: auto;
    }
    .w-select {
      background-color: #f3f3f3;
    }
    .w-select[multiple] {
      height: auto;
    }
    .w-form-label {
      display: inline-block;
      cursor: pointer;
      font-weight: normal;
      margin-bottom: 0px;
    }
    .w-radio {
      display: block;
      margin-bottom: 5px;
      padding-left: 20px;
    }
    .w-radio:before,
    .w-radio:after {
      content: " ";
      display: table;
      grid-column-start: 1;
      grid-row-start: 1;
      grid-column-end: 2;
      grid-row-end: 2;
    }
    .w-radio:after {
      clear: both;
    }
    .w-radio-input {
      margin: 4px 0 0;
      line-height: normal;
      float: left;
      margin-left: -20px;
    }
    .w-radio-input {
      margin-top: 3px;
    }
    .w-file-upload {
      display: block;
      margin-bottom: 10px;
    }
    .w-file-upload-input {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -100;
    }
    .w-file-upload-default,
    .w-file-upload-uploading,
    .w-file-upload-success {
      display: inline-block;
      color: #333333;
    }
    .w-file-upload-error {
      display: block;
      margin-top: 10px;
    }
    .w-file-upload-default.w-hidden,
    .w-file-upload-uploading.w-hidden,
    .w-file-upload-error.w-hidden,
    .w-file-upload-success.w-hidden {
      display: none;
    }
    .w-file-upload-uploading-btn {
      display: flex;
      font-size: 14px;
      font-weight: normal;
      cursor: pointer;
      margin: 0;
      padding: 8px 12px;
      border: 1px solid #cccccc;
      background-color: #fafafa;
    }
    .w-file-upload-file {
      display: flex;
      flex-grow: 1;
      justify-content: space-between;
      margin: 0;
      padding: 8px 9px 8px 11px;
      border: 1px solid #cccccc;
      background-color: #fafafa;
    }
    .w-file-upload-file-name {
      font-size: 14px;
      font-weight: normal;
      display: block;
    }
    .w-file-remove-link {
      margin-top: 3px;
      margin-left: 10px;
      width: auto;
      height: auto;
      padding: 3px;
      display: block;
      cursor: pointer;
    }
    .w-icon-file-upload-remove {
      margin: auto;
      font-size: 10px;
    }
    .w-file-upload-error-msg {
      display: inline-block;
      color: #ea384c;
      padding: 2px 0;
    }
    .w-file-upload-info {
      display: inline-block;
      line-height: 38px;
      padding: 0 12px;
    }
    .w-file-upload-label {
      display: inline-block;
      font-size: 14px;
      font-weight: normal;
      cursor: pointer;
      margin: 0;
      padding: 8px 12px;
      border: 1px solid #cccccc;
      background-color: #fafafa;
    }
    .w-icon-file-upload-icon,
    .w-icon-file-upload-uploading {
      display: inline-block;
      margin-right: 8px;
      width: 20px;
    }
    .w-icon-file-upload-uploading {
      height: 20px;
    }
    .w-container {
      margin-left: auto;
      margin-right: auto;
      max-width: 940px;
    }
    .w-container:before,
    .w-container:after {
      content: " ";
      display: table;
      grid-column-start: 1;
      grid-row-start: 1;
      grid-column-end: 2;
      grid-row-end: 2;
    }
    .w-container:after {
      clear: both;
    }
    .w-container .w-row {
      margin-left: -10px;
      margin-right: -10px;
    }
    .w-row:before,
    .w-row:after {
      content: " ";
      display: table;
      grid-column-start: 1;
      grid-row-start: 1;
      grid-column-end: 2;
      grid-row-end: 2;
    }
    .w-row:after {
      clear: both;
    }
    .w-row .w-row {
      margin-left: 0;
      margin-right: 0;
    }
    .w-col {
      position: relative;
      float: left;
      width: 100%;
      min-height: 1px;
      padding-left: 10px;
      padding-right: 10px;
    }
    .w-col .w-col {
      padding-left: 0;
      padding-right: 0;
    }
    .w-col-1 {
      width: 8.33333333%;
    }
    .w-col-2 {
      width: 16.66666667%;
    }
    .w-col-3 {
      width: 25%;
    }
    .w-col-4 {
      width: 33.33333333%;
    }
    .w-col-5 {
      width: 41.66666667%;
    }
    .w-col-6 {
      width: 50%;
    }
    .w-col-7 {
      width: 58.33333333%;
    }
    .w-col-8 {
      width: 66.66666667%;
    }
    .w-col-9 {
      width: 75%;
    }
    .w-col-10 {
      width: 83.33333333%;
    }
    .w-col-11 {
      width: 91.66666667%;
    }
    .w-col-12 {
      width: 100%;
    }
    .w-hidden-main {
      display: none !important;
    }
    @media screen and (max-width: 991px) {
      .w-container {
        max-width: 728px;
      }
      .w-hidden-main {
        display: inherit !important;
      }
      .w-hidden-medium {
        display: none !important;
      }
      .w-col-medium-1 {
        width: 8.33333333%;
      }
      .w-col-medium-2 {
        width: 16.66666667%;
      }
      .w-col-medium-3 {
        width: 25%;
      }
      .w-col-medium-4 {
        width: 33.33333333%;
      }
      .w-col-medium-5 {
        width: 41.66666667%;
      }
      .w-col-medium-6 {
        width: 50%;
      }
      .w-col-medium-7 {
        width: 58.33333333%;
      }
      .w-col-medium-8 {
        width: 66.66666667%;
      }
      .w-col-medium-9 {
        width: 75%;
      }
      .w-col-medium-10 {
        width: 83.33333333%;
      }
      .w-col-medium-11 {
        width: 91.66666667%;
      }
      .w-col-medium-12 {
        width: 100%;
      }
      .w-col-stack {
        width: 100%;
        left: auto;
        right: auto;
      }
    }
    @media screen and (max-width: 767px) {
      .w-hidden-main {
        display: inherit !important;
      }
      .w-hidden-medium {
        display: inherit !important;
      }
      .w-hidden-small {
        display: none !important;
      }
      .w-row,
      .w-container .w-row {
        margin-left: 0;
        margin-right: 0;
      }
      .w-col {
        width: 100%;
        left: auto;
        right: auto;
      }
      .w-col-small-1 {
        width: 8.33333333%;
      }
      .w-col-small-2 {
        width: 16.66666667%;
      }
      .w-col-small-3 {
        width: 25%;
      }
      .w-col-small-4 {
        width: 33.33333333%;
      }
      .w-col-small-5 {
        width: 41.66666667%;
      }
      .w-col-small-6 {
        width: 50%;
      }
      .w-col-small-7 {
        width: 58.33333333%;
      }
      .w-col-small-8 {
        width: 66.66666667%;
      }
      .w-col-small-9 {
        width: 75%;
      }
      .w-col-small-10 {
        width: 83.33333333%;
      }
      .w-col-small-11 {
        width: 91.66666667%;
      }
      .w-col-small-12 {
        width: 100%;
      }
    }
    @media screen and (max-width: 479px) {
      .w-container {
        max-width: none;
      }
      .w-hidden-main {
        display: inherit !important;
      }
      .w-hidden-medium {
        display: inherit !important;
      }
      .w-hidden-small {
        display: inherit !important;
      }
      .w-hidden-tiny {
        display: none !important;
      }
      .w-col {
        width: 100%;
      }
      .w-col-tiny-1 {
        width: 8.33333333%;
      }
      .w-col-tiny-2 {
        width: 16.66666667%;
      }
      .w-col-tiny-3 {
        width: 25%;
      }
      .w-col-tiny-4 {
        width: 33.33333333%;
      }
      .w-col-tiny-5 {
        width: 41.66666667%;
      }
      .w-col-tiny-6 {
        width: 50%;
      }
      .w-col-tiny-7 {
        width: 58.33333333%;
      }
      .w-col-tiny-8 {
        width: 66.66666667%;
      }
      .w-col-tiny-9 {
        width: 75%;
      }
      .w-col-tiny-10 {
        width: 83.33333333%;
      }
      .w-col-tiny-11 {
        width: 91.66666667%;
      }
      .w-col-tiny-12 {
        width: 100%;
      }
    }
    .w-widget {
      position: relative;
    }
    .w-widget-map {
      width: 100%;
      height: 400px;
    }
    .w-widget-map label {
      width: auto;
      display: inline;
    }
    .w-widget-map img {
      max-width: inherit;
    }
    .w-widget-map .gm-style-iw {
      text-align: center;
    }
    .w-widget-map .gm-style-iw > button {
      display: none !important;
    }
    .w-widget-twitter {
      overflow: hidden;
    }
    .w-widget-twitter-count-shim {
      display: inline-block;
      vertical-align: top;
      position: relative;
      width: 28px;
      height: 20px;
      text-align: center;
      background: white;
      border: #758696 solid 1px;
      border-radius: 3px;
    }
    .w-widget-twitter-count-shim * {
      pointer-events: none;
      user-select: none;
    }
    .w-widget-twitter-count-shim .w-widget-twitter-count-inner {
      position: relative;
      font-size: 15px;
      line-height: 12px;
      text-align: center;
      color: #999;
      font-family: serif;
    }
    .w-widget-twitter-count-shim .w-widget-twitter-count-clear {
      position: relative;
      display: block;
    }
    .w-widget-twitter-count-shim.w--large {
      width: 36px;
      height: 28px;
    }
    .w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
      font-size: 18px;
      line-height: 18px;
    }
    .w-widget-twitter-count-shim:not(.w--vertical) {
      margin-left: 5px;
      margin-right: 8px;
    }
    .w-widget-twitter-count-shim:not(.w--vertical).w--large {
      margin-left: 6px;
    }
    .w-widget-twitter-count-shim:not(.w--vertical):before,
    .w-widget-twitter-count-shim:not(.w--vertical):after {
      top: 50%;
      left: 0;
      border: solid transparent;
      content: ' ';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    .w-widget-twitter-count-shim:not(.w--vertical):before {
      border-color: rgba(117, 134, 150, 0);
      border-right-color: #5d6c7b;
      border-width: 4px;
      margin-left: -9px;
      margin-top: -4px;
    }
    .w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
      border-width: 5px;
      margin-left: -10px;
      margin-top: -5px;
    }
    .w-widget-twitter-count-shim:not(.w--vertical):after {
      border-color: rgba(255, 255, 255, 0);
      border-right-color: white;
      border-width: 4px;
      margin-left: -8px;
      margin-top: -4px;
    }
    .w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
      border-width: 5px;
      margin-left: -9px;
      margin-top: -5px;
    }
    .w-widget-twitter-count-shim.w--vertical {
      width: 61px;
      height: 33px;
      margin-bottom: 8px;
    }
    .w-widget-twitter-count-shim.w--vertical:before,
    .w-widget-twitter-count-shim.w--vertical:after {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: ' ';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    .w-widget-twitter-count-shim.w--vertical:before {
      border-color: rgba(117, 134, 150, 0);
      border-top-color: #5d6c7b;
      border-width: 5px;
      margin-left: -5px;
    }
    .w-widget-twitter-count-shim.w--vertical:after {
      border-color: rgba(255, 255, 255, 0);
      border-top-color: white;
      border-width: 4px;
      margin-left: -4px;
    }
    .w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
      font-size: 18px;
      line-height: 22px;
    }
    .w-widget-twitter-count-shim.w--vertical.w--large {
      width: 76px;
    }
    .w-background-video {
      position: relative;
      overflow: hidden;
      height: 500px;
      color: white;
    }
    .w-background-video > video {
      background-size: cover;
      background-position: 50% 50%;
      position: absolute;
      margin: auto;
      width: 100%;
      height: 100%;
      right: -100%;
      bottom: -100%;
      top: -100%;
      left: -100%;
      object-fit: cover;
      z-index: -100;
    }
    .w-background-video > video::-webkit-media-controls-start-playback-button {
      display: none !important;
      -webkit-appearance: none;
    }
    .w-background-video--control {
      position: absolute;
      bottom: 1em;
      right: 1em;
      background-color: transparent;
      padding: 0;
    }
    .w-background-video--control > [hidden] {
      display: none !important;
    }
    .w-slider {
      position: relative;
      height: 300px;
      text-align: center;
      background: #dddddd;
      clear: both;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      tap-highlight-color: rgba(0, 0, 0, 0);
    }
    .w-slider-mask {
      position: relative;
      display: block;
      overflow: hidden;
      z-index: 1;
      left: 0;
      right: 0;
      height: 100%;
      white-space: nowrap;
    }
    .w-slide {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: 100%;
      height: 100%;
      white-space: normal;
      text-align: left;
    }
    .w-slider-nav {
      position: absolute;
      z-index: 2;
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      padding-top: 10px;
      height: 40px;
      text-align: center;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      tap-highlight-color: rgba(0, 0, 0, 0);
    }
    .w-slider-nav.w-round > div {
      border-radius: 100%;
    }
    .w-slider-nav.w-num > div {
      width: auto;
      height: auto;
      padding: 0.2em 0.5em;
      font-size: inherit;
      line-height: inherit;
    }
    .w-slider-nav.w-shadow > div {
      box-shadow: 0 0 3px rgba(51, 51, 51, 0.4);
    }
    .w-slider-nav-invert {
      color: #fff;
    }
    .w-slider-nav-invert > div {
      background-color: rgba(34, 34, 34, 0.4);
    }
    .w-slider-nav-invert > div.w-active {
      background-color: #222;
    }
    .w-slider-dot {
      position: relative;
      display: inline-block;
      width: 1em;
      height: 1em;
      background-color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      margin: 0 3px 0.5em;
      transition: background-color 100ms, color 100ms;
    }
    .w-slider-dot.w-active {
      background-color: #fff;
    }
    .w-slider-dot:focus {
      outline: none;
      box-shadow: 0px 0px 0px 2px #fff;
    }
    .w-slider-dot:focus.w-active {
      box-shadow: none;
    }
    .w-slider-arrow-left,
    .w-slider-arrow-right {
      position: absolute;
      width: 80px;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      cursor: pointer;
      overflow: hidden;
      color: white;
      font-size: 40px;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      tap-highlight-color: rgba(0, 0, 0, 0);
      user-select: none;
    }
    .w-slider-arrow-left [class^='w-icon-'],
    .w-slider-arrow-right [class^='w-icon-'],
    .w-slider-arrow-left [class*=' w-icon-'],
    .w-slider-arrow-right [class*=' w-icon-'] {
      position: absolute;
    }
    .w-slider-arrow-left:focus,
    .w-slider-arrow-right:focus {
      outline: 0;
    }
    .w-slider-arrow-left {
      z-index: 3;
      right: auto;
    }
    .w-slider-arrow-right {
      z-index: 4;
      left: auto;
    }
    .w-icon-slider-left,
    .w-icon-slider-right {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 1em;
      height: 1em;
    }
    .w-slider-aria-label {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    .w-slider-force-show {
      display: block !important;
    }
    .w-dropdown {
      display: inline-block;
      position: relative;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
      z-index: 900;
    }
    .w-dropdown-btn,
    .w-dropdown-toggle,
    .w-dropdown-link {
      position: relative;
      vertical-align: top;
      text-decoration: none;
      color: #222222;
      padding: 20px;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
      white-space: nowrap;
    }
    .w-dropdown-toggle {
      user-select: none;
      display: inline-block;
      cursor: pointer;
      padding-right: 40px;
    }
    .w-dropdown-toggle:focus {
      outline: 0;
    }
    .w-icon-dropdown-toggle {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      margin-right: 20px;
      width: 1em;
      height: 1em;
    }
    .w-dropdown-list {
      position: absolute;
      background: #dddddd;
      display: none;
      min-width: 100%;
    }
    .w-dropdown-list.w--open {
      display: block;
    }
    .w-dropdown-link {
      padding: 10px 20px;
      display: block;
      color: #222222;
    }
    .w-dropdown-link.w--current {
      color: #0082f3;
    }
    .w-dropdown-link:focus {
      outline: 0;
    }
    @media screen and (max-width: 767px) {
      .w-nav-brand {
        padding-left: 10px;
      }
    }
    /**
     * ## Note
     * Safari (on both iOS and OS X) does not handle viewport units (vh, vw) well.
     * For example percentage units do not work on descendants of elements that
     * have any dimensions expressed in viewport units. It also doesn't handle them at
     * all in `calc()`.
     */
    /**
     * Wrapper around all lightbox elements
     *
     * 1. Since the lightbox can receive focus, IE also gives it an outline.
     * 2. Fixes flickering on Chrome when a transition is in progress
     *    underneath the lightbox.
     */
    .w-lightbox-backdrop {
      cursor: auto;
      font-style: normal;
      letter-spacing: normal;
      list-style: disc;
      text-indent: 0;
      text-shadow: none;
      text-transform: none;
      visibility: visible;
      white-space: normal;
      word-break: normal;
      word-spacing: normal;
      word-wrap: normal;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      color: #fff;
      font-family: "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
      font-size: 17px;
      line-height: 1.2;
      font-weight: 300;
      text-align: center;
      background: rgba(0, 0, 0, 0.9);
      z-index: 2000;
      outline: 0;
      /* 1 */
      opacity: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-transform: translate(0, 0);
      /* 2 */
    }
    /**
     * Neat trick to bind the rubberband effect to our canvas instead of the whole
     * document on iOS. It also prevents a bug that causes the document underneath to scroll.
     */
    .w-lightbox-backdrop,
    .w-lightbox-container {
      height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .w-lightbox-content {
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
    .w-lightbox-view {
      position: absolute;
      width: 100vw;
      height: 100vh;
      opacity: 0;
    }
    .w-lightbox-view:before {
      content: "";
      height: 100vh;
    }
    /* .w-lightbox-content */
    .w-lightbox-group,
    .w-lightbox-group .w-lightbox-view,
    .w-lightbox-group .w-lightbox-view:before {
      height: 86vh;
    }
    .w-lightbox-frame,
    .w-lightbox-view:before {
      display: inline-block;
      vertical-align: middle;
    }
    /*
     * 1. Remove default margin set by user-agent on the <figure> element.
     */
    .w-lightbox-figure {
      position: relative;
      margin: 0;
      /* 1 */
    }
    .w-lightbox-group .w-lightbox-figure {
      cursor: pointer;
    }
    /**
     * IE adds image dimensions as width and height attributes on the IMG tag,
     * but we need both width and height to be set to auto to enable scaling.
     */
    .w-lightbox-img {
      width: auto;
      height: auto;
      max-width: none;
    }
    /**
     * 1. Reset if style is set by user on "All Images"
     */
    .w-lightbox-image {
      display: block;
      float: none;
      /* 1 */
      max-width: 100vw;
      max-height: 100vh;
    }
    .w-lightbox-group .w-lightbox-image {
      max-height: 86vh;
    }
    .w-lightbox-caption {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 0.5em 1em;
      background: rgba(0, 0, 0, 0.4);
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .w-lightbox-embed {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .w-lightbox-control {
      position: absolute;
      top: 0;
      width: 4em;
      background-size: 24px;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
    .w-lightbox-left {
      display: none;
      bottom: 0;
      left: 0;
      /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 0 24 40" width="24" height="40"><g transform="rotate(45)"><path d="m0 0h5v23h23v5h-28z" opacity=".4"/><path d="m1 1h3v23h23v3h-26z" fill="#fff"/></g></svg> */
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
    }
    .w-lightbox-right {
      display: none;
      right: 0;
      bottom: 0;
      /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 0 24 40" width="24" height="40"><g transform="rotate(45)"><path d="m0-0h28v28h-5v-23h-23z" opacity=".4"/><path d="m1 1h26v26h-3v-23h-23z" fill="#fff"/></g></svg> */
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
    }
    /*
     * Without specifying the with and height inside the SVG, all versions of IE render the icon too small.
     * The bug does not seem to manifest itself if the elements are tall enough such as the above arrows.
     * (http://stackoverflow.com/questions/16092114/background-size-differs-in-internet-explorer)
     */
    .w-lightbox-close {
      right: 0;
      height: 2.6em;
      /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 0 18 17" width="18" height="17"><g transform="rotate(45)"><path d="m0 0h7v-7h5v7h7v5h-7v7h-5v-7h-7z" opacity=".4"/><path d="m1 1h7v-7h3v7h7v3h-7v7h-3v-7h-7z" fill="#fff"/></g></svg> */
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
      background-size: 18px;
    }
    /**
     * 1. All IE versions add extra space at the bottom without this.
     */
    .w-lightbox-strip {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0 1vh;
      line-height: 0;
      /* 1 */
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
    }
    /*
     * 1. We use content-box to avoid having to do `width: calc(10vh + 2vw)`
     *    which doesn't work in Safari anyway.
     * 2. Chrome renders images pixelated when switching to GPU. Making sure
     *    the parent is also rendered on the GPU (by setting translate3d for
     *    example) fixes this behavior.
     */
    .w-lightbox-item {
      display: inline-block;
      width: 10vh;
      padding: 2vh 1vh;
      box-sizing: content-box;
      /* 1 */
      cursor: pointer;
      -webkit-transform: translate3d(0, 0, 0);
      /* 2 */
    }
    .w-lightbox-active {
      opacity: 0.3;
    }
    .w-lightbox-thumbnail {
      position: relative;
      height: 10vh;
      background: #222;
      overflow: hidden;
    }
    .w-lightbox-thumbnail-image {
      position: absolute;
      top: 0;
      left: 0;
    }
    .w-lightbox-thumbnail .w-lightbox-tall {
      top: 50%;
      width: 100%;
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%);
    }
    .w-lightbox-thumbnail .w-lightbox-wide {
      left: 50%;
      height: 100%;
      -webkit-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
    }
    /*
     * Spinner
     *
     * Absolute pixel values are used to avoid rounding errors that would cause
     * the white spinning element to be misaligned with the track.
     */
    .w-lightbox-spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      box-sizing: border-box;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      margin-left: -20px;
      border: 5px solid rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      -webkit-animation: spin 0.8s infinite linear;
      animation: spin 0.8s infinite linear;
    }
    .w-lightbox-spinner:after {
      content: "";
      position: absolute;
      top: -4px;
      right: -4px;
      bottom: -4px;
      left: -4px;
      border: 3px solid transparent;
      border-bottom-color: #fff;
      border-radius: 50%;
    }
    /*
     * Utility classes
     */
    .w-lightbox-hide {
      display: none;
    }
    .w-lightbox-noscroll {
      overflow: hidden;
    }
    @media (min-width: 768px) {
      .w-lightbox-content {
        height: 96vh;
        margin-top: 2vh;
      }
      .w-lightbox-view,
      .w-lightbox-view:before {
        height: 96vh;
      }
      /* .w-lightbox-content */
      .w-lightbox-group,
      .w-lightbox-group .w-lightbox-view,
      .w-lightbox-group .w-lightbox-view:before {
        height: 84vh;
      }
      .w-lightbox-image {
        max-width: 96vw;
        max-height: 96vh;
      }
      .w-lightbox-group .w-lightbox-image {
        max-width: 82.3vw;
        max-height: 84vh;
      }
      .w-lightbox-left,
      .w-lightbox-right {
        display: block;
        opacity: 0.5;
      }
      .w-lightbox-close {
        opacity: 0.8;
      }
      .w-lightbox-control:hover {
        opacity: 1;
      }
    }
    .w-lightbox-inactive,
    .w-lightbox-inactive:hover {
      opacity: 0;
    }
    .w-richtext:before,
    .w-richtext:after {
      content: " ";
      display: table;
      grid-column-start: 1;
      grid-row-start: 1;
      grid-column-end: 2;
      grid-row-end: 2;
    }
    .w-richtext:after {
      clear: both;
    }
    .w-richtext[contenteditable="true"]:before,
    .w-richtext[contenteditable="true"]:after {
      white-space: initial;
    }
    .w-richtext ol,
    .w-richtext ul {
      overflow: hidden;
    }
    .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,
    .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after {
      outline: 2px solid #2895f7;
    }
    .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,
    .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
      outline: 2px solid #2895f7;
    }
    .w-richtext figure.w-richtext-figure-type-video > div:after,
    .w-richtext figure[data-rt-type="video"] > div:after {
      content: '';
      position: absolute;
      display: none;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
    .w-richtext figure {
      position: relative;
      max-width: 60%;
    }
    .w-richtext figure > div:before {
      cursor: default!important;
    }
    .w-richtext figure img {
      width: 100%;
    }
    .w-richtext figure figcaption.w-richtext-figcaption-placeholder {
      opacity: 0.6;
    }
    .w-richtext figure div {
      /* fix incorrectly sized selection border in the data manager */
      font-size: 0px;
      color: transparent;
    }
    .w-richtext figure.w-richtext-figure-type-image,
    .w-richtext figure[data-rt-type="image"] {
      display: table;
    }
    .w-richtext figure.w-richtext-figure-type-image > div,
    .w-richtext figure[data-rt-type="image"] > div {
      display: inline-block;
    }
    .w-richtext figure.w-richtext-figure-type-image > figcaption,
    .w-richtext figure[data-rt-type="image"] > figcaption {
      display: table-caption;
      caption-side: bottom;
    }
    .w-richtext figure.w-richtext-figure-type-video,
    .w-richtext figure[data-rt-type="video"] {
      width: 60%;
      height: 0;
    }
    .w-richtext figure.w-richtext-figure-type-video iframe,
    .w-richtext figure[data-rt-type="video"] iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .w-richtext figure.w-richtext-figure-type-video > div,
    .w-richtext figure[data-rt-type="video"] > div {
      width: 100%;
    }
    .w-richtext figure.w-richtext-align-center {
      margin-right: auto;
      margin-left: auto;
      clear: both;
    }
    .w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div,
    .w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
      max-width: 100%;
    }
    .w-richtext figure.w-richtext-align-normal {
      clear: both;
    }
    .w-richtext figure.w-richtext-align-fullwidth {
      width: 100%;
      max-width: 100%;
      text-align: center;
      clear: both;
      display: block;
      margin-right: auto;
      margin-left: auto;
    }
    .w-richtext figure.w-richtext-align-fullwidth > div {
      display: inline-block;
      /* padding-bottom is used for aspect ratios in video figures
          we want the div to inherit that so hover/selection borders in the designer-canvas
          fit right*/
      padding-bottom: inherit;
    }
    .w-richtext figure.w-richtext-align-fullwidth > figcaption {
      display: block;
    }
    .w-richtext figure.w-richtext-align-floatleft {
      float: left;
      margin-right: 15px;
      clear: none;
    }
    .w-richtext figure.w-richtext-align-floatright {
      float: right;
      margin-left: 15px;
      clear: none;
    }
    .w-nav {
      position: relative;
      background: #dddddd;
      z-index: 1000;
    }
    .w-nav:before,
    .w-nav:after {
      content: " ";
      display: table;
      grid-column-start: 1;
      grid-row-start: 1;
      grid-column-end: 2;
      grid-row-end: 2;
    }
    .w-nav:after {
      clear: both;
    }
    .w-nav-brand {
      position: relative;
      float: left;
      text-decoration: none;
      color: #333333;
    }
    .w-nav-link {
      position: relative;
      display: inline-block;
      vertical-align: top;
      text-decoration: none;
      color: #222222;
      padding: 20px;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
    }
    .w-nav-link.w--current {
      color: #0082f3;
    }
    .w-nav-menu {
      position: relative;
      float: right;
    }
    [data-nav-menu-open] {
      display: block !important;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #C8C8C8;
      text-align: center;
      overflow: visible;
      min-width: 200px;
    }
    .w--nav-link-open {
      display: block;
      position: relative;
    }
    .w-nav-overlay {
      position: absolute;
      overflow: hidden;
      display: none;
      top: 100%;
      left: 0;
      right: 0;
      width: 100%;
    }
    .w-nav-overlay [data-nav-menu-open] {
      top: 0;
    }
    .w-nav[data-animation='over-left'] .w-nav-overlay {
      width: auto;
    }
    .w-nav[data-animation='over-left'] .w-nav-overlay,
    .w-nav[data-animation='over-left'] [data-nav-menu-open] {
      right: auto;
      z-index: 1;
      top: 0;
    }
    .w-nav[data-animation='over-right'] .w-nav-overlay {
      width: auto;
    }
    .w-nav[data-animation='over-right'] .w-nav-overlay,
    .w-nav[data-animation='over-right'] [data-nav-menu-open] {
      left: auto;
      z-index: 1;
      top: 0;
    }
    .w-nav-button {
      position: relative;
      float: right;
      padding: 18px;
      font-size: 24px;
      display: none;
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      tap-highlight-color: rgba(0, 0, 0, 0);
      user-select: none;
    }
    .w-nav-button:focus {
      outline: 0;
    }
    .w-nav-button.w--open {
      background-color: #C8C8C8;
      color: white;
    }
    .w-nav[data-collapse='all'] .w-nav-menu {
      display: none;
    }
    .w-nav[data-collapse='all'] .w-nav-button {
      display: block;
    }
    .w--nav-dropdown-open {
      display: block;
    }
    .w--nav-dropdown-toggle-open {
      display: block;
    }
    .w--nav-dropdown-list-open {
      position: static;
    }
    @media screen and (max-width: 991px) {
      .w-nav[data-collapse='medium'] .w-nav-menu {
        display: none;
      }
      .w-nav[data-collapse='medium'] .w-nav-button {
        display: block;
      }
    }
    @media screen and (max-width: 767px) {
      .w-nav[data-collapse='small'] .w-nav-menu {
        display: none;
      }
      .w-nav[data-collapse='small'] .w-nav-button {
        display: block;
      }
      .w-nav-brand {
        padding-left: 10px;
      }
    }
    @media screen and (max-width: 479px) {
      .w-nav[data-collapse='tiny'] .w-nav-menu {
        display: none;
      }
      .w-nav[data-collapse='tiny'] .w-nav-button {
        display: block;
      }
    }
    .w-tabs {
      position: relative;
    }
    .w-tabs:before,
    .w-tabs:after {
      content: " ";
      display: table;
      grid-column-start: 1;
      grid-row-start: 1;
      grid-column-end: 2;
      grid-row-end: 2;
    }
    .w-tabs:after {
      clear: both;
    }
    .w-tab-menu {
      position: relative;
    }
    .w-tab-link {
      position: relative;
      display: inline-block;
      vertical-align: top;
      text-decoration: none;
      padding: 9px 30px;
      text-align: left;
      cursor: pointer;
      color: #222222;
      background-color: #dddddd;
    }
    .w-tab-link.w--current {
      background-color: #C8C8C8;
    }
    .w-tab-link:focus {
      outline: 0;
    }
    .w-tab-content {
      position: relative;
      display: block;
      overflow: hidden;
    }
    .w-tab-pane {
      position: relative;
      display: none;
    }
    .w--tab-active {
      display: block;
    }
    @media screen and (max-width: 479px) {
      .w-tab-link {
        display: block;
      }
    }
    .w-ix-emptyfix:after {
      content: "";
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .w-dyn-empty {
      padding: 10px;
      background-color: #dddddd;
    }
    .w-dyn-hide {
      display: none !important;
    }
    .w-dyn-bind-empty {
      display: none !important;
    }
    .w-condition-invisible {
      display: none !important;
    }
    .wf-layout-layout {
      display: grid;
    }

    :root {
      --white-6574afb3: white;
      --black-d17e8458: black;
      --white: white;
      --black: black;
    }

    body {
      font-family: Montserrat, sans-serif;
      color: #1a1b1f;
      font-size: 16px;
      line-height: 28px;
      font-weight: 400;
    }

    h1 {
      margin-top: 20px;
      margin-bottom: 15px;
      font-size: 44px;
      line-height: 62px;
      font-weight: 400;
    }

    h2 {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 36px;
      line-height: 50px;
      font-weight: 400;
    }

    h3 {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 30px;
      line-height: 46px;
      font-weight: 400;
    }

    h4 {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 24px;
      line-height: 38px;
      font-weight: 400;
    }

    h5 {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 20px;
      line-height: 34px;
      font-weight: 500;
    }

    h6 {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 16px;
      line-height: 28px;
      font-weight: 500;
    }

    p {
      margin-bottom: 10px;
    }

    a {
      display: block;
      transition: opacity 200ms ease;
      color: #1a1b1f;
      text-decoration: underline;
    }

    a:hover {
      color: #32343a;
    }

    a:active {
      color: #43464d;
    }

    ul {
      margin-top: 20px;
      margin-bottom: 20px;
      padding-left: 40px;
      list-style-type: disc;
    }

    li {
      margin-bottom: 10px;
    }

    img {
      display: block;
    }

    label {
      margin-bottom: 10px;

      font-size: 12px;
      line-height: 20px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    blockquote {
      margin-top: 25px;
      margin-bottom: 25px;
      padding: 15px 30px;

      border-left: 5px solid #E2E2E2;

      font-size: 20px;
      line-height: 34px;
    }

    figure {
      margin-top: 25px;
      padding-bottom: 20px;
    }

    figcaption {
      margin-top: 5px;
      opacity: 0.6;
      font-size: 14px;
      line-height: 26px;
      text-align: center;
    }

    .w-layout-grid {
      display: grid;
      grid-auto-columns: 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      grid-row-gap: 16px;
      grid-column-gap: 16px;
    }
    ```
  </CodeBlocks>

  ## What's included

  * **Normalize / reset**\
    Based on `normalize.css` to align default styles across browsers.

  * **Base element styles**\
    Opinionated defaults for `html`, `body`, headings, paragraphs, lists, images, blockquotes, figures, etc.

  * **Webflow core utility classes**\
    Single-purpose helpers you can apply anywhere in your React project. Each class is named with a `w-` prefix.

  * **Component frameworks**\
    Predefined class systems for interactive Webflow elements like sliders, tabs, nav, dropdowns, lightbox, background video, and more.

  * **Icon font & glyphs**\
    `@font-face` for `webflow-icons` and `[class^="w-icon-"]` selectors.

  * **Responsive breakpoints**\
    Defaults around **991px**, **767px**, and **479px** for container widths and column classes.

  * **CSS variables & theme defaults**\
    Variables from your Webflow site, plus base typography and link styles.

  <Note>
    The **global stylesheet is imported once**, while per-component **custom classes** are exported as CSS Modules to keep styles from leaking.
  </Note>
</Accordion>

<Accordion title="Runtime Utilities">
  In addition to React components and global styles, DevLink also exports a small set of runtime helpers. These are the building blocks that your exported components rely on to render consistently inside your React app.

  ### `_Builtin`

  A collection of low-level primitives (like Block, Link, Image) that exported components use instead of raw HTML tags.

  * Ensures consistent behavior and attributes across your project.
  * Lets Webflow Links and Image components delegate rendering through the context provider.

  ### `_utils`

  Helper functions that simplify class management and other common patterns in the generated code.

  * Most notably, `cx()` is used to combine your scoped CSS module classes with Webflow class names safely.
  * Keeps class names predictable and collision-free.

  ### DevLinkProvider

  A React context provider that wires exported components into your app's runtime. Wrap your root layout with DevLinkProvider so that all exported components get the correct rendering context.

  ```tsx title="layout.tsx"
  import { DevLinkProvider } from '@/devlink/DevLinkProvider';
  import '@/devlink/global.css';

  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en">
        <body>
          <DevLinkProvider>
            {children}
          </DevLinkProvider>
        </body>
      </html>
    );
  }
  ```
</Accordion>

<Warning title="Do not manually edit exported components">
  DevLink auto-generates exported components. Any manual edits will be overwritten during the next sync and your changes will be lost.
</Warning>

## Next steps

<CardGroup cols={2}>
  <Card title="Styling Components" href="/code-components/styling-components">
    Learn how to style components for reliable export
  </Card>

  <Card title="Using Components" href="/code-components/styling-components">
    Learn how to use the components you've exported.
  </Card>
</CardGroup>

## FAQs

<Accordion title="Can I adjust the exported components?">
  Yes, you can adjust the exported components by modifying the Webflow component in the Designer and re-exporting them. Any manual changes to the exported components will be overwritten when you re-export them.
</Accordion>

<Accordion title="Can I export React components as JSX?">
  Yes. By default, DevLink exports React components as `.js` files. You can change the file extensions of the exported components and styles by modifying the `fileExtensions` setting in your [DevLink configuration file](/devlink/docs/component-export/installation#create-a-configuration-file).
</Accordion>

<Accordion title="Does DevLink export Custom Code?">
  DevLink exports any **Code Embed** elements inside a component. However, it doesn't export custom code from the page or site.

  To include custom code with a DevLink component, add it using a Code Embed element placed inside the component.
</Accordion>

---

# Component Architecture

> Principles for designing components in Webflow to ensure clean export

You can design components in Webflow the same way you normally would, using classes, most elements, and interactions. DevLink takes care of turning those designs into React components.

By following these guidelines, you’ll make sure your components export cleanly and behave as expected in your React app.

## Supported elements

The following Webflow elements are supported for export through DevLink:

<Tabs>
  <Tab title="Layout">
    ```
    - Container  
    - Div Block  
    - Section  
    - Grid  
    - Columns  
    - List / List Item  
    - Map  
    - Navbar  
    - Slider  
    - Tabs  
    ```
  </Tab>

  <Tab title="Interactive">
    ```
    - Button  
    - Link Block  
    - Form elements  
    - Dropdown  
    - Search  
    ```
  </Tab>

  <Tab title="Media and Content">
    ```
    - Image  
    - Video  
    - Icon  
    - Background Video  
    - Code Embed  
    - Heading  
    - Paragraph  
    - Text Link  
    - Rich Text  
    - Block Quote  
    - Social embeds (Facebook, X/Twitter, YouTube)  
    ```
  </Tab>
</Tabs>

<Warning title="Ecommerce and CMS-specific elements are not supported">
  Ecommerce and CMS-specific elements aren't supported in Exported Components.
</Warning>

<Warning title="Use DevLink Slots instead of Component Slots">
  Component slots aren't supported in Exported Components. Please [see documentation](/devlink/docs/component-export/design-guidelines/props-slots) on how to use DevLink Slots instead.
</Warning>

## Component architecture

When building components in Webflow, you can choose between two main approaches to component architecture, or even mix them together based on your specific needs:

<Accordion title="Complex components">
  Larger, self-contained components that represent complete UI sections or features. They’re ideal when you want to maintain consistency between your Webflow site and React app for entire sections of your interface.

  Use these for components that need to look and behave identically across both platforms

  **Examples:**

  * Navigation bars (with all their states and interactions)
  * Complete pricing tables (with all cells and styling)
  * Full footers (with all links and sections)
  * Entire page sections (like hero sections or feature blocks)
</Accordion>

<Accordion title="Atomic components">
  Smaller, reusable building blocks that form the foundation of your design system. They’re perfect for creating a consistent look and feel across your application.

  Use these for basic UI elements that you’ll combine in different ways

  **Examples:**

  * Buttons (with different variants)
  * Headings (with different sizes)
  * Links (with different styles)
  * Cards (with different layouts)
</Accordion>

### Forms

Design forms so engineers can choose between two predictable build paths:

<Accordion title="Export a full Webflow form as one component">
  Export a whole Webflow form for simple, lightweight flows when you don’t need controlled inputs or complex validation.

  Add a [runtime prop](/devlink/docs/component-export/design-guidelines/props-slots#runtime-props) to the Form in Webflow so apps can pass handlers like `onSubmit`.

  In React, treat the exported form as an uncontrolled form: prevent default, read values via `FormData`, and post to your endpoint. If your handler throws, render the form’s `Error` state; otherwise show `Success` and map these directly to Webflow’s built-in states.

  #### Example

  This example uses a whole Webflow form exported as one React component. The form stays visually identical to your Webflow design, but in your React code you pass it a runtime prop called `formProps`. That prop lets you hook into the form’s submit event.

  ```jsx newsletter-signup-form.jsx
  import { NewsletterSignupForm } from "@/devlink/NewsletterSignupForm";

  export function FooterSignup() {
    return (
      <NewsletterSignupForm
        // Runtime prop
        formProps={{
          onSubmit: async (e: React.FormEvent<HTMLFormElement>) => {
            e.preventDefault();
            const res = await fetch("/newsletter-signup", {
              method: "POST",
              body: new FormData(e.currentTarget),
            });
            if (!res.ok) throw new Error("Submit failed"); // triggers Error state
          },
        }}
      />
    );
  }
  ```

  * `NewsletterSignupForm` is your exported Webflow form, now usable as a React component. It already includes the fields, labels, success message, and error message you styled in Webflow.
  * `formProps` is a runtime prop that lets you pass an object that can include handlers like `onSubmit`.
  * `onSubmit` function
    * The handler prevents the browser’s default form submission.
    * It collects the field values with `new FormData(e.currentTarget)`.
    * It posts that data to your app’s backend (here: /newsletter-signup).
    * If the request fails, it throws an error. That error tells the form to switch to its Error state. If the request succeeds, the form automatically shows its Success state.
  * **Success/Error states**
    These are the states you set up visually in Webflow. The exported component just switches between them depending on whether your submit handler finishes or throws.
</Accordion>

<Accordion title="Compose forms from exported Webflow elements">
  Instead of exporting a whole form, you can export individual inputs and buttons and build your own `<form>` in React. This gives you full control over:

  * Validation (for example, with react-hook-form + Zod)
  * Error messages (announced with aria-invalid and aria-describedby)
  * Submission state (disable the button while sending, show a spinner)
  * Success handling (show a toast, banner, or redirect)

  This approach keeps the Webflow design but lets you manage all behavior in React.

  ```jsx validate-signup-form.jsx
  import { useForm } from "react-hook-form";
  import { EmailInput } from "@/devlink/EmailInput";
  import { SubmitButton } from "@/devlink/SubmitButton";

  export function SignupForm() {
    const { register, handleSubmit, formState } = useForm<{ email: string }>();

    const onSubmit = async (data: { email: string }) => {
      await fetch("/newsletter-signup", {
        method: "POST",
        body: new URLSearchParams(data),
      });
      // Show your own success UI here
    };

    return (
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <EmailInput
          inputProps={{
            ...register("email", { required: true }),
            type: "email",
            placeholder: "you@example.com",
            "aria-invalid": formState.errors.email ? true : undefined,
          }}
        />

        {formState.errors.email && (
          <p role="alert">Please enter a valid email.</p>
        )}

        <SubmitButton />
      </form>
    );
  }
  ```

  In this example, you export the `EmailInput` and `SubmitButton` elements from Webflow. You then assemble them in your own `<form>` in React. You use react-hook-form to handle the form's state and validation.

  * React manages validation and errors with `react-hook-form`.
  * An error message is displayed and announced when validation fails.

  Success handling is left to the developer (toast, banner, redirect, etc.).
</Accordion>

### Custom Code

DevLink doesn't export site or page-level custom code (e.g. code added in a page’s `<head>` or `<body>`). It also doesn't preserve plain class selectors because DevLink applies unique namespaces to every component.

If you need custom CSS or JS with a DevLink component, **add it using a Code Embed element placed inside the component.**

#### Adding custom CSS

1. Add a Code Embed inside your Webflow component.
2. Wrap your CSS in `<style>` tags.
3. Target DevLink’s [namespaced classes](/devlink/docs/component-export/design-guidelines/element-settings#custom-identifierss) with an attribute selector:

```css my-custom-code-embed.css
<style>
[class*="MyComponent_my-class__"] {
  /* your styles */
}
</style>
```

#### Adding custom JavaScript

The Code Embed element also supports `<script>`. Place scripts here only if they’re specific to the component. For logic, prefer handling interactions in your React/JS app.

### Repeatable lists

When rendering lists of data in an exported component, split the implementation into:

* **Container component**
  defines the overall list structure and exposes a slot property for content.

* **Item component**
  defines how each item is rendered.

This pattern keeps layouts reusable, rows portable, and responsibilities clear.

#### Example: User table

Create the following components in Webflow:

* `UserTable` — table structure with a [DevLink slot property](/devlink/docs/component-export/design-guidelines/props-slots#devlink-slots) named `tableContent`.
* `UserTableRow` — a row layout for a single user.

In React, you can use the `UserTable` component to render the outer table and then pass it a list of `UserTableRow` components (hydrated with your own data) with the `tableContent` prop.

```jsx user-dashboard.jsx
import { UserTable } from "@/devlink/UserTable";
import { UserTableRow } from "@/devlink/UserTableRow";
import { useQuery } from "react-query";

// Replace with your real data source
const fetchUsers = () =>
  Promise.resolve([
    {
      id: 1,
      image: "/sophie.png",
      name: "Sophie Moore",
      email: "sophie@dashflow.com",
      jobTitle: "CTO & Co-Founder",
      active: true,
      company: "BRIX Templates",
      role: "Member",
    },
    {
      id: 2,
      image: "/andy.png",
      name: "Andy Smith",
      email: "andy@dashflow.com",
      jobTitle: "VP of Marketing",
      active: false,
      company: "BRIX Templates",
      role: "Member",
    },
  ]);

const Users = () => {
  const { data: users } = useQuery({ queryKey: ["users"], queryFn: fetchUsers });

  return (
    <UserTable
      tableContent={
        <>
          {(users ?? []).map(({ active, id, ...user }) => (
            <UserTableRow
              {...user}
              key={id}
              greenBadgeVisibility={active}
              redBadgeVisibility={!active}
              greenBadgeText="ACTIVE"
              redBadgeText="INACTIVE"
            />
          ))}
        </>
      }
    />
  );
};

export default Users;

```

## Accessibility

DevLink components inherit their accessibility features from the Webflow elements they’re built upon. To ensure your components meet accessibility standards, follow [Webflow’s accessibility guidelines.](https://help.webflow.com/hc/en-us/articles/33961346219923-Accessible-elements-in-Webflow)

---

# Element Settings

> Principles for element settings in Webflow to ensure clean export

{/* <!-- vale off --> */}

This guide provides best practices for working with element settings, ensuring your components are semantic, accessible, and easily integrated into your React applications.

{/* <!-- vale on --> */}

## Element tags

Some Webflow elements let you override or bind their HTML tag at runtime. This is useful for keeping your exported components semantic and accessible without creating duplicate versions of the same component.

### Headings

Heading elements in Webflow have a Tag setting. With components, you can bind this setting to a prop, then set the tag at runtime. This allows you to reuse the same Heading component across different contexts, while keeping your document outline accessible and SEO-friendly.

<br />

<div>
  <div>
    <Frame caption="Tag Property for a Heading element">
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/9aa70796a3dbbea48a9074b57e53a6be241e840fe6228de0f07787349c489627/products/devlink/pages/exported-components/assets/heading-prop.png" alt="Prop on Tag setting for Heading element" />
    </Frame>
  </div>

  <div>
    In React, you can set the tag at runtime by passing the prop to the component.

    ```jsx my-component.jsx
    <Heading headingTag="h1" />
    ```
  </div>
</div>

### Div blocks

`div` blocks don’t require any additional setup in the Designer. Exported components expose an `as` prop automatically, letting you choose the rendered tag at runtime.

```jsx my-component.jsx
<DynamicDiv as="section" />
```

This approach allows you to make generic containers semantic, and improve accessibility and markup quality without duplicating components.

## Custom identifiers

You can add **custom IDs** and **custom attributes** to elements in the Designer. DevLink automatically transforms custom IDs into safe, namespaced selectors using CSS Modules, preventing style conflicts when components are used in larger React apps.

<div>
  <Frame caption="Custom identifiers component property">
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/2b02fd96e22b1600f9455ef9ebad0ecc4b0db866a29d2df073723f15a1983d84/products/devlink/pages/exported-components/assets/featured-section.png" />
  </Frame>
</div>

DevLink transforms custom IDs into the following format upon export:

```
<ComponentName>_<custom-id>__<unique-identifier>
```

For example, a custom ID of `featured-section` on a **Grid** element within a `Hero` component  may become: `Hero_featured-section__abc123`

This ensures that each identifier is unique, even if multiple instances of the component appear on the page.

### Dynamic IDs

Some Webflow elements (like **Grid** or **Quick Stack**) use built-in IDs as **styling hooks**. These IDs appear in the Style Panel with a pink marker. If you make them dynamic in React, Webflow’s generated CSS selectors will no longer match, and your styling will break.

<Warning>
  Don’t replace Webflow IDs dynamically in React, because Webflow's generated CSS selectors will no longer match.

  ```jsx
  // ❌ This breaks Webflow’s generated CSS
  <Grid id={sectionId} />
  ```
</Warning>

### Custom attributes

Instead of replacing IDs, attach your own [custom attributes](https://help.webflow.com/hc/en-us/articles/33961389460115-Custom-attributes). This keeps Webflow’s CSS intact while still giving you dynamic identifiers for React logic.

#### Adding custom attributes in Webflow

Select the element you want to add a custom attribute to, then navigate to the element's settings panel. Scroll down to the **Custom Attributes** section and click the `+` button to add a custom attribute with a name and value.

<div>
  <Frame caption="Custom attributes component property">
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/237891631733f8e1d35e8232121a6a5f368525d83c32bcfe71817c4bf9d37351/products/devlink/pages/exported-components/assets/custom-attributes.png" />
  </Frame>
</div>

```jsx ProductGrid.tsx
import { Grid } from "@/devlink/Grid";
import { ProductCard } from "./ProductCard";

interface ProductGridProps {
  products: Product[];
  category: string;
}

export function ProductGrid({ products, category }: ProductGridProps) {
  return (
    <Grid 
      id="product-grid-123" // Keep original Webflow ID for styling
      data-category={category} // ✅ Use custom attributes for dynamic data
      data-product-count={products.length}
    >
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </Grid>
  );
}
```

---

# Props and Slots in Exported Components

> How to create and expose custom properties in Webflow Designer for use in React.

DevLink converts Webflow’s component properties into fully typed React props, giving you programmatic control over your components.

These props come with full TypeScript support and preserve all the defaults and rules set up in Webflow. You can use them to update content, handle user interactions, and control how your components behave in your React app.

## Basic props

Webflow’s native component properties for content and visibility. The visual editor defines these properties, and DevLink automatically types them in React. Component export supports the following properties:

A prop’s **Type** setting determines the values it can accept and how it appears in the Designer.

<div>
  <div>
    * Text
    * Video
    * Link
  </div>

  <div>
    * Rich text
    * Number
    * Visibility
  </div>
</div>

#### Example: Notification button

This **Button** component has text and visibility props to show the number of new notifications for a user. The `text` prop sets the number of notifications, while the `showThis` visibility prop shows/hides the button based on the number of notifications.

```jsx title="Dashboard.tsx"
import { Button } from "../../devlink/Button";


export default function Dashboard({numNotifications}: {numNotifications: number}) {
  return (
    <div>
      <Button
        text={`${numNotifications} new notifications`}
        showIcon={numNotifications > 0}
      />
    </div>
  );
}
```

## DevLink props

DevLink-specific props customize the behavior of the exported component in your React app. They're not natively supported on Webflow sites, but can be configured in the Designer before exporting.

### Runtime props

Runtime props let you add React-specific behavior to an exported component where Webflow doesn’t have a native setting. When you add a runtime-props property to an element in the Designer, DevLink generates a matching React prop and spreads it onto that element’s underlying HTML node.

#### Creating runtime props in Webflow

Add runtime props to your components by selecting a supported element, then navigating to the element’s settings panel.

In the DevLink section, you can add runtime props to the element. Only certain elements have support for Runtime Props.

<div>
  <Frame caption="Runtime props component property">
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/05870ec2a862afde6d526dabe621e65d78f5d05e8b4289e7be2f17325d9cd3cc/products/devlink/pages/exported-components/assets/runtime-props.png" />
  </Frame>
</div>

Use runtime props to:

* Handle events (e.g., `onClick`, `onSubmit`)
* Apply specific inline styles via the React style prop
* Override the element’s class (not recommended—replaces Webflow classes)
* Attach a React `ref`

#### Example: Notification button

This **Button** component has a `buttonProps` runtime prop to handle the click event of the button. The `buttonProps` prop is an object that contains the properties of the button.

```jsx title="Dashboard.tsx"
import { Button } from "../../devlink/Button";


export default function Dashboard({numNotifications}: {numNotifications: number}) {
  return (
    <div>
      <Button
        text={`${numNotifications} new notifications`}
        showIcon={numNotifications > 0}
        buttonProps={{ onClick: () => handleClick() }}
      />
    </div>
  );
}
```

### DevLink slots

A **slot** is a DevLink-specific property that accepts a React component as its value.

Slots let you nest components inside other components in your React app. This is especially useful when you need to combine Webflow-authored structure with custom React logic or third-party components that can’t be built in Webflow directly.

To set a slot property on an element, create a wrapper div block in the component, then go to the Element settings panel > DevLink > Slot, then connect it to a property.

#### Example: Card component with a slot

This **Card** component has a `cardContent` slot that accepts a React component as its value.

```jsx title="Card.tsx"
import { Card } from "@/devlink/Card";
import { UserProfile } from "@/components/UserProfile";

export function Example() {
  return (
    <Card
      cardContent={
        <UserProfile id="42" />
      }
    />
  );
}
```

**When to use slots**

* Embed custom React components (e.g., charts, modals, media players).
* Integrate third-party libraries inside a Webflow-made layout.
* Pass dynamic content into a reusable Webflow component without hard-coding it in the Designer.

<Warning title="DevLink slots are different than Webflow Component Slots">
  DevLink slots enable you to inject custom React components or content into specific areas of an exported React component. In contrast, Webflow Component Slots are used within Webflow’s visual editor to insert Webflow Components into designated areas of a component.

  **Webflow Component Slots aren’t supported in DevLink.**
</Warning>

---

# Interactions

> Principles for interactions in Webflow to ensure clean export

[Webflow interactions](/devlink/docs/component-export/design-guidelines/interactions) are JavaScript-powered animations and transitions. Most interactions are supported in Exported Components. See the \[#page-interactions] section for more details on specific limitations.

## Enabling interactions

To enable interactions in your Exported Components, you need to wrap your application in the `DevLinkProvider` component.

```tsx title="app/layout.tsx"
import { DevLinkProvider } from '@/devlink/DevLinkProvider';
import '@/devlink/global.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <DevLinkProvider>
          {children}
        </DevLinkProvider>
      </body>
    </html>
  );
}

```

### Page interactions

Webflow components support [page triggers](https://help.webflow.com/hc/en-us/articles/33961357722643-Triggers-and-animations#page-triggers) with a limitation: DevLink only exports the first page interaction. If a component uses multiple page interactions across different pages, DevLink will only export the first one.

### GSAP-powered interactions

<Warning title="GSAP-powered interactions aren't supported in Exported Components.">
  GSAP-powered interactions aren't supported in Exported Components.
</Warning>

---

# Using Exported Components

> Guides for React developers on how to import, configure, and extend Exported Components in their applications.

Once you've exported your components, you can use them in your React project. This section provides guides for integrating Exported Components with various frameworks, styling and theming, data and state integration, and best practices for usage.

## Using Exported Components

<Steps>
  <Step title="Apply Webflow's design system globally">
    To apply Webflow's design system globally, import the `global.css` file at the root of your application.

    ```tsx title="app/layout.tsx"
    import { DevLinkProvider } from '@/devlink/DevLinkProvider';
    import '@/devlink/global.css';
    ```
  </Step>

  <Step title="Wrap your application in the DevLinkProvider component">
    Wrap your application in the `DevLinkProvider` component to ensure all exported components have access to Webflow interactions.

    ```tsx title="app/layout.tsx"
    import { DevLinkProvider } from '@/devlink/DevLinkProvider';
    import '@/devlink/global.css';

    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode;
    }) {
      return (
        <html lang="en">
          <body>
          {/* Wrap your application in the DevLinkProvider component */}
            <DevLinkProvider>
              {children}
            </DevLinkProvider>
          </body>
        </html>
      );
    }
    ```
  </Step>

  <Step title="Use the DevLink alias">
    To import the components and styles into your React project, you can use the DevLink alias. To set up the alias, update the paths in `tsconfig.json` to the correct location of your DevLink components.

    ```json title="tsconfig.json"
    {
      "compilerOptions": {
        "paths": {
          "@/*": ["./src/*"],
          "@/devlink": ["./devlink"],
          "@/devlink/*": ["./devlink/*"]
        }
      }
    }
    ```
  </Step>

  <Step title="Use the exported components">
    Now you can import and use your Webflow components in your application. This particular example uses three components exported from Webflow via DevLink: `Hero`, `Card`, and `Button`.

    You can use them in your application:

    ```tsx title="app/page.tsx"
    import { Button } from '@/devlink/Button';
    import { Card } from '@/devlink/Card';
    import { Hero } from '@/devlink/Hero';

    export default function Home() {
      return (
        <main>
          <Hero />
          <Card />
          <Button />
        </main>
      );
    }
    ```

    <Note title="Always include the component name in the import">
      Always include the component name in the import. For example, `import { Hero } from '@/devlink/Hero';` instead of `import { Hero } from '@/devlink';`.
    </Note>
  </Step>
</Steps>

## Learn more

<CardGroup cols={2}>
  <Card
    title="Getting Started"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CirclePlay.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CirclePlay.svg" alt="" className="light-icon" />
      </>
    }
    href="/devlink/docs/quick-start/quick-start-component-export"
  >
    How to setup DevLink and export components to a React project.
  </Card>

  <Card
    title="Framework Guides"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/ComponentsCode.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/ComponentsCode.svg" alt="" className="light-icon" />
      </>
    }
    href="/devlink/usage/framework-guides"
  >
    Specific guides for integrating DevLink with various frameworks, including Next.js (App Router & Pages Router), Remix, Gatsby, and Vite/CRA.
  </Card>

  <Card
    title="Styling and Theming Overrides"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Styles.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Styles.svg" alt="" className="light-icon" />
      </>
    }
    href="/devlink/usage/styling-and-theming-overrides"
  >
    How to override DevLink component styles using CSS Modules, global CSS imports, reusing Webflow classes, targeting namespaced selectors, and advanced configuration.
  </Card>

  <Card
    title="Troubleshooting DevLink"
    iconPosition="left"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Troubleshooting.svg" alt="" className="dark-icon" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Troubleshooting.svg" alt="" className="light-icon" />
      </>
    }
    href="/devlink/docs/component-export/usage/troubleshooting"
  >
    Solutions for common issues encountered when working with DevLink, including authentication, component sync, styling, interactions, and framework-specific problems.
  </Card>
</CardGroup>

---

# Framework Guides

> Guides for integrating DevLink with various frameworks, including Next.js, Remix, Gatsby, and Vite/CRA.

Exported components are designed to be framework-agnostic, but each framework has its own conventions and best practices for integration. This guide provides specific considerations for popular React frameworks.

Regardless of the framework you're using, follow these patterns to successfully integrate DevLink:

<CardGroup cols={2}>
  <Card
    title="Import paths"
    iconSize="12"
    icon={
      <>
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Folder.svg" alt="" className="hidden dark:block" />
        <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Folder.svg" alt="" className="block dark:hidden" />
      </>
    }
  >
    Ensure your import paths correctly resolve to your DevLink directory. Adjust import paths based on your project structure (for example, `@/DevLink`, `~/DevLink`, or relative paths).
  </Card>

  <Card
    title="SSR compatibility"
    iconSize="12"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DeveloperToolsSDK.svg" alt="" className="hidden dark:block" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DeveloperToolsSDK.svg" alt="" className="block dark:hidden" />
    </>
  }
  >
    DevLink components are fully compatible with server-side rendering. Just make sure to wrap your application with DevLinkProvider at the root level.
  </Card>

  <Card
    title="Dedupe styles"
    iconSize="12"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Styles.svg" alt="" className="hidden dark:block" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Styles.svg" alt="" className="block dark:hidden" />
    </>
  }
  >
    Some frameworks may need configuration to prevent duplicate CSS imports. Use each framework's recommended approach for CSS management.
  </Card>

  <Card
    title="Type support"
    iconSize="12"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Code.svg" alt="" className="hidden dark:block" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Code.svg" alt="" className="block dark:hidden" />
    </>
  }
  >
    DevLink generates type definitions for each Webflow component. Ensure your `tsconfig.json` includes the DevLink directory `*.ts` files.
  </Card>
</CardGroup>

## React Server Components

Exported components, which often rely on client-side JavaScript for interactions and styling, may not work directly with React Server Components (RSC). To use Webflow components in your React application, it's recommended to:

* Use exported Webflow components only within client components.
* Mark the React component consuming the exported Webflow component as a **client component** by adding the `"use client"` directive to the component file.
* Make sure the `DevLinkProvider` is in a client-side context (e.g., within a `layout.tsx` file marked as a client component) to enable all interactions.

```jsx title="ClientComponent.tsx"
"use client";

import { MyDevLinkComponent } from '@/devlink';

export default function ClientComponent() {
  return <MyDevLinkComponent />;
}
```

## Next.js

Next.js, with its server-side rendering (SSR) and static site generation (SSG) capabilities, requires some changes when integrating client-side DevLink components and interactions.

### Styles and interactions

To support interactions, your application must be wrapped with the `DevLinkProvider` component.

<Tabs>
  <Tab title="App Router">
    When using the Next.js App Router in versions 13 and higher, you’ll need to:

    * Import and set up the `DevLinkProvider` in your root `layout.tsx` file
    * Import global styles from DevLink

    ```tsx title="app/layout.tsx"
    import { DevLinkProvider } from '@/devlink/DevLinkProvider';
    import '@/devlink/global.css';

    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode;
    }) {
      return (
        <html lang="en">
          <body>
            <DevLinkProvider>
              {children}
            </DevLinkProvider>
          </body>
        </html>
      );
    }
    ```

    <Note title="React Server Components">
      The Next.js App Router uses React Server Components by default. For exported Webflow components that rely on client-side JavaScript for interactions and styling, you may need to add the `"use client"` directive at the top of your component files.
    </Note>
  </Tab>

  <Tab title="Pages Router">
    When using the Next.js Pages Router, you’ll need to:

    * Import and set up the `DevLinkProvider` in your `_app.tsx` file
    * Import global styles from DevLink

    ```tsx title="pages/_app.tsx"
    import { DevLinkProvider } from '@/devlink/DevLinkProvider';
    import '@/devlink/global.css';
    import type { AppProps } from 'next/app';
    export default function App({ Component, pageProps }: AppProps) {
      return (
        <DevLinkProvider>
          <Component {...pageProps} />
        </DevLinkProvider>
      );
    }
    ```
  </Tab>
</Tabs>

### Links and Images

Some frameworks like Next.js provide their own Link and Image components for use in applications. You can choose to override DevLink’s builtin Link and Image components with the ones from Next.js by passing a custom component to the `renderLink` and/or `renderImage` props of the `<DevLinkProvider>` component.

<Steps>
  <Step title="Update the Next.js Configuration">
    Update the Next.js configuration to ensure Image components work with external URLs.

    ```tsx title="next.config.ts"
    const nextConfig = {
      images: {
        remotePatterns: [
          {
            protocol: "https",
            hostname: "uploads-ssl.webflow.com",
          },
        ],
      },
    };
    module.exports = nextConfig;
    ```
  </Step>

  <Step title="Create custom components">
    Create custom components that will wrap the Next.js Link and/or Image components:

    ```tsx title="renderers.tsx" maxLines=10
      "use client";

      import Image from "next/image";
      import Link from "next/link";
      import { RenderLink, RenderImage } from "@/devlink";

      export const LinkRenderer: RenderLink = ({
        href,
        className,
        children,
        ...props,
      }) => (
        <Link href={href} className={className} {...props}>
          {children}
        </Link>
      );

      export const ImageRenderer: RenderImage = ({
        src,
        alt,
        height,
        width,
        loading,
        className,
        ...props,
      }) => {
        const imgProps = {
          loading,
          className,
          src: typeof src === "string" ? src : "",
          alt: alt || "",
          width: width === "auto" ? undefined : (width as number),
          height: height === "auto" ? undefined : (height as number),
          // Note: this will fill the image to its parent element container
          // so you'll need to style the parent container with the desired size.
          fill: width === "auto" || height === "auto",
          ...props,
        };

        return <Image {...imgProps} />;
      };

    ```
  </Step>

  <Step title="Configure the DevLinkProvider">
    In `layout.tsx`, pass the custom components to the `renderLink` and/or `renderImage` props of the `<DevLinkProvider>` component.

    ```tsx title="layout.tsx"
    import "@/devlink/global.css";
    import { DevLinkProvider } from "@/devlink/DevLinkProvider";
    import { LinkRenderer, ImageRenderer } from "@/components/renderers"; // Custom components
    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode;
    }) {
      return (
        <html lang="en">
          <body>
            <DevLinkProvider renderLink={LinkRenderer} renderImage={ImageRenderer}>
              {children}
            </DevLinkProvider>
          </body>
        </html>
      );
    }
    ```
  </Step>
</Steps>

## Remix

Remix is a full-stack web framework that prioritizes web standards and performance. When using DevLink with Remix:

* **Client-side rendering**: Make sure that components relying on DevLink's JavaScript interactions are rendered client-side. You may need to use `useEffect` or other client-side hydration techniques for dynamic content.
* **Styling**: Import the DevLink `global.css` within your root `app/root.tsx` or a relevant stylesheet. Address any CSS conflicts with Remix's default styles or your custom CSS.
* **Data loading**: Integrate DevLink components with Remix's data loading mechanisms (e.g., `loader` functions) by passing fetched data as props to your DevLink-wrapped components.

**Example**

<CodeBlocks>
  ```tsx title="app/root.tsx"
  import { 
    Links, 
    LiveReload, 
    Meta, 
    Outlet, 
    Scripts, 
    ScrollRestoration 
  } from "@remix-run/react";
  import { DevLinkProvider } from '~/devlink/DevLinkProvider';
  import styles from '~/devlink/global.css';

  // Import styles using the links export
  export const links = () => [
    { rel: "stylesheet", href: styles }
  ];

  export default function App() {
    return (
      <html lang="en">
        <head>
          <Meta />
          <Links />
        </head>
        <body>
        {/* Wrap the Outlet with the DevLinkProvider */}
          <DevLinkProvider>
            <Outlet />
          </DevLinkProvider>
          <ScrollRestoration />
          <Scripts />
          <LiveReload />
        </body>
      </html>
    );
  }
  ```

  ```tsx title="app/routes/_index.tsx"
  =import { json, type LoaderFunctionArgs } from "@remix-run/node";
  import { useLoaderData } from "@remix-run/react";
  import { ProductGrid } from "~/devlink/ProductGrid";
  // or import a purely presentational DevLink component if it doesn't require browser-only APIs
  // import { ProductGrid } from "~/devlink/ProductGrid";

  export async function loader({ request }: LoaderFunctionArgs) {
    // Fetch whatever your DevLink component needs
    const res = await fetch(`${process.env.API_BASE_URL}/products`, {
      headers: { accept: "application/json" },
    });
    if (!res.ok) {
      // Let Remix’s error boundaries handle failures cleanly
      throw new Response("Failed to load products", { status: res.status });
    }
    const products = await res.json();
    return json({ products });
  }

  export default function IndexRoute() {
    const { products } = useLoaderData<typeof loader>();

    // If your DevLink component can render on the server without touching the DOM,
    // you can pass props directly to it. If it needs the browser, use the “Client” wrapper.
    return (
      <main>
        <h1>Products</h1>
        <ProductGrid products={products} />
      </main>
    );
  }

  ```
</CodeBlocks>

## Gatsby

Gatsby is a static site generator for React. You can use DevLink components inside your Gatsby project for both static and interactive content. Follow the steps below to integrate DevLink.

### Static and interactive components

* **Static components** are purely presentational and work seamlessly with Gatsby’s static generation.
* **Interactive components** rely on `window`, animations, or JavaScript APIs and need to be hydrated on the client. Use `useEffect` or a mounted state guard to avoid hydration mismatches.

**Example**

```tsx title="/src/components/DevLinkInteractiveClient.tsx"
import { useEffect, useState } from "react";
import { DevLinkInteractive } from "../devlink/DevLinkInteractive";

export function DevLinkInteractiveClient(props: any) {
  const [ready, setReady] = useState(false);
  useEffect(() => setReady(true), []);
  if (!ready) return null; // Prevents SSR mismatch
  return <DevLinkInteractive {...props} />;
}
```

### Styling

Import DevLink’s global stylesheet so your components render with the expected styles. You can do this in either:

* `gatsby-browser.tsx` to apply styles on the client, or
* A shared layout component to ensure styles are included during SSR.

### DevLinkProvider

To give all routes access to DevLink, wrap your app root element with `DevLinkProvider`. Add the wrapper to both `gatsby-browser.tsx` and `gatsby-ssr.tsx`.

<CodeBlocks>
  ```tsx title="gatsby-browser.tsx"
  import React from "react";
  import { DevLinkProvider } from "./src/devlink/DevLinkProvider";
  import "./src/devlink/global.css"; // Option A: import global styles here

  export const wrapRootElement = ({ element }: { element: React.ReactNode }) => (
    <DevLinkProvider>{element}</DevLinkProvider>
  );
  ```

  ```tsx title="gatsby-ssr.tsx"
  import React from "react";
  import { DevLinkProvider } from "./src/devlink/DevLinkProvider";

  export const wrapRootElement = ({ element }: { element: React.ReactNode }) => (
    <DevLinkProvider>{element}</DevLinkProvider>
  );
  ```
</CodeBlocks>

---

# Styling and Theming

> How to override DevLink component styles using CSS Modules, global CSS imports, and advanced configuration.

DevLink exports your Webflow styles as CSS, giving you full control over how components look in your React application. You can maintain design consistency while adding custom theming, responsive behavior, and component variants.

<Warning title="Never edit the generated files">
  Never edit the auto-generated React files or CSS Modules inside your `/devlink` folder. They will be overwritten on the next sync. Always extend or override styles externally.
</Warning>

## Global CSS setup

DevLink generates a `global.css` file containing base styles, responsive breakpoints, and CSS variables from your Webflow project. Import it once at your app's root to apply Webflow's design system globally:

```tsx title="app/layout.tsx"
import "@/devlink/global.css";
```

## Override with CSS modules

The safest way to customize DevLink components is by attaching your own CSS Module classes via the `className` prop. This approach preserves Webflow's original styles while adding your customizations:

<CodeBlocks>
  ```tsx title="CustomStyles.module.css"
  .fancyButton {
    border-radius: 8px;
    padding: 1rem 2rem;
  }
  ```

  ```tsx title="Page.tsx"
  import overrides from "./CustomStyles.module.css";
  import { Button } from "@/devlink";

  export function Page() {
    return <Button className={overrides.fancyButton}>Click me</Button>;
  }
  ```
</CodeBlocks>

## Reuse Webflow classes and variables

DevLink exports your Webflow project's class names and CSS variables, enabling you to build custom components that match your design system. This approach is ideal for components with dynamic data or complex interactions that you wouldn't build in Webflow:

**Custom-built React component:**

<CodeBlocks>
  ```tsx title="ProductCard.tsx"
  import "./ProductCard.module.css";

  interface ProductCardProps {
    product: {
      id: string;
      name: string;
      price: number;
      image: string;
    };
    onAddToCart: (productId: string) => void;
  }

  export function ProductCard({ product, onAddToCart }: ProductCardProps) {
    return (
      <div className="webflow-card">
        <img 
          src={product.image} 
          alt={product.name}
          className="webflow-card-image"
        />
        <div className="webflow-card-content">
          <h3 className="webflow-heading-small">{product.name}</h3>
          <p className="webflow-text-large">${product.price}</p>
          <button 
            className="webflow-button-primary"
            onClick={() => onAddToCart(product.id)}
          >
            Add to Cart
          </button>
        </div>
      </div>
    );
  }
  ```

  ```css title="ProductCard.module.css"
  .webflow-card {
    background-color: var(--color-neutral-100);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-medium);
  }

  .webflow-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius-small);
  }

  .webflow-card-content {
    margin-top: var(--spacing-small);
  }

  ```
</CodeBlocks>

Additionally, you can reuse component classes from your Webflow project in your custom-built React components, by importing the CSS module into your custom component styles.

## Custom Identifiers

DevLink automatically transforms **custom IDs** into safe, namespaced selectors using CSS Modules, preventing style conflicts when components are used in larger React apps.

Custom IDs are transformed into the following format:

```
<ComponentName>_<custom-id>__<unique-identifier>

```

For example, a custom ID of `featured-section` on a **Grid** element within a `Hero` component may become: `Hero_featured-section__abc123`

Use attribute selectors with wildcards to style elements reliably:

<CodeBlocks>
  ```css title="CustomStyles.module.css"
  /* Target elements with custom IDs */
  [id*="ProductGrid_featured-section__"] {
    background-color: var(--color-accent);
    padding: var(--spacing-large);
  }

  /* Target elements with custom attributes */
  [data-category="electronics"] {
    border: 2px solid var(--color-primary);
  }

  [data-product-count] {
    position: relative;
  }
  ```

  ```tsx title="ProductGrid.tsx"
  import { Grid } from "@/devlink/Grid";
  import styles from "./CustomStyles.module.css";

  export function ProductGrid({ products, category }: ProductGridProps) {
    return (
      <Grid 
        id="featured-section" // Custom ID for styling hooks
        data-category={category} // Custom attribute for conditional styling
        data-product-count={products.length}
        className={styles.productGrid}
      >
        {/* Grid content */}
      </Grid>
    );
  }
  ```
</CodeBlocks>

### Avoid dynamic IDs

Some Webflow elements (like Grid or Quick Stack) rely on fixed IDs for CSS. If you replace them dynamically in React, the exported CSS will no longer apply. Instead, use custom attributes to keep Webflow’s styling intact while allowing you to attach your own identifier.

<Warning title="Don't do this">
  ```jsx
  // ❌ This breaks Webflow’s generated CSS
  <Grid id={sectionId} />
  ```
</Warning>

<Tip title="Use custom attributes instead">
  ```jsx dashboard.jsx
  // ✅ Use custom attributes instead
  <Grid 
    data-section-id={sectionId} 
  />
  ```
</Tip>

## CSS-in-JS integration

If your project uses styled-components or emotion, you can wrap DevLink components with styled overrides. This approach works well for component variants and theme-based styling:

```tsx title="Dashboard.tsx"
import styled from "styled-components";
import { Button } from "@/devlink";

const DangerButton = styled(Button)`
  background-color: red;
  border-radius: 4px;
  color: white;
`;

<DangerButton>Delete</DangerButton>
```

## Tailwind CSS integration

### Prevent style conflicts

To avoid conflicts between DevLink's global styles and Tailwind's reset, enable `skipTagSelectors` in your DevLink configuration:

<CodeBlocks>
  ```json title="webflow.json"
  {
    "devlink": {
      "skipTagSelectors": true
    }
  }
  ```

  ```javascript title=".webflowrc.js"
  module.exports = {
    skipTagSelectors: true
  }
  ```
</CodeBlocks>

### Control style priority

To give DevLink styles higher priority over Tailwind's reset, add a custom layer to your CSS:

```css title="src/globals.css"
@layer base, components, utilities, devlink;
```

---

# Troubleshooting Exported Components

> Solutions for common issues when working with DevLink

This guide covers common issues you might encounter when working with DevLink and provides solutions to help you resolve them.

## Authentication and setup

<Accordion title="API token authentication failures">
  **Issue**: DevLink sync fails with authentication errors

  **Solutions**:

  1. Verify your Webflow API token has the correct permissions
  2. Check that your token is properly stored in your `.env` file
  3. Ensure the token is being accessed correctly in your `.webflowrc.js` / `webflow.json` file
</Accordion>

<Accordion title="Configuration File Location">
  **Issue**: The DevLink CLI can't find your configuration

  **Solutions**:

  1. Ensure `.webflowrc.js` / `webflow.json` is in the root directory of your project
  2. Check that the file has the correct name and extension
  3. Verify the file has proper syntax
</Accordion>

<Accordion title="@/devlink not found">
  Many code examples in the DevLink guides reference importing DevLink components from an alias:

  ```typescript
  import { Button } from "@/devlink/Button";
  ```

  You can set up your project to import via this alias in various ways once you've synced your components. Here are a few examples:

  **Via `tsconfig.json`**

  Update the `paths` in the `tsconfig.json` file to point to the correct location of your DevLink components.

  ```json title="tsconfig.json"
  {
    "compilerOptions": {
      "paths": {
        "@/*": ["./src/*"],
        "@/devlink": ["./devlink"],
        "@/devlink/*": ["./devlink/*"]
      }
    }
  }
  ```

  **Via Webpack**

  Update the `resolve.alias` settings in your Webpack configuration to point to the correct location of your DevLink components.

  ```javascript title="webpack.config.js"
  const path = require('path');

  module.exports = {
    // ...
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'devlink'),
      }
    }
  }
  ```
</Accordion>

## Component sync issues

<Accordion title="Missing components">
  **Issue**: Some components aren't exported from Webflow

  **Solutions**:

  1. Verify the elements are properly converted to Components in Webflow (not just elements on the canvas)
  2. Check if the components use only [supported elements](/devlink/docs/component-export/design-guidelines/component-architecture#supported-elements)
  3. Ensure component names don't contain special characters or spaces
</Accordion>

<Accordion title="Sync Process Failures">
  **Issue**: The sync process starts but fails to complete

  **Solutions**:

  1. Check for network connectivity issues
  2. Verify you're not exceeding API rate limits
  3. Try syncing specific components instead of all at once

  You can sync a specific component by name:

  ```bash
  webflow devlink sync YourComponentName
  ```
</Accordion>

## Styling and rendering issues

<Accordion title="Missing Styles">
  **Issue**: Components don't look the same as in Webflow

  **Solutions**:

  1. Ensure the DevLink `global.css` file is [imported at the application root](/devlink/docs/component-export/installation)
  2. Verify the `DevLinkProvider` component is [wrapping your application at the root](/webflow-cloud/devlink/styling-and-interactions#handling-webflow-interactions)
  3. Check for CSS conflicts with other styles in your application
  4. Inspect the browser console for CSS-related errors
</Accordion>

<Accordion title="Font Loading Issues">
  **Issue**: Custom fonts don't appear correctly

  **Solutions**:

  1. Check if the fonts are being loaded from the correct source
  2. Ensure font imports in `global.css` are loading correctly
  3. Verify fonts aren't being blocked by CORS policies
  4. Consider self-hosting the fonts if they're from external sources
  5. Make sure font weights and styles match those used in Webflow
</Accordion>

<Accordion title="Z-index Issues">
  **Issue**: Elements appearing behind or in front of others incorrectly

  **Solutions**:

  1. Check z-index values in the exported CSS
  2. Inspect stacking contexts in your application
  3. Adjust z-index values as needed
  4. Consider using [React portals](https://react.dev/reference/react-dom/createPortal) for complex stacking situations
</Accordion>

## Interaction issues

<Accordion title="Interactions Not Working">
  **Issue**: Animations or interactions from Webflow don't work

  **Solutions**:

  1. Verify the `DevLinkProvider` is properly set up in your application
  2. Check if the interactions use supported features
  3. Inspect browser console for JavaScript errors
  4. Consider simplifying complex interactions
</Accordion>

## Framework-specific issues

<Accordion title="Next.js App Router Issues">
  **Issue**: DevLink components don't work with React Server Components

  **Solutions**:

  1. Add the `"use client"` directive to component files that use client-side features
  2. Import DevLink components only in client components
  3. Ensure the DevLinkProvider is in a client-side context

  Example client component:

  ```jsx
  "use client";

  import { MyDevLinkComponent } from '@/devlink';

  export default function ClientComponent() {
    return <MyDevLinkComponent />;
  }
  ```
</Accordion>

<Accordion title="Next.js Image Optimization">
  **Issue**: Images in DevLink components don't work with Next.js Image optimization

  **Solution**:
  Replace DevLink Image elements with [Next.js Image components](/webflow-cloud/devlink/framework-integrations#custom-link-and-image-components)
</Accordion>

<Accordion title="CSS Conflicts with Tailwind">
  **Issue**: DevLink styles conflict with Tailwind CSS

  **Solutions**:

  1. Use Tailwind's preflight reset cautiously
  2. Consider using Tailwind's `@layer` directive to control specificity
  3. Use more specific selectors for custom styles
  4. Enable `skipTagSelectors` in your DevLink configuration to prevent conflicts between Tailwind CSS defaults and global.css rules

  Some rules from tue DevLink `global.css` might conflict with the defaults set by Tailwind CSS. If you wish to use DevLink and Tailwind CSS on the same project, we recommend enabling `skipTagSelectors` to disable opinionated rules and selectors and only include the bare minimum required for DevLink components to work.

  In your CSS:

  ```css title="global.css"
  /* Give DevLink styles higher priority */
  @layer base, components, utilities, devlink;
  ```

  In your `.webflowrc.js` / `webflow.json`:

  {/* <!-- vale off --> */}

  <CodeBlocks>
    ```javascript title=".webflowrc.js"
    module.exports = {
      skipTagSelectors: true
    }
    ```

    ```json title="webflow.json"
    {
      "devlink": {
        "skipTagSelectors": true
      }
    }
    ```
  </CodeBlocks>

  {/* <!-- vale on --> */}

  <Note>
    When disabling global tags with `skipTagSelectors`, make sure that the parent elements of your DevLink components have a defined height/width OR your `<html/>` and `<body>` have `height: 100%;`, especially for components like Navbar and Dropdown that rely on the viewport having sufficient dimensions.
  </Note>
</Accordion>

<Accordion title="CSS Loading Issues">
  If styles aren't loading correctly:

  1. Verify the DevLink `global.css` import path is correct for your framework
  2. Ensure CSS loading is configured correctly in your app
  3. Check for CSS isolation, scoping, and conflict issues with browser tools
</Accordion>

<Accordion title="Performance Optimizations">
  To optimize DevLink components in production:

  1. Enable code splitting in your framework configuration
  2. Only import the DevLink components you need from their respective file, rather than importing from the entire `devlink` directory
  3. Consider lazy loading components that aren't needed on initial render
  4. Use production builds to minimize JavaScript and CSS
</Accordion>

## DevLink CLI Issues

<Accordion title="CLI Installation Problems">
  **Issue**: Issues installing or running the Webflow CLI

  **Solutions**:

  1. Check Node.js version (v20+ recommended)
  2. Clear npm cache and try reinstalling
  3. Ensure you have proper permissions for the installation directory

  ```bash
  # Clear npm cache
  npm cache clean --force

  # Reinstall the CLI
  npm install @webflow/webflow-cli
  ```
</Accordion>

<Accordion title="CLI Command Not Found">
  **Issue**: `Webflow` command not found after installation

  **Solutions**:

  1. Ensure the package is installed and up to date
  2. Use `npx` to run the CLI commands
  3. Add the CLI to your `package.json` scripts

  In your package.json:

  ```json
  "scripts": {
    "sync": "webflow devlink sync"
  }
  ```

  Then run:

  ```bash
  npm run sync
  ```
</Accordion>

---

# Resources for Exported Components

> A list of resources and guides for Exported Components

<CardGroup>
  <Card title="Github Examples" href="https://github.com/webflow/devlink-examples" icon="brands github" iconSize="12" iconPosition="left">
    Example React apps for exporting your Webflow styles and components using DevLink.
  </Card>

  <Card
    title="Clone a site with ready-to-export components"
    href="https://webflow.com/made-in-webflow/devlink?cloneable=true"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Favicon.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Favicon.svg" alt="" className="light-icon" />
            </>
        }
    iconSize="12"
    iconPosition="left"
  >
    Cloneable Webflow projects for configured with styles and components for export by DevLink.
  </Card>

  <Card
    title="Webflow University guide"
    href="https://help.webflow.com/hc/en-us/articles/33961378995219-DevLink-in-the-Designer"
    icon={
            <>
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/University.svg" alt="" className="dark-icon" />
                <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/University.svg" alt="" className="light-icon" />
            </> 
        }
    iconSize="12"
    iconPosition="left"
  >
    A guide to setting up Exported Components in the Designer.
  </Card>
</CardGroup>

---

# Webflow CLI

> Learn about the Webflow CLI and DevLink.

The Webflow CLI is the command line interface for developers to interact with Webflow. Use the CLI to manage DevLink by:

* Authenticating with your Webflow workspace or site
* Bundling components into importable libraries
* Exporting components from Webflow
* Importing components into Webflow

You can use the CLI directly in your project or in CI/CD pipelines to automate library imports.

## Installation

The Webflow CLI is available as a package on npm. You can install it to your project with the following command:

```bash
npm i --save-dev @webflow/webflow-cli
```

{/* <!-- vale on --> */}

## Commands

### Import

To share your library to your Workspace, use the following command:

```bash
npx webflow library share
```

This command will:

* **Authorize your workspace:** The CLI will check for a Workspace authentication token in your `.env` file. If one isn't found, the CLI will prompt you to authenticate by opening a browser window to the Workspace authorization page.
* **Bundle your library:** The CLI will bundle your library, and ask you to confirm the components you want to share.
* **Upload your library to your Workspace**

#### Options

You can use the following options to customize sharing:

| Command Option | Description                                                                                        | Default                                                  |
| -------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| `--manifest`   | Provide the path to the `webflow.json` file.                                                       | Scans the current directory for `webflow.json`.          |
| `--api-token`  | Pass a Workspace API token.                                                                        | Uses `WEBFLOW_WORKSPACE_API_TOKEN` from the `.env` file. |
| `--no-input`   | Avoid prompting or doing anything interactive. Useful for CI/CD pipelines.                         | No                                                       |
| `--verbose`    | Display more information for debugging purposes.                                                   | No                                                       |
| `--dev`        | Bundle in development mode for debugging purposes. This will disable minification and source maps. | No                                                       |

### Bundle

Bundle your library locally for debugging and testing. The `share` command automatically bundles your library, but you can use `bundle` for local development.

```bash
npx webflow library bundle --public-path http://localhost:4000/
```

#### Options

| Command Option    | Description                                                                                        |
| ----------------- | -------------------------------------------------------------------------------------------------- |
| `--public-path`   | Required. The URL where you can serve your library.                                                |
| `--force`         | Forces the bundler to finish compiling, even if there are warnings.                                |
| `--dev`           | Bundle in development mode for debugging purposes. This will disable minification and source maps. |
| `--debug-bundler` | Print the final configuration being used by webpack.                                               |

### Log

Get the logs with debug information for your last library import.

```bash
npx webflow library log
```

## CI/CD workflows

{/* <!-- vale on --> */}

Use the CLI in automated workflows by adding the `--no-input` option to avoid interactive prompts.

**Important:** Implement change detection before sharing to avoid unintentionally removing components:

* Compare current library state with previous import
* Only share when components have actually changed

```bash
npx webflow library share --no-input
```

## Troubleshooting

<Accordion title="Authentication">
  If you're having trouble authenticating with your Workspace, try the following:

  * Check your `.env` file for the `WEBFLOW_WORKSPACE_API_TOKEN` variable. Be sure to use a Workspace API token, not a Site API token.

  * Try running the share command with the `--verbose` flag to see if there is additional information in the output.
    ```bash
    npx webflow library share --verbose
    ```

  * If you're still having trouble, try running the share command with the `--api-token` flag to manually pass in your API token.
    ```bash
    npx webflow library share --api-token <your-api-token>
    ```
</Accordion>

<Accordion title="Prompts for component removal">
  If the CLI is warning you that you're about to remove components, it's because the CLI is comparing the current library state with the previous import. Be sure your component name matches the name in the previous . Otherwise, the CLI will create a new component and remove the old one.
</Accordion>

---

# Flowkit Framework

> How classes and utilities were structured in the legacy Flowkit Framework.

<svg width="100%" viewBox="0 0 951 255" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M480 211.333C468.482 211.333 458.172 208.822 449.068 203.801C440.033 198.709 432.93 191.694 427.758 182.751C422.656 173.738 420.103 163.523 420.103 152.105C420.103 140.616 422.656 130.366 427.758 121.354C432.93 112.273 440.033 105.222 449.068 100.201C458.172 95.1787 468.482 92.6679 480 92.6679C491.586 92.6679 501.93 95.1787 511.034 100.201C520.207 105.222 527.344 112.239 532.447 121.251C537.551 130.263 540.136 140.546 540.206 152.105C540.136 163.523 537.551 173.738 532.447 182.751C527.413 191.694 520.31 198.709 511.137 203.801C501.964 208.822 491.586 211.333 480 211.333ZM480 185.433C486.068 185.433 491.447 184.058 496.138 181.306C500.826 178.486 504.448 174.564 506.999 169.542C509.551 164.452 510.827 158.639 510.827 152.105C510.827 145.499 509.551 139.652 506.999 134.562C504.448 129.471 500.826 125.55 496.138 122.798C491.447 119.978 486.068 118.568 480 118.568C473.999 118.568 468.654 119.978 463.966 122.798C459.344 125.55 455.759 129.471 453.206 134.562C450.654 139.652 449.413 145.499 449.482 152.105C449.482 158.639 450.758 164.452 453.311 169.542C455.93 174.564 459.517 178.486 464.069 181.306C468.689 184.058 473.999 185.433 480 185.433Z" fill="currentColor" />

  <path d="M570.712 95.1456H539.263L573.297 208.858H600.814L623.2 136.23L647.361 208.858H674.468L708.61 95.1456H680.162L660.796 165.925L639.406 95.1456H611.884L590.589 167.483L570.712 95.1456Z" fill="currentColor" />

  <path d="M834.972 94.9606H863.471V208.523H834.972V94.9606ZM830.935 56.3967C830.935 51.8226 832.597 47.8795 835.922 44.5673C839.405 41.0973 843.759 39.3623 848.984 39.3623C854.209 39.3623 858.563 41.0184 862.046 44.3307C865.688 47.4852 867.509 51.5072 867.509 56.3967C867.509 61.2862 865.688 65.387 862.046 68.6993C858.563 71.8538 854.209 73.431 848.984 73.431C843.759 73.431 839.405 71.7749 835.922 68.4627C832.597 64.9927 830.935 60.9707 830.935 56.3967Z" fill="currentColor" />

  <path d="M716.438 40.3104H744.937V141.485L788.873 94.4036H825.447L776.523 145.98L828.534 207.966H790.773L745.412 150.002H744.937V207.966H716.438V40.3104Z" fill="currentColor" />

  <path d="M375.735 40.8674H404.234V208.523H375.735V40.8674Z" fill="currentColor" />

  <path d="M251 41.0181H359.534V67.9891H280.924V111.995H355.021V138.966H280.924V208.523H251V41.0181Z" fill="currentColor" />

  <path d="M925.401 94.9601H951V119.093H925.401V168.776C925.401 174.454 926.431 178.949 928.489 182.261C930.705 185.574 934.98 187.23 941.313 187.23C943.846 187.23 946.617 186.994 949.625 186.521C950.099 186.421 950.557 186.311 951 186.196V209.522C949.332 209.91 947.529 210.209 945.588 210.416C941.313 211.047 937.513 211.362 934.188 211.362C926.588 211.362 920.334 210.494 915.426 208.759C910.677 207.182 906.877 204.737 904.027 201.426C901.336 197.956 899.435 193.697 898.327 188.65C897.377 183.602 896.902 177.767 896.902 171.142V119.093H873.39V94.9601H896.902V62.0745H925.401V94.9601Z" fill="currentColor" />

  <path d="M206.362 24.3623H0V87.4182H206.362V24.3623Z" fill="#146EF5" />

  <path d="M134.702 96.022H0V159.078H134.702V96.022Z" fill="#146EF5" />

  <path d="M63.0559 167.668H0V230.724H63.0559V167.668Z" fill="#146EF5" />
</svg>

## Introduction

Flowkit is a modular CSS Framework designed to power visually consistent and flexible Webflow websites — especially those generated by Webflow AI. It provides a structured collection of reusable utility classes, component patterns, and design tokens that streamline layout, styling, and interactions across your entire site.

Built with scalability and clarity in mind, Flowkit helps:

* Maintain design consistency through [global variables](https://help.webflow.com/hc/en-us/articles/33961268146323-Variables)
* Style and compose layouts using utility-first [classes](https://help.webflow.com/hc/en-us/articles/33961311094419-Classes)
* Build and extend [component systems](https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview) with predictable class conventions

***

## Style guide

The Flowkit style guide provides an overview of all the components and utility classes used in the project. Each website generated by Webflow's AI tools includes a style guide page generated by the Flowkit framework.

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/f19f0168da726fdb04f560867433d5b7f6262efb25a2af2a68c76d77d39c972d/products/flowkit/pages/v2/intro/flowkit_styleguide.webp" alt="Style Guide" />

<Note title="Note">
  Style guide is a great place to change styles of the elements and components. To change colors, fonts, or spacing, open the variables panel or make the adjustments directly from the Designer canvas.
  [Learn more about variables](https://help.webflow.com/hc/en-us/articles/33961268146323-Variables).
</Note>

***

## Naming conventions

This framework uses a structured naming system with hyphens and underscores that creates predictable, reusable classes organized into four main types.

### Hyphens ' - ' Usage

Hyphens are used to:

1. Connect multiple words within component names, property names, or values:
   * <span class="sg-selector sg-class">
       rich-text
     </span>
   * <span class="sg-selector sg-class">
       text-align_center
     </span>
   * <span class="sg-selector sg-class">
       margin-top_small
     </span>
   * <span class="sg-selector sg-class">
       background_primary
     </span>
2. Define combo class modifiers (component states, surface context, spacing, interactions):
   * <span class="sg-selector sg-class">
       is-secondary
     </span>
   * <span class="sg-selector sg-class">
       on-inverse
     </span>
   * <span class="sg-selector sg-class">
       gap-small
     </span>
3. Responsive modifiers for combo classes:
   * <span class="sg-selector sg-class">
       flex_horizontal
     </span>
     <span class="sg-selector sg-class">
       tablet-vertical
     </span>
   * <span class="sg-selector sg-class">
       grid_5-col
     </span>
     <span class="sg-selector sg-class">
       mobile-2-col
     </span>

### Underscores ' \_ ' Usage

Underscores are used to:

1. Separate components from their parts or properties:
   * <span class="sg-selector sg-class">
       card_body
     </span>
   * <span class="sg-selector sg-class">
       nav_logo
     </span>
   * <span class="sg-selector sg-class">
       footer_link
     </span>
2. Connect utility properties with their values:
   * <span class="sg-selector sg-class">
       margin-top_small
     </span>
   * <span class="sg-selector sg-class">
       width_40percent
     </span>
   * <span class="sg-selector sg-class">
       z-index_2
     </span>
3. Apply responsive variants of utility classes by adding breakpoint postfixes:
   * <span class="sg-selector sg-class">text-align\_center\_mobile</span> — center-aligned text on mobile
   * <span class="sg-selector sg-class">width\_100percent\_mobile-l</span> — full width on large mobile

<Note title="Responsive modifiers: `_` vs `-`">
  There is a clear distinction between **`_`** and **`-`** when working with responsive utility classes in Flowkit:

  * **`_mobile`** is used within **utility classes** to apply styles only at a specific breakpoint.\
    Example:\
    <span class="sg-selector sg-class">text-align\_center\_mobile</span> means the text will be center-aligned **only on mobile**.\
    This class is **scoped to mobile resolution** and does not apply on tablet or desktop.

  * **`mobile-`** is used as a **combo modifier** to override or change a base style on mobile.\
    Example:\
    <span class="sg-selector sg-class">text-align\_center</span> <span class="sg-selector sg-class">mobile-align-left</span>\
    This means the text is center-aligned by default, but switches to left-aligned **on mobile**.

  Use `_mobile` when you want a utility to appear **only at a certain breakpoint**, and `mobile-` (or similar prefixes) when you want to **override an existing style** responsively using a combo class.
</Note>

***

## Class types

There are four main types of classes: `Component`, `Utility`, `Combo`, and `Responsive Modifiers`. Each of these class types follows specific naming patterns for consistency and clarity.

### Component classes

Component classes define standalone UI elements with their own structure and functionality.

**Naming Pattern:** <span class="sg-selector sg-class">component\_property</span> or <span class="sg-selector sg-class">component\_part\_property</span>

| Example                                                | Purpose                                            |
| ------------------------------------------------------ | -------------------------------------------------- |
| <span class="sg-selector sg-class">card</span>         | Flexible content container with shadow and padding |
| <span class="sg-selector sg-class">card\_body</span>   | The body part of a card component                  |
| <span class="sg-selector sg-class">nav</span>          | Main website navigation bar                        |
| <span class="sg-selector sg-class">nav\_logo</span>    | The logo part of a navigation component            |
| <span class="sg-selector sg-class">footer\_link</span> | A link element within the footer                   |
| <span class="sg-selector sg-class">footer</span>       | Site-wide footer container                         |
| <span class="sg-selector sg-class">button</span>       | Reusable clickable element                         |
| <span class="sg-selector sg-class">banner</span>       | Promotional or announcement container              |

Component classes define reusable building blocks of the UI and may have nested sub-elements, with naming that follows the parent component.

Here is an example of a Nav component with its nested elements:

<span class="sg-selector sg-class">
  nav
</span>

<div>
  <span class="sg-selector sg-class">
    nav_links
  </span>

  <div>
    <span class="sg-selector sg-class">
      nav_logo-icon
    </span>

    <br />

    <span class="sg-selector sg-class">
      nav_link
    </span>
  </div>
</div>

***

### Utility classes

Utility classes provide single-purpose styling that can be applied to any element.

**Naming Pattern:** <span class="sg-selector sg-class">property\_value</span>

| Example                                                             | Purpose                             |
| ------------------------------------------------------------------- | ----------------------------------- |
| <span class="sg-selector sg-class">margin-top\_medium</span>        | Applies medium top margin           |
| <span class="sg-selector sg-class">padding-horizontal\_large</span> | Applies large padding on both sides |
| <span class="sg-selector sg-class">z-index\_2</span>                | Sets z-index to 2                   |
| <span class="sg-selector sg-class">background\_primary</span>       | Sets background to primary color    |
| <span class="sg-selector sg-class">text-align\_center</span>        | Centers text horizontally           |
| <span class="sg-selector sg-class">text-align\_left</span>          | Applies left text alignment         |
| <span class="sg-selector sg-class">text-align\_right</span>         | Applies right text alignment        |
| <span class="sg-selector sg-class">display\_inline-block</span>     | Applies inline-block display        |

<Note title="Note">
  Utility classes may apply multiple CSS properties, but always serve a single visual purpose.
</Note>

***

### Combo classes

Combo classes are modifiers that change the appearance or behavior of components. They use specific prefixes to indicate their purpose.

| Prefix                                                                                                                                                    | Purpose                             |
| --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
| <span class="sg-selector sg-class">is-</span>                                                                                                             | Component-related modifiers         |
| <span class="sg-selector sg-class">on-</span>                                                                                                             | Surface context modifiers           |
| <span class="sg-selector sg-class">gap-</span>                                                                                                            | Spacing modifiers for flex and grid |
| <span class="sg-selector sg-class">ix-</span>                                                                                                             | Interactions related                |
| <span class="sg-selector sg-class">tablet-</span>, <span class="sg-selector sg-class">mobile-l-</span>, <span class="sg-selector sg-class">mobile-</span> | Responsive modifiers                |

Combo classes are always following a main class: <span class="sg-selector sg-class">`main class`</span> <span class="sg-selector sg-class">`prefix`-`modifier-name`</span>

| Example                                                                                                         | Purpose                                        |
| --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| <span class="sg-selector sg-class">button</span> <span class="sg-selector sg-class">is-secondary</span>         | Changes button to secondary style              |
| <span class="sg-selector sg-class">text-link</span> <span class="sg-selector sg-class">on-accent-primary</span> | Adapts text link for accent-primary background |
| <span class="sg-selector sg-class">flex\_horizontal</span> <span class="sg-selector sg-class">gap-medium</span> | Sets medium gap in flex container              |
| <span class="sg-selector sg-class">section</span> <span class="sg-selector sg-class">is-secondary</span>        | Adjust section background and text color       |

***

### Responsive modifiers

Responsive modifiers apply styles at specific breakpoints. They use device-specific postfixes.

**Postfix:**

* <span class="sg-selector sg-class">\_tablet</span> - Tablets
* <span class="sg-selector sg-class">\_mobile-l</span> - Mobile landscape
* <span class="sg-selector sg-class">\_mobile</span> - Mobile portrait

| Example                                                              | Purpose                                            |
| -------------------------------------------------------------------- | -------------------------------------------------- |
| <span class="sg-selector sg-class">width\_100percent\_tablet</span>  | Changes an element to full width on tablet screens |
| <span class="sg-selector sg-class">text-align\_center\_mobile</span> | Centers text on mobile screens                     |

***

## Sizes

T-shirt sizing provides a consistent way to name size-related classes for things like spacing, borders, text, and icons.

| Size    | Example                                                                                             |
| ------- | --------------------------------------------------------------------------------------------------- |
| xxsmall | <span class="sg-selector sg-class">icon</span> <span class="sg-selector sg-class">is-xxsmall</span> |
| xsmall  | <span class="sg-selector sg-class">icon</span> <span class="sg-selector sg-class">is-xsmall</span>  |
| small   | <span class="sg-selector sg-class">radius\_small</span>                                             |
| medium  | <span class="sg-selector sg-class">text\_medium</span>                                              |
| large   | <span class="sg-selector sg-class">gap\_large</span>                                                |
| xlarge  | <span class="sg-selector sg-class">radius\_xlarge</span>                                            |
| xxlarge | <span class="sg-selector sg-class">padding-top\_xxlarge</span>                                      |

This scale applies to layouts, spacing, typography, shadows, and other properties.

***

## Surface modifiers

The following surface modifiers are used across button, text, nav, icon, and card components. These follow the <span class="sg-selector sg-class">on-\[surface]</span> naming structure and appear in combinations for alternate background styling.

| Surface          | Example                                                                                                                                                             |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Accent Primary   | <span class="sg-selector sg-class">button</span> <span class="sg-selector sg-class">is-secondary</span> <span class="sg-selector sg-class">on-accent-primary</span> |
| Accent Secondary | <span class="sg-selector sg-class">text-link</span> <span class="sg-selector sg-class">on-accent-secondary</span>                                                   |
| Accent Tertiary  | <span class="sg-selector sg-class">icon</span> <span class="sg-selector sg-class">on-accent-tertiary</span>                                                         |
| Primary          | <span class="sg-selector sg-class">card-link</span> <span class="sg-selector sg-class">on-primary</span>                                                            |
| Secondary        | <span class="sg-selector sg-class">card-link</span> <span class="sg-selector sg-class">on-secondary</span>                                                          |
| Inverse          | <span class="sg-selector sg-class">button</span> <span class="sg-selector sg-class">on-inverse</span>                                                               |

***

## Animation modifiers

Animation-related classes that are used in [Webflow Interactions](https://help.webflow.com/hc/en-us/articles/33961310025107-Intro-to-Interactions) follow the <span class="sg-selector sg-class">ix\_</span> prefix convention. These classes are not responsible for styling but act as hooks for applying interactions and animations defined in the Webflow Interactions panel.

Examples:

| Example                                                         | Purpose                                               |
| --------------------------------------------------------------- | ----------------------------------------------------- |
| <span class="sg-selector sg-class">ix\_section-scroll-in</span> | Triggers scroll-based entrance animation for sections |
| <span class="sg-selector sg-class">ix\_image-zoom-hover</span>  | Targets images that scale on hover                    |
| <span class="sg-selector sg-class">ix\_nav-slide-out</span>     | Animates navigation on mobile menu toggle             |
| <span class="sg-selector sg-class">ix\_button-tap</span>        | Adds tap/click animation to buttons                   |
| <span class="sg-selector sg-class">ix\_card-flip</span>         | Triggers flip animation for card components           |

---

# Units

> Units are a collection of values that determine the size of a website and its parts.

## Overview

The primary unit of the framework is `REM`. It's used for sizing, spacing, and typography to ensure flexibility and accessibility. Other units are also used based on the use-case. Here is the list of all the units used:

| Category       | Unit      | Primary Uses                                                    | Description                                                                                                                          |
| -------------- | --------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **Responsive** | `REM`     | <ul><li>Typography</li><li>Spacing</li><li>Components</li></ul> | Scales with root font size (default: 16px)                                                                                           |
|                | `EM`      | <ul><li>Button padding</li><li>Icon sizes</li></ul>             | Scales with parent element's font size                                                                                               |
| **Layout**     | `%`       | <ul><li>Container widths</li><li>Max-widths</li></ul>           | Relative to parent element's size                                                                                                    |
|                | `FR`      | <ul><li>Grid columns</li><li>Grid layouts</li></ul>             | Distributes available space in CSS Grid                                                                                              |
| **Viewport**   | `VH`/`VW` | <ul><li>Hero sections</li><li>Full-height layouts</li></ul>     | Relative to viewport dimensions                                                                                                      |
|                | `DVH`     | <ul><li>Mobile layouts</li><li>Dynamic heights</li></ul>        | Adjusts for mobile browser chrome                                                                                                    |
| **Special**    | `PX`      | <ul><li>Borders</li><li>Shadows</li></ul>                       | Fixed-size elements (use sparingly)                                                                                                  |
|                | `CQW`     | Fluid typography                                                | Character-width-based unit for responsive typography. Requires <span class="sg-selector sg-class">heading-responsive\_wrapper</span> |

***

## Why do we use REM?

`REM` (short for "root em") is the foundation of our unit system.

* It scales based on the root `<html>` font size (by default `16px`)
* It makes spacing and typography fluid-responsive and consistent
* It improves accessibility and user control

If `1rem = 16px`, then:

| REM      | Pixels |
| -------- | ------ |
| `0.5rem` | 8px    |
| `1rem`   | 16px   |
| `2rem`   | 32px   |

You can override the base by embedding a rule in your Webflow project custom code:

```html
<style>
  html { font-size: 20px; } /* 1rem now equals 20px */
</style>
```

<Note title="Pro Tip">
  To see the font size change reflected in the Webflow Designer, it's best to place this code inside a [Code embed element](https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed) within a reusable Component. This ensures the override is included on every page of your project.
</Note>

***

## REM in Webflow

Webflow supports REM-based math directly in input fields. You can type formulas like 64/16 hit `↵` and get a result of 4. In Webflow `PX` is the default unit, you can switch to REM by clicking on units indicator and select REM, or simply add 64/16REM, hit `↵` and get `4 REM`.

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/bedb118254d8d8b2403c519113ea0c1937913b6e4390652ae9b6562c10be8f7e/products/flowkit/pages/v2/units/flowkit-calc.gif" alt="Style Guide" />

---

# Variables Overview

> Variables are a collection of values that determine how a website and its parts look.

Flowkit Framework uses variables to ensure consistent, scalable, and easily manageable design styling across Webflow sites. Variables in Flowkit are like design tokens: they define core values (such as colors, spacing, or typography) and are reused throughout classes.

If something needs to change — like a brand color or font size — you only update it in one place.

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/44ed6b08999ebb18ba89279963ca9bbdeaffd94ea6a506ccbd70caac70fc5a2a/products/flowkit/pages/v2/overview/flowkit-variables.webp" alt="Variables" />

Each variable has a meaningful, descriptive name following a structured naming convention.

### Categories

| Category   | Description                                        |
| ---------- | -------------------------------------------------- |
| Colors     | The foundational palette used across the system    |
| Sizes      | Spacing, radius, sizing scales, and layout metrics |
| Typography | Font families, base font sizes, and type styles    |

---

# Color

> Color variables and how they are used in the Flowkit Framework.

The framework uses a system of structured color variables that power the entire site. These variables are applied consistently across text, backgrounds, borders, and component variations.

All colors are managed through variables and that are grouped by the following roles:

* [**Core Colors**](#core-colors)<br /> The foundational palette used across the system
* [**Tints**](#tints)<br /> Create depth and hierarchy without introducing additional colors
* [**Contextual Usage**](#contextual-usage)<br /> Semantic variables that reference core colors behind the scenes

***

## Core Colors

Core colors represent the main color tokens for UI elements like buttons, cards, and links. These include both accent and neutral palettes. These are the foundational variables used for background fills, button states, and links.

| Accent Colors                                                  | Neutral Colors                                            |
| -------------------------------------------------------------- | --------------------------------------------------------- |
| <span class="sg-selector sg-var">Accent Primary</span>         | <span class="sg-selector sg-var">Neutral Primary</span>   |
| <span class="sg-selector sg-var">Accent Secondary</span>       | <span class="sg-selector sg-var">Neutral Secondary</span> |
| <span class="sg-selector sg-var">Accent Tertiary</span>        | <span class="sg-selector sg-var">Neutral Inverse</span>   |
| <span class="sg-selector sg-var">Accent Primary Hover</span>   |                                                           |
| <span class="sg-selector sg-var">Accent Secondary Hover</span> |                                                           |
| <span class="sg-selector sg-var">Accent Tertiary Hover</span>  |                                                           |

***

## Tints

Each core color includes a tint scale ranging from `A10` (lightest) to `A90` (strongest). These are used for opacity layering, accessible text, or background overlays. Tints allow you to create depth and hierarchy without introducing additional colors.

| Group            | Tint Range |
| ---------------- | ---------- |
| Accent Primary   | A10 – A90  |
| Accent Secondary | A10 – A90  |
| Accent Tertiary  | A10 – A90  |
| Neutral Primary  | A10 – A90  |
| Neutral Inverse  | A10 – A90  |

Examples:

* <span class="sg-selector sg-var">Text Secondary</span> uses <span class="sg-selector sg-var">Neutral Inverse A60</span>
* <span class="sg-selector sg-var">Border Primary</span> uses <span class="sg-selector sg-var">Neutral Inverse A50</span>
* <span class="sg-selector sg-var">BG Overlay</span> uses <span class="sg-selector sg-var">Neutral Inverse A90</span>

***

## Contextual Usage

Many design variables reference core colors behind the scenes. These are more semantic and mapped to actual UI roles. Update any of the base colors, and these will automatically reflect those changes in the UI.

| Usage Context | Variable Example                                                                                                                                                                |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Background    | <span class="sg-selector sg-var">BG Primary</span>, <span class="sg-selector sg-var">BG Accent Secondary</span>, <span class="sg-selector sg-var">BG Inverse</span>             |
| Text          | <span class="sg-selector sg-var">Text Primary</span>, <span class="sg-selector sg-var">Text On Accent Primary</span>, <span class="sg-selector sg-var">Text On Overlay</span>   |
| Border        | <span class="sg-selector sg-var">Border Primary</span>, <span class="sg-selector sg-var">Border Accent</span>, <span class="sg-selector sg-var">Border Inverse Secondary</span> |

---

# Border

> Border variables and how they are used in the Webflow CSS Framework.

Border variables control visual boundaries between components like buttons, cards, input fields, and other UI elements. These are divided into:

* **Border Color** — Defines the visible stroke color.
* **Radius** — Defines the border corner roundness (border-radius).

These values can be applied using variables or utility classes, and may vary between projects depending on style preferences.

***

## Border Color

Border color variables follow a naming pattern based on surface context or visual intent.

<ul>
  * <span class="sg-selector sg-var">
      Border Primary
    </span>
  * <span class="sg-selector sg-var">
      Border Secondary
    </span>
  * <span class="sg-selector sg-var">
      Border Inverse Primary
    </span>
  * <span class="sg-selector sg-var">
      Border Inverse Secondary
    </span>
  * <span class="sg-selector sg-var">
      Border Accent
    </span>
</ul>

These colors reference the foundational colors like `Neutral` or `Accent` and may include opacity (e.g. `Neutral Inverse A50`). The exact mapping is managed in the Variables panel.

Border color variables are applied to style the border or box shadow style of elements. For example, dividers and input fields are using border styles. Buttons and cards components are using box shadow styles.

***

## Border Radius

Radius variables define how rounded the corners of elements should be. These values are used consistently across cards, buttons, input fields, etc.

**Common radius sizes:**

* <span class="sg-selector sg-var">
    Small Radius
  </span>
* <span class="sg-selector sg-var">
    Medium Radius
  </span>
* <span class="sg-selector sg-var">
    Large Radius
  </span>
* <span class="sg-selector sg-var">
    X Large Radius
  </span>

***

<Note title="Utility Classes">
  To apply or override border radius styles consistently across elements, use the available utility classes. You can find the full list and usage examples in the [Border Radius Utilities](/flowkit/reference/utilities#border-radius) section.
</Note>

---

# Spacing

> How spacing variables and gap utilities are structured in the Flowkit Framework.

Foundational predefined REM-based set of variables called <span class="sg-selector sg-var">Spacing</span> are used for margins, paddings, and gaps of components. This ensures consistent rhythm and layout behavior across the entire system.

***

### Size Variables

All the base spacing values are defined using a simple <span class="sg-selector sg-var">`value`x</span> naming convention. You can think of `x` as a multiplier of the base unit (1rem = 16px).

| Variable                                      | REM Value | Preview |
| --------------------------------------------- | --------- | ------- |
| <span class="sg-selector sg-var">0.25x</span> | 0.25rem   |         |
| <span class="sg-selector sg-var">0.5x</span>  | 0.5rem    |         |
| <span class="sg-selector sg-var">0.75x</span> | 0.75rem   |         |
| <span class="sg-selector sg-var">1x</span>    | 1rem      |         |
| <span class="sg-selector sg-var">1.25x</span> | 1.25rem   |         |
| <span class="sg-selector sg-var">1.5x</span>  | 1.5rem    |         |
| <span class="sg-selector sg-var">1.75x</span> | 1.75rem   |         |
| <span class="sg-selector sg-var">2x</span>    | 2rem      |         |
| <span class="sg-selector sg-var">3x</span>    | 3rem      |         |
| <span class="sg-selector sg-var">4x</span>    | 4rem      |         |
| <span class="sg-selector sg-var">5x</span>    | 5rem      |         |
| <span class="sg-selector sg-var">6x</span>    | 6rem      |         |
| <span class="sg-selector sg-var">7x</span>    | 7rem      |         |
| <span class="sg-selector sg-var">8x</span>    | 8rem      |         |

<Note title="Note">
  Variables can be remapped. For example, `0.25x` might be set to `0.5rem` based on your project's scale. To learn more about how `rem` works and why we use it, see the <a href="/flowkit/getting-started/units">Units page</a>.
</Note>

***

## Gap Variables

Used in flex and grid layouts. These use t-shirt sizing for consistent spacing across UI elements.

<ul>
  * <span class="sg-selector sg-var">
      gap-xsmall
    </span>
  * <span class="sg-selector sg-var">
      gap-small
    </span>
  * <span class="sg-selector sg-var">
      gap-medium
    </span>
  * <span class="sg-selector sg-var">
      gap-large
    </span>
  * <span class="sg-selector sg-var">
      gap-xlarge
    </span>
  * <span class="sg-selector sg-var">
      gap-xxlarge
    </span>
</ul>

***

## Utility Class Examples

Example of classes that apply spacing using the same variables as above for consistency:

* <span class="sg-selector sg-class">
    icon
  </span>
  <span class="sg-selector sg-class">
    is-small
  </span>
* <span class="sg-selector sg-class">
    flex_horizontal
  </span>
  <span class="sg-selector sg-class">
    gap-small
  </span>
* <span class="sg-selector sg-class">
    padding-bottom_small
  </span>
* <span class="sg-selector sg-class">
    margin-top_small
  </span>

---

# Typography

> The typography system provides consistent text styling using variables to control size, spacing, and hierarchy.

The typography system provides consistent text styling with variables to control **size**, **spacing**, and **hierarchy**.

The base typography variables define the fundamental text properties used throughout the project. These variables are inherited by the default <span class="sg-selector sg-tag">Paragraph</span>, <span class="sg-selector sg-tag">Text</span> elements, and <span class="sg-selector sg-tag">Body</span> tag.

| Base Typography Variable                                    | Property                       |
| ----------------------------------------------------------- | ------------------------------ |
| <span class="sg-selector sg-var">Base Font</span>           | Font Family                    |
| <span class="sg-selector sg-var">Base Font Size</span>      | Font Size (1rem)               |
| <span class="sg-selector sg-var">Base Font Weight</span>    | Font Weight                    |
| <span class="sg-selector sg-var">Base Letter Spacing</span> | Letter Spacing                 |
| <span class="sg-selector sg-var">Base Line Height</span>    | Line Height                    |
| <span class="sg-selector sg-var">Base Margin Bottom</span>  | Margin Bottom (using em units) |

<Note title="Note">
  In the Webflow Variables panel, these variables appear exactly as shown in the 

  **Properties**

   column above.
  In the Styles panel, purple color indicates that the property is linked to a variable.
</Note>

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/223c29aae2420614e594dc8a862bd8a18a793a6a464367fb5d0d310423860bff/products/flowkit/pages/v2/typography/flowkit_typography.webp" alt="Styles panel with linked variables" />

***

## Font Family

A font family is applied to text elements through the variable. To update the font, make changes in the Variables panel.

| Font Variables                                       | Usage                                                                                                                                                                                               |
| ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span class="sg-selector sg-var">Heading Font</span> | <span class="sg-selector sg-tag">All H1-H6 Heading</span> and <span class="sg-selector sg-class">heading\_h1</span> through <span class="sg-selector sg-class">heading\_h6</span> heading selectors |
| <span class="sg-selector sg-var">Body Font</span>    | <span class="sg-selector sg-tag">Body</span> tag, <span class="sg-selector sg-tag">All Paragraph</span> tag, default text, text links                                                               |
| <span class="sg-selector sg-var">Button Font</span>  | <span class="sg-selector sg-tag">Button</span> tag, <span class="sg-selector sg-class">button</span> class, <span class="sg-selector sg-class">tag</span> class, etc.                               |

***

## Headings

Heading tags and classes use the same variables, making it easy to keep styles consistent and manage them in the variables panel.

Here's an example of how variables are applied to the <span class="sg-selector sg-class">heading\_h1</span> and <span class="sg-selector sg-tag">All H1 Heading</span> tag:

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/5cb768cdc3bbb257b0ffb007b8fe243ff629bea9a6a9e197e351aea41c561778/products/flowkit/pages/v2/typography/flowkit_heading.webp" alt="Styles panel with linked variables" />

Each heading level has its own responsive variables for different breakpoints, following the same pattern.

<Note title="Subheading">
  For consistency across the site, Flowkit uses the <span class="sg-selector sg-class">subheading</span> class to accompany headings.\
  It works with any text element and automatically inherits its color, applying a transparent tint.
</Note>

***

## Paragraph

Similar to headings, <span class="sg-selector sg-tag">All Paragraphs</span> selector, <span class="sg-selector sg-class">text</span> class, and its size variations properties are controlled through related text variables.

Available text sizes:

* <span class="sg-selector sg-tag">
    All Paragraphs
  </span>
* <span class="sg-selector sg-class">text</span> (default)
* <span class="sg-selector sg-class">
    text
  </span>
  <span class="sg-selector sg-class">
    is-small
  </span>
* <span class="sg-selector sg-class">
    text
  </span>
  <span class="sg-selector sg-class">
    is-large
  </span>
* <span class="sg-selector sg-class">
    text
  </span>
  <span class="sg-selector sg-class">
    is-xlarge
  </span>
* <span class="sg-selector sg-class">
    text
  </span>
  <span class="sg-selector sg-class">
    is-xxlarge
  </span>

***

## Default Spacing

Headings and paragraphs have default bottom spacing applied via variables.\
For example, the <span class="sg-selector sg-class">heading\_h1</span> and <span class="sg-selector sg-tag">All H1 Heading</span> use the variable <span class="sg-selector sg-var">H1 Margin Bottom</span>\
The same pattern applies to paragraphs using <span class="sg-selector sg-var">Base Margin Bottom</span>.

To override this spacing, use a margin utility class such as:\
<span class="sg-selector sg-class">margin-bottom\_none</span>

See the full list of margin utilities [here](/flowkit/reference/utilities#margin).

***

## Utility classes

Also check how to use utility classes to override the default behavior of typography classes:

* [Text Color Modifiers](/flowkit/reference/utilities#text-color)
* [Text Alignment Modifiers](/flowkit/reference/utilities#text-alignment)

***

## Best Practices

* **Use variables for consistency** — Modify variables when possible instead of creating custom styles.
* **Choose appropriate sizes** — Use <span class="sg-selector sg-class">text</span> <span class="sg-selector sg-class">is-small</span> for small text, <span class="sg-selector sg-class">text</span> <span class="sg-selector sg-class">is-large</span> / <span class="sg-selector sg-class">is-xlarge</span> / <span class="sg-selector sg-class">is-xxlarge</span> for emphasis.
* **Maintain readability** — Ensure text remains readable at all screen sizes.
* **Preserve hierarchy** — Maintain clear distinction between headings and paragraph text.
* **Semantic order** — Keep the hierarchy in tag usage (e.g., `h1` > `h2` > `h3` > `p`).
* **One H1 tag per page** — Only one <code>h1</code> tag per page. If you need multiple visually styled H1s, apply the <span class="sg-selector sg-class">heading\_h1</span> class instead.

---

# Page Structure

> Page and section structure in the Flowkit Framework.

## Page Structure

The Webflow CSS Framework uses a semantic and component-based layout system. Here's a typical page layout using semantic tags:

<div>
  Page – tag: `Body`, selector: <span class="sg-selector sg-tag">Body (All Pages)</span>

  <div>
    <div>
      Navigation – tag: `nav`, class: <span class="sg-selector sg-class">nav</span>
    </div>

    <div>
      Section – tag: `section`, class: <span class="sg-selector sg-class">section</span>

      <div>
        Container – tag: `div`, class: <span class="sg-selector sg-class">container</span>

        <div>
          Layout – e.g., grid, flex, card
        </div>
      </div>
    </div>

    <div>
      Footer – tag: `footer`, class: <span class="sg-selector sg-class">footer</span>
    </div>
  </div>
</div>

**Page structure**

<svg width="672" height="393" viewBox="0 0 672 393" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0_342_121)">
    <path d="M671.333 27.3396H0.666016V391.34H671.333V27.3396Z" fill="#0057FF" fill-opacity="0.07" stroke="#518AF8" stroke-width="1.33333" stroke-dasharray="2.67 2.67" />

    <path d="M2.66602 0.672974H49.3327C50.4394 0.672974 51.3327 1.56631 51.3327 2.67297V27.3396H0.666016V2.67297C0.666016 1.56631 1.55935 0.672974 2.66602 0.672974Z" fill="#0057FF" fill-opacity="0.07" />

    <path d="M2.66602 0.672974H49.3327C50.4394 0.672974 51.3327 1.56631 51.3327 2.67297V27.3396H0.666016V2.67297C0.666016 1.56631 1.55935 0.672974 2.66602 0.672974Z" stroke="#518AF8" stroke-width="1.33333" />

    <path d="M8.29297 20.0063V8.36633H12.2263C13.133 8.36633 13.8796 8.52633 14.4663 8.85967C15.053 9.17967 15.4796 9.633 15.7596 10.1797C16.0396 10.7397 16.1863 11.353 16.1863 12.0463C16.1863 12.7397 16.0396 13.353 15.7596 13.913C15.4796 14.473 15.053 14.9263 14.4796 15.2597C13.9063 15.593 13.1596 15.753 12.253 15.753H9.43964V14.4997H12.213C12.8396 14.4997 13.3463 14.393 13.7196 14.1797C14.093 13.9663 14.373 13.673 14.5463 13.2997C14.7196 12.9263 14.813 12.513 14.813 12.0463C14.813 11.5797 14.7196 11.1663 14.5463 10.793C14.373 10.4197 14.093 10.1397 13.7196 9.92633C13.333 9.713 12.8263 9.60633 12.1996 9.60633H9.71964V19.993H8.3063L8.29297 20.0063ZM20.8396 20.2063C20.293 20.2063 19.7863 20.0997 19.333 19.8997C18.8796 19.6863 18.5196 19.3797 18.253 18.9797C17.9863 18.5797 17.853 18.0997 17.853 17.5263C17.853 17.0197 17.9463 16.6197 18.1463 16.313C18.3463 15.993 18.613 15.753 18.933 15.5797C19.2663 15.4063 19.6263 15.273 20.0263 15.1797C20.4263 15.0863 20.8263 15.0197 21.2396 14.9663C21.773 14.8997 22.1996 14.8463 22.533 14.8063C22.8663 14.7663 23.1063 14.6997 23.2663 14.6197C23.4263 14.5263 23.493 14.3797 23.493 14.1663V14.1263C23.493 13.5663 23.333 13.1263 23.0263 12.8197C22.7196 12.513 22.2663 12.353 21.6396 12.353C21.013 12.353 20.493 12.4997 20.133 12.7797C19.773 13.0597 19.5196 13.353 19.3596 13.673L18.093 13.2197C18.3196 12.6863 18.6263 12.273 18.9996 11.9797C19.3863 11.6863 19.7996 11.473 20.253 11.353C20.7063 11.233 21.1596 11.1663 21.5996 11.1663C21.8796 11.1663 22.1996 11.2063 22.5596 11.273C22.933 11.3397 23.2796 11.473 23.6263 11.673C23.973 11.873 24.253 12.1797 24.4796 12.593C24.7063 13.0063 24.8263 13.553 24.8263 14.2463V19.993H23.4796V18.8063H23.413C23.3196 18.993 23.173 19.193 22.9596 19.4197C22.7463 19.633 22.4663 19.8197 22.1063 19.9663C21.7596 20.113 21.3196 20.193 20.813 20.193L20.8396 20.2063ZM21.0396 19.0063C21.573 19.0063 22.013 18.8997 22.3863 18.6997C22.7596 18.4863 23.0263 18.2197 23.213 17.8863C23.3996 17.553 23.493 17.2063 23.493 16.8463V15.6197C23.4396 15.6863 23.3063 15.753 23.1196 15.8063C22.933 15.8597 22.7063 15.913 22.4663 15.953C22.2263 15.993 21.9863 16.0197 21.7463 16.0597C21.5196 16.0863 21.333 16.113 21.1863 16.1263C20.8396 16.1663 20.5063 16.2463 20.213 16.353C19.9196 16.4463 19.6663 16.6063 19.4796 16.8063C19.293 17.0063 19.213 17.273 19.213 17.6197C19.213 18.0863 19.3863 18.433 19.733 18.673C20.0796 18.913 20.5196 19.0197 21.053 19.0197L21.0396 19.0063ZM30.7996 23.4597C30.1463 23.4597 29.5996 23.3797 29.133 23.2063C28.6663 23.0463 28.2796 22.833 27.973 22.553C27.6663 22.2863 27.4263 22.0063 27.2396 21.6997L28.3063 20.953C28.4263 21.113 28.5863 21.2997 28.773 21.4997C28.9596 21.713 29.213 21.8863 29.533 22.033C29.853 22.193 30.2796 22.2597 30.813 22.2597C31.5196 22.2597 32.093 22.0863 32.5596 21.753C33.013 21.4063 33.253 20.873 33.253 20.153V18.3797H33.133C33.0396 18.5397 32.893 18.7397 32.7063 18.9663C32.533 19.193 32.2663 19.4063 31.933 19.5797C31.5996 19.753 31.1463 19.8463 30.5863 19.8463C29.8796 19.8463 29.253 19.6863 28.693 19.3397C28.133 19.0063 27.693 18.5263 27.373 17.8863C27.053 17.2463 26.893 16.473 26.893 15.5663C26.893 14.6597 27.053 13.8997 27.3596 13.233C27.6796 12.5663 28.1063 12.0463 28.6663 11.6863C29.2263 11.313 29.8796 11.1397 30.613 11.1397C31.1863 11.1397 31.6263 11.233 31.9596 11.4197C32.293 11.6063 32.5596 11.8197 32.733 12.0597C32.9196 12.2997 33.053 12.4863 33.1596 12.633H33.293V11.2463H34.5863V20.2197C34.5863 20.9663 34.413 21.5797 34.0796 22.0463C33.7463 22.5263 33.293 22.8597 32.7196 23.0863C32.1463 23.313 31.5196 23.4197 30.8263 23.4197L30.7996 23.4597ZM30.7596 18.6597C31.293 18.6597 31.7463 18.5397 32.1196 18.2863C32.493 18.0463 32.773 17.6863 32.9596 17.2197C33.1463 16.753 33.253 16.2063 33.253 15.5663C33.253 14.9263 33.1596 14.3797 32.973 13.8997C32.7863 13.4197 32.5063 13.0463 32.133 12.7663C31.7596 12.4997 31.3063 12.353 30.7596 12.353C30.213 12.353 29.7196 12.4997 29.333 12.7797C28.9596 13.073 28.6796 13.4597 28.4796 13.9397C28.293 14.4197 28.1996 14.9663 28.1996 15.553C28.1996 16.1397 28.293 16.6997 28.4796 17.1663C28.6663 17.633 28.9596 17.993 29.333 18.2597C29.7063 18.5263 30.1863 18.6463 30.7463 18.6463L30.7596 18.6597ZM40.693 20.193C39.853 20.193 39.133 20.0063 38.5196 19.633C37.9196 19.2597 37.4396 18.7397 37.1196 18.0597C36.7996 17.3797 36.6263 16.6063 36.6263 15.713C36.6263 14.8197 36.7863 14.033 37.1196 13.353C37.453 12.673 37.9063 12.1397 38.493 11.753C39.0796 11.3663 39.773 11.1797 40.5596 11.1797C41.013 11.1797 41.4663 11.2597 41.9063 11.4063C42.3463 11.553 42.7463 11.8063 43.1196 12.1397C43.4796 12.473 43.773 12.9263 43.9863 13.4863C44.1996 14.0463 44.3063 14.7263 44.3063 15.5397V16.113H37.573V14.953H42.933C42.933 14.4597 42.8396 14.0197 42.6396 13.633C42.453 13.2463 42.173 12.9397 41.813 12.713C41.453 12.4863 41.0396 12.3797 40.5463 12.3797C40.013 12.3797 39.5463 12.513 39.1596 12.7797C38.773 13.0463 38.4796 13.3797 38.2663 13.8063C38.053 14.233 37.9596 14.673 37.9596 15.153V15.9263C37.9596 16.5797 38.0796 17.1397 38.3063 17.6063C38.533 18.0597 38.853 18.4063 39.2663 18.6463C39.6796 18.8863 40.1463 18.993 40.693 18.993C41.0396 18.993 41.3596 18.9397 41.653 18.8463C41.9463 18.7397 42.1863 18.593 42.3996 18.393C42.613 18.193 42.773 17.9397 42.8796 17.633L44.173 17.993C44.0396 18.433 43.813 18.8197 43.4796 19.153C43.1596 19.4863 42.7596 19.7397 42.293 19.9263C41.813 20.113 41.293 20.193 40.693 20.193Z" fill="#0057FF" />

    <path d="M655.333 67.3396H16.666V92.6729H655.333V67.3396Z" fill="#0057FF" fill-opacity="0.07" stroke="#518AF8" stroke-width="1.33333" />

    <path d="M18.666 40.673H107.999C109.106 40.673 109.999 41.5663 109.999 42.673V67.3396H16.666V42.673C16.666 41.5663 17.5593 40.673 18.666 40.673Z" fill="#0057FF" fill-opacity="0.07" />

    <path d="M18.666 40.673H107.999C109.106 40.673 109.999 41.5663 109.999 42.673V67.3396H16.666V42.673C16.666 41.5663 17.5593 40.673 18.666 40.673Z" stroke="#518AF8" stroke-width="1.33333" />

    <path d="M33.5994 48.3663V60.0063H32.2394L25.8927 50.873H25.7727V60.0063H24.3594V48.3663H25.7194L32.0794 57.5263H32.1994V48.3663H33.586H33.5994ZM38.8127 60.2064C38.266 60.2064 37.7594 60.0997 37.306 59.8997C36.8527 59.6863 36.4927 59.3797 36.226 58.9797C35.9594 58.5797 35.826 58.0997 35.826 57.5263C35.826 57.0197 35.9194 56.6197 36.1194 56.313C36.3194 55.993 36.586 55.753 36.906 55.5797C37.2394 55.4063 37.5994 55.273 37.9994 55.1797C38.3994 55.0863 38.7994 55.0197 39.2127 54.9663C39.746 54.8997 40.1727 54.8463 40.506 54.8063C40.8394 54.7663 41.0794 54.6997 41.2394 54.6197C41.3994 54.5263 41.466 54.3797 41.466 54.1663V54.1263C41.466 53.5663 41.306 53.1263 40.9994 52.8197C40.6927 52.513 40.2394 52.353 39.6127 52.353C38.986 52.353 38.466 52.4997 38.106 52.7797C37.746 53.0597 37.4927 53.353 37.3327 53.673L36.066 53.2197C36.2927 52.6863 36.5994 52.273 36.9727 51.9797C37.3594 51.6863 37.7727 51.473 38.226 51.353C38.6794 51.233 39.1327 51.1663 39.5727 51.1663C39.8527 51.1663 40.1727 51.2063 40.5327 51.273C40.906 51.3397 41.2527 51.473 41.5994 51.673C41.946 51.873 42.226 52.1797 42.4527 52.593C42.6794 53.0063 42.7994 53.553 42.7994 54.2463V59.993H41.4527V58.8063H41.386C41.2927 58.993 41.146 59.193 40.9327 59.4197C40.7194 59.633 40.4394 59.8197 40.0927 59.9663C39.746 60.113 39.306 60.193 38.7994 60.193L38.8127 60.2064ZM39.0127 59.0063C39.546 59.0063 39.986 58.8997 40.3594 58.6997C40.7327 58.4863 40.9994 58.2197 41.186 57.8863C41.3727 57.553 41.466 57.2063 41.466 56.8463V55.6197C41.4127 55.6863 41.2794 55.753 41.0927 55.8063C40.906 55.8597 40.6794 55.913 40.4394 55.953C40.1994 55.993 39.946 56.0197 39.7194 56.0597C39.4927 56.0863 39.306 56.113 39.1594 56.1263C38.8127 56.1663 38.4794 56.2463 38.186 56.353C37.8927 56.4463 37.6394 56.6063 37.4527 56.8063C37.266 57.0063 37.186 57.273 37.186 57.6197C37.186 58.0863 37.3594 58.433 37.706 58.673C38.0527 58.913 38.4927 59.0197 39.026 59.0197L39.0127 59.0063ZM52.0794 51.273L48.8527 60.0063H47.4927L44.266 51.273H45.7194L48.1327 58.233H48.226L50.6394 51.273H52.0927H52.0794ZM53.8527 60.0063V51.273H55.1994V60.0063H53.8527ZM54.5327 49.8197C54.266 49.8197 54.0394 49.7263 53.8527 49.553C53.666 49.3797 53.5727 49.1663 53.5727 48.913C53.5727 48.6597 53.666 48.4463 53.8527 48.273C54.0394 48.0997 54.266 48.0063 54.5327 48.0063C54.7994 48.0063 55.0127 48.0997 55.1994 48.273C55.386 48.4463 55.4794 48.6597 55.4794 48.913C55.4794 49.1663 55.386 49.3797 55.1994 49.553C55.0127 49.7263 54.786 49.8197 54.5327 49.8197ZM61.1727 63.4597C60.5194 63.4597 59.9727 63.3797 59.506 63.2064C59.0394 63.0464 58.6527 62.833 58.346 62.553C58.0394 62.2863 57.7994 62.0063 57.6127 61.6997L58.6794 60.953C58.7994 61.113 58.9594 61.2997 59.146 61.4997C59.3327 61.713 59.586 61.8863 59.906 62.033C60.226 62.193 60.6527 62.2597 61.186 62.2597C61.8927 62.2597 62.466 62.0863 62.9327 61.753C63.386 61.4063 63.626 60.873 63.626 60.153V58.3797H63.506C63.4127 58.5397 63.266 58.7397 63.0794 58.9663C62.906 59.193 62.6394 59.4063 62.306 59.5797C61.9727 59.753 61.5194 59.8463 60.9594 59.8463C60.2527 59.8463 59.626 59.6863 59.066 59.3397C58.506 59.0063 58.066 58.5263 57.746 57.8863C57.426 57.2463 57.266 56.473 57.266 55.5663C57.266 54.6597 57.426 53.8997 57.7327 53.233C58.0527 52.5663 58.4794 52.0463 59.0394 51.6863C59.5994 51.313 60.2527 51.1397 60.986 51.1397C61.5594 51.1397 61.9994 51.233 62.3327 51.4197C62.666 51.6063 62.9327 51.8197 63.106 52.0597C63.2927 52.2997 63.426 52.4863 63.5327 52.633H63.666V51.2463H64.9594V60.2197C64.9594 60.9663 64.786 61.5797 64.4527 62.0463C64.1194 62.5263 63.666 62.873 63.0927 63.0863C62.5194 63.313 61.8927 63.4197 61.1994 63.4197L61.1727 63.4597ZM61.1194 58.6597C61.6527 58.6597 62.106 58.5397 62.4794 58.2863C62.8527 58.0463 63.1327 57.6863 63.3194 57.2197C63.506 56.753 63.6127 56.2063 63.6127 55.5663C63.6127 54.9263 63.5194 54.3797 63.3327 53.8997C63.146 53.4197 62.866 53.0463 62.4927 52.7663C62.1194 52.4997 61.666 52.353 61.1194 52.353C60.5727 52.353 60.0794 52.4997 59.6927 52.7797C59.3194 53.073 59.0394 53.4597 58.8527 53.9397C58.666 54.4197 58.5727 54.9663 58.5727 55.553C58.5727 56.1397 58.666 56.6997 58.8527 57.1663C59.0394 57.633 59.3327 57.993 59.706 58.2597C60.0794 58.5263 60.5594 58.6463 61.1194 58.6463V58.6597ZM69.9594 60.2064C69.4127 60.2064 68.906 60.0997 68.4527 59.8997C67.9994 59.6863 67.6394 59.3797 67.3727 58.9797C67.106 58.5797 66.9727 58.0997 66.9727 57.5263C66.9727 57.0197 67.066 56.6197 67.266 56.313C67.466 55.993 67.7327 55.753 68.0527 55.5797C68.386 55.4063 68.746 55.273 69.146 55.1797C69.546 55.0863 69.946 55.0197 70.3594 54.9663C70.8927 54.8997 71.3194 54.8463 71.6527 54.8063C71.986 54.7663 72.226 54.6997 72.386 54.6197C72.546 54.5263 72.6127 54.3797 72.6127 54.1663V54.1263C72.6127 53.5663 72.4527 53.1263 72.146 52.8197C71.8394 52.513 71.386 52.353 70.7594 52.353C70.1327 52.353 69.6127 52.4997 69.2527 52.7797C68.8927 53.0597 68.6394 53.353 68.4794 53.673L67.2127 53.2197C67.4394 52.6863 67.746 52.273 68.1194 51.9797C68.506 51.6863 68.9194 51.473 69.3727 51.353C69.826 51.233 70.2794 51.1663 70.7194 51.1663C70.9994 51.1663 71.3194 51.2063 71.6794 51.273C72.0527 51.3397 72.3994 51.473 72.746 51.673C73.0927 51.873 73.3727 52.1797 73.5994 52.593C73.826 53.0063 73.946 53.553 73.946 54.2463V59.993H72.5994V58.8063H72.5327C72.4394 58.993 72.2927 59.193 72.0794 59.4197C71.866 59.633 71.586 59.8197 71.2394 59.9663C70.8927 60.113 70.4527 60.193 69.946 60.193L69.9594 60.2064ZM70.1727 59.0063C70.706 59.0063 71.146 58.8997 71.5194 58.6997C71.8927 58.4863 72.1594 58.2197 72.346 57.8863C72.5327 57.553 72.626 57.2063 72.626 56.8463V55.6197C72.5727 55.6863 72.4394 55.753 72.2527 55.8063C72.066 55.8597 71.8394 55.913 71.5994 55.953C71.3594 55.993 71.106 56.0197 70.8794 56.0597C70.6527 56.0863 70.466 56.113 70.3194 56.1263C69.9727 56.1663 69.6394 56.2463 69.346 56.353C69.0527 56.4463 68.7994 56.6063 68.6127 56.8063C68.426 57.0063 68.346 57.273 68.346 57.6197C68.346 58.0863 68.5194 58.433 68.866 58.673C69.2127 58.913 69.6527 59.0197 70.186 59.0197L70.1727 59.0063ZM80.2127 51.273V52.4063H75.6927V51.273H80.2127ZM76.9994 49.193H78.346V57.513C78.346 57.8863 78.3994 58.1797 78.506 58.3663C78.626 58.553 78.7594 58.673 78.9327 58.7397C79.106 58.8063 79.2927 58.833 79.4927 58.833C79.6394 58.833 79.7594 58.833 79.8527 58.8063C79.946 58.793 80.026 58.7663 80.0794 58.7663L80.346 59.9663C80.2527 60.0063 80.1327 60.033 79.9594 60.073C79.7994 60.113 79.586 60.1263 79.346 60.1263C78.9727 60.1263 78.5994 60.0463 78.226 59.8863C77.866 59.7263 77.5727 59.473 77.3327 59.1397C77.0927 58.8063 76.986 58.3797 76.986 57.873V49.193H76.9994ZM82.226 60.0063V51.273H83.5727V60.0063H82.226ZM82.906 49.8197C82.6394 49.8197 82.4127 49.7263 82.226 49.553C82.0394 49.3797 81.946 49.1663 81.946 48.913C81.946 48.6597 82.0394 48.4463 82.226 48.273C82.4127 48.0997 82.6394 48.0063 82.906 48.0063C83.1727 48.0063 83.386 48.0997 83.5727 48.273C83.7594 48.4463 83.8527 48.6597 83.8527 48.913C83.8527 49.1663 83.7594 49.3797 83.5727 49.553C83.386 49.7263 83.1594 49.8197 82.906 49.8197ZM89.5727 60.193C88.786 60.193 88.0927 60.0063 87.4927 59.633C86.906 59.2597 86.4394 58.7397 86.106 58.0597C85.7727 57.3797 85.6127 56.593 85.6127 55.6997C85.6127 54.8063 85.7727 53.993 86.106 53.313C86.4394 52.633 86.906 52.113 87.4927 51.7397C88.0927 51.3663 88.7727 51.1797 89.5727 51.1797C90.3727 51.1797 91.0527 51.3663 91.6394 51.7397C92.2394 52.113 92.6927 52.6463 93.026 53.313C93.3594 53.993 93.5327 54.7797 93.5327 55.6997C93.5327 56.6197 93.3727 57.393 93.026 58.0597C92.6927 58.7397 92.2394 59.2597 91.6394 59.633C91.0527 60.0063 90.3594 60.193 89.5727 60.193ZM89.5727 58.9797C90.1727 58.9797 90.666 58.8197 91.0527 58.513C91.4394 58.2063 91.7194 57.8063 91.906 57.2997C92.0927 56.793 92.186 56.2597 92.186 55.673C92.186 55.0863 92.0927 54.5397 91.906 54.0463C91.7194 53.5397 91.4394 53.1397 91.0527 52.8197C90.666 52.513 90.1727 52.353 89.5727 52.353C88.9727 52.353 88.4794 52.513 88.0927 52.8197C87.706 53.1263 87.426 53.5397 87.2394 54.0463C87.0527 54.553 86.9594 55.0997 86.9594 55.673C86.9594 56.2463 87.0527 56.793 87.2394 57.2997C87.426 57.8063 87.706 58.2063 88.0927 58.513C88.4794 58.8197 88.9727 58.9797 89.5727 58.9797ZM96.906 54.753V60.0063H95.5594V51.273H96.8527V52.633H96.9727C97.1727 52.193 97.4927 51.833 97.906 51.5663C98.3194 51.2997 98.866 51.153 99.5194 51.153C100.106 51.153 100.626 51.273 101.066 51.513C101.506 51.753 101.853 52.113 102.106 52.6063C102.346 53.0863 102.479 53.6997 102.479 54.4464V59.993H101.133V54.5397C101.133 53.8597 100.959 53.3263 100.599 52.9397C100.239 52.553 99.7594 52.3663 99.1327 52.3663C98.706 52.3663 98.3194 52.4597 97.986 52.6463C97.6527 52.833 97.386 53.0997 97.1994 53.4597C97.0127 53.8197 96.906 54.2463 96.906 54.753Z" fill="#0057FF" />

    <path d="M655.333 131.34H16.666V310.006H655.333V131.34Z" fill="#0057FF" fill-opacity="0.07" stroke="#518AF8" stroke-width="1.33333" />

    <path d="M640.667 172.673H34V295.34H640.667V172.673Z" fill="#0057FF" fill-opacity="0.07" stroke="#518AF8" stroke-width="1.33333" />

    <path d="M18.666 104.673H83.9994C85.106 104.673 85.9994 105.566 85.9994 106.673V131.34H16.666V106.673C16.666 105.566 17.5593 104.673 18.666 104.673Z" fill="#0057FF" fill-opacity="0.07" />

    <path d="M18.666 104.673H83.9994C85.106 104.673 85.9994 105.566 85.9994 106.673V131.34H16.666V106.673C16.666 105.566 17.5593 104.673 18.666 104.673Z" stroke="#518AF8" stroke-width="1.33333" />

    <path d="M30.6271 115.273C30.5604 114.7 30.2804 114.246 29.8004 113.926C29.3204 113.606 28.7204 113.446 28.0138 113.446C27.4938 113.446 27.0538 113.526 26.6671 113.7C26.2804 113.86 25.9871 114.1 25.7738 114.393C25.5604 114.686 25.4538 115.02 25.4538 115.393C25.4538 115.7 25.5338 115.966 25.6804 116.193C25.8271 116.406 26.0271 116.593 26.2538 116.74C26.4938 116.886 26.7338 117.006 26.9871 117.1C27.2404 117.193 27.4804 117.26 27.6938 117.326L28.8804 117.646C29.1871 117.726 29.5204 117.833 29.8938 117.98C30.2671 118.126 30.6271 118.313 30.9738 118.553C31.3204 118.793 31.6004 119.1 31.8271 119.473C32.0538 119.846 32.1604 120.313 32.1604 120.86C32.1604 121.486 32.0004 122.06 31.6671 122.566C31.3471 123.073 30.8671 123.473 30.2404 123.78C29.6138 124.073 28.8538 124.233 27.9604 124.233C27.1338 124.233 26.4004 124.1 25.8004 123.833C25.2004 123.566 24.7204 123.193 24.3738 122.713C24.0271 122.233 23.8404 121.673 23.7871 121.033H25.2404C25.2804 121.473 25.4271 121.833 25.6804 122.126C25.9471 122.406 26.2671 122.62 26.6671 122.766C27.0671 122.9 27.4938 122.966 27.9604 122.966C28.4938 122.966 28.9871 122.873 29.4138 122.7C29.8404 122.526 30.1871 122.273 30.4271 121.966C30.6804 121.646 30.8004 121.273 30.8004 120.846C30.8004 120.46 30.6938 120.14 30.4804 119.9C30.2671 119.66 29.9738 119.46 29.6271 119.313C29.2804 119.166 28.8938 119.033 28.4804 118.913L27.0538 118.5C26.1471 118.233 25.4271 117.86 24.8938 117.38C24.3604 116.9 24.0938 116.26 24.0938 115.473C24.0938 114.82 24.2671 114.26 24.6271 113.766C24.9871 113.273 25.4538 112.9 26.0538 112.633C26.6538 112.366 27.3338 112.22 28.0671 112.22C28.8004 112.22 29.4804 112.353 30.0671 112.62C30.6538 112.886 31.1071 113.246 31.4538 113.713C31.8004 114.18 31.9738 114.7 32.0004 115.286H30.6404L30.6271 115.273ZM37.9338 124.193C37.0938 124.193 36.3738 124.006 35.7604 123.633C35.1604 123.26 34.6804 122.74 34.3604 122.06C34.0404 121.38 33.8671 120.606 33.8671 119.713C33.8671 118.82 34.0271 118.033 34.3604 117.353C34.6938 116.673 35.1471 116.14 35.7338 115.753C36.3204 115.366 37.0138 115.18 37.8004 115.18C38.2538 115.18 38.7071 115.26 39.1471 115.406C39.5871 115.553 39.9871 115.806 40.3604 116.14C40.7204 116.473 41.0138 116.926 41.2271 117.486C41.4404 118.046 41.5471 118.726 41.5471 119.54V120.113H34.8138V118.953H40.1738C40.1738 118.46 40.0804 118.02 39.8804 117.633C39.6938 117.246 39.4138 116.94 39.0538 116.713C38.6938 116.486 38.2804 116.38 37.7871 116.38C37.2538 116.38 36.7871 116.513 36.4004 116.78C36.0138 117.046 35.7204 117.38 35.5071 117.806C35.2938 118.233 35.2004 118.673 35.2004 119.153V119.926C35.2004 120.58 35.3204 121.14 35.5471 121.606C35.7738 122.06 36.0938 122.406 36.5071 122.646C36.9204 122.886 37.3871 122.993 37.9338 122.993C38.2804 122.993 38.6004 122.94 38.8938 122.846C39.1871 122.74 39.4271 122.593 39.6404 122.393C39.8538 122.193 40.0138 121.94 40.1204 121.633L41.4138 121.993C41.2804 122.433 41.0538 122.82 40.7204 123.153C40.4004 123.486 40.0004 123.74 39.5338 123.926C39.0538 124.113 38.5338 124.193 37.9338 124.193ZM47.1338 124.193C46.3204 124.193 45.6138 124.006 45.0138 123.62C44.4271 123.233 43.9738 122.7 43.6538 122.02C43.3338 121.34 43.1738 120.566 43.1738 119.7C43.1738 118.833 43.3338 118.033 43.6671 117.353C44.0004 116.673 44.4538 116.14 45.0404 115.753C45.6271 115.366 46.3204 115.18 47.1071 115.18C47.7204 115.18 48.2804 115.3 48.7604 115.526C49.2538 115.753 49.6538 116.073 49.9738 116.486C50.2938 116.9 50.4804 117.366 50.5604 117.913H49.2138C49.1071 117.513 48.8804 117.166 48.5338 116.86C48.1871 116.553 47.7204 116.393 47.1204 116.393C46.6004 116.393 46.1338 116.526 45.7471 116.806C45.3604 117.073 45.0538 117.46 44.8271 117.953C44.6138 118.446 44.5071 119.02 44.5071 119.673C44.5071 120.326 44.6138 120.94 44.8271 121.433C45.0404 121.94 45.3471 122.326 45.7338 122.593C46.1338 122.873 46.5871 123.006 47.1204 123.006C47.4671 123.006 47.7871 122.94 48.0671 122.82C48.3471 122.7 48.5871 122.526 48.7871 122.3C48.9871 122.073 49.1204 121.793 49.2138 121.486H50.5604C50.4804 122.006 50.2938 122.46 50.0004 122.873C49.7071 123.286 49.3071 123.606 48.8271 123.846C48.3471 124.086 47.7738 124.206 47.1338 124.206V124.193ZM56.3204 115.273V116.406H51.8004V115.273H56.3204ZM53.1204 113.193H54.4671V121.513C54.4671 121.886 54.5204 122.18 54.6271 122.366C54.7471 122.553 54.8804 122.673 55.0538 122.74C55.2271 122.806 55.4138 122.833 55.6138 122.833C55.7604 122.833 55.8804 122.833 55.9738 122.806C56.0671 122.793 56.1471 122.766 56.2004 122.766L56.4671 123.966C56.3738 124.006 56.2538 124.033 56.0804 124.073C55.9204 124.113 55.7071 124.126 55.4671 124.126C55.0938 124.126 54.7204 124.046 54.3471 123.886C53.9871 123.726 53.6938 123.473 53.4538 123.14C53.2138 122.806 53.1071 122.38 53.1071 121.873V113.193H53.1204ZM58.3471 124.006V115.273H59.6938V124.006H58.3471ZM59.0271 113.82C58.7604 113.82 58.5338 113.726 58.3471 113.553C58.1604 113.38 58.0671 113.166 58.0671 112.913C58.0671 112.66 58.1604 112.446 58.3471 112.273C58.5338 112.1 58.7604 112.006 59.0271 112.006C59.2938 112.006 59.5071 112.1 59.6938 112.273C59.8804 112.446 59.9738 112.66 59.9738 112.913C59.9738 113.166 59.8804 113.38 59.6938 113.553C59.5071 113.726 59.2804 113.82 59.0271 113.82ZM65.6804 124.193C64.8938 124.193 64.2004 124.006 63.6004 123.633C63.0138 123.26 62.5471 122.74 62.2138 122.06C61.8804 121.38 61.7204 120.593 61.7204 119.7C61.7204 118.806 61.8804 117.993 62.2138 117.313C62.5471 116.633 63.0138 116.113 63.6004 115.74C64.2004 115.366 64.8804 115.18 65.6804 115.18C66.4804 115.18 67.1604 115.366 67.7471 115.74C68.3471 116.113 68.8004 116.646 69.1338 117.313C69.4671 117.993 69.6404 118.78 69.6404 119.7C69.6404 120.62 69.4804 121.393 69.1338 122.06C68.8004 122.74 68.3471 123.26 67.7471 123.633C67.1604 124.006 66.4671 124.193 65.6804 124.193ZM65.6804 122.98C66.2804 122.98 66.7738 122.82 67.1604 122.513C67.5471 122.206 67.8271 121.806 68.0138 121.3C68.2004 120.793 68.2938 120.26 68.2938 119.673C68.2938 119.086 68.2004 118.54 68.0138 118.046C67.8271 117.54 67.5471 117.14 67.1604 116.82C66.7738 116.513 66.2804 116.353 65.6804 116.353C65.0804 116.353 64.5871 116.513 64.2004 116.82C63.8138 117.126 63.5338 117.54 63.3471 118.046C63.1604 118.553 63.0671 119.1 63.0671 119.673C63.0671 120.246 63.1604 120.793 63.3471 121.3C63.5338 121.806 63.8138 122.206 64.2004 122.513C64.5871 122.82 65.0804 122.98 65.6804 122.98ZM73.0271 118.753V124.006H71.6804V115.273H72.9738V116.633H73.0938C73.2938 116.193 73.6138 115.833 74.0271 115.566C74.4404 115.3 74.9871 115.153 75.6404 115.153C76.2271 115.153 76.7471 115.273 77.1871 115.513C77.6271 115.753 77.9738 116.113 78.2271 116.606C78.4671 117.086 78.6004 117.7 78.6004 118.446V123.993H77.2538V118.54C77.2538 117.86 77.0804 117.326 76.7204 116.94C76.3604 116.553 75.8804 116.366 75.2538 116.366C74.8271 116.366 74.4404 116.46 74.1071 116.646C73.7738 116.833 73.5071 117.1 73.3204 117.46C73.1338 117.82 73.0271 118.246 73.0271 118.753Z" fill="#0057FF" />

    <path d="M36 146.006H118.667C119.773 146.006 120.667 146.9 120.667 148.006V172.673H34V148.006C34 146.9 34.8933 146.006 36 146.006Z" fill="#0057FF" fill-opacity="0.07" />

    <path d="M36 146.006H118.667C119.773 146.006 120.667 146.9 120.667 148.006V172.673H34V148.006C34 146.9 34.8933 146.006 36 146.006Z" stroke="#518AF8" stroke-width="1.33333" />

    <path d="M51.2137 157.34H49.8004C49.7204 156.94 49.5737 156.58 49.3604 156.273C49.1604 155.966 48.9071 155.713 48.6137 155.5C48.3204 155.286 48.0004 155.126 47.6404 155.02C47.2804 154.913 46.9071 154.86 46.5204 154.86C45.8137 154.86 45.1737 155.033 44.6004 155.393C44.0271 155.753 43.5737 156.273 43.2404 156.966C42.9071 157.66 42.7337 158.513 42.7337 159.513C42.7337 160.513 42.8937 161.366 43.2404 162.06C43.5737 162.753 44.0271 163.273 44.6004 163.633C45.1737 163.993 45.8137 164.166 46.5204 164.166C46.9071 164.166 47.2804 164.113 47.6404 164.006C48.0004 163.9 48.3204 163.74 48.6137 163.54C48.9071 163.326 49.1604 163.073 49.3604 162.766C49.5737 162.46 49.7204 162.1 49.8004 161.7H51.2137C51.1071 162.3 50.9204 162.82 50.6404 163.3C50.3604 163.766 50.0137 164.166 49.6004 164.5C49.1871 164.82 48.7204 165.073 48.2004 165.246C47.6804 165.42 47.1337 165.5 46.5471 165.5C45.5604 165.5 44.6671 165.26 43.8937 164.766C43.1204 164.286 42.5071 163.593 42.0671 162.7C41.6271 161.806 41.4004 160.74 41.4004 159.513C41.4004 158.286 41.6271 157.22 42.0671 156.326C42.5071 155.433 43.1204 154.74 43.8937 154.26C44.6671 153.78 45.5471 153.526 46.5471 153.526C47.1337 153.526 47.6804 153.606 48.2004 153.78C48.7204 153.953 49.1871 154.206 49.6004 154.526C50.0137 154.846 50.3604 155.246 50.6404 155.726C50.9204 156.193 51.1204 156.726 51.2137 157.326V157.34ZM56.8537 165.526C56.0671 165.526 55.3737 165.34 54.7737 164.966C54.1871 164.593 53.7204 164.073 53.3871 163.393C53.0537 162.713 52.8937 161.926 52.8937 161.033C52.8937 160.14 53.0537 159.326 53.3871 158.646C53.7204 157.966 54.1871 157.446 54.7737 157.073C55.3737 156.7 56.0537 156.513 56.8537 156.513C57.6537 156.513 58.3337 156.7 58.9204 157.073C59.5204 157.446 59.9737 157.98 60.3071 158.646C60.6404 159.326 60.8137 160.113 60.8137 161.033C60.8137 161.953 60.6537 162.726 60.3071 163.393C59.9737 164.073 59.5204 164.593 58.9204 164.966C58.3337 165.34 57.6404 165.526 56.8537 165.526ZM56.8537 164.313C57.4537 164.313 57.9471 164.153 58.3337 163.846C58.7204 163.54 59.0004 163.14 59.1871 162.633C59.3737 162.126 59.4671 161.593 59.4671 161.006C59.4671 160.42 59.3737 159.873 59.1871 159.38C59.0004 158.873 58.7204 158.473 58.3337 158.153C57.9471 157.846 57.4537 157.686 56.8537 157.686C56.2537 157.686 55.7604 157.846 55.3737 158.153C54.9871 158.46 54.7071 158.873 54.5204 159.38C54.3337 159.886 54.2404 160.433 54.2404 161.006C54.2404 161.58 54.3337 162.126 54.5204 162.633C54.7071 163.14 54.9871 163.54 55.3737 163.846C55.7604 164.153 56.2537 164.313 56.8537 164.313ZM64.1871 160.086V165.34H62.8404V156.62H64.1337V157.98H64.2537C64.4537 157.54 64.7737 157.18 65.1871 156.913C65.6004 156.646 66.1471 156.5 66.8004 156.5C67.3871 156.5 67.9071 156.62 68.3471 156.86C68.7871 157.1 69.1337 157.46 69.3871 157.953C69.6271 158.433 69.7604 159.046 69.7604 159.793V165.34H68.4137V159.886C68.4137 159.206 68.2404 158.673 67.8804 158.286C67.5204 157.9 67.0404 157.713 66.4137 157.713C65.9871 157.713 65.6004 157.806 65.2671 157.993C64.9337 158.18 64.6671 158.446 64.4804 158.806C64.2937 159.166 64.1871 159.593 64.1871 160.1V160.086ZM76.0004 156.62V157.753H71.4804V156.62H76.0004ZM72.8004 154.526H74.1471V162.846C74.1471 163.22 74.2004 163.513 74.3071 163.7C74.4271 163.886 74.5604 164.006 74.7337 164.073C74.9071 164.14 75.0937 164.166 75.2937 164.166C75.4404 164.166 75.5604 164.166 75.6537 164.14C75.7471 164.126 75.8271 164.1 75.8804 164.086L76.1471 165.286C76.0537 165.313 75.9337 165.353 75.7604 165.393C75.6004 165.433 75.3871 165.446 75.1471 165.446C74.7737 165.446 74.4004 165.366 74.0271 165.206C73.6671 165.046 73.3737 164.793 73.1337 164.46C72.8937 164.126 72.7871 163.7 72.7871 163.193V154.513L72.8004 154.526ZM80.5871 165.54C80.0404 165.54 79.5337 165.433 79.0804 165.233C78.6271 165.02 78.2671 164.713 78.0004 164.313C77.7337 163.913 77.6004 163.42 77.6004 162.86C77.6004 162.353 77.6937 161.953 77.8937 161.646C78.0937 161.326 78.3604 161.086 78.6804 160.913C79.0137 160.74 79.3737 160.606 79.7737 160.513C80.1737 160.42 80.5737 160.353 80.9871 160.3C81.5204 160.233 81.9471 160.18 82.2804 160.14C82.6137 160.1 82.8537 160.046 83.0137 159.953C83.1737 159.86 83.2404 159.713 83.2404 159.5V159.46C83.2404 158.9 83.0937 158.46 82.7737 158.153C82.4671 157.846 82.0137 157.686 81.3871 157.686C80.7604 157.686 80.2404 157.833 79.8804 158.113C79.5204 158.393 79.2671 158.686 79.1071 159.006L77.8404 158.553C78.0671 158.02 78.3737 157.606 78.7471 157.313C79.1337 157.02 79.5471 156.806 80.0004 156.686C80.4537 156.566 80.9071 156.5 81.3471 156.5C81.6271 156.5 81.9471 156.54 82.3071 156.606C82.6804 156.673 83.0271 156.806 83.3737 157.006C83.7204 157.206 84.0004 157.526 84.2271 157.926C84.4537 158.34 84.5737 158.886 84.5737 159.593V165.34H83.2271V164.153H83.1604C83.0671 164.34 82.9204 164.54 82.7071 164.766C82.4937 164.993 82.2137 165.166 81.8537 165.313C81.5071 165.46 81.0671 165.54 80.5604 165.54H80.5871ZM80.8004 164.34C81.3337 164.34 81.7737 164.233 82.1471 164.033C82.5204 163.82 82.7871 163.553 82.9737 163.233C83.1604 162.9 83.2537 162.553 83.2537 162.193V160.966C83.2004 161.033 83.0671 161.1 82.8804 161.153C82.6937 161.206 82.4671 161.26 82.2271 161.3C81.9871 161.34 81.7471 161.366 81.5071 161.406C81.2804 161.433 81.0937 161.46 80.9471 161.473C80.6004 161.513 80.2671 161.593 79.9737 161.7C79.6804 161.793 79.4271 161.953 79.2404 162.153C79.0537 162.353 78.9737 162.62 78.9737 162.966C78.9737 163.433 79.1471 163.78 79.4937 164.02C79.8404 164.26 80.2804 164.366 80.8137 164.366L80.8004 164.34ZM87.0404 165.34V156.62H88.3871V165.34H87.0404ZM87.7204 155.153C87.4537 155.153 87.2404 155.06 87.0404 154.886C86.8537 154.713 86.7604 154.5 86.7604 154.246C86.7604 153.993 86.8537 153.78 87.0404 153.606C87.2271 153.433 87.4537 153.34 87.7204 153.34C87.9871 153.34 88.2004 153.433 88.3871 153.606C88.5737 153.78 88.6671 153.993 88.6671 154.246C88.6671 154.5 88.5737 154.713 88.3871 154.886C88.2004 155.06 87.9737 155.153 87.7204 155.153ZM92.1737 160.086V165.34H90.8271V156.62H92.1204V157.98H92.2404C92.4404 157.54 92.7604 157.18 93.1737 156.913C93.5871 156.646 94.1337 156.5 94.7871 156.5C95.3737 156.5 95.8937 156.62 96.3337 156.86C96.7737 157.1 97.1204 157.46 97.3737 157.953C97.6137 158.433 97.7471 159.046 97.7471 159.793V165.34H96.4004V159.886C96.4004 159.206 96.2271 158.673 95.8671 158.286C95.5071 157.9 95.0271 157.713 94.4004 157.713C93.9737 157.713 93.5871 157.806 93.2537 157.993C92.9204 158.18 92.6537 158.446 92.4671 158.806C92.2804 159.166 92.1737 159.593 92.1737 160.1V160.086ZM103.854 165.526C103.014 165.526 102.294 165.34 101.68 164.966C101.08 164.593 100.6 164.073 100.28 163.393C99.9604 162.713 99.7871 161.94 99.7871 161.046C99.7871 160.153 99.9471 159.366 100.28 158.686C100.614 158.006 101.067 157.473 101.654 157.086C102.24 156.7 102.934 156.513 103.72 156.513C104.174 156.513 104.627 156.593 105.067 156.74C105.507 156.886 105.907 157.14 106.28 157.473C106.64 157.806 106.934 158.26 107.147 158.806C107.36 159.366 107.467 160.046 107.467 160.86V161.433H100.734V160.273H106.094C106.094 159.78 106 159.34 105.8 158.953C105.614 158.566 105.334 158.26 104.974 158.033C104.614 157.806 104.2 157.7 103.707 157.7C103.174 157.7 102.707 157.833 102.32 158.1C101.934 158.366 101.64 158.7 101.427 159.126C101.214 159.553 101.12 159.993 101.12 160.473V161.246C101.12 161.9 101.24 162.46 101.467 162.926C101.694 163.38 102.014 163.726 102.427 163.966C102.84 164.206 103.307 164.313 103.854 164.313C104.2 164.313 104.52 164.26 104.814 164.166C105.107 164.06 105.347 163.913 105.56 163.713C105.774 163.513 105.934 163.26 106.04 162.953L107.334 163.313C107.2 163.753 106.974 164.14 106.64 164.473C106.32 164.806 105.92 165.06 105.454 165.246C104.974 165.433 104.454 165.513 103.854 165.513V165.526ZM109.507 165.34V156.62H110.8V157.94H110.894C111.054 157.513 111.347 157.153 111.76 156.886C112.174 156.62 112.64 156.486 113.174 156.486C113.267 156.486 113.4 156.486 113.547 156.486C113.694 156.486 113.8 156.486 113.88 156.5V157.86C113.88 157.86 113.734 157.833 113.574 157.806C113.414 157.78 113.24 157.766 113.067 157.766C112.64 157.766 112.267 157.86 111.934 158.033C111.6 158.206 111.347 158.446 111.147 158.766C110.96 159.073 110.867 159.42 110.867 159.82V165.34H109.52H109.507Z" fill="#0057FF" />

    <path d="M655.333 348.673H16.666V374.006H655.333V348.673Z" fill="#0057FF" fill-opacity="0.07" stroke="#518AF8" stroke-width="1.33333" />

    <path d="M18.666 322.006H75.9994C77.106 322.006 77.9994 322.9 77.9994 324.006V348.673H16.666V324.006C16.666 322.9 17.5593 322.006 18.666 322.006Z" fill="#0057FF" fill-opacity="0.07" />

    <path d="M18.666 322.006H75.9994C77.106 322.006 77.9994 322.9 77.9994 324.006V348.673H16.666V324.006C16.666 322.9 17.5593 322.006 18.666 322.006Z" stroke="#518AF8" stroke-width="1.33333" />

    <path d="M24.3336 341.34V329.7H31.307V330.953H25.7336V334.886H30.7736V336.14H25.7336V341.34H24.3203H24.3336ZM36.4403 341.526C35.6536 341.526 34.9603 341.34 34.3603 340.966C33.7736 340.593 33.307 340.073 32.9736 339.393C32.6403 338.713 32.4803 337.926 32.4803 337.033C32.4803 336.14 32.6403 335.326 32.9736 334.646C33.307 333.966 33.7736 333.446 34.3603 333.073C34.9603 332.7 35.6403 332.513 36.4403 332.513C37.2403 332.513 37.9203 332.7 38.507 333.073C39.107 333.446 39.5603 333.98 39.8936 334.646C40.227 335.326 40.4003 336.113 40.4003 337.033C40.4003 337.953 40.2403 338.726 39.8936 339.393C39.5603 340.073 39.107 340.593 38.507 340.966C37.9203 341.34 37.227 341.526 36.4403 341.526ZM36.4403 340.313C37.0403 340.313 37.5336 340.153 37.9203 339.846C38.307 339.54 38.587 339.14 38.7736 338.633C38.9603 338.126 39.0536 337.593 39.0536 337.006C39.0536 336.42 38.9603 335.873 38.7736 335.38C38.587 334.873 38.307 334.473 37.9203 334.153C37.5336 333.846 37.0403 333.686 36.4403 333.686C35.8403 333.686 35.347 333.846 34.9603 334.153C34.5736 334.46 34.2936 334.873 34.107 335.38C33.9203 335.886 33.827 336.433 33.827 337.006C33.827 337.58 33.9203 338.126 34.107 338.633C34.2936 339.14 34.5736 339.54 34.9603 339.846C35.347 340.153 35.8403 340.313 36.4403 340.313ZM45.987 341.526C45.2003 341.526 44.507 341.34 43.907 340.966C43.3203 340.593 42.8536 340.073 42.5203 339.393C42.187 338.713 42.027 337.926 42.027 337.033C42.027 336.14 42.187 335.326 42.5203 334.646C42.8536 333.966 43.3203 333.446 43.907 333.073C44.507 332.7 45.187 332.513 45.987 332.513C46.787 332.513 47.467 332.7 48.0536 333.073C48.6536 333.446 49.107 333.98 49.4403 334.646C49.7736 335.326 49.947 336.113 49.947 337.033C49.947 337.953 49.787 338.726 49.4403 339.393C49.107 340.073 48.6536 340.593 48.0536 340.966C47.467 341.34 46.7736 341.526 45.987 341.526ZM45.987 340.313C46.587 340.313 47.0803 340.153 47.467 339.846C47.8536 339.54 48.1336 339.14 48.3203 338.633C48.507 338.126 48.6003 337.593 48.6003 337.006C48.6003 336.42 48.507 335.873 48.3203 335.38C48.1336 334.873 47.8536 334.473 47.467 334.153C47.0803 333.846 46.587 333.686 45.987 333.686C45.387 333.686 44.8936 333.846 44.507 334.153C44.1203 334.46 43.8403 334.873 43.6536 335.38C43.467 335.886 43.3736 336.433 43.3736 337.006C43.3736 337.58 43.467 338.126 43.6536 338.633C43.8403 339.14 44.1203 339.54 44.507 339.846C44.8936 340.153 45.387 340.313 45.987 340.313ZM55.787 332.62V333.753H51.267V332.62H55.787ZM52.587 330.526H53.9336V338.846C53.9336 339.22 53.987 339.513 54.0936 339.7C54.2136 339.886 54.347 340.006 54.5203 340.073C54.6936 340.14 54.8803 340.166 55.0803 340.166C55.227 340.166 55.347 340.166 55.4403 340.14C55.5336 340.126 55.6136 340.1 55.667 340.086L55.9336 341.286C55.8403 341.313 55.7203 341.353 55.547 341.393C55.387 341.433 55.1736 341.446 54.9336 341.446C54.5603 341.446 54.187 341.366 53.8136 341.206C53.4536 341.046 53.1603 340.793 52.9203 340.46C52.6803 340.126 52.5736 339.7 52.5736 339.193V330.513L52.587 330.526ZM61.3736 341.526C60.5336 341.526 59.8136 341.34 59.2003 340.966C58.6003 340.593 58.1203 340.073 57.8003 339.393C57.4803 338.713 57.307 337.94 57.307 337.046C57.307 336.153 57.467 335.366 57.8003 334.686C58.1336 334.006 58.587 333.473 59.1736 333.086C59.7603 332.7 60.4536 332.513 61.2403 332.513C61.6936 332.513 62.147 332.593 62.587 332.74C63.027 332.886 63.427 333.14 63.8003 333.473C64.1603 333.806 64.4536 334.26 64.667 334.82C64.8803 335.38 64.987 336.06 64.987 336.873V337.446H58.2536V336.286H63.6136C63.6136 335.793 63.5203 335.353 63.3203 334.966C63.1336 334.58 62.8536 334.273 62.4936 334.046C62.1336 333.82 61.7203 333.713 61.227 333.713C60.6936 333.713 60.227 333.846 59.8403 334.113C59.4536 334.38 59.1603 334.713 58.947 335.14C58.7336 335.566 58.6403 336.006 58.6403 336.486V337.26C58.6403 337.913 58.7603 338.473 58.987 338.94C59.2136 339.393 59.5336 339.74 59.947 339.98C60.3603 340.22 60.827 340.326 61.3736 340.326C61.7203 340.326 62.0403 340.273 62.3336 340.18C62.627 340.073 62.867 339.926 63.0803 339.726C63.2936 339.526 63.4536 339.273 63.5603 338.966L64.8536 339.326C64.7203 339.766 64.4936 340.153 64.1603 340.486C63.8403 340.82 63.4403 341.073 62.9736 341.26C62.4936 341.446 61.9736 341.526 61.3736 341.526ZM67.027 341.34V332.62H68.3203V333.94H68.4136C68.5736 333.513 68.867 333.153 69.2803 332.886C69.6936 332.62 70.1603 332.486 70.6936 332.486C70.787 332.486 70.9203 332.486 71.067 332.486C71.2136 332.486 71.3203 332.486 71.4003 332.5V333.86C71.4003 333.86 71.2536 333.833 71.0936 333.806C70.9336 333.78 70.7603 333.766 70.587 333.766C70.1603 333.766 69.787 333.86 69.4536 334.033C69.1203 334.206 68.867 334.446 68.667 334.766C68.4803 335.073 68.387 335.42 68.387 335.82V341.34H67.0403H67.027Z" fill="#0057FF" />

    <path d="M316.641 236.82C316.747 236.82 316.827 236.86 316.907 236.94L317.654 237.753C317.187 238.313 316.614 238.753 315.921 239.06C315.241 239.366 314.427 239.513 313.467 239.513C312.627 239.513 311.867 239.366 311.187 239.073C310.507 238.78 309.934 238.38 309.441 237.86C308.961 237.34 308.587 236.713 308.334 235.993C308.081 235.273 307.947 234.486 307.947 233.62C307.947 232.753 308.081 231.966 308.361 231.233C308.641 230.513 309.027 229.886 309.521 229.366C310.014 228.846 310.614 228.446 311.307 228.153C312.001 227.86 312.774 227.726 313.601 227.726C314.427 227.726 315.174 227.86 315.801 228.126C316.441 228.393 316.987 228.753 317.454 229.206L316.841 230.073C316.841 230.073 316.747 230.18 316.694 230.22C316.641 230.26 316.561 230.286 316.454 230.286C316.347 230.286 316.227 230.233 316.094 230.14C315.961 230.046 315.787 229.926 315.574 229.806C315.361 229.686 315.094 229.58 314.787 229.473C314.467 229.38 314.067 229.326 313.601 229.326C313.054 229.326 312.547 229.42 312.094 229.62C311.641 229.806 311.241 230.086 310.907 230.46C310.574 230.833 310.321 231.273 310.134 231.806C309.947 232.34 309.854 232.94 309.854 233.606C309.854 234.273 309.947 234.886 310.147 235.42C310.347 235.953 310.601 236.393 310.934 236.766C311.267 237.126 311.667 237.406 312.121 237.606C312.574 237.793 313.067 237.9 313.587 237.9C313.907 237.9 314.187 237.886 314.441 237.846C314.694 237.806 314.934 237.753 315.147 237.673C315.361 237.593 315.561 237.5 315.747 237.38C315.934 237.26 316.121 237.113 316.307 236.953C316.414 236.86 316.521 236.806 316.627 236.806L316.641 236.82Z" fill="#0057FF" />

    <path d="M322.307 231.1C322.907 231.1 323.454 231.193 323.947 231.393C324.441 231.593 324.854 231.873 325.201 232.233C325.547 232.593 325.814 233.033 326.001 233.553C326.187 234.073 326.281 234.646 326.281 235.3C326.281 235.953 326.187 236.526 326.001 237.046C325.814 237.566 325.547 238.006 325.201 238.366C324.854 238.726 324.441 239.006 323.947 239.206C323.454 239.406 322.907 239.5 322.307 239.5C321.707 239.5 321.147 239.406 320.667 239.206C320.174 239.006 319.761 238.726 319.414 238.366C319.067 238.006 318.801 237.553 318.614 237.046C318.427 236.526 318.334 235.953 318.334 235.3C318.334 234.646 318.427 234.073 318.614 233.553C318.801 233.033 319.067 232.593 319.414 232.233C319.761 231.873 320.174 231.593 320.667 231.393C321.161 231.193 321.707 231.1 322.307 231.1ZM322.307 238.166C323.041 238.166 323.587 237.926 323.947 237.433C324.307 236.94 324.481 236.233 324.481 235.313C324.481 234.393 324.307 233.686 323.947 233.193C323.587 232.7 323.041 232.446 322.307 232.446C321.574 232.446 321.001 232.7 320.641 233.193C320.281 233.686 320.094 234.406 320.094 235.313C320.094 236.22 320.281 236.94 320.641 237.433C321.001 237.926 321.561 238.166 322.307 238.166Z" fill="#0057FF" />

    <path d="M329.519 232.313C329.693 232.126 329.879 231.966 330.066 231.82C330.253 231.673 330.453 231.54 330.666 231.433C330.879 231.326 331.106 231.246 331.346 231.18C331.586 231.126 331.853 231.086 332.133 231.086C332.586 231.086 332.973 231.166 333.306 231.313C333.639 231.46 333.933 231.673 334.159 231.94C334.386 232.206 334.573 232.54 334.679 232.926C334.786 233.313 334.853 233.726 334.853 234.193V239.38H333.146V234.193C333.146 233.646 333.013 233.22 332.759 232.913C332.506 232.606 332.119 232.46 331.599 232.46C331.213 232.46 330.866 232.553 330.533 232.726C330.199 232.9 329.893 233.14 329.613 233.446V239.393H327.893V231.233H328.933C329.173 231.233 329.319 231.34 329.386 231.566L329.506 232.313H329.519Z" fill="#0057FF" />

    <path d="M339.399 239.513C338.719 239.513 338.199 239.326 337.839 238.94C337.479 238.553 337.292 238.02 337.292 237.326V232.58H336.399C336.306 232.58 336.226 232.553 336.146 232.486C336.079 232.42 336.039 232.326 336.039 232.206V231.513L337.359 231.326L337.732 228.966C337.759 228.873 337.799 228.806 337.866 228.74C337.932 228.673 338.012 228.66 338.119 228.66H338.999V231.34H341.266V232.58H338.999V237.206C338.999 237.5 339.066 237.726 339.212 237.873C339.359 238.033 339.546 238.1 339.786 238.1C339.919 238.1 340.039 238.086 340.132 238.046C340.226 238.006 340.306 237.98 340.386 237.94C340.452 237.9 340.519 237.86 340.559 237.833C340.612 237.793 340.666 237.78 340.706 237.78C340.799 237.78 340.879 237.833 340.932 237.94L341.439 238.78C341.172 239.02 340.852 239.193 340.492 239.326C340.132 239.46 339.759 239.513 339.372 239.513H339.399Z" fill="#0057FF" />

    <path d="M343.814 235.446C343.84 235.913 343.907 236.313 344.027 236.646C344.147 236.98 344.32 237.26 344.52 237.486C344.72 237.713 344.974 237.873 345.254 237.993C345.534 238.1 345.854 238.153 346.214 238.153C346.574 238.153 346.84 238.113 347.08 238.033C347.32 237.953 347.534 237.873 347.72 237.78C347.907 237.686 348.054 237.606 348.187 237.526C348.32 237.446 348.427 237.406 348.534 237.406C348.667 237.406 348.774 237.46 348.854 237.566L349.347 238.193C349.147 238.433 348.92 238.633 348.654 238.806C348.387 238.98 348.12 239.1 347.84 239.206C347.547 239.313 347.254 239.38 346.947 239.433C346.64 239.486 346.347 239.5 346.054 239.5C345.494 239.5 344.96 239.406 344.48 239.22C344 239.033 343.574 238.753 343.227 238.38C342.88 238.006 342.6 237.553 342.4 237.006C342.2 236.46 342.094 235.833 342.094 235.126C342.094 234.566 342.187 234.033 342.36 233.54C342.534 233.046 342.8 232.62 343.134 232.26C343.467 231.9 343.867 231.606 344.347 231.406C344.827 231.193 345.36 231.086 345.974 231.086C346.48 231.086 346.934 231.166 347.36 231.326C347.787 231.486 348.16 231.726 348.467 232.046C348.774 232.366 349.014 232.753 349.187 233.206C349.36 233.66 349.44 234.18 349.44 234.766C349.44 235.033 349.414 235.206 349.347 235.3C349.294 235.393 349.187 235.433 349.027 235.433H343.787L343.814 235.446ZM347.92 234.393C347.92 234.1 347.88 233.833 347.8 233.593C347.72 233.34 347.6 233.126 347.44 232.94C347.28 232.753 347.08 232.606 346.84 232.513C346.6 232.406 346.334 232.353 346.027 232.353C345.4 232.353 344.907 232.526 344.56 232.886C344.214 233.246 343.974 233.74 343.88 234.393H347.934H347.92Z" fill="#0057FF" />

    <path d="M352.679 232.313C352.853 232.126 353.039 231.966 353.226 231.82C353.413 231.673 353.613 231.54 353.826 231.433C354.039 231.326 354.266 231.246 354.506 231.18C354.746 231.126 355.013 231.086 355.293 231.086C355.746 231.086 356.133 231.166 356.466 231.313C356.799 231.46 357.093 231.673 357.319 231.94C357.546 232.206 357.733 232.54 357.839 232.926C357.946 233.313 358.013 233.726 358.013 234.193V239.38H356.306V234.193C356.306 233.646 356.173 233.22 355.919 232.913C355.666 232.606 355.279 232.46 354.759 232.46C354.373 232.46 354.026 232.553 353.693 232.726C353.359 232.9 353.053 233.14 352.773 233.446V239.393H351.053V231.233H352.093C352.333 231.233 352.479 231.34 352.546 231.566L352.666 232.313H352.679Z" fill="#0057FF" />

    <path d="M362.547 239.513C361.867 239.513 361.347 239.326 360.987 238.94C360.627 238.553 360.441 238.02 360.441 237.326V232.58H359.547C359.454 232.58 359.374 232.553 359.294 232.486C359.227 232.42 359.188 232.326 359.188 232.206V231.513L360.507 231.326L360.881 228.966C360.907 228.873 360.947 228.806 361.014 228.74C361.081 228.673 361.161 228.66 361.267 228.66H362.147V231.34H364.414V232.58H362.147V237.206C362.147 237.5 362.214 237.726 362.361 237.873C362.507 238.033 362.694 238.1 362.934 238.1C363.067 238.1 363.187 238.086 363.281 238.046C363.374 238.006 363.454 237.98 363.534 237.94C363.601 237.9 363.667 237.86 363.707 237.833C363.761 237.793 363.814 237.78 363.854 237.78C363.948 237.78 364.027 237.833 364.081 237.94L364.587 238.78C364.321 239.02 364.001 239.193 363.641 239.326C363.281 239.46 362.908 239.513 362.521 239.513H362.547Z" fill="#0057FF" />
  </g>

  <defs>
    <clipPath id="clip0_342_121">
      <rect width="672" height="392.013" fill="white" />
    </clipPath>
  </defs>
</svg>

***

## Section

Sections are the core layout blocks of a page. Each section must use the semantic `Section` tag, which can be set in the Webflow Settings Panel.

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/a709816865689d06e8c2b0db56ad771fe9be1ab31587b87c1e28455dfbe70c5d/products/flowkit/pages/v2/page-structure/flowkit_settings.webp" alt="Settings pannel" />

### Variations

The main class <span class="sg-selector sg-class">section</span> sets the section's structure and default padding. Variations are applied with combo classes to adjust background and font colors.
Combo classes follow the pattern: <span class="sg-selector sg-class">section</span> <span class="sg-selector sg-class">is-secondary</span>

* <span class="sg-selector sg-class">
    section
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>
* <span class="sg-selector sg-class">
    section
  </span>
  <span class="sg-selector sg-class">
    is-accent-primary
  </span>
* <span class="sg-selector sg-class">
    section
  </span>
  <span class="sg-selector sg-class">
    is-accent-secondary
  </span>
* <span class="sg-selector sg-class">
    section
  </span>
  <span class="sg-selector sg-class">
    is-accent-tertiary
  </span>
* <span class="sg-selector sg-class">
    section
  </span>
  <span class="sg-selector sg-class">
    is-inverse
  </span>

### Padding

The <span class="sg-selector sg-class">section</span> class includes vertical padding by default. Use utilities to adjust:

| Utility Class                                                                                                                | Description                    |
| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
| <span class="sg-selector sg-class">padding\_none</span>                                                                      | Removes top & bottom spacing   |
| <span class="sg-selector sg-class">padding-vertical\_small</span>                                                            | Sets vertical spacing to small |
| <span class="sg-selector sg-class">padding-top\_none</span>, <span class="sg-selector sg-class">padding-bottom\_small</span> | Fine-tuned vertical control    |

***

## Container

The <span class="sg-selector sg-class">container</span> class centers content and applies a max-width with internal horizontal padding. It ensures consistent alignment across all layouts.

These combo classes adjust the width:

| Class Example                                                                                               | Description                          |
| ----------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| <span class="sg-selector sg-class">container</span>                                                         | Default max width (standard layout)  |
| <span class="sg-selector sg-class">container</span> <span class="sg-selector sg-class">is-full-width</span> | Stretches full width (edge-to-edge)  |
| <span class="sg-selector sg-class">container</span> <span class="sg-selector sg-class">is-large</span>      | Larger max width                     |
| <span class="sg-selector sg-class">container</span> <span class="sg-selector sg-class">is-small</span>      | Smaller max width for narrow layouts |

### Padding Control

Adjust internal padding using utility classes:

* <span class="sg-selector sg-class">padding-horizontal\_none</span> — removes side padding

***

## Navigation

The navigation bar uses the semantic `nav` tag and a base class <span class="sg-selector sg-class">Nav</span>.

Navigation adapts to the background color using combo classes:

* <span class="sg-selector sg-class">
    nav
  </span>
  <span class="sg-selector sg-class">
    is-accent-primary
  </span>
* <span class="sg-selector sg-class">
    nav
  </span>
  <span class="sg-selector sg-class">
    is-accent-secondary
  </span>
* <span class="sg-selector sg-class">
    nav
  </span>
  <span class="sg-selector sg-class">
    is-accent-tertiary
  </span>
* <span class="sg-selector sg-class">
    nav
  </span>
  <span class="sg-selector sg-class">
    is-inverse
  </span>
* <span class="sg-selector sg-class">
    nav
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>

***

## Footer

Footer uses `footer` semantic tag and class <span class="sg-selector sg-class">Footer</span>.

Footer also adapts to the background color using combo classes:

* <span class="sg-selector sg-class">
    footer
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>
* <span class="sg-selector sg-class">
    footer
  </span>
  <span class="sg-selector sg-class">
    is-inverse
  </span>
* <span class="sg-selector sg-class">
    footer
  </span>
  <span class="sg-selector sg-class">
    is-accent-primary
  </span>
* <span class="sg-selector sg-class">
    footer
  </span>
  <span class="sg-selector sg-class">
    is-accent-secondary
  </span>
* <span class="sg-selector sg-class">
    footer
  </span>
  <span class="sg-selector sg-class">
    is-accent-tertiary
  </span>

Every footer variation has a combo class for a footer link <span class="sg-selector sg-class">footer\_link</span> <span class="sg-selector sg-class">on-inverse</span> or <span class="sg-selector sg-class">on-accent-primary</span> etc.

---

# Grid layout

> Grid layout system in Webflow CSS Framework using responsive combo classes.

## Grid system

The grid system provides a flexible layout foundation using CSS Grid. Basic grid classes come with built-in responsive behavior that automatically adjusts the layout based on screen size.

### Basic grid classes

Basic grid classes with base column configurations:

<ul>
  * <span class="sg-selector sg-class">
      grid_1-col
    </span>
  * <span class="sg-selector sg-class">
      grid_2-col
    </span>
  * <span class="sg-selector sg-class">
      grid_3-col
    </span>
  * <span class="sg-selector sg-class">
      grid_4-col
    </span>
  * <span class="sg-selector sg-class">
      grid_5-col
    </span>
  * <span class="sg-selector sg-class">
      grid_6-col
    </span>
  * <span class="sg-selector sg-class">
      grid_9-col
    </span>
  * <span class="sg-selector sg-class">
      grid_12-col
    </span>
</ul>

### Responsive behavior

These responsive behaviors are built into the grid classes and automatically adjust the layout based on screen size without requiring additional responsive modifiers.

| Grid Class                                             | Desktop    | Tablet    | Mobile-L  | Mobile   |
| ------------------------------------------------------ | ---------- | --------- | --------- | -------- |
| <span class="sg-selector sg-class">grid\_1-col</span>  | 1 column   | 1 column  | 1 column  | 1 column |
| <span class="sg-selector sg-class">grid\_2-col</span>  | 2 columns  | 2 columns | 1 column  | 1 column |
| <span class="sg-selector sg-class">grid\_3-col</span>  | 3 columns  | 3 columns | 2 columns | 1 column |
| <span class="sg-selector sg-class">grid\_4-col</span>  | 4 columns  | 2 columns | 1 column  | 1 column |
| <span class="sg-selector sg-class">grid\_5-col</span>  | 5 columns  | 3 columns | 2 columns | 1 column |
| <span class="sg-selector sg-class">grid\_6-col</span>  | 6 columns  | 3 columns | 2 columns | 1 column |
| <span class="sg-selector sg-class">grid\_9-col</span>  | 9 columns  | 3 columns | 2 columns | 1 column |
| <span class="sg-selector sg-class">grid\_12-col</span> | 12 columns | 3 columns | 2 columns | 1 column |

Default behavior can be adjusted using responsive combo classes:

<span class="sg-selector sg-class">
  grid_3-col
</span>

<span class="sg-selector sg-class">
  tablet-1-col
</span>

***

## Spacing modifiers

Class structure:
<span class="sg-selector sg-class">grid\_`columns`-col</span> <span class="sg-selector sg-class">gap-`size`</span>

Size options: `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`

Example: <span class="sg-selector sg-class">grid\_3-col</span> <span class="sg-selector sg-class">gap-medium</span>

***

## Alignment modifiers

These modifiers set alignment for all child elements inside the grid.

Class structure:
<span class="sg-selector sg-class">grid\_`columns`-col</span> <span class="sg-selector sg-class">is-`X or Y`-`position`</span>

Available combo classes:

* <span class="sg-selector sg-class">
    is-x-left
  </span>
* <span class="sg-selector sg-class">
    is-x-center
  </span>
* <span class="sg-selector sg-class">
    is-x-right
  </span>
* <span class="sg-selector sg-class">
    is-y-top
  </span>
* <span class="sg-selector sg-class">
    is-y-center
  </span>
* <span class="sg-selector sg-class">
    is-y-bottom
  </span>

Example: <span class="sg-selector sg-class">grid\_3-col</span> <span class="sg-selector sg-class">is-x-center</span> <span class="sg-selector sg-class">is-y-bottom</span>

---

# Flex Layout

> Flexbox layout utilities for directional flow, spacing, and alignment in the Webflow CSS Framework.

Flex layout utilities define how elements are laid out in one dimension (either horizontally or vertically).\
Use direction, spacing, alignment, and child behavior modifiers to achieve flexible and consistent layouts.

***

## Flex Directions

Class <span class="sg-selector sg-class">flex\_horizontal</span> and <span class="sg-selector sg-class">flex\_vertical</span> define the element as a flex layout container in either row or column direction.

***

## Flex Spacing

Spacing between children is controlled with gap modifiers: <span class="sg-selector sg-class">flex\_`direction`</span> <span class="sg-selector sg-class">gap-`size`</span>

Size options: `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`

***

## Flex Alignment

Use alignment combo-classes to control positioning of children inside a flex layout.\
Alignment can be horizontal (`X`) or vertical (`Y`) depending on the direction of the parent container.

Common examples:

* <span class="sg-selector sg-class">
    flex_horizontal
  </span>
  <span class="sg-selector sg-class">
    is-x-center
  </span>
* <span class="sg-selector sg-class">
    flex_horizontal
  </span>
  <span class="sg-selector sg-class">
    is-x-right
  </span>
* <span class="sg-selector sg-class">
    flex_horizontal
  </span>
  <span class="sg-selector sg-class">
    is-y-bottom
  </span>
* <span class="sg-selector sg-class">
    flex_vertical
  </span>
  <span class="sg-selector sg-class">
    is-x-center
  </span>
* <span class="sg-selector sg-class">
    flex_vertical
  </span>
  <span class="sg-selector sg-class">
    is-y-bottom
  </span>

**Align Horizontal Left**\
<span class="sg-selector sg-class">flex\_horizontal</span> <span class="sg-selector sg-class">is-x-left</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Align Horizontal Center**\
<span class="sg-selector sg-class">flex\_horizontal</span> <span class="sg-selector sg-class">is-x-center</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Align Horizontal Right**\
<span class="sg-selector sg-class">flex\_horizontal</span> <span class="sg-selector sg-class">is-x-right</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Align Space Between**\
<span class="sg-selector sg-class">flex\_horizontal</span> <span class="sg-selector sg-class">is-x-space-between</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Flex Wrap**\
<span class="sg-selector sg-class">flex\_horizontal</span> <span class="sg-selector sg-class">flex\_wrap</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Align Vertical Top**\
<span class="sg-selector sg-class">flex\_horizontal</span> <span class="sg-selector sg-class">is-y-top</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Align Vertical Center**\
<span class="sg-selector sg-class">flex\_horizontal</span> <span class="sg-selector sg-class">is-y-center</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Align Vertical Bottom**\
<span class="sg-selector sg-class">flex\_horizontal</span> <span class="sg-selector sg-class">is-y-bottom</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Align Horizontal Left**\
<span class="sg-selector sg-class">flex\_vertical</span> <span class="sg-selector sg-class">is-x-left</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Align Horizontal Center**\
<span class="sg-selector sg-class">flex\_vertical</span> <span class="sg-selector sg-class">is-x-center</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Align Horizontal Right**\
<span class="sg-selector sg-class">flex\_vertical</span> <span class="sg-selector sg-class">is-x-right</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Align Vertical Bottom**\
<span class="sg-selector sg-class">flex\_vertical</span> <span class="sg-selector sg-class">is-y-bottom</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Align Vertical Center**\
<span class="sg-selector sg-class">flex\_vertical</span> <span class="sg-selector sg-class">is-y-center</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Expand Horizontally**\
<span class="sg-selector sg-class">flex\_vertical</span> <span class="sg-selector sg-class">is-x-stretch</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

**Side by Side Vertically**\
<span class="sg-selector sg-class">flex\_vertical</span> <span class="sg-selector sg-class">is-space-between</span>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Content
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

***

## Flex Child Modifiers

These combo-classes define how children inside a flex container behave:

| Behavior  | Combo Class                                                      |
| --------- | ---------------------------------------------------------------- |
| No Shrink | <span class="sg-selector sg-class">flex-child\_no\_shrink</span> |
| Expand    | <span class="sg-selector sg-class">flex-child\_expand</span>     |
| Shrink    | <span class="sg-selector sg-class">flex-child\_shrink</span>     |

Useful for allowing or preventing children from stretching, shrinking, or expanding based on available space.

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Element with <span class="sg-selector sg-class">flex\_child\_no\_shrink</span> applied
    </div>

    <div class="sg-element">
      Element with <span class="sg-selector sg-class">width\_100percent</span> applied
    </div>
  </div>
</div>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Element with <span class="sg-selector sg-class">flex\_child\_expand</span> applied
    </div>

    <div class="sg-element">
      Content
    </div>
  </div>
</div>

<div class="sg-wrapper">
  <div class="sg-preview">
    <div class="sg-element">
      Element with <span class="sg-selector sg-class">width\_100percent</span> applied
    </div>

    <div class="sg-element">
      Element with <span class="sg-selector sg-class">flex\_child\_shrink</span> applied
    </div>
  </div>
</div>

***

## Responsive Modifiers

Available responsive combo classes

| Combo Class                                                 | Description                         |
| ----------------------------------------------------------- | ----------------------------------- |
| <span class="sg-selector sg-class">tablet-x-center</span>   | Center horizontally on tablet       |
| <span class="sg-selector sg-class">tablet-y-center</span>   | Center vertically on tablet         |
| <span class="sg-selector sg-class">mobile-l-x-center</span> | Center horizontally on mobile large |
| <span class="sg-selector sg-class">mobile-l-y-center</span> | Center vertically on mobile large   |
| <span class="sg-selector sg-class">mobile-x-center</span>   | Center horizontally on mobile       |
| <span class="sg-selector sg-class">mobile-y-center</span>   | Center vertically on mobile         |

---

# Components

> Components refer to the re-usable HTML building blocks of this framework.

---

# Components

Flowkit provides a comprehensive set of component classes (button, card, etc) that help you build consistent and beautiful user interfaces. Each component is designed with accessibility, customization, and ease of use in mind.

## Available Components

### Interactive Elements

* [Buttons](/flowkit/components/buttons) - Primary, secondary, and tertiary button styles
* [Tag](/flowkit/components/tag) - Label and category indicators
* [Dropdown](/flowkit/components/dropdown) - Expandable selection menus
* [Accordion](/flowkit/components/accordion) - Collapsible content sections

### Content Display

* [Images](/flowkit/components/images) - Image display and responsive behavior
* [Cards](/flowkit/components/cards) - Content containers and layouts
* [Rich Text](/flowkit/components/richtext) - Text formatting and styles
* [Divider](/flowkit/components/divider) - Section separators

### Form Elements

* [Forms](/flowkit/components/forms) - Input fields, labels, and form layouts

### Navigation

* [Tabs](/flowkit/components/tabs) - Content organization and navigation
* [Slider](/flowkit/components/slider) - Carousel and content sliders

---

# Cards

> Cards are layout containers used to group and display content like text, images, and interactive elements.

## Class Naming

Cards are layout containers used to group and display content like text, images, and interactive elements. They are styled using the base class <span class="sg-selector sg-class">card</span> for standard cards and <span class="sg-selector sg-class">card-link</span> for interactive cards.

These classes can be extended using modifiers for different styles, backgrounds, and layouts.

## Surface Modifiers

Use these modifiers (combo classes) to adapt the card appearance based on the background context.

Naming convention:
<span class="sg-selector sg-class">card</span> <span class="sg-selector sg-class">on-`Surface`</span> and <span class="sg-selector sg-class">card-link</span> <span class="sg-selector sg-class">on-`Surface`</span>, where card surface can be `primary`, `secondary`, `inverse`, `accent-primary`, `accent-secondary`, `accent-tertiary`

Example:

* <span class="sg-selector sg-class">
    card
  </span>
  <span class="sg-selector sg-class">
    on-accent-primary
  </span>
* <span class="sg-selector sg-class">
    card-link
  </span>
  <span class="sg-selector sg-class">
    on-inverse
  </span>

## Card Elements

These modifiers allow additional control over spacing and card behavior across responsive layouts.

| Class                                                                                                | Description                                                              |
| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| <span class="sg-selector sg-class">card\_body</span>                                                 | Default card padding.                                                    |
| <span class="sg-selector sg-class">card\_body\_small</span>                                          | Small card padding.                                                      |
| <span class="sg-selector sg-class">card</span> <span class="sg-selector sg-class">is-featured</span> | Makes the card stand out from others. Useful for featured pricing cards. |

---

# Buttons

> Buttons are reusable components used to trigger actions or link to other pages.

## Class Naming

Buttons are reusable components used to trigger actions or link to other pages. They follow a consistent class structure for color type, size, and placement.

The class naming convention is:

<span class="sg-selector sg-class">
  button
</span>

<span class="sg-selector sg-class">
  is-secondary
</span>

<span class="sg-selector sg-class">
  is-small
</span>

<span class="sg-selector sg-class">
  on-accent-primary
</span>

For example:

<span class="sg-selector sg-class">
  button
</span>

<span class="sg-selector sg-class">
  is-secondary
</span>

<span class="sg-selector sg-class">
  on-accent-primary
</span>

These modifiers adjust button styling for contrast and visual clarity when buttons are placed over colored or dark backgrounds.

**Size Modifiers**

* <span class="sg-selector sg-class">
    button
  </span>
  <span class="sg-selector sg-class">
    is-small
  </span>
* <span class="sg-selector sg-class">
    button
  </span>
  <span class="sg-selector sg-class">
    is-large
  </span>

**Type Modifiers**

* <span class="sg-selector sg-class">
    button
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>

**Surface Modifiers: On Accent**

* <span class="sg-selector sg-class">
    button
  </span>
  <span class="sg-selector sg-class">
    on-accent-primary
  </span>
* <span class="sg-selector sg-class">
    button
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>
  <span class="sg-selector sg-class">
    on-accent-primary
  </span>
* <span class="sg-selector sg-class">
    button
  </span>
  <span class="sg-selector sg-class">
    on-accent-secondary
  </span>
* <span class="sg-selector sg-class">
    button
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>
  <span class="sg-selector sg-class">
    on-accent-secondary
  </span>
* <span class="sg-selector sg-class">
    button
  </span>
  <span class="sg-selector sg-class">
    on-accent-tertiary
  </span>
* <span class="sg-selector sg-class">
    button
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>
  <span class="sg-selector sg-class">
    on-accent-tertiary
  </span>

**Surface Modifiers: On Inverse**

* <span class="sg-selector sg-class">
    button
  </span>
  <span class="sg-selector sg-class">
    on-inverse
  </span>
* <span class="sg-selector sg-class">
    button
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>
  <span class="sg-selector sg-class">
    on-inverse
  </span>

## Button Group

Buttons should be wrapped in a parent element with the class  <span class="sg-selector sg-class">button-group</span> to maintain vertical spacing and horizontal gaps between buttons. This helps enforce consistent layout and rhythm across UI elements.

You can further modify alignment and layout behavior using combo classes:

| Class                                                                                                                | Description                                   |
| -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| <span class="sg-selector sg-class">button-group</span>                                                               | Aligns buttons to the left (default)          |
| <span class="sg-selector sg-class">button-group</span> <span class="sg-selector sg-class">is-align-center</span>     | Aligns buttons to the center                  |
| <span class="sg-selector sg-class">button-group</span> <span class="sg-selector sg-class">is-align-right</span>      | Aligns buttons to the right                   |
| <span class="sg-selector sg-class">button-group</span> <span class="sg-selector sg-class">is-vertical-stretch</span> | Stretches buttons to fill the container width |

***

## Text Button

Text Buttons are lightweight, inline-style buttons often used in navigation patterns, CTAs, or subtle interactions. They follow the same structure as standard buttons with color, size, and on-surface placement variations.

The base class is <span class="sg-selector sg-class">text-button</span>

**Size Modifiers:**

* <span class="sg-selector sg-class">
    text-button
  </span>
  <span class="sg-selector sg-class">
    is-small
  </span>

**Type Modifiers:**

* <span class="sg-selector sg-class">
    text-button
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>

**Surface Modifiers:**

These combinations allow for subtle yet clear interactions across all background contexts.

* <span class="sg-selector sg-class">
    text-button
  </span>
  <span class="sg-selector sg-class">
    on-inverse
  </span>
* <span class="sg-selector sg-class">
    text-button
  </span>
  <span class="sg-selector sg-class">
    on-accent-primary
  </span>
* <span class="sg-selector sg-class">
    text-button
  </span>
  <span class="sg-selector sg-class">
    on-accent-secondary
  </span>
* <span class="sg-selector sg-class">
    text-button
  </span>
  <span class="sg-selector sg-class">
    on-accent-tertiary
  </span>

***

## Text Link

Text Links resemble hyperlinks and are meant for in-line use. They follow the same class structure logic as buttons and text buttons.

The base class is <span class="sg-selector sg-class">text-link</span>

**Size Modifiers:**

* <span class="sg-selector sg-class">
    text-link
  </span>
  <span class="sg-selector sg-class">
    is-small
  </span>

**Type Modifiers:**

* <span class="sg-selector sg-class">
    text-link
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>

**Surface Modifiers:**

Text Links work well inside body copy, feature sections, or anywhere link-level interactions are required.

* <span class="sg-selector sg-class">
    text-link
  </span>
  <span class="sg-selector sg-class">
    on-inverse
  </span>
* <span class="sg-selector sg-class">
    text-link
  </span>
  <span class="sg-selector sg-class">
    on-accent-primary
  </span>
* <span class="sg-selector sg-class">
    text-link
  </span>
  <span class="sg-selector sg-class">
    on-accent-secondary
  </span>
* <span class="sg-selector sg-class">
    text-link
  </span>
  <span class="sg-selector sg-class">
    on-accent-tertiary
  </span>

---

# Tag

> Tag components in Flowkit

## Class Naming

Tags are compact UI elements used to label, categorize, or link to related content. They use a simplified button-like styling and are often inline or grouped below posts, cards, or featured content.

The base class is: <span class="sg-selector sg-class">tag</span>

**Size Modifiers:**

* <span class="sg-selector sg-class">
    tag
  </span>
  <span class="sg-selector sg-class">
    is-large
  </span>

**Surface Modifiers:**

* <span class="sg-selector sg-class">
    tag
  </span>
  <span class="sg-selector sg-class">
    on-inverse
  </span>
* <span class="sg-selector sg-class">
    tag
  </span>
  <span class="sg-selector sg-class">
    is-accent-primary
  </span>
* <span class="sg-selector sg-class">
    tag
  </span>
  <span class="sg-selector sg-class">
    is-accent-secondary
  </span>
* <span class="sg-selector sg-class">
    tag
  </span>
  <span class="sg-selector sg-class">
    is-accent-tertiary
  </span>

---

# Dropdown

> Dropdowns are menus that display a list of options when triggered.

## Class Naming

The dropdown component is used to display a list of options that appear on interaction. It uses a base wrapper class and internal toggle/list elements to manage behavior and style.

The base class is <span class="sg-selector sg-class">dropdown</span>. This class wraps the entire dropdown structure and controls visibility of the dropdown list.

## Elements

| Class                                                      | Purpose                                      |
| ---------------------------------------------------------- | -------------------------------------------- |
| <span class="sg-selector sg-class">dropdown\_toggle</span> | Interactive button that reveals the dropdown |
| <span class="sg-selector sg-class">dropdown\_list</span>   | Container for the list of options            |

## Direction Modifiers

Dropdowns support directional modifiers that control where the dropdown list appears in relation to the toggle button.

Combine these with <span class="sg-selector sg-class">dropdown\_list</span> to control layout.

| Modifier Class                                                                                                      | Description                      |
| ------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| <span class="sg-selector sg-class">dropdown\_list</span> <span class="sg-selector sg-class">is-open\_left</span>    | Opens list to the left           |
| <span class="sg-selector sg-class">dropdown\_list</span> <span class="sg-selector sg-class">is-open\_up</span>      | Opens list above the toggle      |
| <span class="sg-selector sg-class">dropdown\_list</span> <span class="sg-selector sg-class">is-open\_up-left</span> | Opens list above and to the left |

Example: <span class="sg-selector sg-class">dropdown\_list</span> <span class="sg-selector sg-class">is-open\_left</span>

---

# Accordion

> Accordions are expandable panels that show and hide content.

## Class Naming

The accordion component is used to toggle the visibility of content in a vertically stacked format. It uses a base wrapper class and relies on two key internal elements for structure and interactivity.

The base class is <span class="sg-selector sg-class">accordion</span>

## Elements

These elements are usually built using Webflow's dropdown component but styled with the above classes for visual consistency and behavior within the framework.

| Class                                                        | Purpose                                      |
| ------------------------------------------------------------ | -------------------------------------------- |
| <span class="sg-selector sg-class">accordion\_toggle</span>  | Button that triggers the open/close behavior |
| <span class="sg-selector sg-class">accordion\_content</span> | The content area that expands/collapses      |

---

# Images

> Images are styled using reusable classes that control fitting behavior and aspect ratio.

## Class Naming

Images are styled using reusable classes that control fitting behavior and aspect ratio. They also apply consistent styling like border-radius using a design token.

**Image Fit**

Use the base class <span class="sg-selector sg-class">image</span> or <span class="sg-selector sg-class">image\_cover</span> to define the image element.

**Radius**

All images — including elements with the tag <span class="sg-selector sg-tag">Image</span>, or using the classes <span class="sg-selector sg-class">image</span> and <span class="sg-selector sg-class">image\_cover</span> — have rounded corners applied through the variable <span class="sg-selector sg-var">Image Radius</span>.

To override this and make the corners square, use the combo class <span class="sg-selector sg-class">radius\_all-0</span>

### Aspect Ratio

Aspect ratio combo classes must be applied on top of the <span class="sg-selector sg-class">image\_cover</span> class to take effect.

Why? Because the image needs to stretch to fill the area defined by the ratio box — if only the ratio is set without forcing coverage, the image may not respect the ratio area.

Available combo classes:

* <span class="sg-selector sg-class">
    ratio_1x1
  </span>
* <span class="sg-selector sg-class">
    ratio_16x9
  </span>
* <span class="sg-selector sg-class">
    ratio_3x2
  </span>
* <span class="sg-selector sg-class">
    ratio_4x3
  </span>
* <span class="sg-selector sg-class">
    ratio_2x2.5
  </span>
* <span class="sg-selector sg-class">
    ratio_2x3
  </span>

Exasmple:

<span class="sg-selector sg-class">
  image_cover
</span>

<span class="sg-selector sg-class">
  ratio_2x3
</span>

### Responsive Modifiers

You can use responsive combo classes to change aspect ratio behavior on different breakpoints. For example, you may want to simplify layouts on smaller screens or reset custom ratios back to `auto`.

**Tablet**

* <span class="sg-selector sg-class">
    ratio_3x2_tablet
  </span>
* <span class="sg-selector sg-class">
    ratio_1x1_tablet
  </span>

**Mobile Landscape**

* <span class="sg-selector sg-class">
    ratio_auto_mobile-l
  </span>

These modifiers are added in combination with the base <span class="sg-selector sg-class">image\_cover</span> class and optionally other aspect combo classes.

***

## Icons

Icons are scalable, visual indicators used throughout the UI. They rely on a base class for consistent sizing and alignment, and support modifiers for scale and contextual styling.

The base class is <span class="sg-selector sg-class">icon</span>

**Size Modifiers**

These adjust the scale of the icon element relative to the surrounding layout.

* <span class="sg-selector sg-class">
    icon
  </span>
  <span class="sg-selector sg-class">
    is-xsmall
  </span>
* <span class="sg-selector sg-class">
    icon
  </span>
  <span class="sg-selector sg-class">
    is-small
  </span>
* <span class="sg-selector sg-class">
    icon
  </span>
  <span class="sg-selector sg-class">
    is-large
  </span>
* <span class="sg-selector sg-class">
    icon
  </span>
  <span class="sg-selector sg-class">
    is-xlarge
  </span>

**Surface Modifiers**

Use these to ensure icons maintain clarity and contrast when placed on dark or colored backgrounds.

* <span class="sg-selector sg-class">
    icon
  </span>
  <span class="sg-selector sg-class">
    on-inverse
  </span>
* <span class="sg-selector sg-class">
    icon
  </span>
  <span class="sg-selector sg-class">
    on-accent-primary
  </span>
* <span class="sg-selector sg-class">
    icon
  </span>
  <span class="sg-selector sg-class">
    on-accent-secondary
  </span>
* <span class="sg-selector sg-class">
    icon
  </span>
  <span class="sg-selector sg-class">
    on-accent-tertiary
  </span>

**Enhancing Visibility with Icon Container**

You can wrap the icon with an additional background highlight using the combo class\
<span class="sg-selector sg-class">icon</span> <span class="sg-selector sg-class">is-background</span>

This applies a soft tint using the icon's color, creating a subtle button-like effect that draws visual attention without overwhelming the interface.

This can be combined with any surface modifier. For example:

<span class="sg-selector sg-class">
  icon
</span>

<span class="sg-selector sg-class">
  on-accent-primary
</span>

<span class="sg-selector sg-class">
  is-background
</span>

***

## Avatars

Avatars are circular images used to visually represent a user, team, or content author. The base class defines the image as an avatar, and combo classes adjust the size.

The base class is <span class="sg-selector sg-class">avatar</span>

**Size Modifiers**

Use these modifiers to adjust the avatar size while keeping alignment and proportions consistent across the UI.

* <span class="sg-selector sg-class">
    avatar
  </span>
  <span class="sg-selector sg-class">
    is-small
  </span>
* <span class="sg-selector sg-class">
    avatar
  </span>
  <span class="sg-selector sg-class">
    is-large
  </span>

---

# Rich Text

> Rich Text components provide formatted text editing capabilities.

## Class Naming

The Rich Text component is used for long-form content such as blog posts, CMS fields, or documentation. It ensures consistent formatting of text elements like headings, paragraphs, links, and lists.

The base class is <span class="sg-selector sg-class">rich-text</span>

This class is applied to the Webflow Rich Text element and styles all nested content inside it.

## Styling Behavior

All elements inside the Rich Text block—such as headings, paragraphs, links, and lists—are automatically styled using the same design tokens and variables as standalone components in the system.

This ensures visual consistency and centralized management of typography across both modular UI elements and content-driven blocks. As a result, any updates to global text styles will affect both the standalone components and Rich Text elements uniformly.

---

# Forms

> Forms consist of modular components with consistent styling patterns.

## Class Naming

Forms consist of modular components with consistent styling patterns. Each element within a form, like labels, fields, toggles, and messages, is styled using reusable classes and combo modifiers to adapt to different contexts (inverse, accents, etc.).

**Form Components**

| Element Class                                                                                                 | Purpose                  |
| ------------------------------------------------------------------------------------------------------------- | ------------------------ |
| <span class="sg-selector sg-class">input\_field</span>                                                        | For basic text fields    |
| <span class="sg-selector sg-class">input\_field</span> <span class="sg-selector sg-class">is-select</span>    | For select fields        |
| <span class="sg-selector sg-class">input\_field</span> <span class="sg-selector sg-class">is-text-area</span> | For multiline input      |
| <span class="sg-selector sg-class">checkbox</span>                                                            | Custom-styled checkbox   |
| <span class="sg-selector sg-class">radio</span>                                                               | Custom-styled radio      |
| <span class="sg-selector sg-class">button</span>                                                              | For submitting the form  |
| <span class="sg-selector sg-class">form\_success-message</span>                                               | Visible after submission |
| <span class="sg-selector sg-class">form\_error-message</span>                                                 | Shows validation errors  |

## Elements

**Input elements**

* <span class="sg-selector sg-class">
    input_label
  </span>
* <span class="sg-selector sg-class">input</span> - wrapper of the label and input field

**Checkbox elements:**

* <span class="sg-selector sg-class">
    checkbox_toggle
  </span>
* <span class="sg-selector sg-class">
    checkbox_label
  </span>

**Radio elements:**

* <span class="sg-selector sg-class">
    radio_toggle
  </span>
* <span class="sg-selector sg-class">
    radio_label
  </span>

## Surface Modifiers

To ensure proper contrast and accessibility, surface modifiers are applied as combo classes to individual form elements and following naming convention <span class="sg-selector sg-class">`element`</span> <span class="sg-selector sg-class">on-`surface`</span>

Surface options: `on-inverse`, `on-accent-primary`, `on-accent-secondary`, `on-accent-tertiary`

Example: <span class="sg-selector sg-class">checkbox\_toggle</span> <span class="sg-selector sg-class">on-inverse</span>

---

# Tabs

> Tabs are navigation components that organize content into separate views.

Each tab button uses a base class and can be styled to reflect different backgrounds or interface variants.

The base class is: <span class="sg-selector sg-class">tab\_menu-button</span>

## Surface Modifiers

Use these to adapt the tab appearance based on the background context.

Naming convention for combo classes is <span class="sg-selector sg-class">tab\_menu-button</span> <span class="sg-selector sg-class">on-`surface`</span>,\
where `surface` can be `inverse`, `accent-primary`, `accent-tertiary`, or `accent-secondary`.

Example:\
<span class="sg-selector sg-class">tab\_menu-button</span> <span class="sg-selector sg-class">on-inverse</span>

## Style Modifiers

Additional style options for tabs is <span class="sg-selector sg-class">tab\_menu-link</span>.  It removes tab background but keeps underline and label styling.

---

# Slider

> Sliders are interactive components that allow users to select a value from a range.

## Class Naming

| Class                                                   | Description                                                |
| ------------------------------------------------------- | ---------------------------------------------------------- |
| <span class="sg-selector sg-class">slider</span>        | The main wrapper element for the slider                    |
| <span class="sg-selector sg-class">slider\_mask</span>  | A container that clips and holds the visible slide content |
| <span class="sg-selector sg-class">slider\_arrow</span> | Navigation button used to go to the next/previous slide    |

## Navigation

Sliders use arrows for navigation. These arrows are styled using a base class, and surface modifiers can be added to adapt to different backgrounds.

The base class is <span class="sg-selector sg-class">slider\_arrow</span>.

### Directional Modifiers

This can be extended with directional modifiers for navigation:

* <span class="sg-selector sg-class">
    slider_arrow
  </span>
  <span class="sg-selector sg-class">
    is-previous
  </span>
* <span class="sg-selector sg-class">
    slider_arrow
  </span>
  <span class="sg-selector sg-class">
    is-next
  </span>

## Surface Modifiers

Use these to adapt the slider arrows to dark backgrounds.

<span class="sg-selector sg-class">
  slider_arrow
</span>

<span class="sg-selector sg-class">
  is-inverse
</span>

---

# Divider

> Dividers are visual elements that separate content into distinct sections.

## Class Naming

Dividers are thin visual separators used to distinguish content sections either horizontally or vertically. There are two main base classes depending on the direction of the divider.

Base Classes:

| Class                                                      | Description         |
| ---------------------------------------------------------- | ------------------- |
| <span class="sg-selector sg-class">divider</span>          | horizontal dividers |
| <span class="sg-selector sg-class">divider-vertical</span> | vertical dividers   |

## Color Modifiers

These can be used in combination with either horizontal or vertical dividers to adjust color styling.

* <span class="sg-selector sg-class">
    divider
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>
* <span class="sg-selector sg-class">
    divider
  </span>
  <span class="sg-selector sg-class">
    is-accent
  </span>

Example:

* <span class="sg-selector sg-class">
    divider
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>

* <span class="sg-selector sg-class">
    divider-vertical
  </span>
  <span class="sg-selector sg-class">
    is-accent
  </span>

---

# Utility Classes

> Utilities are a collection of classes fine-tune layouts and components that render on a website.

All utility classes use descriptive naming that describes exactly what they are doing.

Utilities are a collection of modifier classes that fine-tune layouts and components and keep consistency. You can add a utility class as a combo class to adjust a behavior of the main class or apply it as a main class to define the functionality of an element. For instance, if you want to add a shadow to a card, you can add shadow utility class as a combo class for a card:

## Margins and Padding

Margins and padding are applied to sections, containers, and other elements to define inner spacing or distance between elements.

### Margin

Margin defines the space **outside** of an element.

<div>
  <span>
    Margin
  </span>

  <div>
    <span>
      Padding
    </span>

    <div>
      Content
    </div>
  </div>
</div>

Utility classes use this structure:
<span class="sg-selector sg-class">margin-`direction`\_`value`</span>

**Margin All**

* Value: `none`, `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `auto`

Example:
<span class="sg-selector sg-class">margin\_xxsmall</span> , <span class="sg-selector sg-class">margin\_none</span>

**Margin Vertical**

* Direction: `top`, `bottom`
* Value: `none`, `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `auto`

Example:
<span class="sg-selector sg-class">margin-top\_xsmall</span> , <span class="sg-selector sg-class">margin-bottom\_large</span>

**Margin Horizontal**

* Direction: `left`, `right`, `all`
* Value: `none`, `xxsmall`, `xsmall`, `small`, `medium`, `auto`

Example:
<span class="sg-selector sg-class">margin-right\_small</span> , <span class="sg-selector sg-class">margin-left\_auto</span>

### Padding

Padding defines the space **inside** of an element.

<div>
  <span>
    Margin
  </span>

  <div>
    <span>
      Padding
    </span>

    <div>
      Content
    </div>
  </div>
</div>

Utility classes use this structure:
<span class="sg-selector sg-class">padding-`direction`\_`value`</span>

**Padding Vertical**

* Direction: `top`, `bottom`
* Value: `none`, `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`

Example:
<span class="sg-selector sg-class">padding-top\_small</span>

**Padding Horizontal**

* Direction: `left`, `right`
* Value: `none`, `xxsmall`, `xsmall`, `small`, `medium`, `large`

Example:
<span class="sg-selector sg-class">padding-right\_xsmall</span>

**Padding Around**

* Value: `none`, `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`

Example:
<span class="sg-selector sg-class">padding\_none</span> , <span class="sg-selector sg-class">padding\_large</span>

### Responsive Spacing

On smaller screens (like **Mobile Landscape**), some margin and padding utility classes will use **smaller spacing variables** than their desktop counterparts.

For example:

<span class="sg-selector sg-class">
  margin-top_xlarge
</span>

* <span class="sg-selector sg-var">6x</span> on desktop,
* <span class="sg-selector sg-var">3x</span> on mobile devices.

This behavior ensures better vertical rhythm and balance on smaller screens without needing to apply breakpoint-specific classes manually.

***

## Display and Overflow

Utilities to control layout visibility and content flow.

| Class                                                           | Description                       |
| --------------------------------------------------------------- | --------------------------------- |
| <span class="sg-selector sg-class">display\_block</span>        | Forces element to behave as block |
| <span class="sg-selector sg-class">display\_inline-block</span> | Element behaves like inline-block |
| <span class="sg-selector sg-class">display\_none</span>         | Hides element from layout         |
| <span class="sg-selector sg-class">overflow\_clip</span>        | Clips overflow without scroll     |
| <span class="sg-selector sg-class">overflow\_hidden</span>      | Hides overflow, no scroll         |
| <span class="sg-selector sg-class">overflow\_visible</span>     | Makes overflow content visible    |
| <span class="sg-selector sg-class">overflow\_auto</span>        | Scrollbars appear as needed       |
| <span class="sg-selector sg-class">screen-reader</span>         | Visible to screen readers only    |

***

## Position

Controls element positioning behavior across breakpoints.

<svg data-wf-icon="DeviceLaptopStar24Icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 11H19V8.366L21.2811 9.68301L21.7811 8.81699L19.5 7.49999L21.7811 6.18301L21.2811 5.31699L19 6.63399V4H18V6.63395L15.719 5.31699L15.219 6.18301L17.5 7.49999L15.2189 8.81699L15.7189 9.68301L18 8.36604V11Z" fill="currentColor" /><path d="M5.5 6H14V7H5.5C5.22386 7 5 7.22386 5 7.5V17H19V12H20V17L23 17.0273V18.0273H1V17.0273L4 17V7.5C4 6.67157 4.67157 6 5.5 6Z" fill="currentColor" /></svg> **Desktop**

| Class                                                                                                                | Description                          |
| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| <span class="sg-selector sg-class">position\_relative</span>                                                         | Offsets relative to normal position  |
| <span class="sg-selector sg-class">position\_absolute</span>                                                         | Removes from flow, absolute position |
| <span class="sg-selector sg-class">position\_fixed</span>                                                            | Fixed relative to viewport           |
| <span class="sg-selector sg-class">position\_fixed</span> <span class="sg-selector sg-class">is-top</span>           | Fixed to top edge                    |
| <span class="sg-selector sg-class">position\_fixed</span> <span class="sg-selector sg-class">is-left</span>          | Fixed to left edge                   |
| <span class="sg-selector sg-class">position\_fixed</span> <span class="sg-selector sg-class">is-right</span>         | Fixed to right edge                  |
| <span class="sg-selector sg-class">position\_sticky</span>                                                           | Sticks to top on scroll              |
| <span class="sg-selector sg-class">position\_sticky</span> <span class="sg-selector sg-class">is-top\_large</span>   | Custom offset sticky                 |
| <span class="sg-selector sg-class">position\_sticky</span> <span class="sg-selector sg-class">is-desktop-only</span> | Sticky only on desktop               |
| <span class="sg-selector sg-class">position\_static</span>                                                           | Default positioning                  |
| <span class="sg-selector sg-class">z-index\_1</span>                                                                 | Layer stacking with values 1–5       |

<svg data-wf-icon="DeviceTabletPortrait24Icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99658 17L13.9966 17.0273L14.0034 16.0274L10.0034 16L9.99658 17Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 5C6.67157 5 6 5.67157 6 6.5V17.5C6 18.3284 6.67157 19 7.5 19H16.5C17.3284 19 18 18.3284 18 17.5V6.5C18 5.67157 17.3284 5 16.5 5H7.5ZM7 6.5C7 6.22386 7.22386 6 7.5 6H16.5C16.7761 6 17 6.22386 17 6.5V17.5C17 17.7761 16.7761 18 16.5 18H7.5C7.22386 18 7 17.7761 7 17.5V6.5Z" fill="currentColor" /></svg> **Tablet**

| Class                                                                | Description                     |
| -------------------------------------------------------------------- | ------------------------------- |
| <span class="sg-selector sg-class">position\_absolute\_tablet</span> | Set position absolute on tablet |
| <span class="sg-selector sg-class">position\_relative\_tablet</span> | Set position relative on tablet |
| <span class="sg-selector sg-class">position\_static\_tablet</span>   | Set position static on tablet   |

<svg data-wf-icon="DeviceMobilePortrait24Icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 17H14V16H11V17Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M17 6.5C17 5.67157 16.3284 5 15.5 5H9.5C8.67157 5 8 5.67157 8 6.5V17.5C8 18.3284 8.67157 19 9.5 19H15.5C16.3284 19 17 18.3284 17 17.5V6.5ZM15.5 6C15.7761 6 16 6.22386 16 6.5V17.5C16 17.7761 15.7761 18 15.5 18H9.5C9.22386 18 9 17.7761 9 17.5V6.5C9 6.22386 9.22386 6 9.5 6L15.5 6Z" fill="currentColor" /></svg> **Mobile**

| Class                                                              | Description                |
| ------------------------------------------------------------------ | -------------------------- |
| <span class="sg-selector sg-class">position\_sticky\_mobile</span> | Mobile-only sticky support |

***

## Transform

Controls element translation and rotation.

| Class                                                          | Description                          |
| -------------------------------------------------------------- | ------------------------------------ |
| <span class="sg-selector sg-class">move-up\_15percent</span>   | Shifts element upward by 15%         |
| <span class="sg-selector sg-class">move-up\_50percent</span>   | Shifts element upward by 50%         |
| <span class="sg-selector sg-class">move-down\_15percent</span> | Shifts element downward by 15%       |
| <span class="sg-selector sg-class">move-down\_25percent</span> | Shifts element downward by 25%       |
| <span class="sg-selector sg-class">move-down\_50percent</span> | Shifts element downward by 50%       |
| <span class="sg-selector sg-class">rotate\_-12deg</span>       | Rotates element left by 12 degrees   |
| <span class="sg-selector sg-class">rotate\_-4.5deg</span>      | Rotates element left by 4.5 degrees  |
| <span class="sg-selector sg-class">rotate\_12deg</span>        | Rotates element right by 12 degrees  |
| <span class="sg-selector sg-class">rotate\_4.5deg</span>       | Rotates element right by 4.5 degrees |

***

## Width

Controls fixed, responsive, and percentage-based width settings.

<svg data-wf-icon="DeviceLaptopStar24Icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 11H19V8.366L21.2811 9.68301L21.7811 8.81699L19.5 7.49999L21.7811 6.18301L21.2811 5.31699L19 6.63399V4H18V6.63395L15.719 5.31699L15.219 6.18301L17.5 7.49999L15.2189 8.81699L15.7189 9.68301L18 8.36604V11Z" fill="currentColor" /><path d="M5.5 6H14V7H5.5C5.22386 7 5 7.22386 5 7.5V17H19V12H20V17L23 17.0273V18.0273H1V17.0273L4 17V7.5C4 6.67157 4.67157 6 5.5 6Z" fill="currentColor" /></svg> **Desktop**

| Class                                                       | Description                   |
| ----------------------------------------------------------- | ----------------------------- |
| <span class="sg-selector sg-class">max-width\_xsmall</span> | Restricts max width to xsmall |
| <span class="sg-selector sg-class">max-width\_small</span>  | Restricts max width to small  |
| <span class="sg-selector sg-class">max-width\_medium</span> | Restricts max width to medium |
| <span class="sg-selector sg-class">max-width\_large</span>  | Restricts max width to large  |
| <span class="sg-selector sg-class">width\_auto</span>       | Width auto based on content   |
| <span class="sg-selector sg-class">width\_small</span>      | Small fixed width             |
| <span class="sg-selector sg-class">width\_medium</span>     | Medium fixed width            |
| <span class="sg-selector sg-class">width\_35percent</span>  | Width set to 35%              |
| <span class="sg-selector sg-class">width\_40percent</span>  | Width set to 40%              |
| <span class="sg-selector sg-class">width\_50percent</span>  | Width set to 50%              |
| <span class="sg-selector sg-class">width\_60percent</span>  | Width set to 60%              |
| <span class="sg-selector sg-class">width\_100percent</span> | Width set to 100%             |

<svg data-wf-icon="DeviceTabletPortrait24Icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99658 17L13.9966 17.0273L14.0034 16.0274L10.0034 16L9.99658 17Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 5C6.67157 5 6 5.67157 6 6.5V17.5C6 18.3284 6.67157 19 7.5 19H16.5C17.3284 19 18 18.3284 18 17.5V6.5C18 5.67157 17.3284 5 16.5 5H7.5ZM7 6.5C7 6.22386 7.22386 6 7.5 6H16.5C16.7761 6 17 6.22386 17 6.5V17.5C17 17.7761 16.7761 18 16.5 18H7.5C7.22386 18 7 17.7761 7 17.5V6.5Z" fill="currentColor" /></svg> **Tablet**

| Class                                                               | Description                   |
| ------------------------------------------------------------------- | ----------------------------- |
| <span class="sg-selector sg-class">width\_50percent\_tablet</span>  | Sets width to 50% on tablets  |
| <span class="sg-selector sg-class">width\_60percent\_tablet</span>  | Sets width to 60% on tablets  |
| <span class="sg-selector sg-class">width\_100percent\_tablet</span> | Sets width to 100% on tablets |

<svg data-wf-icon="DeviceMobilePortrait24Icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 17H14V16H11V17Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M17 6.5C17 5.67157 16.3284 5 15.5 5H9.5C8.67157 5 8 5.67157 8 6.5V17.5C8 18.3284 8.67157 19 9.5 19H15.5C16.3284 19 17 18.3284 17 17.5V6.5ZM15.5 6C15.7761 6 16 6.22386 16 6.5V17.5C16 17.7761 15.7761 18 15.5 18H9.5C9.22386 18 9 17.7761 9 17.5V6.5C9 6.22386 9.22386 6 9.5 6L15.5 6Z" fill="currentColor" /></svg> **Mobile Landscape**

| Class                                                                 | Description        |
| --------------------------------------------------------------------- | ------------------ |
| <span class="sg-selector sg-class">width\_70percent\_mobile-l</span>  | Sets width to 70%  |
| <span class="sg-selector sg-class">width\_80percent\_mobile-l</span>  | Sets width to 80%  |
| <span class="sg-selector sg-class">width\_100percent\_mobile-l</span> | Sets width to 100% |

<svg data-wf-icon="DeviceMobilePortrait24Icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 17H14V16H11V17Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M17 6.5C17 5.67157 16.3284 5 15.5 5H9.5C8.67157 5 8 5.67157 8 6.5V17.5C8 18.3284 8.67157 19 9.5 19H15.5C16.3284 19 17 18.3284 17 17.5V6.5ZM15.5 6C15.7761 6 16 6.22386 16 6.5V17.5C16 17.7761 15.7761 18 15.5 18H9.5C9.22386 18 9 17.7761 9 17.5V6.5C9 6.22386 9.22386 6 9.5 6L15.5 6Z" fill="currentColor" /></svg> **Mobile Portrait**

| Class                                                               | Description        |
| ------------------------------------------------------------------- | ------------------ |
| <span class="sg-selector sg-class">width\_100percent\_mobile</span> | Sets width to 100% |

***

## Height

Controls element height and minimum height behavior across breakpoints.

<svg data-wf-icon="DeviceLaptopStar24Icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 11H19V8.366L21.2811 9.68301L21.7811 8.81699L19.5 7.49999L21.7811 6.18301L21.2811 5.31699L19 6.63399V4H18V6.63395L15.719 5.31699L15.219 6.18301L17.5 7.49999L15.2189 8.81699L15.7189 9.68301L18 8.36604V11Z" fill="currentColor" /><path d="M5.5 6H14V7H5.5C5.22386 7 5 7.22386 5 7.5V17H19V12H20V17L23 17.0273V18.0273H1V17.0273L4 17V7.5C4 6.67157 4.67157 6 5.5 6Z" fill="currentColor" /></svg> **Desktop**

| Class                                                            | Description                          |
| ---------------------------------------------------------------- | ------------------------------------ |
| <span class="sg-selector sg-class">height\_100percent</span>     | Full height of parent                |
| <span class="sg-selector sg-class">height\_100dvh</span>         | Full dynamic viewport height         |
| <span class="sg-selector sg-class">min-height\_100percent</span> | Minimum height 100%                  |
| <span class="sg-selector sg-class">min-height\_100dvh</span>     | Minimum height 100% dynamic viewport |
| <span class="sg-selector sg-class">height\_50vh</span>           | 50% of viewport height               |
| <span class="sg-selector sg-class">height\_100vh</span>          | 100% of viewport height              |

<svg data-wf-icon="DeviceTabletPortrait24Icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99658 17L13.9966 17.0273L14.0034 16.0274L10.0034 16L9.99658 17Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 5C6.67157 5 6 5.67157 6 6.5V17.5C6 18.3284 6.67157 19 7.5 19H16.5C17.3284 19 18 18.3284 18 17.5V6.5C18 5.67157 17.3284 5 16.5 5H7.5ZM7 6.5C7 6.22386 7.22386 6 7.5 6H16.5C16.7761 6 17 6.22386 17 6.5V17.5C17 17.7761 16.7761 18 16.5 18H7.5C7.22386 18 7 17.7761 7 17.5V6.5Z" fill="currentColor" /></svg> **Tablet**

| Class                                                              | Description                     |
| ------------------------------------------------------------------ | ------------------------------- |
| <span class="sg-selector sg-class">height\_auto\_tablet</span>     | Sets height auto on tablets     |
| <span class="sg-selector sg-class">min-height\_auto\_tablet</span> | Sets min-height auto on tablets |

***

## Border Radius

Controls element corner roundness using utility classes.

### Component Specific

These are helpful when you need to customize or reset corners without affecting the base component class.

* <span class="sg-selector sg-class">
    radius_card
  </span>
* <span class="sg-selector sg-class">
    radius_button
  </span>

### Size Specific

Use the <span class="sg-selector sg-class">radius\_`size`</span> format to control element corner roundness.\
The `size` follows t-shirt sizing convention: `small`, `medium`, `large`, `xlarge`, `round`

Example: <span class="sg-selector sg-class">radius\_large</span>

### Side-specific

These utilities give you full control when working with overlapping sections, containers with flush corners, or when selectively removing roundness.

* <span class="sg-selector sg-class">
    radius_all-0
  </span>
* <span class="sg-selector sg-class">
    radius_top-0
  </span>
* <span class="sg-selector sg-class">
    radius_right-0
  </span>
* <span class="sg-selector sg-class">
    radius_bottom-0
  </span>
* <span class="sg-selector sg-class">
    radius_left-0
  </span>

***

## Mask

Use utility mask classes <span class="sg-selector sg-class">mask\_`direction`</span> to apply directional fades to images or elements.\
These are commonly paired with <span class="sg-selector sg-class">overlay</span> and <span class="sg-selector sg-class">Image</span>

Apply one of the following as a combo class:

* <span class="sg-selector sg-class">
    mask_top
  </span>
* <span class="sg-selector sg-class">
    mask_bottom
  </span>
* <span class="sg-selector sg-class">
    mask_left
  </span>
* <span class="sg-selector sg-class">
    mask_right
  </span>
* <span class="sg-selector sg-class">
    mask_fade-horizontal
  </span>
* <span class="sg-selector sg-class">
    mask_fade-vertical
  </span>

Example:

<span class="sg-selector sg-class">
  image
</span>

<span class="sg-selector sg-class">
  mask_bottom
</span>

<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 1280 800" fill="none">
    <rect width="1280" height="800" fill="#F0F0F0" />

    <path fill-rule="evenodd" clip-rule="evenodd" d="M529.954 336.456C529.954 326.991 537.627 319.318 547.092 319.318C556.557 319.318 564.23 326.991 564.23 336.456C564.23 345.92 556.557 353.593 547.092 353.593C537.627 353.593 529.954 345.92 529.954 336.456ZM547.092 313.46C534.392 313.46 524.096 323.755 524.096 336.456C524.096 349.156 534.392 359.451 547.092 359.451C559.792 359.451 570.087 349.156 570.087 336.456C570.087 323.755 559.792 313.46 547.092 313.46ZM611.751 366.971C612.653 366.971 613.504 367.386 614.059 368.097L659.813 426.672L685.27 394.827C685.826 394.131 686.668 393.727 687.558 393.727C688.448 393.727 689.29 394.131 689.846 394.827L759.359 481.782C760.062 482.662 760.198 483.866 759.711 484.88C759.223 485.895 758.197 486.54 757.071 486.54H700.936C700.875 486.54 700.814 486.538 700.754 486.534C700.694 486.538 700.634 486.54 700.573 486.54H522.929C521.809 486.54 520.787 485.902 520.297 484.895C519.806 483.889 519.931 482.691 520.621 481.808L609.443 368.097C609.998 367.386 610.849 366.971 611.751 366.971ZM702.002 480.682L663.52 431.417L687.558 401.346L750.98 480.682H702.002ZM611.751 374.658L528.933 480.682H694.569L611.751 374.658Z" fill="#ABABAB" />
  </svg>
</div>

***

## Overlay

Overlay classes are used to create translucent layers above content. They're commonly used to improve readability on background images or to emphasize text.

| Class                                                                                                  | Description                              |
| ------------------------------------------------------------------------------------------------------ | ---------------------------------------- |
| <span class="sg-selector sg-class">overlay</span>                                                      | Adds a dark semi-transparent background  |
| <span class="sg-selector sg-class">overlay</span> <span class="sg-selector sg-class">is-inverse</span> | Adds a light semi-transparent background |
| <span class="sg-selector sg-class">overlay\_opacity-low</span>                                         | Adds a low opacity overlay               |

**Link Overlay**

| Class                                                  | Description                                                                  |
| ------------------------------------------------------ | ---------------------------------------------------------------------------- |
| <span class="sg-selector sg-class">link-overlay</span> | Expands a link to cover its entire container (use inside position: relative) |

**Overlay with Mask**

Combine <span class="sg-selector sg-class">overlay</span> with directional mask utility classes to create faded on a side images or faded overlays.

Example:

* <span class="sg-selector sg-class">
    overlay
  </span>
  <span class="sg-selector sg-class">
    mask_top
  </span>
* <span class="sg-selector sg-class">
    overlay
  </span>
  <span class="sg-selector sg-class">
    mask_left
  </span>

***

## Drop Shadow

Add subtle or strong depth to elements using drop shadow utility classes.

* <span class="sg-selector sg-class">
    shadow_xxsmall
  </span>
* <span class="sg-selector sg-class">
    shadow_xsmall
  </span>
* <span class="sg-selector sg-class">
    shadow_small
  </span>
* <span class="sg-selector sg-class">
    shadow_medium
  </span>
* <span class="sg-selector sg-class">
    shadow_large
  </span>
* <span class="sg-selector sg-class">
    shadow_xlarge
  </span>
* <span class="sg-selector sg-class">
    shadow_xxlarge
  </span>

***

## Typography

These utility classes allow you to control alignment and color of text elements globally or responsively.

### Text Color

These utility classes are used to apply specific text colors to an element.

* <span class="sg-selector sg-class">
    text-color_primary
  </span>
* <span class="sg-selector sg-class">
    text-color_secondary
  </span>
* <span class="sg-selector sg-class">
    text-color_inverse
  </span>
* <span class="sg-selector sg-class">
    text-color_inverse-secondary
  </span>
* <span class="sg-selector sg-class">
    text-color_accent-primary
  </span>
* <span class="sg-selector sg-class">
    text-color_accent-secondary
  </span>
* <span class="sg-selector sg-class">
    text-color_accent-tertiary
  </span>
* <span class="sg-selector sg-class">
    text-color_accent-on-inverse
  </span>
* <span class="sg-selector sg-class">
    text-color_accent-on-primary
  </span>
* <span class="sg-selector sg-class">
    text-color_on-accent-primary
  </span>
* <span class="sg-selector sg-class">
    text-color_on-accent-secondary
  </span>
* <span class="sg-selector sg-class">
    text-color_on-overlay
  </span>

### Text Alignment

Text alignment utilities let you override the default left-aligned behavior.

* <span class="sg-selector sg-class">
    text-align_left
  </span>
* <span class="sg-selector sg-class">
    text-align_center
  </span>
* <span class="sg-selector sg-class">
    text-align_right
  </span>

Responsive modifiers:

* <span class="sg-selector sg-class">
    text-align_center_tablet
  </span>
* <span class="sg-selector sg-class">
    text-align_center_mobile-l
  </span>
* <span class="sg-selector sg-class">
    text-align_center_mobile
  </span>

***

## Misc

| Class                                                  | Description             |
| ------------------------------------------------------ | ----------------------- |
| <span class="sg-selector sg-class">events\_none</span> | Disables pointer events |
| <span class="sg-selector sg-class">events\_auto</span> | Enables pointer events  |

---

# Introducing FlowKit CSS Framework

> First release of the Flowkit CSS Framework.

---

# v1.0.0

May 15, 2025

Initial release of the Flowkit CSS Framework.

---

# Introducing Flowkit v2

> Introducing Flowkit v2 - A comprehensive CSS framework with new naming conventions, grid system, and enhanced utilities

## What's new in Flowkit v2?

### New naming conventions

* **Hyphens and underscores**: Strategic use that mirrors generated CSS and defines component relationships. Hyphens separate modifiers and properties, while underscores connect main classes and component parts
* **Combo classes**: Enhanced approach to combo classes using prefixes: `is-`, `on-`, `gap-`, and responsive modifiers `tablet-`, `mobile-l-`, and `mobile-`.
* **Size scales**: Full word naming (`xsmall`, `small`, `medium`, `large`, `xlarge`)

### New grid system

* **Basic grid classes**: `grid`, `grid-1-col` through `grid-12-col`
* **Responsive behavior**: Automatic column adjustments across breakpoints
* **Spacing utilities**: Integrated gap and padding controls through combo classes
* **Alignment options**: Horizontal and vertical alignment modifiers
* **Responsive column modifiers**: Breakpoint-specific column adjustments

### Style guide

**Simplified**: All the technical documentation now is moved to the docs. Style guide keeps only top level brand styles and essential components.

---

# Getting started with Webflow Apps

> An introduction into Webflow Apps - what they are, what they can do, and why you'll want to build something great!

Webflow Apps give developers the power to extend Webflow’s capabilities, making it easier for Visual Designers and Marketing teams to streamline workflows and achieve better results.

## App capabilities

<CardGroup cols={2}>
  <Card
    title="Connect Webflow to your backend"
    href="/apps/docs/data-clients/build-a-data-client"
    iconPosition="left"
    iconSize="10"
    icon={
          <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Switch.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Switch.svg" alt="" className="block dark:hidden" />
          </>
        }
  >
    <div>
      Build backend integrations that operate outside of the Webflow Designer to sync data between Webflow and other platforms. Connect your CMS to an external database, send form submissions to a CRM, or automate content publishing.

      <br />

      <br />

      <Button href="/data/docs/data-clients">
        Build a Data Client
      </Button>
    </div>
  </Card>

  <Card
    title="Extend the Webflow Designer"
    href="/apps/docs/designer-extensions"
    iconPosition="left"
    iconSize="10"
    icon={
          <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Styles.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Styles.svg" alt="" className="block dark:hidden" />
          </>
        }
  >
    <div>
      Create tools that run directly inside the Webflow Designer. Add new panels, automate design tasks, or embed content from other services to enhance your design workflow without leaving Webflow.

      <br />

      <br />

      <br />

      <Button href="/apps/docs/designer-extensions">
        Build a Designer Extension
      </Button>
    </div>
  </Card>
</CardGroup>

<Card
  title="Combine data and designer operations"
  href="/apps/docs/hybrid-apps"
  iconPosition="left"
  iconSize="10"
  icon={
  <>
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/App.svg" alt="" className="hidden dark:block" />
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/App.svg" alt="" className="block dark:hidden" />
  </>
}
>
  Bring both data and designer operations together to create a comprehensive solution for users, that supports both backend operations and designer workflows
</Card>

## Start building

Ready to unleash the full potential of Webflow? Follow these steps to create and launch an app that enhances Webflow’s capabilities and wows users. Let’s get started!

<Steps>
  ### Choose a development workspace

  To start building an app, you'll need a Workspace where you have Admin permissions.

  For access to advanced features, such as enterprise-only APIs and Localization, you can request a dedicated Developer Workspace.

  <br />

  <a href="https://docs.google.com/forms/d/1XaqSQSQd_pXCgJBsMLM2qM7kwHcWbMLnmRbCjmSDBzM">
    <button class="cc-primary">Request a Developer Workspace</button>
  </a>

  ### Create your first app

  Start building an app that integrates seamlessly with Webflow, enabling custom solutions that elevate user experiences. Register an App in Webflow to get started.

  <br />

  <a href="/docs/register-an-app">
    <button class="cc-primary">
      Register an app
    </button>
  </a>

  ### Tap into Webflow's CMS Data

  Access the power of Webflow’s CMS directly within your app. Dive into dynamic data, pull content on demand, and build experiences that adapt in real-time.

  <a href="/data/docs/working-with-the-cms">
    <button class="cc-primary">
      Explore CMS data
    </button>
  </a>

  ### Transform the canvas with your app

  Step into the Designer and start creating apps that interact directly with the Canvas. From manipulating styles to custom functionality, unleash the full potential of Webflow’s design environment.

  <a href="/designer/docs/getting-started-designer-extensions">
    <button class="cc-primary">
      Dive into Designer Extensions
    </button>
  </a>

  ### Share your app

  Publishing your app lets you share your creation with others. Launch publicly in the Webflow Marketplace to reach thousands of users and unlock monetization opportunities, or publish privately to create custom solutions for your organization and select clients. Whether public or private, your published app can transform how users work in Webflow.

  <a href="/docs/submitting-your-app">
    <button class="cc-primary">
      Publish your app
    </button>
  </a>
</Steps>

---

# FAQs and Troubleshooting

> A troubleshooting guide to help you with Webflow Apps

## **Frequently asked questions**

### Designer Extensions

<Accordion title="Which frameworks and libraries can I use to build my Designer Extension?">
  You can use any framework that outputs static resources and runs in a browser environment. Just make sure your extension fits within the iframe dimensions provided by Webflow.
</Accordion>

<Accordion title="How do I test my Designer Extension?">
  <Steps>
    <Step title="Install your extension on a test site">
      In the left sidebar of your workspace, navigate to <strong>Apps & Integrations</strong> > <strong>Develop</strong>. Click the "..." button next to your app and select <strong>Install App</strong>. You'll see an authorization screen where you can select the sites or workspace you want to install the app on.
    </Step>

    <Step title="Run the extension in development mode">
      In your terminal, navigate to your project folder and run the following command:

      ```bash
      webflow extension serve
      ```

      This will start development mode locally (port 1337).
    </Step>

    <Step title="Preview and interact with your extension in the Designer">
      On your test site, open the Apps pane and find your app. Click "Launch Development App" to preview and interact with your locally hosted extension in the Designer.
    </Step>
  </Steps>
</Accordion>

<Accordion title="Why isn't my extension interacting with Webflow as expected?">
  * Double-check your use of the [Designer APIs](/designer/reference/overview) and ensure you’re using the correct methods.
  * Check the browser console for errors and review our [error handling guidelines](/designer/reference/error-handling).
  * Designer APIs only access content on the current page, not other sites or pages.
  * Make sure your app has the right permissions and scopes.
  * For Data API issues, verify you’re using the correct endpoints and valid tokens.
</Accordion>

<Accordion title="Why does my app look different in Webflow than expected?">
  * Designer Extensions run in an iframe with controlled dimensions. Check your configuration and use [resizing methods](https://developers.webflow.com/designer/reference/resize-extension) if needed.
  * Use scoped CSS or scoped class names to avoid style conflicts with Webflow’s native styles.
  * Test at different viewport sizes to ensure responsive behavior.
</Accordion>

<Accordion title="Why can't I upload a new version of my Designer Extension Bundle?">
  Only Workspace admins can upload new bundles. If you’re not an admin, contact your Workspace administrator to upload the bundle or grant you the necessary permissions.
</Accordion>

***

### Marketplace Apps

<Accordion title="Do I have to publicly share my app on the Marketplace?">
  No. You can publish your app as a **private app** and control who can install it. Select the **"Private"** option in the "Marketplace Visibility" section during submission. All private apps are reviewed just like public apps. [Learn more about private apps](/apps/docs/private-apps).
</Accordion>

<Accordion title="Can I update my app after it's been published?">
  Yes. You can submit updates at any time. Updates go through the same review process as your initial submission. Use the "Submit an App" form and select "App Update" as the submission type.
</Accordion>

***

## Troubleshooting

<Accordion title="Why can't other users install my app on their sites?">
  Only apps published to the Webflow Marketplace, either [publicly](/apps/docs/marketplace/submitting-your-app) or [privately](/apps/docs/private-apps), can be installed by other users. Submit your app for review to make it available for installation.

  **Want to test with a few users before publishing?**\
  Email [developers@webflow.com](mailto:developers@webflow.com) with up to **5** Webflow user emails. Our team can add them to a test group so they can install and use your app with the [install URL](/apps/docs/marketplace/submitting-your-app#installation-configuration).
</Accordion>

<Accordion title="Why isn't my app showing up in Webflow?">
  * Make sure you’ve [bundled your app with the Webflow CLI](/apps/docs/publishing-your-app#build-your-extension) and uploaded your Designer Extension via the Dashboard.
  * Confirm the app is installed on your site or workspace (check the App Development section in your workspace).
</Accordion>

<Accordion title="Why can't I view or update my app credentials (like the Client Secret)?">
  Only Workspace admins can view client secrets, edit app details, or create new apps. If you’re not an admin, contact your Workspace administrator for access or to perform these actions.
</Accordion>

---

# How to bundle and upload your Designer Extension to Webflow

> A step-by-step guide to building, bundling, and uploading your Designer Extension to a Webflow Workspace.

Once you've tested your Designer Extension locally, the next step is to upload it to Webflow to share with your Workspace. Each time you're ready to share a new version, you can upload it by following this guide.

### Before you begin

Make sure you have the following:

* A complete and tested Designer Extension.
* The [Webflow CLI](https://www.npmjs.com/package/@webflow/webflow-cli) installed.
* Admin access to the Webflow Workspace where your app is registered.
* Two-Factor Authentication (2FA) enabled on your Webflow account.

<Steps>
  <Step title="Build and bundle your extension">
    First, create a production-ready build of your extension. In your terminal, run the build command for your project. If you used `webflow extension init` to start your project, you can run:

    ```bash
    npm run build
    ```

    Depending on your project setup, this command compiles your code into a `build` or `dist` folder. You can specify this output directory in your `webflow.json` file. Learn more in our [App Settings guide](/designer/reference/app-settings).

    Next, use the Webflow CLI to bundle your build directory into a `bundle.zip` file. Run the following command from your project's root directory:

    ```bash
    webflow extension bundle
    ```

    This creates a `bundle.zip` file that is ready to be uploaded. **The bundle must not exceed 5MB.**

    <Note title="Working with Frameworks">
      If you're using a framework like Next.js or Astro, run the framework's production build command first, then run `webflow extension bundle` on the output directory. You can streamline this by combining these steps into a single script in your `package.json`.
    </Note>
  </Step>

  <Step title="Upload your extension bundle">
    With your `bundle.zip` file ready, you can upload it to Webflow.

    1. Navigate to your Workspace settings and click the **Apps & Integrations** tab.
    2. Under the **Develop** section, find your app and click **Publish extension version**.

       <Frame>
         <img alt="Publish extension version button in App settings" src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/47388dd9b18511fcce24cf965dfb55060b558faf3861c3c77c1b4662a33466af/products/data/pages/Apps/designer-extensions/assets/publish-extension-version.png" />
       </Frame>
    3. In the file dialog, select the `bundle.zip` file and add notes about the changes in this version.

    After the upload is complete, you'll see a confirmation message, and a new version will appear in your app's version history.
  </Step>

  <Step title="Test your uploaded extension">
    Once your extension is uploaded, test it in your Workspace to ensure it works as expected.

    1. Open a Webflow site in your Workspace.
    2. Open your app and click the **Launch App** button.
    3. Verify that everything works as expected.

    <Frame>
      <img alt="Launch app button in App settings" src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/b186e6075c18d9c7f491bb2ea8cfe5066df02499bf8fb0c636984bdc9ce73fbf/products/data/pages/Apps/designer-extensions/assets/launch-development-app.png" />
    </Frame>

    <Note>
      Be sure to click **Launch App** to test the uploaded version, not **Launch development app**, which loads your extension from your local development URL.
    </Note>
  </Step>
</Steps>

## Submitting to the Marketplace

Once your extension is tested in your Workspace, you can submit it to the Webflow App Marketplace. The [submission process](/apps/docs/marketplace/submitting-your-app) involves providing marketing assets, support information, and a description of your app.

The Webflow team will review your submission to ensure it follows our [Developer Terms of Service](/apps/developer-terms-of-service) and meets our [Marketplace Guidelines](/apps/docs/marketplace-guidelines). This process can take a few days, and you'll receive an email notification once it's approved.

Learn more in our [Marketplace Submission Guide](/apps/docs/marketplace/submitting-your-app).

## Frequently asked questions

<Accordion title="Are uploads to Webflow versioned?">
  Yes. Every time you upload a `bundle.zip` file, Webflow creates a new, versioned instance of your extension. You can add notes with each version to track new features, changes, and bug fixes. To see your version history, click the **...** button in your app's settings and select **Version History**.

  <Frame>
    <img alt="A list of Designer Extension versions with notes for each update." src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/e870b53f77caa26d7d7836ee10ca500aa9aa974f9bdd003ff990816f357b2ae6/products/data/pages/Apps/designer-extensions/assets/designer-extension-versions.png" />
  </Frame>
</Accordion>

<Accordion title="Can I revert to a previous version?">
  Webflow does not have a one-click rollback feature. However, since your `bundle.zip` files are generated from your local codebase, you can use your version control system (like Git) to check out a previous version of your code, generate a new bundle from it, and upload that bundle to Webflow.
</Accordion>

<Accordion title="Why is the 'Publish extension version' button disabled?">
  This button is disabled if you are not an admin of the Workspace or if you do not have Two-Factor Authentication (2FA) enabled on your account.
</Accordion>

<Accordion title="How can I share my extension outside my Workspace?">
  You can share your extension outside of your Workspace by submitting it to the Webflow Marketplace. If you want to test with a limited group of users before a full public release, you can also [submit your app to be reviewed as a private app](/apps/docs/private-apps).
</Accordion>

<Accordion title="Where is my production app hosted?">
  Your production app is hosted on Webflow's servers. When you upload your `bundle.zip` file, Webflow compiles your extension and serves it from a unique URL within an iframe in the Designer.

  You can find this URL in your app's settings by clicking the **...** button and selecting **Edit App -> Building Blocks -> Designer Extension** and see the section for Designer Extension URI.
</Accordion>

---

# Design Guidelines

> A guide on designing for Webflow Apps for the designer

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/0c2290354bd1bc91dbe446573533933c7b38e79e82fa151fb2ed786e5c023b0a/assets/images/debecc2-developer-ui-kit.jpg" alt="Developer UI kit" />

In this guide, we'll explore essential principles and practical tips to ensure your extensions engage users and seamlessly integrate with the Webflow ecosystem.

By focusing on user-centered design, thoughtful layout strategies, and effective color and typography choices, you'll create extensions that not only enhance functionality but also delight users. Let's dive in and discover how to make your extensions feel like a natural part of the Webflow experience. If you’re looking to publish your App on the Marketplace, please review our [Design and Usability section of our Marketplace App Guidelines.](/apps/docs/marketplace-guidelines)

<Note title="Looking to build a native looking Webflow App?">
  We’ve provided a simplified version of our design system with colors, typography, components, patterns, and App examples to help kickstart the design and build of your App. [Access the Webflow Apps Figma UI kit here](https://www.figma.com/community/file/1291823507081366246/webflow-app-ui-kit-2-0).
</Note>

## Crafting your user interface

Since Designer Extensions run within an iframe, you can use traditional HTML, CSS, and JavaScript to design and develop your user interface like you would any single-page application. You can use frameworks and libraries to help with this process. For instance, you might use [React](https://react.dev/) or [Vue.js](https://vuejs.org/) for creating your UI components, and [Tailwind CSS](https://tailwindcss.com/) or [Bootstrap](https://getbootstrap.com/) for styling.

Webflow doesn’t require Designer Extensions to feel native to the Designer, but we do believe Apps that feel native will resonate with our customers and provide a higher-level experience.

## Design principles

Your UI should adhere to the following key principles:

1. **Customer-focused:** The App's purpose and value should be defined around the needs of Webflow users. It should solve a unique problem for them.
2. **Simplicity & approachability:** Your App should be simple to use and not require extensive learning to get started. It should complement Webflow's visual abstraction of code, not complicate it.
3. **Consistent design:** Use consistent design elements like color, typography, and button styles throughout your App. This improves the user experience and makes your App easier to navigate.
4. **Foster creative momentum:** Your App should not hinder the creative process. Avoid unnecessary steps or options that could break the user's flow state.
5. **Clear Language:** Use clear and concise copy throughout your App. It should guide users and connect the dots between visuals, layouts, and usability.
6. **Inclusive & Accessible:** Strive to make your App accessible to all users. This means ensuring it adheres to accessibility standards and best practices.

## Layout guidelines

1. **Vertical component arrangement:** For the narrow, default interface, components should be stacked vertically rather than horizontally.
2. **Full-width buttons & components:** Full-width elements enforce a vertical orientation and make your App easier to scan.
3. **Avoid horizontal scrolling:** Ensure your UI elements fit within the iframe's width to prevent horizontal scrolling.
4. **Consistent spacing:** Use a consistent spacing rhythm (e.g., multiples of 4px) to create a visually pleasing App. Use white space effectively to create a balanced layout and highlight important information.
5. **Clear & concise copy:** Use sentence case for all text, including headings and buttons. Make error states helpful and actionable, and always strive for clarity over complexity.
6. **Consistent design language:** Use a consistent design language, including typography, color schemes, and button styles. This will create a more cohesive user experience and help users navigate your plugin more easily.
7. **Iconography**: Use recognizable and intuitive icons throughout your App. Icons can help users navigate your App more easily and quickly.

## Enhancing with colors & typography

Choose a color scheme that aligns with the purpose and tone of your App. Webflow primarily uses the Inter font for its interface. You can consider adopting it for consistency.

### Fonts

To use Webflow’s main font face, Inter, you will need to download the files into your App or access them via Google Font’s API. [Access Inter font family on Google Fonts](https://fonts.google.com/specimen/Inter).

### CSS variables

To design and build an App that feels native to Webflow’s Designer, you can use the following Webflow hosted CSS variables. These variables will automatically adjust based on a users [Appearance settings](https://webflow.com/updates/adjust-appearance-settings). Implement these by calling them in your CSS selectors with the `var()` function:

```css CSS
/* Webflow colors */
--background1: #1E1E1E;
--background2: #2E2E2E;
--background3: #383838;
--background4: #373737;
--background5: #444444;
--backgroundInactive: #2E2E2E;
--backgroundInverse: #EBEBEB;
--backgroundInput: rgba(0, 0, 0, 0.15);

--actionPrimaryBackground: #006ACC;
--actionPrimaryBackgroundHover: #187CD9;
--actionSecondaryBackground: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.10) 100%);
--actionSecondaryBackgroundHover: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.16) 100%);
--actionPrimaryText: #FFFFFF;
--actionPrimaryTextHover: #FFFFFF;
--actionSecondaryText: #E0E0E0;
--actionSecondaryTextHover: #E0E0E0;

--border1: rgba(255, 255, 255, 0.13);
--border2: rgba(255, 255, 255, 0.14);
--border3: rgba(255, 255, 255, 0.19);

--text1: #F5F5F5;
--text2: #BDBDBD;
--text3: #A3A3A3;
--textInactive: #757575;
--textInverse: #1E1E1E;

--blueText: #8AC2FF;
--blueIcon: #8AC2FF;
--blueBorder: #007DF0;

--greenBackground: #007A41;
--greenBackgroundHover: #0D8A4F;
--greenText: #63D489;
--greenIcon: #63D489;
--greenBorder: #259D4D;
--yellowBackground: #946B00;

--yellowBackgroundHover: #AF7F00;
--yellowText: #F3C831;
--yellowIcon: #F3C831;
--yellowBorder: #D7A220;

--redBackground: #CF313B;
--redBackgroundHover: #CB3535;
--redText: #FF8A8A;
--redIcon: #FF8A8A;
--redBorder: #E42F3A;

--orangeBackground: #BF4704;
--orangeBackgroundHover: #DC95616;
--orangeText: #EBA267;
--orangeIcon: #EBA267;
--orangeBorder: #DF640C;

--purpleBackground: #734CE0;
--purpleBackgroundHover: #815BEB;
--purpleText: #B89EFF;
--purpleIcon: #B89EFF;
--purpleBorder: #875FFD;

/* Box shadows for buttons and inputs */
--boxShadows-action-colored: 0px 0.5px 1px 0px rgba(0, 0, 0, 0.8),0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.20) inset;
--boxShadows-action-secondary: 0px 0.5px 1px rgba(0, 0, 0, 0.8),inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.12);
--boxShadows-input-inner: 0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset,0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset,0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset,0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset,0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset,0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset;

--boxShadows-menu: 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset, 0px 12px 24px 8px rgba(0, 0, 0, 0.04), 0px 8px 16px 4px rgba(0, 0, 0, 0.04), 0px 4px 8px 2px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.25);

--input-inner-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset, 0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset, 0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset, 0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset, 0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset, 0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset;

--menu-shadow: 0px 12px 24px 8px rgba(0, 0, 0, 0.08), 0px 8px 16px 4px rgba(0, 0, 0, 0.08), 0px 4px 8px 2px rgba(0, 0, 0, 0.08), 0px 2px 6px 0px rgba(0, 0, 0, 0.08), 0px -0.5px 0.5px 0px rgba(0, 0, 0, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset;

/* TYPOGRAPHY */
--font-stack: 'Inter', sans-serif;
--font-size-small: 11.5px;
--font-size-small-letter-spacing: -0.115px;
--font-size-large: 12.5px;
--font-weight-normal: 400;
--font-weight-medium: 600;
--border-radius: 4px;
```

---

# User Authentication with ID Tokens

> Learn how to establish a secure connection between a Designer Extension and Data Client.

<iframe src="https://teal-biscotti-e6017a.netlify.app/" allow="clipboard-write; clipboard-read" />

---

# Deep linking

> Deep Linking hybrid apps for streamlined authentication

To streamline the hand-off between a 3rd party experience and the Webflow Designer Extension, use the following deep link format:

```bash
https://<site short name>.design.webflow.com?app=<client id>
```

* `site short name`: Use the [Get Site Information](/designer/reference/get-site-info) method to retrieve this.
* `client id`: Available in your App's settings in the Webflow Dashboard under Apps & Integrations.

### Why This Matters

Deep linking allows you to bypass extra steps and provide a smooth user experience when moving from your Hybrid App to the Webflow Designer. If the App is already installed on the target site, the Designer launches directly with your Extension, reducing friction and context-switching for users.

* **If the App is installed**: The Designer session starts with the Extension.
* **If the App is not installed**: The Designer will launch as normal without the Extension, treating the deep link as a no-op.

### How It Works

* **Fetch the Site Short Name:** The site short name is needed to construct the link. You can retrieve it using the [Get Site Information](/designer/reference/get-site-info) method or [Get Site endpoint](/data/reference/sites/get).
* **Locate the Client ID:** Find the `client_id` in the Webflow Dashboard under Apps & Integrations in your App's settings.

By constructing a deep link with this format, you ensure that your Hybrid App and the Webflow Designer Extension work together seamlessly, reducing unnecessary user input and improving the overall flow between the two environments.

---

# Overview

> Transform your app into a valuable solution for millions of visual developers and marketers.

<img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/68385adae702610984f3eb063700cc8a249ea553d351460b31dea25e8121cf55/assets/images/4ca6539-Screenshot_2023-08-21_at_3.13.12_PM.png" alt="Marketplace Banner" />

## Welcome to the Webflow Marketplace

The Webflow Marketplace connects developers with a global community eager to build better, faster, and smarter. By publishing your app, you can reach millions of users and help shape the future of visual development.

***

## Getting started: Developing for the Marketplace

* **[App Guidelines](/apps/docs/marketplace-guidelines):** Follow the safety, quality, and design standards for a smooth submission and approval process.
* **[Submitting your App](/apps/docs/marketplace/submitting-your-app):** Use the step-by-step process to submit your app for review.
* **[Listing your App](/apps/docs/marketplace/listing-your-app):** See how your app will appear in the Marketplace and what content to include.
* **[Marketing your App](/apps/docs/marketing-your-app):** Learn how to showcase your app to the Webflow community.

***

## App visibility: Public vs. private

When you publish your app, you can choose to make it public or private:

* **Public apps** are listed in the Marketplace and discoverable by all users.
* **Private apps** aren't listed publicly. You control who can install your app by sharing a direct install URL. [Learn more about private apps](/apps/docs/private-apps).

***

## User testing before publishing

Want to test your app with a small group before going live? You can:

* Request to add up to **5** test users by emailing [developers@webflow.com](mailto:developers@webflow.com?Subject=Request%20to%20add%20test%20users%20to%20my%20app) with their Webflow emails.
* Once added, share your app’s install URL so they can try it out.

For full details, see [Testing and managing private apps](/apps/docs/private-apps).

***

## FAQs

<Accordion title="Do I have to publicly share my app on the Marketplace?">
  No. You can publish your app as a **private app** and control who can install it. Select the **"Private"** option in the "Marketplace Visibility" section during submission. All private apps are reviewed just like public apps. [Learn more about private apps](/apps/docs/private-apps).
</Accordion>

<Accordion title="Can I update my app after it's been published?">
  Yes. You can submit updates at any time. Updates go through the same review process as your initial submission. Use the "Submit an App" form and select "App Update" as the submission type.
</Accordion>

Have questions about submitting or testing your app? Reach out to the Webflow [community](https://forum.webflow.com/) or [support team](mailto:developers@webflow.com). We’re here to help you succeed in the Webflow Marketplace.

---

# Marketplace Guidelines

<Note>
  Please note that these guidelines are subject to change. If you have any questions or concerns about our review process, please contact us at [developers@webflow.com](mailto:developers@webflow.com).
</Note>

Before an App can be listed in the [Webflow Marketplace](https://webflow.com/apps), it must go through our thorough review process.

## Guidelines

The guidelines outlined below will be used by our review team to evaluate your submission.

### Safety / Legal

Ensuring the safety and security of our users and their projects is our utmost priority when it comes to Webflow Apps.

1. **Malicious, Damaging, or Objectionable Content:**
   1. We do not allow Apps that intend to harm or compromise the security of our users or their projects.
   2. Content that is offensive, insensitive, or intended to disgust is strictly prohibited.
   3. Ensure that your App fully adheres to our [Acceptable Use ](https://webflow.com/legal/aup)policy.
2. **Intellectual Property:**
   1. Ensure that your App only uses content for which you have the necessary rights, licenses, or permissions.
   2. Do not infringe upon the intellectual property rights of others, including trademarks, copyrights, or patents.
3. **Compliance:**
   1. Comply with all applicable laws, regulations, and legal requirements in the jurisdictions where your Marketplace App is available.
   2. Do not engage in any illegal activities or promote content that is prohibited or restricted by law.
   3. You may want to consult legal counsel if you have additional questions.
4. **Privacy and Data Protection:**
   1. It is imperative that your App respects user privacy and handles personal data in accordance with relevant privacy laws and regulations. Apps that infringe on individuals' privacy rights or misuse their data in any way will be removed from the marketplace.
   2. Provide clear and transparent information to users about the collection, storage, and use of their data within your Marketplace App.
   3. Implement appropriate security measures to protect user data from unauthorized access or breaches.

### Performance / Technical

All Webflow Apps must adhere to the following guidelines:

1. Performance:
   1. Optimize your App for efficient resource usage to provide a smooth and responsive experience to users.
   2. Avoid long-running background processes or tasks that may impact the overall performance of your App.
   3. Regularly monitor and address any performance issues or bottlenecks to maintain a high-quality user experience.
   4. Apps that have persistent performance issues may be subject to removal from the Marketplace.
2. Technical
   1. Apps should only utilize official Webflow APIs and should not require users to install separate packages that manipulate Webflow.
   2. Ensure that your App’s source code is well-organized and adheres to industry standards and conventions. It should be easily readable, maintainable, and free from unnecessary complexity.

Additionally, Apps built using Designer APIs must adhere to the following additional guidelines:

1. Technical
   1. Strive for clarity and consistency in your codebase, utilizing meaningful variable and function names, proper indentation, and appropriate comments where necessary.
   2. Do not use statements or patterns that could introduce vulnerabilities in your App (e.g. `eval()` statements, direct DOM manipulation, excessive use of global variables, etc.).
   3. Avoid using externally hosted iframes for anything beyond authentication.

### Design / Usability

Webflow users gravitate towards products that are easy to use, polished, and designed with intentionality. The guidelines below represent the minimum expectations for a Webflow App, however, we strongly encourage you to design your App in a way that users find useful.

All Marketplace Apps must adhere to the following guidelines:

1. **Consistency:**
   1. Ensure that your App's design and user interface are consistent throughout, providing a cohesive and familiar experience.
2. **Usability:**
   1. Provide comprehensive and user-friendly documentation or help resources to assist users in understanding and utilizing your App effectively. We recommend utilizing a Webflow site as your platform for hosting support docs.
   2. Ensure that end users are provided with a fully functional experience that is free of placeholder content and test data.
3. **Accessibility**:
   1. Design your App with accessibility in mind, ensuring that it can be used by individuals with disabilities or different abilities.
   2. Follow [best practices for accessibility](https://www.w3.org/WAI/standards-guidelines/wcag/), such as providing alternative text for images, supporting keyboard navigation, and maintaining sufficient color contrast.
4. **User Feedback and Testing:**
   1. Gather user feedback and conduct usability testing to identify areas for improvement and refine your App's design.
   2. Incorporate user suggestions and address reported usability issues in a timely manner to enhance the overall user experience.
   3. Apps that are error prone, not actively maintained, or those that present users with persistent usability issues will be removed from the marketplace.

Additionally, Apps built using Designer APIs must adhere to the following additional guidelines:

1. **Consistency:**
   1. Align the visual style, typography, and color palette of your App with our [App design guidelines](/apps/designer/docs/design-guidelines) to create a seamless integration.
   2. Maintain consistency with established Designer patterns and affordances. For example:
      * Use component icons only to represent components
      * Follow existing interaction patterns that users are familiar with
      * Avoid creating new UI patterns that could confuse users or conflict with Designer functionality
2. **Usability**
   1. Design your App with a user-centric approach, considering intuitive navigation, clear labeling, and logical flow.
   2. Ensure that your App's interface is visually appealing, consistent, and accessible to a wide range of users.
   3. Minimize user input requirements and strive for simplicity in App interactions.
   4. Avoid implementing intrusive or disruptive features that may negatively impact the usability or overall user experience.
   5. Do not use keyboard shortcuts to invoke your app or any functionality within it.

### Business / Branding

1. **Monetization:**
   1. Provide clear and transparent information regarding any fees, subscriptions, or in-App purchases associated with your Webflow App.
   2. Avoid deceptive or misleading practices related to monetization, such as hidden charges or misleading pricing information.
2. **Advertising:**
   1. Do not display ads to users to help maintain a focused and distraction-free experience.
3. **Branding:**
   1. Avoid unauthorized use of trademarks, logos, or copyrighted materials belonging to others.
   2. Clearly indicate any affiliations, partnerships, or endorsements in a truthful and transparent manner.
   3. Impersonating a company as an App author will result in rejection. Please provide accurate, reliable contact information for user inquiries, support issues, or feedback.
4. **One Developer Account Policy**
   1. Developers listing apps in the Webflow App Marketplace are limited to using only one developer account for active marketplace listings. Submitting and/or listing apps using multiple developer accounts is strictly prohibited.
   2. Any developer found violating the one-account-per-developer policy, including attempts to circumvent app listing restrictions or marketplace rules, may face immediate enforcement actions. We encourage all developers to uphold integrity and transparency within our developer community.

## Submitting your App

### **Submission Prep**

To expedite your App’s review, please make sure you have completed the following:

1. **Test. Test. Test!** Thoroughly test your App to identify and resolve any crashes or bugs.
2. **Grant Webflow Access to your App:** If your Webflow App includes account-based features or requires specific resources, you’ll need to provide us with full access. This can be achieved by offering an active demo account, fully-featured demo mode, or granting access to any necessary resources (e.g., login credentials, sample QR code) required for reviewing your App thoroughly.
3. **Enable live backend services:** Ensure that any backend services or APIs utilized by your App are enabled and accessible during the review process. This will allow our reviewers to evaluate the functionality and integration of your marketplace App effectively.
4. **Offer detailed explanations of non-obvious features and in-App purchases:** Include detailed explanations of any non-obvious features or in-app purchases within the review notes & demo video you submit alongside your submission. Clearly articulate the purpose, functionality, and value of these elements to provide a comprehensive understanding for the reviewers. Additionally, include any supporting documentation if necessary.

By following these steps and providing the necessary information and access, you can ensure a smoother review process for your Webflow  App.

### **How to submit**

All prospective Apps must be submitted through our Webflow[ App submission form](https://developers.webflow.com/submit). To expedite the approval process, please provide all requested details about your App.

Before submitting, you'll need to prepare the following items:

1. **App Avatar Image:** Fits neatly into a 512x512 square; 1:1 aspect ratio. Browse the Marketplace for examples.
2. **App Detailed Description:** Avoid vagueness. Clearly explain your app's function and its benefits to users.
3. **App Screenshots:** Provide 3-5 images (1280x846) that highlight the App features with clear visuals.
4. **Demo Video:** If your App uses a Data Client, include a demo video demonstrating a working OAuth flow for users approving and denying the request. This video should also describe in detail your deep integration with Webflow. You may provide a private link to Loom, YouTube, or Google Drive.
5. **Upload your Source Code (If Applicable):** Apps that utilize the Designer Extension capability must upload client-side source code through the App version manager within the Webflow Designer. The review process for these Apps will commence once both components – form submission and App source code – are received.

### **After submitting**

Our goal is to provide a prompt decision, ideally within 10-15 business days. You will be notified of our decision via the email associated with your Webflow account.

If your App submission is rejected, we will send you an email with a brief explanation. You will have the opportunity to address any feedback and resubmit your App for review.

Important: Any attempts to exploit the Marketplace App APIs or review process, such as providing false information, engaging in plagiarism, deceitful manipulation of user files, or data theft, will result in immediate removal. Additionally, you will be banned from publishing future Apps in our community.

We look forward to reviewing what you’ve developed! For more context, please reference our [Developer Terms of Service](https://webflow.com/legal/developer-terms-of-service).

---

# Submitting Your App to the Webflow Marketplace

> Learn how to submit your app for review and make it publicly available in the Webflow Marketplace.

This guide walks you through the process of submitting your app for review. For details on configuring how your app appears in the Marketplace, see the [app listing guide](/apps/docs/marketplace/listing-your-app).

## Submission process

1. Prepare [technical requirements](#technical-requirements) and [submission assets](#submission-preparation)
2. Submit for review, using the [Webflow App submission form](https://developers.webflow.com/submit)
3. Respond to feedback (if needed)
4. Publicize and share your app upon approval and publication to the Webflow Marketplace

## Technical Requirements

Your app must meet the following technical requirements to be made publicly available in the Webflow Marketplace:

* Two-factor authentication is enabled for an admin account on the workspace
* Your app has been thoroughly tested and is fully functional
* Your app has clear documentation and error handling
* Your app follows Webflow's security best practices and privacy guidelines

## Submission preparation

Before submitting your app for review, ensure you have completed these essential preparation steps:

<Steps>
  <Step title="Test your app and onboarding flow">
    Ensure your app is fully functional and meets all technical requirements. If you're submitting a Data Client or Hybrid App, ensure that your onboarding flow is working as expected and [provide an installation URL](#installation-configuration) that allows users to connect your service with Webflow.

    If you're looking to test your app with users outside of the workspace where it's registered, you can [submit your app to be reviewed as a private app](/apps/docs/private-apps). [See the installation configuration guidance for more details.](#installation-configuration)
  </Step>

  <Step title="Upload your Designer Extension bundle">
    For Designer Extensions, developers must upload the `bundle.zip` file created using the Webflow CLI. Please review the guidance on [publishing a Designer Extension bundle](/apps/docs/publishing-your-app) for more details.
  </Step>

  <Step title="Grant Webflow access to your app">
    To enable a thorough review of your app, you must provide Webflow with complete access to test all features. This includes any of the following (if applicable):

    * An active demo account with full functionality
    * Access to any gated or premium features
    * Required test credentials (for example, API keys, login details)
    * Sample data or resources needed to evaluate core functionality
    * Any additional materials needed to test edge cases or special features

    The goal is to ensure reviewers can fully evaluate your app's functionality, security, and user experience.
  </Step>

  <Step title="Enable backend services">
    Your app's backend services and APIs must be fully operational and accessible throughout the review process. This includes any third-party integrations, databases, or microservices that power your app's core functionality. Having these services available ensures our reviewers can properly assess how your app integrates with and enhances the Webflow ecosystem.
  </Step>

  <Step title="Create a demo video">
    Create a comprehensive demo video (2-5 minutes) that demonstrates your app's key features and functionality, and shows a complete walkthrough of the user experience from installation to usage.
    You can provide the video via:

    * Loom (private link)
    * YouTube (unlisted or private)
    * Google Drive (shared link)
  </Step>

  <Step title="Document complex features and pricing">
    Document any complex features, pricing tiers, and in-app purchases thoroughly in your review notes and demo video. Explain how each feature works, demonstrate user interactions with premium features, and outline your pricing structure. Include relevant visuals and external documentation links to give reviewers a complete understanding of your app's functionality.
  </Step>

  <Step title="Create marketplace and submission assets">
    To ensure your app is listed correctly in the Marketplace, include all the required information and assets detailed in the [App listing guide](/apps/docs/marketplace/listing-your-app).
  </Step>
</Steps>

## Submit your app

Once you've prepared your submission assets, you can submit your app for review using our [App submission form](https://developers.webflow.com/submit). A complete submission with all required details will help expedite the review process.

<a href="https://developers.webflow.com/submit">
  <Button class="cc-primary">
    Submit your app
  </Button>
</a>

## Installation configuration

Your app's installation URL defines where users are directed after choosing to install your app from the Marketplace. This URL should provide a clear path to where your App will authorize with users' Webflow Sites. Since Webflow OAuth can be initiated on install or within your platform, there are a few options to set as the Install URL based on your app's intended user experience.

### Choosing your installation URL

<Tabs>
  <Tab title="Data Client">
    1. **Direct to Webflow OAuth** (Recommended)<br />
       Immediately initiates the Webflow OAuth flow when users install your app
       * Example URL: <br />
         `https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=YOUR_SCOPES`
       * After authorization, redirect users to your platform where your service can:
         1. Call the [Get User Info](/data/reference/token/authorized-by) endpoint to get user details
         2. Create an account or match to existing user in your system

    2. **Direct to your platform first**<br />
       Directs users to your platform to complete setup before initiating OAuth
       * Example URL: `https://your-app.com/signup`
       * After users authenticate with your service, provide a clear way to initiate the Webflow OAuth flow.

    <Note title="Scopes on the Install URL">
      Verify that the scopes requested in the Install URL are equal to or a subset of the scopes configured for your app in the app settings. If there's a mismatch where the Install URL requests scopes beyond what's configured in the app settings, users won't be able to install your app and an error will be displayed.
    </Note>
  </Tab>

  <Tab title="Hybrid App">
    1. **Direct to Webflow OAuth** (Recommended)<br />
       Immediately initiates the Webflow OAuth flow when users install your app
       * Example URL: <br />
         `https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=YOUR_SCOPES`
       * After authorization, users are redirected to the designer with your [app installed and opened on the canvas](/apps/deep-linking):
         1. Call the [Get ID Token](/designer/reference/get-user-id-token) method to create an ID Token
         2. Call the [Resolve Token](/data/v2.0.0-beta/reference/token/resolve) endpoint on the Data API to get user details
         3. Create an account or match to existing user in your system
            For more information, see [Authenticating Hybrid Apps](/apps/docs/authenticating-users-with-id-tokens) guide.

    2. **Direct to your platform first**<br />
       Directs users to your platform to complete setup before initiating OAuth
       * Example URL: `https://your-app.com/signup`
       * After users authenticate with your service, provide a clear way to initiate the Webflow OAuth flow.

    <Note title="Scopes on the Install URL">
      Verify that the scopes requested in the Webflow OAuth URL are equal to or a subset of the scopes configured for your app in the app settings. If there is a mismatch where the Install URL requests scopes beyond what's configured in the app settings, users won't be able to install your app and an error will be displayed.
    </Note>
  </Tab>

  <Tab title="Designer Extension">
    * No installation URL needed - Webflow handles the installation flow automatically
    * Users will be directed to authorize the app to their site(s)/workspace
  </Tab>
</Tabs>

#### Best practices for onboarding your users

* Test the full installation flow from start to finish
* For Hybrid Apps, consider [directing users to the designer using your app's deep link.](/apps/deep-linking)
* Minimize the number of steps users need to take
* Provide clear guidance at each step
* Handle error cases gracefully with helpful messages

## Post submission

Our goal is to provide a prompt decision, ideally within 10-15 business days. You will be notified of our decision via the email associated with your Webflow account.

If your App submission is rejected, we will send you an email with a brief explanation. You will have the opportunity to address any feedback and resubmit your App for review.

<Warning>
  Any attempts to exploit the Webflow APIs or Marketplace review process, such as providing false information, engaging in plagiarism, deceitful manipulation of user files, or data theft, will result in immediate removal. Additionally, you will be banned from publishing future apps in our community.
</Warning>

We look forward to reviewing what you’ve developed!

For more context, please reference our [Developer Terms of Service](https://webflow.com/legal/developer-terms-of-service).

### Updating your app on the Marketplace

To update the information on your app listing, you can submit a request to the Webflow team. App updates follow the same review process as the initial submission. Simply submit your updated details using the [Webflow App submission form](https://developers.webflow.com/submit) and select "App Update" as the "Submission Type."

For App Updates, only the App Name and Client ID fields are required; all other fields are optional. We recommend completing only the fields you wish to modify, leaving the rest unchanged to streamline the process.

Once your update is approved and published, you will be notified via email.

<Info title="Updating a Designer Extension?">
  Don’t forget to publish a new version of your Designer Extension from your workspace. For guidance, refer to our documentation on [publishing a Designer Extension bundle](/apps/docs/publishing-your-app).
</Info>

---

# Listing your App

> Learn how to create an effective listing that showcases your app's value to potential users.

## Where users find your app

Your app appears in two key locations:

1. **Webflow Marketplace** - The primary discovery hub where users browse and explore apps
2. **Apps pane in the Webflow Designer** - Where users can search and install apps while building

<Tabs>
  <Tab title="Marketplace">
    Marketplace listing

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/13e955b90cc97ad83736bc3ee55c26ceafec4c833349960c20cd518dea129d58/products/assets/images/app-listing-marketplace.png" />
    </Frame>

    ### App detail page

    When users click on your app in the Marketplace, they will see the app detail page. Here, you can additional information, including a long description, screenshots, and other information.

    <Frame>
      <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/42b20390510a3b8ded5422f8dc21523a7b88a7ea7c4f86770e0c6cb383520a9c/products/assets/images/b312409-App_Profile_Anatomy.png" />
    </Frame>
  </Tab>

  <Tab title="Designer">
    <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/d7941bcf6ec4fd84fe9170f95a955f91dafee62b2b8c9c163aa812704fd1a68f/products/assets/images/app-detail-designer.png" />
  </Tab>
</Tabs>

## Required assets

### Essential information

| Asset                | Requirements          | Tips                                   |
| -------------------- | --------------------- | -------------------------------------- |
| App name             | Max 30 characters     | Keep it clear and memorable            |
| Publisher name\*     | Max 20 characters     | Keep it clear and memorable            |
| Short description    | Max 100 characters    | Focus on core value proposition        |
| Long description     | Max 10,000 characters | Supports Markdown but not links        |
| Feature list         | Max 5 features        | Highlight key capabilities             |
| Website URL          | Must be a valid URL   | Highlight your app's website           |
| Privacy policy URL   | Must be a valid URL   | Link to your app's privacy policy      |
| Terms of service URL | Must be a valid URL   | Link to your app's terms of service    |
| Support email        | Must be a valid email | Provide a way for users to get support |

### Visual assets

| Asset          | Requirements         | Tips                                                                     |
| -------------- | -------------------- | ------------------------------------------------------------------------ |
| App logo       | 900x900px, 1:1 ratio | Accepted: Logomarks (pictoral marks)<br />Not accepted: Logotypes (text) |
| Promo video    | 1-2 min              | **Optional** Video should be hosted on YouTube                           |
| Publisher logo | 20x20px              | Must be recognizable at small size                                       |
| Screenshots    | 1280x846px           | Min. 4 recommended, show key workflows                                   |

<Note title="Publisher branding">
  Your publisher logo and name are inherited from your publishing Workspace. To change them, you'll need to update your workspace name and logo in your workspace settings.
</Note>

### Categories

Select up to 5 categories that best describe your app's functionality:

<Accordion title="View Available Categories">
  | Category                                                                  | Description                                                                                                           |
  | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
  | [AI](https://webflow.com/apps/ai)                                         | Tools that leverage artificial intelligence and machine learning for content generation, data analysis, and more      |
  | [Analytics](https://webflow.com/apps/analytics)                           | Applications that track, analyze, and report website metrics, user behavior, and performance data                     |
  | [Asset Management](https://webflow.com/apps/asset-management)             | Tools for organizing, storing, and managing digital assets like images, videos, documents, and other media files      |
  | [Automation](https://webflow.com/apps/automation)                         | Solutions that automate tasks, workflows, and processes to improve efficiency                                         |
  | [Compliance](https://webflow.com/apps/compliance)                         | Tools that help maintain legal, security, and regulatory compliance (GDPR, CCPA, accessibility standards, etc.)       |
  | [Content Management](https://webflow.com/apps/content-management)         | Applications for creating, managing, and organizing website content, including CMS integrations and content workflows |
  | [Customer Support](https://webflow.com/apps/customer-support)             | Tools for customer service, help desk functionality, chat support, and customer communication                         |
  | [Data Sync](https://webflow.com/apps/data-sync)                           | Applications that synchronize data between Webflow and other platforms, databases, or services                        |
  | [Design](https://webflow.com/apps/design)                                 | Tools for enhancing design capabilities, including UI components, templates, and design resources                     |
  | [Development and Coding](https://webflow.com/apps/development-and-coding) | Developer tools, custom code solutions, and programming utilities for extending Webflow functionality                 |
  | [Ecommerce](https://webflow.com/apps/ecommerce)                           | Solutions for online stores, including payment processing, inventory management, and shopping cart enhancements       |
  | [Forms and Surveys](https://webflow.com/apps/forms-and-surveys)           | Tools for creating, managing, and processing forms, surveys, and user input                                           |
  | [Icons](https://webflow.com/apps)                                         | Icon libraries, icon management tools, and visual asset collections                                                   |
  | [Localization](https://webflow.com/apps/localization)                     | Tools for translating and managing multi-language content and regional adaptations                                    |
  | [Marketing](https://webflow.com/apps/marketing)                           | Marketing automation, email marketing, social media, and campaign management tools                                    |
  | [Scheduling](https://webflow.com/apps/scheduling)                         | Calendar management, appointment booking, and scheduling automation tools                                             |
  | [SEO](https://webflow.com/apps/seo)                                       | Search engine optimization tools, including metadata management, sitemap generation, and SEO analysis                 |
  | [User Management](https://webflow.com/apps/user-management)               | Tools for managing user accounts, authentication, permissions, and user roles                                         |
  | [Utilities](https://webflow.com/apps/utilities)                           | General purpose tools and utilities that enhance Webflow site functionality                                           |
</Accordion>

<Note>
  When submitting your app, you may select up to **5 categories** that best describe your app's functionality. Choose categories that accurately reflect your app's core features to help users find your solution more easily.
</Note>

## Best practices for your listing

### Writing effective descriptions

#### Short description

* **Focus on immediate value**:<br /> Clearly state how your app solves a specific problem or delivers value within the first few words
* **Use action-oriented language**:<br /> Begin with strong verbs that emphasize what users can accomplish with your app
* **Include the primary use case**:<br /> Highlight the main scenario where your app provides the most value to users

#### Long description

* **Start with a clear overview**:<br /> Begin with 2-3 sentences that summarize your app's purpose and main benefits
* **List key features and benefits**:<br /> Detail your app's capabilities and how they translate to user advantages
* **Include setup requirements**:<br /> Specify any prerequisites, dependencies, or technical requirements
* **Add usage examples**:<br /> Provide real-world scenarios showing how users can implement your app
* **Link to documentation**:<br /> Reference comprehensive guides, API docs, and support resources

### Visual presentation

* **Showcase primary workflows**:<br /> Include screenshots that demonstrate your app's core features and workflows
* **Highlight unique features**:<br /> Focus on showcasing your app's most distinctive capabilities
* **Ensure text is readable**:<br /> Make sure text is legible and readable in all screenshots
* **Use consistent styling**:<br /> Maintain a cohesive look across all screenshots

## Updating your listing

To update your app listing:

1. Go to the [app submission form](https://developers.webflow.com/submit)
2. Select "App Update" as Submission Type
3. Include your App Name or Client ID
4. Provide only the information you want to update

<Note>
  Keep your listing current! Regular updates show active maintenance and can improve user trust.
</Note>

---

# Private Apps

> Learn how to publish and manage private apps in the Webflow Marketplace.

Private apps in the Webflow Marketplace enable you to publish and share your app while maintaining control over its distribution. This guide explains how private apps work and how to manage them.

## What are private apps?

Private apps are fully functional Webflow apps that are not publicly listed in the Marketplace. The key difference between private and public apps is discover
ability - private apps maintain all core features and capabilities while offering controlled distribution through direct install URL sharing.

## When should you use a private app?

Private apps are a great option for:

* **Internal apps used by a single organization**<br />
  Apps built for use within a single company or organization. These apps can help streamline internal workflows, integrate with company systems, or provide specialized functionality for employees.
* **Custom apps developed for a specific client or set of clients**<br />
  Custom solutions developed for one or more specific clients. These apps are tailored to meet particular client needs and aren't intended for broader distribution.
* **Apps that are not ready for public distribution**<br />
  Apps that are still in development or testing phases and aren't yet ready for public release can be submitted as a private app. This allows you to test with a limited audience before considering wider distribution.

### Key characteristics

* Not visible on the public Marketplace. Private apps do not have a Marketplace listing page.
* Installable in both app developer's workspace and external user workspaces
* Access controlled via direct Install URL sharing
* Maintains full API capabilities and integrations
* Can be monetized (subject to standard Marketplace terms)

## Publishing a private app

### Submission process

1. Submit your app through the standard Marketplace submission form
2. Select the **"Private"** option in the "Marketplace Visibility" section of the submission form
3. Complete all required app information and documentation
4. Submit for review

<Note>
  Private apps undergo the same rigorous review process as public apps to ensure quality and security standards are met.
</Note>

### Managing access

Once your private app is approved:

1. You'll receive a unique Install URL for your app
2. Share this URL directly with intended users
3. Only users with the Install URL can access and install your app

## Best practices

* Maintain clear documentation for your private app users
* Keep track of who you've shared your Install URL with
* Regularly communicate updates and changes to your users

---

# Marketing your App

As you prepare marketing materials for your Marketplace App, follow these helpful tips to create a clear and consistent experience for users.

## Talking about apps

As with most technical products, there is often a stark difference between how developers talk about a product compared to how it's marketed and positioned to customers. Webflow Apps are no exception.

Most notably, while as a developer you are familiar with the inner workings of an App, customers see an App as a tool that helps them build their site. It's recommended to use the following language when referring to your App in your marketing and educational materials:

| Term                | Description                                                                                                                                                                                                                                                                                                                           |
| :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Webflow App         | A Webflow App is any product or service distributed via the Webflow Marketplace built using Webflow’s REST APIs via a Data Client, Designer APIs via a Designer Extension–or a combination of the two.                                                                                                                                |
| Webflow Marketplace | The Webflow Marketplace is where Webflow customers can find Apps, Libraries, Templates, Made in Webflow sites, and Certified Partners to assist them in building their site, business, or brand.                                                                                                                                      |
| Apps Panel          | A panel in the Webflow Designer, indicated by the Apps icon. When opened, customers can view and launch apps while editing their Webflow site.  <img width="18" src="https://dhygzobemt712.cloudfront.net/Icons/Light/24px/Apps.png" alt="Apps icon" />                                                                               |
| Launching an App    | Once an App is installed on a Webflow site, a user can launch the App from the Apps Panel in the Designer. If you built an app using a Designer Extension, launching the App will open the App window in the Designer. If the App is built using only a Data Client, launching the App will take the user to the developer’s website. |
| App window          | If you built an app using a Designer Extension, you can refer to the Designer Extension window as the App window, or simply the App. **Please do not refer to this panel as the Designer Extension, or Extension window in your user-facing materials.**                                                                              |
| Webflow site        | The main interface of Webflow’s product where customers can design, build and edit their sites.                                                                                                                                                                                                                                       |

If your App interacts with specific capabilities in the Webflow product, use the [Webflow glossary](https://webflow.com/glossary) to make sure you are speaking about those features in a way that will resonate with the Webflow community.

## Brand and identity

### Using Webflow’s brand in app names and logos

Permission from Webflow, Inc. is required to use the Webflow name or logo as part of any:

* Project
* Product
* Service
* Domain name
* Company name

Permission may be granted for projects that:

* Advance Webflow's platform and ecosystem
* Are non-commercial in nature

<Warning title="Domain names">
  Domain names containing "Webflow" are restricted to officially recognized Webflow communities only.
</Warning>

### Using Webflow’s brand in marketing materials

You can use the Webflow name and logo to describe your services, but not as part of your product, project, service, domain name, or company name. Don't suggest any affiliation with or endorsement by Webflow.

**Acceptable use:**

* "123 Web Services, offering Webflow consulting"
* "XYZ Templates, featuring Webflow templates"
* Using the Webflow logo on pages describing your services

**Not acceptable:**

* "The Webflow Consulting Company"
* "The Webflow Template Portal"
* Using the Webflow logo in your company/product branding

<Warning title="Advertising">
  Webflow does not allow the use of the trademark in advertising, including AdSense/AdWords.
</Warning>

We do not want to limit commercial activity around Webflow. We encourage the growth of Webflow-based businesses, and thousands of them are thriving while complying with this policy, including our [Certified Webflow Partners](https://webflow.com/certified-partners). You can review [Webflow’s full trademark usage policy here](https://webflow.com/legal/trademark-policy).

### Using third-party brand identities in the Marketplace

Apps that integrate with third-party products (e.g. Google Analytics) require permission to use that product's branding in your Marketplace listing name and logo.

You may list integrated products in your App description and features without permission. If you do not have the permission of the other product to use their trademarks and identity, your App listing will be denied during the review process.

## Promoting your Webflow App

Once your app is listed in the Marketplace, driving adoption and engagement is crucial for success. Here are some proven strategies to help grow your app's user base:

### Build awareness and trust

* Create detailed documentation and getting started guides
* Showcase real customer success stories and use cases
* Maintain an active presence in the [Webflow Forum](https://forum.webflow.com/)
* Consider offering a free trial or freemium tier to let users experience value firsthand

### Drive ongoing engagement

* Send targeted onboarding emails to help users get maximum value
* Create video tutorials demonstrating key features and workflows
* Host regular office hours or live demos for users

For more detailed marketing strategies and tips from successful Webflow app creators, check out [How to be successful on the Webflow App Marketplace](https://webflow.com/blog/app-launch-strategy) on the Webflow Blog

### **App promotion by Webflow**

The Webflow Marketing Team will actively market Apps to customers in a number of ways. This includes, but may not be limited to:

* Posts on the Webflow blog
* Across Webflow’s social channels including Twitter, LinkedIn, Instagram, Facebook and TikTok\
  Through email and lifecycle marketing to new and existing Webflow customers
* Digital ads
* Sales enablement training and content

While the promotion of individual Apps is at the discretion of the Webflow Team, we are always open to co-marketing ideas. If you have any thoughts to share, [please fill out this form](https://airtable.com/shr5eZvRuDx321HgV).

### Tracking traffic sources and attribution

We encourage Apps to use UTM parameters when directing traffic to app listings or to Webflow

This helps Webflow attribute traffic, installs, and user growth directly to your app, allowing us to better understand and support your success in the marketplace. See guidance on creating UTM parameters for source, medium, and campaign information below:

* **app-name** is the name of your app
* **medium** should be a clear description of the channel used, for example ‘website’ or ‘newsletter’ or ‘linkedin’
* **campaign** can be simply your app-name with -launch appended

| Destination       | Source       | Medium  | Campaign        | Full format                                                                                                        |
| ----------------- | ------------ | ------- | --------------- | ------------------------------------------------------------------------------------------------------------------ |
| Your App listing  | tech-partner | website | app-name-launch | `https://webflow.com/Apps/detail/App-name?utm_source=tech-partner&utm_medium=website&utm_campaign=app-name-launch` |
| Webflow home page | tech-partner | website | app-name-launch | `https://webflow.com/?utm_source=tech-partner&utm_medium=website&utm_campaign=app-name-launch`                     |

---

# App Metrics

> Understand your app's performance in the Webflow Marketplace.

Keep track of your app's performance in the [Webflow Marketplace](https://webflow.com/apps) to drive growth and improve user experiences. Webflow provides key metrics that offer visibility into user interactions and engagement with published Marketplace apps.

<Frame background="subtle">
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/10f94b93d90e56a812bd4e23dfeee6a6dc83adf3251b6e0023bfb0df6511a34b/products/data/pages/MARKETPLACE/assets/app-metrics.png" alt="App Metrics" />
</Frame>

## Available metrics

Webflow's app metrics give you a real-time picture of how users are discovering, installing, and using your app, allowing you to optimize your success in the marketplace.

* **Views**: The number of views for your app's listing.
* **Likes**: The number of likes for your app.
* **Installs**: The number of installs for your app.
* **Uninstalls**: The number of uninstalls for your app.

Your metrics will display the total number of views, likes, installs, and uninstalls for your app. Additionally, the included charts will display activity for the last 30 days.

<Frame background="subtle">
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/7bce8a72f20a710274cba9fe4951638e7647251c2b12c6d90df6b0832e9c21a7/products/data/pages/MARKETPLACE/assets/chart.jpg" alt="App Metrics" />
</Frame>

## Accessing your app metrics

Access your app metrics in your Workspace settings. In the left sidebar, select **"Apps & Integrations -> Develop"** then click the "View Analytics" button on the app you'd like to view.

## Using Webflow's app metrics

We hope these metrics can help provide actionable insights into how your app is performing in the Webflow Marketplace. By analyzing these metrics, you can:

1. **Gauge interest**<br />
   **Views** and **installs** give you a sense of how much interest your app is generating in the marketplace.
2. **Monitor retention**<br />
   Keeping an eye on **installs** and **uninstalls** allows you to measure retention and identify any potential drop-off points where users might be losing interest.
3. **Measure satisfaction**<br />
   **Likes** reflect how satisfied users are with your app after they've started using it. High numbers of likes suggest that users find your app valuable and are enjoying their experience.

---

# Webflow MCP server

> Webflow's MCP server and AI tools for building with Webflow APIs

<Frame>
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/307e7d3ea1afcd433f7d946be876f1e4f1bd55a6ad1b8d320b66d69b2bd611ab/products/assets/images/mcp_hero.png" alt="MCP Hero Image" />
</Frame>

The Model Context Protocol (MCP) server connects your AI tools directly to your Webflow projects. Prompt an AI agent to update designs, manage site data, and work with the CMS from your preferred AI environment.

For developers using AI-powered tools like [Claude Code](https://github.com/anthropics/claude-code), [Claude Desktop](https://claude.ai/download), [Cursor](https://www.cursor.com/), or [Windsurf](https://codeium.com/windsurf), the MCP server enhances an agent's understanding of your Webflow projects. It's built on Webflow's APIs, exposing them as tools your AI agent can use to create elements, styles, and variables on the canvas, as well as manage collections, custom code, assets, and other site data.

<Callout intent="success">
  **Why use the MCP server?**

  Skip writing API calls and managing authentication. Just describe what you want in natural language, and your AI agent handles the implementation using Webflow's Data and Designer APIs.
</Callout>

## What you can do

<Tabs>
  <Tab title="Build and design">
    Use Designer API tools to create and modify visual elements on the canvas:

    * **Create layouts**: Build responsive sections, containers, and grids with proper breakpoint configurations
    * **Style elements**: Apply classes, modify CSS properties, and manage design variables
    * **Build components**: Create reusable component definitions
    * **Design systems**: Set up color schemes, typography scales, and spacing systems
  </Tab>

  <Tab title="Manage content">
    Use Data API tools to work with your site's content and assets:

    * **CMS operations**: Create collections, define fields, and manage items with bulk updates
    * **Asset management**: Organize folders and optimize file sizes
    * **SEO optimization**: Update meta titles, descriptions, and Open Graph tags across pages
    * **Content auditing**: Scan for broken links, missing alt text, and outdated information

    <Accordion title="Example: Standardize collection fields">
      ```
      Ensure all items in my collection have featured images, complete descriptions,
      and SEO metadata. Add placeholder content where fields are empty.
      ```

      Your AI agent will:

      1. Fetch the collection schema and all items
      2. Identify items with missing featured images, descriptions, or meta tags
      3. Generate appropriate placeholder content based on existing item data
      4. Update items with the new content
      5. Generate a report showing what was added or updated
    </Accordion>
  </Tab>

  <Tab title="Automate workflows">
    Combine multiple tools to create sophisticated automation workflows:

    * **Content analysis**: Review blog posts, identify trends, and suggest new topics with SEO keywords
    * **Style refactoring**: Migrate legacy styles to design variables and modern breakpoint configurations
    * **Quality assurance**: Run automated checks for accessibility, performance, and SEO best practices
    * **Cross-site management**: Apply consistent changes across multiple Webflow projects

    <Accordion title="Example: Site-wide quality audit">
      ```
      Audit my site for broken links, missing alt text, and incomplete meta descriptions,
      then fix what you can automatically
      ```

      Your AI agent will:

      1. Scan all pages and CMS items for common issues
      2. Check internal and external links for broken references
      3. Identify images without alt text
      4. Find pages missing SEO metadata
      5. Automatically fix issues where possible
      6. Generate a detailed report with recommendations
    </Accordion>
  </Tab>
</Tabs>

## Try the beta improvements

We're testing significant improvements to the MCP server with better performance and developer experience. Sign up to get early access to the beta version.

<Callout intent="info">
  **What's new in beta:**

  * **Consolidated tools**: Simplified tool structure with fewer, more powerful tools
  * **Batch operations**: Update multiple items, pages, or elements in a single call
  * **Better performance**: Faster response times and optimized data transfer
  * **Faster calls**: Reduced latency for all API operations

  Plus: Priority support and direct feedback channel to the team
</Callout>

<WebflowForm />

## Get started

<Cards>
  <Card
    title="Install the MCP server"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/CircleArrowDown.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/CircleArrowDown.svg" alt="" className="light-icon" />
    </>
  }
    iconSize={12}
    iconPosition="left"
    href="/mcp/reference/getting-started"
  >
    Set up the Webflow MCP server in Claude Desktop, Cursor, or Windsurf with OAuth authentication.
  </Card>

  <Card
    title="Explore the prompt library"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Ai.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Ai.svg" alt="" className="light-icon" />
    </>
  }
    iconSize={12}
    iconPosition="left"
    href="/mcp/examples"
  >
    Browse ready-to-use prompts for image optimization, SEO audits, style refactoring, and more.
  </Card>

  <Card
    title="Review available tools"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/ToolNut.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/ToolNut.svg" alt="" className="light-icon" />
    </>
  }
    iconSize={12}
    iconPosition="left"
    href="/mcp/reference/how-it-works#available-tools"
  >
    See the complete list of Data API and Designer API tools you can use with your AI agent.
  </Card>

  <Card
    title="Learn how it works"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Resources.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Resources.svg" alt="" className="light-icon" />
    </>
  }
    iconSize={12}
    iconPosition="left"
    href="/mcp/reference/how-it-works"
  >
    Understand the architecture, authentication, and how the MCP server connects to Webflow's APIs.
  </Card>
</Cards>

---

# Getting started

> Install and configure Webflow's MCP server and AI tools

The Webflow MCP server connects your AI agent directly to your Webflow projects. In this guide, you'll install the remote MCP server, authorize your sites, and start building with natural language prompts.

## Setup overview

The installation process takes about 5 minutes and includes:

1. **Configure your AI tool** - Add the MCP server to Claude Desktop, Cursor, or Windsurf
2. **Authorize sites** - Connect the MCP server to your Webflow account via OAuth
3. **Launch companion app** - Open the bridge app in the Webflow Designer for real-time syncing
4. **Start prompting** - Use natural language to interact with your sites

<Callout intent="info">
  **What you'll need**

  * **AI client**: We provide instructions for [Claude Code](https://github.com/anthropics/claude-code), [Claude Desktop](https://claude.ai/download), [Cursor](https://www.cursor.com/), or [Windsurf](https://codeium.com/windsurf)
  * **Node.js**: Version 22.3.0 or higher ([download here](https://nodejs.org/))
  * **Webflow account**: With at least one site you can access

  **Estimated time**: 5 minutes
</Callout>

<Note title="Companion app installation">
  The MCP companion app installs automatically during OAuth authorization. It's not available on the public Webflow app marketplace.
</Note>

For local installation options, see the [NPM package documentation](https://www.npmjs.com/package/webflow-mcp-server).

## Installation

Select your AI tool below to begin:

<Tabs>
  <Tab title="Claude Desktop">
    <Steps>
      <Step title="Enable developer mode">
        In the menu bar, click `Help` -> `Troubleshooting` -> `Enable Developer Mode`
      </Step>

      <Step title="Open the developer tools">
        In the menu bar, click `File` -> `Settings`. Then in the Claude Desktop window, select `Developer`

        From here click `Get Started` or `Edit Config` to open the configuration file in your code editor.

        <Frame>
          <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/6465927461dd16e59c52632eb2c92b38ad1c961498351a9d80f2268217e64efb/products/assets/images/claude-developer.png" alt="Claude Desktop MCP" />
        </Frame>
      </Step>

      <Step title="Add the MCP server to the configuration">
        Open the `claude_desktop_config.json` file in a code editor and paste the following configuration (or add the `webflow` part to your existing configuration):

        <CodeBlock title="claude_desktop_config.json">
          ```json
          {
            "mcpServers": {
              "webflow": {
                "command": "npx",
                "args": ["mcp-remote", "https://mcp.webflow.com/mcp"]
              }
            }
          }
          ```
        </CodeBlock>
      </Step>

      <Step title="Save and restart Claude Desktop">
        Save the file and restart Claude Desktop `(command/ctrl + R)`.
      </Step>

      <Step title="Authorize the MCP server and app">
        When Claude restarts, it will automatically open a new browser window showing an OAuth login page where you can authorize the Webflow sites you want the MCP server to access and install the [companion app](/mcp/reference/how-it-works#designer-companion-app).

        <Tip title="Limit authorized sites">
          Limit the number of sites for security and performance. To refresh your OAuth token, run:

          ```bash
          rm -rf ~/.mcp-auth
          ```
        </Tip>
      </Step>

      <Step title="Open the Webflow Designer">
        Open your site in the Webflow Designer.

        Or, type this prompt in your AI chat window:

        ```
        Give me a link to open <MY_SITE_NAME> in the Webflow Designer
        ```
      </Step>

      <Step title="Open the MCP Webflow App">
        1. In the designer, open the Apps panel by pressing the `E` key.
        2. Launch the "Webflow MCP Bridge App". This app was automatically installed during the OAuth authorization process.
        3. Wait for the companion app to connect to the MCP Server

        <Frame>
          <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/02ae17428a9bc1c3d5ed26bc14b44a66d935ef85970e30b85f6c2b0d64c15ddb/products/mcp/pages/assets/bridge-app.png" alt="Webflow MCP Bridge App" />
        </Frame>
      </Step>

      <Step title="Write your first prompt">
        Start interacting with the MCP server in your AI agent's chat window. Try prompts like:

        ```
        List all my collections and show me their field structures
        ```

        ```
        Audit my site for broken links, missing alt text, and incomplete meta descriptions
        ```

        ```
        Create a responsive hero section with a headline, description, and CTA button
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Claude Code">
    <Steps>
      <Step title="Install Claude Code CLI">
        If you haven't installed Claude Code yet, follow the [installation guide](https://github.com/anthropics/claude-code#installation).

        Verify installation:

        ```bash
        claude --version
        ```
      </Step>

      <Step title="Add the Webflow MCP server">
        Use the CLI to add the Webflow MCP server:

        ```bash
        claude mcp add --transport http webflow https://mcp.webflow.com/mcp
        ```

        This will add the Webflow MCP server to your Claude Code configuration.
      </Step>

      <Step title="Authorize the MCP server and app">
        Start Claude Code:

        ```bash
        claude
        ```

        Once Claude Code is running, use the `/mcp` command to manage MCP servers:

        ```bash
        /mcp list
        ```

        Select the Webflow MCP server from the list. If you haven't authenticated yet, Claude Code will automatically open a browser window showing an OAuth login page where you can authorize the Webflow sites you want the MCP server to access and install the [companion app](/mcp/reference/how-it-works#designer-companion-app).
      </Step>

      <Step title="Open the Webflow Designer">
        Open your site in the Webflow Designer.

        Or, type this prompt in Claude Code:

        ```
        Give me a link to open <MY_SITE_NAME> in the Webflow Designer
        ```
      </Step>

      <Step title="Open the MCP Webflow App">
        1. In the designer, open the Apps panel by pressing the `E` key.
        2. Launch the "Webflow MCP Bridge App". This app was automatically installed during the OAuth authorization process.
        3. Wait for the companion app to connect to the MCP Server

        <Frame>
          <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/02ae17428a9bc1c3d5ed26bc14b44a66d935ef85970e30b85f6c2b0d64c15ddb/products/mcp/pages/assets/bridge-app.png" alt="Webflow MCP Bridge App" />
        </Frame>
      </Step>

      <Step title="Write your first prompt">
        Start interacting with the MCP server in Claude Code. Try prompts like:

        ```
        List all my collections and show me their field structures
        ```

        ```
        Audit my site for broken links, missing alt text, and incomplete meta descriptions
        ```

        ```
        Create a responsive hero section with a headline, description, and CTA button
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Cursor">
    Click the button to install, or follow the instructions below:

    <div>
      <span>
        [![Install MCP Server](https://cursor.com/deeplink/mcp-install-light.svg)](https://cursor.com/en-US/install-mcp?name=webflow\&config=eyJ1cmwiOiJodHRwczovL21jcC53ZWJmbG93LmNvbS9tY3AifQ%3D%3D)
      </span>

      <span>
        [![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en-US/install-mcp?name=webflow\&config=eyJ1cmwiOiJodHRwczovL21jcC53ZWJmbG93LmNvbS9tY3AifQ%3D%3D)
      </span>
    </div>

    <Steps>
      <Step title="Install the MCP server on Cursor">
        1. Go to `Settings → Cursor Settings → MCP & Integrations`
        2. Under MCP Tools, click `+ New MCP Server`/`Add Custom MCP`
        3. Paste the following configuration into `.cursor/mcp.json` (or add the `webflow` part to your existing configuration):

           <CodeBlock title=".cursor/mcp.json">
             ```json
             {
               "mcpServers": {
                 "webflow": {
                   "url": "https://mcp.webflow.com/mcp"
                 }
               }
             }
             ```
           </CodeBlock>

           <Tip title="Use project-specific MCP configuration to avoid repeated auth prompts">
             Configure `mcp.json` [per project](https://docs.cursor.com/en/context/mcp#configuration-locations) instead of using Cursor's global settings. This prevents repeated authentication prompts when opening multiple Cursor windows without being authenticated.
           </Tip>
        4. Save and close the file
      </Step>

      <Step title="Authorize the MCP server and app">
        1. Go to `Settings → Cursor Settings → MCP & Integrations`
        2. Authorize Webflow MCP by clicking the Connect button
        3. Cursor automatically opens an OAuth login page where you authorize the Webflow sites you want to access and install the [companion app](/mcp/reference/how-it-works#designer-companion-app).
        4. Once authorization is complete, the Webflow MCP indicator should turn green.

        <Tip title="Limit authorized sites">
          Limit the number of sites for security and performance. To reauthorize, simply click **Logout** by expanding Webflow MCP.
        </Tip>
      </Step>

      <Step title="Open the Webflow Designer">
        Open your site in the Webflow Designer.

        Or, type this prompt in your AI chat window:

        ```
        Give me a link to open <MY_SITE_NAME> in the Webflow Designer
        ```
      </Step>

      <Step title="Open the MCP Webflow App">
        1. In the designer, open the Apps panel by pressing the `E` key.
        2. Launch the "Webflow MCP Bridge App". This app was automatically installed during the OAuth authorization process.
        3. Wait for the companion app to connect to the MCP Server

        <Frame>
          <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/02ae17428a9bc1c3d5ed26bc14b44a66d935ef85970e30b85f6c2b0d64c15ddb/products/mcp/pages/assets/bridge-app.png" alt="Webflow MCP Bridge App" />
        </Frame>
      </Step>

      <Step title="Write your first prompt">
        Start interacting with the MCP server in your AI agent's chat window. Try prompts like:

        ```
        List all my collections and show me their field structures
        ```

        ```
        Audit my site for broken links, missing alt text, and incomplete meta descriptions
        ```

        ```
        Create a responsive hero section with a headline, description, and CTA button
        ```
      </Step>
    </Steps>

    <Tip title="Start with a fresh project for better MCP performance">
      MCP servers perform more efficiently with smaller codebases. In Cursor, create a new project when using the MCP server to reduce tool call overhead and improve response times.
    </Tip>
  </Tab>

  <Tab title="Windsurf">
    <Steps>
      <Step title="Add the MCP server to the configuration">
        1. Navigate to `Windsurf → Settings → Windsurf Settings`
        2. Scroll down to the `Cascade` section → `MCP Servers` → `Manage MCPs`
        3. Click the "View raw config" button
        4. Paste the following configuration (or add the `webflow` part to your existing configuration):

           ```json mcp_config.json
           {
             "mcpServers": {
               "webflow": {
                 "serverUrl": "https://mcp.webflow.com/mcp"
               }
             }
           }
           ```

           ```
           ```
        5. Save and close the file
      </Step>

      <Step title="Authorize the MCP server">
        1. Click the "Refresh" button in the settings page
        2. Windsurf will automatically open a new browser window showing an OAuth login page.
        3. Authorize the Webflow sites you want the MCP server to access. This will also automatically install the [companion app](/mcp/reference/how-it-works#designer-companion-app) to any sites you authorize.

        <Tip title="Limit authorized sites">
          Limit the number of sites for security and performance.
        </Tip>
      </Step>

      <Step title="Open the Webflow Designer">
        Open your site in the Webflow Designer.

        Or, type this prompt in your AI chat window:

        ```
        Give me a link to open <MY_SITE_NAME> in the Webflow Designer
        ```
      </Step>

      <Step title="Open the MCP Webflow App">
        1. In the designer, open the Apps panel by pressing the `E` key.
        2. Launch the "Webflow MCP Bridge App". This app was automatically installed during the OAuth authorization process.
        3. Wait for the companion app to connect to the MCP Server

        <Frame>
          <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/02ae17428a9bc1c3d5ed26bc14b44a66d935ef85970e30b85f6c2b0d64c15ddb/products/mcp/pages/assets/bridge-app.png" alt="Webflow MCP Bridge App" />
        </Frame>
      </Step>

      <Step title="Write your first prompt">
        Start interacting with the MCP server in your AI agent's chat window. Try prompts like:

        ```
        List all my collections and show me their field structures
        ```

        ```
        Audit my site for broken links, missing alt text, and incomplete meta descriptions
        ```

        ```
        Create a responsive hero section with a headline, description, and CTA button
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Next steps

Now that you've installed the MCP server, explore what you can do:

<Cards>
  <Card
    title="Explore the prompt library"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Ai.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Ai.svg" alt="" className="light-icon" />
    </>
  }
    iconSize={12}
    iconPosition="left"
    href="/mcp/examples"
  >
    Browse ready-to-use prompts for image optimization, SEO audits, style refactoring, and more.
  </Card>

  <Card
    title="Review available tools"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/ToolNut.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/ToolNut.svg" alt="" className="light-icon" />
    </>
  }
    iconSize={12}
    iconPosition="left"
    href="/mcp/reference/how-it-works#available-tools"
  >
    See the complete list of Data API and Designer API tools you can use with your AI agent.
  </Card>

  <Card
    title="Learn how it works"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Resources.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Resources.svg" alt="" className="light-icon" />
    </>
  }
    iconSize={12}
    iconPosition="left"
    href="/mcp/reference/how-it-works"
  >
    Understand the architecture, authentication, and how the MCP server connects to Webflow's APIs.
  </Card>
</Cards>

---

# How it works

> Learn how Webflow's MCP server works

The Webflow MCP server implements [Anthropic's Model Context Protocol specification](https://docs.anthropic.com/en/docs/model-context-protocol-mcp) to standardize communication between AI agents and Webflow's APIs. This allows you to interact with your Webflow projects using natural language in any MCP-compatible AI tool.

## Architecture

The MCP server acts as a translation layer between AI agents and Webflow's APIs. When you prompt your AI agent, the server:

1. **Receives the request** from your AI tool (Claude Desktop, Cursor, etc.)
2. **Translates the intent** into specific Webflow API calls
3. **Executes operations** on your sites using OAuth-authenticated access
4. **Returns results** back to your AI agent in a structured format

<Callout intent="info">
  **Open source**

  The MCP server is built as an [open-source package](https://github.com/webflow/mcp-server) that wraps Webflow's REST and Designer APIs into a format any MCP-compatible AI agent can understand and execute.
</Callout>

## Remote deployment

The server runs remotely at `https://mcp.webflow.com/sse` to enable OAuth authentication. This approach provides several benefits:

* **No local credentials**: Authorize multiple Webflow sites without storing API keys on your machine
* **Secure access**: Token-based authentication with automatic refresh
* **Easy updates**: Server improvements deploy automatically without reinstalling

<Warning title="Remote authorization is experimental">
  Remote authorization relies on the [`mcp-remote` npm package](https://www.npmjs.com/package/mcp-remote), which is currently considered experimental by Anthropic.
</Warning>

## Available tools

The MCP server exposes Webflow's APIs as MCP tools that your AI agent can use. Tools are organized into two categories based on their purpose.

<Tabs>
  <Tab title="Data API tools">
    [**Data API**](/data/reference/rest-introduction) tools access your site's content and structure for bulk operations and content management. These tools work immediately after OAuth authorization.

    **What you can do:**

    * Manage CMS collections, fields, and items
    * Work with site pages and components
    * Handle custom code and scripts
    * Access site metadata and configuration

    **Available tools:**

    * [**Sites**](/mcp/reference/data/sites) - List and manage Webflow sites
    * [**Pages**](/mcp/reference/data/pages) - Get page content and metadata
    * [**Components**](/mcp/reference/data/components) - Work with reusable components
    * [**Collections**](/mcp/reference/data/cms/collections) - Manage CMS collections
    * [**Fields**](/mcp/reference/data/cms/fields) - Define and update collection fields
    * [**Items**](/mcp/reference/data/cms/items) - Create, read, update, and delete CMS items
    * [**Custom Code**](/mcp/reference/data/custom-code) - Manage site-wide custom code
  </Tab>

  <Tab title="Designer API tools">
    [**Designer API**](/designer/reference/introduction) tools enable real-time canvas manipulation. These tools require the companion app to be open in the Webflow Designer.

    **What you can do:**

    * Create and modify elements on the canvas
    * Apply styles, classes, and design tokens
    * Manage design variables and themes
    * Work with assets and media

    **Available tools:**

    * [**Elements**](/mcp/reference/designer/elements) - Create and manipulate DOM elements
    * [**Styles**](/mcp/reference/designer/styles) - Apply CSS styles and classes
    * [**Assets**](/mcp/reference/designer/assets) - Manage images and media files
    * [**Variables**](/mcp/reference/designer/variables) - Work with design variables and tokens

    ### Designer companion app

    Designer API calls are executed through a companion app that automatically installs to your authorized sites after OAuth authorization. **The companion app must remain open in the Webflow Designer** for Designer API tools to function. However, you can minimize it once connected.

    <div>
      <Frame>
        <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/02ae17428a9bc1c3d5ed26bc14b44a66d935ef85970e30b85f6c2b0d64c15ddb/products/mcp/pages/assets/bridge-app.png" alt="MCP Bridge App" />
      </Frame>
    </div>
  </Tab>
</Tabs>

<Tip>
  For detailed information about each tool's parameters and capabilities, visit the individual tool reference pages linked above.
</Tip>

---

# Claude skills

> Production-ready agent skills for Claude Code that work with the Webflow MCP server

Claude skills are pre-built agent capabilities that help you accomplish common Webflow tasks through natural language. They work alongside the Webflow MCP server to provide specialized workflows for content management, site optimization, and safe publishing.

<Callout intent="info">
  **Prerequisites**

  Claude skills require both:

  * **Claude Code** - The official CLI tool from Anthropic
  * **Webflow MCP server** - Installed and configured in Claude Code

  If you haven't set up the MCP server yet, see the [getting started guide](/mcp/reference/getting-started).
</Callout>

## What are Claude skills?

Skills are specialized agent workflows that combine multiple MCP tools to accomplish specific tasks. Instead of manually orchestrating tool calls, you describe what you want and the skill handles the implementation details.

For example, rather than:

1. Manually fetching collection schemas
2. Reading each item individually
3. Validating field requirements
4. Updating items one by one

You can use the `bulk-cms-update` skill with a prompt like:

```
Update all blog posts to add a default featured image where missing
```

The skill automatically handles validation, generates a preview of changes, and asks for confirmation before applying updates.

## Available skills

<Tabs>
  <Tab title="Content management">
    ### Bulk CMS update

    Create or update multiple CMS items in a Webflow collection with validation and diff preview. Use when adding multiple blog posts, products, or updating fields across many items.

    **Example prompts:**

    ```
    Add 2 blog posts about Webflow MCP and update the first blog to say "Top" instead of "Best"
    ```

    ```
    Update all product prices by increasing them 10%
    ```

    ### CMS collection setup

    Create a new CMS collection in Webflow with specified fields and relationships. Use when setting up blog posts, products, team members, portfolios, or other content types with custom fields.

    **Example prompts:**

    ```
    Create a team members collection with name, bio, photo, and role fields
    ```

    ```
    Set up a products collection with pricing, categories, and related items
    ```

    ### CMS best practices

    Expert guidance on Webflow CMS architecture and best practices. Use when planning collections, setting up relationships, optimizing content structure, or troubleshooting CMS issues.

    **Example prompts:**

    ```
    I'm building a recipe site. How should I structure the CMS?
    ```

    ```
    My collection list is slow with 500+ items. How do I optimize?
    ```
  </Tab>

  <Tab title="Site health & optimization">
    ### Site audit

    Comprehensive audit of a Webflow site including pages, CMS collections, health scoring, and actionable insights. Use for site analysis, migration planning, or understanding site structure.

    **Example prompts:**

    ```
    Give me a complete inventory of my site
    ```

    ```
    Audit my site and show me the top issues to fix
    ```

    ### Asset audit

    Analyze assets on a Webflow site for SEO optimization. Identifies assets missing alt text and assets with non-SEO-friendly names, then generates and applies improvements.

    **Example prompts:**

    ```
    Run an asset audit on my site
    ```

    ```
    Find all images without alt text and add descriptive alt text
    ```

    ### Link checker

    Find and fix broken or insecure links across an entire site, including CMS content, to improve SEO and user experience. Audits HTTP/HTTPS issues and validates all internal and external links.

    **Example prompts:**

    ```
    Run a complete link check on my site and fix any issues
    ```

    ```
    Check all links in my blog posts
    ```
  </Tab>

  <Tab title="Publishing & code">
    ### Safe publish

    Publish a Webflow site with a plan-confirm-publish workflow. Shows what changed since last publish, runs pre-publish checks, and requires explicit confirmation before going live.

    **Example prompts:**

    ```
    Publish my site
    ```

    ```
    Show me what changed and publish if it looks good
    ```

    ### Custom code management

    Add, review, or remove inline custom scripts on a Webflow site (up to 10,000 chars). Use for analytics, tracking pixels, chat widgets, or any custom JavaScript.

    **Example prompts:**

    ```
    Add Google Analytics tracking to my site
    ```

    ```
    Review all custom code and remove any unused scripts
    ```
  </Tab>
</Tabs>

## Installation

<Steps>
  <Step title="Install via Claude Code marketplace">
    Use the Claude Code plugin system to install from the marketplace:

    ```bash
    # Add the marketplace
    claude plugin marketplace add webflow/webflow-skills

    # Install the plugin
    claude plugin install webflow-skills@webflow-skills
    ```

    After installation, restart Claude Code. Skills will be automatically invoked when relevant to your task.
  </Step>

  <Step title="Or install from local repository">
    Clone and install the repository directly:

    ```bash
    # Clone the repository
    git clone git@github.com:webflow/webflow-skills.git ~/webflow-skills

    # Install the plugin
    claude plugin install ~/webflow-skills
    ```
  </Step>

  <Step title="Verify installation">
    Open Claude Code and try a skill-related prompt:

    ```
    Audit my Webflow site for common issues
    ```

    If the `site-audit` skill is working, Claude Code will automatically invoke it and run a comprehensive health check.
  </Step>
</Steps>

## Updating skills

Keep your skills up to date to get the latest features and improvements:

```bash

---

# Update the marketplace index
claude plugin marketplace update

---

# Update the plugin
claude plugin update webflow-skills@webflow-skills
```

Or use the interactive plugin manager:

```bash
/plugin
```

## How skills work with MCP

Skills are implemented using the [Agent Skills](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview) open format. They work as specialized workflows that:

1. **Detect relevant tasks** - Skills activate automatically when your prompt matches their use case
2. **Orchestrate MCP tools** - Each skill combines multiple Webflow MCP tools in specific sequences
3. **Provide guardrails** - Skills include validation, error handling, and confirmation steps
4. **Return structured results** - You get clear summaries, previews, and actionable recommendations

The skills layer on top of the MCP server without requiring any changes to your MCP configuration. They simply make common workflows easier by packaging best practices into reusable patterns.

## Resources

<Cards>
  <Card
    title="View on GitHub"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Code.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Code.svg" alt="" className="light-icon" />
    </>
  }
    iconSize={12}
    iconPosition="left"
    href="https://github.com/webflow/webflow-skills"
  >
    Explore the source code, contribute improvements, or report issues.
  </Card>

  <Card
    title="Prompt library"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/Ai.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/Ai.svg" alt="" className="light-icon" />
    </>
  }
    iconSize={12}
    iconPosition="left"
    href="/mcp/examples"
  >
    Browse example prompts that work with skills and the MCP server.
  </Card>

  <Card
    title="Getting started"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/48px/ToolNut.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/48px/ToolNut.svg" alt="" className="light-icon" />
    </>
  }
    iconSize={12}
    iconPosition="left"
    href="/mcp/reference/getting-started"
  >
    Learn how to set up and configure the Webflow MCP server.
  </Card>
</Cards>

---

# FAQs

> Frequently asked questions and troubleshooting for Webflow's MCP server

Common questions and solutions for installing, configuring, and using the Webflow MCP server.

## Installation and setup

<Accordion title="Why is my MCP server not appearing in my AI client?">
  After installing the MCP server, you may need to restart your AI client to see the new server. Additionally, check that your client (Claude Desktop, Cursor, or Windsurf) is updated to the latest version.

  **Troubleshooting steps:**

  1. Restart your AI client completely
  2. Check for updates to your AI client
  3. Verify the MCP server configuration is correct in your config file
  4. Review the [getting started guide](/mcp/reference/getting-started) for platform-specific instructions
</Accordion>

<Accordion title="How can I authenticate a different Webflow site?">
  To authenticate a different Webflow site, remove the existing authentication token and restart your AI client:

  ```bash
  rm -rf ~/.mcp-auth
  ```

  After executing this command, restart your AI client. A new authentication screen will appear, allowing you to select different sites to authorize.

  <Tip>
    Limit the number of authorized sites for better security and performance.
  </Tip>
</Accordion>

<Accordion title="The sites I want to authorize are greyed out">
  Only site owners and admins can authorize the MCP server and companion app. If you're not a site owner or admin, you won't be able to authorize those sites.

  **To resolve this:**

  * Request owner or admin access from your site administrator
  * Or, have a site owner/admin authorize the MCP server for the site
</Accordion>

<Accordion title="I'm getting a 500 error when loading the remote MCP server">
  A 500 error usually indicates an authentication or Node.js version issue.

  **Solution 1: Refresh OAuth token**

  Remove your authentication token and restart your AI client:

  ```bash
  rm -rf ~/.mcp-auth
  ```

  **Solution 2: Verify Node.js version**

  Check your Node.js version is **22.3.0 or higher**:

  ```bash
  node --version
  ```

  If your version is too old, see the [Node.js compatibility](#nodejs-compatibility) section below.
</Accordion>

## Using the MCP server

<Accordion title="The MCP server can't connect to the Webflow Designer">
  To use Designer API tools, you must open the MCP Bridge App in the Webflow Designer:

  **Steps:**

  1. Open your site in the Webflow Designer
  2. Press the `E` key to open the Apps panel
  3. Launch the "Webflow MCP Bridge App"
  4. Wait for the app to connect to the MCP server

  <Warning>
    The companion app must remain open in the Webflow Designer for Designer API tools to work. You can minimize it after it connects.
  </Warning>
</Accordion>

<Accordion title="The MCP server is timing out in the Designer">
  If the MCP server times out or disconnects while using the Designer, your browser may be putting inactive tabs to sleep. Configure your browser to keep the Designer tab active:

  **Chrome:**

  1. Go to `chrome://settings/performance`
  2. Scroll to "Always keep these sites active"
  3. Click "Add" and enter `webflow.com`

  **Firefox:**

  1. Type `about:config` in the address bar
  2. Search for `browser.tabs.unloadOnLowMemory`
  3. Set to `false`
  4. Or keep the Designer tab pinned to prevent unloading

  **Safari:**

  1. Safari doesn't have a built-in setting for this
  2. Keep the Designer tab active and pinned
  3. Or use Chrome/Firefox for better MCP server stability

  <Tip>
    Pinning the Webflow Designer tab in any browser can also help prevent timeout issues.
  </Tip>
</Accordion>

<Accordion title="What tools are available?">
  The MCP server exposes Webflow's Data and Designer APIs as tools your AI agent can use. Tools are organized into two categories:

  **Data API tools** - Work with site content and structure:

  * [Sites](/mcp/reference/data/sites) - List and manage Webflow sites
  * [Pages](/mcp/reference/data/pages) - Get page content and metadata
  * [Components](/mcp/reference/data/components) - Work with reusable components
  * [Collections](/mcp/reference/data/cms/collections) - Manage CMS collections
  * [Fields](/mcp/reference/data/cms/fields) - Define and update collection fields
  * [Items](/mcp/reference/data/cms/items) - Create, read, update, and delete CMS items
  * [Custom Code](/mcp/reference/data/custom-code) - Manage site-wide custom code

  **Designer API tools** - Manipulate the canvas in real-time:

  * [Elements](/mcp/reference/designer/elements) - Create and modify DOM elements
  * [Styles](/mcp/reference/designer/styles) - Apply CSS styles and classes
  * [Assets](/mcp/reference/designer/assets) - Manage images and media files
  * [Variables](/mcp/reference/designer/variables) - Work with design variables and tokens

  For detailed documentation on each tool, visit the [How it works](/mcp/reference/how-it-works#available-tools) page.
</Accordion>

<Accordion title="Can I use all available API endpoints with the MCP server?">
  The MCP server currently supports a focused set of Data and Designer API tools. Not all Webflow API endpoints are available through the MCP server.

  **Request new tools:**

  * [Open an issue on GitHub](https://github.com/webflow/mcp-server/issues) with your use case
  * Or contact the Developer Relations team at [developers@webflow.com](mailto:developers@webflow.com)
</Accordion>

<Accordion title="Does Webflow need to be open to use the MCP server?">
  It depends on which tools you're using:

  **Data API tools:** No, Webflow doesn't need to be open. You can manage content, collections, and site data from your AI client.

  **Designer API tools:** Yes, you must have:

  * The Webflow Designer open in your browser
  * The [companion app](/mcp/reference/how-it-works#designer-companion-app) launched and connected
</Accordion>

<Accordion title="Can I localize content with the MCP server?">
  The MCP server has partial support for localization:

  **Supported:**

  * Read and update static page/component content in secondary locales
  * Read and update default component properties in secondary locales
  * Read and update existing CMS items in secondary locales

  **Not supported:**

  * Creating new localized CMS items

  If you need additional localization features, please [open an issue](https://github.com/webflow/mcp-server/issues) or contact [developers@webflow.com](mailto:developers@webflow.com).
</Accordion>

## Node.js compatibility

The MCP server requires **Node.js version 22.3.0 or higher**. If you can't use this version as your default, use a version manager to switch Node.js versions per project.

### Using Node Version Manager (nvm)

**Install nvm:**

macOS/Linux:

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
```

Windows: Download and install [nvm-windows](https://github.com/coreybutler/nvm-windows/releases)

**Install and use Node.js 22.3.0 or higher:**

```bash
nvm install 22.3.0
nvm use 22.3.0
nvm alias default 22.3.0
```

**Verify your Node.js version:**

```bash
node --version
```

<Tip>
  After changing Node.js versions, restart your AI client for the changes to take effect.
</Tip>

### Troubleshooting Node.js and NPM

<Accordion title="NPM and NPX issues">
  **Verify Node.js and NPM are installed:**

  ```bash
  node -v
  npm -v
  ```

  **Clear NPM cache if `npx` has issues:**

  ```bash
  npm cache clean --force
  ```

  **Fix NPM global package permissions:**

  If `npm -v` only works with `sudo`, you may have permission issues. See the [official NPM documentation](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) for solutions.

  <Note>
    If you make changes to your shell configuration (`.bashrc`, `.zshrc`, etc.), restart your terminal for changes to take effect.
  </Note>
</Accordion>

<Accordion title="Node.js version conflicts">
  If you have multiple Node.js versions installed and experience conflicts:

  **Option 1: Use nvm (recommended)**

  Install nvm and use it to manage Node.js versions as shown above.

  **Option 2: Set Node.js version per project**

  Create a `.nvmrc` file in your project directory:

  ```
  22.3.0
  ```

  Then run `nvm use` in that directory to automatically switch to the correct version.

  **Option 3: Uninstall conflicting versions**

  Remove old Node.js installations and install only version 22.3.0 or higher.
</Accordion>

---

# Sites

> Manage Webflow sites, retrieve site information, and publish sites to domains

Manage your Webflow sites, retrieve detailed site information, and publish sites to specific domains using the Sites tools.

***

## List sites

List all sites accessible to the authenticated user. Returns basic site information including site ID, name, and last published date.

**Tool:** `sites_list`

<EndpointRequestSnippet endpoint="GET /v2/sites" />

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/sites" />

***

## Get site details

Get detailed information about a specific site including its settings, domains, and publishing status.

**Tool:** `sites_get`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="GET /v2/sites/{site_id}" />

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/sites/{site_id}" />

***

## Publish site

Publish a site to specified domains. This makes the latest changes live on the specified domains.

**Tool:** `sites_publish`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>

  <ParamField path="customDomains" type="array" required={false}>
    Array of custom domain IDs to publish the site to
  </ParamField>

  <ParamField path="publishToWebflowSubdomain" type="boolean" required={false} default="false">
    Whether to publish to the Webflow subdomain
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="POST /v2/sites/{site_id}/publish" />

**Returns:** Publishing status and confirmation

<EndpointResponseSnippet endpoint="POST /v2/sites/{site_id}/publish" />

---

# Pages

> Manage static pages, update page settings, and modify page content

Manage static pages in your Webflow site, update page metadata and settings, and modify page content using the Pages tools.

***

## List pages

List all pages within a site. Returns page metadata including IDs, titles, and slugs.

**Tool:** `pages_list`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    The site’s unique ID, used to list its pages.
  </ParamField>

  <ParamField path="localeId" type="string" required={false}>
    Unique identifier for a specific locale. Applicable when using localization.
  </ParamField>

  <ParamField path="limit" type="number" required={false}>
    Maximum number of records to be returned (max limit: 100)
  </ParamField>

  <ParamField path="offset" type="number" required={false}>
    Offset used for pagination if the results have more than limit records.
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="GET /v2/sites/{site_id}/pages" />

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/sites/{site_id}/pages" />

***

## Get page metadata

Get metadata for a specific page including SEO settings, Open Graph data, and page status (draft/published).

**Tool:** `pages_get_metadata`

<Card>
  <ParamField path="page_id" type="string" required={true}>
    Unique identifier for the page.
  </ParamField>

  <ParamField path="localeId" type="string" required={false}>
    Unique identifier for a specific locale. Applicable when using localization.
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="GET /v2/pages/{page_id}" />

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/pages/{page_id}" />

***

## Update page settings

Update page settings including SEO metadata, Open Graph data, slug, and publishing status.

**Tool:** `pages_update_page_settings`

<Card>
  <ParamField path="page_id" type="string" required={true}>
    Unique identifier for the page.
  </ParamField>

  <ParamField path="localeId" type="string" required={false}>
    Unique identifier for a specific locale. Applicable when using localization.
  </ParamField>

  <ParamField path="body" type="object" required={true}>
    Page settings object with fields to update
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="PUT /v2/pages/{page_id}" />

**Returns:** Updated page metadata

<EndpointResponseSnippet endpoint="PUT /v2/pages/{page_id}" />

***

## Get page content

Get the content structure and data for a specific page including all elements and their properties.

**Tool:** `pages_get_content`

<Card>
  <ParamField path="page_id" type="string" required={true}>
    Unique identifier for the page.
  </ParamField>

  <ParamField path="localeId" type="string" required={false}>
    Unique identifier for a specific locale. Applicable when using localization.
  </ParamField>

  <ParamField path="limit" type="number" required={false}>
    Maximum number of records to be returned (max limit: 100)
  </ParamField>

  <ParamField path="offset" type="number" required={false}>
    Offset used for pagination if the results have more than limit records.
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="GET /v2/pages/{page_id}/dom" />

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/pages/{page_id}/dom" />

***

## Update static content

Update content on a static page in secondary locales by modifying text nodes and property overrides.

**Tool:** `pages_update_static_content`

<Warning>
  This tool is only for updating content in secondary locales. The `localeId` parameter is required, and requests to update primary locale content will fail.
</Warning>

<Card>
  <ParamField path="page_id" type="string" required={true}>
    Unique identifier for the page.
  </ParamField>

  <ParamField path="localeId" type="string" required={true}>
    Unique identifier for the target locale.
  </ParamField>

  <ParamField path="nodes" type="array" required={true}>
    Array of node updates with text content and property overrides
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="POST /v2/pages/{page_id}/dom" />

**Returns:** Updated page content confirmation

<EndpointResponseSnippet endpoint="POST /v2/pages/{page_id}/dom" />

---

# Components

> Manage Webflow components, update component content, and configure component properties

Manage Webflow components, update component content, and configure component properties using the Components tools. Components are reusable design elements that can be instantiated across multiple pages.

***

## List components

List all components in a site. Returns component metadata including IDs, names, and versions.

**Tool:** `components_list`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>

  <ParamField path="limit" type="number" required={false}>
    Maximum number of records to return (max: 100)
  </ParamField>

  <ParamField path="offset" type="number" required={false}>
    Offset for pagination
  </ParamField>
</Card>

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/sites/{site_id}/components" />

***

## Get component content

Get the content structure and data for a specific component including text, images, and nested components.

**Tool:** `components_get_content`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>

  <ParamField path="component_id" type="string" required={true}>
    Unique identifier for the component
  </ParamField>

  <ParamField path="localeId" type="string" required={false}>
    Unique identifier for a specific locale (for localized sites)
  </ParamField>

  <ParamField path="limit" type="number" required={false}>
    Maximum number of records to return (max: 100)
  </ParamField>

  <ParamField path="offset" type="number" required={false}>
    Offset for pagination
  </ParamField>
</Card>

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/sites/{site_id}/components/{component_id}/dom" />

***

## Update component content

Update content on a component in secondary locales by modifying text nodes and property overrides.

**Tool:** `components_update_content`

<Warning>
  This tool is only for updating content in secondary locales. The `localeId` parameter is required, and requests to update primary locale content will fail.
</Warning>

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>

  <ParamField path="component_id" type="string" required={true}>
    Unique identifier for the component
  </ParamField>

  <ParamField path="localeId" type="string" required={true}>
    Unique identifier for the target locale
  </ParamField>

  <ParamField path="nodes" type="array" required={true}>
    Array of node updates with text content and property overrides
  </ParamField>
</Card>

**Returns:** Updated component content confirmation

***

## Get component properties

Get component properties including default values and configuration for a specific component.

**Tool:** `components_get_properties`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>

  <ParamField path="component_id" type="string" required={true}>
    Unique identifier for the component
  </ParamField>

  <ParamField path="localeId" type="string" required={false}>
    Unique identifier for a specific locale
  </ParamField>

  <ParamField path="limit" type="number" required={false}>
    Maximum number of records to return (max: 100)
  </ParamField>

  <ParamField path="offset" type="number" required={false}>
    Offset for pagination
  </ParamField>
</Card>

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/sites/{site_id}/components/{component_id}/properties" />

***

## Update component properties

Update component properties for localization to customize behavior in different languages.

**Tool:** `components_update_properties`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>

  <ParamField path="component_id" type="string" required={true}>
    Unique identifier for the component
  </ParamField>

  <ParamField path="localeId" type="string" required={true}>
    Unique identifier for the target locale
  </ParamField>

  <ParamField path="properties" type="object" required={true}>
    Object with property updates
  </ParamField>
</Card>

**Returns:** Updated component properties confirmation

---

# CMS

> Manage CMS collections, fields, and items in your Webflow site

Manage your Webflow CMS collections, fields, and items using the CMS tools. The CMS tools are organized into three main areas:

* **[Collections](/mcp/reference/data/cms/collections)**: Create and manage CMS collections
* **[Fields](/mcp/reference/data/cms/fields)**: Define and update collection fields
* **[Items](/mcp/reference/data/cms/items)**: Create, update, and manage collection items

---

# Collections

> Create and manage CMS collections in your Webflow site

Create and manage CMS collections using the Collections tools. Collections define the structure and schema for your content.

***

## List collections

List all CMS collections in a site. Returns collection metadata including IDs, names, and schemas.

**Tool:** `collections_list`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>
</Card>

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/sites/{site_id}/collections" />

***

## Get collection details

Get detailed information about a specific CMS collection including its schema and field definitions.

**Tool:** `collections_get`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>
</Card>

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/collections/{collection_id}" />

***

## Create collection

Create a new CMS collection in a site with specified name and schema.

**Tool:** `collections_create`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>

  <ParamField path="request" type="object" required={true}>
    Collection creation request

    <Accordion title="+ Show 3 properties">
      <ParamField path="displayName" type="string" required={true}>
        Collection name
      </ParamField>

      <ParamField path="singularName" type="string" required={true}>
        Singular form of the name
      </ParamField>

      <ParamField path="slug" type="string" required={true}>
        URL slug for the collection
      </ParamField>
    </Accordion>
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="POST /v2/sites/{site_id}/collections" />

---

# Fields

> Create and update fields in CMS collections

Create and update fields in CMS collections using the Fields tools. Fields define the data structure for collection items.

## Create static field

Create a new static field in a CMS collection (e.g., text, number, date, etc.).

**Tool:** `collection_fields_create_static`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>

  <ParamField path="request" type="object" required={true}>
    Static field definition

    <Accordion title="+ Show 5 properties">
      <ParamField path="displayName" type="string" required={true}>
        Field name
      </ParamField>

      <ParamField path="slug" type="string" required={true}>
        Field slug
      </ParamField>

      <ParamField path="fieldType" type="string" required={true}>
        Type of field (text, number, date, etc.)
      </ParamField>

      <ParamField path="isRequired" type="boolean" required={false}>
        Whether the field is required
      </ParamField>

      <ParamField path="isUnique" type="boolean" required={false}>
        Whether values must be unique
      </ParamField>
    </Accordion>
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="POST /v2/collections/{collection_id}/fields" />

**Returns:** Created field object

***

## Create option field

Create a new option field in a CMS collection with predefined choices.

**Tool:** `collection_fields_create_option`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>

  <ParamField path="request" type="object" required={true}>
    Option field definition

    <Accordion title="+ Show 4 properties">
      <ParamField path="displayName" type="string" required={true}>
        Field name
      </ParamField>

      <ParamField path="slug" type="string" required={true}>
        Field slug
      </ParamField>

      <ParamField path="options" type="array" required={true}>
        Array of option values
      </ParamField>

      <ParamField path="isRequired" type="boolean" required={false}>
        Whether the field is required
      </ParamField>
    </Accordion>
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="POST /v2/collections/{collection_id}/fields" example="OptionField" />

**Returns:** Created field object

***

## Create reference field

Create a new reference field in a CMS collection that links to items in another collection.

**Tool:** `collection_fields_create_reference`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>

  <ParamField path="request" type="object" required={true}>
    Reference field definition

    <Accordion title="+ Show 4 properties">
      <ParamField path="displayName" type="string" required={true}>
        Field name
      </ParamField>

      <ParamField path="slug" type="string" required={true}>
        Field slug
      </ParamField>

      <ParamField path="referencedCollectionId" type="string" required={true}>
        ID of the referenced collection
      </ParamField>

      <ParamField path="isRequired" type="boolean" required={false}>
        Whether the field is required
      </ParamField>
    </Accordion>
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="POST /v2/collections/{collection_id}/fields" example="ReferenceField" />

**Returns:** Created field object

***

## Update field

Update properties of an existing field in a CMS collection.

**Tool:** `collection_fields_update`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>

  <ParamField path="field_id" type="string" required={true}>
    Unique identifier for the field
  </ParamField>

  <ParamField path="request" type="object" required={true}>
    Field update object with properties to modify
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="PATCH /v2/collections/{collection_id}/fields/{field_id}" />

**Returns:** Updated field object

---

# Items

> Create, update, and manage CMS collection items

Create, update, and manage CMS collection items using the Items tools. Items are the actual content entries in your collections.

## List items

List items in a CMS collection with optional filtering and sorting.

**Tool:** `collections_items_list_items`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>

  <ParamField path="cmsLocaleId" type="string" required={false}>
    Unique identifier for the locale
  </ParamField>

  <ParamField path="limit" type="number" required={false}>
    Maximum number of records to return (max: 100)
  </ParamField>

  <ParamField path="offset" type="number" required={false}>
    Offset for pagination
  </ParamField>

  <ParamField path="name" type="string" required={false}>
    Filter by item name
  </ParamField>

  <ParamField path="slug" type="string" required={false}>
    Filter by item slug
  </ParamField>

  <ParamField path="sortBy" type="string" required={false}>
    Field to sort by
  </ParamField>

  <ParamField path="sortOrder" type="string" required={false}>
    Sort order (asc/desc)
  </ParamField>
</Card>

**Returns**
A list of items in the collection.

<EndpointResponseSnippet endpoint="GET /v2/collections/{collection_id}/items" />

***

## Create item (draft)

Create new items in a CMS collection as drafts.

**Tool:** `collections_items_create_item`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>

  <ParamField path="request" type="object" required={true}>
    Item creation request with field values
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="POST /v2/collections/{collection_id}/items" />

**Returns:** Created item object with ID

<Note>
  Items created with this tool are saved as drafts and must be published.
</Note>

<Warning title="This tool does not create localized items">
  This tool does not create localized items.
</Warning>

***

## Create item (live)

Create and publish new items in a CMS collection directly to the live site.

**Tool:** `collections_items_create_item_live`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>

  <ParamField path="request" type="object" required={true}>
    Item creation request with field values
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="POST /v2/collections/{collection_id}/items/live" />

**Returns:** Created and published item object

Items created with this tool are immediately published to the live site.

***

## Update items (draft)

Update existing items in a CMS collection as drafts.

**Tool:** `collections_items_update_items`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>

  <ParamField path="request" type="object" required={true}>
    Item update request with item IDs and field updates
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="PATCH /v2/collections/{collection_id}/items" />

**Returns:** Updated item objects

***

## Update items (live)

Update and publish existing items in a CMS collection directly to the live site.

**Tool:** `collections_items_update_items_live`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>

  <ParamField path="request" type="object" required={true}>
    Item update request with item IDs and field updates
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="PATCH /v2/collections/{collection_id}/items/live" />

**Returns:** Updated and published item objects

***

## Publish items

Publish draft items in a CMS collection to make them live.

**Tool:** `collections_items_publish_items`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>

  <ParamField path="itemIds" type="array" required={true}>
    Array of item IDs to be published
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="POST /v2/collections/{collection_id}/items/publish" />

**Returns:** Publishing confirmation

***

## Delete item

Delete an item in a CMS collection. Items will only be deleted in the primary locale unless a `cmsLocaleId` is included in the request.

**Tool:** `collections_items_delete_item`

<Card>
  <ParamField path="collection_id" type="string" required={true}>
    Unique identifier for the collection
  </ParamField>

  <ParamField path="itemId" type="string" required={true}>
    Item ID to be deleted
  </ParamField>

  <ParamField path="cmsLocaleIds" type="string" required={false}>
    Unique identifier for the locale
  </ParamField>
</Card>

<EndpointRequestSnippet endpoint="DELETE /v2/collections/{collection_id}/items/{item_id}" />

**Returns:** Deletion confirmation

---

# Custom Code

> Manage custom scripts and code for your Webflow site

Manage custom scripts and code for your Webflow site using the Scripts tools. Register scripts, apply them to sites or pages, and manage script configurations.

<Warning>
  Currently, only site-level custom code is supported, and only JavaScript scripts can be applied. Page-level scripts aren't yet supported.
</Warning>

***

## List registered scripts

List all registered scripts for a site. To apply a script to a site or page, first register it via the Register Script endpoints, then apply it using the relevant Site or Page endpoints.

**Tool:** `site_registered_scripts_list`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>
</Card>

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/sites/{site_id}/registered_scripts" />

***

## List applied scripts

Get all scripts applied to a site by the App. To apply a script to a site or page, first register it via the Register Script endpoints, then apply it using the relevant Site or Page endpoints.

**Tool:** `site_applied_scripts_list`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>
</Card>

**Returns**

<EndpointResponseSnippet endpoint="GET /v2/sites/{site_id}/custom_code" />

***

## Add inline site script

Register an inline script for a site and apply it to a site. Inline scripts are limited to 2000 characters.

**Tool:** `add_inline_site_script`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>

  <ParamField path="request" type="object" required={true}>
    Script registration request

    <Accordion title="+ Show 5 properties">
      <ParamField path="sourceCode" type="string" required={true}>
        JavaScript code (max 2000 characters)
      </ParamField>

      <ParamField path="version" type="string" required={true}>
        Script version identifier
      </ParamField>

      <ParamField path="displayName" type="string" required={true}>
        Name for the script
      </ParamField>

      <ParamField path="canCopy" type="boolean" required={false} default="true">
        Whether the script can be copied
      </ParamField>

      <ParamField path="location" type="enum" required={true}>
        Where to apply the script (`header` or `footer`)
      </ParamField>

      <ParamField path="attributes" type="object" required={false}>
        Optional script attributes
      </ParamField>
    </Accordion>
  </ParamField>
</Card>

**Returns**

<EndpointResponseSnippet endpoint="POST /v2/sites/{site_id}/registered_scripts/inline" example="CustomCodeInlineResponse" />

***

## Delete all site scripts

Delete all custom code scripts from a site.

**Tool:** `delete_all_site_scripts`

<Card>
  <ParamField path="site_id" type="string" required={true}>
    Unique identifier for the site
  </ParamField>
</Card>

**Returns**

<EndpointResponseSnippet endpoint="DELETE /v2/sites/{site_id}/custom_code" />

***

## Example workflow

1. List registered scripts to see what's available
2. List applied scripts to see what's currently active
3. Add inline scripts as needed for site functionality
4. Remove scripts when no longer needed

## Best practices

* Keep inline scripts under 2000 characters
* Use descriptive display names for easier management
* Place critical scripts in the header, non-critical in the footer
* Test scripts in a staging environment before applying to production

---

# Elements

> Create and manipulate elements on the Webflow Designer canvas

Create and manipulate elements on the Webflow Designer canvas using the Elements tools. These tools work with the live Designer interface to build and modify page layouts.

<Warning>
  The MCP Companion App must be open in the Webflow Designer for these tools to function.
</Warning>

***

## Element Builder

Use the Element Builder to create nested elements on the current page. Each action supports up to three levels of nesting. For more complex layouts, make multiple calls to `element_builder` to construct the element tree incrementally.

<Note>
  After an element is created, it is not automatically selected. Use the `element_tool` with the `select_element` action to select and inspect it.
</Note>

**Tool:** `element_builder`

<Card>
  <ParamField path="siteId" type="string" required={true}>
    Unique identifier for the site.
  </ParamField>

  <ParamField path="actions" type="array" required={true}>
    An array of element creation actions.

    <Accordion title="+ Show Action Properties">
      <ParamField path="parentElementId" type="object" required={true}>
        Object containing the `component` and `element` IDs of the parent.
      </ParamField>

      <ParamField path="creationPosition" type="'append' | 'prepend'" required={true}>
        Position to create the new element relative to the parent.
      </ParamField>

      <ParamField path="elementSchema" type="object" required={true}>
        The definition of the element to create.

        <Accordion title="+ Show Schema Properties">
          <ParamField path="type" type="string" required={true}>
            The element type (e.g., "div," "section," "h1," "p").
          </ParamField>

          <ParamField path="children" type="array" required={false}>
            An array of nested child `elementSchema` objects.
            <Note>Only container-type elements like `div`, `section`, and `container` can have children. Element nesting is limited to 3 levels deep.</Note>
          </ParamField>
        </Accordion>
      </ParamField>
    </Accordion>
  </ParamField>
</Card>

<CodeGroup>
  ```json Request Example
  {
    "siteId": "628f4b034872242526c8f62a",
    "actions": [
      {
        "parentElementId": { "component": "...", "element": "..." },
        "creationPosition": "append",
        "elementSchema": {
          "type": "div",
          "children": [
            { "type": "h1", "children": [{ "type": "text", "text": "Hello World" }] }
          ]
        }
      }
    ]
  }
  ```
</CodeGroup>

***

## Element Tool

The element tool supports multiple actions on elements, such as reading properties, selecting, and updating.

**Tool:** `element_tool`

<Card>
  <ParamField path="siteId" type="string" required={true}>
    Unique identifier for the site.
  </ParamField>

  <ParamField path="actions" type="array" required={true}>
    An array of element actions to perform. See action examples below.
  </ParamField>
</Card>

### Actions

#### Get All Elements

Get a list of all elements on the current page.

<Card>
  <ParamField path="query" type="'all'" required={true}>
    Set to "all" to retrieve all elements.
  </ParamField>

  <ParamField path="includeStyleProperties" type="boolean" required={false}>
    Whether to include style properties in the response.
  </ParamField>

  <ParamField path="includeAllBreakpointStyles" type="boolean" required={false}>
    Whether to include styles for all breakpoints.
  </ParamField>
</Card>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "getAllElements": {
          "query": "all",
          "includeStyleProperties": false
        }
      }
    ]
  }
  ```
</CodeGroup>

#### Get Selected Element

Get detailed information about the currently selected element.

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      { "getSelectedElement": true }
    ]
  }
  ```
</CodeGroup>

#### Select Element

Select an element on the canvas by its ID.

<Card>
  <ParamField path="component" type="string" required={true}>
    Component ID.
  </ParamField>

  <ParamField path="element" type="string" required={true}>
    Element ID.
  </ParamField>
</Card>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "selectElement": {
          "component": "...",
          "element": "..."
        }
      }
    ]
  }
  ```
</CodeGroup>

#### Add or Update Attributes

Add or update attributes on an element.

<Card>
  <ParamField path="component" type="string" required={true}>
    Component ID.
  </ParamField>

  <ParamField path="element" type="string" required={true}>
    Element ID.
  </ParamField>

  <ParamField path="attributes" type="array" required={true}>
    An array of attribute objects, each with a `name` and `value`.
  </ParamField>
</Card>

<Note>
  This action is only valid if the element's metadata shows 

  `canHaveAttributes: true`

  .
</Note>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "addOrUpdateAttribute": {
          "component": "...",
          "element": "...",
          "attributes": [{ "name": "data-custom", "value": "123" }]
        }
      }
    ]
  }
  ```
</CodeGroup>

#### Set Text

Set the text content for a text-based element (e.g., "p," "h1," "span").

<Card>
  <ParamField path="component" type="string" required={true}>
    Component ID.
  </ParamField>

  <ParamField path="element" type="string" required={true}>
    Element ID.
  </ParamField>

  <ParamField path="text" type="string" required={true}>
    The text content to set.
  </ParamField>
</Card>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "setText": {
          "component": "...",
          "element": "...",
          "text": "New Heading Text"
        }
      }
    ]
  }
  ```
</CodeGroup>

#### Remove Attribute

Remove one or more attributes from an element.

<Card>
  <ParamField path="component" type="string" required={true}>
    Component ID.
  </ParamField>

  <ParamField path="element" type="string" required={true}>
    Element ID.
  </ParamField>

  <ParamField path="attribute_names" type="array" required={true}>
    An array of attribute names to remove.
  </ParamField>
</Card>

<Note>
  This action is only valid if the element's metadata shows 

  `canHaveAttributes: true`

  .
</Note>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "remove_attribute": {
          "component": "...",
          "element": "...",
          "attribute_names": ["data-custom"]
        }
      }
    ]
  }
  ```
</CodeGroup>

#### Update ID Attribute

Update the HTML `id` attribute of an element.

<Card>
  <ParamField path="component" type="string" required={true}>
    Component ID.
  </ParamField>

  <ParamField path="element" type="string" required={true}>
    Element ID.
  </ParamField>

  <ParamField path="new_id" type="string" required={true}>
    The new ID to set.
  </ParamField>
</Card>

<Note>
  Do not include the 

  `#`

   character in the 

  `new_id`

   string.
</Note>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "update_id_attribute": {
          "component": "...",
          "element": "...",
          "new_id": "my-unique-id"
        }
      }
    ]
  }
  ```
</CodeGroup>

#### Set Link

Set the link for an element like a `Link Block`, `Button`, or `Text Link`.

<Card>
  <ParamField path="component" type="string" required={true}>
    Component ID.
  </ParamField>

  <ParamField path="element" type="string" required={true}>
    Element ID.
  </ParamField>

  <ParamField path="linkType" type="'url' | 'file' | 'page' | 'element' | 'email' | 'phone'" required={true}>
    The type of link to set.
  </ParamField>

  <ParamField path="link" type="string" required={true}>
    The link destination. The format depends on `linkType`.
  </ParamField>
</Card>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "set_link": {
          "component": "...",
          "element": "...",
          "linkType": "url",
          "link": "https://webflow.com"
        }
      }
    ]
  }
  ```
</CodeGroup>

#### Set Heading Level

Change the heading level of a `Heading` element (e.g., from `h2` to `h3`).

<Card>
  <ParamField path="component" type="string" required={true}>
    Component ID.
  </ParamField>

  <ParamField path="element" type="string" required={true}>
    Element ID.
  </ParamField>

  <ParamField path="heading_level" type="1 | 2 | 3 | 4 | 5 | 6" required={true}>
    The heading level to apply (1-6).
  </ParamField>
</Card>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "set_heading_level": {
          "component": "...",
          "element": "...",
          "heading_level": 2
        }
      }
    ]
  }
  ```
</CodeGroup>

#### Set Style

Apply one or more existing styles to an element.

<Card>
  <ParamField path="component" type="string" required={true}>
    Component ID.
  </ParamField>

  <ParamField path="element" type="string" required={true}>
    Element ID.
  </ParamField>

  <ParamField path="styleNames" type="array" required={true}>
    An array of style names to apply.
  </ParamField>
</Card>

<Note>
  This action replaces all existing styles on the element. To create styles, use the 

  `style_tool`

  .
</Note>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "setStyle": {
          "component": "...",
          "element": "...",
          "styleNames": ["Button", "Primary-Button"]
        }
      }
    ]
  }
  ```
</CodeGroup>

#### Set Image Asset

Set the image source for an `Image` element.

<Card>
  <ParamField path="component" type="string" required={true}>
    Component ID.
  </ParamField>

  <ParamField path="element" type="string" required={true}>
    Element ID of the Image.
  </ParamField>

  <ParamField path="imageAssetId" type="string" required={true}>
    The ID of the asset to use.
  </ParamField>
</Card>

<Note>
  Retrieve available asset IDs using 

  `asset_tool`

  .
</Note>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "setImageAsset": {
          "component": "...",
          "element": "...",
          "imageAssetId": "628f4b034872242526c8f65c"
        }
      }
    ]
  }
  ```
</CodeGroup>

---

# Styles

> Create and manage styles, classes, and CSS properties in the Webflow Designer

Create and manage styles, classes, and CSS properties in the Webflow Designer using the Styles tools. These tools let you create new styles, update existing ones, and manage style properties across breakpoints.

<Warning>
  The MCP Companion App must be open in the Webflow Designer for these tools to function.
</Warning>

<Tip title="Webflow only supports long-form names of CSS properties">
  Use the long-form CSS property names when setting styles. For example, use `grid-row-gap` instead of `row-gap`. See the [MDN CSS Properties reference](https://developer.mozilla.org/en-US/docs/Web/CSS) for complete property names.
</Tip>

***

## Style tool

Create and manage classes and CSS properties in the Webflow Designer using the Style tool.

**Tool:** `style_tool`

<Card>
  <ParamField path="siteId" type="string" required={true}>
    Unique identifier for the site.
  </ParamField>

  <ParamField path="actions" type="array" required={true}>
    An array of style actions to perform. See action examples below.
  </ParamField>
</Card>

***

### Create style

Create a new style with specified properties.

<Card>
  <ParamField path="name" type="string" required={true}>
    The name of the new style.
  </ParamField>

  <ParamField path="properties" type="array" required={true}>
    An array of property objects.

    <Accordion title="+ Show Property Properties">
      <ParamField path="property_name" type="string" required={true}>
        The CSS property name (use longhand, e.g., `margin-top`).
      </ParamField>

      <ParamField path="property_value" type="string" required={false}>
        The static value for the property.
      </ParamField>

      <ParamField path="variable_as_value" type="string" required={false}>
        The ID of a variable to use as the value.
      </ParamField>
    </Accordion>
  </ParamField>

  <ParamField path="parent_style_name" type="string" required={false}>
    The name of a parent style to create a combo class.
  </ParamField>
</Card>

<CodeGroup>
  ```json {{ title: 'Action Example' }}
  {
    "actions": [
      {
        "create_style": {
          "name": "Primary Button",
          "properties": [
            { "property_name": "background-color", "property_value": "#007bff" }
          ]
        }
      }
    ]
  }
  ```
</CodeGroup>

### Get styles

Retrieve a list of styles from the site.

<Card>
  <ParamField path="query" type="'all' | 'filtered'" required={true}>
    Specify "all" to get all styles or "filtered" to use `filter_ids`.
  </ParamField>

  <ParamField path="skip_properties" type="boolean" required={false}>
    If true, the response will not include style properties.
  </ParamField>

  <ParamField path="include_all_breakpoints" type="boolean" required={false}>
    If true, includes styles from all breakpoints (can be data-intensive).
  </ParamField>

  <ParamField path="filter_ids" type="array" required={false}>
    An array of style IDs to retrieve when `query` is "filtered."
  </ParamField>
</Card>

<CodeGroup>
  ```json {{ title: 'Action Example' }}
  {
    "actions": [
      {
        "get_styles": {
          "query": "all",
          "skip_properties": true
        }
      }
    ]
  }
  ```
</CodeGroup>

### Update style

Update a style's properties for a specific breakpoint and pseudo-class.

<Card>
  <ParamField path="style_name" type="string" required={true}>
    The name of the style to update.
  </ParamField>

  <ParamField path="breakpoint_id" type="string" required={false}>
    The breakpoint to target (e.g., `main`, `medium`, `tiny`). Defaults to `main`.
  </ParamField>

  <ParamField path="pseudo" type="string" required={false}>
    The pseudo-class to target (e.g., `hover`, `focus`). Defaults to `noPseudo`.
  </ParamField>

  <ParamField path="properties" type="array" required={false}>
    An array of property objects to add or update.
  </ParamField>

  <ParamField path="remove_properties" type="array" required={false}>
    An array of property names to remove.
  </ParamField>
</Card>

<CodeGroup>
  ```json {{ title: 'Action Example' }}
  {
    "actions": [
      {
        "update_style": {
          "style_name": "Primary Button",
          "pseudo": "hover",
          "properties": [
            { "property_name": "background-color", "property_value": "#0056b3" }
          ]
        }
      }
    ]
  }
  ```
</CodeGroup>

***

## Learn about Webflow styles and supported CSS properties

A tool, that when called, will get a list of all CSS properties supported by the Webflow Designer.

**Tool:** `de_learn_more_about_styles`

---

# Assets

> Manage assets and folders in the Webflow Designer asset manager

Manage assets and folders in the Webflow Designer asset manager using the Assets tools. Organize files, update asset metadata, and retrieve asset information.

<Warning>
  The MCP Companion App must be open in the Webflow Designer for these tools to function.
</Warning>

***

## Asset tool

Perform actions like creating folders, getting assets, and updating asset metadata.

**Tool:** `asset_tool`

<Card>
  <ParamField path="siteId" type="string" required={true}>
    Unique identifier for the site.
  </ParamField>

  <ParamField path="actions" type="array" required={true}>
    An array of asset actions to perform. See action examples below.
  </ParamField>
</Card>

### Actions

### Create folder

Create a new folder in the asset manager.

<Card>
  <ParamField path="name" type="string" required={true}>
    The name of the folder to create.
  </ParamField>

  <ParamField path="parent_folder_id" type="string" required={false}>
    The ID of a parent folder to create the new folder inside. If omitted, the folder is created in the root directory.
  </ParamField>
</Card>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "create_folder": {
          "name": "Marketing Images"
        }
      }
    ]
  }
  ```
</CodeGroup>

### Get all assets and folders

Retrieve a list of assets and/or folders.

<Card>
  <ParamField path="query" type="'all' | 'folders' | 'assets'" required={true}>
    Specify what to retrieve.
  </ParamField>

  <ParamField path="filter_assets_by_ids" type="array" required={false}>
    An array of asset IDs to filter by.
  </ParamField>
</Card>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "get_all_assets_and_folders": {
          "query": "assets"
        }
      }
    ]
  }
  ```
</CodeGroup>

### Update asset

Update an asset's metadata, such as its name, alt text, or parent folder.

<Card>
  <ParamField path="asset_id" type="string" required={true}>
    The ID of the asset to update.
  </ParamField>

  <ParamField path="name" type="string" required={false}>
    The new name for the asset.
  </ParamField>

  <ParamField path="alt_text" type="string" required={false}>
    The new alt text for the asset.
  </ParamField>

  <ParamField path="parent_folder_id" type="string" required={false}>
    The ID of the folder to move the asset to.
  </ParamField>
</Card>

<CodeGroup>
  ```json title="Action Example"
  {
    "actions": [
      {
        "update_asset": {
          "asset_id": "628f4b034872242526c8f65c",
          "alt_text": "A beautiful landscape"
        }
      }
    ]
  }
  ```
</CodeGroup>

***

## Get image preview

Fetch an image from a URL and return it as a base64-encoded string.

<Card>
  <ParamField path="url" type="string" required={true}>
    The URL of the image to fetch.
  </ParamField>

  <ParamField path="siteId" type="string" required={true}>
    Unique identifier for the site.
  </ParamField>
</Card>

<Note>
  This tool helps analyze uploaded assets in your Webflow project, enabling the LLM to generate ALT text or perform other related tasks. Supported image formats include JPG, PNG, WEBP, and AVIF.
</Note>

---

# Variables

> Create and manage design variables for colors, sizes, fonts, and more

---

# Variables

Create and manage design variables for colors, sizes, fonts, and other design tokens in the Webflow Designer. Variables function like CSS custom properties and can be linked to styles.

<Warning>
  The MCP Companion App must be open in the Webflow Designer for these tools to function.
</Warning>

## Variable tool

Perform actions like creating variable collections, modes, and variables of different types.

**Tool:** `variable_tool`

**Parameters:**

* `siteId` (required): Unique identifier for the site
* `actions` (required): Array of variable actions

### Create variable collection

Create a new variable collection to organize related variables.

**Action:** `create_variable_collection`

**Parameters:**

* `name` (required): Name of the variable collection

**Returns:** Created collection object with ID

### Create variable mode

Create a new variable mode in a variable collection. Modes allow you to define different values for the same variables (e.g., light/dark themes).

**Action:** `create_variable_mode`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `name` (required): Name of the variable mode

**Returns:** Created mode object with ID

### Get variable collections

Get all variable collections and their modes.

**Action:** `get_variable_collections`

**Parameters:**

* `query` (required): `"all"` to get all collections, or `"filtered"` for filtered results
* `filter_collections_by_ids` (optional): Array of collection IDs to filter by

**Returns:** Array of variable collection objects with their modes

### Get variables

Get all variables in a variable collection and their modes.

**Action:** `get_variables`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `include_all_modes` (optional): Whether to include all modes
* `filter_variables_by_ids` (optional): Array of variable IDs to filter by

**Returns:** Array of variable objects with their values across modes

## Create variables

Create variables of different types. All create variable actions share similar parameters.

### Create color variable

Create a new color variable.

**Action:** `create_color_variable`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `variable_name` (required): Name of the variable
* `value` (required): Value object with:
  * `static_value` (optional): Color value (hex, RGB, etc.)
  * `existing_variable_id` (optional): ID of another variable to bind to

**Returns:** Created variable object

### Create size variable

Create a new size variable with a numeric value and unit.

**Action:** `create_size_variable`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `variable_name` (required): Name of the variable
* `value` (required): Value object with:
  * `static_value` (optional): Object with `value` (number) and `unit` (string)
  * `existing_variable_id` (optional): ID of another variable to bind to

**Returns:** Created variable object

### Create number variable

Create a new number variable.

**Action:** `create_number_variable`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `variable_name` (required): Name of the variable
* `value` (required): Value object with:
  * `static_value` (optional): Numeric value
  * `existing_variable_id` (optional): ID of another variable to bind to

**Returns:** Created variable object

### Create percentage variable

Create a new percentage variable.

**Action:** `create_percentage_variable`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `variable_name` (required): Name of the variable
* `value` (required): Value object with:
  * `static_value` (optional): Percentage value (number)
  * `existing_variable_id` (optional): ID of another variable to bind to

**Returns:** Created variable object

### Create font family variable

Create a new font family variable.

**Action:** `create_font_family_variable`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `variable_name` (required): Name of the variable
* `value` (required): Value object with:
  * `static_value` (optional): Font family name
  * `existing_variable_id` (optional): ID of another variable to bind to

**Returns:** Created variable object

## Update variables

Update variables of different types. All update variable actions share similar parameters.

### Update color variable

Update a color variable's value.

**Action:** `update_color_variable`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `variable_id` (required): ID of the variable to update
* `mode_id` (optional): ID of the mode to update (if not provided, updates all modes)
* `value` (required): Value object with `static_value` or `existing_variable_id`

**Returns:** Updated variable confirmation

### Update size variable

Update a size variable's value.

**Action:** `update_size_variable`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `variable_id` (required): ID of the variable to update
* `mode_id` (optional): ID of the mode to update
* `value` (required): Value object with `static_value` or `existing_variable_id`

**Returns:** Updated variable confirmation

### Update number variable

Update a number variable's value.

**Action:** `update_number_variable`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `variable_id` (required): ID of the variable to update
* `mode_id` (optional): ID of the mode to update
* `value` (required): Value object with `static_value` or `existing_variable_id`

**Returns:** Updated variable confirmation

### Update percentage variable

Update a percentage variable's value.

**Action:** `update_percentage_variable`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `variable_id` (required): ID of the variable to update
* `mode_id` (optional): ID of the mode to update
* `value` (required): Value object with `static_value` or `existing_variable_id`

**Returns:** Updated variable confirmation

### Update font family variable

Update a font family variable's value.

**Action:** `update_font_family_variable`

**Parameters:**

* `variable_collection_id` (required): ID of the variable collection
* `variable_id` (required): ID of the variable to update
* `mode_id` (optional): ID of the mode to update
* `value` (required): Value object with `static_value` or `existing_variable_id`

**Returns:** Updated variable confirmation

## Variable binding

Variables can be bound to other variables using `existing_variable_id`. This creates a reference relationship where one variable's value is derived from another. This is useful for creating design systems where related values should stay in sync.

## Example workflow

1. Create a variable collection to organize variables
2. Create variable modes if you need theme variations
3. Create variables of different types (colors, sizes, fonts)
4. Bind variables to other variables as needed
5. Use variables in styles via `variable_as_value` in style properties
6. Update variable values to change them across all uses

## Best practices

* Organize related variables into collections
* Use modes for theme variations (light/dark, etc.)
* Bind related variables to maintain consistency
* Use descriptive names for variables
* Update variables rather than individual style properties when values need to change globally

---

# Keyword Optimizer

> Review static pages and CMS items, then update copy, meta titles, and descriptions to align with keyword optimization goals.

<div>
  <Card
    title="Keyword Optimizer"
    icon={
  <>
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/SEO.svg" alt="" className="dark-icon" />
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/SEO.svg" alt="" className="light-icon" />
  </>
}
  >
    Review static pages and CMS items, then update copy, meta titles, and descriptions to align with keyword optimization goals.
  </Card>

  <div>
    <TryInButton
      platform="claude-code"
      prompt={`role: |
  You are an SEO Content Strategist and Copywriter specializing in keyword optimization for Webflow sites. You excel at analyzing page content, identifying optimization opportunities, and crafting compelling copy that naturally integrates target keywords while maintaining readability and user value.
context:
  goal: |
    Review all static pages and CMS collection items on a Webflow site and update the copy, meta titles, and meta descriptions to align with the following keyword optimization goals:

    {{keywordGoals}}

    The updates should improve SEO performance while maintaining or enhancing the user experience. All changes should feel natural and provide value to readers.
task:
  - Discover and select the target Webflow site.
  - Review all static pages and CMS collection items.
  - For each static page, analyze:
      - Current page copy and content
      - Meta title and description
      - Keyword density and placement
      - Content relevance to target keywords
  - For each CMS collection item, analyze:
      - Current item content (including rich text fields)
      - Meta title and description (if available in collection schema)
      - Keyword density and placement
      - Content relevance to target keywords
  - Identify optimization opportunities based on the keyword goals provided.
  - Propose specific updates for each page and CMS item including:
      - Revised meta titles (50-60 characters, include primary keyword)
      - Revised meta descriptions (150-160 characters, include primary keyword and CTA)
      - Suggested copy updates to better integrate target keywords naturally
  - Present a summary of proposed changes for user approval.
  - Upon approval, apply the updates using Webflow MCP tools.
  - Provide a final report showing before/after comparisons.
instructions:
  operating_principles:
    - Always get user approval before making any changes (apply_changes=true).
    - Prioritize user experience - keyword stuffing is not acceptable.
    - Keywords should be integrated naturally into existing content flow.
    - Meta titles should be compelling and include primary keywords near the beginning.
    - Meta descriptions should be persuasive, include keywords, and have a clear call-to-action.
    - Maintain brand voice and tone throughout all updates.
    - Focus on pages that will have the most SEO impact (homepage, main service pages, etc.).
  keyword_integration_guidelines:
    - Primary keywords should appear in:
        - Meta title (preferably in first 30 characters)
        - Meta description
        - H1 heading
        - First paragraph of body content
        - At least one H2 or H3 subheading
    - Secondary keywords should be naturally woven throughout the content.
    - Use keyword variations and related terms to avoid repetition.
    - Ensure keyword density stays between 1-2% (natural and readable).
  content_quality_standards:
    - All copy must be clear, concise, and valuable to readers.
    - Avoid keyword stuffing or awkward phrasing.
    - Maintain readability and flow.
    - Ensure content answers user intent for target keywords.
    - Keep brand voice consistent across all pages.
  tool_flow:
    - "1. **Discovery**: Use \`sites_list\` to let the user select a site."
    - "2. **Page Inventory**: Use \`pages_list\` to get all static pages."
    - "3. **CMS Inventory**: Use \`collections_list\` to get all CMS collections, then use \`collections_items_list_items\` for each collection to get all items."
    - "4. **Static Page Analysis**: For each static page:"
    - "  - Use \`pages_get_content\` to review current content"
    - "  - Use \`pages_get_metadata\` to review current SEO metadata"
    - "  - Analyze keyword opportunities based on the provided goals"
    - "5. **CMS Item Analysis**: For each CMS collection item:"
    - "  - Review item field data (especially rich text fields) for content analysis"
    - "  - Check if collection has SEO fields (meta title, description) via collection schema"
    - "  - Analyze keyword opportunities based on the provided goals"
    - "6. **Proposal Creation**: Create a detailed proposal with:"
    - "  - Page-by-page and item-by-item analysis"
    - "  - Specific copy suggestions"
    - "  - Meta title and description recommendations"
    - "  - Rationale for each change"
    - "7. **User Approval**: Present the proposal and wait for approval."
    - "8. **Implementation**: Upon approval:"
    - "  - **Static Pages**:"
    - "    - Use \`pages_update_page_settings\` to update meta titles and descriptions"
    - "    - For page copy updates: Use \`de_page_tool\` with \`switch_page\` to navigate to the target page, then use \`element_tool\` with \`select_element\` and \`set_text\` actions to update content via node IDs (static content can only be updated via Designer tools, not the Data API)"
    - "  - **CMS Items**:"
    - "    - Use \`collections_items_update_items_live\` to update CMS item fields including rich text content and SEO metadata (CMS rich text fields can be updated via the Data API)"
    - "9. **Reporting**: Provide a summary report with before/after comparisons and expected SEO impact."
`}
    />

    <TryInButton
      platform="cursor"
      prompt={`role: |
  You are an SEO Content Strategist and Copywriter specializing in keyword optimization for Webflow sites. You excel at analyzing page content, identifying optimization opportunities, and crafting compelling copy that naturally integrates target keywords while maintaining readability and user value.
context:
  goal: |
    Review all static pages and CMS collection items on a Webflow site and update the copy, meta titles, and meta descriptions to align with the following keyword optimization goals:

    {{keywordGoals}}

    The updates should improve SEO performance while maintaining or enhancing the user experience. All changes should feel natural and provide value to readers.
task:
  - Discover and select the target Webflow site.
  - Review all static pages and CMS collection items.
  - For each static page, analyze:
      - Current page copy and content
      - Meta title and description
      - Keyword density and placement
      - Content relevance to target keywords
  - For each CMS collection item, analyze:
      - Current item content (including rich text fields)
      - Meta title and description (if available in collection schema)
      - Keyword density and placement
      - Content relevance to target keywords
  - Identify optimization opportunities based on the keyword goals provided.
  - Propose specific updates for each page and CMS item including:
      - Revised meta titles (50-60 characters, include primary keyword)
      - Revised meta descriptions (150-160 characters, include primary keyword and CTA)
      - Suggested copy updates to better integrate target keywords naturally
  - Present a summary of proposed changes for user approval.
  - Upon approval, apply the updates using Webflow MCP tools.
  - Provide a final report showing before/after comparisons.
instructions:
  operating_principles:
    - Always get user approval before making any changes (apply_changes=true).
    - Prioritize user experience - keyword stuffing is not acceptable.
    - Keywords should be integrated naturally into existing content flow.
    - Meta titles should be compelling and include primary keywords near the beginning.
    - Meta descriptions should be persuasive, include keywords, and have a clear call-to-action.
    - Maintain brand voice and tone throughout all updates.
    - Focus on pages that will have the most SEO impact (homepage, main service pages, etc.).
  keyword_integration_guidelines:
    - Primary keywords should appear in:
        - Meta title (preferably in first 30 characters)
        - Meta description
        - H1 heading
        - First paragraph of body content
        - At least one H2 or H3 subheading
    - Secondary keywords should be naturally woven throughout the content.
    - Use keyword variations and related terms to avoid repetition.
    - Ensure keyword density stays between 1-2% (natural and readable).
  content_quality_standards:
    - All copy must be clear, concise, and valuable to readers.
    - Avoid keyword stuffing or awkward phrasing.
    - Maintain readability and flow.
    - Ensure content answers user intent for target keywords.
    - Keep brand voice consistent across all pages.
  tool_flow:
    - "1. **Discovery**: Use \`sites_list\` to let the user select a site."
    - "2. **Page Inventory**: Use \`pages_list\` to get all static pages."
    - "3. **CMS Inventory**: Use \`collections_list\` to get all CMS collections, then use \`collections_items_list_items\` for each collection to get all items."
    - "4. **Static Page Analysis**: For each static page:"
    - "  - Use \`pages_get_content\` to review current content"
    - "  - Use \`pages_get_metadata\` to review current SEO metadata"
    - "  - Analyze keyword opportunities based on the provided goals"
    - "5. **CMS Item Analysis**: For each CMS collection item:"
    - "  - Review item field data (especially rich text fields) for content analysis"
    - "  - Check if collection has SEO fields (meta title, description) via collection schema"
    - "  - Analyze keyword opportunities based on the provided goals"
    - "6. **Proposal Creation**: Create a detailed proposal with:"
    - "  - Page-by-page and item-by-item analysis"
    - "  - Specific copy suggestions"
    - "  - Meta title and description recommendations"
    - "  - Rationale for each change"
    - "7. **User Approval**: Present the proposal and wait for approval."
    - "8. **Implementation**: Upon approval:"
    - "  - **Static Pages**:"
    - "    - Use \`pages_update_page_settings\` to update meta titles and descriptions"
    - "    - For page copy updates: Use \`de_page_tool\` with \`switch_page\` to navigate to the target page, then use \`element_tool\` with \`select_element\` and \`set_text\` actions to update content via node IDs (static content can only be updated via Designer tools, not the Data API)"
    - "  - **CMS Items**:"
    - "    - Use \`collections_items_update_items_live\` to update CMS item fields including rich text content and SEO metadata (CMS rich text fields can be updated via the Data API)"
    - "9. **Reporting**: Provide a summary report with before/after comparisons and expected SEO impact."
`}
    />

    <TryInButton
      platform="claude"
      prompt={`role: |
  You are an SEO Content Strategist and Copywriter specializing in keyword optimization for Webflow sites. You excel at analyzing page content, identifying optimization opportunities, and crafting compelling copy that naturally integrates target keywords while maintaining readability and user value.
context:
  goal: |
    Review all static pages and CMS collection items on a Webflow site and update the copy, meta titles, and meta descriptions to align with the following keyword optimization goals:

    {{keywordGoals}}

    The updates should improve SEO performance while maintaining or enhancing the user experience. All changes should feel natural and provide value to readers.
task:
  - Discover and select the target Webflow site.
  - Review all static pages and CMS collection items.
  - For each static page, analyze:
      - Current page copy and content
      - Meta title and description
      - Keyword density and placement
      - Content relevance to target keywords
  - For each CMS collection item, analyze:
      - Current item content (including rich text fields)
      - Meta title and description (if available in collection schema)
      - Keyword density and placement
      - Content relevance to target keywords
  - Identify optimization opportunities based on the keyword goals provided.
  - Propose specific updates for each page and CMS item including:
      - Revised meta titles (50-60 characters, include primary keyword)
      - Revised meta descriptions (150-160 characters, include primary keyword and CTA)
      - Suggested copy updates to better integrate target keywords naturally
  - Present a summary of proposed changes for user approval.
  - Upon approval, apply the updates using Webflow MCP tools.
  - Provide a final report showing before/after comparisons.
instructions:
  operating_principles:
    - Always get user approval before making any changes (apply_changes=true).
    - Prioritize user experience - keyword stuffing is not acceptable.
    - Keywords should be integrated naturally into existing content flow.
    - Meta titles should be compelling and include primary keywords near the beginning.
    - Meta descriptions should be persuasive, include keywords, and have a clear call-to-action.
    - Maintain brand voice and tone throughout all updates.
    - Focus on pages that will have the most SEO impact (homepage, main service pages, etc.).
  keyword_integration_guidelines:
    - Primary keywords should appear in:
        - Meta title (preferably in first 30 characters)
        - Meta description
        - H1 heading
        - First paragraph of body content
        - At least one H2 or H3 subheading
    - Secondary keywords should be naturally woven throughout the content.
    - Use keyword variations and related terms to avoid repetition.
    - Ensure keyword density stays between 1-2% (natural and readable).
  content_quality_standards:
    - All copy must be clear, concise, and valuable to readers.
    - Avoid keyword stuffing or awkward phrasing.
    - Maintain readability and flow.
    - Ensure content answers user intent for target keywords.
    - Keep brand voice consistent across all pages.
  tool_flow:
    - "1. **Discovery**: Use \`sites_list\` to let the user select a site."
    - "2. **Page Inventory**: Use \`pages_list\` to get all static pages."
    - "3. **CMS Inventory**: Use \`collections_list\` to get all CMS collections, then use \`collections_items_list_items\` for each collection to get all items."
    - "4. **Static Page Analysis**: For each static page:"
    - "  - Use \`pages_get_content\` to review current content"
    - "  - Use \`pages_get_metadata\` to review current SEO metadata"
    - "  - Analyze keyword opportunities based on the provided goals"
    - "5. **CMS Item Analysis**: For each CMS collection item:"
    - "  - Review item field data (especially rich text fields) for content analysis"
    - "  - Check if collection has SEO fields (meta title, description) via collection schema"
    - "  - Analyze keyword opportunities based on the provided goals"
    - "6. **Proposal Creation**: Create a detailed proposal with:"
    - "  - Page-by-page and item-by-item analysis"
    - "  - Specific copy suggestions"
    - "  - Meta title and description recommendations"
    - "  - Rationale for each change"
    - "7. **User Approval**: Present the proposal and wait for approval."
    - "8. **Implementation**: Upon approval:"
    - "  - **Static Pages**:"
    - "    - Use \`pages_update_page_settings\` to update meta titles and descriptions"
    - "    - For page copy updates: Use \`de_page_tool\` with \`switch_page\` to navigate to the target page, then use \`element_tool\` with \`select_element\` and \`set_text\` actions to update content via node IDs (static content can only be updated via Designer tools, not the Data API)"
    - "  - **CMS Items**:"
    - "    - Use \`collections_items_update_items_live\` to update CMS item fields including rich text content and SEO metadata (CMS rich text fields can be updated via the Data API)"
    - "9. **Reporting**: Provide a summary report with before/after comparisons and expected SEO impact."
`}
    />
  </div>
</div>

## Prompt

<Tip title="Replace keywords in the prompt with your own keywords">
  Replace the `{{keywordGoals}}` placeholder in the prompt with your own keyword optimization goals.
</Tip>

```yaml
role: |
  You are an SEO Content Strategist and Copywriter specializing in keyword optimization for Webflow sites. You excel at analyzing page content, identifying optimization opportunities, and crafting compelling copy that naturally integrates target keywords while maintaining readability and user value.
context:
  goal: |
    Review all static pages and CMS collection items on a Webflow site and update the copy, meta titles, and meta descriptions to align with the following keyword optimization goals:

    {{keywordGoals}}

    The updates should improve SEO performance while maintaining or enhancing the user experience. All changes should feel natural and provide value to readers.
task:
  - Discover and select the target Webflow site.
  - Review all static pages and CMS collection items.
  - For each static page, analyze:
      - Current page copy and content
      - Meta title and description
      - Keyword density and placement
      - Content relevance to target keywords
  - For each CMS collection item, analyze:
      - Current item content (including rich text fields)
      - Meta title and description (if available in collection schema)
      - Keyword density and placement
      - Content relevance to target keywords
  - Identify optimization opportunities based on the keyword goals provided.
  - Propose specific updates for each page and CMS item including:
      - Revised meta titles (50-60 characters, include primary keyword)
      - Revised meta descriptions (150-160 characters, include primary keyword and CTA)
      - Suggested copy updates to better integrate target keywords naturally
  - Present a summary of proposed changes for user approval.
  - Upon approval, apply the updates using Webflow MCP tools.
  - Provide a final report showing before/after comparisons.
instructions:
  operating_principles:
    - Always get user approval before making any changes (apply_changes=true).
    - Prioritize user experience - keyword stuffing is not acceptable.
    - Keywords should be integrated naturally into existing content flow.
    - Meta titles should be compelling and include primary keywords near the beginning.
    - Meta descriptions should be persuasive, include keywords, and have a clear call-to-action.
    - Maintain brand voice and tone throughout all updates.
    - Focus on pages that will have the most SEO impact (homepage, main service pages, etc.).
  keyword_integration_guidelines:
    - Primary keywords should appear in:
        - Meta title (preferably in first 30 characters)
        - Meta description
        - H1 heading
        - First paragraph of body content
        - At least one H2 or H3 subheading
    - Secondary keywords should be naturally woven throughout the content.
    - Use keyword variations and related terms to avoid repetition.
    - Ensure keyword density stays between 1-2% (natural and readable).
  content_quality_standards:
    - All copy must be clear, concise, and valuable to readers.
    - Avoid keyword stuffing or awkward phrasing.
    - Maintain readability and flow.
    - Ensure content answers user intent for target keywords.
    - Keep brand voice consistent across all pages.
  tool_flow:
    - "1. **Discovery**: Use `sites_list` to let the user select a site."
    - "2. **Page Inventory**: Use `pages_list` to get all static pages."
    - "3. **CMS Inventory**: Use `collections_list` to get all CMS collections, then use `collections_items_list_items` for each collection to get all items."
    - "4. **Static Page Analysis**: For each static page:"
    - "  - Use `pages_get_content` to review current content"
    - "  - Use `pages_get_metadata` to review current SEO metadata"
    - "  - Analyze keyword opportunities based on the provided goals"
    - "5. **CMS Item Analysis**: For each CMS collection item:"
    - "  - Review item field data (especially rich text fields) for content analysis"
    - "  - Check if collection has SEO fields (meta title, description) via collection schema"
    - "  - Analyze keyword opportunities based on the provided goals"
    - "6. **Proposal Creation**: Create a detailed proposal with:"
    - "  - Page-by-page and item-by-item analysis"
    - "  - Specific copy suggestions"
    - "  - Meta title and description recommendations"
    - "  - Rationale for each change"
    - "7. **User Approval**: Present the proposal and wait for approval."
    - "8. **Implementation**: Upon approval:"
    - "  - **Static Pages**:"
    - "    - Use `pages_update_page_settings` to update meta titles and descriptions"
    - "    - For page copy updates: Use `de_page_tool` with `switch_page` to navigate to the target page, then use `element_tool` with `select_element` and `set_text` actions to update content via node IDs (static content can only be updated via Designer tools, not the Data API)"
    - "  - **CMS Items**:"
    - "    - Use `collections_items_update_items_live` to update CMS item fields including rich text content and SEO metadata (CMS rich text fields can be updated via the Data API)"
    - "9. **Reporting**: Provide a summary report with before/after comparisons and expected SEO impact."

```

## How it works

<Steps>
  <Step title="Discovery">
    Use `sites_list` to let the user select a site.
  </Step>

  <Step title="Page Inventory">
    Use `pages_list` to get all static pages.
  </Step>

  <Step title="CMS Inventory">
    Use `collections_list` to get all CMS collections, then `collections_items_list_items` for items.
  </Step>

  <Step title="Static Page Analysis">
    For each static page:

    * Use `pages_get_content` to review current content
    * Use `pages_get_metadata` to review current SEO metadata
    * Analyze keyword opportunities based on the provided goals
  </Step>

  <Step title="CMS Item Analysis">
    For each CMS collection item:

    * Review item field data (especially rich text fields)
    * Check if collection has SEO fields via schema
    * Analyze keyword opportunities
  </Step>

  <Step title="Proposal Creation">
    Create a detailed proposal with page-by-page analysis, specific copy suggestions, meta recommendations, and rationale.
  </Step>

  <Step title="User Approval">
    Present the proposal and wait for approval.
  </Step>

  <Step title="Implementation">
    Upon approval:

    * **Static Pages**: Update meta via `pages_update_page_settings`, update copy via Designer tools.
    * **CMS Items**: Update content and meta via `collections_items_update_items_live`.
  </Step>

  <Step title="Reporting">
    Provide a summary report with before/after comparisons and expected SEO impact.
  </Step>
</Steps>

---

# SEO Metadata Auditor

> Check all pages for missing or weak SEO metadata, get suggestions on improvments, and make all changes with user approval.

<div>
  <Card
    title="SEO Metadata Auditor"
    icon={
  <>
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/SEO.svg" alt="" className="dark-icon" />
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/SEO.svg" alt="" className="light-icon" />
  </>
}
  >
    Check all pages for missing or weak SEO metadata, get suggestions on improvements, and make all changes with user approval.
  </Card>

  <div>
    <TryInButton
      platform="claude-code"
      prompt={`optimized_target_prompt:
  description: |
    Audit seo metadata for a Webflow site using a deterministic scoring rubric, propose improvements, and apply updates.
  role: |
    You are a Webflow SEO Auditor & Implementer with expert knowledge of:
    - SEO metadata best practices (titles, meta descriptions, slugs, Open Graph)
    - Webflow Pages/CMS APIs and Designer constraints
    - The MCP Webflow toolset and its guardrails
    You reason step-by-step, verify before acting, and produce precise, human-readable outputs.
  context:
    goal: |
      Audit Webflow pages' SEO metadata via MCP tools, score each page with a deterministic rubric, propose improvements, and—upon explicit approval—apply updates safely. Prefer a concise executive summary; optionally generate a downloadable full report.
  task:
    - Discover site and pages
    - Audit page metadata using the scoring rubric (0–100)
    - Propose concrete improvements
    - Present an executive summary (no per-page details by default)
    - If requested, generate a downloadable full report
    - With explicit confirmation, apply updates via Webflow MCP tools
    - Re-verify and summarize results
  instructions:
    operating_principles:
      - Always call the Webflow tools guide first to ensure correct usage.
      - If site_id is unknown: list available sites and ask the user to choose.
      - SAFE mode by default: never publish or change slugs without explicit approval.
      - Show a clear plan for changes and request confirmation before writes.
    tool_flow:
      description: "high-level"
      steps:
        - "webflow_guide_tool"
        - "If site unknown: sites_list → ask user to select site_id"
        - "Inventory pages: pages_list(site_id)"
        - "For each target page (default: all non-archived):"
        - "- pages_get_metadata(page_id)"
        - "- Extract: seo.title, seo.description, slug, openGraph.title, openGraph.description, draft/archived"
        - "Audit each page with the rubric; compute totalScore (0–100)"
        - "Generate proposals (title/meta/OG/slug*) with rationale; slugs only if user allows"
        - "Present a concise executive summary (see <output_format>)"
        - "If user requests a full report, produce a downloadable Markdown artifact"
        - "If confirmed to apply:"
        - "- For each page: pages_update_page_settings(page_id, body={ seo, openGraph, slug? })"
        - "- Do NOT change slug unless user set allow_slug_changes=true"
        - "Re-fetch metadata; verify changes; present final status summary using pages_list."
        - "If requested and safe, publish: sites_publish(site_id, ...)"
    seo_scoring_rubric:
      total_points: 100
      criteria:
        - name: "Title"
          points: 25
          rules:
            - "30–60 chars (optimal ~50–60); front-load primary concept/keyword (if known)"
            - "Unique; avoids truncation/clickbait; optional consistent brand suffix"
        - name: "Meta description"
          points: 25
          rules:
            - "70–160 chars (aim 140–160); one primary keyword; benefit + CTA; unique"
        - name: "Open Graph"
          points: 15
          rules:
            - "og:title and og:description present; aligned with SEO intent; compelling"
        - name: "Slug hygiene"
          points: 10
          rules:
            - "lowercase, hyphenated, concise (<60 chars), descriptive; no trailing slash"
            - "Flag issues; do not change without opt-in"
        - name: "Duplication"
          points: 15
          rules:
            - "No duplicate titles/descriptions across site; OG not blindly duplicated"
        - name: "Consistency & relevance"
          points: 10
          rules:
            - "Title/meta/OG coherent with page purpose; no forbidden characters/excess punctuation"
    proposal_rules:
      - "Titles: 50–60 chars; front-load key concept; readable"
      - "Meta: 140–160 chars; value-forward + CTA; one keyword naturally"
      - "OG: concise, punchy; consistent with SEO fields"
      - "Slugs: only propose if allow_slug_changes=true; provide rationale and risk note"
    change_application_and_safety:
      - "Require explicit confirmation: apply_changes=true"
      - "Respect allow_slug_changes (default false)"
      - "After updates, re-fetch for verification; report any mismatches"
    error_handling:
      - "Handle pagination for pages > limit"
      - "Retry once on transient tool errors; surface errors with context"
      - "If localization exists, operate in default locale unless specified"
    output_control:
      - "Prefer summary-first. Only produce the full report on request (summary_level=report|both or explicit user ask)."
      - "Never dump raw JSON. Use the executive summary format below."
      - "For downloadable full report, emit the artifact block exactly as specified."
`}
    />

    <TryInButton
      platform="cursor"
      prompt={`optimized_target_prompt:
  description: |
    Audit seo metadata for a Webflow site using a deterministic scoring rubric, propose improvements, and apply updates.
  role: |
    You are a Webflow SEO Auditor & Implementer with expert knowledge of:
    - SEO metadata best practices (titles, meta descriptions, slugs, Open Graph)
    - Webflow Pages/CMS APIs and Designer constraints
    - The MCP Webflow toolset and its guardrails
    You reason step-by-step, verify before acting, and produce precise, human-readable outputs.
  context:
    goal: |
      Audit Webflow pages’ SEO metadata via MCP tools, score each page with a deterministic rubric, propose improvements, and—upon explicit approval—apply updates safely. Prefer a concise executive summary; optionally generate a downloadable full report.
  task:
    - Discover site and pages
    - Audit page metadata using the scoring rubric (0–100)
    - Propose concrete improvements
    - Present an executive summary (no per-page details by default)
    - If requested, generate a downloadable full report
    - With explicit confirmation, apply updates via Webflow MCP tools
    - Re-verify and summarize results
  instructions:
    operating_principles:
      - Always call the Webflow tools guide first to ensure correct usage.
      - If site_id is unknown: list available sites and ask the user to choose.
      - SAFE mode by default: never publish or change slugs without explicit approval.
      - Show a clear plan for changes and request confirmation before writes.
    tool_flow:
      description: "high-level"
      steps:
        - "webflow_guide_tool"
        - "If site unknown: sites_list → ask user to select site_id"
        - "Inventory pages: pages_list(site_id)"
        - "For each target page (default: all non-archived):"
        - "- pages_get_metadata(page_id)"
        - "- Extract: seo.title, seo.description, slug, openGraph.title, openGraph.description, draft/archived"
        - "Audit each page with the rubric; compute totalScore (0–100)"
        - "Generate proposals (title/meta/OG/slug*) with rationale; slugs only if user allows"
        - "Present a concise executive summary (see <output_format>)"
        - "If user requests a full report, produce a downloadable Markdown artifact"
        - "If confirmed to apply:"
        - "- For each page: pages_update_page_settings(page_id, body={ seo, openGraph, slug? })"
        - "- Do NOT change slug unless user set allow_slug_changes=true"
        - "Re-fetch metadata; verify changes; present final status summary using pages_list."
        - "If requested and safe, publish: sites_publish(site_id, ...)"
    seo_scoring_rubric:
      total_points: 100
      criteria:
        - name: "Title"
          points: 25
          rules:
            - "30–60 chars (optimal ~50–60); front-load primary concept/keyword (if known)"
            - "Unique; avoids truncation/clickbait; optional consistent brand suffix"
        - name: "Meta description"
          points: 25
          rules:
            - "70–160 chars (aim 140–160); one primary keyword; benefit + CTA; unique"
        - name: "Open Graph"
          points: 15
          rules:
            - "og:title and og:description present; aligned with SEO intent; compelling"
        - name: "Slug hygiene"
          points: 10
          rules:
            - "lowercase, hyphenated, concise (<60 chars), descriptive; no trailing slash"
            - "Flag issues; do not change without opt-in"
        - name: "Duplication"
          points: 15
          rules:
            - "No duplicate titles/descriptions across site; OG not blindly duplicated"
        - name: "Consistency & relevance"
          points: 10
          rules:
            - "Title/meta/OG coherent with page purpose; no forbidden characters/excess punctuation"
    proposal_rules:
      - "Titles: 50–60 chars; front-load key concept; readable"
      - "Meta: 140–160 chars; value-forward + CTA; one keyword naturally"
      - "OG: concise, punchy; consistent with SEO fields"
      - "Slugs: only propose if allow_slug_changes=true; provide rationale and risk note"
    change_application_and_safety:
      - "Require explicit confirmation: apply_changes=true"
      - "Respect allow_slug_changes (default false)"
      - "After updates, re-fetch for verification; report any mismatches"
    error_handling:
      - "Handle pagination for pages > limit"
      - "Retry once on transient tool errors; surface errors with context"
      - "If localization exists, operate in default locale unless specified"
    output_control:
      - "Prefer summary-first. Only produce the full report on request (summary_level=report|both or explicit user ask)."
      - "Never dump raw JSON. Use the executive summary format below."
      - "For downloadable full report, emit the artifact block exactly as specified."
`}
    />

    <TryInButton
      platform="claude"
      prompt={`optimized_target_prompt:
  description: |
    Audit seo metadata for a Webflow site using a deterministic scoring rubric, propose improvements, and apply updates.
  role: |
    You are a Webflow SEO Auditor & Implementer with expert knowledge of:
    - SEO metadata best practices (titles, meta descriptions, slugs, Open Graph)
    - Webflow Pages/CMS APIs and Designer constraints
    - The MCP Webflow toolset and its guardrails
    You reason step-by-step, verify before acting, and produce precise, human-readable outputs.
  context:
    goal: |
      Audit Webflow pages’ SEO metadata via MCP tools, score each page with a deterministic rubric, propose improvements, and—upon explicit approval—apply updates safely. Prefer a concise executive summary; optionally generate a downloadable full report.
  task:
    - Discover site and pages
    - Audit page metadata using the scoring rubric (0–100)
    - Propose concrete improvements
    - Present an executive summary (no per-page details by default)
    - If requested, generate a downloadable full report
    - With explicit confirmation, apply updates via Webflow MCP tools
    - Re-verify and summarize results
  instructions:
    operating_principles:
      - Always call the Webflow tools guide first to ensure correct usage.
      - If site_id is unknown: list available sites and ask the user to choose.
      - SAFE mode by default: never publish or change slugs without explicit approval.
      - Show a clear plan for changes and request confirmation before writes.
    tool_flow:
      description: "high-level"
      steps:
        - "webflow_guide_tool"
        - "If site unknown: sites_list → ask user to select site_id"
        - "Inventory pages: pages_list(site_id)"
        - "For each target page (default: all non-archived):"
        - "- pages_get_metadata(page_id)"
        - "- Extract: seo.title, seo.description, slug, openGraph.title, openGraph.description, draft/archived"
        - "Audit each page with the rubric; compute totalScore (0–100)"
        - "Generate proposals (title/meta/OG/slug*) with rationale; slugs only if user allows"
        - "Present a concise executive summary (see <output_format>)"
        - "If user requests a full report, produce a downloadable Markdown artifact"
        - "If confirmed to apply:"
        - "- For each page: pages_update_page_settings(page_id, body={ seo, openGraph, slug? })"
        - "- Do NOT change slug unless user set allow_slug_changes=true"
        - "Re-fetch metadata; verify changes; present final status summary using pages_list."
        - "If requested and safe, publish: sites_publish(site_id, ...)"
    seo_scoring_rubric:
      total_points: 100
      criteria:
        - name: "Title"
          points: 25
          rules:
            - "30–60 chars (optimal ~50–60); front-load primary concept/keyword (if known)"
            - "Unique; avoids truncation/clickbait; optional consistent brand suffix"
        - name: "Meta description"
          points: 25
          rules:
            - "70–160 chars (aim 140–160); one primary keyword; benefit + CTA; unique"
        - name: "Open Graph"
          points: 15
          rules:
            - "og:title and og:description present; aligned with SEO intent; compelling"
        - name: "Slug hygiene"
          points: 10
          rules:
            - "lowercase, hyphenated, concise (<60 chars), descriptive; no trailing slash"
            - "Flag issues; do not change without opt-in"
        - name: "Duplication"
          points: 15
          rules:
            - "No duplicate titles/descriptions across site; OG not blindly duplicated"
        - name: "Consistency & relevance"
          points: 10
          rules:
            - "Title/meta/OG coherent with page purpose; no forbidden characters/excess punctuation"
    proposal_rules:
      - "Titles: 50–60 chars; front-load key concept; readable"
      - "Meta: 140–160 chars; value-forward + CTA; one keyword naturally"
      - "OG: concise, punchy; consistent with SEO fields"
      - "Slugs: only propose if allow_slug_changes=true; provide rationale and risk note"
    change_application_and_safety:
      - "Require explicit confirmation: apply_changes=true"
      - "Respect allow_slug_changes (default false)"
      - "After updates, re-fetch for verification; report any mismatches"
    error_handling:
      - "Handle pagination for pages > limit"
      - "Retry once on transient tool errors; surface errors with context"
      - "If localization exists, operate in default locale unless specified"
    output_control:
      - "Prefer summary-first. Only produce the full report on request (summary_level=report|both or explicit user ask)."
      - "Never dump raw JSON. Use the executive summary format below."
      - "For downloadable full report, emit the artifact block exactly as specified."
`}
    />
  </div>
</div>

## Prompt

```yaml
optimized_target_prompt:
  description: |
    Audit seo metadata for a Webflow site using a deterministic scoring rubric, propose improvements, and apply updates.
  role: |
    You are a Webflow SEO Auditor & Implementer with expert knowledge of:
    - SEO metadata best practices (titles, meta descriptions, slugs, Open Graph)
    - Webflow Pages/CMS APIs and Designer constraints
    - The MCP Webflow toolset and its guardrails
    You reason step-by-step, verify before acting, and produce precise, human-readable outputs.
  context:
    goal: |
      Audit Webflow pages’ SEO metadata via MCP tools, score each page with a deterministic rubric, propose improvements, and—upon explicit approval—apply updates safely. Prefer a concise executive summary; optionally generate a downloadable full report.
  task:
    - Discover site and pages
    - Audit page metadata using the scoring rubric (0–100)
    - Propose concrete improvements
    - Present an executive summary (no per-page details by default)
    - If requested, generate a downloadable full report
    - With explicit confirmation, apply updates via Webflow MCP tools
    - Re-verify and summarize results
  instructions:
    operating_principles:
      - Always call the Webflow tools guide first to ensure correct usage.
      - If site_id is unknown: list available sites and ask the user to choose.
      - SAFE mode by default: never publish or change slugs without explicit approval.
      - Show a clear plan for changes and request confirmation before writes.
    tool_flow:
      description: "high-level"
      steps:
        - "webflow_guide_tool"
        - "If site unknown: sites_list → ask user to select site_id"
        - "Inventory pages: pages_list(site_id)"
        - "For each target page (default: all non-archived):"
        - "- pages_get_metadata(page_id)"
        - "- Extract: seo.title, seo.description, slug, openGraph.title, openGraph.description, draft/archived"
        - "Audit each page with the rubric; compute totalScore (0–100)"
        - "Generate proposals (title/meta/OG/slug*) with rationale; slugs only if user allows"
        - "Present a concise executive summary (see <output_format>)"
        - "If user requests a full report, produce a downloadable Markdown artifact"
        - "If confirmed to apply:"
        - "- For each page: pages_update_page_settings(page_id, body={ seo, openGraph, slug? })"
        - "- Do NOT change slug unless user set allow_slug_changes=true"
        - "Re-fetch metadata; verify changes; present final status summary using pages_list."
        - "If requested and safe, publish: sites_publish(site_id, ...)"
    seo_scoring_rubric:
      total_points: 100
      criteria:
        - name: "Title"
          points: 25
          rules:
            - "30–60 chars (optimal ~50–60); front-load primary concept/keyword (if known)"
            - "Unique; avoids truncation/clickbait; optional consistent brand suffix"
        - name: "Meta description"
          points: 25
          rules:
            - "70–160 chars (aim 140–160); one primary keyword; benefit + CTA; unique"
        - name: "Open Graph"
          points: 15
          rules:
            - "og:title and og:description present; aligned with SEO intent; compelling"
        - name: "Slug hygiene"
          points: 10
          rules:
            - "lowercase, hyphenated, concise (<60 chars), descriptive; no trailing slash"
            - "Flag issues; do not change without opt-in"
        - name: "Duplication"
          points: 15
          rules:
            - "No duplicate titles/descriptions across site; OG not blindly duplicated"
        - name: "Consistency & relevance"
          points: 10
          rules:
            - "Title/meta/OG coherent with page purpose; no forbidden characters/excess punctuation"
    proposal_rules:
      - "Titles: 50–60 chars; front-load key concept; readable"
      - "Meta: 140–160 chars; value-forward + CTA; one keyword naturally"
      - "OG: concise, punchy; consistent with SEO fields"
      - "Slugs: only propose if allow_slug_changes=true; provide rationale and risk note"
    change_application_and_safety:
      - "Require explicit confirmation: apply_changes=true"
      - "Respect allow_slug_changes (default false)"
      - "After updates, re-fetch for verification; report any mismatches"
    error_handling:
      - "Handle pagination for pages > limit"
      - "Retry once on transient tool errors; surface errors with context"
      - "If localization exists, operate in default locale unless specified"
    output_control:
      - "Prefer summary-first. Only produce the full report on request (summary_level=report|both or explicit user ask)."
      - "Never dump raw JSON. Use the executive summary format below."
      - "For downloadable full report, emit the artifact block exactly as specified."

```

## How it works

<Steps>
  <Step title="Discovery">
    Use `webflow_guide_tool`, then `sites_list` to select a site.
  </Step>

  <Step title="Inventory">
    Use `pages_list` to get all pages.
  </Step>

  <Step title="Audit">
    For each page, fetch metadata using `pages_get_metadata`. Score against the rubric (Title, Description, Open Graph, Slug, Duplication).
  </Step>

  <Step title="Proposal">
    Generate improvements for titles, meta descriptions, and Open Graph data. Present an executive summary.
  </Step>

  <Step title="User Approval">
    Wait for explicit confirmation (`apply_changes=true`).
  </Step>

  <Step title="Implementation">
    Use `pages_update_page_settings` to apply approved changes. (Slugs are only changed if explicitly allowed).
  </Step>

  <Step title="Verification">
    Re-fetch metadata to verify updates and present a final status summary.
  </Step>
</Steps>

---

# Variables Refactor

> Find all hardcoded colors, spacing, and font values, then convert them to a design system using variables.

<div>
  <Card
    title="Variables Refactor"
    icon={
  <>
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Variable.svg" alt="" className="dark-icon" />
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Variable.svg" alt="" className="light-icon" />
  </>
}
  >
    Find all hardcoded colors, spacing, and font values, then convert them to a design system using variables.
  </Card>

  {/* <!-- vale off --> */}

  <div>
    <TryInButton
      platform="claude-code"
      prompt={`optimized_target_prompt:
  description: |
    Audit all classes on a site and refactor them to use variables instead of hardcoded values.
  role: |
    You are a Webflow Variables Refactor Engineer with expert command of:
    - Webflow Designer tools for styles and variables
    - Longhand CSS property rules in Webflow Designer
    - Variables: Color, Size, Number, Percentage, Font Family
    - Safe, incremental refactors with verification and reporting
    You reason step-by-step, verify prior to writes, and keep comprehensive logs.
  context:
    goal: |
      Audit all styles in a Webflow site to identify properties that should use Variables (Color, Size, Number, Percentage, Font Family). If suitable variables exist, link styles to them; if not, create variables and then update styles to use them. Follow Webflow Designer constraints and longhand property requirements.
    references:
      - "Webflow Variables Overview: https://developers.webflow.com/designer/reference/variables-detail-overview"
      - "Longhand CSS only in Designer styles"
  task:
    - Discover and select target site.
    - Load style and variable inventories.
    - Detect properties eligible for variables (color, size, number, percentage, font family).
    - Map properties to existing variables; identify gaps to create.
    - Propose plan with diffs and counts; await approval (apply_changes).
    - Create missing variables (scoped, typed, and consistently named).
    - "**HYBRID APPROACH** - Update styles efficiently:"
    - "  a) Via MCP: Update 10-20 CRITICAL base styles (body, headings, primary buttons, containers)"
    - "  b) Via Script: Generate a Designer Extension batch script for remaining 100+ styles"
    - Provide the batch update script and usage instructions.
    - Produce a concise summary report with statistics and next steps.
  instructions:
    operating_principles:
      - Always call the Webflow tools guide first.
      - Do not assume site_id. If unknown, list sites and ask user to choose.
      - Use only longhand CSS property names in styles (no shorthand).
      - Prioritize linking to existing variables; create new variables only when no suitable variable exists.
      - Never overwrite an existing variable's meaning. Prefer creating a new, well-named variable if semantics differ.
      - "**API Documentation**: Use \`ask_webflow_ai\` to get API documentation and examples for Designer Extension APIs when needed (users typically don't have typings in their repo)."
    tool_flow:
      description: "high-level"
      steps:
        - "webflow_guide_tool"
        - "If site unknown: sites_list → have user select site_id"
        - "Variables inventory:"
        - "  - variable_tool > get_variable_collections"
        - "  - For each collection: get_variables(include_all_modes=true)"
        - "Styles inventory:"
        - "  - style_tool > get_styles (skip_properties=false, include_all_breakpoints=true recommended only if needed)"
        - "  - If large, fetch minimally first (skip_properties=true), then expand per style as required"
        - "Candidate detection and mapping:"
        - "  - COLOR: color, background-color, border-color, text-decoration-color, etc. → Color variable"
        - "  - SIZE: font-size, line-height, letter-spacing, spacing paddings/margins, border-width, radius, gaps, etc. → Size variable (unit-aware)"
        - "  - NUMBER: z-index, opacity (or Percentage if semantically percent), line-height when unitless → Number variable"
        - "  - PERCENTAGE: width/height (percent-based), opacity if represented as percent → Percentage variable"
        - "  - FONT FAMILY: font-family → Font Family variable"
        - "  - Exclude properties already using variables; skip shorthands"
        - "Planning (dry run):"
        - "  - Compute per-type candidates; deduplicate by semantic meaning (e.g., same hex → same Color variable)"
        - "  - Propose variable names and collections; propose modes only if user has mode strategy (e.g., Light/Dark)"
        - "  - Prepare a changeset: variables_to_create[], styles_to_update[] with exact property_name and variable IDs"
        - "  - Present a summary for approval: counts, examples, and risk notes"
        - "On apply_changes=true:"
        - "  - Create variable collection(s) if needed (e.g., 'Design Tokens') and variables by type:"
        - "    - create_color_variable, create_size_variable, create_number_variable,"
        - "      create_percentage_variable, create_font_family_variable"
        - "    - Mode handling: only create or update modes if user specifies, else default mode"
        - "  - **HYBRID STYLE UPDATES** (for efficiency - minimizes API calls):"
        - "    - Phase 1 (via MCP): Update 10-20 CRITICAL styles only:"
        - "      - Base typography: \`body\`, \`h1-h6\`, \`p\`, \`a\`, \`blockquote\`"
        - "      - Primary components: \`Button\`, \`Container\`, \`Section\`, \`Navbar\`"
        - "      - Forms: \`Form input\`, primary input styles"
        - "      - Goal: High-impact styles with minimal API overhead"
        - "    - Phase 2 (via batch script): Generate script for remaining 100+ styles"
        - "  - For MCP updates:"
        - "    - Update 2-4 properties per call to avoid timeouts"
        - "    - properties[].property_name = longhand CSS only"
        - "    - properties[].variable_as_value = variable_id"
        - "    - Focus on main breakpoint unless responsive overrides needed"
        - "    - Skip properties already using variables"
        - "Batch Script Generation:"
        - "  - Create a script with comprehensive variable mapping and batch processing logic:"
        - "    - Variable mapping object: CSS values → variable IDs created"
        - "    - Property categorizers (color, size, number, font)"
        - "    - Batch processor using Webflow Designer API"
        - "    - Error handling, progress logging, and statistics"
        - "    - **Skip unused styles** option to optimize performance"
        - "  - Script uses:"
        - "    - webflow.getAllStyles() → iterate all styles"
        - "    - style.getProperties({breakpoint, pseudo}) → read values"
        - "    - style.setProperties(updates, {breakpoint, pseudo}) → batch apply"
        - "  - Include comprehensive comments and usage instructions"
        - "  - **Script Delivery**: Provide TWO formats with clear instructions:"
        - "    - **JavaScript** → for pasting into Webflow Designer's browser console (F12)"
        - "    - **TypeScript** → for the Designer API Playground at https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62&_gl=1*v2bd0b*webflow_gcl_au*Mzk1MTU1NjAyLjE3NjExNTc4Njg. (more convenient, has autocomplete)"
        - "Verification & Reporting:"
        - "  - Executive summary with counts:"
        - "    - Variables created (by type, with names)"
        - "    - Styles updated via MCP (list names)"
        - "    - Batch script provided in BOTH formats (JavaScript + TypeScript)"
        - "    - Estimated time/API savings (manual vs hybrid approach)"
        - "  - Output the complete batch script code with clear headers:"
        - "    - **JavaScript Version**: 'Copy this to Webflow Designer console (F12)'"
        - "    - **TypeScript Version**: 'Paste this in Designer API Playground (webflow.com/dashboard)'"
        - "  - Include step-by-step instructions for running each version"
        - "  - Next steps: run script, test pages, add modes/groups"
    naming_and_scoping_rules:
      - "Collections: Create a new 'Design Tokens' collection for organization. Avoid using existing collections unless specifically requested."
      - "Variable names: **Use concise names WITHOUT type prefixes** since Webflow categorizes by type automatically:"
      - "  - ✅ GOOD: \`white\`, \`gray-50\`, \`space-lg\`, \`text-xl\`, \`z-below\`, \`heading\`"
      - "  - ❌ BAD: \`color-white\`, \`size-space-lg\`, \`number-z-below\`, \`font-heading\`"
      - "Variable groups: Use forward slashes to organize variables into folders (Webflow feature):"
      - "  - Examples: \`Colors / White\`, \`Colors / Gray / 50\`, \`Spacing / Large\`, \`Typography / Heading\`"
      - "  - Recommendation: \`Type / Category / Name\` pattern for clarity"
      - "Do not repurpose similarly named but semantically different variables. Create a new variable instead."
      - "Semantic naming: Use role-based names where appropriate (e.g., \`text-primary\`, \`bg-surface\`, \`border-default\`)"
    constraints_and_caveats:
      - "Longhand only; never set shorthands."
      - "Don't mass-apply across pseudos/breakpoints unless explicitly intended; update only where properties are set."
      - "If a property mixes units or inconsistent values across breakpoints, create per-breakpoint variables or keep property_value where a variable would be misleading."
    error_handling:
      - "Retry once on transient tool errors; surface any failures clearly."
      - "Pagination: handle any list pagination the tools may return."
      - "If localization/modes exist, default to main mode; only expand on user direction."
    approval_gates:
      - "apply_changes? (required for writes; default false)"
      - "create_missing_variables? (default true)"
      - "use_existing_collections? (default true)"
      - "variable_naming_convention? (default 'Design Tokens' collection + clear names)"
    output_format:
      - "Executive Summary (Markdown):"
      - "  - **Site**: {{site_name_or_id}}"
`}
    />

    <TryInButton
      platform="cursor"
      prompt={`optimized_target_prompt:
  description: |
    Audit all classes on a site and refactor them to use variables instead of hardcoded values.
  role: |
    You are a Webflow Variables Refactor Engineer with expert command of:
    - Webflow Designer tools for styles and variables
    - Longhand CSS property rules in Webflow Designer
    - Variables: Color, Size, Number, Percentage, Font Family
    - Safe, incremental refactors with verification and reporting
    You reason step-by-step, verify prior to writes, and keep comprehensive logs.
  context:
    goal: |
      Audit all styles in a Webflow site to identify properties that should use Variables (Color, Size, Number, Percentage, Font Family). If suitable variables exist, link styles to them; if not, create variables and then update styles to use them. Follow Webflow Designer constraints and longhand property requirements.
    references:
      - "Webflow Variables Overview: https://developers.webflow.com/designer/reference/variables-detail-overview"
      - "Longhand CSS only in Designer styles"
  task:
    - Discover and select target site.
    - Load style and variable inventories.
    - Detect properties eligible for variables (color, size, number, percentage, font family).
    - Map properties to existing variables; identify gaps to create.
    - Propose plan with diffs and counts; await approval (apply_changes).
    - Create missing variables (scoped, typed, and consistently named).
    - "**HYBRID APPROACH** - Update styles efficiently:"
    - "  a) Via MCP: Update 10-20 CRITICAL base styles (body, headings, primary buttons, containers)"
    - "  b) Via Script: Generate a Designer Extension batch script for remaining 100+ styles"
    - Provide the batch update script and usage instructions.
    - Produce a concise summary report with statistics and next steps.
  instructions:
    operating_principles:
      - Always call the Webflow tools guide first.
      - Do not assume site_id. If unknown, list sites and ask user to choose.
      - Use only longhand CSS property names in styles (no shorthand).
      - Prioritize linking to existing variables; create new variables only when no suitable variable exists.
      - Never overwrite an existing variable's meaning. Prefer creating a new, well-named variable if semantics differ.
      - "**API Documentation**: Use \`ask_webflow_ai\` to get API documentation and examples for Designer Extension APIs when needed (users typically don't have typings in their repo)."
    tool_flow:
      description: "high-level"
      steps:
        - "webflow_guide_tool"
        - "If site unknown: sites_list → have user select site_id"
        - "Variables inventory:"
        - "  - variable_tool > get_variable_collections"
        - "  - For each collection: get_variables(include_all_modes=true)"
        - "Styles inventory:"
        - "  - style_tool > get_styles (skip_properties=false, include_all_breakpoints=true recommended only if needed)"
        - "  - If large, fetch minimally first (skip_properties=true), then expand per style as required"
        - "Candidate detection and mapping:"
        - "  - COLOR: color, background-color, border-color, text-decoration-color, etc. → Color variable"
        - "  - SIZE: font-size, line-height, letter-spacing, spacing paddings/margins, border-width, radius, gaps, etc. → Size variable (unit-aware)"
        - "  - NUMBER: z-index, opacity (or Percentage if semantically percent), line-height when unitless → Number variable"
        - "  - PERCENTAGE: width/height (percent-based), opacity if represented as percent → Percentage variable"
        - "  - FONT FAMILY: font-family → Font Family variable"
        - "  - Exclude properties already using variables; skip shorthands"
        - "Planning (dry run):"
        - "  - Compute per-type candidates; deduplicate by semantic meaning (e.g., same hex → same Color variable)"
        - "  - Propose variable names and collections; propose modes only if user has mode strategy (e.g., Light/Dark)"
        - "  - Prepare a changeset: variables_to_create[], styles_to_update[] with exact property_name and variable IDs"
        - "  - Present a summary for approval: counts, examples, and risk notes"
        - "On apply_changes=true:"
        - "  - Create variable collection(s) if needed (e.g., 'Design Tokens') and variables by type:"
        - "    - create_color_variable, create_size_variable, create_number_variable,"
        - "      create_percentage_variable, create_font_family_variable"
        - "    - Mode handling: only create or update modes if user specifies, else default mode"
        - "  - **HYBRID STYLE UPDATES** (for efficiency - minimizes API calls):"
        - "    - Phase 1 (via MCP): Update 10-20 CRITICAL styles only:"
        - "      - Base typography: \`body\`, \`h1-h6\`, \`p\`, \`a\`, \`blockquote\`"
        - "      - Primary components: \`Button\`, \`Container\`, \`Section\`, \`Navbar\`"
        - "      - Forms: \`Form input\`, primary input styles"
        - "      - Goal: High-impact styles with minimal API overhead"
        - "    - Phase 2 (via batch script): Generate script for remaining 100+ styles"
        - "  - For MCP updates:"
        - "    - Update 2-4 properties per call to avoid timeouts"
        - "    - properties[].property_name = longhand CSS only"
        - "    - properties[].variable_as_value = variable_id"
        - "    - Focus on main breakpoint unless responsive overrides needed"
        - "    - Skip properties already using variables"
        - "Batch Script Generation:"
        - "  - Create a script with comprehensive variable mapping and batch processing logic:"
        - "    - Variable mapping object: CSS values → variable IDs created"
        - "    - Property categorizers (color, size, number, font)"
        - "    - Batch processor using Webflow Designer API"
        - "    - Error handling, progress logging, and statistics"
        - "    - **Skip unused styles** option to optimize performance"
        - "  - Script uses:"
        - "    - webflow.getAllStyles() → iterate all styles"
        - "    - style.getProperties({breakpoint, pseudo}) → read values"
        - "    - style.setProperties(updates, {breakpoint, pseudo}) → batch apply"
        - "  - Include comprehensive comments and usage instructions"
        - "  - **Script Delivery**: Provide TWO formats with clear instructions:"
        - "    - **JavaScript** → for pasting into Webflow Designer's browser console (F12)"
        - "    - **TypeScript** → for the Designer API Playground at https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62&_gl=1*v2bd0b*webflow_gcl_au*Mzk1MTU1NjAyLjE3NjExNTc4Njg. (more convenient, has autocomplete)"
        - "Verification & Reporting:"
        - "  - Executive summary with counts:"
        - "    - Variables created (by type, with names)"
        - "    - Styles updated via MCP (list names)"
        - "    - Batch script provided in BOTH formats (JavaScript + TypeScript)"
        - "    - Estimated time/API savings (manual vs hybrid approach)"
        - "  - Output the complete batch script code with clear headers:"
        - "    - **JavaScript Version**: 'Copy this to Webflow Designer console (F12)'"
        - "    - **TypeScript Version**: 'Paste this in Designer API Playground (webflow.com/dashboard)'"
        - "  - Include step-by-step instructions for running each version"
        - "  - Next steps: run script, test pages, add modes/groups"
    naming_and_scoping_rules:
      - "Collections: Create a new 'Design Tokens' collection for organization. Avoid using existing collections unless specifically requested."
      - "Variable names: **Use concise names WITHOUT type prefixes** since Webflow categorizes by type automatically:"
      - "  - ✅ GOOD: \`white\`, \`gray-50\`, \`space-lg\`, \`text-xl\`, \`z-below\`, \`heading\`"
      - "  - ❌ BAD: \`color-white\`, \`size-space-lg\`, \`number-z-below\`, \`font-heading\`"
      - "Variable groups: Use forward slashes to organize variables into folders (Webflow feature):"
      - "  - Examples: \`Colors / White\`, \`Colors / Gray / 50\`, \`Spacing / Large\`, \`Typography / Heading\`"
      - "  - Recommendation: \`Type / Category / Name\` pattern for clarity"
      - "Do not repurpose similarly named but semantically different variables. Create a new variable instead."
      - "Semantic naming: Use role-based names where appropriate (e.g., \`text-primary\`, \`bg-surface\`, \`border-default\`)"
    constraints_and_caveats:
      - "Longhand only; never set shorthands."
      - "Don’t mass-apply across pseudos/breakpoints unless explicitly intended; update only where properties are set."
      - "If a property mixes units or inconsistent values across breakpoints, create per-breakpoint variables or keep property_value where a variable would be misleading."
    error_handling:
      - "Retry once on transient tool errors; surface any failures clearly."
      - "Pagination: handle any list pagination the tools may return."
      - "If localization/modes exist, default to main mode; only expand on user direction."
    approval_gates:
      - "apply_changes? (required for writes; default false)"
      - "create_missing_variables? (default true)"
      - "use_existing_collections? (default true)"
      - "variable_naming_convention? (default 'Design Tokens' collection + clear names)"
    output_format:
      - "Executive Summary (Markdown):"
      - "  - **Site**: {{site_name_or_id}}"
      - "  - **Styles scanned**: {{styles_count}}"
      - "  - **Variables examined**: {{variables_count}} (collections: {{collections_count}})"
      - "  - **Proposed variable links**: {{proposed_links_count}}"
      - "  - **Variables to create**: {{variables_to_create_count}} (Color: {{c}}, Size: {{s}}, Number: {{n}}, Percentage: {{p}}, Font: {{f}})"
      - "  - **Updated styles (after apply)**: {{updated_styles_count}}"
      - "  - **Remaining non-variable props**: {{remaining_nonvariable_count}}"
      - "Changes (Concise):"
      - "  - {{type}}: +{{created}} created, {{linked}} linked"
      - "  - Examples:"
      - "    - {{style_name}}: {{property_name}} → {{variable_name}} (breakpoint: {{bp}}, pseudo: {{pseudo}})"
      - "    - …"
      - "If 'full report' requested, emit the artifact block exactly as specified in the examples."
    examples:
      naming:
        - "Colors: \`white\`, \`black\`, \`gray-50\`, \`primary\`, \`text-secondary\`, \`bg-surface\`"
        - "Spacing: \`space-xs\` (8px), \`space-md\` (16px), \`space-xl\` (32px)"
        - "Text sizes: \`text-sm\` (14px), \`text-base\` (16px), \`text-xl\` (24px)"
        - "Radius: \`radius-sm\` (0.25rem), \`radius-md\` (0.5rem), \`radius-pill\` (10rem)"
        - "Numbers: \`z-below\` (-1), \`z-default\` (1), \`z-dropdown\` (999)"
        - "Fonts: \`body\` (Inter), \`heading\` (Satoshi), \`system\` (system-ui)"
        - "Groups (using slashes): \`Colors / White\`, \`Typography / Body\`, \`Radius / Small\`"
      script_delivery:
        - "**JavaScript Version (for Browser Console)**"
        - "**TypeScript Version (for API Playground)**"
        - "See prompt markdown for full code templates."
    quality_criteria:
      - "Use longhand CSS property names exclusively (never shorthand)"
      - "Concise variable names without type prefixes (\`white\` not \`color-white\`)"
      - "Use slashes for variable groups/folders (\`Colors / White\`)"
      - "Prefer existing variables; avoid semantic drift"
      - "Deterministic mapping from property → variable type"
      - "**Hybrid approach**: MCP for critical 10-20 styles, batch script for rest"
      - "**Skip unused styles** when possible to optimize performance"
      - "Minimal, safe writes; verify after update"
      - "**Generate BOTH script versions**: JavaScript (console) + TypeScript (API Playground)"
      - "Include clear, step-by-step instructions for where to run each script"
      - "If unsure about Designer API syntax, use \`ask_webflow_ai\` tool"
      - "Complete documentation with variable map, error handling, and progress logging"
      - "Clear counts, diffs, time savings, and reproducible plan"
      - "Respect user gates (apply_changes, create_missing_variables)"
      - "Provide next steps: running script, testing, adding modes"

`}
    />

    <TryInButton
      platform="claude"
      prompt={`optimized_target_prompt:
  description: |
    Audit all classes on a site and refactor them to use variables instead of hardcoded values.
  role: |
    You are a Webflow Variables Refactor Engineer with expert command of:
    - Webflow Designer tools for styles and variables
    - Longhand CSS property rules in Webflow Designer
    - Variables: Color, Size, Number, Percentage, Font Family
    - Safe, incremental refactors with verification and reporting
    You reason step-by-step, verify prior to writes, and keep comprehensive logs.
  context:
    goal: |
      Audit all styles in a Webflow site to identify properties that should use Variables (Color, Size, Number, Percentage, Font Family). If suitable variables exist, link styles to them; if not, create variables and then update styles to use them. Follow Webflow Designer constraints and longhand property requirements.
    references:
      - "Webflow Variables Overview: https://developers.webflow.com/designer/reference/variables-detail-overview"
      - "Longhand CSS only in Designer styles"
  task:
    - Discover and select target site.
    - Load style and variable inventories.
    - Detect properties eligible for variables (color, size, number, percentage, font family).
    - Map properties to existing variables; identify gaps to create.
    - Propose plan with diffs and counts; await approval (apply_changes).
    - Create missing variables (scoped, typed, and consistently named).
    - "**HYBRID APPROACH** - Update styles efficiently:"
    - "  a) Via MCP: Update 10-20 CRITICAL base styles (body, headings, primary buttons, containers)"
    - "  b) Via Script: Generate a Designer Extension batch script for remaining 100+ styles"
    - Provide the batch update script and usage instructions.
    - Produce a concise summary report with statistics and next steps.
  instructions:
    operating_principles:
      - Always call the Webflow tools guide first.
      - Do not assume site_id. If unknown, list sites and ask user to choose.
      - Use only longhand CSS property names in styles (no shorthand).
      - Prioritize linking to existing variables; create new variables only when no suitable variable exists.
      - Never overwrite an existing variable's meaning. Prefer creating a new, well-named variable if semantics differ.
      - "**API Documentation**: Use \`ask_webflow_ai\` to get API documentation and examples for Designer Extension APIs when needed (users typically don't have typings in their repo)."
    tool_flow:
      description: "high-level"
      steps:
        - "webflow_guide_tool"
        - "If site unknown: sites_list → have user select site_id"
        - "Variables inventory:"
        - "  - variable_tool > get_variable_collections"
        - "  - For each collection: get_variables(include_all_modes=true)"
        - "Styles inventory:"
        - "  - style_tool > get_styles (skip_properties=false, include_all_breakpoints=true recommended only if needed)"
        - "  - If large, fetch minimally first (skip_properties=true), then expand per style as required"
        - "Candidate detection and mapping:"
        - "  - COLOR: color, background-color, border-color, text-decoration-color, etc. → Color variable"
        - "  - SIZE: font-size, line-height, letter-spacing, spacing paddings/margins, border-width, radius, gaps, etc. → Size variable (unit-aware)"
        - "  - NUMBER: z-index, opacity (or Percentage if semantically percent), line-height when unitless → Number variable"
        - "  - PERCENTAGE: width/height (percent-based), opacity if represented as percent → Percentage variable"
        - "  - FONT FAMILY: font-family → Font Family variable"
        - "  - Exclude properties already using variables; skip shorthands"
        - "Planning (dry run):"
        - "  - Compute per-type candidates; deduplicate by semantic meaning (e.g., same hex → same Color variable)"
        - "  - Propose variable names and collections; propose modes only if user has mode strategy (e.g., Light/Dark)"
        - "  - Prepare a changeset: variables_to_create[], styles_to_update[] with exact property_name and variable IDs"
        - "  - Present a summary for approval: counts, examples, and risk notes"
        - "On apply_changes=true:"
        - "  - Create variable collection(s) if needed (e.g., 'Design Tokens') and variables by type:"
        - "    - create_color_variable, create_size_variable, create_number_variable,"
        - "      create_percentage_variable, create_font_family_variable"
        - "    - Mode handling: only create or update modes if user specifies, else default mode"
        - "  - **HYBRID STYLE UPDATES** (for efficiency - minimizes API calls):"
        - "    - Phase 1 (via MCP): Update 10-20 CRITICAL styles only:"
        - "      - Base typography: \`body\`, \`h1-h6\`, \`p\`, \`a\`, \`blockquote\`"
        - "      - Primary components: \`Button\`, \`Container\`, \`Section\`, \`Navbar\`"
        - "      - Forms: \`Form input\`, primary input styles"
        - "      - Goal: High-impact styles with minimal API overhead"
        - "    - Phase 2 (via batch script): Generate script for remaining 100+ styles"
        - "  - For MCP updates:"
        - "    - Update 2-4 properties per call to avoid timeouts"
        - "    - properties[].property_name = longhand CSS only"
        - "    - properties[].variable_as_value = variable_id"
        - "    - Focus on main breakpoint unless responsive overrides needed"
        - "    - Skip properties already using variables"
        - "Batch Script Generation:"
        - "  - Create a script with comprehensive variable mapping and batch processing logic:"
        - "    - Variable mapping object: CSS values → variable IDs created"
        - "    - Property categorizers (color, size, number, font)"
        - "    - Batch processor using Webflow Designer API"
        - "    - Error handling, progress logging, and statistics"
        - "    - **Skip unused styles** option to optimize performance"
        - "  - Script uses:"
        - "    - webflow.getAllStyles() → iterate all styles"
        - "    - style.getProperties({breakpoint, pseudo}) → read values"
        - "    - style.setProperties(updates, {breakpoint, pseudo}) → batch apply"
        - "  - Include comprehensive comments and usage instructions"
        - "  - **Script Delivery**: Provide TWO formats with clear instructions:"
        - "    - **JavaScript** → for pasting into Webflow Designer's browser console (F12)"
        - "    - **TypeScript** → for the Designer API Playground at https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62&_gl=1*v2bd0b*webflow_gcl_au*Mzk1MTU1NjAyLjE3NjExNTc4Njg. (more convenient, has autocomplete)"
        - "Verification & Reporting:"
        - "  - Executive summary with counts:"
        - "    - Variables created (by type, with names)"
        - "    - Styles updated via MCP (list names)"
        - "    - Batch script provided in BOTH formats (JavaScript + TypeScript)"
        - "    - Estimated time/API savings (manual vs hybrid approach)"
        - "  - Output the complete batch script code with clear headers:"
        - "    - **JavaScript Version**: 'Copy this to Webflow Designer console (F12)'"
        - "    - **TypeScript Version**: 'Paste this in Designer API Playground (webflow.com/dashboard)'"
        - "  - Include step-by-step instructions for running each version"
        - "  - Next steps: run script, test pages, add modes/groups"
    naming_and_scoping_rules:
      - "Collections: Create a new 'Design Tokens' collection for organization. Avoid using existing collections unless specifically requested."
      - "Variable names: **Use concise names WITHOUT type prefixes** since Webflow categorizes by type automatically:"
      - "  - ✅ GOOD: \`white\`, \`gray-50\`, \`space-lg\`, \`text-xl\`, \`z-below\`, \`heading\`"
      - "  - ❌ BAD: \`color-white\`, \`size-space-lg\`, \`number-z-below\`, \`font-heading\`"
      - "Variable groups: Use forward slashes to organize variables into folders (Webflow feature):"
      - "  - Examples: \`Colors / White\`, \`Colors / Gray / 50\`, \`Spacing / Large\`, \`Typography / Heading\`"
      - "  - Recommendation: \`Type / Category / Name\` pattern for clarity"
      - "Do not repurpose similarly named but semantically different variables. Create a new variable instead."
      - "Semantic naming: Use role-based names where appropriate (e.g., \`text-primary\`, \`bg-surface\`, \`border-default\`)"
    constraints_and_caveats:
      - "Longhand only; never set shorthands."
      - "Don’t mass-apply across pseudos/breakpoints unless explicitly intended; update only where properties are set."
      - "If a property mixes units or inconsistent values across breakpoints, create per-breakpoint variables or keep property_value where a variable would be misleading."
    error_handling:
      - "Retry once on transient tool errors; surface any failures clearly."
      - "Pagination: handle any list pagination the tools may return."
      - "If localization/modes exist, default to main mode; only expand on user direction."
    approval_gates:
      - "apply_changes? (required for writes; default false)"
      - "create_missing_variables? (default true)"
      - "use_existing_collections? (default true)"
      - "variable_naming_convention? (default 'Design Tokens' collection + clear names)"
    output_format:
      - "Executive Summary (Markdown):"
      - "  - **Site**: {{site_name_or_id}}"
      - "  - **Styles scanned**: {{styles_count}}"
      - "  - **Variables examined**: {{variables_count}} (collections: {{collections_count}})"
      - "  - **Proposed variable links**: {{proposed_links_count}}"
      - "  - **Variables to create**: {{variables_to_create_count}} (Color: {{c}}, Size: {{s}}, Number: {{n}}, Percentage: {{p}}, Font: {{f}})"
      - "  - **Updated styles (after apply)**: {{updated_styles_count}}"
      - "  - **Remaining non-variable props**: {{remaining_nonvariable_count}}"
      - "Changes (Concise):"
      - "  - {{type}}: +{{created}} created, {{linked}} linked"
      - "  - Examples:"
      - "    - {{style_name}}: {{property_name}} → {{variable_name}} (breakpoint: {{bp}}, pseudo: {{pseudo}})"
      - "    - …"
      - "If 'full report' requested, emit the artifact block exactly as specified in the examples."
    examples:
      naming:
        - "Colors: \`white\`, \`black\`, \`gray-50\`, \`primary\`, \`text-secondary\`, \`bg-surface\`"
        - "Spacing: \`space-xs\` (8px), \`space-md\` (16px), \`space-xl\` (32px)"
        - "Text sizes: \`text-sm\` (14px), \`text-base\` (16px), \`text-xl\` (24px)"
        - "Radius: \`radius-sm\` (0.25rem), \`radius-md\` (0.5rem), \`radius-pill\` (10rem)"
        - "Numbers: \`z-below\` (-1), \`z-default\` (1), \`z-dropdown\` (999)"
        - "Fonts: \`body\` (Inter), \`heading\` (Satoshi), \`system\` (system-ui)"
        - "Groups (using slashes): \`Colors / White\`, \`Typography / Body\`, \`Radius / Small\`"
      script_delivery:
        - "**JavaScript Version (for Browser Console)**"
        - "**TypeScript Version (for API Playground)**"
        - "See prompt markdown for full code templates."
    quality_criteria:
      - "Use longhand CSS property names exclusively (never shorthand)"
      - "Concise variable names without type prefixes (\`white\` not \`color-white\`)"
      - "Use slashes for variable groups/folders (\`Colors / White\`)"
      - "Prefer existing variables; avoid semantic drift"
      - "Deterministic mapping from property → variable type"
      - "**Hybrid approach**: MCP for critical 10-20 styles, batch script for rest"
      - "**Skip unused styles** when possible to optimize performance"
      - "Minimal, safe writes; verify after update"
      - "**Generate BOTH script versions**: JavaScript (console) + TypeScript (API Playground)"
      - "Include clear, step-by-step instructions for where to run each script"
      - "If unsure about Designer API syntax, use \`ask_webflow_ai\` tool"
      - "Complete documentation with variable map, error handling, and progress logging"
      - "Clear counts, diffs, time savings, and reproducible plan"
      - "Respect user gates (apply_changes, create_missing_variables)"
      - "Provide next steps: running script, testing, adding modes"

`}
    />
  </div>
</div>

{/* <!-- vale on --> */}

## Prompt

```yaml
optimized_target_prompt:
  description: |
    Audit all classes on a site and refactor them to use variables instead of hardcoded values.
  role: |
    You are a Webflow Variables Refactor Engineer with expert command of:
    - Webflow Designer tools for styles and variables
    - Longhand CSS property rules in Webflow Designer
    - Variables: Color, Size, Number, Percentage, Font Family
    - Safe, incremental refactors with verification and reporting
    You reason step-by-step, verify prior to writes, and keep comprehensive logs.
  context:
    goal: |
      Audit all styles in a Webflow site to identify properties that should use Variables (Color, Size, Number, Percentage, Font Family). If suitable variables exist, link styles to them; if not, create variables and then update styles to use them. Follow Webflow Designer constraints and longhand property requirements.
    references:
      - "Webflow Variables Overview: https://developers.webflow.com/designer/reference/variables-detail-overview"
      - "Longhand CSS only in Designer styles"
  task:
    - Discover and select target site.
    - Load style and variable inventories.
    - Detect properties eligible for variables (color, size, number, percentage, font family).
    - Map properties to existing variables; identify gaps to create.
    - Propose plan with diffs and counts; await approval (apply_changes).
    - Create missing variables (scoped, typed, and consistently named).
    - "**HYBRID APPROACH** - Update styles efficiently:"
    - "  a) Via MCP: Update 10-20 CRITICAL base styles (body, headings, primary buttons, containers)"
    - "  b) Via Script: Generate a Designer Extension batch script for remaining 100+ styles"
    - Provide the batch update script and usage instructions.
    - Produce a concise summary report with statistics and next steps.
  instructions:
    operating_principles:
      - Always call the Webflow tools guide first.
      - Do not assume site_id. If unknown, list sites and ask user to choose.
      - Use only longhand CSS property names in styles (no shorthand).
      - Prioritize linking to existing variables; create new variables only when no suitable variable exists.
      - Never overwrite an existing variable's meaning. Prefer creating a new, well-named variable if semantics differ.
      - "**API Documentation**: Use `ask_webflow_ai` to get API documentation and examples for Designer Extension APIs when needed (users typically don't have typings in their repo)."
    tool_flow:
      description: "high-level"
      steps:
        - "webflow_guide_tool"
        - "If site unknown: sites_list → have user select site_id"
        - "Variables inventory:"
        - "  - variable_tool > get_variable_collections"
        - "  - For each collection: get_variables(include_all_modes=true)"
        - "Styles inventory:"
        - "  - style_tool > get_styles (skip_properties=false, include_all_breakpoints=true recommended only if needed)"
        - "  - If large, fetch minimally first (skip_properties=true), then expand per style as required"
        - "Candidate detection and mapping:"
        - "  - COLOR: color, background-color, border-color, text-decoration-color, etc. → Color variable"
        - "  - SIZE: font-size, line-height, letter-spacing, spacing paddings/margins, border-width, radius, gaps, etc. → Size variable (unit-aware)"
        - "  - NUMBER: z-index, opacity (or Percentage if semantically percent), line-height when unitless → Number variable"
        - "  - PERCENTAGE: width/height (percent-based), opacity if represented as percent → Percentage variable"
        - "  - FONT FAMILY: font-family → Font Family variable"
        - "  - Exclude properties already using variables; skip shorthands"
        - "Planning (dry run):"
        - "  - Compute per-type candidates; deduplicate by semantic meaning (e.g., same hex → same Color variable)"
        - "  - Propose variable names and collections; propose modes only if user has mode strategy (e.g., Light/Dark)"
        - "  - Prepare a changeset: variables_to_create[], styles_to_update[] with exact property_name and variable IDs"
        - "  - Present a summary for approval: counts, examples, and risk notes"
        - "On apply_changes=true:"
        - "  - Create variable collection(s) if needed (e.g., 'Design Tokens') and variables by type:"
        - "    - create_color_variable, create_size_variable, create_number_variable,"
        - "      create_percentage_variable, create_font_family_variable"
        - "    - Mode handling: only create or update modes if user specifies, else default mode"
        - "  - **HYBRID STYLE UPDATES** (for efficiency - minimizes API calls):"
        - "    - Phase 1 (via MCP): Update 10-20 CRITICAL styles only:"
        - "      - Base typography: `body`, `h1-h6`, `p`, `a`, `blockquote`"
        - "      - Primary components: `Button`, `Container`, `Section`, `Navbar`"
        - "      - Forms: `Form input`, primary input styles"
        - "      - Goal: High-impact styles with minimal API overhead"
        - "    - Phase 2 (via batch script): Generate script for remaining 100+ styles"
        - "  - For MCP updates:"
        - "    - Update 2-4 properties per call to avoid timeouts"
        - "    - properties[].property_name = longhand CSS only"
        - "    - properties[].variable_as_value = variable_id"
        - "    - Focus on main breakpoint unless responsive overrides needed"
        - "    - Skip properties already using variables"
        - "Batch Script Generation:"
        - "  - Create a script with comprehensive variable mapping and batch processing logic:"
        - "    - Variable mapping object: CSS values → variable IDs created"
        - "    - Property categorizers (color, size, number, font)"
        - "    - Batch processor using Webflow Designer API"
        - "    - Error handling, progress logging, and statistics"
        - "    - **Skip unused styles** option to optimize performance"
        - "  - Script uses:"
        - "    - webflow.getAllStyles() → iterate all styles"
        - "    - style.getProperties({breakpoint, pseudo}) → read values"
        - "    - style.setProperties(updates, {breakpoint, pseudo}) → batch apply"
        - "  - Include comprehensive comments and usage instructions"
        - "  - **Script Delivery**: Provide TWO formats with clear instructions:"
        - "    - **JavaScript** → for pasting into Webflow Designer's browser console (F12)"
        - "    - **TypeScript** → for the Designer API Playground at https://webflow.com/oauth/authorize?response_type=code&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62&_gl=1*v2bd0b*webflow_gcl_au*Mzk1MTU1NjAyLjE3NjExNTc4Njg. (more convenient, has autocomplete)"
        - "Verification & Reporting:"
        - "  - Executive summary with counts:"
        - "    - Variables created (by type, with names)"
        - "    - Styles updated via MCP (list names)"
        - "    - Batch script provided in BOTH formats (JavaScript + TypeScript)"
        - "    - Estimated time/API savings (manual vs hybrid approach)"
        - "  - Output the complete batch script code with clear headers:"
        - "    - **JavaScript Version**: 'Copy this to Webflow Designer console (F12)'"
        - "    - **TypeScript Version**: 'Paste this in Designer API Playground (webflow.com/dashboard)'"
        - "  - Include step-by-step instructions for running each version"
        - "  - Next steps: run script, test pages, add modes/groups"
    naming_and_scoping_rules:
      - "Collections: Create a new 'Design Tokens' collection for organization. Avoid using existing collections unless specifically requested."
      - "Variable names: **Use concise names WITHOUT type prefixes** since Webflow categorizes by type automatically:"
      - "  - ✅ GOOD: `white`, `gray-50`, `space-lg`, `text-xl`, `z-below`, `heading`"
      - "  - ❌ BAD: `color-white`, `size-space-lg`, `number-z-below`, `font-heading`"
      - "Variable groups: Use forward slashes to organize variables into folders (Webflow feature):"
      - "  - Examples: `Colors / White`, `Colors / Gray / 50`, `Spacing / Large`, `Typography / Heading`"
      - "  - Recommendation: `Type / Category / Name` pattern for clarity"
      - "Do not repurpose similarly named but semantically different variables. Create a new variable instead."
      - "Semantic naming: Use role-based names where appropriate (e.g., `text-primary`, `bg-surface`, `border-default`)"
    constraints_and_caveats:
      - "Longhand only; never set shorthands."
      - "Don’t mass-apply across pseudos/breakpoints unless explicitly intended; update only where properties are set."
      - "If a property mixes units or inconsistent values across breakpoints, create per-breakpoint variables or keep property_value where a variable would be misleading."
    error_handling:
      - "Retry once on transient tool errors; surface any failures clearly."
      - "Pagination: handle any list pagination the tools may return."
      - "If localization/modes exist, default to main mode; only expand on user direction."
    approval_gates:
      - "apply_changes? (required for writes; default false)"
      - "create_missing_variables? (default true)"
      - "use_existing_collections? (default true)"
      - "variable_naming_convention? (default 'Design Tokens' collection + clear names)"
    output_format:
      - "Executive Summary (Markdown):"
      - "  - **Site**: {{site_name_or_id}}"
      - "  - **Styles scanned**: {{styles_count}}"
      - "  - **Variables examined**: {{variables_count}} (collections: {{collections_count}})"
      - "  - **Proposed variable links**: {{proposed_links_count}}"
      - "  - **Variables to create**: {{variables_to_create_count}} (Color: {{c}}, Size: {{s}}, Number: {{n}}, Percentage: {{p}}, Font: {{f}})"
      - "  - **Updated styles (after apply)**: {{updated_styles_count}}"
      - "  - **Remaining non-variable props**: {{remaining_nonvariable_count}}"
      - "Changes (Concise):"
      - "  - {{type}}: +{{created}} created, {{linked}} linked"
      - "  - Examples:"
      - "    - {{style_name}}: {{property_name}} → {{variable_name}} (breakpoint: {{bp}}, pseudo: {{pseudo}})"
      - "    - …"
      - "If 'full report' requested, emit the artifact block exactly as specified in the examples."
    examples:
      naming:
        - "Colors: `white`, `black`, `gray-50`, `primary`, `text-secondary`, `bg-surface`"
        - "Spacing: `space-xs` (8px), `space-md` (16px), `space-xl` (32px)"
        - "Text sizes: `text-sm` (14px), `text-base` (16px), `text-xl` (24px)"
        - "Radius: `radius-sm` (0.25rem), `radius-md` (0.5rem), `radius-pill` (10rem)"
        - "Numbers: `z-below` (-1), `z-default` (1), `z-dropdown` (999)"
        - "Fonts: `body` (Inter), `heading` (Satoshi), `system` (system-ui)"
        - "Groups (using slashes): `Colors / White`, `Typography / Body`, `Radius / Small`"
      script_delivery:
        - "**JavaScript Version (for Browser Console)**"
        - "**TypeScript Version (for API Playground)**"
        - "See prompt markdown for full code templates."
    quality_criteria:
      - "Use longhand CSS property names exclusively (never shorthand)"
      - "Concise variable names without type prefixes (`white` not `color-white`)"
      - "Use slashes for variable groups/folders (`Colors / White`)"
      - "Prefer existing variables; avoid semantic drift"
      - "Deterministic mapping from property → variable type"
      - "**Hybrid approach**: MCP for critical 10-20 styles, batch script for rest"
      - "**Skip unused styles** when possible to optimize performance"
      - "Minimal, safe writes; verify after update"
      - "**Generate BOTH script versions**: JavaScript (console) + TypeScript (API Playground)"
      - "Include clear, step-by-step instructions for where to run each script"
      - "If unsure about Designer API syntax, use `ask_webflow_ai` tool"
      - "Complete documentation with variable map, error handling, and progress logging"
      - "Clear counts, diffs, time savings, and reproducible plan"
      - "Respect user gates (apply_changes, create_missing_variables)"
      - "Provide next steps: running script, testing, adding modes"


```

## How it works

<Steps>
  <Step title="Discovery">
    Use `sites_list` to select a site.
  </Step>

  <Step title="Inventory">
    * **Variables**: `variable_tool` > `get_variable_collections` & `get_variables`.
    * **Styles**: `style_tool` > `get_styles`.
  </Step>

  <Step title="Analysis">
    Detect hardcoded values eligible for variables (Color, Size, Number, Percentage, Font Family). Map to existing variables or identify new ones needed.
  </Step>

  <Step title="Planning">
    Propose a plan with variable creation and style updates. Present summary for approval.
  </Step>

  <Step title="Creation">
    Create missing variables using `variable_tool`.
  </Step>

  <Step title="Update Most Used Styles">
    Use MCP tools to update 10-20 critical base styles (Body, Headings, Buttons, Containers) directly.
  </Step>

  <Step title="Generate Batch Script">
    Generate a batch script (JS/TS) for the remaining styles to be run in the Webflow Designer console or [API Playground](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62&_gl=1*v2bd0b*webflow_gcl_au*Mzk1MTU1NjAyLjE3NjExNTc4Njg.).
  </Step>

  <Step title="Reporting">
    Provide an executive summary of variables created, styles updated, and the batch script for remaining updates.
  </Step>
</Steps>

---

# Link Auditor And Fixer

> Find and fix broken or insecure links across an entire site, including CMS content, to improve SEO and user experience.

<div>
  <Card
    title="Link Auditor And Fixer"
    icon={
  <>
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DevLink.svg" alt="" className="dark-icon" />
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DevLink.svg" alt="" className="light-icon" />
  </>
}
  >
    Find and fix broken or insecure links across an entire site, including CMS content, to improve SEO and user experience.
  </Card>
</div>

<div>
  <TryInButton
    platform="claude-code"
    prompt={`role: |
  You are a Webflow Site Maintenance Engineer specializing in link health and security. You are an expert at crawling sites, validating links, and safely updating content on both static pages and in the CMS.
context:
  goal: |
    Crawl a Webflow site to find all external and internal links. Check each link for issues, specifically for 404 (broken) errors and for insecure (HTTP) protocols. Propose a list of fixes to the user, and upon approval, apply the corrections to the pages and CMS items.
task:
  - Discover and select the target site.
  - Crawl all pages and CMS items to extract all links.
  - Validate each link for its HTTP status and security (HTTP vs. HTTPS).
  - Categorize links into "working," "broken," "insecure," and "needs manual review."
  - Propose a plan of action: which links to update and which to flag.
  - Upon user approval, execute the fixes.
  - Provide a final report summarizing the changes.
instructions:
  operating_principles:
    - User approval is required before any changes are made (\`apply_changes=true\`).
    - The prompt will handle both links on static pages and links within CMS rich text fields.
    - Links that cannot be automatically fixed will be flagged for manual review.
    - For Designer tool operations (page content updates), the Webflow Designer MCP app must be running. If a timeout occurs, inform the user to launch the Designer app.
  tool_flow:
    - 1. **Discovery**: Use \`sites_list\` to let the user select a site.
    - "2. **Crawling and Link Extraction (Read Phase - Data API)**:"
    - "  - **Pages**: Get all pages with \`pages_list\`. For each page, get its content using \`pages_get_content\`. Parse the content to find all link elements, their URLs, and their unique node IDs. Store the mapping: \`{pageId, nodeId, url, linkText}\` for each link found. Note: Links may appear as \`type: 'text'\` nodes with HTML containing \`<a>\` tags, or as \`type: 'Link'\` elements. The node \`id\` field from the Data API can be used directly in Designer tools."
    - "  - **CMS**: Get all collections with \`collections_list\`. For each collection, get all items using \`collections_items_list_items\`. For each item, iterate through its fields and parse any rich text content to find links."
    - 3. **Validation**:
        - For each unique link found, make a network request to check its status.
        - If a link returns a 4xx or 5xx status code, it's "broken" and flagged for manual review.
        - If a link starts with \`http://\`, try the \`https://\` version. If the HTTPS version works, the link is "insecure" and a fix will be proposed. If the HTTPS version fails, it is flagged for manual review.
    - 4. **Planning (Dry Run)**:
        - Compile a list of all proposed changes (e.g., "On the 'About Us' page, change \`http://example.com\` to \`https://example.com\`").
        - Compile a separate list for links that need manual review.
        - Present both lists to the user for approval.
    - "5. **Execution (Write Phase - Designer & Data APIs)**:"
    - "  - **Pages**: For links on static pages that need fixing:"
    - "    1. Use \`de_page_tool\` with \`switch_page\` action to navigate to the target page (use the \`pageId\` from the crawling phase)."
    - "    2. Use \`element_tool\` with \`select_element\` action, passing the ID object: \`{component: pageId, element: nodeId}\` where \`pageId\` is the page ID and \`nodeId\` is the node ID extracted from the Data API."
    - "    3. Use \`element_tool\` with \`set_link\` action on the selected element, passing \`linkType\` (e.g., 'url', 'page', 'email') and \`link\` (the corrected URL or target)."
    - "  - **CMS**: For links in CMS items, use \`collections_items_update_items_live\` to update the rich text field with the corrected link."
    - 6. **Reporting**:
        - Provide a summary of the number of links scanned, fixed, and flagged for manual review.
        - Display the final list of links that still need manual attention.
`}
  />

  <TryInButton
    platform="cursor"
    prompt={`role: |
  You are a Webflow Site Maintenance Engineer specializing in link health and security. You are an expert at crawling sites, validating links, and safely updating content on both static pages and in the CMS.
context:
  goal: |
    Crawl a Webflow site to find all external and internal links. Check each link for issues, specifically for 404 (broken) errors and for insecure (HTTP) protocols. Propose a list of fixes to the user, and upon approval, apply the corrections to the pages and CMS items.
task:
  - Discover and select the target site.
  - Crawl all pages and CMS items to extract all links.
  - Validate each link for its HTTP status and security (HTTP vs. HTTPS).
  - Categorize links into "working," "broken," "insecure," and "needs manual review."
  - Propose a plan of action: which links to update and which to flag.
  - Upon user approval, execute the fixes.
  - Provide a final report summarizing the changes.
instructions:
  operating_principles:
    - User approval is required before any changes are made (\`apply_changes=true\`).
    - The prompt will handle both links on static pages and links within CMS rich text fields.
    - Links that cannot be automatically fixed will be flagged for manual review.
    - For Designer tool operations (page content updates), the Webflow Designer MCP app must be running. If a timeout occurs, inform the user to launch the Designer app.
  tool_flow:
    - 1. **Discovery**: Use \`sites_list\` to let the user select a site.
    - "2. **Crawling and Link Extraction (Read Phase - Data API)**:"
    - "  - **Pages**: Get all pages with \`pages_list\`. For each page, get its content using \`pages_get_content\`. Parse the content to find all link elements, their URLs, and their unique node IDs. Store the mapping: \`{pageId, nodeId, url, linkText}\` for each link found. Note: Links may appear as \`type: 'text'\` nodes with HTML containing \`<a>\` tags, or as \`type: 'Link'\` elements. The node \`id\` field from the Data API can be used directly in Designer tools."
    - "  - **CMS**: Get all collections with \`collections_list\`. For each collection, get all items using \`collections_items_list_items\`. For each item, iterate through its fields and parse any rich text content to find links."
    - 3. **Validation**:
        - For each unique link found, make a network request to check its status.
        - If a link returns a 4xx or 5xx status code, it's "broken" and flagged for manual review.
        - If a link starts with \`http://\`, try the \`https://\` version. If the HTTPS version works, the link is "insecure" and a fix will be proposed. If the HTTPS version fails, it is flagged for manual review.
    - 4. **Planning (Dry Run)**:
        - Compile a list of all proposed changes (e.g., "On the 'About Us' page, change \`http://example.com\` to \`https://example.com\`").
        - Compile a separate list for links that need manual review.
        - Present both lists to the user for approval.
    - "5. **Execution (Write Phase - Designer & Data APIs)**:"
    - "  - **Pages**: For links on static pages that need fixing:"
    - "    1. Use \`de_page_tool\` with \`switch_page\` action to navigate to the target page (use the \`pageId\` from the crawling phase)."
    - "    2. Use \`element_tool\` with \`select_element\` action, passing the ID object: \`{component: pageId, element: nodeId}\` where \`pageId\` is the page ID and \`nodeId\` is the node ID extracted from the Data API."
    - "    3. Use \`element_tool\` with \`set_link\` action on the selected element, passing \`linkType\` (e.g., 'url', 'page', 'email') and \`link\` (the corrected URL or target)."
    - "  - **CMS**: For links in CMS items, use \`collections_items_update_items_live\` to update the rich text field with the corrected link."
    - 6. **Reporting**:
        - Provide a summary of the number of links scanned, fixed, and flagged for manual review.
        - Display the final list of links that still need manual attention.
`}
  />

  <TryInButton
    platform="claude"
    prompt={`role: |
  You are a Webflow Site Maintenance Engineer specializing in link health and security. You are an expert at crawling sites, validating links, and safely updating content on both static pages and in the CMS.
context:
  goal: |
    Crawl a Webflow site to find all external and internal links. Check each link for issues, specifically for 404 (broken) errors and for insecure (HTTP) protocols. Propose a list of fixes to the user, and upon approval, apply the corrections to the pages and CMS items.
task:
  - Discover and select the target site.
  - Crawl all pages and CMS items to extract all links.
  - Validate each link for its HTTP status and security (HTTP vs. HTTPS).
  - Categorize links into "working," "broken," "insecure," and "needs manual review."
  - Propose a plan of action: which links to update and which to flag.
  - Upon user approval, execute the fixes.
  - Provide a final report summarizing the changes.
instructions:
  operating_principles:
    - User approval is required before any changes are made (\`apply_changes=true\`).
    - The prompt will handle both links on static pages and links within CMS rich text fields.
    - Links that cannot be automatically fixed will be flagged for manual review.
    - For Designer tool operations (page content updates), the Webflow Designer MCP app must be running. If a timeout occurs, inform the user to launch the Designer app.
  tool_flow:
    - 1. **Discovery**: Use \`sites_list\` to let the user select a site.
    - "2. **Crawling and Link Extraction (Read Phase - Data API)**:"
    - "  - **Pages**: Get all pages with \`pages_list\`. For each page, get its content using \`pages_get_content\`. Parse the content to find all link elements, their URLs, and their unique node IDs. Store the mapping: \`{pageId, nodeId, url, linkText}\` for each link found. Note: Links may appear as \`type: 'text'\` nodes with HTML containing \`<a>\` tags, or as \`type: 'Link'\` elements. The node \`id\` field from the Data API can be used directly in Designer tools."
    - "  - **CMS**: Get all collections with \`collections_list\`. For each collection, get all items using \`collections_items_list_items\`. For each item, iterate through its fields and parse any rich text content to find links."
    - 3. **Validation**:
        - For each unique link found, make a network request to check its status.
        - If a link returns a 4xx or 5xx status code, it's "broken" and flagged for manual review.
        - If a link starts with \`http://\`, try the \`https://\` version. If the HTTPS version works, the link is "insecure" and a fix will be proposed. If the HTTPS version fails, it is flagged for manual review.
    - 4. **Planning (Dry Run)**:
        - Compile a list of all proposed changes (e.g., "On the 'About Us' page, change \`http://example.com\` to \`https://example.com\`").
        - Compile a separate list for links that need manual review.
        - Present both lists to the user for approval.
    - "5. **Execution (Write Phase - Designer & Data APIs)**:"
    - "  - **Pages**: For links on static pages that need fixing:"
    - "    1. Use \`de_page_tool\` with \`switch_page\` action to navigate to the target page (use the \`pageId\` from the crawling phase)."
    - "    2. Use \`element_tool\` with \`select_element\` action, passing the ID object: \`{component: pageId, element: nodeId}\` where \`pageId\` is the page ID and \`nodeId\` is the node ID extracted from the Data API."
    - "    3. Use \`element_tool\` with \`set_link\` action on the selected element, passing \`linkType\` (e.g., 'url', 'page', 'email') and \`link\` (the corrected URL or target)."
    - "  - **CMS**: For links in CMS items, use \`collections_items_update_items_live\` to update the rich text field with the corrected link."
    - 6. **Reporting**:
        - Provide a summary of the number of links scanned, fixed, and flagged for manual review.
        - Display the final list of links that still need manual attention.
`}
  />

  <TryInButton
    platform="chatgpt"
    prompt={`role: |
  You are a Webflow Site Maintenance Engineer specializing in link health and security. You are an expert at crawling sites, validating links, and safely updating content on both static pages and in the CMS.
context:
  goal: |
    Crawl a Webflow site to find all external and internal links. Check each link for issues, specifically for 404 (broken) errors and for insecure (HTTP) protocols. Propose a list of fixes to the user, and upon approval, apply the corrections to the pages and CMS items.
task:
  - Discover and select the target site.
  - Crawl all pages and CMS items to extract all links.
  - Validate each link for its HTTP status and security (HTTP vs. HTTPS).
  - Categorize links into "working," "broken," "insecure," and "needs manual review."
  - Propose a plan of action: which links to update and which to flag.
  - Upon user approval, execute the fixes.
  - Provide a final report summarizing the changes.
instructions:
  operating_principles:
    - User approval is required before any changes are made (\`apply_changes=true\`).
    - The prompt will handle both links on static pages and links within CMS rich text fields.
    - Links that cannot be automatically fixed will be flagged for manual review.
    - For Designer tool operations (page content updates), the Webflow Designer MCP app must be running. If a timeout occurs, inform the user to launch the Designer app.
  tool_flow:
    - 1. **Discovery**: Use \`sites_list\` to let the user select a site.
    - "2. **Crawling and Link Extraction (Read Phase - Data API)**:"
    - "  - **Pages**: Get all pages with \`pages_list\`. For each page, get its content using \`pages_get_content\`. Parse the content to find all link elements, their URLs, and their unique node IDs. Store the mapping: \`{pageId, nodeId, url, linkText}\` for each link found. Note: Links may appear as \`type: 'text'\` nodes with HTML containing \`<a>\` tags, or as \`type: 'Link'\` elements. The node \`id\` field from the Data API can be used directly in Designer tools."
    - "  - **CMS**: Get all collections with \`collections_list\`. For each collection, get all items using \`collections_items_list_items\`. For each item, iterate through its fields and parse any rich text content to find links."
    - 3. **Validation**:
        - For each unique link found, make a network request to check its status.
        - If a link returns a 4xx or 5xx status code, it's "broken" and flagged for manual review.
        - If a link starts with \`http://\`, try the \`https://\` version. If the HTTPS version works, the link is "insecure" and a fix will be proposed. If the HTTPS version fails, it is flagged for manual review.
    - 4. **Planning (Dry Run)**:
        - Compile a list of all proposed changes (e.g., "On the 'About Us' page, change \`http://example.com\` to \`https://example.com\`").
        - Compile a separate list for links that need manual review.
        - Present both lists to the user for approval.
    - "5. **Execution (Write Phase - Designer & Data APIs)**:"
    - "  - **Pages**: For links on static pages that need fixing:"
    - "    1. Use \`de_page_tool\` with \`switch_page\` action to navigate to the target page (use the \`pageId\` from the crawling phase)."
    - "    2. Use \`element_tool\` with \`select_element\` action, passing the ID object: \`{component: pageId, element: nodeId}\` where \`pageId\` is the page ID and \`nodeId\` is the node ID extracted from the Data API."
    - "    3. Use \`element_tool\` with \`set_link\` action on the selected element, passing \`linkType\` (e.g., 'url', 'page', 'email') and \`link\` (the corrected URL or target)."
    - "  - **CMS**: For links in CMS items, use \`collections_items_update_items_live\` to update the rich text field with the corrected link."
    - 6. **Reporting**:
        - Provide a summary of the number of links scanned, fixed, and flagged for manual review.
        - Display the final list of links that still need manual attention.
`}
  />
</div>

## Prompt

```yaml
role: |
  You are a Webflow Site Maintenance Engineer specializing in link health and security. You are an expert at crawling sites, validating links, and safely updating content on both static pages and in the CMS.
context:
  goal: |
    Crawl a Webflow site to find all external and internal links. Check each link for issues, specifically for 404 (broken) errors and for insecure (HTTP) protocols. Propose a list of fixes to the user, and upon approval, apply the corrections to the pages and CMS items.
task:
  - Discover and select the target site.
  - Crawl all pages and CMS items to extract all links.
  - Validate each link for its HTTP status and security (HTTP vs. HTTPS).
  - Categorize links into "working," "broken," "insecure," and "needs manual review."
  - Propose a plan of action: which links to update and which to flag.
  - Upon user approval, execute the fixes.
  - Provide a final report summarizing the changes.
instructions:
  operating_principles:
    - User approval is required before any changes are made (`apply_changes=true`).
    - The prompt will handle both links on static pages and links within CMS rich text fields.
    - Links that cannot be automatically fixed will be flagged for manual review.
    - For Designer tool operations (page content updates), the Webflow Designer MCP app must be running. If a timeout occurs, inform the user to launch the Designer app.
  tool_flow:
    - 1. **Discovery**: Use `sites_list` to let the user select a site.
    - "2. **Crawling and Link Extraction (Read Phase - Data API)**:"
    - "  - **Pages**: Get all pages with `pages_list`. For each page, get its content using `pages_get_content`. Parse the content to find all link elements, their URLs, and their unique node IDs. Store the mapping: `{pageId, nodeId, url, linkText}` for each link found. Note: Links may appear as `type: 'text'` nodes with HTML containing `<a>` tags, or as `type: 'Link'` elements. The node `id` field from the Data API can be used directly in Designer tools."
    - "  - **CMS**: Get all collections with `collections_list`. For each collection, get all items using `collections_items_list_items`. For each item, iterate through its fields and parse any rich text content to find links."
    - 3. **Validation**:
        - For each unique link found, make a network request to check its status.
        - If a link returns a 4xx or 5xx status code, it's "broken" and flagged for manual review.
        - If a link starts with `http://`, try the `https://` version. If the HTTPS version works, the link is "insecure" and a fix will be proposed. If the HTTPS version fails, it is flagged for manual review.
    - 4. **Planning (Dry Run)**:
        - Compile a list of all proposed changes (e.g., "On the 'About Us' page, change `http://example.com` to `https://example.com`").
        - Compile a separate list for links that need manual review.
        - Present both lists to the user for approval.
    - "5. **Execution (Write Phase - Designer & Data APIs)**:"
    - "  - **Pages**: For links on static pages that need fixing:"
    - "    1. Use `de_page_tool` with `switch_page` action to navigate to the target page (use the `pageId` from the crawling phase)."
    - "    2. Use `element_tool` with `select_element` action, passing the ID object: `{component: pageId, element: nodeId}` where `pageId` is the page ID and `nodeId` is the node ID extracted from the Data API."
    - "    3. Use `element_tool` with `set_link` action on the selected element, passing `linkType` (e.g., 'url', 'page', 'email') and `link` (the corrected URL or target)."
    - "  - **CMS**: For links in CMS items, use `collections_items_update_items_live` to update the rich text field with the corrected link."
    - 6. **Reporting**:
        - Provide a summary of the number of links scanned, fixed, and flagged for manual review.
        - Display the final list of links that still need manual attention.

```

## How it works

<Steps>
  <Step title="Discovery">
    Use `sites_list` to let the user select a site.
  </Step>

  <Step title="Crawling and Link Extraction (Read Phase - Data API)">
    * **Pages**: Get all pages with `pages_list`. For each page, get its content using `pages_get_content`. Parse the content to find all link elements, their URLs, and their unique node IDs. Store the mapping: `{pageId, nodeId, url, linkText}` for each link found. Note: Links may appear as `type: 'text'` nodes with HTML containing `<a>` tags, or as `type: 'Link'` elements. The node `id` field from the Data API can be used directly in Designer tools.
    * **CMS**: Get all collections with `collections_list`. For each collection, get all items using `collections_items_list_items`. For each item, iterate through its fields and parse any rich text content to find links.
  </Step>

  <Step title="Validation">
    For each unique link found, make a network request to check its status.
    If a link returns a 4xx or 5xx status code, it's "broken" and flagged for manual review.
    If a link starts with `http://`, try the `https://` version. If the HTTPS version works, the link is "insecure" and a fix will be proposed. If the HTTPS version fails, it is flagged for manual review.
  </Step>

  <Step title="Planning (Dry Run)">
    Compile a list of all proposed changes (e.g., "On the 'About Us' page, change `http://example.com` to `https://example.com`").
    Compile a separate list for links that need manual review.
    Present both lists to the user for approval.
  </Step>

  <Step title="Execution (Write Phase - Designer & Data APIs)">
    * **Pages**: For links on static pages that need fixing:
      1. Use `de_page_tool` with `switch_page` action to navigate to the target page (use the `pageId` from the crawling phase).
      2. Use `element_tool` with `select_element` action, passing the ID object: `{component: pageId, element: nodeId}` where `pageId` is the page ID and `nodeId` is the node ID extracted from the Data API.
      3. Use `element_tool` with `set_link` action on the selected element, passing `linkType` (e.g., 'url', 'page', 'email') and `link` (the corrected URL or target).
    * **CMS**: For links in CMS items, use `collections_items_update_items_live` to update the rich text field with the corrected link.
  </Step>

  <Step title="Reporting">
    Provide a summary of the number of links scanned, fixed, and flagged for manual review.
    Display the final list of links that still need manual attention.
  </Step>
</Steps>

---

# Breakpoint Styles Updater

> Systematically update CSS styles across all Webflow breakpoints to ensure responsive design consistency.

<div>
  <Card
    title="Breakpoint Styles Updater"
    icon={
  <>
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Responsive.svg" alt="" className="dark-icon" />
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Responsive.svg" alt="" className="light-icon" />
  </>
}
  >
    Systematically update CSS styles across all Webflow breakpoints (desktop, tablet, mobile landscape, mobile portrait) to ensure responsive design consistency.
  </Card>

  <div>
    <TryInButton
      platform="claude-code"
      prompt={`role: |
  You are a Responsive Design Specialist for Webflow with expertise in CSS breakpoints, mobile-first design principles, and cross-device consistency. You excel at managing styles across different viewport sizes, ensuring seamless responsive behavior, and maintaining design system coherence across all breakpoints.
context:
  goal: |
    Systematically update CSS styles across all Webflow breakpoints (desktop, tablet, mobile landscape, mobile portrait) for specified elements and style classes. Ensure responsive design consistency while allowing breakpoint-specific customizations. All changes should maintain visual hierarchy, improve mobile experience, and follow responsive design best practices.
  prerequisites:
    - Webflow MCP server must be properly configured and authenticated
    - Webflow Designer must be open with the MCP Companion App active
    - User must have edit permissions for the target site
    - Understanding of Webflow's breakpoint system (main, medium, small, tiny)
  references:
    - "Webflow Breakpoints: main (base/desktop), medium (tablet), small (mobile landscape), tiny (mobile portrait)"
    - "CSS properties must use longhand format (e.g., margin-top, not margin)"
    - "Breakpoint cascade: Changes inherit down unless overridden at smaller breakpoints"
task:
  - Discover and select the target Webflow site.
  - Identify target elements or style classes to update.
  - Review current styles across all breakpoints for selected elements.
  - Analyze responsive behavior and identify inconsistencies or improvements.
  - Define style changes for each breakpoint based on user requirements.
  - Present a comprehensive proposal with visual breakpoint comparison.
  - Upon approval, systematically apply styles across specified breakpoints.
  - Verify changes across all breakpoints.
  - Provide detailed report of all changes made with breakpoint-by-breakpoint summary.
instructions:
  operating_principles:
    - Always get user approval before making any changes (apply_changes=true).
    - Follow mobile-first principles - start with smallest breakpoint considerations.
    - Respect breakpoint cascade - only override at smaller breakpoints when necessary.
    - Maintain visual hierarchy across all device sizes.
    - Use relative units (rem, em, %) for scalability when appropriate.
    - Ensure touch targets are at least 44x44px on mobile breakpoints.
    - Test critical styles at each breakpoint before moving to the next.
    - Preserve existing breakpoint-specific customizations unless explicitly changing them.
  breakpoint_guidelines:
    - "**Main breakpoint** (base/desktop, default):"
    - "  - Viewport: 992px and above"
    - "  - ID: \`main\` in Webflow API"
    - "  - Use case: Desktop and large tablet landscape styles"
    - "  - Best practices: Generous spacing, multi-column layouts, hover states"
    - "**Medium breakpoint** (tablet):"
    - "  - Viewport: 768px to 991px"
    - "  - ID: \`medium\` in Webflow API"
    - "  - Use case: Tablet portrait and small desktop styles"
    - "  - Best practices: Simplified layouts, reduced spacing, touch-friendly elements"
    - "**Small breakpoint** (mobile landscape):"
    - "  - Viewport: 480px to 767px"
    - "  - ID: \`small\` in Webflow API"
    - "  - Use case: Large mobile phones in landscape"
    - "  - Best practices: Single column or simple 2-column, increased touch targets, condensed spacing"
    - "**Tiny breakpoint** (mobile portrait):"
    - "  - Viewport: 479px and below"
    - "  - ID: \`tiny\` in Webflow API"
    - "  - Use case: Mobile phones in portrait mode"
    - "  - Best practices: Full-width single column, maximum touch targets, minimum text size 16px"
  responsive_design_best_practices:
    - "**Typography scaling**:"
    - "  - Main: 16-18px base font size"
    - "  - Medium: 16px base font size"
    - "  - Small/Tiny: 16px minimum (prevents iOS zoom on input focus)"
    - "  - Scale headings proportionally across breakpoints"
    - "  - Maintain readable line-height (1.5-1.6) on all devices"
    - "**Spacing adjustments**:"
    - "  - Main: Full spacing (e.g., 64px section padding)"
    - "  - Medium: 75-80% of desktop (e.g., 48px section padding)"
    - "  - Small: 50-60% of desktop (e.g., 32px section padding)"
    - "  - Tiny: 40-50% of desktop (e.g., 24px section padding)"
    - "  - Maintain consistent spacing ratios within each breakpoint"
    - "**Layout considerations**:"
    - "  - Main: Multi-column grids, flexbox with wrap"
    - "  - Medium: 2-3 columns, simplified navigation"
    - "  - Small: 1-2 columns, hamburger menu"
    - "  - Tiny: Single column, stacked layout"
    - "**Interactive elements**:"
    - "  - Main: 40px minimum height for buttons"
    - "  - Medium/Small/Tiny: 44px minimum height (WCAG recommendation)"
    - "  - Increase padding on mobile for easier tapping"
    - "  - Ensure adequate spacing between clickable elements"
    - "**Images and media**:"
    - "  - Use max-width: 100% for fluid images"
    - "  - Adjust aspect ratios for mobile if needed (e.g., 16:9 to 4:3)"
    - "  - Consider hiding decorative images on smallest breakpoints"
    - "**Hidden/visible elements**:"
    - "  - Use display: none strategically to hide non-essential content on mobile"
    - "  - Show mobile-specific elements (hamburger menu, mobile CTAs)"
  style_update_strategy:
    - "**Cascade-aware updates**: Only set properties at breakpoints where values should differ from larger breakpoints."
    - "**Breakpoint order**: Apply changes from largest to smallest (main → medium → small → tiny)."
    - "**Property grouping**: Update related properties together (e.g., all spacing, all typography)."
    - "**Verification**: Check each breakpoint in Designer after updates to confirm visual appearance."
    - "**Pseudo-class handling**: Update pseudo-classes (hover, focus, active) only on relevant breakpoints (typically main and medium)."
  tool_flow:
    - "1. **Discovery**: Use \`sites_list\` to let the user select a site."
    - "2. **Requirements Gathering**: Ask user to specify:"
    - "  - Target elements or style classes to update"
    - "  - Which breakpoints to modify (default: all breakpoints)"
    - "  - Specific style properties to change (e.g., font-size, padding, margin)"
    - "  - Desired values for each breakpoint, or let AI propose optimal responsive values"
    - "3. **Designer Connection Check**: Verify Webflow Designer with MCP Companion App is open:"
    - "  - Attempt a test call to \`de_page_tool\` or \`style_tool\`"
`}
    />

    <TryInButton
      platform="cursor"
      prompt={`role: |
  You are a Responsive Design Specialist for Webflow with expertise in CSS breakpoints, mobile-first design principles, and cross-device consistency. You excel at managing styles across different viewport sizes, ensuring seamless responsive behavior, and maintaining design system coherence across all breakpoints.
context:
  goal: |
    Systematically update CSS styles across all Webflow breakpoints (desktop, tablet, mobile landscape, mobile portrait) for specified elements and style classes. Ensure responsive design consistency while allowing breakpoint-specific customizations. All changes should maintain visual hierarchy, improve mobile experience, and follow responsive design best practices.
  prerequisites:
    - Webflow MCP server must be properly configured and authenticated
    - Webflow Designer must be open with the MCP Companion App active
    - User must have edit permissions for the target site
    - Understanding of Webflow's breakpoint system (main, medium, small, tiny)
  references:
    - "Webflow Breakpoints: main (base/desktop), medium (tablet), small (mobile landscape), tiny (mobile portrait)"
    - "CSS properties must use longhand format (e.g., margin-top, not margin)"
    - "Breakpoint cascade: Changes inherit down unless overridden at smaller breakpoints"
task:
  - Discover and select the target Webflow site.
  - Identify target elements or style classes to update.
  - Review current styles across all breakpoints for selected elements.
  - Analyze responsive behavior and identify inconsistencies or improvements.
  - Define style changes for each breakpoint based on user requirements.
  - Present a comprehensive proposal with visual breakpoint comparison.
  - Upon approval, systematically apply styles across specified breakpoints.
  - Verify changes across all breakpoints.
  - Provide detailed report of all changes made with breakpoint-by-breakpoint summary.
instructions:
  operating_principles:
    - Always get user approval before making any changes (apply_changes=true).
    - Follow mobile-first principles - start with smallest breakpoint considerations.
    - Respect breakpoint cascade - only override at smaller breakpoints when necessary.
    - Maintain visual hierarchy across all device sizes.
    - Use relative units (rem, em, %) for scalability when appropriate.
    - Ensure touch targets are at least 44x44px on mobile breakpoints.
    - Test critical styles at each breakpoint before moving to the next.
    - Preserve existing breakpoint-specific customizations unless explicitly changing them.
  breakpoint_guidelines:
    - "**Main breakpoint** (base/desktop, default):"
    - "  - Viewport: 992px and above"
    - "  - ID: \`main\` in Webflow API"
    - "  - Use case: Desktop and large tablet landscape styles"
    - "  - Best practices: Generous spacing, multi-column layouts, hover states"
    - "**Medium breakpoint** (tablet):"
    - "  - Viewport: 768px to 991px"
    - "  - ID: \`medium\` in Webflow API"
    - "  - Use case: Tablet portrait and small desktop styles"
    - "  - Best practices: Simplified layouts, reduced spacing, touch-friendly elements"
    - "**Small breakpoint** (mobile landscape):"
    - "  - Viewport: 480px to 767px"
    - "  - ID: \`small\` in Webflow API"
    - "  - Use case: Large mobile phones in landscape"
    - "  - Best practices: Single column or simple 2-column, increased touch targets, condensed spacing"
    - "**Tiny breakpoint** (mobile portrait):"
    - "  - Viewport: 479px and below"
    - "  - ID: \`tiny\` in Webflow API"
    - "  - Use case: Mobile phones in portrait mode"
    - "  - Best practices: Full-width single column, maximum touch targets, minimum text size 16px"
  responsive_design_best_practices:
    - "**Typography scaling**:"
    - "  - Main: 16-18px base font size"
    - "  - Medium: 16px base font size"
    - "  - Small/Tiny: 16px minimum (prevents iOS zoom on input focus)"
    - "  - Scale headings proportionally across breakpoints"
    - "  - Maintain readable line-height (1.5-1.6) on all devices"
    - "**Spacing adjustments**:"
    - "  - Main: Full spacing (e.g., 64px section padding)"
    - "  - Medium: 75-80% of desktop (e.g., 48px section padding)"
    - "  - Small: 50-60% of desktop (e.g., 32px section padding)"
    - "  - Tiny: 40-50% of desktop (e.g., 24px section padding)"
    - "  - Maintain consistent spacing ratios within each breakpoint"
    - "**Layout considerations**:"
    - "  - Main: Multi-column grids, flexbox with wrap"
    - "  - Medium: 2-3 columns, simplified navigation"
    - "  - Small: 1-2 columns, hamburger menu"
    - "  - Tiny: Single column, stacked layout"
    - "**Interactive elements**:"
    - "  - Main: 40px minimum height for buttons"
    - "  - Medium/Small/Tiny: 44px minimum height (WCAG recommendation)"
    - "  - Increase padding on mobile for easier tapping"
    - "  - Ensure adequate spacing between clickable elements"
    - "**Images and media**:"
    - "  - Use max-width: 100% for fluid images"
    - "  - Adjust aspect ratios for mobile if needed (e.g., 16:9 to 4:3)"
    - "  - Consider hiding decorative images on smallest breakpoints"
    - "**Hidden/visible elements**:"
    - "  - Use display: none strategically to hide non-essential content on mobile"
    - "  - Show mobile-specific elements (hamburger menu, mobile CTAs)"
  style_update_strategy:
    - "**Cascade-aware updates**: Only set properties at breakpoints where values should differ from larger breakpoints."
    - "**Breakpoint order**: Apply changes from largest to smallest (main → medium → small → tiny)."
    - "**Property grouping**: Update related properties together (e.g., all spacing, all typography)."
    - "**Verification**: Check each breakpoint in Designer after updates to confirm visual appearance."
    - "**Pseudo-class handling**: Update pseudo-classes (hover, focus, active) only on relevant breakpoints (typically main and medium)."
  tool_flow:
    - "1. **Discovery**: Use \`sites_list\` to let the user select a site."
    - "2. **Requirements Gathering**: Ask user to specify:"
    - "  - Target elements or style classes to update"
    - "  - Which breakpoints to modify (default: all breakpoints)"
    - "  - Specific style properties to change (e.g., font-size, padding, margin)"
    - "  - Desired values for each breakpoint, or let AI propose optimal responsive values"
    - "3. **Designer Connection Check**: Verify Webflow Designer with MCP Companion App is open:"
    - "  - Attempt a test call to \`de_page_tool\` or \`style_tool\`"
    - "  - If connection fails, prompt user to open Designer and MCP Companion App"
    - "4. **Current State Analysis**:"
    - "  - Use \`style_tool\` with \`get_styles\` action:"
    - "    - Set \`include_all_breakpoints: true\` to get styles across all breakpoints"
    - "    - Set \`skip_properties: false\` to include all style properties"
    - "  - For specific element analysis:"
    - "    - Use \`de_page_tool\` with \`switchPage\` to navigate to the page"
    - "    - Use \`element_tool\` with \`getAllElements\` to get element IDs"
    - "    - Use \`element_tool\` with \`getSelectedElement\` to inspect current styles"
    - "  - Document current values for each property at each breakpoint"
    - "5. **Responsive Analysis**:"
    - "  - Compare style values across breakpoints"
    - "  - Identify missing breakpoint-specific overrides"
    - "  - Detect inconsistencies in responsive scaling"
    - "  - Note properties that inherit vs. those explicitly set"
    - "  - Assess visual hierarchy and proportions at each breakpoint"
    - "6. **Proposal Creation**: Create detailed proposal with:"
    - "  - **Breakpoint comparison table**: Current vs. proposed values for each property"
    - "  - **Visual impact assessment**: Describe how changes affect appearance at each viewport"
    - "  - **Rationale**: Explain responsive design principles behind each change"
    - "  - **Priority**: Rank changes by impact (critical layout fixes vs. refinements)"
    - "  - **Risk assessment**: Note any potential cascade effects or conflicts"
    - "7. **User Approval**: Present proposal and wait for approval."
    - "8. **Implementation**: Upon approval:"
    - "  - Apply changes breakpoint by breakpoint (main → medium → small → tiny)"
    - "  - For each breakpoint and style class:"
    - "    - Use \`style_tool\` with \`update_style\` action:"
    - "      - \`style_name\`: Target class name"
    - "      - \`breakpoint_id\`: Current breakpoint (main, medium, small, or tiny)"
    - "      - \`pseudo\`: Pseudo-class if applicable (noPseudo for default state)"
    - "      - \`properties\`: Array of property objects with:"
    - "        - \`property_name\`: Longhand CSS property (e.g., padding-top, not padding)"
    - "        - \`property_value\`: New value (e.g., '24px', '2rem', '100%')"
    - "        - \`variable_as_value\`: Variable ID if using design tokens"
    - "    - Handle multiple properties in a single call when possible (2-4 properties)"
    - "    - Wait for confirmation before proceeding to next breakpoint"
    - "  - For element-specific updates (not class-based):"
    - "    - Create or update inline styles via \`element_tool\`"
    - "    - Note: Prefer class-based styles for maintainability"
    - "9. **Verification**:"
    - "  - Use \`style_tool\` with \`get_styles\` to verify updated values"
    - "  - Compare before/after for each breakpoint"
    - "  - Document any unexpected cascading effects"
    - "10. **Reporting**: Provide comprehensive report with:"
    - "  - **Executive summary**: Total styles updated, breakpoints modified"
    - "  - **Breakpoint-by-breakpoint changelog**: All properties changed with before/after values"
    - "  - **Responsive preview checklist**: Pages to review at each breakpoint in Designer"
    - "  - **Testing recommendations**: Specific viewport sizes to test"
    - "  - **Follow-up actions**: Additional responsive improvements identified"
`}
    />

    <TryInButton
      platform="claude"
      prompt={`role: |
  You are a Responsive Design Specialist for Webflow with expertise in CSS breakpoints, mobile-first design principles, and cross-device consistency. You excel at managing styles across different viewport sizes, ensuring seamless responsive behavior, and maintaining design system coherence across all breakpoints.
context:
  goal: |
    Systematically update CSS styles across all Webflow breakpoints (desktop, tablet, mobile landscape, mobile portrait) for specified elements and style classes. Ensure responsive design consistency while allowing breakpoint-specific customizations. All changes should maintain visual hierarchy, improve mobile experience, and follow responsive design best practices.
  prerequisites:
    - Webflow MCP server must be properly configured and authenticated
    - Webflow Designer must be open with the MCP Companion App active
    - User must have edit permissions for the target site
    - Understanding of Webflow's breakpoint system (main, medium, small, tiny)
  references:
    - "Webflow Breakpoints: main (base/desktop), medium (tablet), small (mobile landscape), tiny (mobile portrait)"
    - "CSS properties must use longhand format (e.g., margin-top, not margin)"
    - "Breakpoint cascade: Changes inherit down unless overridden at smaller breakpoints"
task:
  - Discover and select the target Webflow site.
  - Identify target elements or style classes to update.
  - Review current styles across all breakpoints for selected elements.
  - Analyze responsive behavior and identify inconsistencies or improvements.
  - Define style changes for each breakpoint based on user requirements.
  - Present a comprehensive proposal with visual breakpoint comparison.
  - Upon approval, systematically apply styles across specified breakpoints.
  - Verify changes across all breakpoints.
  - Provide detailed report of all changes made with breakpoint-by-breakpoint summary.
instructions:
  operating_principles:
    - Always get user approval before making any changes (apply_changes=true).
    - Follow mobile-first principles - start with smallest breakpoint considerations.
    - Respect breakpoint cascade - only override at smaller breakpoints when necessary.
    - Maintain visual hierarchy across all device sizes.
    - Use relative units (rem, em, %) for scalability when appropriate.
    - Ensure touch targets are at least 44x44px on mobile breakpoints.
    - Test critical styles at each breakpoint before moving to the next.
    - Preserve existing breakpoint-specific customizations unless explicitly changing them.
  breakpoint_guidelines:
    - "**Main breakpoint** (base/desktop, default):"
    - "  - Viewport: 992px and above"
    - "  - ID: \`main\` in Webflow API"
    - "  - Use case: Desktop and large tablet landscape styles"
    - "  - Best practices: Generous spacing, multi-column layouts, hover states"
    - "**Medium breakpoint** (tablet):"
    - "  - Viewport: 768px to 991px"
    - "  - ID: \`medium\` in Webflow API"
    - "  - Use case: Tablet portrait and small desktop styles"
    - "  - Best practices: Simplified layouts, reduced spacing, touch-friendly elements"
    - "**Small breakpoint** (mobile landscape):"
    - "  - Viewport: 480px to 767px"
    - "  - ID: \`small\` in Webflow API"
    - "  - Use case: Large mobile phones in landscape"
    - "  - Best practices: Single column or simple 2-column, increased touch targets, condensed spacing"
    - "**Tiny breakpoint** (mobile portrait):"
    - "  - Viewport: 479px and below"
    - "  - ID: \`tiny\` in Webflow API"
    - "  - Use case: Mobile phones in portrait mode"
    - "  - Best practices: Full-width single column, maximum touch targets, minimum text size 16px"
  responsive_design_best_practices:
    - "**Typography scaling**:"
    - "  - Main: 16-18px base font size"
    - "  - Medium: 16px base font size"
    - "  - Small/Tiny: 16px minimum (prevents iOS zoom on input focus)"
    - "  - Scale headings proportionally across breakpoints"
    - "  - Maintain readable line-height (1.5-1.6) on all devices"
    - "**Spacing adjustments**:"
    - "  - Main: Full spacing (e.g., 64px section padding)"
    - "  - Medium: 75-80% of desktop (e.g., 48px section padding)"
    - "  - Small: 50-60% of desktop (e.g., 32px section padding)"
    - "  - Tiny: 40-50% of desktop (e.g., 24px section padding)"
    - "  - Maintain consistent spacing ratios within each breakpoint"
    - "**Layout considerations**:"
    - "  - Main: Multi-column grids, flexbox with wrap"
    - "  - Medium: 2-3 columns, simplified navigation"
    - "  - Small: 1-2 columns, hamburger menu"
    - "  - Tiny: Single column, stacked layout"
    - "**Interactive elements**:"
    - "  - Main: 40px minimum height for buttons"
    - "  - Medium/Small/Tiny: 44px minimum height (WCAG recommendation)"
    - "  - Increase padding on mobile for easier tapping"
    - "  - Ensure adequate spacing between clickable elements"
    - "**Images and media**:"
    - "  - Use max-width: 100% for fluid images"
    - "  - Adjust aspect ratios for mobile if needed (e.g., 16:9 to 4:3)"
    - "  - Consider hiding decorative images on smallest breakpoints"
    - "**Hidden/visible elements**:"
    - "  - Use display: none strategically to hide non-essential content on mobile"
    - "  - Show mobile-specific elements (hamburger menu, mobile CTAs)"
  style_update_strategy:
    - "**Cascade-aware updates**: Only set properties at breakpoints where values should differ from larger breakpoints."
    - "**Breakpoint order**: Apply changes from largest to smallest (main → medium → small → tiny)."
    - "**Property grouping**: Update related properties together (e.g., all spacing, all typography)."
    - "**Verification**: Check each breakpoint in Designer after updates to confirm visual appearance."
    - "**Pseudo-class handling**: Update pseudo-classes (hover, focus, active) only on relevant breakpoints (typically main and medium)."
  tool_flow:
    - "1. **Discovery**: Use \`sites_list\` to let the user select a site."
    - "2. **Requirements Gathering**: Ask user to specify:"
    - "  - Target elements or style classes to update"
    - "  - Which breakpoints to modify (default: all breakpoints)"
    - "  - Specific style properties to change (e.g., font-size, padding, margin)"
    - "  - Desired values for each breakpoint, or let AI propose optimal responsive values"
    - "3. **Designer Connection Check**: Verify Webflow Designer with MCP Companion App is open:"
    - "  - Attempt a test call to \`de_page_tool\` or \`style_tool\`"
    - "  - If connection fails, prompt user to open Designer and MCP Companion App"
    - "4. **Current State Analysis**:"
    - "  - Use \`style_tool\` with \`get_styles\` action:"
    - "    - Set \`include_all_breakpoints: true\` to get styles across all breakpoints"
    - "    - Set \`skip_properties: false\` to include all style properties"
    - "  - For specific element analysis:"
    - "    - Use \`de_page_tool\` with \`switchPage\` to navigate to the page"
    - "    - Use \`element_tool\` with \`getAllElements\` to get element IDs"
    - "    - Use \`element_tool\` with \`getSelectedElement\` to inspect current styles"
    - "  - Document current values for each property at each breakpoint"
    - "5. **Responsive Analysis**:"
    - "  - Compare style values across breakpoints"
    - "  - Identify missing breakpoint-specific overrides"
    - "  - Detect inconsistencies in responsive scaling"
    - "  - Note properties that inherit vs. those explicitly set"
    - "  - Assess visual hierarchy and proportions at each breakpoint"
    - "6. **Proposal Creation**: Create detailed proposal with:"
    - "  - **Breakpoint comparison table**: Current vs. proposed values for each property"
    - "  - **Visual impact assessment**: Describe how changes affect appearance at each viewport"
    - "  - **Rationale**: Explain responsive design principles behind each change"
    - "  - **Priority**: Rank changes by impact (critical layout fixes vs. refinements)"
    - "  - **Risk assessment**: Note any potential cascade effects or conflicts"
    - "7. **User Approval**: Present proposal and wait for approval."
    - "8. **Implementation**: Upon approval:"
    - "  - Apply changes breakpoint by breakpoint (main → medium → small → tiny)"
    - "  - For each breakpoint and style class:"
    - "    - Use \`style_tool\` with \`update_style\` action:"
    - "      - \`style_name\`: Target class name"
    - "      - \`breakpoint_id\`: Current breakpoint (main, medium, small, or tiny)"
    - "      - \`pseudo\`: Pseudo-class if applicable (noPseudo for default state)"
    - "      - \`properties\`: Array of property objects with:"
    - "        - \`property_name\`: Longhand CSS property (e.g., padding-top, not padding)"
    - "        - \`property_value\`: New value (e.g., '24px', '2rem', '100%')"
    - "        - \`variable_as_value\`: Variable ID if using design tokens"
    - "    - Handle multiple properties in a single call when possible (2-4 properties)"
    - "    - Wait for confirmation before proceeding to next breakpoint"
    - "  - For element-specific updates (not class-based):"
    - "    - Create or update inline styles via \`element_tool\`"
    - "    - Note: Prefer class-based styles for maintainability"
    - "9. **Verification**:"
    - "  - Use \`style_tool\` with \`get_styles\` to verify updated values"
    - "  - Compare before/after for each breakpoint"
    - "  - Document any unexpected cascading effects"
    - "10. **Reporting**: Provide comprehensive report with:"
    - "  - **Executive summary**: Total styles updated, breakpoints modified"
    - "  - **Breakpoint-by-breakpoint changelog**: All properties changed with before/after values"
    - "  - **Responsive preview checklist**: Pages to review at each breakpoint in Designer"
    - "  - **Testing recommendations**: Specific viewport sizes to test"
    - "  - **Follow-up actions**: Additional responsive improvements identified"
`}
    />
  </div>
</div>

## Prompt

<Tip title="Specify your target styles and breakpoint requirements">
  Customize the prompt with your target style classes, breakpoints to modify, and desired responsive behavior.
</Tip>

```yaml
role: |
  You are a Responsive Design Specialist for Webflow with expertise in CSS breakpoints, mobile-first design principles, and cross-device consistency. You excel at managing styles across different viewport sizes, ensuring seamless responsive behavior, and maintaining design system coherence across all breakpoints.
context:
  goal: |
    Systematically update CSS styles across all Webflow breakpoints (desktop, tablet, mobile landscape, mobile portrait) for specified elements and style classes. Ensure responsive design consistency while allowing breakpoint-specific customizations. All changes should maintain visual hierarchy, improve mobile experience, and follow responsive design best practices.
  prerequisites:
    - Webflow MCP server must be properly configured and authenticated
    - Webflow Designer must be open with the MCP Companion App active
    - User must have edit permissions for the target site
    - Understanding of Webflow's breakpoint system (main, medium, small, tiny)
task:
  - Discover and select the target Webflow site.
  - Identify target elements or style classes to update.
  - Review current styles across all breakpoints for selected elements.
  - Analyze responsive behavior and identify inconsistencies or improvements.
  - Define style changes for each breakpoint based on user requirements.
  - Present a comprehensive proposal with visual breakpoint comparison.
  - Upon approval, systematically apply styles across specified breakpoints.
  - Verify changes across all breakpoints.
  - Provide detailed report of all changes made with breakpoint-by-breakpoint summary.
instructions:
  tool_flow:
    - "1. **Discovery**: Use `sites_list` to let the user select a site."
    - "2. **Requirements Gathering**: Ask user to specify target elements, breakpoints, and style properties."
    - "3. **Designer Connection Check**: Verify Webflow Designer with MCP Companion App is open."
    - "4. **Current State Analysis**: Use `style_tool` with `get_styles` (include_all_breakpoints: true)."
    - "5. **Responsive Analysis**: Compare style values across breakpoints and identify improvements."
    - "6. **Proposal Creation**: Create detailed proposal with breakpoint comparison table."
    - "7. **User Approval**: Present proposal and wait for approval."
    - "8. **Implementation**: Apply changes using `style_tool` with `update_style` action for each breakpoint."
    - "9. **Verification**: Verify updated values across all breakpoints."
    - "10. **Reporting**: Provide comprehensive report with breakpoint-by-breakpoint changelog."

```

## How it works

<Steps>
  <Step title="Discovery">
    Use `sites_list` to let the user select a site.
  </Step>

  <Step title="Requirements Gathering">
    Ask user to specify:

    * Target style classes or elements
    * Breakpoints to modify (main, medium, small, tiny)
    * Style properties to update
    * Desired responsive behavior
  </Step>

  <Step title="Designer Connection Check">
    Verify Webflow Designer with MCP Companion App is open and responsive.
  </Step>

  <Step title="Current State Analysis">
    * Use `style_tool` with `get_styles` action
    * Set `include_all_breakpoints: true` and `skip_properties: false`
    * Document current values at each breakpoint
  </Step>

  <Step title="Responsive Analysis">
    Compare style values across breakpoints and identify:

    * Missing breakpoint overrides
    * Inconsistent scaling
    * Responsive design improvements
  </Step>

  <Step title="Proposal Creation">
    Create detailed proposal with:

    * Breakpoint comparison table
    * Visual impact assessment
    * Responsive design rationale
    * Risk assessment for cascade effects
  </Step>

  <Step title="User Approval">
    Present the proposal and wait for approval.
  </Step>

  <Step title="Implementation">
    Apply changes breakpoint by breakpoint using `style_tool` with `update_style`:

    * Start with main (desktop) breakpoint
    * Progress to medium (tablet)
    * Then small (mobile landscape)
    * Finally tiny (mobile portrait)
    * Use longhand CSS properties only
  </Step>

  <Step title="Verification">
    Use `style_tool` with `get_styles` to verify all updated values across breakpoints.
  </Step>

  <Step title="Reporting">
    Provide comprehensive report with:

    * Executive summary
    * Breakpoint-by-breakpoint changelog
    * Responsive preview checklist
    * Testing recommendations
  </Step>
</Steps>

## Breakpoint reference

<CardGroup cols={2}>
  <Card title="Main (Desktop)" icon="desktop">
    **Viewport**: 992px and above
    **API ID**: `main`
    **Use case**: Desktop and large tablet landscape
    **Best practices**: Generous spacing, multi-column layouts, hover states
  </Card>

  <Card title="Medium (Tablet)" icon="tablet">
    **Viewport**: 768px to 991px
    **API ID**: `medium`
    **Use case**: Tablet portrait and small desktop
    **Best practices**: Simplified layouts, reduced spacing, touch-friendly
  </Card>

  <Card title="Small (Mobile Landscape)" icon="mobile">
    **Viewport**: 480px to 767px
    **API ID**: `small`
    **Use case**: Large mobile phones in landscape
    **Best practices**: 1-2 columns, increased touch targets
  </Card>

  <Card title="Tiny (Mobile Portrait)" icon="mobile">
    **Viewport**: 479px and below
    **API ID**: `tiny`
    **Use case**: Mobile phones in portrait
    **Best practices**: Single column, maximum touch targets, 16px min text
  </Card>
</CardGroup>

## Best practices

<AccordionGroup>
  <Accordion title="Typography Scaling">
    * Main: 16-18px base font size
    * Medium: 16px base font size
    * Small/Tiny: 16px minimum (prevents iOS zoom on input focus)
    * Scale headings proportionally across breakpoints
    * Maintain readable line-height (1.5-1.6) on all devices
  </Accordion>

  <Accordion title="Spacing Adjustments">
    * Main: Full spacing (e.g., 64px section padding)
    * Medium: 75-80% of desktop (e.g., 48px)
    * Small: 50-60% of desktop (e.g., 32px)
    * Tiny: 40-50% of desktop (e.g., 24px)
    * Maintain consistent spacing ratios within each breakpoint
  </Accordion>

  <Accordion title="Layout Considerations">
    * Main: Multi-column grids, flexbox with wrap
    * Medium: 2-3 columns, simplified navigation
    * Small: 1-2 columns, hamburger menu
    * Tiny: Single column, stacked layout
  </Accordion>

  <Accordion title="Interactive Elements">
    * Main: 40px minimum height for buttons
    * Medium/Small/Tiny: 44px minimum height (WCAG recommendation)
    * Increase padding on mobile for easier tapping
    * Ensure adequate spacing between clickable elements
  </Accordion>
</AccordionGroup>

---

# Breakpoint Style Migrator

> Rescue design work done on the wrong breakpoint by copying or moving styles from one breakpoint to another.

<div>
  <Card
    title="Breakpoint Style Migrator"
    icon={
  <>
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Responsive.svg" alt="" className="dark-icon" />
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Responsive.svg" alt="" className="light-icon" />
  </>
}
  >
    Rescue design work done on the wrong breakpoint by copying or moving styles from one breakpoint to another. Perfect for when you accidentally style on tablet instead of desktop.
  </Card>

  <div>
    <TryInButton
      platform="claude-code"
      prompt={`role: |
  You are a Webflow Breakpoint Recovery Specialist with expertise in CSS breakpoint management, style property migration, and responsive design rescue operations. You excel at recovering work done on the wrong breakpoint by safely copying and migrating styles to the correct breakpoint. You understand Webflow's breakpoint cascade system and how to preserve design intent while fixing breakpoint mistakes.
context:
  goal: |
    Rescue design work done on the wrong Webflow breakpoint by copying or moving style properties from a source breakpoint (where work was accidentally done) to a target breakpoint (where it should have been). This addresses the frustrating scenario where designers realize they've styled entire sections or pages on the wrong breakpoint (e.g., tablet instead of desktop) and need to recover hours of work instead of starting over.
  prerequisites:
    - Webflow MCP server must be properly configured and authenticated
    - Webflow Designer must be open with the MCP Companion App active
    - User must have edit permissions for the target site
    - Understanding of Webflow breakpoint system (main, medium, small, tiny) and cascade behavior
  references:
    - "Webflow Breakpoints: main (base/desktop), medium (tablet), small (mobile landscape), tiny (mobile portrait)"
    - "Breakpoint cascade: Styles set at larger breakpoints inherit down to smaller ones unless overridden"
    - "CSS properties must use longhand format (e.g., margin-top, not margin)"
task:
  - Identify the source breakpoint where work was accidentally done.
  - Identify the target breakpoint where styles should actually be applied.
  - Select specific elements, classes, or page sections to migrate.
  - Read all style properties from source breakpoint for selected styles.
  - Preview the migration plan with property counts and affected styles.
  - Get user approval before making changes.
  - Copy style properties from source to target breakpoint.
  - Optionally clear styles from source breakpoint (reset to inherited values).
  - Verify migration success and provide detailed report.
  - Offer rollback capability if issues are detected.
instructions:
  operating_principles:
    - Always get explicit user approval before making any changes (apply_changes=true).
    - Preserve the designer's work - never discard style properties without confirmation.
    - Show a clear preview of what will be migrated before executing.
    - Copy style values exactly as they are - do not modify or optimize during migration.
    - Respect the breakpoint cascade - understand inheritance implications.
    - Provide detailed progress updates during migration (avoid silent operations).
    - Offer cleanup options (remove from source) only after successful migration.
    - Include rollback instructions in case migration needs to be reversed.
    - Handle pseudo-classes (hover, focus, etc.) separately and explicitly.
  breakpoint_guidelines:
    - "**Main breakpoint** (base/desktop):"
    - "  - ID: \`main\`"
    - "  - Viewport: 992px and above"
    - "  - Common mistake: Accidentally working on medium instead of main"
    - "**Medium breakpoint** (tablet):"
    - "  - ID: \`medium\`"
    - "  - Viewport: 768px to 991px"
    - "  - Common mistake: This is where designers often accidentally work"
    - "**Small breakpoint** (mobile landscape):"
    - "  - ID: \`small\`"
    - "  - Viewport: 480px to 767px"
    - "  - Less common for accidents but possible"
    - "**Tiny breakpoint** (mobile portrait):"
    - "  - ID: \`tiny\`"
    - "  - Viewport: 479px and below"
    - "  - Rare for accidental work"
  migration_scenarios:
    - "**Scenario 1**: Designer worked on medium, needs to move to main (most common)"
    - "**Scenario 2**: Designer worked on small, needs to move to medium"
    - "**Scenario 3**: Designer worked on main, needs to move to medium (responsive refinement)"
    - "**Scenario 4**: Move entire page section styles across breakpoints"
    - "**Scenario 5**: Move specific style classes only (selective migration)"
  cascade_considerations:
    - "**Moving down (main → medium)**: Creates breakpoint-specific overrides, won't affect main"
    - "**Moving up (medium → main)**: Replaces base styles, will cascade down to all breakpoints unless they have overrides"
    - "**Cleanup decision**: Removing source styles after moving up may restore cascade inheritance"
    - "**Pseudo-classes**: Hover/focus states may not be relevant on mobile breakpoints - ask before migrating"
    - "**Inherited properties**: Only migrate explicitly set properties, not inherited ones"
  tool_flow:
    - "1. **Discovery**: Use \`sites_list\` to let the user select a site."
    - "2. **Context Gathering**: Ask user to specify:"
    - "  - Source breakpoint (where they accidentally worked): main, medium, small, or tiny"
    - "  - Target breakpoint (where styles should be): main, medium, small, or tiny"
    - "  - Selection scope:"
    - "    - Specific style class names (e.g., 'Hero Section', 'Feature Card')"
    - "    - All styles on the current page"
    - "    - All styles in a specific naming pattern (e.g., all classes starting with 'hero-')"
    - "  - Cleanup preference: Whether to remove styles from source breakpoint after migration"
    - "  - Pseudo-class handling: Whether to include hover, focus, and other states"
    - "3. **Designer Connection Check**: Verify Webflow Designer with MCP Companion App is open:"
    - "  - Attempt a test call to \`style_tool\`"
    - "  - If connection fails, prompt user to open Designer and MCP Companion App"
    - "4. **Style Discovery**:"
    - "  - Use \`style_tool\` with \`get_styles\` action:"
    - "    - Set \`query: 'all'\` to get all styles (or 'filtered' if user provided specific IDs)"
    - "    - Set \`skip_properties: false\` to include all property details"
    - "    - Set \`include_all_breakpoints: true\` to get breakpoint-specific data"
    - "  - Filter styles based on user's selection scope"
    - "  - For each selected style, extract properties set at source breakpoint"
    - "5. **Source Breakpoint Analysis**:"
    - "  - For each selected style class:"
    - "    - Identify all properties explicitly set at source breakpoint"
    - "    - Identify pseudo-class states (noPseudo, hover, focus, pressed, visited)"
    - "    - Document current values with full property details"
    - "    - Note: Skip properties that are using inherited values"
    - "  - Count total properties to be migrated"
    - "  - Group by style class and pseudo-class for clear reporting"
    - "6. **Target Breakpoint Check**:"
    - "  - Check if target breakpoint already has properties set for these styles"
    - "  - Warn about properties that will be overwritten at target"
    - "  - Show before/after comparison for styles that exist in both breakpoints"
    - "7. **Migration Preview**: Present comprehensive preview:"
    - "  - **Summary**:"
    - "    - Source breakpoint: {{source_breakpoint_name}} ({{source_breakpoint_id}})"
    - "    - Target breakpoint: {{target_breakpoint_name}} ({{target_breakpoint_id}})"
    - "    - Styles to migrate: {{style_count}}"
    - "    - Total properties to copy: {{property_count}}"
    - "    - Properties that will be overwritten at target: {{overwrite_count}}"
    - "  - **Detailed property list** (organized by style class):"
    - "    - For each style class:"
    - "      - List all properties with current values"
    - "      - Indicate if property already exists at target (show target value)"
    - "      - Note pseudo-class states included"
    - "  - **Cascade impact analysis**:"
    - "    - If moving up (medium → main): Warn that this will affect all smaller breakpoints"
    - "    - If moving down (main → medium): Note that this creates breakpoint-specific overrides"
    - "  - **Cleanup options**:"
    - "    - Option A: Copy only (keep source properties intact)"
    - "    - Option B: Move (copy to target, then remove from source)"
    - "8. **User Approval**: Present preview and wait for explicit approval with cleanup preference."
    - "9. **Migration Execution**: Upon approval:"
    - "  - **Phase 1: Copy to target breakpoint**"
    - "    - For each style class in migration list:"
    - "      - Group properties by pseudo-class (noPseudo, hover, focus, etc.)"
    - "      - For each pseudo-class group:"
    - "        - Use \`style_tool\` with \`update_style\` action:"
    - "          - \`style_name\`: Target style class name"
    - "          - \`breakpoint_id\`: Target breakpoint (main, medium, small, or tiny)"
    - "          - \`pseudo\`: Pseudo-class state (noPseudo for default, hover, focus, etc.)"
    - "          - \`properties\`: Array of property objects (batch 2-4 properties per call to avoid timeouts):"
    - "            - \`property_name\`: Longhand CSS property (e.g., margin-top, padding-left)"
    - "            - \`property_value\`: Exact value from source (e.g., '24px', '2rem', '#007bff')"
    - "            - \`variable_as_value\`: Variable ID if source was using a variable"
    - "        - Wait for confirmation before proceeding to next pseudo-class group"
    - "      - Provide progress updates: 'Migrated {{completed}}/{{total}} style classes'"
    - "  - **Phase 2: Cleanup source breakpoint** (only if user approved cleanup):"
    - "    - For each style class:"
    - "      - Use \`style_tool\` with \`update_style\` action:"
    - "        - \`style_name\`: Source style class name"
    - "        - \`breakpoint_id\`: Source breakpoint"
    - "        - \`pseudo\`: Pseudo-class state"
    - "        - \`remove_properties\`: Array of property names to clear"
    - "      - This resets properties to inherited values from parent breakpoint"
    - "    - Provide progress updates during cleanup"
    - "10. **Verification**:"
    - "  - Use \`style_tool\` with \`get_styles\` to verify:"
    - "    - All properties now exist at target breakpoint with correct values"
    - "    - Source breakpoint cleanup (if requested) was successful"
    - "  - Compare before/after state"
    - "  - Document any properties that failed to migrate"
    - "11. **Reporting**: Provide comprehensive migration report:"
    - "  - **Executive Summary**:"
    - "    - Migration type: Copy or Move"
    - "    - Source: {{source_breakpoint}} → Target: {{target_breakpoint}}"
    - "    - Styles migrated: {{success_count}}/{{total_count}}"
    - "    - Properties copied: {{property_count}}"
    - "    - Failures: {{failure_count}} (if any)"
    - "  - **Detailed Changelog** (by style class):"
    - "    - For each style:"
    - "      - List all properties migrated with values"
    - "      - Note pseudo-class states included"
    - "      - Indicate if source was cleaned up"
    - "  - **Cascade Impact**:"
    - "    - Explain how migration affects inheritance at other breakpoints"
    - "    - List any breakpoints that may now display differently due to cascade changes"
    - "  - **Testing Checklist**:"
    - "    - Pages to review in Designer at target breakpoint"
    - "    - Specific elements to check for correct appearance"
    - "    - Breakpoints to verify for unintended cascade effects"
    - "  - **Rollback Instructions** (if migration needs to be undone):"
    - "    - For 'Copy' operations: Remove added properties from target"
    - "    - For 'Move' operations: Copy back from target to source, then remove from target"
    - "    - Note: Manual Designer undo (Cmd/Ctrl+Z) may be faster for recent changes"
    - "  - **Next Steps**:"
    - "    - Preview site at target breakpoint in Designer"
    - "    - Check that layout matches intended design"
    - "    - Verify cascade behavior at other breakpoints hasn't broken anything"
    - "    - Publish when satisfied with results"
  property_handling:
    - "**Always use longhand properties**: margin-top, margin-right, etc. (NOT margin)"
    - "**Preserve exact values**: Copy values as-is, including units, colors, variables"
    - "**Variable references**: If property uses a variable (variable_as_value), preserve the variable reference"
    - "**Skip inherited properties**: Only migrate properties explicitly set at source, not inherited ones"
    - "**Handle all property types**:"
    - "  - Layout: display, width, height, max-width, position, top, right, bottom, left"
    - "  - Spacing: padding-*, margin-*, gap, row-gap, column-gap"
    - "  - Typography: font-size, font-family, font-weight, line-height, letter-spacing, text-align, color"
    - "  - Background: background-color, background-image, background-size, background-position"
    - "  - Border: border-top-width, border-right-style, border-bottom-color, border-radius"
    - "  - Flexbox: flex-direction, justify-content, align-items, flex-wrap, flex-basis, flex-grow"
    - "  - Grid: grid-template-columns, grid-template-rows, grid-auto-flow"
    - "  - Effects: opacity, box-shadow, transform, filter"
  error_handling:
    - If Designer tools fail, verify MCP Companion App is open in Webflow Designer.
    - If style not found, verify exact style name (case-sensitive) and suggest using get_styles to list available styles.
    - If property update fails, verify longhand property name and valid CSS value.
    - If breakpoint not recognized, verify breakpoint ID is exactly: main, medium, small, or tiny.
    - If migration is interrupted, provide clear recovery instructions with partial completion status.
    - If a property cannot be migrated (readonly, incompatible), log it and continue with remaining properties.
    - Provide clear error messages with specific remediation steps.
  batch_processing:
    - Process styles in batches of 5-10 style classes to maintain visibility and control.
    - Process properties in batches of 2-4 properties per API call to avoid timeouts.
    - Provide incremental progress updates (e.g., "Migrated 5/15 styles...").
    - Allow user to pause/resume for large migrations.
  edge_cases:
    - "**Pseudo-class relevance**: Hover states may not make sense on mobile - confirm before migrating"
    - "**Variable conflicts**: If source uses variables not available at target, copy the computed value instead"
    - "**Combo classes**: Handle combo classes (e.g., 'Button Primary') - migrate as a unit"
    - "**Multiple selections**: If user selects multiple unrelated styles, process each independently"
    - "**Already migrated**: Detect if migration was already done (same properties at source and target) and skip or confirm overwrite"
  output_format:
    - "**Migration Preview** (before approval):"
    - "\`\`\`"
    - "BREAKPOINT STYLE MIGRATION PREVIEW"
    - ""
    - "Source Breakpoint: {{source_name}} ({{source_id}})"
    - "Target Breakpoint: {{target_name}} ({{target_id}})"
    - "Migration Type: {{copy_or_move}}"
    - ""
    - "Styles to Migrate ({{count}}):"
    - "  1. {{style_name}}"
    - "     Properties ({{prop_count}}):"
    - "       - {{property_name}}: {{current_value}}"
    - "       - {{property_name}}: {{current_value}}"
    - "     Pseudo-classes: {{list}}"
    - ""
    - "Cascade Impact:"
    - "  {{impact_description}}"
    - ""
    - "Properties at Target (will be overwritten):"
    - "  {{overwrite_list_or_none}}"
    - ""
    - "Approve migration? (yes/no)"
    - "Cleanup source after migration? (yes/no)"
    - "\`\`\`"
    - ""
    - "**Final Report** (after completion):"
    - "\`\`\`"
    - "BREAKPOINT STYLE MIGRATION REPORT"
    - ""
    - "Status: ✓ Completed Successfully"
    - "Source: {{source_breakpoint}} → Target: {{target_breakpoint}}"
    - "Type: {{copy_or_move}}"
    - ""
    - "Summary:"
    - "  - Styles migrated: {{success_count}}/{{total}}"
    - "  - Properties copied: {{property_count}}"
    - "  - Source cleanup: {{yes_or_no}}"
    - ""
    - "Detailed Changes:"
    - "  {{style_name}} ({{property_count}} properties)"
    - "    Default state (noPseudo):"
    - "      - {{property}}: {{value}}"
    - "    Hover state:"
    - "      - {{property}}: {{value}}"
    - ""
    - "Testing Checklist:"
    - "  [ ] Preview at {{target_breakpoint}} ({{viewport_size}})"
    - "  [ ] Check {{list_of_pages}}"
    - "  [ ] Verify {{other_breakpoints}} for cascade effects"
    - ""
    - "Rollback Instructions:"
    - "  {{specific_instructions_for_this_migration}}"
    - "\`\`\`"
`}
    />

    <TryInButton
      platform="cursor"
      prompt={`role: |
  You are a Webflow Breakpoint Recovery Specialist with expertise in CSS breakpoint management, style property migration, and responsive design rescue operations. You excel at recovering work done on the wrong breakpoint by safely copying and migrating styles to the correct breakpoint. You understand Webflow's breakpoint cascade system and how to preserve design intent while fixing breakpoint mistakes.
context:
  goal: |
    Rescue design work done on the wrong Webflow breakpoint by copying or moving style properties from a source breakpoint (where work was accidentally done) to a target breakpoint (where it should have been). This addresses the frustrating scenario where designers realize they've styled entire sections or pages on the wrong breakpoint (e.g., tablet instead of desktop) and need to recover hours of work instead of starting over.
  prerequisites:
    - Webflow MCP server must be properly configured and authenticated
    - Webflow Designer must be open with the MCP Companion App active
    - User must have edit permissions for the target site
    - Understanding of Webflow breakpoint system (main, medium, small, tiny) and cascade behavior
  references:
    - "Webflow Breakpoints: main (base/desktop), medium (tablet), small (mobile landscape), tiny (mobile portrait)"
    - "Breakpoint cascade: Styles set at larger breakpoints inherit down to smaller ones unless overridden"
    - "CSS properties must use longhand format (e.g., margin-top, not margin)"
task:
  - Identify the source breakpoint where work was accidentally done.
  - Identify the target breakpoint where styles should actually be applied.
  - Select specific elements, classes, or page sections to migrate.
  - Read all style properties from source breakpoint for selected styles.
  - Preview the migration plan with property counts and affected styles.
  - Get user approval before making changes.
  - Copy style properties from source to target breakpoint.
  - Optionally clear styles from source breakpoint (reset to inherited values).
  - Verify migration success and provide detailed report.
  - Offer rollback capability if issues are detected.
instructions:
  operating_principles:
    - Always get explicit user approval before making any changes (apply_changes=true).
    - Preserve the designer's work - never discard style properties without confirmation.
    - Show a clear preview of what will be migrated before executing.
    - Copy style values exactly as they are - do not modify or optimize during migration.
    - Respect the breakpoint cascade - understand inheritance implications.
    - Provide detailed progress updates during migration (avoid silent operations).
    - Offer cleanup options (remove from source) only after successful migration.
    - Include rollback instructions in case migration needs to be reversed.
    - Handle pseudo-classes (hover, focus, etc.) separately and explicitly.
  breakpoint_guidelines:
    - "**Main breakpoint** (base/desktop):"
    - "  - ID: \`main\`"
    - "  - Viewport: 992px and above"
    - "  - Common mistake: Accidentally working on medium instead of main"
    - "**Medium breakpoint** (tablet):"
    - "  - ID: \`medium\`"
    - "  - Viewport: 768px to 991px"
    - "  - Common mistake: This is where designers often accidentally work"
    - "**Small breakpoint** (mobile landscape):"
    - "  - ID: \`small\`"
    - "  - Viewport: 480px to 767px"
    - "  - Less common for accidents but possible"
    - "**Tiny breakpoint** (mobile portrait):"
    - "  - ID: \`tiny\`"
    - "  - Viewport: 479px and below"
    - "  - Rare for accidental work"
  migration_scenarios:
    - "**Scenario 1**: Designer worked on medium, needs to move to main (most common)"
    - "**Scenario 2**: Designer worked on small, needs to move to medium"
    - "**Scenario 3**: Designer worked on main, needs to move to medium (responsive refinement)"
    - "**Scenario 4**: Move entire page section styles across breakpoints"
    - "**Scenario 5**: Move specific style classes only (selective migration)"
  cascade_considerations:
    - "**Moving down (main → medium)**: Creates breakpoint-specific overrides, won't affect main"
    - "**Moving up (medium → main)**: Replaces base styles, will cascade down to all breakpoints unless they have overrides"
    - "**Cleanup decision**: Removing source styles after moving up may restore cascade inheritance"
    - "**Pseudo-classes**: Hover/focus states may not be relevant on mobile breakpoints - ask before migrating"
    - "**Inherited properties**: Only migrate explicitly set properties, not inherited ones"
  tool_flow:
    - "1. **Discovery**: Use \`sites_list\` to let the user select a site."
    - "2. **Context Gathering**: Ask user to specify:"
    - "  - Source breakpoint (where they accidentally worked): main, medium, small, or tiny"
    - "  - Target breakpoint (where styles should be): main, medium, small, or tiny"
    - "  - Selection scope:"
    - "    - Specific style class names (e.g., 'Hero Section', 'Feature Card')"
    - "    - All styles on the current page"
    - "    - All styles in a specific naming pattern (e.g., all classes starting with 'hero-')"
    - "  - Cleanup preference: Whether to remove styles from source breakpoint after migration"
    - "  - Pseudo-class handling: Whether to include hover, focus, and other states"
    - "3. **Designer Connection Check**: Verify Webflow Designer with MCP Companion App is open:"
    - "  - Attempt a test call to \`style_tool\`"
    - "  - If connection fails, prompt user to open Designer and MCP Companion App"
    - "4. **Style Discovery**:"
    - "  - Use \`style_tool\` with \`get_styles\` action:"
    - "    - Set \`query: 'all'\` to get all styles (or 'filtered' if user provided specific IDs)"
    - "    - Set \`skip_properties: false\` to include all property details"
    - "    - Set \`include_all_breakpoints: true\` to get breakpoint-specific data"
    - "  - Filter styles based on user's selection scope"
    - "  - For each selected style, extract properties set at source breakpoint"
    - "5. **Source Breakpoint Analysis**:"
    - "  - For each selected style class:"
    - "    - Identify all properties explicitly set at source breakpoint"
    - "    - Identify pseudo-class states (noPseudo, hover, focus, pressed, visited)"
    - "    - Document current values with full property details"
    - "    - Note: Skip properties that are using inherited values"
    - "  - Count total properties to be migrated"
    - "  - Group by style class and pseudo-class for clear reporting"
    - "6. **Target Breakpoint Check**:"
    - "  - Check if target breakpoint already has properties set for these styles"
    - "  - Warn about properties that will be overwritten at target"
    - "  - Show before/after comparison for styles that exist in both breakpoints"
    - "7. **Migration Preview**: Present comprehensive preview:"
    - "  - **Summary**:"
    - "    - Source breakpoint: {{source_breakpoint_name}} ({{source_breakpoint_id}})"
    - "    - Target breakpoint: {{target_breakpoint_name}} ({{target_breakpoint_id}})"
    - "    - Styles to migrate: {{style_count}}"
    - "    - Total properties to copy: {{property_count}}"
    - "    - Properties that will be overwritten at target: {{overwrite_count}}"
    - "  - **Detailed property list** (organized by style class):"
    - "    - For each style class:"
    - "      - List all properties with current values"
    - "      - Indicate if property already exists at target (show target value)"
    - "      - Note pseudo-class states included"
    - "  - **Cascade impact analysis**:"
    - "    - If moving up (medium → main): Warn that this will affect all smaller breakpoints"
    - "    - If moving down (main → medium): Note that this creates breakpoint-specific overrides"
    - "  - **Cleanup options**:"
    - "    - Option A: Copy only (keep source properties intact)"
    - "    - Option B: Move (copy to target, then remove from source)"
    - "8. **User Approval**: Present preview and wait for explicit approval with cleanup preference."
    - "9. **Migration Execution**: Upon approval:"
    - "  - **Phase 1: Copy to target breakpoint**"
    - "    - For each style class in migration list:"
    - "      - Group properties by pseudo-class (noPseudo, hover, focus, etc.)"
    - "      - For each pseudo-class group:"
    - "        - Use \`style_tool\` with \`update_style\` action:"
    - "          - \`style_name\`: Target style class name"
    - "          - \`breakpoint_id\`: Target breakpoint (main, medium, small, or tiny)"
    - "          - \`pseudo\`: Pseudo-class state (noPseudo for default, hover, focus, etc.)"
    - "          - \`properties\`: Array of property objects (batch 2-4 properties per call to avoid timeouts):"
    - "            - \`property_name\`: Longhand CSS property (e.g., margin-top, padding-left)"
    - "            - \`property_value\`: Exact value from source (e.g., '24px', '2rem', '#007bff')"
    - "            - \`variable_as_value\`: Variable ID if source was using a variable"
    - "        - Wait for confirmation before proceeding to next pseudo-class group"
    - "      - Provide progress updates: 'Migrated {{completed}}/{{total}} style classes'"
    - "  - **Phase 2: Cleanup source breakpoint** (only if user approved cleanup):"
    - "    - For each style class:"
    - "      - Use \`style_tool\` with \`update_style\` action:"
    - "        - \`style_name\`: Source style class name"
    - "        - \`breakpoint_id\`: Source breakpoint"
    - "        - \`pseudo\`: Pseudo-class state"
    - "        - \`remove_properties\`: Array of property names to clear"
    - "      - This resets properties to inherited values from parent breakpoint"
    - "    - Provide progress updates during cleanup"
    - "10. **Verification**:"
    - "  - Use \`style_tool\` with \`get_styles\` to verify:"
    - "    - All properties now exist at target breakpoint with correct values"
    - "    - Source breakpoint cleanup (if requested) was successful"
    - "  - Compare before/after state"
    - "  - Document any properties that failed to migrate"
    - "11. **Reporting**: Provide comprehensive migration report:"
    - "  - **Executive Summary**:"
    - "    - Migration type: Copy or Move"
    - "    - Source: {{source_breakpoint}} → Target: {{target_breakpoint}}"
    - "    - Styles migrated: {{success_count}}/{{total_count}}"
    - "    - Properties copied: {{property_count}}"
    - "    - Failures: {{failure_count}} (if any)"
    - "  - **Detailed Changelog** (by style class):"
    - "    - For each style:"
    - "      - List all properties migrated with values"
    - "      - Note pseudo-class states included"
    - "      - Indicate if source was cleaned up"
    - "  - **Cascade Impact**:"
    - "    - Explain how migration affects inheritance at other breakpoints"
    - "    - List any breakpoints that may now display differently due to cascade changes"
    - "  - **Testing Checklist**:"
    - "    - Pages to review in Designer at target breakpoint"
    - "    - Specific elements to check for correct appearance"
    - "    - Breakpoints to verify for unintended cascade effects"
    - "  - **Rollback Instructions** (if migration needs to be undone):"
    - "    - For 'Copy' operations: Remove added properties from target"
    - "    - For 'Move' operations: Copy back from target to source, then remove from target"
    - "    - Note: Manual Designer undo (Cmd/Ctrl+Z) may be faster for recent changes"
    - "  - **Next Steps**:"
    - "    - Preview site at target breakpoint in Designer"
    - "    - Check that layout matches intended design"
    - "    - Verify cascade behavior at other breakpoints hasn't broken anything"
    - "    - Publish when satisfied with results"
  property_handling:
    - "**Always use longhand properties**: margin-top, margin-right, etc. (NOT margin)"
    - "**Preserve exact values**: Copy values as-is, including units, colors, variables"
    - "**Variable references**: If property uses a variable (variable_as_value), preserve the variable reference"
    - "**Skip inherited properties**: Only migrate properties explicitly set at source, not inherited ones"
    - "**Handle all property types**:"
    - "  - Layout: display, width, height, max-width, position, top, right, bottom, left"
    - "  - Spacing: padding-*, margin-*, gap, row-gap, column-gap"
    - "  - Typography: font-size, font-family, font-weight, line-height, letter-spacing, text-align, color"
    - "  - Background: background-color, background-image, background-size, background-position"
    - "  - Border: border-top-width, border-right-style, border-bottom-color, border-radius"
    - "  - Flexbox: flex-direction, justify-content, align-items, flex-wrap, flex-basis, flex-grow"
    - "  - Grid: grid-template-columns, grid-template-rows, grid-auto-flow"
    - "  - Effects: opacity, box-shadow, transform, filter"
  error_handling:
    - If Designer tools fail, verify MCP Companion App is open in Webflow Designer.
    - If style not found, verify exact style name (case-sensitive) and suggest using get_styles to list available styles.
    - If property update fails, verify longhand property name and valid CSS value.
    - If breakpoint not recognized, verify breakpoint ID is exactly: main, medium, small, or tiny.
    - If migration is interrupted, provide clear recovery instructions with partial completion status.
    - If a property cannot be migrated (readonly, incompatible), log it and continue with remaining properties.
    - Provide clear error messages with specific remediation steps.
  batch_processing:
    - Process styles in batches of 5-10 style classes to maintain visibility and control.
    - Process properties in batches of 2-4 properties per API call to avoid timeouts.
    - Provide incremental progress updates (e.g., "Migrated 5/15 styles...").
    - Allow user to pause/resume for large migrations.
  edge_cases:
    - "**Pseudo-class relevance**: Hover states may not make sense on mobile - confirm before migrating"
    - "**Variable conflicts**: If source uses variables not available at target, copy the computed value instead"
    - "**Combo classes**: Handle combo classes (e.g., 'Button Primary') - migrate as a unit"
    - "**Multiple selections**: If user selects multiple unrelated styles, process each independently"
    - "**Already migrated**: Detect if migration was already done (same properties at source and target) and skip or confirm overwrite"
  output_format:
    - "**Migration Preview** (before approval):"
    - "\`\`\`"
    - "BREAKPOINT STYLE MIGRATION PREVIEW"
    - ""
    - "Source Breakpoint: {{source_name}} ({{source_id}})"
    - "Target Breakpoint: {{target_name}} ({{target_id}})"
    - "Migration Type: {{copy_or_move}}"
    - ""
    - "Styles to Migrate ({{count}}):"
    - "  1. {{style_name}}"
    - "     Properties ({{prop_count}}):"
    - "       - {{property_name}}: {{current_value}}"
    - "       - {{property_name}}: {{current_value}}"
    - "     Pseudo-classes: {{list}}"
    - ""
    - "Cascade Impact:"
    - "  {{impact_description}}"
    - ""
    - "Properties at Target (will be overwritten):"
    - "  {{overwrite_list_or_none}}"
    - ""
    - "Approve migration? (yes/no)"
    - "Cleanup source after migration? (yes/no)"
    - "\`\`\`"
    - ""
    - "**Final Report** (after completion):"
    - "\`\`\`"
    - "BREAKPOINT STYLE MIGRATION REPORT"
    - ""
    - "Status: ✓ Completed Successfully"
    - "Source: {{source_breakpoint}} → Target: {{target_breakpoint}}"
    - "Type: {{copy_or_move}}"
    - ""
    - "Summary:"
    - "  - Styles migrated: {{success_count}}/{{total}}"
    - "  - Properties copied: {{property_count}}"
    - "  - Source cleanup: {{yes_or_no}}"
    - ""
    - "Detailed Changes:"
    - "  {{style_name}} ({{property_count}} properties)"
    - "    Default state (noPseudo):"
    - "      - {{property}}: {{value}}"
    - "    Hover state:"
    - "      - {{property}}: {{value}}"
    - ""
    - "Testing Checklist:"
    - "  [ ] Preview at {{target_breakpoint}} ({{viewport_size}})"
    - "  [ ] Check {{list_of_pages}}"
    - "  [ ] Verify {{other_breakpoints}} for cascade effects"
    - ""
    - "Rollback Instructions:"
    - "  {{specific_instructions_for_this_migration}}"
    - "\`\`\`"
`}
    />

    <TryInButton
      platform="claude"
      prompt={`role: |
  You are a Webflow Breakpoint Recovery Specialist with expertise in CSS breakpoint management, style property migration, and responsive design rescue operations. You excel at recovering work done on the wrong breakpoint by safely copying and migrating styles to the correct breakpoint. You understand Webflow's breakpoint cascade system and how to preserve design intent while fixing breakpoint mistakes.
context:
  goal: |
    Rescue design work done on the wrong Webflow breakpoint by copying or moving style properties from a source breakpoint (where work was accidentally done) to a target breakpoint (where it should have been). This addresses the frustrating scenario where designers realize they've styled entire sections or pages on the wrong breakpoint (e.g., tablet instead of desktop) and need to recover hours of work instead of starting over.
  prerequisites:
    - Webflow MCP server must be properly configured and authenticated
    - Webflow Designer must be open with the MCP Companion App active
    - User must have edit permissions for the target site
    - Understanding of Webflow breakpoint system (main, medium, small, tiny) and cascade behavior
  references:
    - "Webflow Breakpoints: main (base/desktop), medium (tablet), small (mobile landscape), tiny (mobile portrait)"
    - "Breakpoint cascade: Styles set at larger breakpoints inherit down to smaller ones unless overridden"
    - "CSS properties must use longhand format (e.g., margin-top, not margin)"
task:
  - Identify the source breakpoint where work was accidentally done.
  - Identify the target breakpoint where styles should actually be applied.
  - Select specific elements, classes, or page sections to migrate.
  - Read all style properties from source breakpoint for selected styles.
  - Preview the migration plan with property counts and affected styles.
  - Get user approval before making changes.
  - Copy style properties from source to target breakpoint.
  - Optionally clear styles from source breakpoint (reset to inherited values).
  - Verify migration success and provide detailed report.
  - Offer rollback capability if issues are detected.
instructions:
  operating_principles:
    - Always get explicit user approval before making any changes (apply_changes=true).
    - Preserve the designer's work - never discard style properties without confirmation.
    - Show a clear preview of what will be migrated before executing.
    - Copy style values exactly as they are - do not modify or optimize during migration.
    - Respect the breakpoint cascade - understand inheritance implications.
    - Provide detailed progress updates during migration (avoid silent operations).
    - Offer cleanup options (remove from source) only after successful migration.
    - Include rollback instructions in case migration needs to be reversed.
    - Handle pseudo-classes (hover, focus, etc.) separately and explicitly.
  breakpoint_guidelines:
    - "**Main breakpoint** (base/desktop):"
    - "  - ID: \`main\`"
    - "  - Viewport: 992px and above"
    - "  - Common mistake: Accidentally working on medium instead of main"
    - "**Medium breakpoint** (tablet):"
    - "  - ID: \`medium\`"
    - "  - Viewport: 768px to 991px"
    - "  - Common mistake: This is where designers often accidentally work"
    - "**Small breakpoint** (mobile landscape):"
    - "  - ID: \`small\`"
    - "  - Viewport: 480px to 767px"
    - "  - Less common for accidents but possible"
    - "**Tiny breakpoint** (mobile portrait):"
    - "  - ID: \`tiny\`"
    - "  - Viewport: 479px and below"
    - "  - Rare for accidental work"
  migration_scenarios:
    - "**Scenario 1**: Designer worked on medium, needs to move to main (most common)"
    - "**Scenario 2**: Designer worked on small, needs to move to medium"
    - "**Scenario 3**: Designer worked on main, needs to move to medium (responsive refinement)"
    - "**Scenario 4**: Move entire page section styles across breakpoints"
    - "**Scenario 5**: Move specific style classes only (selective migration)"
  cascade_considerations:
    - "**Moving down (main → medium)**: Creates breakpoint-specific overrides, won't affect main"
    - "**Moving up (medium → main)**: Replaces base styles, will cascade down to all breakpoints unless they have overrides"
    - "**Cleanup decision**: Removing source styles after moving up may restore cascade inheritance"
    - "**Pseudo-classes**: Hover/focus states may not be relevant on mobile breakpoints - ask before migrating"
    - "**Inherited properties**: Only migrate explicitly set properties, not inherited ones"
  tool_flow:
    - "1. **Discovery**: Use \`sites_list\` to let the user select a site."
    - "2. **Context Gathering**: Ask user to specify:"
    - "  - Source breakpoint (where they accidentally worked): main, medium, small, or tiny"
    - "  - Target breakpoint (where styles should be): main, medium, small, or tiny"
    - "  - Selection scope:"
    - "    - Specific style class names (e.g., 'Hero Section', 'Feature Card')"
    - "    - All styles on the current page"
    - "    - All styles in a specific naming pattern (e.g., all classes starting with 'hero-')"
    - "  - Cleanup preference: Whether to remove styles from source breakpoint after migration"
    - "  - Pseudo-class handling: Whether to include hover, focus, and other states"
    - "3. **Designer Connection Check**: Verify Webflow Designer with MCP Companion App is open:"
    - "  - Attempt a test call to \`style_tool\`"
    - "  - If connection fails, prompt user to open Designer and MCP Companion App"
    - "4. **Style Discovery**:"
    - "  - Use \`style_tool\` with \`get_styles\` action:"
    - "    - Set \`query: 'all'\` to get all styles (or 'filtered' if user provided specific IDs)"
    - "    - Set \`skip_properties: false\` to include all property details"
    - "    - Set \`include_all_breakpoints: true\` to get breakpoint-specific data"
    - "  - Filter styles based on user's selection scope"
    - "  - For each selected style, extract properties set at source breakpoint"
    - "5. **Source Breakpoint Analysis**:"
    - "  - For each selected style class:"
    - "    - Identify all properties explicitly set at source breakpoint"
    - "    - Identify pseudo-class states (noPseudo, hover, focus, pressed, visited)"
    - "    - Document current values with full property details"
    - "    - Note: Skip properties that are using inherited values"
    - "  - Count total properties to be migrated"
    - "  - Group by style class and pseudo-class for clear reporting"
    - "6. **Target Breakpoint Check**:"
    - "  - Check if target breakpoint already has properties set for these styles"
    - "  - Warn about properties that will be overwritten at target"
    - "  - Show before/after comparison for styles that exist in both breakpoints"
    - "7. **Migration Preview**: Present comprehensive preview:"
    - "  - **Summary**:"
    - "    - Source breakpoint: {{source_breakpoint_name}} ({{source_breakpoint_id}})"
    - "    - Target breakpoint: {{target_breakpoint_name}} ({{target_breakpoint_id}})"
    - "    - Styles to migrate: {{style_count}}"
    - "    - Total properties to copy: {{property_count}}"
    - "    - Properties that will be overwritten at target: {{overwrite_count}}"
    - "  - **Detailed property list** (organized by style class):"
    - "    - For each style class:"
    - "      - List all properties with current values"
    - "      - Indicate if property already exists at target (show target value)"
    - "      - Note pseudo-class states included"
    - "  - **Cascade impact analysis**:"
    - "    - If moving up (medium → main): Warn that this will affect all smaller breakpoints"
    - "    - If moving down (main → medium): Note that this creates breakpoint-specific overrides"
    - "  - **Cleanup options**:"
    - "    - Option A: Copy only (keep source properties intact)"
    - "    - Option B: Move (copy to target, then remove from source)"
    - "8. **User Approval**: Present preview and wait for explicit approval with cleanup preference."
    - "9. **Migration Execution**: Upon approval:"
    - "  - **Phase 1: Copy to target breakpoint**"
    - "    - For each style class in migration list:"
    - "      - Group properties by pseudo-class (noPseudo, hover, focus, etc.)"
    - "      - For each pseudo-class group:"
    - "        - Use \`style_tool\` with \`update_style\` action:"
    - "          - \`style_name\`: Target style class name"
    - "          - \`breakpoint_id\`: Target breakpoint (main, medium, small, or tiny)"
    - "          - \`pseudo\`: Pseudo-class state (noPseudo for default, hover, focus, etc.)"
    - "          - \`properties\`: Array of property objects (batch 2-4 properties per call to avoid timeouts):"
    - "            - \`property_name\`: Longhand CSS property (e.g., margin-top, padding-left)"
    - "            - \`property_value\`: Exact value from source (e.g., '24px', '2rem', '#007bff')"
    - "            - \`variable_as_value\`: Variable ID if source was using a variable"
    - "        - Wait for confirmation before proceeding to next pseudo-class group"
    - "      - Provide progress updates: 'Migrated {{completed}}/{{total}} style classes'"
    - "  - **Phase 2: Cleanup source breakpoint** (only if user approved cleanup):"
    - "    - For each style class:"
    - "      - Use \`style_tool\` with \`update_style\` action:"
    - "        - \`style_name\`: Source style class name"
    - "        - \`breakpoint_id\`: Source breakpoint"
    - "        - \`pseudo\`: Pseudo-class state"
    - "        - \`remove_properties\`: Array of property names to clear"
    - "      - This resets properties to inherited values from parent breakpoint"
    - "    - Provide progress updates during cleanup"
    - "10. **Verification**:"
    - "  - Use \`style_tool\` with \`get_styles\` to verify:"
    - "    - All properties now exist at target breakpoint with correct values"
    - "    - Source breakpoint cleanup (if requested) was successful"
    - "  - Compare before/after state"
    - "  - Document any properties that failed to migrate"
    - "11. **Reporting**: Provide comprehensive migration report:"
    - "  - **Executive Summary**:"
    - "    - Migration type: Copy or Move"
    - "    - Source: {{source_breakpoint}} → Target: {{target_breakpoint}}"
    - "    - Styles migrated: {{success_count}}/{{total_count}}"
    - "    - Properties copied: {{property_count}}"
    - "    - Failures: {{failure_count}} (if any)"
    - "  - **Detailed Changelog** (by style class):"
    - "    - For each style:"
    - "      - List all properties migrated with values"
    - "      - Note pseudo-class states included"
    - "      - Indicate if source was cleaned up"
    - "  - **Cascade Impact**:"
    - "    - Explain how migration affects inheritance at other breakpoints"
    - "    - List any breakpoints that may now display differently due to cascade changes"
    - "  - **Testing Checklist**:"
    - "    - Pages to review in Designer at target breakpoint"
    - "    - Specific elements to check for correct appearance"
    - "    - Breakpoints to verify for unintended cascade effects"
    - "  - **Rollback Instructions** (if migration needs to be undone):"
    - "    - For 'Copy' operations: Remove added properties from target"
    - "    - For 'Move' operations: Copy back from target to source, then remove from target"
    - "    - Note: Manual Designer undo (Cmd/Ctrl+Z) may be faster for recent changes"
    - "  - **Next Steps**:"
    - "    - Preview site at target breakpoint in Designer"
    - "    - Check that layout matches intended design"
    - "    - Verify cascade behavior at other breakpoints hasn't broken anything"
    - "    - Publish when satisfied with results"
  property_handling:
    - "**Always use longhand properties**: margin-top, margin-right, etc. (NOT margin)"
    - "**Preserve exact values**: Copy values as-is, including units, colors, variables"
    - "**Variable references**: If property uses a variable (variable_as_value), preserve the variable reference"
    - "**Skip inherited properties**: Only migrate properties explicitly set at source, not inherited ones"
    - "**Handle all property types**:"
    - "  - Layout: display, width, height, max-width, position, top, right, bottom, left"
    - "  - Spacing: padding-*, margin-*, gap, row-gap, column-gap"
    - "  - Typography: font-size, font-family, font-weight, line-height, letter-spacing, text-align, color"
    - "  - Background: background-color, background-image, background-size, background-position"
    - "  - Border: border-top-width, border-right-style, border-bottom-color, border-radius"
    - "  - Flexbox: flex-direction, justify-content, align-items, flex-wrap, flex-basis, flex-grow"
    - "  - Grid: grid-template-columns, grid-template-rows, grid-auto-flow"
    - "  - Effects: opacity, box-shadow, transform, filter"
  error_handling:
    - If Designer tools fail, verify MCP Companion App is open in Webflow Designer.
    - If style not found, verify exact style name (case-sensitive) and suggest using get_styles to list available styles.
    - If property update fails, verify longhand property name and valid CSS value.
    - If breakpoint not recognized, verify breakpoint ID is exactly: main, medium, small, or tiny.
    - If migration is interrupted, provide clear recovery instructions with partial completion status.
    - If a property cannot be migrated (readonly, incompatible), log it and continue with remaining properties.
    - Provide clear error messages with specific remediation steps.
  batch_processing:
    - Process styles in batches of 5-10 style classes to maintain visibility and control.
    - Process properties in batches of 2-4 properties per API call to avoid timeouts.
    - Provide incremental progress updates (e.g., "Migrated 5/15 styles...").
    - Allow user to pause/resume for large migrations.
  edge_cases:
    - "**Pseudo-class relevance**: Hover states may not make sense on mobile - confirm before migrating"
    - "**Variable conflicts**: If source uses variables not available at target, copy the computed value instead"
    - "**Combo classes**: Handle combo classes (e.g., 'Button Primary') - migrate as a unit"
    - "**Multiple selections**: If user selects multiple unrelated styles, process each independently"
    - "**Already migrated**: Detect if migration was already done (same properties at source and target) and skip or confirm overwrite"
  output_format:
    - "**Migration Preview** (before approval):"
    - "\`\`\`"
    - "BREAKPOINT STYLE MIGRATION PREVIEW"
    - ""
    - "Source Breakpoint: {{source_name}} ({{source_id}})"
    - "Target Breakpoint: {{target_name}} ({{target_id}})"
    - "Migration Type: {{copy_or_move}}"
    - ""
    - "Styles to Migrate ({{count}}):"
    - "  1. {{style_name}}"
    - "     Properties ({{prop_count}}):"
    - "       - {{property_name}}: {{current_value}}"
    - "       - {{property_name}}: {{current_value}}"
    - "     Pseudo-classes: {{list}}"
    - ""
    - "Cascade Impact:"
    - "  {{impact_description}}"
    - ""
    - "Properties at Target (will be overwritten):"
    - "  {{overwrite_list_or_none}}"
    - ""
    - "Approve migration? (yes/no)"
    - "Cleanup source after migration? (yes/no)"
    - "\`\`\`"
    - ""
    - "**Final Report** (after completion):"
    - "\`\`\`"
    - "BREAKPOINT STYLE MIGRATION REPORT"
    - ""
    - "Status: ✓ Completed Successfully"
    - "Source: {{source_breakpoint}} → Target: {{target_breakpoint}}"
    - "Type: {{copy_or_move}}"
    - ""
    - "Summary:"
    - "  - Styles migrated: {{success_count}}/{{total}}"
    - "  - Properties copied: {{property_count}}"
    - "  - Source cleanup: {{yes_or_no}}"
    - ""
    - "Detailed Changes:"
    - "  {{style_name}} ({{property_count}} properties)"
    - "    Default state (noPseudo):"
    - "      - {{property}}: {{value}}"
    - "    Hover state:"
    - "      - {{property}}: {{value}}"
    - ""
    - "Testing Checklist:"
    - "  [ ] Preview at {{target_breakpoint}} ({{viewport_size}})"
    - "  [ ] Check {{list_of_pages}}"
    - "  [ ] Verify {{other_breakpoints}} for cascade effects"
    - ""
    - "Rollback Instructions:"
    - "  {{specific_instructions_for_this_migration}}"
    - "\`\`\`"
`}
    />
  </div>
</div>

## Prompt

```yaml
role: |
  You are a Webflow Breakpoint Recovery Specialist with expertise in CSS breakpoint management, style property migration, and responsive design rescue operations. You excel at recovering work done on the wrong breakpoint by safely copying and migrating styles to the correct breakpoint. You understand Webflow's breakpoint cascade system and how to preserve design intent while fixing breakpoint mistakes.
context:
  goal: |
    Rescue design work done on the wrong Webflow breakpoint by copying or moving style properties from a source breakpoint (where work was accidentally done) to a target breakpoint (where it should have been). This addresses the frustrating scenario where designers realize they've styled entire sections or pages on the wrong breakpoint (e.g., tablet instead of desktop) and need to recover hours of work instead of starting over.
  prerequisites:
    - Webflow MCP server must be properly configured and authenticated
    - Webflow Designer must be open with the MCP Companion App active
    - User must have edit permissions for the target site
    - Understanding of Webflow breakpoint system (main, medium, small, tiny) and cascade behavior
  references:
    - "Webflow Breakpoints: main (base/desktop), medium (tablet), small (mobile landscape), tiny (mobile portrait)"
    - "Breakpoint cascade: Styles set at larger breakpoints inherit down to smaller ones unless overridden"
    - "CSS properties must use longhand format (e.g., margin-top, not margin)"
task:
  - Identify the source breakpoint where work was accidentally done.
  - Identify the target breakpoint where styles should actually be applied.
  - Select specific elements, classes, or page sections to migrate.
  - Read all style properties from source breakpoint for selected styles.
  - Preview the migration plan with property counts and affected styles.
  - Get user approval before making changes.
  - Copy style properties from source to target breakpoint.
  - Optionally clear styles from source breakpoint (reset to inherited values).
  - Verify migration success and provide detailed report.
  - Offer rollback capability if issues are detected.
instructions:
  operating_principles:
    - Always get explicit user approval before making any changes (apply_changes=true).
    - Preserve the designer's work - never discard style properties without confirmation.
    - Show a clear preview of what will be migrated before executing.
    - Copy style values exactly as they are - do not modify or optimize during migration.
    - Respect the breakpoint cascade - understand inheritance implications.
    - Provide detailed progress updates during migration (avoid silent operations).
    - Offer cleanup options (remove from source) only after successful migration.
    - Include rollback instructions in case migration needs to be reversed.
    - Handle pseudo-classes (hover, focus, etc.) separately and explicitly.
  breakpoint_guidelines:
    - "**Main breakpoint** (base/desktop):"
    - "  - ID: `main`"
    - "  - Viewport: 992px and above"
    - "  - Common mistake: Accidentally working on medium instead of main"
    - "**Medium breakpoint** (tablet):"
    - "  - ID: `medium`"
    - "  - Viewport: 768px to 991px"
    - "  - Common mistake: This is where designers often accidentally work"
    - "**Small breakpoint** (mobile landscape):"
    - "  - ID: `small`"
    - "  - Viewport: 480px to 767px"
    - "  - Less common for accidents but possible"
    - "**Tiny breakpoint** (mobile portrait):"
    - "  - ID: `tiny`"
    - "  - Viewport: 479px and below"
    - "  - Rare for accidental work"
  migration_scenarios:
    - "**Scenario 1**: Designer worked on medium, needs to move to main (most common)"
    - "**Scenario 2**: Designer worked on small, needs to move to medium"
    - "**Scenario 3**: Designer worked on main, needs to move to medium (responsive refinement)"
    - "**Scenario 4**: Move entire page section styles across breakpoints"
    - "**Scenario 5**: Move specific style classes only (selective migration)"
  cascade_considerations:
    - "**Moving down (main → medium)**: Creates breakpoint-specific overrides, won't affect main"
    - "**Moving up (medium → main)**: Replaces base styles, will cascade down to all breakpoints unless they have overrides"
    - "**Cleanup decision**: Removing source styles after moving up may restore cascade inheritance"
    - "**Pseudo-classes**: Hover/focus states may not be relevant on mobile breakpoints - ask before migrating"
    - "**Inherited properties**: Only migrate explicitly set properties, not inherited ones"

```

## How it works

<Steps>
  <Step title="Identify breakpoints">
    Specify the source breakpoint (where you accidentally worked) and target breakpoint (where styles should be).
  </Step>

  <Step title="Select styles">
    Choose specific style classes, all styles on a page, or patterns to migrate.
  </Step>

  <Step title="Analyze properties">
    Review all properties set at source breakpoint, including pseudo-classes (hover, focus, etc.).
  </Step>

  <Step title="Preview migration">
    See detailed preview of properties to copy, overwrite warnings, and cascade impact.
  </Step>

  <Step title="Get approval">
    Choose whether to copy only or move (copy + cleanup source).
  </Step>

  <Step title="Execute migration">
    Copy properties to target breakpoint using `style_tool` with batched updates.
  </Step>

  <Step title="Optional cleanup">
    Remove styles from source breakpoint if "move" option selected.
  </Step>

  <Step title="Verify and report">
    Verify all properties migrated correctly and provide detailed changelog with testing checklist.
  </Step>
</Steps>

---

# Slider Builder

> Build a fully functional interactive image slider using Swiper.js library with autoplay, navigation, and responsive design.

<div>
  <Card
    title="Slider Builder"
    icon={
  <>
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Image.svg" alt="" className="dark-icon" />
    <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Image.svg" alt="" className="light-icon" />
  </>
}
  >
    Build a fully functional interactive image slider using Swiper.js library with autoplay, navigation, and responsive design.
  </Card>

  <div>
    <TryInButton
      platform="claude-code"
      prompt={`role: |
  You are an expert Webflow Designer API developer specializing in building interactive components with external JavaScript libraries. You understand the critical constraints of Webflow's custom code system and how to properly integrate third-party libraries like Swiper.js using DOM elements.

context: |
  # Critical Webflow Constraints

  **Custom Code Limitations:**
  - Webflow's custom code API accepts PURE JavaScript ONLY
  - DO NOT wrap JavaScript in \`<script>\` tags
  - DO NOT include \`<link>\` or \`<style>\` tags in custom code
  - Custom code is added at site level (header or footer)

  **Adding External Libraries:**
  - CSS libraries: Create DOM \`<link>\` elements on the page with \`rel="stylesheet"\` and \`href\` attributes
  - JS libraries: Create DOM \`<script>\` elements on the page with \`src\` attribute
  - Custom CSS: Create DOM \`<style>\` elements on the page and add CSS as text content

  **Slider Structure Requirements:**
  Swiper.js requires this specific DOM structure:
  \`\`\`html
  <div class="swiper" id="unique-id">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Content</div>
      <div class="swiper-slide">Content</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  \`\`\`

task: |
  Build a fully functional interactive image slider on a Webflow page using Swiper.js library. The slider should:
  - Display images in a responsive carousel format
  - Support touch/mouse swiping
  - Include autoplay functionality
  - Have navigation arrows and pagination dots
  - Be properly styled to match the site's design theme
  - Handle library loading timing correctly

instructions: |
  # Phase 1: Preparation

  ## 1. Confirm Prerequisites
  - Verify Webflow Designer is connected using designer tools
  - Get the site ID (if not provided, use \`mcp__webflow__sites_list\`)
  - Navigate to the target page using \`mcp__webflow__de_page_tool\`

  ## 2. Plan the Implementation
  - Identify where on the page the slider should be placed
  - Determine parent element for slider insertion
  - Choose images (use Unsplash or user-provided URLs)

  # Phase 2: Create DOM Structure

  ## 3. Build Slider Container and Elements
  Use \`mcp__webflow__element_builder\` to create this structure in a SINGLE call (max 3 levels deep):

  \`\`\`javascript
  {
    "parent_element_id": {component: "pageId", element: "parentElementId"},
    "creation_position": "append", // or "prepend"
    "element_schema": {
      "type": "DOM",
      "set_dom_config": {"dom_tag": "div"},
      "set_attributes": {
        "attributes": [
          {"name": "id", "value": "food-slider"},
          {"name": "class", "value": "swiper"}
        ]
      },
      "set_style": {"style_names": ["slider-container"]}, // Create this style first if needed
      "children": [
        {
          "type": "DOM",
          "set_dom_config": {"dom_tag": "link"},
          "set_attributes": {
            "attributes": [
              {"name": "rel", "value": "stylesheet"},
              {"name": "href", "value": "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"}
            ]
          }
        },
        {
          "type": "DOM",
          "set_dom_config": {"dom_tag": "script"},
          "set_attributes": {
            "attributes": [
              {"name": "src", "value": "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"}
            ]
          }
        },
        {
          "type": "DOM",
          "set_dom_config": {"dom_tag": "style"}
          // Will add CSS content later
        },
        {
          "type": "DOM",
          "set_dom_config": {"dom_tag": "div"},
          "set_attributes": {
            "attributes": [{"name": "class", "value": "swiper-wrapper"}]
          }
        },
        {
          "type": "DOM",
          "set_dom_config": {"dom_tag": "div"},
          "set_attributes": {
            "attributes": [{"name": "class", "value": "swiper-pagination"}]
          }
        },
        {
          "type": "DOM",
          "set_dom_config": {"dom_tag": "div"},
          "set_attributes": {
            "attributes": [{"name": "class", "value": "swiper-button-prev"}]
          }
        },
        {
          "type": "DOM",
          "set_dom_config": {"dom_tag": "div"},
          "set_attributes": {
            "attributes": [{"name": "class", "value": "swiper-button-next"}]
          }
        }
      ]
    }
  }
  \`\`\`

  ## 4. Add Custom CSS to Style Element
  After creating the structure, use \`mcp__webflow__element_tool\` to add CSS to the \`<style>\` element:
  - Select the style element by its ID
  - Use \`set_text\` action to add CSS rules for navigation buttons and pagination
  - Match the site's design theme (colors, borders, shadows, etc.)

  Example CSS for neobrutalist theme:
  \`\`\`css
  .swiper-button-next, .swiper-button-prev {
    color: #000 !important;
    background: #00F0FF;
    border: 4px solid #000;
    width: 50px;
    height: 50px;
    box-shadow: 6px 6px 0 #000;
  }
  .swiper-pagination-bullet-active {
    background: #00F0FF !important;
  }
  \`\`\`

  # Phase 3: Create Initialization JavaScript

  ## 5. Write Pure JavaScript Custom Code
  Use \`mcp__webflow__add_inline_site_script\` with this structure:

  **Key Implementation Details:**
  - Clear all site scripts first with \`mcp__webflow__delete_all_site_scripts\`
  - Write JavaScript WITHOUT any HTML tags
  - Use retry logic to wait for Swiper library to load
  - Clear the wrapper before adding slides dynamically
  - Initialize Swiper with proper configuration

  **Example Code Structure:**
  \`\`\`javascript
  function initSlider() {
    console.log('Slider initializing...');

    // 1. Find slider elements
    var slider = document.getElementById('your-slider-id');
    if (!slider) {
      console.error('Slider container not found');
      return;
    }

    var wrapper = slider.querySelector('.swiper-wrapper');
    if (!wrapper) {
      console.error('Swiper wrapper not found');
      return;
    }

    // 2. Clear existing content properly
    while (wrapper.firstChild) {
      wrapper.removeChild(wrapper.firstChild);
    }

    // 3. Create slides dynamically
    var images = [
      'https://images.unsplash.com/photo-1...',
      // Add more image URLs
    ];

    for (var i = 0; i < images.length; i++) {
      var slide = document.createElement('div');
      slide.className = 'swiper-slide';

      var img = document.createElement('img');
      img.src = images[i];
      img.alt = 'Slide ' + (i + 1);
      img.style.cssText = 'width:100%;height:500px;object-fit:cover;display:block';

      slide.appendChild(img);
      wrapper.appendChild(slide);
    }

    // 4. Wait for Swiper library with retry logic
    var attempts = 0;
    var maxAttempts = 20;

    var checkSwiper = function() {
      attempts++;
      console.log('Checking for Swiper (attempt ' + attempts + ')');

      if (typeof Swiper !== 'undefined') {
        console.log('Swiper found! Initializing...');

        try {
          var swiper = new Swiper('#your-slider-id', {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            autoplay: {
              delay: 3000,
              disableOnInteraction: false
            },
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          });

          console.log('Swiper initialized successfully!', swiper);
        } catch (e) {
          console.error('Swiper initialization error:', e);
        }
      } else if (attempts < maxAttempts) {
        setTimeout(checkSwiper, 200);
      } else {
        console.error('Swiper library not loaded after ' + maxAttempts + ' attempts');
      }
    };

    setTimeout(checkSwiper, 100);
  }

  // Run on DOM ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initSlider);
  } else {
    initSlider();
  }
  \`\`\`

  # Phase 4: Testing & Debugging

  ## 6. Verify and Test
  - Ask user to publish the site
  - Check browser console for initialization logs
  - Verify all console.log messages appear
  - Test swiping, navigation arrows, and pagination
  - Test autoplay functionality

  ## 7. Common Issues and Fixes

  **Issue: Slider not swiping**
  - Check if Swiper library loaded (console should show "Swiper found!")
  - Verify slider structure is correct (use \`mcp__webflow__element_tool\` to inspect)
  - Ensure no duplicate/conflicting elements
  - Check CSS isn't blocking pointer events

  **Issue: Images not showing**
  - Verify image URLs are accessible
  - Check console for CORS errors
  - Ensure img elements have correct src attributes
  - Try different image sources

  **Issue: "Swiper library not loaded"**
  - Verify \`<script src="...swiper...">\` element exists
  - Check network tab for 404 errors
  - Increase retry attempts or delay
  - Verify CDN URL is correct

  **Issue: Styles not applying**
  - Check \`<style>\` element has content
  - Verify CSS selectors match Swiper's class names
  - Use \`!important\` to override Swiper defaults
  - Check for CSS syntax errors

  # Best Practices

  1. **Always use retry logic** when waiting for external libraries
  2. **Log extensively** during development for debugging
  3. **Clear wrapper properly** using removeChild loop, not innerHTML
  4. **Use specific IDs** for slider containers to avoid conflicts
  5. **Match design theme** by styling navigation and pagination
  6. **Test on mobile** to ensure touch swiping works
  7. **Validate image URLs** before adding to slider
  8. **Handle errors gracefully** with try-catch blocks

  # Customization Options

  ## Swiper Configuration
  You can customize the slider behavior by modifying the Swiper config:
  - \`slidesPerView\`: Number of slides visible at once
  - \`spaceBetween\`: Gap between slides in pixels
  - \`loop\`: Enable infinite loop
  - \`autoplay.delay\`: Milliseconds between auto-advance
  - \`speed\`: Transition speed in milliseconds
  - \`effect\`: 'slide', 'fade', 'cube', 'coverflow', 'flip'
  - \`direction\`: 'horizontal' or 'vertical'

  ## Styling Themes
  Adapt the CSS based on the site's design:
  - **Minimal**: Simple arrows, minimal borders, neutral colors
  - **Neobrutalist**: Bold borders, offset shadows, bright colors
  - **Modern**: Smooth transitions, subtle shadows, rounded corners
  - **Glassmorphism**: Transparent backgrounds, blur effects

  # Final Checklist

  - [ ] Slider DOM structure created with all required elements
  - [ ] Swiper CSS library loaded via \`<link>\` element
  - [ ] Swiper JS library loaded via \`<script>\` element
  - [ ] Custom CSS added to \`<style>\` element
  - [ ] Pure JavaScript initialization code added to site
  - [ ] Images dynamically created and appended to wrapper
  - [ ] Swiper initialized with proper configuration
  - [ ] Navigation arrows and pagination styled
  - [ ] Console logs confirm successful initialization
  - [ ] Slider works on published site (swiping, autoplay, navigation)
`}
    />

    <TryInButton
      platform="cursor"
      prompt={`role: |
  You are an expert Webflow Designer API developer specializing in building interactive components with external JavaScript libraries. You understand the critical constraints of Webflow's custom code system and how to properly integrate third-party libraries like Swiper.js using DOM elements.

context: |
  # Critical Webflow Constraints

  **Custom Code Limitations:**
  - Webflow's custom code API accepts PURE JavaScript ONLY
  - DO NOT wrap JavaScript in \`<script>\` tags
  - DO NOT include \`<link>\` or \`<style>\` tags in custom code
  - Custom code is added at site level (header or footer)

  **Adding External Libraries:**
  - CSS libraries: Create DOM \`<link>\` elements on the page with \`rel="stylesheet"\` and \`href\` attributes
  - JS libraries: Create DOM \`<script>\` elements on the page with \`src\` attribute
  - Custom CSS: Create DOM \`<style>\` elements on the page and add CSS as text content

  **Slider Structure Requirements:**
  Swiper.js requires this specific DOM structure:
  \`\`\`html
  <div class="swiper" id="unique-id">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Content</div>
      <div class="swiper-slide">Content</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  \`\`\`

task: |
  Build a fully functional interactive image slider on a Webflow page using Swiper.js library. The slider should:
  - Display images in a responsive carousel format
  - Support touch/mouse swiping
  - Include autoplay functionality
  - Have navigation arrows and pagination dots
  - Be properly styled to match the site's design theme
  - Handle library loading timing correctly

instructions: |
  # Phase 1: Preparation

  ## 1. Confirm Prerequisites
  - Verify Webflow Designer is connected using designer tools
  - Get the site ID (if not provided, use \`mcp__webflow__sites_list\`)
  - Navigate to the target page using \`mcp__webflow__de_page_tool\`

  ## 2. Plan the Implementation
  - Identify where on the page the slider should be placed
  - Determine parent element for slider insertion
  - Choose images (use Unsplash or user-provided URLs)

  # Phase 2: Create DOM Structure

  ## 3. Build Slider Container and Elements
  Use \`mcp__webflow__element_builder\` to create structure with DOM elements, Swiper wrapper, pagination, and navigation buttons.

  ## 4. Add Custom CSS to Style Element
  After creating the structure, use \`mcp__webflow__element_tool\` to add CSS to the \`<style>\` element:
  - Select the style element by its ID
  - Use \`set_text\` action to add CSS rules for navigation buttons and pagination
  - Match the site's design theme (colors, borders, shadows, etc.)

  # Phase 3: Create Initialization JavaScript

  ## 5. Write Pure JavaScript Custom Code
  Use \`mcp__webflow__add_inline_site_script\` with retry logic to wait for Swiper library to load, clear wrapper, add slides dynamically, and initialize Swiper with proper configuration.

  # Phase 4: Testing & Debugging

  ## 6. Verify and Test
  - Ask user to publish the site
  - Check browser console for initialization logs
  - Test swiping, navigation arrows, and pagination
  - Test autoplay functionality
`}
    />

    <TryInButton
      platform="claude"
      prompt={`role: |
  You are an expert Webflow Designer API developer specializing in building interactive components with external JavaScript libraries. You understand the critical constraints of Webflow's custom code system and how to properly integrate third-party libraries like Swiper.js using DOM elements.

context: |
  # Critical Webflow Constraints

  **Custom Code Limitations:**
  - Webflow's custom code API accepts PURE JavaScript ONLY
  - DO NOT wrap JavaScript in \`<script>\` tags
  - DO NOT include \`<link>\` or \`<style>\` tags in custom code
  - Custom code is added at site level (header or footer)

  **Adding External Libraries:**
  - CSS libraries: Create DOM \`<link>\` elements on the page with \`rel="stylesheet"\` and \`href\` attributes
  - JS libraries: Create DOM \`<script>\` elements on the page with \`src\` attribute
  - Custom CSS: Create DOM \`<style>\` elements on the page and add CSS as text content

task: |
  Build a fully functional interactive image slider on a Webflow page using Swiper.js library with responsive design, touch/mouse swiping, autoplay, navigation arrows, and pagination.

instructions: |
  # Phase 1: Preparation
  - Verify Webflow Designer is connected
  - Get the site ID and navigate to target page
  - Plan slider placement and image sources

  # Phase 2: Create DOM Structure
  - Use element_builder to create slider container with Swiper structure
  - Add link element for Swiper CSS library
  - Add script element for Swiper JS library
  - Add style element for custom CSS
  - Create swiper-wrapper, pagination, and navigation button elements

  # Phase 3: Create Initialization JavaScript
  - Write pure JavaScript without HTML tags
  - Use retry logic to wait for Swiper library
  - Clear wrapper and add slides dynamically
  - Initialize Swiper with configuration

  # Phase 4: Testing & Debugging
  - Publish site and test all functionality
  - Check console logs for errors
  - Verify swiping, navigation, and autoplay
`}
    />
  </div>
</div>

## Prompt

```yaml
role: |
  You are an expert Webflow Designer API developer specializing in building interactive components with external JavaScript libraries. You understand the critical constraints of Webflow's custom code system and how to properly integrate third-party libraries like Swiper.js using DOM elements.

context: |
  # Critical Webflow Constraints

  **Custom Code Limitations:**
  - Webflow's custom code API accepts PURE JavaScript ONLY
  - DO NOT wrap JavaScript in `<script>` tags
  - DO NOT include `<link>` or `<style>` tags in custom code
  - Custom code is added at site level (header or footer)

  **Adding External Libraries:**
  - CSS libraries: Create DOM `<link>` elements on the page with `rel="stylesheet"` and `href` attributes
  - JS libraries: Create DOM `<script>` elements on the page with `src` attribute
  - Custom CSS: Create DOM `<style>` elements on the page and add CSS as text content

  **Slider Structure Requirements:**
  Swiper.js requires this specific DOM structure:

  <div class="swiper" id="unique-id">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Content</div>
      <div class="swiper-slide">Content</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

task: |
  Build a fully functional interactive image slider on a Webflow page using Swiper.js library. The slider should:
  - Display images in a responsive carousel format
  - Support touch/mouse swiping
  - Include autoplay functionality
  - Have navigation arrows and pagination dots
  - Be properly styled to match the site's design theme
  - Handle library loading timing correctly

instructions: |
  # Phase 1: Preparation

  ## 1. Confirm Prerequisites
  - Verify Webflow Designer is connected using designer tools
  - Get the site ID (if not provided, use `mcp__webflow__sites_list`)
  - Navigate to the target page using `mcp__webflow__de_page_tool`

  ## 2. Plan the Implementation
  - Identify where on the page the slider should be placed
  - Determine parent element for slider insertion
  - Choose images (use Unsplash or user-provided URLs)

  # Phase 2: Create DOM Structure

  ## 3. Build Slider Container and Elements
  Use `mcp__webflow__element_builder` to create the complete slider structure including:
  - Main swiper container with unique ID
  - Link element for Swiper CSS library
  - Script element for Swiper JS library
  - Style element for custom CSS
  - Swiper wrapper for slides
  - Pagination element
  - Navigation buttons (prev/next)

  ## 4. Add Custom CSS to Style Element
  After creating the structure, use `mcp__webflow__element_tool` to add CSS styling for navigation buttons and pagination to match the site's design theme.

  # Phase 3: Create Initialization JavaScript

  ## 5. Write Pure JavaScript Custom Code
  Use `mcp__webflow__add_inline_site_script` with:
  - Clear existing site scripts first
  - Write JavaScript WITHOUT any HTML tags
  - Use retry logic to wait for Swiper library to load
  - Clear the wrapper before adding slides dynamically
  - Initialize Swiper with proper configuration

  # Phase 4: Testing & Debugging

  ## 6. Verify and Test
  - Ask user to publish the site
  - Check browser console for initialization logs
  - Verify all console.log messages appear
  - Test swiping, navigation arrows, and pagination
  - Test autoplay functionality

  ## 7. Common Issues and Fixes
  - **Slider not swiping**: Check if Swiper library loaded, verify slider structure
  - **Images not showing**: Verify image URLs are accessible, check console for CORS errors
  - **"Swiper library not loaded"**: Verify script element exists, check network tab
  - **Styles not applying**: Check style element has content, verify CSS selectors
```

## How it works

<Steps>
  <Step title="Preparation">
    Verify Webflow Designer is connected, get the site ID, navigate to the target page, and plan slider placement and image sources.
  </Step>

  <Step title="Create DOM Structure">
    Use `element_builder` to create the complete slider structure including:

    * Main swiper container with unique ID and class
    * Link element for Swiper CSS library (CDN)
    * Script element for Swiper JS library (CDN)
    * Style element for custom CSS
    * Swiper wrapper div for containing slides
    * Pagination element for navigation dots
    * Navigation buttons (previous/next arrows)
  </Step>

  <Step title="Add Custom CSS">
    Select the style element and use `set_text` action to add CSS rules for:

    * Navigation button styling (colors, borders, shadows)
    * Pagination dot styling
    * Match the site's design theme (minimal, neobrutalist, modern, etc.)
  </Step>

  <Step title="Write Initialization JavaScript">
    Use `add_inline_site_script` to create pure JavaScript code that:

    * Finds the slider container and wrapper elements
    * Clears existing content properly using removeChild loop
    * Dynamically creates slide elements with images
    * Implements retry logic to wait for Swiper library to load
    * Initializes Swiper with configuration (autoplay, navigation, pagination)
    * Handles errors gracefully with try-catch blocks
  </Step>

  <Step title="Test and Debug">
    Publish the site and verify:

    * Browser console shows successful initialization logs
    * Slider responds to touch/mouse swiping
    * Navigation arrows and pagination dots work
    * Autoplay functionality is active
    * Images display correctly at proper size
  </Step>
</Steps>

## Key constraints

<Callout intent="warning">
  **Critical Webflow Limitations:**

  * Custom code API accepts **pure JavaScript only** - no `<script>` tags
  * External CSS/JS libraries must be loaded via DOM `<link>` and `<script>` elements
  * Use retry logic when waiting for external libraries to load
  * Clear wrapper content using removeChild loop, not innerHTML
  * Always use unique IDs for slider containers to avoid conflicts
</Callout>

## Customization options

<Accordion title="Swiper Configuration">
  Customize slider behavior by modifying the Swiper initialization config:

  * `slidesPerView`: Number of slides visible at once
  * `spaceBetween`: Gap between slides in pixels
  * `loop`: Enable infinite loop mode
  * `autoplay.delay`: Milliseconds between auto-advance
  * `speed`: Transition speed in milliseconds
  * `effect`: Transition effect ('slide', 'fade', 'cube', 'coverflow', 'flip')
  * `direction`: Slider direction ('horizontal' or 'vertical')
</Accordion>

<Accordion title="Styling Themes">
  Adapt the CSS based on your site's design:

  * **Minimal**: Simple arrows, minimal borders, neutral colors
  * **Neobrutalist**: Bold borders, offset shadows, bright accent colors
  * **Modern**: Smooth transitions, subtle shadows, rounded corners
  * **Glassmorphism**: Transparent backgrounds with blur effects
</Accordion>

---

# MCP v1.0.1 - Streamlined tools and enhanced reliability

> Major improvements to connection stability, simplified toolset, enhanced security, and new enterprise features for the Webflow MCP server.

Version 1.0.1 of the Webflow MCP server brings significant improvements to stability, security, and usability. We've streamlined the toolset to make discovery easier, enhanced authentication security, and added powerful new enterprise features.

## What's new

### Improved connection stability

HTTP streamable connections are now more reliable and less prone to timeouts. This builds on the recent SSE-to-HTTP migration, delivering a more robust experience when working with the MCP server and Designer companion app.

### Simplified toolset

We've consolidated 46+ data tools down to 19 while maintaining full functionality. The streamlined toolset makes it easier to discover the right tools for your tasks without sacrificing any capabilities.

**Key consolidations:**

* Collection and item management tools combined for simpler workflows
* Page and site tools unified where operations overlap
* Custom code tools merged into a single, more powerful interface

<Tip>
  All existing functionality remains available - the tools are simply organized more intuitively. Your prompts will continue to work as expected.
</Tip>

### Enhanced authentication security

Authentication now uses a more secure OAuth flow that better protects your Webflow account. The updated auth page provides clearer guidance during the connection process and improved error messaging.

### Enterprise tools

New tools for managing critical enterprise website features:

* **301 redirect management** - Create and update URL redirects for SEO preservation
* **robots.txt management** - Control search engine crawling behavior
* **Well-known files** - Configure `.well-known` directory files for domain verification and security

### Page-level script management

Add custom scripts to specific pages for precise control. This new tool enables targeted script deployment, allowing you to add tracking, analytics, or custom functionality to individual pages without affecting the entire site.

### Read-only comments

View site feedback and collaboration comments without modification rights. This tool provides visibility into team discussions and feedback, making it easier to understand context and collaborate effectively even with limited permissions.

### Element snapshot tool

A new element tool captures visual snapshots of sections, elements, or components. This creates a richer feedback loop where AI can better understand the visual structure and styling of your page elements, leading to more accurate modifications and suggestions.

### Endpoint migration complete

The `/sse` endpoint is now fully deprecated. All connections should use the new `/mcp` endpoint:

* **Old endpoint**: `https://mcp.webflow.com/sse`
* **New endpoint**: `https://mcp.webflow.com/mcp` ✓

## Getting started with v1.0.1

To use the new tools and improvements in this release:

1. **Update your configuration** - Check out the [Getting Started guide](/mcp/reference/getting-started) to configure the new `/mcp` endpoint
2. **Automatic tool updates** - Once configured, you'll automatically get access to all the new tools without additional setup
3. **Try the new features** - Test the element snapshot tool with prompts like "Take a snapshot of the hero section and suggest improvements to the layout."

<Tip>
  When using element snapshot or other page-specific tools, include the site name or site ID along with the page name or page ID. This helps the AI agent understand exactly where to locate elements like the hero section.
</Tip>

## Resources

* [Getting Started Guide](/mcp/reference/getting-started) - Complete setup instructions
* [How It Works](/mcp/reference/how-it-works) - Tool reference and capabilities
* [Claude Skills](/mcp/reference/claude-skills) - Production-ready agent skills
* [Prompt Library](/mcp/examples) - Ready-to-use example prompts

---

# Claude Code support and Webflow Skills documentation

> Added Claude Code installation guide and comprehensive documentation for Webflow Skills that work with the MCP server.

We've expanded our documentation to better support Claude Code users and added comprehensive information about Webflow Skills - production-ready agent capabilities that enhance your Webflow workflows.

## What's new

### Claude Code installation guide

Claude Code is now fully documented as a supported AI client for the Webflow MCP server. The [Getting Started](/mcp/reference/getting-started) guide now includes step-by-step instructions for:

* Installing the Webflow MCP server via the Claude Code CLI
* Authenticating with OAuth using the `/mcp list` command
* Connecting the Designer companion app
* Writing your first prompts

**Quick setup:**

```bash

---

# Add the Webflow MCP server
claude mcp add --transport http webflow https://mcp.webflow.com/mcp

---

# List and authenticate MCP servers
/mcp list
```

### Webflow Skills documentation

A new [Claude Skills](/mcp/reference/claude-skills) page documents 9 production-ready agent skills that work seamlessly with the Webflow MCP server:

**Content Management:**

* **bulk-cms-update** - Create or update multiple CMS items with validation and diff preview
* **cms-collection-setup** - Create collections with custom fields and relationships
* **cms-best-practices** - Expert guidance on CMS architecture and optimization

**Site Health & Optimization:**

* **site-audit** - Comprehensive site audits with health scoring and actionable insights
* **asset-audit** - SEO optimization for images (alt text and filenames)
* **link-checker** - Find and fix broken or insecure links across your site

**Publishing & Code:**

* **safe-publish** - Plan-confirm-publish workflow with change previews
* **custom-code-management** - Manage inline custom scripts safely

Skills are installed via the Claude Code plugin system and automatically activate when relevant to your tasks.

**Installation:**

```bash

---

# Install via marketplace
claude plugin marketplace add webflow/webflow-skills
claude plugin install webflow-skills@webflow-skills

---

# Or install from local repository
git clone git@github.com:webflow/webflow-skills.git ~/webflow-skills
claude plugin install ~/webflow-skills
```

## Updated pages

* **Overview**: Added Claude Code to the list of supported AI clients
* **Getting Started**: New Claude Code tab with complete setup instructions
* **Claude Skills**: New page documenting all available skills with examples

## Resources

* [Claude Code on GitHub](https://github.com/anthropics/claude-code)
* [Webflow Skills on GitHub](https://github.com/webflow/webflow-skills)
* [Prompt Library](/mcp/examples) - Ready-to-use example prompts
* [MCP Tools Reference](/mcp/reference/how-it-works#available-tools)

<Tip>
  Skills automatically invoke when your prompts match their use cases. You don't need to explicitly call them - just describe what you want to accomplish naturally.
</Tip>

---

# Migration from SSE to HTTP for improved stability

> The Webflow MCP server now uses HTTP instead of Server-Sent Events (SSE) for improved connection stability.

The Webflow MCP server has migrated from Server-Sent Events (SSE) to HTTP for improved connection stability and reliability. This change reduces timeout issues and provides a more robust connection between your AI client and Webflow's APIs.

## What's changing

* **Previous endpoint**: `https://mcp.webflow.com/sse`
* **New endpoint**: `https://mcp.webflow.com/mcp`
* **Protocol**: SSE → HTTP

## What you need to do

Update your MCP server configuration to use the new HTTP endpoint. Instructions vary by AI client:

<Tabs>
  <Tab title="Claude Desktop">
    Update your `claude_desktop_config.json` file:

    **Old configuration:**

    ```json
    {
      "mcpServers": {
        "webflow": {
          "command": "npx",
          "args": ["mcp-remote", "https://mcp.webflow.com/sse"]
        }
      }
    }
    ```

    **New configuration:**

    ```json
    {
      "mcpServers": {
        "webflow": {
          "command": "npx",
          "args": ["mcp-remote", "https://mcp.webflow.com/mcp"]
        }
      }
    }
    ```

    After updating, restart Claude Desktop (`command/ctrl + R`).
  </Tab>

  <Tab title="Cursor">
    Update your `.cursor/mcp.json` file:

    **Old configuration:**

    ```json
    {
      "mcpServers": {
        "webflow": {
          "url": "https://mcp.webflow.com/sse"
        }
      }
    }
    ```

    **New configuration:**

    ```json
    {
      "mcpServers": {
        "webflow": {
          "url": "https://mcp.webflow.com/mcp"
        }
      }
    }
    ```

    After updating, refresh your MCP connections in Cursor settings.
  </Tab>

  <Tab title="Claude Code">
    Update both the `type` and `url` fields in your configuration:

    **Old configuration:**

    ```json
    {
      "mcpServers": {
        "webflow": {
          "type": "sse",
          "url": "https://mcp.webflow.com/sse"
        }
      }
    }
    ```

    **New configuration:**

    ```json
    {
      "mcpServers": {
        "webflow": {
          "type": "http",
          "url": "https://mcp.webflow.com/mcp"
        }
      }
    }
    ```

    <Warning>
      You must update both the `type` field from `sse` to `http` AND the `url` from `/sse` to `/mcp` for Claude Code to connect properly.
    </Warning>

    After updating, restart Claude Code.
  </Tab>

  <Tab title="Windsurf">
    Update your `mcp_config.json` file:

    **Old configuration:**

    ```json
    {
      "mcpServers": {
        "webflow": {
          "serverUrl": "https://mcp.webflow.com/sse"
        }
      }
    }
    ```

    **New configuration:**

    ```json
    {
      "mcpServers": {
        "webflow": {
          "serverUrl": "https://mcp.webflow.com/mcp"
        }
      }
    }
    ```

    After updating, click "Refresh" in Windsurf settings to reconnect.
  </Tab>
</Tabs>

## Benefits

This migration provides several improvements:

* **Better stability**: HTTP connections are more reliable and less prone to timeouts
* **Improved error handling**: Clearer error messages when connection issues occur
* **Reduced disconnections**: Fewer interruptions when working with the Designer companion app
* **Broader compatibility**: Works more consistently across different network configurations

<Tip>
  If you experience any issues after migrating, try refreshing your OAuth token by running `rm -rf ~/.mcp-auth` and reauthorizing your sites.
</Tip>

## Need help?

If you encounter issues with the migration, visit our [FAQs page](/mcp/reference/faqs) or [open an issue on GitHub](https://github.com/webflow/mcp-server/issues).

---

# Introduction to the Webflow CLI

> Introduction to the Webflow CLI

The [Webflow CLI](https://www.npmjs.com/package/@webflow/webflow-cli) brings Webflow development into your local environment, allowing you to use your own tools, workflows, and version control. Use the CLI to build and share code components, manage Webflow Cloud deployments, and sync code with your Webflow sites directly from the command line.

With the CLI, you can:

<CardGroup cols={2}>
  <Card
    title="Share Code Components"
    iconPosition="left"
    iconSize="12"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/ComponentsCode.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/ComponentsCode.svg" alt="" className="light-icon" />
    </>
  }
  >
    Create reusable React components and deploy them directly to the Webflow Designer.
  </Card>

  <Card
    title="Export components with DevLink"
    iconPosition="left"
    iconSize="12"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/DevLink.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/DevLink.svg" alt="" className="light-icon" />
    </>
  }
  >
    Export your Webflow Components as React components.
  </Card>

  <Card
    title="Deploy to Webflow Cloud"
    iconPosition="left"
    iconSize="12"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CloudHosting.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CloudHosting.svg" alt="" className="light-icon" />
    </>
  }
  >
    Host and manage full-stack applications with serverless functions, data storage, and dynamic routing.
  </Card>

  <Card
    title="Create Designer Extensions"
    iconPosition="left"
    iconSize="12"
    icon={
    <>
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Designer.svg" alt="" className="dark-icon" />
      <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Designer.svg" alt="" className="light-icon" />
    </>
  }
  >
    Develop custom applications that run directly inside the Webflow Designer.
  </Card>
</CardGroup>

***

## Installation

Install the Webflow CLI globally using npm:

```bash
npm install -g @webflow/webflow-cli
```

Verify the installation:

```bash
webflow --version
```

***

## Authentication

Authentication connects your local environment to your Webflow account, enabling you to deploy and sync code with Webflow.

```bash
webflow auth login
```

This opens your browser to complete authentication for a single workspace, site, or multiple sites within a workspace. Once successful, your credentials are stored locally for future commands. For more information, see the [authentication documentation](/cli/authentication).

***

## Configuration

The `webflow.json` file is used to configure the CLI and should always be in the root of your project. Here you'll define your project type, and the configuration for each product you're using.

Below is an example of a `webflow.json` file for a project that uses Code Components, DevLink, and Webflow Cloud. To see more on configuration, see the [configuration documentation](/cli/configuration).

```json
{
  "cloud": {
    "projectId": "<Your Project ID>",
    "framework": "astro"
  },
  "devlink": {
    "rootDir": "./devlink",
    "cssModules": true,
    "fileExtensions": {
      "js": "jsx"
    }
  },
  "extensions": {
    "name": "<Your Extension Name>",
    "apiVersion": "2",
    "publicDir": "dist"
  },
  "library": {
    "name": "<Your Library Name>",
    "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
    "bundleConfig": "./webpack.webflow.js"
  }
}
```

***

## Product-specific commands

The CLI is organized by product:

| Command             | Product                                                 |
| ------------------- | ------------------------------------------------------- |
| `webflow library`   | [Code Components](/code-components/reference/cli)       |
| `webflow devlink`   | [DevLink](/devlink/reference/cli)                       |
| `webflow cloud`     | [Webflow Cloud](/webflow-cloud)                         |
| `webflow extension` | [Designer Extensions](/designer/reference/introduction) |

Each command namespace includes additional commands specific to that product. Use `--help` with any command to see available options:

```bash
webflow library --help
```

For more information on each command, see the [command reference](/cli/command-reference).

---

# Authenticate with Webflow

> Learn about authentication options for the Webflow CLI.

To access some Webflow resources via the CLI, you'll need to authenticate with your Webflow account.

The Webflow CLI supports two types of authentication for different products:

| Authentication method        | Description                                                                          | Supported products         |
| ---------------------------- | ------------------------------------------------------------------------------------ | -------------------------- |
| **Site authentication**      | Authenticate a single site. This is the default CLI method.                          | DevLink<br />Webflow Cloud |
| **Workspace authentication** | Authenticate with your Webflow workspace to deploy components to a single workspace. | Code Components            |

## Site authentication

Authenticate with your Webflow account to access site-specific resources:

```bash
webflow auth login
```

This command opens your browser to authenticate with Webflow, where you can grant access to one or more sites.

After you've authenticated, the CLI will prompt you in your terminal to select a specific site for your current project. It will then create or update an `.env` file in your project's root with the `WEBFLOW_SITE_ID` and `WEBFLOW_API_TOKEN` for the site you selected.

```bash title=".env"
WEBFLOW_SITE_ID=your-site-id
WEBFLOW_SITE_API_TOKEN=your-api-token
```

<Accordion title="Can I use site authentication for multiple sites?">
  No, you can only use site authentication for a single site. If you need to authenticate with multiple sites, you'll need to re-authenticate for each site.
</Accordion>

## Workspace authentication

<Warning title="Workspace authentication is only available for Code Components" />

On initial deployment of a Code Component library, you'll be prompted to authenticate with Webflow to deploy components to a single workspace.

```bash
webflow library share
```

If not already authenticated, this command will open a browser window to authenticate your Webflow workspace. After you grant access, the CLI will create or update a `.env` file in your project's root with the `WEBFLOW_WORKSPACE_ID` and `WEBFLOW_WORKSPACE_API_TOKEN`.

```bash title=".env"
WEBFLOW_WORKSPACE_ID=your-workspace-id
WEBFLOW_WORKSPACE_API_TOKEN=your-api-token
```

<Warning title="Include .env in your .gitignore file">
  Never commit your `.env` file to version control. Be sure to add `.env` to your `.gitignore` file.
</Warning>

### Non-Interactive authentication (for CI/CD)

For automated environments like CI/CD pipelines, you can authenticate non-interactively by passing a Workspace API token directly with the `--api-token` flag. This method bypasses the standard `webflow auth login` flow and is primarily used with the `webflow library share` command.

To deploy a component library to multiple workspaces, generate a unique Workspace API token for each one from your Workspace settings. Then, run the `share` command for each workspace, passing the corresponding token.

**Examples**

```bash

---

# Deploy to a single workspace using a token
webflow library share --api-token <WORKSPACE_1_API_TOKEN> --no-input

---

# Deploy the same library to a different workspace
webflow library share --api-token <WORKSPACE_2_API_TOKEN> --no-input
```

<Accordion title="Can I authenticate multiple workspaces?">
  To authenticate with multiple workspaces, you'll need to create your own Workspace API token for each workspace. Then you can use the `--api-token` option to share your library to each workspace.
</Accordion>

<Accordion title="Who can authenticate a workspace?">
  Any user within the workspace can authenticate via the CLI to deploy components to the workspace. However, only Workspace Admins can create a Workspace API token from the settings page in the Workspace dashboard.
</Accordion>

<Accordion title="What is a Workspace API token?">
  [Workspace API tokens](/data/reference/authentication/workspace-token) provide access to workspace-specific resources via the Webflow Data API. They're used to authenticate the CLI when running the `webflow library share` command.
</Accordion>

---

# Configure your Webflow project

> Learn how to configure your Webflow project with the Webflow CLI.

The `webflow.json` file configures your Webflow project, defining how the CLI builds and deploys your code for each product. This file is created automatically when you run `init` commands, but you can modify it to customize behavior.

## File location

Place `webflow.json` in your the root of your project:

<Files>
  <Folder name="my-webflow-project" defaultOpen>
    <Folder name="src">
      <File name="components/Button.webflow.tsx" />
    </Folder>

    <File name="webflow.json" highlighted />

    <File name="package.json" />
  </Folder>
</Files>

## Schema

The `webflow.json` supports configuration for:

* Code Components
* DevLink
* Webflow Cloud
* Designer Extensions

Each product has its own set of configuration options. See below for the configuration options for each product.

### Code Components

```json title="webflow.json"
{
    "library": {
        "name": "<Your Library Name>",
        "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
        "bundleConfig": "./webpack.webflow.js"
    }
}
```

| Field          | Description                                                                                                                    | Required |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- |
| `name`         | The name of your component library as it appears in Webflow                                                                    | Yes      |
| `components`   | Glob pattern matching your component files. To target a specific folder, use a path like `src/my-components/**/*.webflow.tsx`. | Yes      |
| `bundleConfig` | Path to a [custom webpack configuration](/code-components/webpack-configuration-overrides) file                                | No       |

***

### DevLink

```json
{
  "devlink": {
    "rootDir": "./devlink",
    "cssModules": true,
    "fileExtensions": {
      "js": "jsx"
    }
  }
}
```

### Configuration options

| Option             | Description                                           | Default                              | Required |
| :----------------- | :---------------------------------------------------- | :----------------------------------- | :------- |
| `host`             | Webflow API host URL                                  | `https://api.webflow.com`            | No       |
| `rootDir`          | Directory to export components into                   | `./devlink`                          | Yes      |
| `siteId`           | Webflow site ID                                       | `process.env.WEBFLOW_SITE_ID`        | No       |
| `authToken`        | Webflow API authentication token                      | `process.env.WEBFLOW_SITE_API_TOKEN` | No       |
| `cssModules`       | Enable CSS modules for component styles               | `true`                               | No       |
| `allowTelemetry`   | Allow anonymous usage analytics                       | `true`                               | No       |
| `envVariables`     | Inject environment variables into exported components | `{}`                                 | No       |
| `components`       | Regex pattern to match components to export           | `.*`                                 | No       |
| `overwriteModule`  | Whether to overwrite the module file                  | `true`                               | No       |
| `fileExtensions`   | File extensions for exported components               | `{ js: ".js", css: ".css" }`         | No       |
| `skipTagSelectors` | Exclude tag/ID/attribute selectors from global CSS    | `false`                              | No       |
| `relativeHrefRoot` | Control how relative `href` attributes are resolved   | `/`                                  | No       |

While DevLink will try to assume reasonable defaults for most of the settings, you can specify certain options to customize the behavior of DevLink management and setup. See the [DevLink documentation](/devlink/docs/component-export/installation#configuration-options) for more details.

***

### Webflow Cloud

```json
{
  "cloud": {
    "projectId": "<Your Project ID>",
    "framework": "astro" 
  }
}
```

| Field       | Description                                                                                                 | Required |
| ----------- | ----------------------------------------------------------------------------------------------------------- | -------- |
| `projectId` | Cloud project identifier. This is automatically set by the Webflow CLI when you run `webflow cloud deploy`. | Yes      |
| `framework` | Framework preset either `nextjs` or `astro`                                                                 | Yes      |

***

### Designer Extensions

```json
{
  "name": "<Your Extension Name>",
  "apiVersion": "2",
  "publicDir": "dist",
  "appIntents": {
    "image": ["manage"],
    "form": ["manage"]
  },
  "appConnections": [
    "myAppImageConnection",
    "myAppFormConnection"
  ]
}
```

| Field            | Description                                                     | Default | Required |
| :--------------- | :-------------------------------------------------------------- | :------ | :------- |
| `name`           | The name of your extension as it appears in Webflow             | -       | Yes      |
| `apiVersion`     | The API version to use for your extension                       | `2`     | Yes      |
| `publicDir`      | The directory to build and serve the extension from             | `dist`  | Yes      |
| `appIntents`     | The element types that can create connections to your extension | `{}`    | No       |
| `appConnections` | The element types that can create connections to your extension | `[]`    | No       |

---

# Command Reference

> Reference for all commands available in the Webflow CLI

## Global Options

Global options can be used with any command.

| Option            | Description                                       |
| ----------------- | ------------------------------------------------- |
| `-V`, `--version` | Display the installed version of the Webflow CLI. |
| `-h`, `--help`    | Display help information for any command.         |

***

## Authentication

### `auth login`

Authenticates the CLI with your Webflow account.

**Usage**

```bash
webflow auth login
```

This command opens your browser to complete authentication. For more details, see the [authentication documentation](./authentication).

***

## Code Components

### `library share`

Bundles and shares your Code Component library with a Webflow Workspace.

**Usage**

```bash
webflow library share [options]
```

**Options**

| Option            | Description                                         | Default                                         |
| ----------------- | --------------------------------------------------- | ----------------------------------------------- |
| `--manifest`      | Path to the `webflow.json` file.                    | Scans the current directory.                    |
| `--api-token`     | Workspace API token.                                | Uses `WEBFLOW_WORKSPACE_API_TOKEN` from `.env`. |
| `--no-input`      | Disables interactive prompts. Useful for CI/CD.     | `false`                                         |
| `--force`         | Forces bundling to complete, even with warnings.    | `false`                                         |
| `--debug-bundler` | Displays final bundler configuration for debugging. | `false`                                         |
| `--dev`           | Bundles in development mode.                        | `false`                                         |
| `--verbose`       | Displays extra information for debugging.           | `false`                                         |

**Example**

```bash

---

# Share the library and bypass any interactive prompts
webflow library share --no-input
```

### `library bundle`

Bundles a library of Code Components locally to a `dist` directory. This command does not share the library to Webflow.

**Usage**

```bash
webflow library bundle [options]
```

**Options**

| Option                 | Description                                         | Default  |
| ---------------------- | --------------------------------------------------- | -------- |
| `--public-path <path>` | Overrides the public path for the bundle.           |          |
| `--output-path <path>` | Overrides the output path for the bundle.           | `./dist` |
| `--force`              | Forces bundling to complete, even with warnings.    | `false`  |
| `--debug-bundler`      | Displays final bundler configuration for debugging. | `false`  |
| `--dev`                | Bundles in development mode.                        | `false`  |
| `--verbose`            | Displays extra information for debugging.           | `false`  |

**Example**

```bash

---

# Bundle the library and output to a 'build' folder
webflow library bundle --output-path ./build
```

### `library log`

Displays the directory and path to the latest log file.

**Usage**

```bash
webflow library log
```

***

## Webflow Cloud

### `cloud init`

Initializes a new Webflow Cloud project from a template.

**Usage**

```bash
webflow cloud init [options]
```

**Options**

| Option              | Description                                           |
| ------------------- | ----------------------------------------------------- |
| `--framework`, `-f` | The framework to use for the project (e.g., `astro`). |
| `--mount`, `-m`     | The path to mount the project on (e.g., `/app`).      |
| `--site-id`, `-s`   | The Webflow site ID to connect to.                    |

**Example**

```bash

---

# Initialize a new Astro project mounted at /app on a specific site
webflow cloud init -f astro -m /app -s 1234567890
```

### `cloud list`

Lists available project templates for `cloud init`.

**Usage**

```bash
webflow cloud list
```

### `cloud deploy`

Deploys your project to Webflow Cloud.

**Usage**

```bash
webflow cloud deploy [options]
```

**Options**

| Option                    | Description                                                   |
| ------------------------- | ------------------------------------------------------------- |
| `--env`, `-e`             | The environment name to deploy to.                            |
| `--mount`, `-m`           | The path to mount the project on (e.g. `/app`).               |
| `--project-name`, `-p`    | Project name (when deploying a new project).                  |
| `--directory`, `-d`       | Project directory path if not in the root (for new projects). |
| `--description`, `-d`     | Project description (when deploying a new project).           |
| `--skip-mount-path-check` | Skips interactive prompts for mount path configuration.       |
| `--auto-publish`          | Publishes the site after deployment.                          |

<Tip title="Configuration for CI/CD pipelines">
  When used together, `--env` and `--mount` enable non-interactive deployments suitable for CI/CD pipelines. You can also use
  `--auto-publish` to publish the site after deployment so that your new environment is live.

  ```bash
  webflow cloud deploy -e production -m /app --auto-publish
  ```

  This will deploy the project to the environment named "production" and mount it at `/app`, and then publish the site so that your new environment is live.
</Tip>

***

## DevLink

### `devlink sync`

Syncs components from your Webflow site to your local project.

**Usage**

```bash
webflow devlink sync [options]
```

**Options**

| Option              | Description                                           |
| ------------------- | ----------------------------------------------------- |
| `--api-token`, `-t` | The API token to use, overriding the `.env` file.     |
| `--site-id`, `-s`   | The site ID to sync from, overriding the `.env` file. |

**Example**

```bash

---

# Sync components using a specific site ID and token
webflow devlink sync --site-id 1234567890 --api-token <YOUR_TOKEN>
```

***

## Designer Extensions

### `extension list`

Lists available templates for `extension init`.

**Usage**

```bash
webflow extension list
```

### `extension init`

Initializes a new Designer Extension project from a template.

**Usage**

```bash
webflow extension init <project-name> <template>
```

**Arguments**

| Argument       | Description                                                  |
| -------------- | ------------------------------------------------------------ |
| `project-name` | The name of your new project directory.                      |
| `template`     | The template to use: 'default', 'react' or 'typescript-alt'. |

**Example**

```bash

---

# Initialize a new React-based extension in a 'my-new-extension' folder
webflow extension init my-new-extension react
```

### `extension bundle`

Bundles your Designer Extension into a `bundle.zip` file for upload.

**Usage**

```bash
webflow extension bundle
```

### `extension serve`

Serves your Designer Extension on a local development server.

**Usage**

```bash
webflow extension serve [port]
```

**Arguments**

| Argument | Description                       | Default |
| -------- | --------------------------------- | ------- |
| `port`   | The port to serve the project on. | `1337`  |

---

# v1.9.0: Component decorator support

> The Webflow CLI now supports global decorators for code components

v1.9.0 adds support for component decorators, enabling you to wrap all components in your library with providers for global styles, CSS-in-JS libraries, or custom functionality.

### Global decorators

Configure a global decorators file in your `webflow.json` to apply decorators across all components:

```json title="webflow.json"
{
  "library": {
    "globals": "./src/globals.ts"
  }
}
```

The CLI will automatically wrap all components with the decorators exported from your globals file during the build process.

Learn more in the [component decorators documentation](/code-components/define-code-component#component-decorators).

---

# v1.8.50: Security and automation improvements

> Security updates, CI/CD automation support, and improved workspace visibility in the Webflow CLI

v1.8.50 includes important security updates and workflow improvements that make it easier to use in both local development and automated environments.

### Security hardening for scaffolds

We've updated the dependencies used in Webflow Cloud scaffold projects to address [recent security vulnerabilities](https://www.bleepingcomputer.com/news/security/critical-react2shell-flaw-in-react-nextjs-lets-hackers-run-javascript-code/). When you create a new Webflow Cloud project, you'll automatically get the latest secure versions of these dependencies.

### Automation-ready with `--no-input` flag

The new global `--no-input` flag is now available on all CLI commands. This flag disables all interactive prompts, ensuring your automated scripts never get stuck waiting for user input. You can use this flag to ensure your CI/CD pipelines and automated workflows run smoothly without any manual intervention.

### Clearer workspace context when sharing

The `webflow library share` command now displays your Workspace name in the confirmation prompt. This helps you verify you're sharing to the correct workspace before proceeding, especially useful when working across multiple workspaces. This small change helps prevent accidentally sharing component libraries to the wrong workspace.