The Complete Guide to Webflow API Basics

The Webflow API allows web developers to build meaningful integrations that connect important services to Webflow. 

It also helps create innovative and first-class experiences for web development without using code. We'll take you through the Webflow API basics and how to add an API key to Webflow. 

Let's get started. 

What Is Webflow API

An API, which stands for Application Programming Interface, serves as a set of standardized code protocols enabling secure data exchange between applications, software, and hardware. Typically, APIs incorporate security measures such as access tokens to safeguard data.

What Can You Do With a Webflow API?

Web developers can use the REST API to return the JSON data about Webflow sites, membership, CMS collections, and eCommerce products. 

Webflow's API offers the capability to create integrations, manage user memberships, and seamlessly integrate e-commerce functionality into your website. The Authorized User API ensures the protection of user data, while the Authorized Info API contains information pertaining to the authorization process being employed. For further information on the Webflow API, please explore additional resources.

The Webflow APIs are categorized into: 

1. Webflow CMS API - allows you to add, update and delete items from a CMS collection. 
2. Site API - retrieves information about sites, domains and publish updates. 
3. User API - you can invite, update, and delete users from a membership site and programmatically manage critical user data. 
4. Webflow eCommerce API - helps manage the eCommerce data, such as SKUs, inventory, products, and order information. 

What Type Of CMS Is Webflow?

Webflow serves as a content management system (CMS) that empowers you to create websites and modify dynamic content without the need for any coding. 

Webflow CMS caters to a diverse audience, including developers, editors, designers, and content strategists. The Webflow developer API interfaces directly with the JSON structure that underlies the CMS.

The developers can create custom webhooks, integrate with mobile apps, connect to existing CMS, export content JSON, etc.

Professional web developers, as well as non-developers, can use Webflow. The no-code CMS lets you store and maintain dynamic content. 

You can add content to Webflow using a CSV, Webflow external API, or by hand. 

How to Create a Website on Webflow

To generate a Webflow API, you need a Webflow website. Here's how to create a site on Webflow.

1. Use the Webflow designer to craft a design from the ground up or opt for a Webflow template.
2. If you opt for a template, select a workspace where you'd like to incorporate your site, and then click on "Create Site."
3. Assign a name to your site, and proceed to tailor the template to bestow it with a distinctive design that aligns with your brand.

How Do I Add API Key to Webflow?

Instead of using a password to access your API, you can create an API key or access token for authentication. 

When working with the API, you need access to your site id. A site id tells Webflow the website you want to access. So, how do you generate an API key?

Go to your Webflow dashboard. Click on settings for the project you want to create your API key. From the top menu, click on integrations. 

Scroll through the page and select Generate API token. After the token access is generated, copy it and save it for later. 

Webflow displays the token once, so you must copy it and publish it in a different folder. Since it generates one API per site, you can consider authenticating each integration with separate access tokens if you want multiple integrations. 

The access tokens are created through the apps. It gives you a clear visibility of the services accessing your site. 

If you lost your API key or suspect it got compromised, you can regenerate a new access token. You can no longer use the older API key after generating a new one. 

What Is a Webhook Webflow?

A webhook allows you to share real-time updates with any service that can receive an HTTP request about an action made on Webflow. 

For instance, if you're using forms in your Webflow website, you can create a webhook that sends data to the form integration whenever a user submits a form. 

An example of a Webflow service that receives HTTP requests is Airtable forms. For a webhook to send updates, you should first configure it to listen to an event from your Webflow site. 

To create a webhook, you need:

1. Site ID - it is a unique identifier for your Webflow website.
2. Event type - an event that the webhook should listen for. 
3. Destination URL - a unique URL configured to receive the HTTP request. 

To create a webhook, go to project settings, then integrations. The two trigger types are site publish and form submission.

Webflow API Integration

The Webflow CMS API lets you bring in data from external sources and connect the Webflow CMS with a mobile app or an existing CMS. 

To access the Webflow API, you need an API key or an OAuth. The OAuth protocol integrates third-party applications with Webflow. 

Simply put, the protocol is for Webflow users who want to allow third-party services to access data without sharing passwords and API keys. 

Otherwise, if you're creating a private integration with your account, you will need a site API token.

Does Webflow Have an API?

Webflow has a CMS API that lets you add, update, and delete items from a collection. Webflow developers can build integrations without coding. 

Webflow API returns JSON data about eCommerce products, memberships, sites, and CMS collections. You can connect your Webflow site to external sources using the API.

The Node SDK for Webflow API is available on Webflow-api npm. For non-developers, you can use Zapier to connect to third-party services. Hence, you do not have to use the Webflow API or worry about coding.

It connects Webflow to more than 5,000 apps. Zapier moves information automatically between web apps. 

What Can You Do With the Webflow Developer API?

With the Webflow API, you can:

1. Integrate the API with a mobile app to pull CMS data.
2. Create a custom webhook that triggers when an item is deleted, updated, or added.
3. Import data from a database.
4. Export content in the JSON format to use with other apps.
5. Integrate an existing CMS with Webflow.  

Webflow API Documentation

The Webflow API documentation gives you a detailed guide on everything you need to know about Webflow apps, APIs, developer tools, etc.

You can also join the Webflow forum to collaborate with other developers, solve issues and share ideas. The Webflow documentation links you to Webflow university, which has the resources to learn more about the CMS. 

Webflow APIs are categorized for site, membership, CMS, and eCommerce. 

The Bottom Line

To use the Webflow API, you must have a Webflow site. Generating the API from your site settings is a straightforward process. 

Start by clicking on "Integrations," and then scroll to the bottom of the page. Within the "API Access" section, there's a "Generate API Token" button. It's essential to make sure you copy the API key since it's displayed only once. Failure to do so will necessitate regenerating it. Each Webflow site is provided with a single API key.

Moreover, Webflow users have the option to utilize OAuth 2.0 for integrating Webflow with third-party applications. This allows you to grant third-party services access to your data without the need to share your API key or password.

For comprehensive information, support, API documentation, details about the Webflow eCommerce API, and more, you can refer to the Webflow API documentation.