ShipBob

Log into the ShipBob merchant portal and navigate to Settings → Developer → API Tokens (the exact path may be Settings → Integrations → API Tokens depending on your account tier — look for 'API' or 'Developer' in the left sidebar). Click 'Generate new token', give it a descriptive name like 'Bubble Dashboard', and copy the token immediately — ShipBob shows it only once. This token authenticates all API requests as your merchant account. Keep it secret: do not paste it into a Bubble text element or a public-facing page. You will mark it Private in the next step, which keeps it on Bubble's servers and out of browser network requests. If you lose the token, you can regenerate one in the same settings page, but any existing Bubble calls using the old token will start returning 401 errors immediately — plan a brief maintenance window if you need to rotate tokens in production.

In your Bubble app, click the Plugins tab in the left sidebar, then click 'Add plugins'. Search for 'API Connector' and install the plugin by Bubble (it is free and maintained by Bubble). Once installed, click 'Add another API' and name it 'ShipBob'. Set the Authentication field to 'Private key in header'. In the Header field that appears, enter `Authorization` as the key name and `Bearer YOUR_TOKEN_HERE` as the value — replace YOUR_TOKEN_HERE with your actual Personal Access Token. Make sure the 'Private' checkbox next to this header is ticked. A ticked Private checkbox means this header value is stored encrypted on Bubble's servers and is never included in client-side requests, protecting your ShipBob credentials. Set the base URL to `https://api.shipbob.com/1.0`. Leave the Content-Type field blank for now — ShipBob defaults to JSON and Bubble will set this header automatically for POST calls when you add a body.

1{
2  "api_name": "ShipBob",
3  "base_url": "https://api.shipbob.com/1.0",
4  "headers": [
5    {
6      "key": "Authorization",
7      "value": "Bearer <private>",
8      "private": true
9    }
10  ]
11}

Inside the ShipBob API group, click 'Add another call'. Name it 'Get Inventory'. Set the method to GET and the path to `/inventory`. Add two query parameters by clicking 'Add parameter': - Name: `page`, Type: number, Default: 1 - Name: `limit`, Type: number, Default: 250 Bubble needs to send a real request with a valid response to detect the field structure. Click 'Initialize call'. Bubble will make an actual GET request to `https://api.shipbob.com/1.0/inventory?page=1&limit=250` using your Private Bearer token. If the token is valid, ShipBob returns an array of inventory objects and Bubble maps the fields automatically. In the 'Use as' dropdown, select 'Data' and tick 'List' since the endpoint returns an array. Set the 'Data type' name to something like 'ShipBob Inventory Item'. If initialization fails with a 401 error, your token is invalid or formatted incorrectly. Confirm the Authorization header value starts with 'Bearer ' (with a space) followed by the token. ShipBob returns a 401 with an empty body on auth failure — there is no additional error message to look for.

1GET https://api.shipbob.com/1.0/inventory?page=1&limit=250
2Authorization: Bearer <private>

ShipBob's `fulfillment_center_quantities` field is an array of objects, one per warehouse, each containing `fulfillment_center_id`, `name`, and `fulfillable_quantity`. Bubble's API Connector cannot directly bind this nested array to a repeating group — it appears as a stringified list. To solve this, create a custom Bubble data type called 'ShipBob_Inventory' with fields: product_name (text), sku (text), warehouse_name (text), fulfillable_quantity (number), page_fetched (number). Then, in the Backend Workflows section of your Bubble app (accessible from the Workflow editor — click 'Backend workflows' at the top), create a new API workflow called 'Fetch ShipBob Inventory Page'. This workflow accepts one parameter: page_number (number). Inside this workflow, add the action 'Plugins → ShipBob - Get Inventory' with page=page_number and limit=250. Then add a 'Step 2' that uses a 'For each item in list' pattern (or use Bubble's 'Schedule API workflow on a list' action) to iterate over the returned items. For each item, extract each element of the fulfillment_center_quantities array and create a new ShipBob_Inventory record for each warehouse entry. Note: Backend Workflows are only available on Bubble's Starter plan ($32/mo) and above. Free-plan users cannot use this pattern. RapidDev's team has built hundreds of multi-warehouse inventory dashboards on Bubble — if this architecture feels complex, book a free scoping call at rapidevelopers.com/contact. Schedule this workflow from a page workflow triggered on page load, passing page numbers 1, 2, 3 until all inventory is fetched (check if the returned count equals 250 to decide if another page exists).

1// Backend Workflow: Fetch ShipBob Inventory Page
2// Parameters: page_number (number)
3// Step 1: API Call - ShipBob - Get Inventory (page=page_number, limit=250)
4// Step 2: For each item in Step 1's result list:
5//   For each entry in item's fulfillment_center_quantities:
6//     Create ShipBob_Inventory:
7//       product_name = item's name
8//       sku = item's reference_id
9//       warehouse_name = entry's name
10//       fulfillable_quantity = entry's fulfillable_quantity
11//       page_fetched = page_number

On your Bubble page, add an Input element of type 'number' and label it 'Low stock threshold'. Default the value to 50. Add a Repeating Group element. Set its data source to 'Do a search for ShipBob_Inventory' and sort by fulfillable_quantity ascending (lowest first). Add a number input filter for a minimum threshold if you want to show only low-stock items by default. Inside the repeating group, add these elements in the cell: - Text showing 'Current cell's ShipBob_Inventory's product_name' - Text showing 'Current cell's ShipBob_Inventory's warehouse_name' - Text showing 'Current cell's ShipBob_Inventory's fulfillable_quantity' - A Group container behind all text elements Select the Group container and add a conditional: 'When Current cell's ShipBob_Inventory's fulfillable_quantity < Input Low stock threshold's value' → Background color: red (or a light red like #FEE2E2). This creates a visual low-stock alert without any custom code. Add a text element with '⚠ LOW STOCK' and apply the same conditional to show/hide it. This makes the dashboard scannable at a glance.

For teams that need to cancel ShipBob orders from the Bubble dashboard, you need to add a separate API call. In your ShipBob API Connector group, add another call. Name it 'Cancel Order'. Set method to POST and path to `/orders/{order_id}/cancel`. Add a path parameter: order_id (text, dynamic). This call does not require a request body — ShipBob processes the cancel based on the order ID in the URL. Initialize the call using a real order ID from your ShipBob account (use a test or already-cancelled order to avoid accidental cancellations during setup). On your orders page, add a 'Cancel Order' button to each repeating group row. Create a workflow triggered by button click. The first action is 'Show popup' — open a confirmation popup that shows the order ID and warns the action cannot be undone. The popup has two buttons: 'Confirm cancel' and 'Go back'. The 'Confirm cancel' button triggers a second workflow: (1) Call ShipBob - Cancel Order with order_id = current cell's order ID. (2) Create a new record in a Bubble 'AuditLog' data type with fields: action (text, 'cancel_order'), order_id (text), performed_by (User, Current User), timestamp (date, Current date/time). The audit log ensures you have a traceable record of every cancellation — critical for operations accountability.

1POST https://api.shipbob.com/1.0/orders/{order_id}/cancel
2Authorization: Bearer <private>
3Content-Type: application/json