Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 54 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Webflow JS SDK
# Webflow JavaScript/TypeScript SDK

[![npm shield](https://img.shields.io/npm/v/webflow-api)](https://www.npmjs.com/package/webflow-api)
[![fern shield](https://img.shields.io/badge/%F0%9F%8C%BF-SDK%20generated%20by%20Fern-brightgreen)](https://github.com/fern-api/fern)
Expand All @@ -19,57 +19,76 @@ Add this dependency to your project's package.json file:
Using npm:

```shell
$ npm install webflow-api
npm install webflow-api
```

Using yarn
Using yarn:

```shell
$ yarn add webflow-api
yarn add webflow-api
```

## Authentication

You can use a workspace token to access all of the sites in your Webflow Workspace or a site token to access a single site.

- To get a workspace token, open the [Webflow Dashboard](https://webflow.com/dashboard?utm_source=dashboard), click **Apps & Integrations > Manage**, and under **Workspace API access**, click **Generate API token**.

- To get a site token, find the site in the [Webflow Dashboard](https://webflow.com/dashboard?utm_source=dashboard), open its settings, and under **API access**, click **Generate API token**.

For more information about tokens, see [Authentication](https://developers.webflow.com/data/reference/authentication) in the Webflow documentation.

For more complex authentication with OAuth, see [OAuth](#oauth) below.

## Usage

Simply import `webflow-api` and start making calls to our API.
To use the SDK, import the `webflow-api` package, provide your access token, and make calls to the Webflow API, as in this example:

```javascript
import { WebflowClient } from "webflow-api";

const webflow = new WebflowClient({ accessToken });
// Workspace or site token
const webflow = new WebflowClient({
accessToken: process.env.WEBFLOW_API_TOKEN,
});

// Env. variables
// in format of string, e.g.: "639656400769508adc12fe42"
// Environment variables
// in string format, such as "639656400769508adc12fe42"
const site_id = process.env.SITE_ID;
const custom_domain_id_1 = process.env.CUSTOM_DOMAIN_ID_1;
const custom_domain_id_2 = process.env.CUSTOM_DOMAIN_ID_2;

// Sites

// List Sites
// List sites
const sites = await webflow.sites.list();

// Get Site
// Get site
const site = await webflow.sites.get(site_id);

// Get Custom Domains
// Get custom domains
const customDomains = await webflow.sites.getCustomDomain(site_id);

// Publish Site
const site = await webflow.sites.publish(site_id, {
// Publish site
const publishRequest = await webflow.sites.publish(site_id, {
customDomains: [custom_domain_id_1, custom_domain_id_2],
publishToWebflowSubdomain: true,
});
```

## OAuth

To implement OAuth, you'll need to [register a Webflow App in your Workspace](https://developers.webflow.com/reference/authorization)
To implement OAuth, you must register a Webflow App in your Workspace with the "Data CLient" building block and get its client ID and secret.
See https://developers.webflow.com/apps/data/docs/register-an-app.

### Step 1: Authorize URL
To get the client ID, edit the App in your workspace, go to the Building Blocks tab, and copy the ID from the **Client ID** field.

The first step in OAuth is to generate an Authorization URL. Use this URL
to fetch your Authorization Code. See the [docs](https://docs.developers.webflow.com/v1.0.0/docs/oauth#user-authorization)
for more details.
For full instructions, see https://developers.webflow.com/data/reference/oauth-app.

### Step 1: Generate an authorization URL

The first step in OAuth is to generate an authorization URL.
You direct your users to go to this URL, which prompts them to approve the App's access to specific sites or Workspaces.

This example code generates the authorization URL:

```javascript
import { WebflowClient } from "webflow-api";
Expand All @@ -84,31 +103,39 @@ const authorizeUrl = WebflowClient.authorizeURL({
console.log(authorizeUrl);
```

### Step 2: Retrieve your access token
### Step 2: Retrieve an access token

The callback from the authorization URL includes the state that you set in the request and an authorization code.
You can use this authorization code to generate an access token for the App.

Use the `getAccessToken` function and pass in your `client_id`,
`client_secret`, and `authorization_code`.
This example passes the App's client ID and secret and the authorization code to the `getAccessToken` function:

```javascript
import { WebflowClient } from "webflow-api";

const accessToken = WebflowClient.getAccessToken({
clientId: "your_client_id",
clientId: "your_client_id",
clientSecret: "your_client_secret",
code: "your_authorization_code"
});
```

### Step 3: Instantiate the client

Instantiate the client using your `access_token`.
Instantiate the client using the access token:

```javascript
import { WebflowClient } from "webflow-api";

const webflow = WebflowClient({ accessToken });
const webflow = new WebflowClient({ accessToken });

const {sites} = await webflow.sites.list();

console.log(sites);
```

Now the App has access to the sites or Workspaces that the user allowed access to.

## Webflow Types

All of the types are nested within the `Webflow` namespace. Let IntelliSense
Expand Down Expand Up @@ -150,7 +177,7 @@ const sites = await webflow.sites.get(..., {
```

### Retries
The SDK will automatically retry failures with exponential backoff.
The SDK will automatically retry failures with exponential backoff.
You can configure the retries by setting maxRetries.

```javascript
Expand Down