Skip to content

Miro-Integrated Workspaces

Description / Purpose

Using a minor integration with Miro, we have enabled learners to copy a template from a company-owned Miro account and edit their version in our browser component.

  1. A static web page, such as https://static-assets.codecademy.com/Courses/design-thinking-ideation/define-and-ideate/miro-define-and-ideate-lesson-duplicate-picker.html, is stored in our Static Asset CMS. An exercise or project's browser component points to this asset URL.
  2. The web page contains instructions and a link to a read-only Miro board owned by Codecademy.
  3. Learners click the link, which opens the board in a new tab. Following the instructions in the static web page, learners sign in to Miro, duplicate the board, then close the page.
  4. Returning to the Codecademy content item, the static web page also contains a button, which triggers the Miro Board Picker. Learners click this link, which opens a pop-up to allow selection/creation of a board owned by the learner's Miro account.
  5. Selecting any board will cause the browser component to load that selected board. Now learners can edit their own version of the board using their own account.

The below image shows the static web page in the background. Clicking the "Open Boards" button triggers the Miro Board Picker pop-up, which is seen on the right side.

Miro boards picker pop-up

Configuration

The Miro Boards Picker requires a "Miro app" to be configured. Codecademy employees with the correct privileges can view the configured apps here. The Client ID listed in the app must be used in the Boards Picker component.

Additional Context

For more project-related context, see this Miro:Codecademy Partnership document.

Examples