StackBlitz Activity | Eduflow Help Center

The StackBlitz activity allows you to embed the StackBlitz editor or content area as an activity.

How to add a StackBlitz activity to your course

Select +Add new, go to Embeds & integrations, and choose StackBlitz
Get the StackBlitz embed code (learn more about this below)
Paste the StackBlitz embed code into your StackBlitz activity in Eduflow
Adjust the width and aspect ratio in Settings

How to get the embed code from StackBlitz

From your StackBlitz project, click the Share button in the editor page.
Once the popup is open, click the Embed tab.

Depending on the method of integration (see below), you can choose to copy the Embed URL or Embed code:

Option 1: Embed URL (easiest)

From Eduflow, go to the course you'd like to add the activity to, add a new StackBlitz Activity from the Create activity page
From the StackBlitz project, copy the Embed URL:

e.g. https://stackblitz.com/edit/js-tpd4vw?embed=1&file=index.js:
Read this step carefully, you will need adjust the code slightly!

From Eduflow, open the Embed activity's settings. Copy the "Embed URL" from StackBlitz to the Embed activity's "Embed code" text area.

One special change. Wrap the URL into an iframe:

<iframe src="[Embed URL]"></iframe>

Example:

<iframe src="https://stackblitz.com/edit/js-tpd4vw?embed=1&file=index.js"></iframe>

Save

Option 2: Embed code using StackBlitz SDK (more difficult, better result)

In Eduflow, add a new Embed activity in Activities
Read these next 2 steps carefully, you will need adjust the code slightly!

From Eduflow, open the Embed activity's settings. Copy the Embed using StackBlitz SDK HTML from StackBlitz to the "Embed code" text area:
```
import sdk from '@stackblitz/sdk'

sdk.embedProjectId(
  'elementOrId',
  'js-tpd4vw',
  {
    forceEmbedLayout: true,
    openFile: 'index.js',
  }
);
```
Adjust the HTML

From Eduflow, within the Embed activity setting's Embed Code text area, modify the HTML to work in the browser as such:

1. Replace import sdk from '@stackblitz/sdk' with <script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>

2. Change sdk.embedProjectId to StackBlitzSDK.embedProjectId

3. Wrap the StackBlitzSDK.embedProjectId(...) block in <script type="text/javascript">StackBlitzSDK.EmbedProject(...)</script>
```
<script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>

<div id="elementOrId"></div>

<script type="text/javascript">
StackBlitzSDK.embedProjectId(
  'elementOrId',
  'js-tpd4vw',
  {
    forceEmbedLayout: true,
    openFile: 'index.js',
  }
);
</script>
```
Save

Example of a proper integration

Completion & Visibility settings

You can use completion and visibility settings to add specific rules for who can view and access this activity, including setting deadlines and prerequisites. You can see details about these rules here.