Book a Call
Get a Quote

Comprehensive Guide to Building a Webflow CMS in Retool

Lander Audian
June 14, 2024
10 min read
Comprehensive Guide to Building a Webflow CMS in Retool

Integrating Webflow's CMS with Retool allows you to manage your website's content more efficiently. This blog provides a step-by-step guide on connecting Webflow's Collection and Items APIs to Retool, enabling you to create, update, and delete content directly from a custom interface. By following this guide, you can streamline your content management workflow and enhance your website's functionality.

Understanding the Webflow CMS

Webflow has many API features you could make use of from anywhere to help you in managing your Webflow website. Among those APIs is the CMS API, which in this guide, we’ll utilize to see how we can manage data of a Webflow website from outside Webflow itself. Webflow CMS API is a robust, full-featured content management system that provides a platform for you to manage and update your website's content. It's designed to be flexible and powerful, allowing you to create a custom content structure that suits your specific needs.

Webflow APIs

Webflow’s Collection and Items API

Webflow provides a Collection API and an Items API, which are integral parts of the Webflow CMS. The Collection API allows you to manage your website's collections, while the Items API is designed for managing individual items within those collections.

Webflow’s Collection and Items API

Collection API

Collections in Webflow are equivalent to tables in a database, each containing a set of structured data.

  • Create Collections:
    • You can create new collections to organize different types of content.
    • Define the structure and fields of each collection.
  • Read Collections:
    • Retrieve information about existing collections on your site.
    • List all collections to understand the current content structure.
  • Update Collections:
    • Modify the structure of existing collections.
    • Add, remove, or update fields within a collection.
  • Delete Collections:
    • Remove entire collections if they are no longer needed.
    • Be cautious as this action is irreversible and will delete all items within the collection.

Items API

Items are simillar to rows in a table, each representing a specific piece of content.

  • Create Items:
    • Add new items to a collection.
    • Populate fields with relevant data for each item.
  • Read Items:
    • Retrieve specific items or list all items within a collection.
    • Filter and sort items based on various criteria.
  • Update Items:
    • Modify the content of existing items.
    • Update specific fields or the entire item as needed.
  • Delete Items:
    • Remove individual items from a collection.
    • Ensure you handle this carefully to avoid unintentional data loss.

By leveraging these APIs, you can programmatically manage your Webflow CMS, enabling greater flexibility and control over your website's content.

Creating a CMS from Anywhere

One of the most exciting features of Webflow's Collection and Items API is that they allow you to create your own Webflow CMS from anywhere. This means that you can create, update, and more things to manage ****your Webflow CMS content from any app or code repository, as long as you have access to the internet to hit their API.

Step-by-Step Guide

1. Enable API Access:

Enable API Access
  • Navigate to the site settings in Webflow.
  • Go to the "Integrations" tab.
  • Generate an API token. Copy this token and store it securely.

IMPORTANT: Make sure you are you enable read and write access for CMS in the API settings.

Enable read and write access

2. Make Your First API Call:

  • Authentication to make Webflow API calls is very simple. Just add into the headers of your requests, the Authorization: Bearer <API Token> .
  • List your site’s collections to understand the existing structure using the endpoint. You can get your site_id by:
    • Doing a GET on sites on the API: /sites. That will list the sites your access token has access to.
    • The Site ID is also at the top of the HTML in your published site.
/sites/{site_id}/collections

3. Mange your websites’ collections and collection items

You can now do any kind of actions like create, update, delete or publish for your collections, as well as for items you plan to have within that collection from any application you plan to use.

You can see more endpoints that you could use depending on your use case here:

All that’s left is develop and create the UI that fits your preferrence to manage the CMS.

Some important things about managing collections and their items

  • ⚠ It's important to note that Webflow's CMS changes are not instantly live on your published site. The changes made in the Webflow Designer or through the CMS Editor need to be published to take effect on the live site. Luckily there’s API endpoints for Publishing and Unpublishing which you can utilize to manage your content accurately.
  • ⚠ Currently, the Unpublish endpoint is the Delete Live, where the Delete endpoint is for actually deleting the content from the CMS.

IMPORTANT*  using the Delete endpoint to remove a content will not remove it from the live site. So be sure to Unpublish first (Delete Live) before the deletion of the content from the CMS. In case you happened not to do this step accidentally, you can get the live items and retrieve the id of the content you want to remove from the live site using the Get Live endpoint

4. Testing and Debugging

After your done with creating functionalities to manage your CMS, make sure that that implementation of is working compatibly with how you want it to be. You can use some API testing tools to do this efficiently.

5. Best Practices and other things to know

  • Refer to the Webflow API documentation for detailed information on endpoints, request formats, and response structures. If you are using their beta API make sure to always check out the changes
  • Follow best practices for API usage, including handling rate limits and error responses gracefully.

Making Use of Webflow’s Webhooks to Sync Data from the CMS

Webflow’s webhooks allow you to automate tasks by sending real-time notifications when specific events occur in your Webflow CMS. By creating webhooks, you can sync data from the CMS to external systems or applications, ensuring that changes in your Webflow content are reflected elsewhere without manual intervention.

How to Create Webhooks

TTo create a webhook in Webflow, follow these steps:

1. Create a Webhook in Webflow

You can create a webhook in two ways:

  • Through the Webhook API, using create webhook endpoint. (below are also the list of events needed to detect changes in the CMS, create a webhook for each event)
Create a Webhook in Webflow

collection_item_changed - Sends the collection_item_changed event

collection_item_created - Sends the collection_item_created event

collection_item_deleted - Sends the collection_item_deleted event

  • Through the site settings, in the Integrations tab.

IMPORTANT: The webhook events you can create through the site settings is limited, whereas creating a webhook through API allows for more event options

2. Configure the Webhook

Enter the webhook URL where the notifications should be sent. This is the endpoint of your external system or application that will process the data. After reviewing your settings and saving the webhook. Webflow will now send HTTP POST requests to the specified URL whenever the selected event occurs and you can do some conditional data processing based on which trigger type is sent.

3. Process Incoming Data

  • When a webhook notification is received, extract the relevant information from the payload.
  • Use this data to update your external system or application. For example, if an item is created in the Webflow CMS, add a corresponding entry in your external database.
  • Make sure to handle all the events you are expecting to receive based on the webhook you have set up.

By effectively using Webflow’s webhooks, you can ensure real-time synchronization between your Webflow CMS and external systems, maintaining consistency and reducing the need for manual updates.

The Pros and Cons of Creating Your Own Webflow CMS

Pros:

  • Full Control - Allows you to manage every aspect of your CMS.
  • Customization - Build a CMS that perfectly fits your needs.
  • Flexibility - Manage your content from anywhere. If you implemented it to high performance and efficiency

Cons:

  • Technical Knowledge Required - Requires familiarity with APIs and programming.
  • Time-Consuming - Setting up and maintaining the CMS can take significant time.
  • Potential Inefficiencies - Without careful planning, the CMS may not be as efficient or user-friendly.

By having known these things and following out this guide, you can effectively use Webflow’s API to create and manage a custom CMS tailored to your needs. You won’t have to go to Webflow Designer and wait for it to load and manage your CMS, specially when testing out content changes where a full refresh on the designer is needed.

Get in Touch

Ready to bring your dashboard vision to life? Contact Retoolers today, and let us help you create a powerful, intuitive dashboard that meets your exact requirements.

Lander Audian
Retool Developer