The Complete Guide to Webflow API Basics

DecorativeDecorativeDecorativeDecorativeDecorativeDecorativeDecorativeDecorativeDecorativeDecorativeDecorativeBlue Dot

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

Does Webflow have API? Webflow has an API that lets you programmatically create, update and delete items from a Webflow collection.

The Webflow API allows you to connect your Webflow site to external sources.   

What Can You Do With a Webflow API?

webflow developers
Source: Webflow developers

As mentioned in the definition, the Webflow API lets you create, update, and delete actions. 

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

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 cms
Source: Webflow CMS

Webflow is a content management system (CMS) that lets you design websites and edit dynamic content without writing a single line of code. 

Webflow CMS is for developers, editors, designers, and content strategists. Webflow developer API works directly with the JSON underlying 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 create a design from scratch or select a Webflow template
  2. If you prefer using a template, choose a workspace to add your site and click on create site
  3. Give a name for your site. Customize the template to have a unique design for your brand. 

How Do I Add API Key to Webflow?

Webflow university
Source: Webflow University

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?

Webflow University
Source: Webflow University

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 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 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 should have a Webflow site. It is easy to generate the API from the site settings. 

Click on integrations, then scroll to the bottom of the page. From the API access section, click on the generate API token button. Make sure you copy the API key, as it shows only once. 

Otherwise, you will have to regenerate it. Webflow generates a single API key for each site. However, Webflow users can use OAuth 2.0 to integrate Webflow with third-party apps. 

Therefore, you can allow third-party services to access data without sharing your API key or password. Check the Webflow API documentation for support, API docs, Webflow eCommerce API, and more. 

DecorativeDecorative

Grow quickly with Webflow's unlimited development.

We do work, you do business.

DecorativeDecorativeDecorativeDecorativeDecorativeDecorativeDecorativeDecorativeDecorativeDecorative