> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.koala.sh/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to connect Webflow to Koala AI

Connecting Koala AI to Webflow is easy. Follow our detailed guide below, and you should have yours connected within a few minutes!

### Setting up the Webflow Integration

1. Go to your Koala AI [Account Page](https://koala.sh/account) and scroll down until you see the **Integrations**.

![Koala AI Integrations](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/image_3q8jej.png)

2. **Click Webflow**, and you should see a menu appear.

![Webflow Integration menu](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/image_1jahoo3.png)
3. Enter your **Webflow Domain** in the box provided. This can be found on your **Webflow Dashboard**.

For example, the Webflow Domain in the screenshot below is **koalasample.webflow.io**.

![Webflow Domain sample](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/image_iwjqyq.png)
4. Next, we need to get the **Collection ID**. From your Dashboard, click **Open Site**.

![Open Site button](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/image_1xmlftv.png)
5. Once in your site's Designer, click the **CMS icon** on the **top left corner**. Alternatively, the shortcut for opening the CMS is **Alt + C**.

![Webflow CMS Icon](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/webflow-cms_1249457.jpg)
6. In the CMS, you will see all the collections you have. **If there is no existing collection for your blog posts, you must first create one**. If you already have an existing collection for blog posts, skip this step.

**Click the plus sign (+)** **beside CMS Collections**, choose the **Blog Posts template** provided by Webflow, then **click Create Collection.**

![Webflow Create Collection - Blog Posts Template](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/blog-posts-collection_10sxgc8.jpg)
7. Once you have a Collection ready, **click the Settings icon beside the collection that you want to use**. Copy the Collection ID, then post it on your Koala AI Account page.

![Webflow Collection ID](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/collection-settings-with-colle_lugimc.jpg)

**Note: ** If you plan to use a Collection that was previously created, **make sure that it contains a Post Body field**. If it doesn't, click **Add New Field** and enter the following. The integration will not work without this.

![Webflow Post Body](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/post-body-field_fbmafu.jpg)

8. Now we will create the **API Token**

. From the CMS, click the **button with three horizontal lines on the top left corner > Site settings > Apps & Integrations tab > API access**.

![Webflow Site Settings](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/webflow-site-settings_ujq3wy.jpg)
9. Click **Generate API token**. Enter a name such as "KoalaWriter" or "Koala AI" and choose the **Read and write permission for CMS**.

![Webflow API Token Settings](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/webflow-api-token-settings_1yo1odc.jpg)10. Click **Generate token** and **copy the API token** once generated. Make sure to save it somewhere in case you end up needing it again.

![Webflow API Token](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/webflow-api-token_3261ov.jpg)
11. **Paste the API token** into the box provided on your Koala AI Account page, and click the **Connect** or **Add Account** button below the Webflow API Token box.

![Webflow Integration Settings](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/image_snacp3.png)
12. Once successfully connected, you should see it appear under your **Connected Accounts**.

![Koala AI Connected Accounts](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/image_enkel9.png)
## How To Use

Once you connect your site, you will be able to see the "Create Draft" button above all your articles on KoalaWriter. It will look like this if you have multiple integrations set up:

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/image_b4rhxk.png)

Click **Create Draft** and you should be able to select your **Webflow** site from the dropdown menu. If successful, you will see the following message appear:

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/9/5/b395860c9336b00/image_1pac49m.png)

## 🛠️ Troubleshooting

If you encounter any issues with the plugin please contact us at hello@koala.sh