๐Ÿ•ธ๏ธHow to connect with Webflow API

Webflow API enables you export Webflow content and to pull your Webflow CMS data into your Bravo app. โ€จ

In this tutorial, you'll be learning the steps to follow on how to connect your app to Webflow API.

Requirements:

  • A site created in Webflow

  • The site's corresponding Webflow personal API key

How to get the personal API key

  1. Go to your Webflow dashboard, click on โš™๏ธ Settings for the project you want to create your API Key.

  2. From the top menu, click on Integrations.

  3. Scroll down through the page and click on โ€œGenerate an API keyโ€. Copy your API key and save it for later.

Webflow generates one API per site, you can consider authenticating each integration with separate access tokens if you want multiple integrations.

Setting up the Webflow authentication in Bravo

Follow these steps after getting your Webflow site's personal API key:

  1. In your Bravo API Collection Settings, click on Authentication.

  2. Select Authentication type as Bearer and introduce your Webflow API key to the Token field and Save.

Once having your backend endpoints ready and the Webflow authentication set in Bravo, you can now add your requests in your API collections. In this Webflow API documentation, you'll find all the existing Webflow resources and API methods you can integrate to your project. Here's a basic example:

GET a Site by Site ID

To retrieve your Webflow Site information and export the data to your app. You'll need a Site ID in order to tell Webflow which site you want to access. Find more information here about this method.

How to get the Site ID?

  1. Open your Site Designer.

  2. Click on the Asset Manager and click on the โš™๏ธ Settings icon of any of the images you have available to show the Asset Details.

  3. Click on the "Open image in a new tab" icon or the "Copy the URL link" icon to get the image URL which will indicate your Site ID.

    Your Webflow Site ID is the hash of numbers and letters located right after the "https://uploads-ssl.webflow.com/". For example: https://uploads-ssl.webflow.com/[your-site-id]/6285587dc55876118_yourImageName.png

  4. Add the endpoint to your API Collections and click on Send.

Complete the API set up by following this tutorial ๐Ÿ‘‰ Set up API requests

Last updated