Khan Academy API

Before touching the API Connector, set up the data model that will power the entire integration. Go to the Data tab in your Bubble editor. Create a Data Type called **KhanContent** with these fields: - `title` (text) — the human-readable video title you write yourself - `khan_url` (text) — the full Khan Academy video URL (e.g., https://www.khanacademy.org/math/algebra/x2f8bb11595b61c86:expressions-with-exponents/x2f8bb11595b61c86:intro-to-exponents/v/introduction-to-exponents) - `embed_html` (text) — will store the iframe HTML returned by oEmbed (start empty; populated by the Backend Workflow) - `subject` (text) — e.g., Math, Science, Computing - `grade_level` (text) — e.g., Grade 6, High School - `created_date` (date) — auto-populated on creation Create a second Data Type called **Completion** with these fields: - `user_ref` (User) — the Bubble user who completed the video - `content_ref` (KhanContent) — the video that was completed - `completed_at` (date) — timestamp of completion Now set Privacy Rules. Click the Privacy tab for the **Completion** Data Type. Add a rule: **'This Completion is visible when: Current User is user_ref'**. This ensures users can only see their own completion records — never all completions in the database. Do the same for KhanContent if you want to restrict visibility to logged-in users only.

Go to **Plugins tab → Add plugins**, search for 'API Connector' (by Bubble), and install it. Then open the API Connector plugin settings. Click **Add another API** and name it **Khan Academy oEmbed**. Under this API group, click **Add another call** and configure it as follows: - **Name:** Get oEmbed - **Method:** GET - **URL:** `https://www.khanacademy.org/api/labs/shorten/oembed` - **URL Parameters:** - `url` — set value to a test Khan Academy video URL for initialization (e.g., `https://www.khanacademy.org/math/algebra/x2f8bb11595b61c86:expressions-with-exponents/x2f8bb11595b61c86:intro-to-exponents/v/introduction-to-exponents`), check **Allow blank** OFF, check **Private** OFF (this parameter will be dynamic, not secret) - `format` — set value to `json`, check **Allow blank** OFF - **Use as:** Data (not Action) — this tells Bubble the call returns structured data you can bind to elements - Do NOT add any Authorization header — the oEmbed endpoint requires no authentication Leave **Headers** empty. The call configuration looks like this: ```json { "method": "GET", "url": "https://www.khanacademy.org/api/labs/shorten/oembed", "params": { "url": "<khan_video_url>", "format": "json" } } ``` Click **Initialize call**. Bubble will run the call with your test URL and auto-detect the response fields — you should see fields like `html`, `title`, `width`, `height`, `type`, `version`. If you see an error instead, double-check that your test URL contains `/v/` in the path. Article and exercise URLs will return an error from the oEmbed endpoint.

1{
2  "method": "GET",
3  "url": "https://www.khanacademy.org/api/labs/shorten/oembed",
4  "params": {
5    "url": "<khan_video_url>",
6    "format": "json"
7  }
8}

Rather than fetching oEmbed HTML on every page load (which costs Workload Units and slows down the viewer page), you'll build a Backend Workflow that fetches the oEmbed HTML once and caches it in the KhanContent record. Navigate to **Settings → API** and enable **'This app exposes a Workflow API'** — this unlocks the Backend Workflows section. Note: this feature requires a paid Bubble plan (Starter $32/mo or higher). Go to the **Backend Workflows** tab (in the left sidebar after enabling). Click **New API Workflow** and name it `FetchOembedAndCache`. Add a parameter: `content_id` (text) — this will receive the Bubble ID of the KhanContent record to process. Inside the workflow, add these actions: **Step 1 — Look up the KhanContent record:** Add action: **Database → Make changes to a Thing** (configure a search first). Actually, use a **Custom Event** pattern: the workflow receives `content_id`, searches for the KhanContent with matching `_id`, then proceeds. **Step 2 — Call oEmbed:** Add action: **Plugins → Khan Academy oEmbed - Get oEmbed** Set the `url` parameter to: the `khan_url` field of the KhanContent record found in Step 1. **Step 3 — Save embed HTML:** Add action: **Database → Make changes to a Thing** - Thing: the KhanContent record from Step 1 - Field: `embed_html` → set to `Result of Step 2's html` - Field: `is_oembed_fetched` → set to `yes` On your admin panel page, add a button **'Fetch Embed'** that triggers a workflow: **Backend Workflows → Schedule API Workflow → FetchOembedAndCache** with `content_id` set to `Current KhanContent's _id`. Administrators can click this after adding a new video URL to populate the cached embed HTML.

Create a new page in your Bubble app called `video-viewer`. Set the page's Content Type to **KhanContent** so it receives a specific video record via URL parameter. Add these elements to the page: **Video title:** Add a Text element. Set its content to `Current Page KhanContent's title`. **Video embed:** Add an **HTML element** from the Visual Elements panel. Set its HTML content (in the property editor) to the dynamic expression: `Current Page KhanContent's embed_html` IMPORTANT: Bubble's HTML element passes through `<iframe>` tags safely — the oEmbed `html` field contains an iframe with `allowfullscreen` which renders correctly. Bubble does strip `<script>` tags, but the oEmbed response contains no scripts. **Subject and grade tags:** Add two text elements displaying `Current Page KhanContent's subject` and `Current Page KhanContent's grade_level`. **Mark Complete button:** Add a Button labeled 'Mark Complete'. Set a conditional: hide the button if a Completion record exists where `content_ref = Current Page KhanContent AND user_ref = Current User`. This prevents double-completions. Add a Workflow to the button: - Event: When button is clicked - Action 1: **Database → Create a new Completion** - `user_ref` → Current User - `content_ref` → Current Page KhanContent - `completed_at` → Current date/time - Action 2: Show an alert or change button state to 'Completed ✓' Add a Completion count text: `Search for Completions where user_ref = Current User: count` to show the user's overall progress across all videos.

Create a **course-library** page that displays the full catalog of curated KhanContent records using a Repeating Group. **Public catalog page:** Add a Repeating Group with Type 'KhanContent' and Data Source 'Search for KhanContent'. Add filter dropdowns for Subject and Grade Level using Option Sets or hardcoded values in a Dropdown element — filter the Repeating Group's data source based on the dropdown's value. Each cell should show: the video title, subject tag, a completion checkmark (conditional on searching for a Completion where content_ref = Current cell's KhanContent AND user_ref = Current User), and a 'Watch' button that navigates to the video-viewer page with the current cell's KhanContent as the page data. **Admin panel (restricted page):** Create a page `admin-content` and add a condition: if Current User's email is not in your admin list, redirect to the index page. Add a Form to create new KhanContent records: - Input fields: title, khan_url, subject, grade_level - A 'Add Video' button workflow: Create a new KhanContent with all field values, then schedule the FetchOembedAndCache Backend Workflow for the new record's `_id` Add a Repeating Group showing all KhanContent records. Include a 'Fetch Embed' button per row (for re-fetching if the oEmbed HTML is stale) and a 'Delete' button that removes the record.

Before going live, run through this checklist: **Test oEmbed fetching:** Add a KhanContent record with a valid video URL (must contain '/v/' in the path). Click 'Fetch Embed' from the admin panel. Open the record and confirm embed_html is populated. Navigate to the video-viewer page for that record and verify the video plays. **Test invalid URL handling:** Add a KhanContent record with a Khan Academy exercise URL (containing '/e/' or '/a/' instead of '/v/'). Run FetchOembedAndCache — the oEmbed call will fail. Verify that your workflow handles this gracefully (the embed_html remains empty and is_oembed_fetched remains no) rather than crashing. **Test privacy rules:** Log in as User A and complete a video. Log out. Log in as User B. Confirm User B cannot see User A's completion records — search for Completions from User B's session should return zero results for User A's videos. **Test content rendering:** Publish the app (click Publish → Update). Open the video viewer page in a fresh browser session. Confirm the iframe renders and the video plays. If the video appears as a broken frame, check the Content Security Policy and ensure khanacademy.org and youtube.com are not blocked. **Check WU usage:** After your first batch of oEmbed fetches, open Logs → WU usage in the Bubble editor. Each Backend Workflow run consumes WU — confirm the usage is within your plan's allocation before launching to many users.