Webflow CMS

Webflow is a SaaS application that allows building responsive websites with browser-based visual editing tool with data. In short, it is a web design tool, CMS, and hosting platform. The CMS lets you structure content types you’ll publish over and over again — like blog posts, product pages, etc. — by combining modular "fields".

Connect Webflow CMS to Draftbit

If you do not have a Webflow account, create one here.

To use Webflow CMS outside the Webflow dashboard you need to make sure you have created at least one collection with appropriate data in form of fields. Both of them are required when accessing the REST API URL.

For this example, we are creating a new Webflow project from scratch with our own data set:

Get your REST API URL:

To perform read and write operations on a Webflow CMS API is done via the Base URL: https://api.webflow.com/collections/{YOUR_COLLECTION_ID}. This Base URL requires you to specify a collection ID to start with. This value can be accessed when creating or modifying a collection in the CMS:

  • From the sidebar on the left click the CMS tab.
  • On the collection name, click the settings icon or gear icon to modify under CMS Collections.
  • Copy and save {YOUR_COLLECTION_ID} listed as the value of Collection ID.

Get Authentication Token:

The Webflow CMS API allows read and write operations to the Base URL only if there is an Authorization header is passed with the value of Bearer <access_token>. To fetch the <access_token>:

  • From the Projects dashboard screen, click the menu icon and then click Settings
  • Go to the Integrations tab and go to the API Access section.
  • Click on the button Generate API token to generate a new <access_token>.
  • Copy and save the <access_token> generated here because you won't be able to access it later. This going to be used in the next section

Setup steps in Draftbit

To access the API in the Draftbit app, you need the pass the <access_token> as the global variable in the form of an Authorization header.

  • Open the Settings tab on left-navbar.
  • In the Project Settings, navigate to Global Variables.
  • Enter a key to access the Authentication token and the value for it.
  • The Authorization token value requires you to enter a Bearer token. The syntax is Bearer <access_token>.
  • In place of paste your own <access_token> (from the previous section) and then click Add.
  • Click Save.

Accessing an item or a field from the Webflow CMS also requires an HTTP header called accept-version to be sent with every request with a value of 1.0.0. Let's add this as a Global Variable:

  • Open the Settings tab on left-navbar.
  • In the Project Settings, navigate to Global Variables.
  • Enter a key to send the accept-version and the value for it.
  • The Version requires you to enter the value of 1.0.0 and then click Add.
  • Click Save.
  • Open the Data tab on left-navbar.
  • From the Add a service menu, click on Rest API.
  • Enter a name for your REST API.
  • Paste your Base URL (from the previous section) into the Base URL input field.
  • Click the + twice from the Headers section to add two new Headers.
  • First header is going to be Authorization and the second accept-version.
  • Select the Global Variables for Authorization and accept-version (from the last step).
  • Click Save.

Available Webflow recipes for Draftbit

Fetch all items from Webflow API into a List in Draftbit

To a blank screen in Draftbit, add a nested Fetch component, List component, View component, and a Text component so that your Layer Tree looks like this:

Inside of the View component, you can place as many Text you would like to be rendered for each field in your data set.

The next step is to create an endpoint. Let's try fetching the data using the GET request:

  • Click Create new endpoint.
  • Enter a name for this endpoint.
  • Click the Test button next to the Endpoint input to make sure you've successfully connected to your Webflow CMS.
  • Once everything looks right, click Save to close the modal.
  • Select the Fetch component in the Layer Tree and select the Service you have created.
  • Select the Endpoint you want to fetch the data from.
  • Select the List component in the Layer Tree.
  • Change its Mapped Value to data.items under the Data Tab.
  • Now you can configure a Mapped Value on each Text component to name you have inside the View of your Fetch component.
  • Here is also a Preview mode is shown on how the data is fetched from the service API.

Fetch single item to a Draftbit app

To a blank screen in Draftbit, add a nested Fetch component, View component, and a Text component so that your Layer Tree looks like this:

To fetch a single post from Webflow CMS, you'll have to specify an item's ID which is found when fetching data in the Preview mode.

  • Click Create new endpoint.
  • Enter a name for this endpoint.
  • Add the /items/{{ID}} in Add Path & Params.
  • Add a Test value for the {{ID}}.
  • Click the Test button next to the Endpoint input to make sure you've successfully connected to your Webflow CMS.
  • Once everything looks right, click Save to close the modal.
  • Select the Fetch component in the Layer Tree and select the Service you have created.
  • Select the Endpoint you want to fetch the data from.
  • Add the value for the ID in the Configuration section. This value is used to fetch the single record.
  • Select the List component in the Layer Tree.
  • Change its Mapped Value to data.items under the Data Tab.
  • Now you can configure a Mapped Value on each Text component to name you have inside the View of your Fetch component.
  • Here is also a Preview mode is shown on how the data is fetched from the service API.

POST data from a Draftbit app

You need to use a component that:

  1. accepts user input and
  2. has a Field Name prop to POST data using Webflow CMS API.

Examples of these include:

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Webflow CMS service.

In the new endpoint you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to POST using the dropdown.
  • Add the /items path to fetch all the items in the Add Path & Params input.
  • On the right-hand side of the modal, click the Body Structure tab and insert the request of the body. This will differ depending on the fields you have in your data model.
  • The value of the name field is going to be the value of the Field Name prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{FIELD_NAME_PROP_VALUE}}. The information regarding this is also given in the Body tab.
  • In the Body tab you can provide a Test Value for {{FIELD_NAME_PROP_VALUE}}. A Test value is a temporary value that can be used for variables during development.
  • In the Body Preview tab you verify that the Body Structure has a valid structure.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Below is a general breakdown of what the body of the POST request will look like. You're able to add multiple fields to a request, just make sure you include a comma after each field. Passing _archived and _draft field with a boolean value is mandatory.

{
  "fields": {
    "name": {{textInputValue}},
    "_archived": false,
    "_draft": false
  }
}

Initially the data published from the REST API to Webflow CMS is in staging mode and is not live. To publish the live data, add a querystring parameter: ?live=true in the Add Path & Params input.

You can add the POST endpoint to submit the data entered in the Draftbit using the TextInput component and Touchable component.

  • On the Touchable component go to the Interactions tab (the last tab).
  • Click the + to open a drop-down menu in the Action tab and select the option Submit Data.
  • Setup the Submit Data by selecting the Service and the Endpoint.
  • Then add the configuration for body request to be sent by selecting the value for textInputValue.

Now you can make a POST request to add new data from the Draftbit app.

Update data from a Draftbit app

The PUT request is used to update the single content entity. It accepts similar input components as mentioned in POST request and the request is triggered using a Touchable component.

To navigate from the main screen of the app to the screen where the updated value is entered and then eventually the PUT request Endpoint is triggered, the initial step is to create a new screen with a TextInput component, a Touchable component, and a Text component.

  • Select the Touchable component that is specified for updating a value in-app screen.
  • Go to the Interactions tab.
  • Click the + to open a drop-down menu in the Action tab and select the option Navigate.
  • Set the Destination option to point to a new screen where the value can be updated.
  • In the Pass Data option, click the + to add a key-value pair.
  • Add the ID as the key and then select its value _id to be passed to the navigation screen.
  • Similarly, also select the SLUG as the key and its value slug to be passed to the navigation screen.

You'll need to create a new endpoint in your Webflow CMS service. In the new endpoint you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to PUT using the drop-down.
  • Add the `/items/{{ID}} of the entity to update in the Add Path & Params input.
  • Add a Test Value for the {{ID}} to test the Endpoint.
  • On the right-hand side of the modal, click the Body Structure tab and insert the request of the body. This will differ depending on the entities you have in your content model.
  • The value of the field is going to be the value of the Field Name prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{FIELD_NAME_PROP_VALUE}}. The information regarding this is also given in the Body tab.
  • Pass the {{SLUG}} to update the value of the slug of the existing entity.
  • In the Body tab you can provide a Test Value for {{FIELD_NAME_PROP_VALUE}} and {{SLUG}}.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Below is a general breakdown of what the body of the update request will look like.

{
  "fields": {
    "name": {{textInputValue}},
    "slug": {{SLUG}},
    "_archived": false,
    "_draft": false
  }
}

Delete data from a Draftbit app

The DELETE request is to the Webflow CMS API with an entity's ID to remove that particular record from the table.

You'll need to create a new endpoint in your Webflow CMS service. In the new endpoint you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to DELETE using the dropdown.
  • Add the `/items/{{ID}} of the entity to update in the Add Path & Params input.
  • Add a Test Value for the ID to test the Endpoint.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Did this page help you?