Ghost

Log into your Ghost Admin panel at `https://yourblog.ghost.io/ghost` (replace with your actual Ghost URL). In the left sidebar, click **Settings** → scroll down to the **Integrations** section and click it. At the bottom of the Integrations page, click **Add custom integration**. Give it a descriptive name — for example, 'Bubble Integration' — and click **Create**. Ghost creates the integration and displays two keys: - **Content API Key**: a long alphanumeric string. This is intentionally public — Ghost allows it in browser requests. Copy and save it. - **Admin API Key**: displayed in the format `ID:SECRET` (for example, `64a5b3c9e2f1a72a91b4c8d5:3f7a9e1b2c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f`). Copy the entire string including the colon. This key is sensitive and must stay server-side. Also note your Ghost base URL. For Ghost Pro it is `https://yourblog.ghost.io`. For self-hosted Ghost, it is your custom domain. Finally, confirm your Ghost version: Ghost Admin → Settings → scroll to the bottom → click **About**. Ghost 5.x (current) uses Admin API path `/ghost/api/admin/`. Ghost 4.x uses `/ghost/api/v3/admin/`. Using the wrong path results in 404 errors during the Initialize step.

In your Bubble editor, go to the **Plugins tab** (the puzzle piece icon in the left sidebar). Click **Add plugins**, search for **API Connector**, and install the plugin made by Bubble — it is the first result and is free. Once installed, click **API Connector** in your Plugins list to open its configuration panel. Click **Add another API** and name it `Ghost Content API`. Set the **Authentication** dropdown to **No authentication** (the Content API uses URL parameters, not headers). Under **Shared parameters**, click **Add a shared parameter**: - Parameter name: `key` - Value: paste your Content API Key - Leave the **Private** checkbox unchecked — the Content API key is intentionally public and Ghost's documentation states it is safe to embed Now click **Add a call** to create your first API call: - **Name**: `Get Posts` - **Use as**: **Data** (this call returns a list of items to display in a Repeating Group) - **Method**: GET - **URL**: `https://yourblog.ghost.io/ghost/api/content/posts/` (replace with your actual Ghost URL) - Under **URL parameters**, add: - `include` = `tags,authors` (Ghost does not include related data by default) - `limit` = `10` (or `all` for small blogs) - `filter` = leave blank for now (you will make this dynamic in Step 6) Your API Connector configuration for this call looks like: ```json { "method": "GET", "url": "https://yourblog.ghost.io/ghost/api/content/posts/", "shared_params": { "key": "<your_content_api_key>" }, "call_params": { "include": "tags,authors", "limit": "10" } } ``` Click **Initialize call**. Ghost returns a JSON object with a `posts` array. Bubble detects all fields: `id`, `title`, `slug`, `html`, `feature_image`, `excerpt`, `published_at`, `tags`, `authors`, and more. Set the **Data path** field to `posts` so that the call returns a list of post objects directly (not the wrapper object with the `posts` key). Click **Save** on the call, then **Save** on the API group.

1{
2  "method": "GET",
3  "url": "https://yourblog.ghost.io/ghost/api/content/posts/",
4  "shared_params": {
5    "key": "YOUR_CONTENT_API_KEY"
6  },
7  "call_params": {
8    "include": "tags,authors",
9    "limit": "10",
10    "page": "<dynamic:page_number>",
11    "filter": "<dynamic:filter_string>"
12  }
13}

The Admin API uses a different authentication mechanism: a short-lived JWT token that you generate from the Admin API key and inject as an `Authorization: Ghost [JWT]` header. In the API Connector panel, click **Add another API** to create a second group named `Ghost Admin API`. Set **Authentication** to **No authentication** (you will handle auth via a custom header). Under **Shared headers**, click **Add a shared header**: - Name: `Authorization` - Value: `Ghost ` followed by the JWT token value — but since the token is dynamic (stored in your database), you will bind it dynamically. For now, enter a placeholder like `Ghost placeholder_jwt_here` - **Tick the Private checkbox** — this marks the header as server-side only, ensuring the JWT never appears in the browser's network tab Also add: `Content-Type` = `application/json` (needed for POST/PATCH calls). Now add your first Admin API call: - **Name**: `Get Members` - **Use as**: **Data** - **Method**: GET - **URL**: `https://yourblog.ghost.io/ghost/api/admin/members/` - **URL parameters**: `limit=20`, `page=<dynamic>`, `filter=<dynamic>` (for subscription tier filtering) ```json { "method": "GET", "url": "https://yourblog.ghost.io/ghost/api/admin/members/", "shared_headers": { "Authorization": "Ghost <private: jwt_token>", "Content-Type": "application/json" }, "call_params": { "limit": "20", "page": "<dynamic:page>" } } ``` Do NOT try to Initialize this call yet — you need a real JWT first, which you generate in the next step. Initialize calls with a placeholder JWT will return 401 Unauthorized from Ghost. **Ghost 4.x vs 5.x reminder**: if you are on Ghost 4.x, change the Admin API URL to `https://yourblog.ghost.io/ghost/api/v3/admin/members/`. Confirm in Ghost Admin → Settings → About.

1{
2  "method": "GET",
3  "url": "https://yourblog.ghost.io/ghost/api/admin/members/",
4  "shared_headers": {
5    "Authorization": "Ghost <private: jwt_token_from_database>",
6    "Content-Type": "application/json"
7  },
8  "call_params": {
9    "limit": "20",
10    "page": "<dynamic:page_number>",
11    "filter": "<dynamic:filter_string>"
12  }
13}

Ghost's Admin API JWT has three parts: a Base64URL-encoded header, a Base64URL-encoded payload, and a HS256 signature computed from the hex-decoded SECRET portion of your Admin API key. Bubble cannot sign JWTs natively. The practical solution for most Bubble builders: use a lightweight external service or a pre-signed JWT for prototyping, then implement a Backend Workflow that calls a signing helper. However, the most self-contained Bubble-native approach uses the **Toolbox plugin** (a free Bubble plugin) and its **Run JavaScript** action to construct and sign the JWT entirely in a Backend Workflow. First, in your Bubble **Data tab**, create a new data type called `App Settings` with a text field called `ghost_jwt` and a date field called `ghost_jwt_expires_at`. This is where the current JWT lives. **Install the Toolbox plugin**: Plugins tab → Add plugins → search **Toolbox** → Install (free). In your Bubble editor, go to **Backend Workflows** (in the left menu, under the database icon). Click **Add new API workflow** and name it `Refresh Ghost JWT`. In this Backend Workflow, add a **Run JavaScript** action (from Toolbox plugin). The JavaScript uses the CryptoJS library pattern to construct the JWT: ```javascript // Ghost Admin API JWT generation // Admin API key format: ID:SECRET var adminKey = "YOUR_ADMIN_API_KEY_ID:SECRET_HERE"; var parts = adminKey.split(":"); var id = parts[0]; var secret = parts[1]; // Convert hex secret to byte array function hexToBytes(hex) { var bytes = []; for (var i = 0; i < hex.length; i += 2) { bytes.push(parseInt(hex.substr(i, 2), 16)); } return bytes; } var now = Math.floor(Date.now() / 1000); var header = btoa(JSON.stringify({"alg": "HS256", "kid": id, "typ": "JWT"})).replace(/=/g, "").replace(/\+/g, "-").replace(/\//g, "_"); var payload = btoa(JSON.stringify({"iat": now, "exp": now + 300, "aud": "/admin/"})).replace(/=/g, "").replace(/\+/g, "-").replace(/\//g, "_"); // Note: btoa only Base64-encodes; HS256 signing requires CryptoJS or SubtleCrypto // This example shows the structure — use SubtleCrypto for production signing: async function signJWT() { var encoder = new TextEncoder(); var secretBytes = new Uint8Array(hexToBytes(secret)); var cryptoKey = await crypto.subtle.importKey("raw", secretBytes, {name: "HMAC", hash: "SHA-256"}, false, ["sign"]); var data = encoder.encode(header + "." + payload); var sig = await crypto.subtle.sign("HMAC", cryptoKey, data); var sigB64 = btoa(String.fromCharCode(...new Uint8Array(sig))).replace(/=/g, "").replace(/\+/g, "-").replace(/\//g, "_"); bubble_fn_result(header + "." + payload + "." + sigB64); } signJWT(); ``` After the Run JavaScript action, add a **Create a new Thing** or **Make changes to a Thing** action to save the returned JWT string to your `App Settings` record's `ghost_jwt` field, and set `ghost_jwt_expires_at` to `Current date/time + 4.5 minutes`. Schedule this Backend Workflow to run every 4 minutes using Bubble's **Schedule API Workflow** recursive pattern (a paid plan feature — the Backend Workflow calls itself with a delay of 4 minutes at the end). For builds on a paid plan, RapidDev's team has wired this exact JWT refresh loop in dozens of Ghost-connected Bubble apps — if you want this production-tested, book a free scoping call at rapidevelopers.com/contact.

1// Ghost Admin JWT — SubtleCrypto signing (runs inside Bubble Toolbox 'Run JavaScript' action)
2var adminKeyId = "YOUR_KEY_ID"; // the part before the colon in your Admin API key
3var adminKeySecret = "YOUR_KEY_SECRET"; // the part after the colon (hex string)
4
5function hexToUint8Array(hex) {
6  var arr = new Uint8Array(hex.length / 2);
7  for (var i = 0; i < hex.length; i += 2) {
8    arr[i / 2] = parseInt(hex.substr(i, 2), 16);
9  }
10  return arr;
11}
12
13function b64url(str) {
14  return btoa(str).replace(/=/g, "").replace(/\+/g, "-").replace(/\//g, "_");
15}
16
17async function makeGhostJWT() {
18  var now = Math.floor(Date.now() / 1000);
19  var header = b64url(JSON.stringify({ alg: "HS256", kid: adminKeyId, typ: "JWT" }));
20  var payload = b64url(JSON.stringify({ iat: now, exp: now + 300, aud: "/admin/" }));
21  var signingInput = header + "." + payload;
22  var keyBytes = hexToUint8Array(adminKeySecret);
23  var cryptoKey = await crypto.subtle.importKey(
24    "raw", keyBytes, { name: "HMAC", hash: "SHA-256" }, false, ["sign"]
25  );
26  var sig = await crypto.subtle.sign("HMAC", cryptoKey, new TextEncoder().encode(signingInput));
27  var sigB64 = b64url(String.fromCharCode(...new Uint8Array(sig)));
28  bubble_fn_result(signingInput + "." + sigB64);
29}
30makeGhostJWT();

Now that you have a valid JWT stored in your database, return to the API Connector to complete the Admin API group setup. In the **Ghost Admin API** group, find the `Get Members` call you created in Step 3. Click **Edit** on the Authorization shared header. Change the value from the placeholder to a dynamic expression: click the value field, delete the placeholder text, then use Bubble's **Insert dynamic data** to bind the value to `App Settings' ghost_jwt` (the App Settings record's ghost_jwt field). The header value should read: `Ghost [App Settings ghost_jwt]` — where the second part is the dynamic Bubble expression pulling the live JWT from your database. Now click **Initialize call** on the Get Members call. Bubble sends the request to Ghost with the current JWT. Ghost returns a response with a `members` array. Set the **Data path** to `members`. Bubble auto-detects member fields: `id`, `uuid`, `email`, `name`, `status`, `subscribed`, `created_at`, `updated_at`, and the nested `tiers` array. Repeat for any additional Admin API calls you need — for example, `GET /admin/posts/?status=draft` for draft post access, or `GET /admin/newsletters/` for newsletter stats. **Ghost filter syntax note**: Ghost's filter parameter uses `+` for AND and `,` for OR — for example `filter=status:published+tag:newsletter`. If you add these as Bubble URL parameters, Bubble may URL-encode the `+` as `%2B`. Test with a literal filter string first to confirm Ghost interprets it correctly. If `%2B` causes zero results, use `%2B` explicitly in a fixed value, or pass the filter through a dynamic URL parameter with the value pre-encoded.

1{
2  "method": "GET",
3  "url": "https://yourblog.ghost.io/ghost/api/admin/members/",
4  "shared_headers": {
5    "Authorization": "Ghost <dynamic:App Settings ghost_jwt>",
6    "Content-Type": "application/json"
7  },
8  "call_params": {
9    "limit": "20",
10    "page": "<dynamic:current_page>",
11    "filter": "status:paid"
12  }
13}

With both API groups configured and initialized, you can now bind Ghost data to Bubble UI elements. **Posts page (Content API):** Create a new Bubble page called `blog`. Add a **Repeating Group** element. Set its **Data source** to the `Ghost Content API - Get Posts` call (this is a live API call, not a Bubble database query). Set **Type of content** to `Ghost Content API - Get Posts` (the API response type Bubble auto-creates during Initialize). Inside the Repeating Group's first cell, add: - An **Image** element → Source: `Current cell's Ghost Content API - Get Posts's feature_image` - A **Text** element → `Current cell's feature_image's title` (or `title` directly) - A **Text** element → `excerpt` - A **Text** element → `published_at` formatted as date - A **Button** → "Read more" → on click, open a popup or navigate to a separate page passing `current_cell's slug` as a URL parameter For post filtering by tag, add a **Dropdown** element above the Repeating Group. Set its choices to a static list of your Ghost tag names (or query `GET /content/tags/` to populate dynamically). When the dropdown value changes, use a Workflow to reset the Repeating Group with a new API call including `filter=tag:[SelectedTag]`. **Members admin page (Admin API):** Create a page called `ghost-admin` with restricted access (Bubble's page visibility conditions based on user role). Add a Repeating Group bound to `Ghost Admin API - Get Members`. Show email, name, status, and subscribed date. Add a filter dropdown for `status:free` vs `status:paid` using the filter URL parameter. **Pagination**: both APIs support `page` and `limit` parameters. Add Previous/Next buttons on each page that increment/decrement a Bubble Custom State (type Number, starting value 1) representing the current page number. Bind the `page` API parameter to this Custom State.