🕸️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 Webflow account

• 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.

   

   Webflow Site Settings
2. From the top menu, click on Integrations.

   

   Webflow Tab menu
3. Scroll down through the page and click on “Generate an API key”. Copy your API key and save it for later.

   

   Webflow API access token generator

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.

   

   API Collection Authentication Settings

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.

URL request to GET a site by site ID

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.

   

   Webflow Assets Manager
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.

   

   Webflow Assets Manager - Asset Details

   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.

   

   GET My Site by Site ID

Complete the API set up by following this tutorial 👉 Set up API requests