< Back

Updating CMS with Webflow API


Here we build an API that interacts with Webflow in order to update CMS and various other things.

Sending data to custom backend: https://youtu.be/nEcemSts0V4


Hello and welcome to another episode of Webflow and Code where I teach you the underlying code you’re writing in Webflow.

Welcome to another one of my ever-changing locations if you didn’t know I’m a full-time Nomad and I’m uh I move around quite a lot.

I just wanted to take a moment to welcome all my new followers because my last video about improving your Webflow etiquette, let’s say, people seem to like it so I just want to welcome you guys.

This video is probably gonna go out after a couple of other ones I’ve already recorded So it’s a bit late but it’s better late than never of course so without further Ado let’s jump into the code and build our own API that integrates with the Webflow CMS.

So I haven’t planned this episode out much at all to be honest I’m just going to be jumping into it so uh it’s gonna be a little bit of a live coding session I’ll obviously edit it down to make it as efficient as possible.

Essentially we’re going to be building an API middleware where if we describe the architecture of it you’ve got your Webflow website and you’ve got a API that you build that then interacts with the CMS and there might be a number of reasons why you would want something like that you could be building your own plugin you could be just wanting to interact with the Webflow API in your own way maybe not through a form maybe it’s through an app on your phone or the possibilities are really endless when it comes to building your own API you’re just not limited to a form on your Webflow website but like I say as you’ll see that we’ll be we’ll be using an application for called Postman so I suggest you download that and what this will do it will help us test our API

We’ll run our API with an Express server and we’ll get into that and we’ll be hitting that API using Postman instead of building out a Webflow website because really the website website is it’s irrelevant to the the whole process really the the point is is that anyone that hits this API and this is a point of security just to remember anyone can hit this API and start adding stuff to your to your CMS but that’s not really much different to what you know someone going onto a Webflow website and filling out a form that enters something into your CMS so there’s not a lot of difference there you’ll need node on your computer installed you’ll need Postman.

You will also need a Firebase account because that’s going to be where the the thing that’s going to host our API now we could run it on an Express server on a Node server but these days a lot of this stuff can be done with Firebase functions which Lambda functions really or I think Lambda is the AWS name for it they are functions that literally just run when you hit that endpoint or when you hit that URL that’s when they’ll run you can run websites in this manner but we’re going to be running an Express server and then that’s going to be the thing that interacts with the Webflow API.

It’s worth noting that the reason why you have middlewares like this is because there’s an element of security Now to to be able to interact with an API it needs an API key and you might be used to some of that kind of API key nonsense API keys are to be treated like a password and you don’t want that password revealed on your website that interacts directly with the with the Webflow API you want to send your request to something else that then that has the permission to send it and then you can do a lot of error checking them within that have they sent the correct format of information is it from this the correct IP address loads of different things and we you know I’m not going to get into all those things now but you have that middleware that sort of the the gatekeeper of what goes in and out of that API.

So let’s look into the actual documentation of the Webflow API because I think it’s worth us drawing attention to to what I’m referring to essentially to just sort of make it look slightly less daunting the first thing we’re going to want to do is look at this authentication section and after reading it there’s auth2 which is which is helpful if you’re building an app that you’re going to sell on some sort of marketplace or something else and you want to build like a third-party application but what we’re going to be doing is interacting only and exclusively with your specific website and it asks you to generate a an auth key and you can do that from if you go to Project settings uh and here Integrations and then you’ve got API access now.

I’ve already generated an API and have it saved and again it really does warn you that you should be treating this like password do not share this with anyone this will give this one API or middleware that we’re going to build permission to integrate with the with the webflow API so that’s the first thing you want to do it says there’s an official JavaScript API client and what this does is give you a bunch of functions you can call instead of you writing what the request is now although this is great and maybe when we get a bit more familiar with what’s going on under the hood we can begin to use it but I feel like for not a lot of extra code we can really see and understand essentially what these functions are doing under the hood so I’m not really that fussed on using this JavaScript API at the moment just because for teaching purposes we might as well really understand what’s going on because there’ll be a lot of magic and you’ll get too confused and I’ll get too confused and then we’ll end up crying and cuddling on the floor together wallowing in self-pity.

Also while we’re here then we might as well look at the field types now these are all the different field types and you’ll be familiar with these because you can set these field types inside of the CMS and it will tell you kind of what the what the type is and what an example of that would be so if we’re going to be uploading an image or referencing an image of some sort then we need to we need to provide it a file ID a URL and an optional alt tag so do look into this if you are wanting to you know if you are facing issues or something like that then look into here and think okay well I’m trying to upload an email and this is what an email should look like so just as a point of no worth familiarizing yourself with that or at least knowing that it’s here so that you can kind of refer to it later on.

This actually gives us code Snippets that we can use to interact with the API but forgetting about that in the moment if we look on the right left hand side here we are we have got everything that’s available to us through the API the different things that we can do in the API right so we can look at form submissions we can look at we can list all our sites we can get a site we can look at web hooks this one we’re going to be mostly interested in we’ve got CMS things here so we can get a list of collections we can get a collection a specific collection and then this is this is really where we’re going to be digging into we can list all collection items we can delete we can create new ones we can publish collection items all of this sort of stuff we can do through the API so this really is where we’re going to be referencing or spending a lot of our time to understand what it is we can do what the code looks like that we need to write to actually do this do the thing that we want to do but you can also test the this sort of API and make sure that it’s running and all the rest of it so we’ll ultimately going to be copying this code but the real work comes in structuring it for Firebase functions.

So with all with all that aside let’s just start building this is going to be yeah like I say completely uh live coding and we’ll see how far we get thinking about what we need we’ve got Postman downloaded we’re gonna want to… I know that we can run a Firebase server locally so let’s just go straight in and start building a Firebase function project.

So Firebase function, get started so in the console add a project so let’s do that Webflow API looks good.

Google Analytics let’s not do that just because it will take longer to install which is installing our project.

Here we do need to upgrade the plan to be able to use Firebase functions now this is unless you’re doing loads and loads of requests I have yet to be charged on a blaze plan so I would I’m quite happy to do that Firebase payment that’s fine so you want to set up a payment thing and just set up something really small like five dollars cool add Firebase resources existing blah blah blah to create a new project we want to create a new product from this continue blah blah blah create project add Firebase setup node.js and the and the Firebase CLI so I have this installed already but why not let’s do that let’s copy paste that this is installing Firebase tools globally on our computer so that’s that there we go and that means we have access to some of the Firebase functionality and then we get to initialize the projects of Firebase login I think I’m already logged in and then Firebase login everything should be gravy there we go already logged in but you might be prompted login now I’m looking here we don’t we don’t need Firebase firestore this is database stuff so unless you want that sort of stuff go nuts but what we want is to initiate initialize a functions project let’s do that use an existing project so here we go you can see down the bottom here we want to use an existing project and then it should list out all of the projects we have Webflow API there it is God don’t you love it when technology works although I shouldn’t speak toosoon because…

I would go JavaScript I like Typescript but this isn’t a lesson on Typescript.

If you want to use eslint again it’s going to slow us down a little bit do you want to install dependencies with npm now yes let’s do that cool ignore so there we go

Now this is some basic code for an ad message and let’s just demonstrate this real quick so functions blah blah blah now we’re going to uncomment that and what this means is if we hit our project at the hello world URL we should see hello from Firebase but we need to run this as a server.

First here we go emulator Firebase emulator start let’s do that one cool.

So here is our URL so if I take that, this is this is just on our local machine not live or anything there and let’s open Postman we’re going to create a HTTP request all we’re going to do is paste that into the get function here delete that bracket and send lo and behold it’s responded.

We knocked back into our our project you can see that it’s responded here so now we’ve got Firebase running in on our computer and we can interact with it using Postman now it’s from within this project that we’re going to interact with the Webflow API.

Let’s start building that out now and do something very very basic with our Webflow project so we want to take that API key and store it as a secret in our projects that we can further kind of access it so you’re going to want to copy your API key I have my API key copied into my clipboard.

[I went down a bit of a rabbit hole trying to get Firebase Config to work but realised I should have been using .env files]

So we ran functions X config export which created those EMV files for us but if you haven’t done that you can just go ahead and create dot ENV and then add add your Azure API key and there and then from in here you go process dot ENV and then we saved it as Webflow key so let’s just get that save emulators.

Jjust because of all of this I’m going to be regenerating my API keys so you can go nuts with any API keys that you see because they’re not going to exist anymore so with that we’re running this looks like everything went through.

Great and there we go we have our API key at long last in our environment and if I deploy this now it will be up on the Cloud Server and we can access this from the World Wide Web so just want to reiterate you do not want to expose your API keys on the web and you’re also running your your exposing your CMS and any actions to the world.

Maybe we can do a follow-up on security but let’s just get through the basics right now so now.

Now we just want to set up a regular Express server and we can then start knocking back into this and start creating our Express apps so let’s turn the emulation off let’s install Express so let’s start doing this import Express we want to create an app. Copy the port here and start building our routes.

Now to explain this a little bit basically whatever our URL is the root URL we’re going to and it’s a get request we need to specify get request and I’ve gone over this in a in a previous episode uh somewhere down the line but we’re assigning a get request to the root of the URL and as a response we’re saying hello world now the difference here is that I like to put version one there we need to instead of this function here we’re going to return our app emulate this again.

in fact we don’t need the pause I’ll just remove that our URL will be updated because we added V1

and because we’re not we’re at the root here we’re sending a get request we should see Hello World hello world.

Boom boom boom we’re up we’re cooking on gas. We have an Express project running inside of Firebase functions.

Now let’s start interacting with Webflow the moment you have all been waiting for now we’re going to need to download node-fetch because no doesn’t have its own fetch Library installed so we’ll do that and you’ll see with each request we need to apply an authorization this is a basically the default function so if we just go ahead and at this end because it’s going to be stuff that we always use. In fact we can just change that to base.

You are l our Bearer token will be Webflow underscore API underscore key now we can make requests to this using good old fetch.

So we just copy this here so cons fetch equals require node fetch because we have installed now within here we can uh what should we do I mean let’s just list let’s just do something basic and let’s list our site.

Now we should only see one site because we of course have generated an API key that only Associates itself with one site so and it’s simply the URL is simply sites or you’ve got the URL up here so slash sites let’s just copy that.

Let’s go select go to sites equals fetch baseURL Plus sites and we want to add the options now they’re using promises I like async away just because it’s a bit cleaner so if we add async there and go await here then we want to data equals await sites dot Json now we can return it’s like data we can just return that data here.

Every async await should be in a try catch so let’s just do that and see what we get here.


And now we have it so we’ve got an array of our sites and now we’re interacting with the website API.

So now let’s think about how we should some sort of best practices and how we want to kind of structure this so for a start when we hit the root we don’t want to return that you know the sites or whatever we want to make this into a logical route so how about first of all we what we really want to do is kind of match the Webflow API here so if we get sites then we want to make our URL get sites.

At this point you’re also responsible for the security of the application so if someone submits a piece of text or let’s say an email for example then you want to make sure that you’re then responsible to make sure that that email is an email address for instance

There’s kind of three lines of Defense here you’ve got your HTML kind of input being sort of required or that it’s that it’s a type email but of course those can be very very easily overridden so then you’ve got a second line of defense which is the JavaScript and you’re interrogating the data coming in from the JavaScript before it’s sent here and we’ll get into the the JavaScript side of things and then finally on the back end you’re validating the data again that you’re not sending uh incorrect data to Webflow and then they’re going to be doing a validation on their end so you can see how important security is when it comes to building back ends and applications because you’re starting to dig into the world of that right now.

Now we’ve got kind of everything working we sort of have these Baseline foundational things let’s actually start doing some basic operations on the collections let’s set up a route so that we simply list the collect collection items we’re probably not going to want to use this but just to kind of get the ball rolling so if we do app get which is the type of thing and this can be post it can be delete it can be patch but we just want it to begin um and then we just we just call it collections and we do async res wreck now these contain these resin wreck will

contain information about the data

that’s being sent but we’re not really

doing anything like that just yet so

let’s uh let’s just copy this code so

try catch we want to

um what are we doing collections

do collections collections

data and then going back into here it is


list collection items okay so it’s it’s

for a specific collection so we will

actually need to provide some data

so let’s just copy this

and clean it up a bit


so we’re going to be dealing with root

parameters now and uh this is exactly

what a kind of common convention here we

can get the parameters by doing request

dot parameters so


so making that into a request parameter

we should be able to get it

uh const collection ID equals

request.params dot oops

collection ID

the important thing to remember is this

route is our root it’s our api’s root

when it comes to calling webflow we can

call any any route that we like after

once we call this one so just because

we’ve mapped these exactly the same

don’t think that this is calling webflow

right away this is just we’re just

setting up a route that our API can

accept so we have the collection ID if

we go if we go into the documentation

here we’ve got our base URL and then

we’ve got this here which we want to

stick here

now we want to do a bit of interpolation

here and we’re going to Simply replace

that with our The Collection ID that the

user has sent into our

into our root so now we have a new route

and so if we go back into Postman and

fire up this URL

items now we need to set this up to a

collection ID so where do we get the

collection ID from well if we go into

webflow and I’ve just realized that I

need to upgrade our plan once again to a

CMS plan so if you haven’t subscribed

already please do so it really means a

lot so I can do stuff like this and if

you like the video that will also help

me because more people get to see it and

I get to afford to do things like this

for you so my memory card run out of uh

space so just to quickly recap what

happened in the meantime is so I created

a collection we’ve got we’ve now got a

collection ID and heading back into our


we created a

a root here we’re setting a wild card

sort of parameter there and we’re

getting it through the request.params

dot collection ID as you can see that

those two match up there and then in our

request all we’re doing is

putting our variable in the URL that

webflow requires so if we head back here

list a collection item we can take a

look at that they require a collection

Item ID

they don’t require anything special it’s

just a get request to that URL okay so

if I quickly do that then I can write

request and then there we go we can see

our collection has got nothing in it

next we created a post request which

again matches webflow’s requirement for

creating a collection item so they want

a post we also set up a post the URL is

exactly the same it’s just the request

type that differs


once again we get that collection item

and we pipe it into the URL there are a

few other headings and things like that

for a start it needs a method of post

and it needs a content type of

application adjacent so what we’ve done

is we’ve created a new object here so by

opening and closing the braces we’re

creating a new object and we’re

spreading the existing default

parameters right and then we’re

overriding them

so we’re overriding the method with post

because that already that already exists

there and then we’re overriding the

entire headers one but spreading the

existing headers here so we’re getting

these two and then we’re adding our

content type here so in effect we’re

just overriding things that need to be

overridden and adding things that need

to be added

next we create a body

we pass in a body object which matches

exactly what they require where’s our

where’s our body updating for some

reason Quest example here we go


so we need to stringify because it needs

to be past a string a an object so

here’s the object and uh and it needs to

contain a field entry which matches

if we look at each of our people our

people collection we’ve got two required

information pieces of information here

right and we can add more as we go along

but for this basic example we’re just

going to use the defaults


when you post something that data gets

sent through the body and to do that

through Postman we select the uh the

forming URL encoded thing here and we

pass in a name of

Sam and that we assign we get that from

a little Crest body and we assign that

to our name here we can actually just

remove that to clean up a bit

now this slug is required but we do

something clever with the name we take

the name we make it all lowercase we

split any spaces that are in that name

and replace those spaces or at least we

join each of those items back up with a

hyphen and then we and then we just send

all that to our collection item where we

collection ID

now when I did it first time it wasn’t

it was just setting up as a draft I

didn’t want that I just wanted it to

publish straight away so you need to set

this query program of live equals true

and with all that oh we need to post and

change that to post

so there we go and you can see that the

name Sam is there the slug is lowercase

just to show you that it’s hyphenating

everything we’ll send another one and

there you can see it there

so that’s where I got to before I

realized my memory card was out of space

so looking back into here we can also

update which looks like it uses oh we

need it we need a specific item to

actually be able to update them and then

the same with delete so with that let’s

delete let’s just let’s just

let’s implement the delete so it’s a

delete method

and their method needs to be delete so

let’s just replace some of this stuff


and don’t need that


that’s the same

and then the URL needs a collection ID

which we have and then it needs to an

item ID so let’s accept an item



and get that from request param so

item idink so we’re getting those two

things and we need to replace this URL



Item ID

we don’t need to send anybody

we’re literally just sending this so

let’s change this now to delete by the

way inside of uh inside of Postman we

can create

we don’t need to keep replacing this we

can add just add a new request


delete and then we can name this save

and then we can name this collection

item and this would be also called

collection item

and then we can

duplicate that make it into a post

rename it

but I’m looking at the

I’m looking at the colors of these to

know which one I’m selecting so we can

just do that

blah blah blah try it again

perfect provided ID is invalid so how do

we get that ID well let’s go into here

and let’s look at this one the ID there

is the item id there

replace that there


refresh this to see this

and there you go it’s been deleted so

you can start to see how we’re building

this up now but rather than keep on

doing the same thing let’s start

implementing some sort of protection

into your roots so looking at this if

there’s no name because that’s required

then we actually want to respond

with please provide a name and this

could help us or or the users who are um

interfacing with our API to actually

provide the right thing so if we post

and go to body and we untick the name so

we’re not providing a name we should see

please provide a name in the back end

we can go a step further and say

if let’s say we want a first and second

name these are very basic examples so

please don’t consider this

a lesson on validation or anything like

that this is literally just showing you

what we need to do so if uh name dot

split this

oh we split a space

if there’s no that

if there’s no that please we can assume


provide first and second name as an


because it’s hitting it’s hitting that

and then continuing on and actually

making that post request and then

collecting again so

okay so I think it’s because of that

looks good


so I’m Gregory seven so it’s actually

okay we’ve got a few Sam gregories in

there okay so looking at that then that

could be another bit of validation you

could do you can actually get you can

make sure it’s Unique by looking for

um a slug that matches

Sam hyphen Gregory so with that you

could go const


uh what would we do we would get we need

to get an item

so list remove list collection item get

the list of items

collection point

data equals await


dot Json


and then we want to

Loop through all of these

all each item


and let’s just log that out

turn that just so we don’t send anything

cool something’s broken but that’s fine

collection item data be careful oh

question 1940 is not a function data

okay let’s just log that and wouldn’t

expect that to be the case

but we might be surprised

invalid token provided




okay so it’s an object and then it’s


so in here

we go

um items dot for each

just do that

and then we want to look at the name so


item.name equals the name that we pass

so if they’re exactly the same

then we want to return

res dot send



uh this item already exists

and we want to break out of that four

each so I think

let’s do something else



there’s items internet items items


let’s do this


to prevent uh duplicates here we’re

starting to

um really clean up and make sure we’re

interrogating the data that comes our

way you could say that you only want a

name to be a minimum set of characters

so we’re protecting web we’re not even

making a request to webflow First we’re

actually doing our own authorization and

things like that before we’re sending

anything to webflow we’re at the home

stretch right now this video has been

such a nightmare to film everything has

gonna go wrong space on the memory card

battery going out battery going out on

my laptop it’s just been a nightmare

it’s literally taking me hours anyway

let’s carry on with the final topic

which is everyone’s favorite cause sorry

[ __ ] that up cause

what is cause

um it’s basically a protection against

requesting data

between uh different websites right and

we want to basically make sure that our

website can only our API sorry will only

accept requests from a specific website

URL first thing we’re going to want to

do is

npm install

cause I ain’t simple straightforward

then we’re going to want to import it


cause and then we’re going to want to

use it

let’s do this app dot use



now this in and of itself doesn’t really

do anything we actually want to specify

what URLs allow

from our uh origin we allow from our uh

from our API so looking at the cause

documentation here

we we use we basically enable calls on

all requests which is exactly what we

want to do but we want to configure it

from which URLs we accept requests from

so if we just set that to


make sure I’ve got that okay let’s

not right

and then if I remember rightly they also

might as well just do that just to be

sure uh cause use cause blah blah blah

and then close that now this will just

quite frankly enable calls on every

single request

we don’t have to do this according to

the documentation we can actually just

do it per function which is fine and

then we can have different options per

function but for right now we’re just

going to accept cores on every every

single function and if we deploy that

now I’ve set up inside of just this page

I’ve been working on

a basic request to our get uh sites

which all it does is just return

information about the site it’s very

very basic so that’s just a Fetch and if


publish this is you’ll get that classic

cause error saying that we’re not

cause to this URL are not accepted from

brandstrategy.webflow.com so

if we copy the URL

paste it into here

if I give this a refresh we have no

cause error and we’re actually returning

that data to the to the front end and

I’ve done that through our just a simple

fetch request so we actually have that

data there so to wrap all this up we’ve

built our middleware that interacts with

webflow we control everything inside of

this middleware and it has


to directly

communicate with webflow we can do

whatever we want in here we do form

validation we can do data manipulation

we can do all sorts as completely within

our control we can add things we can

delete things anything that’s available

via the webflow API we can activate or

communicate with within our middleware

it really is up to us about how we

communicate with this API as long as

it’s from the selected domains that we

give it I hope this gives you a a

starting point at least to start digging

into building your own API having more

control over the manipulation of data in

the webflow back end and doing it safelyand securely I would definitely look more into authentication and I’m hope I’ll hope then to bring another tutorial specifically on the more authentication and bringing more security to it as I learn it myself look more into how you can validate the data as well and and think more about well what if someone does this maliciously or whatever and that would be really dependent on your use case so I can’t normally answer that really.

Have fun with it really first and foremost I mean just start learning how to create apis and all the rest of it I hope this was useful. Join my Discord because I love chatting to people over there if you have any questions for me or whatever please like subscribe all the rest of it and until the next time happy no coding