Intro to Webflow’s APIs

Use Webflow’s APIs to build Apps or programmatically manage with your dynamic site content.

cms-dynamic-content
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

APIs, or application programming interfaces, allow different applications to communicate with each other. Webflow’s APIs provide the power to connect third-party services, expand Webflow’s core capabilities, and build innovative experiences for designers and developers. 

Pro-tip: If you aren’t a developer, you can use tools like Integrately, Make, or Zapier to integrate Webflow with hundreds of other third-party apps — and you don’t have to worry about interacting with APIs or writing code. 

In this lesson, you’ll learn: 

  1. What can I do with Webflow’s APIs? 
  2. How to create an API token 
  3. How to create a webhook 

What can I do with Webflow’s APIs? 

Webflow’s APIs support various use cases: 

  • Sites API — retrieve information about sites 
  • Pages API — retrieve information about pages and associated metadata 
  • Assets API — add assets to Webflow’s Assets panel, create and assign assets to folders in the Assets panel, or retrieve a list of all existing assets by ID or site
  • CMS API — perform CRUD (Create, Read, Update, Delete) operations on CMS Collections and Collection items 
  • Ecommerce API — perform CRUD (Create, Read, Update, Delete) operations on Ecommerce products and orders 
  • Users API — perform CRUD (Create, Read, Update, Delete) operations on User Accounts 
  • Forms API — retrieve forms structure (i.e., form fields) and submissions, connect Webflow forms to external data sources
  • Custom Code API — add and maintain custom Javascript scripts on sites and pages
  • Designer APIs — interact directly with the Designer canvas 

You can also create webhooks, which let Webflow “talk” to third-party applications. Learn more about what you can do with Webflow’s APIs

How to create an API token 

When you access Webflow’s APIs, you’ll need to provide an access token to authenticate with Webflow, which you can acquire by using OAuth or by generating a site API token. 

If you’re building an internal integration, you may want to create a site API token to get started quickly. However, if you’re building an integration that will be used by others, you should use a Webflow App to authenticate with OAuth

Here, we’ll cover how to generate an API token to use in place of a password with the API. Similar to a password, an API token (sometimes called an “API key” or “access token”) identifies the site or application making a request to an API. 

To create an API token: 

  1. Go to Site settings > Apps & integrations tab > API access
  2. Click Generate API token 
  3. Copy the generated token to your clipboard
Important: Make sure to save your API token in a safe location. Your API token is considered sensitive personal information and should be treated like a password. You won’t be able to view it in your Dashboard again after creating it. If you think your API token has been compromised, visit Site settings > Apps & integrations tab > API access, click Generate new API token to generate a new token, and replace the compromised token in any third-party connections. 

How to create a webhook 

Webhooks let you pass real-time data from Webflow to external applications when certain events occur on your Webflow site. Check out our developer documentation for more information about available webhook events

To create a webhook: 

  1. Go to Site settings > Apps & integrations tab > Webhooks
  2. Click Add webhook 
  3. Choose your trigger type (e.g., Form submission, Site publish, etc.) 
  4. Choose your API version (i.e., v1 or v2)
  5. Enter your webhook URL (e.g., https://yourdomain.com/webhook/webflow)

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?