How to connect with Webflow API
Last updated
Was this helpful?
Last updated
Was this helpful?
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
A site created in Webflow
The site's corresponding Webflow personal API key
Go to your Webflow dashboard, click on Settings for the project you want to create your API Key.
From the top menu, click on Integrations.
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.
Follow these steps after getting your Webflow site's personal API key:
In your Bravo API Collection Settings, click on Authentication.
Select Authentication type as Bearer and introduce your Webflow API key to the Token field and Save.
How to get the Site ID?
Open your Site Designer.
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
Add the endpoint to your API Collections and click on Send.
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 , you'll find all the existing Webflow resources and API methods you can integrate to your project. Here's a basic example:
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 about this method.
Click on the Asset Manager and click on the Settings icon of any of the images you have available to show the Asset Details.
Complete the API set up by following this tutorial Set up API requests
