AfterShip

Sign up or log in at app.aftership.com. In the left sidebar, click 'Settings', then click 'API Keys' in the settings navigation. If you have not yet created an API key, click 'Generate New API Key' (or 'Create API Key' depending on your AfterShip dashboard version). Give it a name like 'Bubble Integration'. Copy the API key string. It will look like a long alphanumeric string. Unlike some APIs, AfterShip does not separate a 'key ID' from a 'secret' — this single string is everything you need. Note your AfterShip plan. The free plan allows approximately 50 new tracking registrations per month. This refers to new POST /trackings calls — registering a tracking number for the first time. Status check calls (GET) against already-registered numbers are free and unlimited on all plans. If your Bubble app ships more than 50 orders per month, you will need the Essential plan or higher.

1# AfterShip API key location:
2# app.aftership.com → Settings → API Keys → Create API Key
3
4# API key format: a long alphanumeric string
5# Example: at_ab1cd2ef3gh4ij5kl6mn7op8qr9st
6
7# Base URL for all calls:
8https://api.aftership.com/v4
9
10# Plan limits (verify at aftership.com/pricing):
11# Free:      ~50 new trackings/month
12# Essential: ~1,000 shipments/month
13# Pro+:      higher limits

In your Bubble app, go to the Plugins tab in the left sidebar. Click the API Connector plugin (install it if needed: Plugins → Add plugins → search 'API Connector' → Install). Click 'Add another API'. Name it 'AfterShip'. Click 'Add shared headers / parameters'. Add a header with: - Key: `aftership-api-key` (lowercase, hyphenated — the exact header name AfterShip expects) - Value: your API key string - Tick the 'Private' checkbox The header name must be exactly `aftership-api-key`. Using `Authorization`, `x-api-key`, `api-key`, or any other variation returns a 401 with no indication of which header name AfterShip expects. Set the API root URL to `https://api.aftership.com/v4`. The 'Private' checkbox ensures this header value is never transmitted to or accessible from the browser. Because Bubble's API Connector runs server-side, CORS is also not a concern.

1{
2  "api_name": "AfterShip",
3  "root_url": "https://api.aftership.com/v4",
4  "shared_headers": [
5    {
6      "key": "aftership-api-key",
7      "value": "<private — your aftership api key>",
8      "private": true
9    }
10  ]
11}

Add your first call inside the AfterShip API group. Click 'Add another call'. Name it 'Get Couriers'. Set Method to GET and path to `/couriers`. Click 'Initialize call'. If your API key is correct, you will receive a list of active couriers in your AfterShip account. This confirms the auth header is working. Now add the primary read call. Click 'Add another call'. Name it 'Get Tracking'. Set Method to GET and path to `/trackings/{slug}/{tracking_number}`. In the path: - `{slug}` is AfterShip's carrier code (e.g., 'usps', 'ups', 'fedex', 'dhl') — you can get valid slugs from GET /couriers - `{tracking_number}` is the actual parcel tracking number For the 'Use as' setting, select 'Data' — this call returns a single tracking object you can bind to page elements. For initialization, provide a real tracking number you have already registered in AfterShip (or register one first using the POST /trackings call in the next step, then come back to initialize this GET call). The response includes a `data.tracking` object with key fields: - `tag` (text) — normalized status: Pending, InfoReceived, InTransit, OutForDelivery, Delivered, Exception - `status_summary` (text) — human-readable status description - `checkpoints` (array) — full location and status history - `expected_delivery` (date) - `courier_tracking_link` (URL) — the carrier's native tracking page

1// GET /trackings/{slug}/{tracking_number}
2// Example: GET /trackings/usps/9400111899223937861090
3
4// Response structure (data.tracking object)
5{
6  "data": {
7    "tracking": {
8      "id": "abcdef1234567890",
9      "tracking_number": "9400111899223937861090",
10      "slug": "usps",
11      "tag": "InTransit",
12      "status_summary": "Package in transit",
13      "expected_delivery": "2026-07-11",
14      "courier_tracking_link": "https://tools.usps.com/go/TrackConfirmAction?tLabels=9400111899223937861090",
15      "checkpoints": [
16        {
17          "created_at": "2026-07-09T18:30:00+00:00",
18          "city": "Louisville",
19          "state": "KY",
20          "country_name": "United States",
21          "message": "Arrived at Post Office",
22          "tag": "InTransit"
23        },
24        {
25          "created_at": "2026-07-09T10:00:00+00:00",
26          "city": "Austin",
27          "state": "TX",
28          "country_name": "United States",
29          "message": "Shipping Label Created",
30          "tag": "InfoReceived"
31        }
32      ]
33    }
34  }
35}

Add a new call. Name it 'Create Tracking'. Set Method to POST and path to `/trackings`. Set 'Use as' to 'Action' — this is triggered by a workflow event (an order being marked as shipped), not a data source. Add a Content-Type header at the call level: `application/json`. In the body, construct a JSON object with the required fields: - `tracking_number` (string) — the parcel tracking number (required) - `slug` (string) — AfterShip's carrier code; optional if you want AfterShip to auto-detect the carrier - `title` (string) — optional; a label for this tracking (e.g., the order number) - `customer_name` (string) — optional; shown in AfterShip's dashboard - `customer_email` (string) — optional; AfterShip can send tracking notifications to this email Click 'Initialize call'. For the test, provide a real tracking number. AfterShip will register it and return the tracking object (same structure as the GET response, but with initial status 'Pending' or 'InfoReceived' since the carrier hasn't updated yet). In Bubble's workflow editor, wire the Create Tracking action to a workflow that runs when an order's status changes to 'Shipped'. Pass the order's tracking number field as the `tracking_number` parameter. Optionally pass the order number as `title` so you can identify the shipment in AfterShip's dashboard. AfterShip returns error code 4009 ('Tracking already exists') if you register the same tracking number twice. Handle this in your Bubble workflow: treat 4009 as a non-error and fetch the existing tracking via GET instead of treating it as a failure.

1// POST /trackings — request body
2{
3  "tracking": {
4    "tracking_number": "<dynamic: tracking_number>",
5    "slug": "<dynamic: carrier_slug_optional>",
6    "title": "<dynamic: order_number>",
7    "customer_name": "<dynamic: customer_name>",
8    "customer_email": "<dynamic: customer_email>"
9  }
10}
11
12// Success response (201 Created)
13{
14  "meta": { "code": 201, "message": "Created" },
15  "data": {
16    "tracking": {
17      "id": "newtrackingid123",
18      "tracking_number": "9400111899223937861090",
19      "slug": "usps",
20      "tag": "Pending",
21      "created_at": "2026-07-09T20:00:00+00:00"
22    }
23  }
24}
25
26// Error: tracking already registered
27{
28  "meta": { "code": 4009, "message": "Tracking already exists." }
29}

The `checkpoints` array in the AfterShip tracking response contains the full shipment history — every location scan and status update from the carrier. To display this in Bubble, set up a Repeating Group that shows each checkpoint entry. In Bubble's design editor, add a Repeating Group. Set the 'Type of content' to the 'Get Tracking' API call result. Bubble will have detected the `checkpoints` array during initialization — set the data source to use the checkpoints from the current page's tracking data. Inside the Repeating Group, add elements for: - Checkpoint date and time (from `created_at` — format it using Bubble's date formatting to '10:30 AM, July 9, 2026') - Location (combine `city`, `state`, `country_name`) - Status message (from `message`) - A status indicator dot colored by the `tag` field (green for Delivered, amber for InTransit, grey for InfoReceived, red for Exception) For the main tracking status at the top of the page (outside the Repeating Group), bind text elements directly to the `tag` and `status_summary` fields of the tracking response. Use Bubble's conditional formatting to show different colors or icons based on the `tag` value. This setup gives you a branded tracking page that is functionally equivalent to what most e-commerce platforms display — without requiring any carrier-specific integration logic.

1// AfterShip status tags and their meanings:
2// Pending         → tracking registered, no carrier update yet
3// InfoReceived    → carrier received shipment info
4// InTransit       → package is moving between facilities
5// OutForDelivery  → package is on delivery vehicle today
6// Delivered       → package delivered
7// FailedAttempt   → delivery attempted, no one home
8// Exception       → delay, damage, or other issue
9// Expired         → carrier has stopped updating (90+ days)
10
11// Bubble conditional formatting example:
12// When tag = 'Delivered' → background green
13// When tag = 'Exception' → background red
14// When tag contains 'InTransit' OR 'OutForDelivery' → background amber

AfterShip can push real-time tracking updates to your Bubble app via webhooks, eliminating the need to poll GET /trackings on a schedule. When a package status changes, AfterShip sends a POST request to your Bubble Backend Workflow endpoint. In your Bubble app, go to Settings → API → enable 'This app exposes a Workflow API'. Go to Backend Workflows → New API Workflow. Name it 'AfterShip Webhook'. Under 'Detect request data', click the option to detect parameters from an incoming request. Your Backend Workflow public URL will be: `https://YOUR_APP_NAME.bubbleapps.io/api/1.1/wf/aftership-webhook`. In AfterShip's dashboard, go to Settings → Notifications → Webhooks. Click 'Add Webhook'. Enter your Bubble Backend Workflow URL. Select the event types: 'Tracking update' covers all status changes. Save and use AfterShip's 'Send test notification' button to fire a test payload. In the Backend Workflow, after detecting the request data, add an action: find the matching Bubble order record by the incoming `tracking_number` field, then update the order's status and tracking tag fields with the values from the webhook payload. RapidDev has built webhook-driven tracking systems in Bubble for e-commerce clients with hundreds of daily shipments. If you need help with the webhook data mapping or order status sync logic, book a free scoping call at rapidevelopers.com/contact. Note: Backend Workflows are unavailable on Bubble's Free plan. Without webhooks, poll GET /trackings periodically using 'Recurring events' — but stay mindful of the AfterShip rate limit of approximately 10 requests per second on the free plan.

1// AfterShip webhook payload (tracking update event)
2{
3  "event": "tracking_update",
4  "msg": {
5    "id": "abcdef1234567890",
6    "tracking_number": "9400111899223937861090",
7    "slug": "usps",
8    "tag": "Delivered",
9    "status_summary": "Delivered, Front Door/Porch",
10    "expected_delivery": null,
11    "checkpoints": [
12      {
13        "created_at": "2026-07-11T14:22:00+00:00",
14        "city": "Beverly Hills",
15        "state": "CA",
16        "country_name": "United States",
17        "message": "Delivered, Front Door/Porch",
18        "tag": "Delivered"
19      }
20    ]
21  }
22}
23
24// Bubble Backend Workflow endpoint:
25// https://YOUR_APP.bubbleapps.io/api/1.1/wf/aftership-webhook