Joomla

Before configuring anything in Bubble, verify you're running Joomla 4.0 or higher — the REST API does not exist in Joomla 3.x. Log in to your Joomla administrator backend (typically at your-site.com/administrator). In the top navigation, click System → Information → Joomla Version. Confirm the version is 4.0.0 or higher. If you're on Joomla 3.x, this tutorial does not apply until you upgrade. Joomla 4.x is the current supported major version. Next, enable the API Authentication plugin: 1. In the Joomla admin, click System in the top navigation 2. Click Plugins under the 'Manage' section 3. In the plugin search bar, type 'Authentication' 4. Find the plugin named 'Authentication - Joomla API Token' 5. Click on it to open it, then change Status from Disabled to Enabled 6. Click Save & Close This plugin allows Joomla's REST API to accept token-based authentication. Without it enabled, all API calls will return 401 Unauthorized regardless of the token you provide. Also confirm your Joomla site is accessible via HTTPS (https://your-site.com, not http://). Bubble's API Connector requires HTTPS for all external API calls.

Joomla API tokens are tied to individual user accounts. Each user account can have one API token, and the token grants the same permissions as that user's Joomla access level. In your Joomla admin (your-site.com/administrator), go to Users → Manage. Click on the username you want to generate a token for. It's a best practice to create a dedicated API user specifically for Bubble integration (e.g., username: 'bubble-api-user') rather than using an admin account's token. Assign this API user to an appropriate User Group — for a read-only Bubble front-end, the 'Registered' or 'Author' group is sufficient; for an admin dashboard that creates articles, use 'Editor' or 'Manager'. In the user edit screen, click the 'Joomla API Token' tab in the user details area. You'll see a field showing the current API token (or a button to generate one if none exists). Click 'Generate Token' or copy the existing token. Copy the full token string — it's a long alphanumeric value. You'll paste it into Bubble's API Connector in the next step. Security note: avoid using a Super Administrator account's token for your Bubble integration. If the token is ever exposed, an attacker would have full Joomla admin access. Use a lower-permission user account with only the access levels your Bubble app needs.

Open your Bubble app editor in the browser. Click the Plugins tab in the left sidebar (the puzzle piece icon). If the API Connector is not in your installed plugins, click Add plugins, search for 'API Connector' (by Bubble), and install it. Return to Plugins → API Connector. Click Add another API to create a new API group. Set the name to 'Joomla CMS'. In the Shared headers section, click Add a shared header: - Key: `X-Joomla-Token` - Value: paste your Joomla API token here - Check the 'Private' checkbox on this header — this is critical; the token must never be sent client-side You can also optionally add: - Key: `Content-Type` - Value: `application/json` - (Leave Content-Type as non-private) The base URL for all Joomla API calls follows the pattern: `https://your-site.com/api/index.php/v1` Replace `your-site.com` with your actual Joomla site domain. Note the path: it starts with `/api/index.php/v1` — not `/api/v1` or any other variation. This is Joomla's specific API path and must be exact. Because Bubble's API Connector makes calls from Bubble's servers to your Joomla site's servers, Joomla's CORS configuration (which defaults to restricting cross-origin requests) is completely irrelevant. CORS only applies when a browser makes requests directly — Bubble handles this server-side.

1{
2  "API Name": "Joomla CMS",
3  "Shared Headers": {
4    "X-Joomla-Token": "<private>",
5    "Content-Type": "application/json"
6  },
7  "Base URL": "https://your-site.com/api/index.php/v1"
8}

With the Joomla API group set up, add GET calls for the content you want to display in Bubble. Call 1 — Get Articles: - Click Add another call - Name: 'Get Articles' - Method: GET - URL: `https://your-site.com/api/index.php/v1/content/articles` - Add query parameters: - `page[limit]`: `20` (limits results to 20 articles per page, avoiding large payloads) - `filter[published]`: `1` (returns only published articles) - Set 'Use as': Data - Click Initialize call. Bubble makes a live GET request to your Joomla site. A successful response will look like a JSON object with a `data` array. Bubble auto-detects fields including `id`, `title`, `introtext` (HTML), `fulltext` (HTML), `catid`, `created`, and `state`. Call 2 — Get Categories: - Add another call - Name: 'Get Categories' - Method: GET - URL: `https://your-site.com/api/index.php/v1/categories` - Set 'Use as': Data - Initialize call Call 3 — Create Article (for admin dashboards): - Add another call - Name: 'Create Article' - Method: POST - URL: `https://your-site.com/api/index.php/v1/content/articles` - Set body type to JSON and add dynamic fields: `title`, `articletext`, `catid`, `state` - Set 'Use as': Action Critical HTML handling: Joomla article fields `introtext` and `fulltext` contain raw HTML markup (e.g., `<p>Article body with <strong>bold text</strong></p>`). Do NOT display these in a standard Bubble Text element — the HTML tags will appear literally. Use a Bubble HTML element to render HTML content, or use a workflow to strip HTML tags before storing in a Bubble data field.

1GET https://your-site.com/api/index.php/v1/content/articles
2Headers:
3  X-Joomla-Token: <private>
4  Content-Type: application/json
5Query Params:
6  page[limit]: 20
7  filter[published]: 1
8
9Example response:
10{
11  "data": [
12    {
13      "id": "42",
14      "title": "Getting Started with Joomla",
15      "alias": "getting-started-with-joomla",
16      "introtext": "<p>Welcome to <strong>Joomla</strong>...</p>",
17      "catid": "8",
18      "state": 1,
19      "created": "2026-06-01 10:00:00"
20    }
21  ],
22  "links": { "self": "...", "next": "..." },
23  "meta": { "total-pages": 5 }
24}

Connect the Joomla API calls to a visible Bubble page layout. Go to the Design tab in your Bubble editor. On your page, add a Repeating Group for the article list: - Type of content: 'Joomla CMS Get Articles' - Data source: 'Get data from an external API' → Joomla CMS - Get Articles - Inside the first cell, add: - A Text element → bind to 'Current cell's Joomla CMS Get Articles's title' - A Text element → bind to 'Current cell's → created' (formatted as a date) - An HTML element (from Bubble's Visual Elements in the Add panel) → bind its HTML attribute to 'Current cell's → introtext'. The HTML element renders HTML markup correctly. For category filtering, add a Dropdown element above the Repeating Group: - Data source: 'Get data from an external API' → Joomla CMS - Get Categories - Option display: category name field - When a category is selected, update the Repeating Group's data source to pass the selected category ID as a `filter[category_id]` parameter For creating new articles (admin dashboard flow): - Add a form area with Input elements for title and body text - Add a Submit Button with a Workflow: action 'Plugins → Joomla CMS - Create Article', fill in title, articletext, catid, and state (1 = published, 0 = draft) Privacy and database rules: if your Bubble app stores any Joomla-derived data in the database (article cache, user interaction data, approval records), go to Data tab → Privacy and set rules. Without Privacy Rules, all data types in Bubble are accessible to any user — a significant security gap. Add a rule: 'When: Current User is logged in → Allow: Find this data, View all fields.' RapidDev's team has built headless CMS dashboards on Bubble with backends including Joomla, WordPress, and custom REST APIs — if you need help architecting the data flow, book a free scoping call at rapidevelopers.com/contact.