The Webflow API is a simplified access to all your website data. In this article we explain what the Webflow API gives you access to and how to use it in a simple way. By using the different HTTP protocols of the API, you will be able to transform your simple showcase website into a real web platform. Connect all your no-code tools, SaaS tools, applications and other software to your Webflow site to automate your site and improve the user experience.
What is an API?
An API for "Application Programming Interface" is a set of protocols that will allow you to connect and integrate software and applications very simply. An API will therefore allow your tools to exchange a certain amount of data with each other, and thus to automate certain tasks. These protocols simplify and facilitate data exchange, particularly in an increasingly no-code world. APIs are a no-code or low-code way to develop applications or websites much more easily and quickly. Since it is a way to easily connect tools, APIs will allow you to optimise each of them.
What is the Webflow API for?
The Webflow API is an open book on your website's CMS. You can find a lot of information about your site, its markup, your collections, your items, etc. The diagram below shows you how the data is thought in Webflow. The Webflow API will allow you to access easily and quickly three main types of data:
- Data specific to the Site: includes basic data related to the creation of the site, its publication, its creator or its identifier "site ID".
- Your collections data: includes general information about the number of collections you have, the Collection ID, the slug, or the name of the collections.
- The data of your items : which gathers more information about the items, their creation date, modification, publication, slug, Item ID, etc.
The Webflow API provides you with a lot of data to allow you to connect (without code) your Webflow site to other APIs, or some of your tools.
How to use the Webflow API?
1 - Create an API key
A Webflow API key is an authentication method for your website. It will identify your site and give you access to all Webflow API requests. You will then be able to use each of the HTTP requests (see 2) to use the data of your website.
To create your first Webflow API token, go to your project settings by clicking on "Project settings" . Click on "Integration" and scroll down to the "API Access" section and click on "Generate new API token".
2 - Use HTTP Webflow requests
An HTTP request for "Hypertext Transfer Protocol" is in fact a means of communication between web browsers and web servers. It is the backstage of the web and is called "HTTP protocol". As soon as a request is made on a browser, it is then communicated via this HTTP protocol to a web server which hosts the data. For example, to access a website, you send an HTTP request by clicking on the URL of the site, which in turn will provide a response by displaying the web page. There are several methods of HTTP requests, which will allow to indicate the action which one wishes to carry out. We often speak of "HTTP verbs".
Webflow provides you with several "HTTP verbs" to communicate with its API. Here are the HTTP verbs used by the Webflow API.
- GET - method used to retrieve data from a server. Using Webflow's HTTP verb GET, you can retrieve information about your site, your items, your collections, your e-commerce products, etc.
- POST - method used to send data to a server. In the case of Webflow, you can for example use the HTTP POST request to publish a site, create a new collection, a new Item, etc.
- PUT - this HTTP verb allows you to update elements of your Webflow site as items in your CMS.
- PATCH - similar to the PUT verb, this HTTP verb allows you to update elements of your Webflow site with the difference that you can limit yourself to only the fields to be modified.
- DELETE - a query that will allow you to delete items from your CMS such as an item, collection, etc.
.png)
3 - Use the Webflow API documentation
Webflow provides a free Webflow API documentation for web developers or people who would like to use its API. This very complete documentation gives you all the elements to be able to use the API data via HTTP requests.
In this documentation, you will find all the information concerning the HTTP requests to be used according to the actions you wish to perform, different templates that you can use to customise your requests, etc.
Whether it is for a showcase site, an e-Commerce site or an ultra-connected web platform, the Webflow API allows you to optimise and automate your website quickly and easily.
.jpg)
