Canvas LMS

Log into your Canvas LMS account at your institution's Canvas URL (e.g., yourschool.instructure.com). In the top-right corner, click your profile avatar or name → **Account** → **Settings**. Scroll down to the **Approved Integrations** section (you may need to scroll past notification settings). Click **New Access Token**. In the dialog: - **Purpose**: Enter a descriptive name like 'Bubble Integration' — this helps you identify the token in the future - **Expires**: Leave blank for a non-expiring token, OR set an expiry date if your institution's policy requires it. For development purposes, no expiry date is convenient; for production, consider a 1-year expiry and build a token rotation reminder into your Bubble app Click **Generate Token**. Canvas displays the token string once — copy it immediately and store it somewhere safe (a password manager or secure notes app). Canvas will not show this token again after you close the dialog. The token looks like a long alphanumeric string (approximately 64 characters). This is your complete authentication credential — you do not need any additional client ID, secret, or OAuth flow. **Verify the token works:** In a new browser tab, visit this URL (replace values with your actual subdomain and token): `https://yourschool.instructure.com/api/v1/courses?access_token=YOUR_TOKEN_HERE&per_page=3` You should see a JSON array of your Canvas courses. If you see a 401 error, the token was copied incorrectly. If you see an empty array [], you have no active course enrollments with this account.

In your Bubble app, go to **Plugins tab → Add plugins**, search for 'API Connector' (by Bubble), and install it. Open the API Connector plugin settings. Click **Add another API** and name it **Canvas LMS**. Set the **Base URL** to: `https://yourschool.instructure.com/api/v1` — replace 'yourschool' with your actual Canvas subdomain. For multi-school apps where different users connect different Canvas instances, use a Bubble App Setting instead: create an App Setting named `canvas_base_url` and set the Base URL to a dynamic value populated from that setting per user session. **Shared Headers (API Group level):** Add one shared header: - **Key:** `Authorization` - **Value:** `Bearer YOUR_TOKEN_HERE` — paste your actual token - **Private:** YES — check this box. This marks the entire Authorization header as server-side only; it will not appear in browser network requests regardless of the calling context **Shared URL Parameters (API Group level):** Add one shared URL parameter: - **Key:** `per_page` - **Value:** `100` - **Private:** NO The per_page=100 parameter is critical — Canvas's default page size is 30 items. Without this parameter, a Repeating Group showing course enrollments will appear to show only 30 students even when a course has 200. Canvas supports a maximum of 100 items per page via per_page. The resulting API Group configuration: ```json { "base_url": "https://yourschool.instructure.com/api/v1", "headers": { "Authorization": "Bearer <private>" }, "shared_params": { "per_page": "100" } } ```

1{
2  "base_url": "https://yourschool.instructure.com/api/v1",
3  "headers": {
4    "Authorization": "Bearer <private>"
5  },
6  "shared_params": {
7    "per_page": "100"
8  }
9}

Within the Canvas LMS API Group, add individual API Calls for each Canvas endpoint you need. Each call inherits the shared Authorization header and per_page=100 parameter. **Call 1 — Get Courses:** - Name: Get Courses - Method: GET - URL append: `/courses` - Additional URL parameters: `enrollment_state` = `active` (to exclude concluded/deleted courses) - Use as: Data Click **Initialize call**. Bubble contacts Canvas and auto-detects the response fields from the courses array. You should see fields detected: `id`, `name`, `course_code`, `start_at`, `end_at`, `enrollment_count`, `workflow_state`, `time_zone`, `calendar`, and more. If Initialize fails with 'There was an issue setting up your call', check that your Authorization header value starts with 'Bearer ' (with a space), and that the token is copied correctly without any line breaks. **Call 2 — Get Course Assignments:** - Name: Get Assignments - Method: GET - URL append: `/courses/<course_id>/assignments` - Parameters: `course_id` = dynamic (will be set in workflows) - Use as: Data Initialize with a real course ID from your Canvas account (visible in the URL when you open a course in Canvas). **Call 3 — Get Course Students (roster):** - Name: Get Students - Method: GET - URL append: `/courses/<course_id>/students` - Parameters: `course_id` = dynamic - Use as: Data **Call 4 — Get Student Submissions:** - Name: Get Submissions - Method: GET - URL append: `/courses/<course_id>/students/submissions` - Parameters: `course_id` = dynamic, `student_ids` = `all`, `workflow_state` = `submitted` - Use as: Data Initialize each call with real IDs from your Canvas test account.

1{
2  "method": "GET",
3  "url": "https://yourschool.instructure.com/api/v1/courses/active",
4  "headers": {
5    "Authorization": "Bearer <private>"
6  },
7  "params": {
8    "per_page": "100",
9    "enrollment_state": "active"
10  }
11}

Canvas returns dates as ISO 8601 strings with timezone offsets — for example: `2026-09-01T23:59:00-07:00`. Bubble handles these natively with the `:formatted as date` dynamic operator, but there's a subtle display gotcha: timezone offsets can cause off-by-one-day display bugs for users in different time zones. **Safe date handling in Bubble:** When displaying Canvas dates: - Use `:formatted as date` with a fixed UTC reference or specify the timezone explicitly if your Bubble app's user base is in a known region - For due dates, always display time alongside date (e.g., 'Sep 1, 2026 at 11:59 PM') to avoid ambiguity when the due time is close to midnight **Build the course dashboard page:** Create a page `canvas-dashboard` in Bubble. Add a **Repeating Group** with: - Type: Canvas LMS - Get Courses (auto-detected Data Type) - Data Source: Get data from external API → Canvas LMS - Get Courses - If multiple Canvas users: add the Authorization header as a dynamic value from `Current User's canvas_token` In each cell, display: - `Current cell's name` — course full name - `Current cell's course_code` — the short code (e.g., BIO-101-S26) - `Current cell's start_at formatted as date` — course start date - `Current cell's enrollment_count` — number of enrolled students - A 'View Course' button that navigates to a course detail page with `Current cell's id` as a URL parameter **Course detail page:** Create a page `canvas-course` with URL parameter `course_id` (number). Add a Repeating Group for Students: Data Source = Get Students with course_id = URL parameter. Add a Repeating Group for Assignments: Data Source = Get Assignments with course_id = URL parameter. For each student row, show name, email (if returned by your Canvas instance's privacy settings), and a count of submitted assignments (filtered from the Submissions call where student_id = current student's id).

For Bubble apps where each user provides their own Canvas personal token (such as a platform serving multiple teachers or students from the same school), you need to store tokens per-user and pass them dynamically to API calls. **User Data Type configuration:** Go to Data tab → User. Add two text fields: - `canvas_token` — the user's personal Canvas access token - `canvas_subdomain` — the user's institution subdomain (if your app supports multiple institutions) **Privacy rules on User fields:** Go to Data tab → User → Privacy. Add a rule: - 'This User is visible when' → Current User is the User (or: Current User = [User record]) - Under field-level visibility: ensure `canvas_token` and `canvas_subdomain` are only visible when 'Current User is the User' This prevents any user from seeing another user's Canvas token — critical since the token grants the same permissions as the Canvas account holder. **Canvas token onboarding flow:** Create an onboarding page for new users that walks them through: 1. Finding their Canvas URL (yourschool.instructure.com) 2. Generating a token in Canvas Account → Settings → New Access Token 3. A text input field in your Bubble app where they paste the token 4. A 'Connect Canvas' button that saves the token to `Current User's canvas_token` via a workflow 5. After saving, immediately validate the token by running the Get Courses API call — if it succeeds (returns at least one course or an empty array), show 'Connected ✓'. If it returns 401, show 'Invalid token — please try again'. **Dynamic Authorization in API calls:** For all Canvas API calls in a multi-user app, do NOT use a hardcoded token in the shared header. Instead, set the Authorization header value dynamically in each workflow or Repeating Group data source binding: `Bearer [Current User's canvas_token]`.

For most Canvas deployments (courses with fewer than 100 students, schools with fewer than 100 active courses), the per_page=100 shared parameter handles the complete dataset in a single API call. For large institutions where a single call returns fewer than the actual total, you need explicit pagination. **Understanding Canvas pagination:** Canvas signals 'there are more pages' via an HTTP Link response header that looks like: `<https://yourschool.instructure.com/api/v1/courses?page=2&per_page=100>; rel="next"` Bubble's API Connector cannot read HTTP response headers — only the JSON body. This means you cannot auto-detect when more pages exist. **Workaround for large datasets:** Option 1 (recommended for most cases): Use per_page=100 and build a note in your admin UI: 'Showing up to 100 records. Contact your Canvas administrator if your institution has more.' Most school and corporate Canvas deployments have fewer than 100 active courses. Option 2 (for institutions with 100+ records): Build a Backend Workflow that fetches pages explicitly: - Page 1: call `/courses?per_page=100&page=1`, store results in a Bubble Data Type (CanvasCourse) - If the result count = 100 (suggesting more may exist), run the same call with `&page=2`, merge results - Continue until a page returns fewer than 100 results (indicating the final page) This approach requires Bubble Starter plan for Backend Workflows and is only necessary for large institutional deployments. **Canvas token expiry:** Canvas tokens do not expire by default (unless an expiry date was set at creation). However, tokens can be invalidated by: - The user manually deleting the token in Canvas Settings - The institution's Canvas admin revoking all tokens (after a security incident) - Canvas policy changes at the institution level Build a 'token status' indicator in your Bubble app: run a lightweight Canvas API call (e.g., Get Courses with per_page=1) on login. If it returns 401, clear the stored token and redirect to the onboarding flow to reconnect. Before launch, test the full flow in the published app version, confirm per_page=100 parameter is visible in Bubble's Network tab as a URL parameter (not in the Authorization header — the header should not appear in network requests), and verify privacy rules prevent cross-user token access.

1{
2  "method": "GET",
3  "url": "https://yourschool.instructure.com/api/v1/courses",
4  "headers": {
5    "Authorization": "Bearer <private>"
6  },
7  "params": {
8    "per_page": "100",
9    "page": "2",
10    "enrollment_state": "active"
11  }
12}