# 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](https://webflow.com/)
> * 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 :gear: **Settings** for the project you want to create your API Key. 

   <figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FlPL9AImNilBMXirzv7fx%2FFrame%204.png?alt=media&#x26;token=ec5ea41f-9d04-4809-857c-a98785b950ba" alt=""><figcaption><p>Webflow Site Settings</p></figcaption></figure>
2. From the top menu, click on **Integrations**.<br>

   <figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FUycAdWpAtNRnLqQo3B7p%2FScreenshot%202023-02-27%20at%2009.24.39.png?alt=media&#x26;token=48c7e429-96d7-46e0-bd17-fd7f12715c4c" alt=""><figcaption><p>Webflow Tab menu</p></figcaption></figure>
3. Scroll down through the page and click on **“Generate an API key”**. Copy your API key and save it for later.\ <br>

   <figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fuqt4QPNAbFfRvOINjNG0%2FScreenshot%202023-02-23%20at%2018.26.39.png?alt=media&#x26;token=8cbfc065-5d7f-4c3a-918f-1d5c032b929a" alt=""><figcaption><p>Webflow API access token generator</p></figcaption></figure>

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

### 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**.<br>

   <figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FCxAHQZvatgLMdYylrpby%2FFrame%204%20(1).png?alt=media&#x26;token=f7670614-7a35-46ab-a7d0-47ef50a72828" alt=""><figcaption><p>API Collection Authentication Settings</p></figcaption></figure>

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](https://developers.webflow.com/), 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](https://developers.webflow.com/reference/get-site) about this method.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FeTWnJuB9POQKsv82xW51%2FScreenshot%202023-02-27%20at%2009.16.24.png?alt=media&#x26;token=134263cc-09c7-422c-81ee-bee2f58bae48" alt=""><figcaption><p>URL request to GET a site by site ID</p></figcaption></figure>

**How to get the Site ID?**

1. Open your Site **Designer.**
2. Click on the **Asset Manager** and click on the :gear: **Settings** icon of any of the images you have available to show the **Asset Details**.<br>

   <figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FL74L8IxUN9tl8i6GXucP%2FFrame%204%20(3).png?alt=media&#x26;token=138c9b54-a083-4d79-a8ed-7298993bc5d3" alt=""><figcaption><p>Webflow Assets Manager</p></figcaption></figure>
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.<br>

   <figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FxOB3vM7ai4rN55ULiPEX%2FFrame%204%20(5).png?alt=media&#x26;token=e04b66c9-c115-4f8e-b8df-b6030a35bd08" alt=""><figcaption><p>Webflow Assets Manager - Asset Details</p></figcaption></figure>

   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/><mark style="color:blue;">**\[your-site-id]**</mark>/6285587dc55876118\_yourImageName.png
4. Add the endpoint to your API Collections and click on **Send**.

   <figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fkl8WACCQViby2kmTZdDe%2FScreenshot%202023-03-02%20at%2010.26.27.png?alt=media&#x26;token=2394f7b0-51ae-48ae-b237-87d194ce9181" alt=""><figcaption><p>GET My Site by Site ID</p></figcaption></figure>

Complete the API set up by following this tutorial :point\_right:  [set-up-api-requests](https://docs.bravostudio.app/connect-api/set-up-api-requests "mention")