# Connect your site (CMS)

> Step-by-step connection for WordPress, Ghost, Webflow, Wix, Shopify, Framer, HubSpot, Notion, GitHub / MDX, Next.js and your own webhook.

Source: https://prefera.si/docs/integrations/cms
Docs index for agents: https://prefera.si/llms.txt

Connect your site so Prefera can send articles and fixes there. Prefera sends them as drafts first, and you approve before anything goes live. See [Publishing](/docs/publishing) for how drafts, live pages and unpublishing work.

Every connection uses the same screen: **Integrations** > **Publish to your site**. Click **Connect** on the tile, follow the steps in the dialog, then use **Test connection** and **Save**. Keys and passwords are stored encrypted and are not shown again. Later, **Manage** reopens the same form and **Disconnect** removes the connection.

> [!NOTE]
> Your plan includes a set number of CMS connections. If you are at the limit, the dialog says so and links to **Upgrade** or **Pick a plan**. No CMS? Use **Host it on Prefera** instead. See [Prefera-hosted blog](/docs/hosted-blog).

On WordPress, HubSpot and Shopify tiles an **Article style** menu appears once connected, with **Prefera editorial** and **Match my site**.

## Draft or live

| Site | What Prefera creates |
| --- | --- |
| WordPress | A draft |
| Ghost | A draft post |
| Webflow | A draft in your blog collection |
| Wix | A draft blog post |
| Shopify | An unpublished blog article |
| Framer | A draft item in a CMS collection |
| HubSpot | A draft blog post |
| Notion | A page in your database |
| GitHub / MDX | A draft pull request |
| Next.js | A draft pull request |
| Webhook | A `publish.draft` event |

Going live is a separate step you approve. Disconnecting never removes pages already published.

### WordPress

**What you need:** your site address. Works with self-hosted WordPress and WordPress.com.

1. Open **Connect WordPress** and type your site address.
2. Click **Connect with WordPress**. Your own WordPress opens. Log in if asked and click **Yes, I approve of this connection**.
3. You come back to Prefera, connected. No password to copy.

If you prefer to paste a password, open **Or paste an application password instead**:

1. Open your profile in WordPress (**Users** > **Profile**) and scroll to **Application Passwords**.
2. Type `Prefera` as the name, click **Add New Application Password** and copy the password it shows once.
3. Paste it with your WordPress username (the one you log in with, not your email).

Prefera creates drafts. Publishing live sets the post to published.

### Ghost

**What you need:** your site URL and the **Admin API key** (not the Content API key).

1. In Ghost Admin, open **Settings** > **Integrations**, click **Add custom integration** and name it Prefera.
2. Copy the **Admin API key**. It looks like `64f1…:9ab3…`, two parts joined by a colon.
3. Paste it with your **Site URL**.

Prefera creates draft posts.

### Webflow

**What you need:** a site token with **Sites** read-only and **CMS** read and write.

1. In Webflow, open your site, then **Site settings** > **Apps & integrations** > **API access**, and click **Generate API token**.
2. Name it Prefera, set **Sites** to **Read-only** and **CMS** to **Read and write**, generate it and copy the token. Webflow shows it once.
3. Paste it in **Site token** and click **Find my site**. Prefera finds the site and its blog collection. If there is more than one collection, pick the one your articles go in.

Prefera creates drafts in the blog collection.

### Wix

**What you need:** an API key and your Account ID.

1. Open Wix API Keys and click **Generate API Key**. Under Sites pick **All sites** (or **Specific sites** and add this one).
2. Under **All site permissions** tick **Wix Blog**, **Manage Site Media** and **Wix Contacts & Members**. Under account permissions tick **Read Site Data**. Wix emails you a code to confirm.
3. Copy the key. Copy your **Account ID** from the same API Keys page, top right (**Copy ID**).
4. Paste both and click **Find my sites**. Pick the site, then who the posts are by (**Posts are by**).

Wix blog posts need an author who is a site member. If the list is empty, log in to your live site once (or add a blog writer), then find the site again.

Prefera creates draft posts. Covers, photos and charts go to the site's Media Manager.

### Shopify

**What you need:** your store domain (for example `yourstore.myshopify.com`) and either a Dev Dashboard app or an Admin API token. Choose with the switch at the top of the dialog.

**Dev Dashboard app:**

1. In your Shopify admin open **Settings** > **Apps** > **Develop apps**, click **Build apps in Dev Dashboard**, then **Create app**. Name it Prefera and, under **API access**, type `read_content,write_content` in **Scopes**.
2. Click **Create app**, then **Release**. On the app's overview click **Test app** next to Installs, choose this store and click **Install**.
3. Under **Credentials** copy the **Client ID** and **Client secret**. Paste them with your store domain.

**Admin API token** (for a custom app made in your Shopify admin before 1 January 2026):

1. Open **Settings** > **Apps** > **Develop apps** and click your app.
2. Under **API credentials** check the `read_content` and `write_content` scopes, then reveal the **Admin API access token** (it starts with `shpat_`).
3. Paste it with your store domain.

Connecting a client's store? Shopify only lets the app work on stores in the same Shopify organization. Someone on the store's team with the App developer role needs to create the app there.

Prefera creates unpublished blog articles.

### Framer

**What you need:** a Framer API key and your project link.

1. In Framer, open your project, then **Site Settings** > **General** > **API Keys** and create a key. Copy it.
2. Copy the project link from the browser's address bar. It looks like `https://framer.com/projects/Site--abc123`.
3. Paste both, click **Load collections** and pick the one for your blog.
4. Check the field choices: **Title field**, **Body field**, and optionally **Cover image** and **Date**.

Prefera adds draft items to the collection. **Publish live** publishes your Framer site only when this page is the only unpublished change. Otherwise the item is made ready and you publish from Framer, so nothing unfinished goes out with it.

### HubSpot

**What you need:** a HubSpot key with the content scope.

If you see a **Connect HubSpot** button, click it, sign in at HubSpot and choose what Prefera may use. Nothing to copy or paste. Otherwise, or via **Or paste a key instead**:

1. In HubSpot, open **Development** > **Keys** > **Service keys** and create a key. A private app token from an older account works too.
2. Tick the **content** scope, and **files.read** and **files.write** so covers and photos upload. Copy the key.
3. Paste it and click **Load blogs**. Pick the **Blog** and the **Author**.

If no author is picked, posts go out without a byline. To show one, add an author in HubSpot (**Blog** > **Authors**) and load the blogs again.

Prefera creates draft blog posts.

### Notion

**What you need:** an integration secret and a database you share with it.

If you see a **Connect Notion** button, use it. Otherwise, or via **Or paste a key instead**:

1. Open notion.so/profile/integrations, click **New integration**, name it Prefera and under **Capabilities** tick **Read content**, **Update content** and **Insert content**. Copy the **Internal Integration Secret**.
2. Open your blog database in Notion, click **•••** (top right), then **Connections**, and add **Prefera**.
3. Paste the secret and click **Find my databases**. Pick yours. You can also paste the database link.

Fixes go in as pages of the database. If the database has a Status property with Draft and Published, Prefera sets it.

### GitHub / MDX

**What you need:** a GitHub repository for your site, and permission to read and write **Contents** and **Pull requests** on it.

If you see a **Connect GitHub** button:

1. Click **Connect GitHub**.
2. Choose the account and the repository your site lives in, and click **Install**. Prefera asks only for **Contents** and **Pull requests** on that repository.
3. You come back to Prefera. Pick the repository. Prefera finds the branch and the posts folder.

Or click **Or paste a token instead**:

1. Open GitHub's new fine-grained token page. Under **Repository access** choose **Only select repositories** and pick your site's repository.
2. Under **Permissions** > **Repository permissions** set **Contents** and **Pull requests** to **Read and write**, then click **Generate token** and copy it.
3. Paste it as **Fine-grained token** with the **Repository** as `owner/name`.

Check **Base branch** (default `main`) and **Content directory** (default `content`).

A fix opens a pull request that adds an MDX file. The file is committed on a new branch, never on the branch you name. A draft is a draft pull request. Publish live marks it ready, and you merge it to deploy. Unpublish closes it.

### Next.js

For a custom Next.js site, Prefera uses the GitHub connection. In **Publish to your site**, the **Next.js / custom site** tile has a **Set up** button (**View setup** once connected). It takes about 10 minutes.

1. **Add the blog starter.** Run `npm install marked` and copy the four starter files shown in the dialog into your app (under `src/` if your app uses it). Add an empty `content/blog/.gitkeep` and deploy. `/blog` shows an empty list.
2. **Make a GitHub token.** In GitHub: **Settings** > **Developer settings** > **Fine-grained tokens**. Only this repo; **Contents** and **Pull requests** read and write.
3. **Connect the repo** in the dialog, with `content/blog` as the content directory. Prefera never commits to your base branch.
4. **Publish.** A draft is a draft pull request. Publish live marks it ready. Merge it to deploy. Unpublish closes it.

Each page is `content/blog/<slug>.mdx` with front matter `title`, `description`, `date` and, with a cover, `image` and `imageAlt`. Its images sit next to it. Links to competitors get `rel="nofollow"`.

### Webhook

Use **Your own site (webhook)** for any stack: Next.js, a custom CMS, Zapier or Make. Prefera sends each page as signed JSON, first as a draft, then live when you approve.

1. Copy the signing secret and the example receiver from the dialog into your site. Set the secret as `PREFERA_SIGNING_SECRET`.
2. Publish the receiver at an https address, for example your site's `/api/prefera`.
3. Paste that address as the **Endpoint (https)**, click **Send test**, then **Save**.

Put the secret on your endpoint before you save. It is stored encrypted and not shown again.

Each request carries `Prefera-Signature: t=…,v1=…` (an HMAC-SHA256 of `t.body`), `Prefera-Event` and `Idempotency-Key`. **Send test** posts a `publish.verify` event, and your endpoint must echo its challenge. The example receiver also handles `publish.draft`, `publish.live` and `publish.unpublish`. The page arrives with `ref`, `title`, `slug`, `html` and `coverUrl`. Your endpoint replies with an `id` and a `url`.

This webhook publishes pages to your site. It is different from the notification webhooks on [Slack, email and webhooks](/docs/integrations/notifications). For signing details see [Webhooks](/docs/api/webhooks).