Skip to main content

Embedding Classwise in your application

You can integrate Classwise into your platform in two main ways: using an <iframe> or opening it in a new browser tab. Both methods support communication via the window.postMessage API, allowing you to send and receive messages between your application and Classwise.

1. Embedding via <iframe>​

To embed Classwise inside an iframe, you can use the following structure:

<iframe
  id="classwise-app-iframe"
  src="https://app.classwise.com/[lang]/player"
  allow="fullscreen; serial"
></iframe>

Important notes:

  • To use Classpads and Control Hub, the allow="serial" attribute is required. Without this, the browser will block access to the Control Hub.
  • It's recommended to also include fullscreen permission for an optimal user experience.
  • Ensure your application allows cross-origin iframe embedding and that the parent domain is allowed by Classwise (if any origin restrictions are in place).
  • The lang parameter in the iframe URL allows you to specify the language version of the Classwise interface. This parameter is optional — if not provided, automatic fallback to the browser language will happen. If the browser language is not supported, the interface will default to English (en).

Supported language codes:

  • en – English
  • ar – Arabic
  • cs – Czech
  • de – German
  • es – Spanish
  • fr – French
  • he – Hebrew
  • hu – Hungarian
  • it – Italian
  • lt – Lithuanian
  • lv – Latvian
  • nl – Dutch
  • pl – Polish
  • pt – Portuguese
  • sk – Slovak

Example usage:​

<iframe
  id="classwise-app-iframe"
  src="https://app.classwise.com/en/player"
  allow="fullscreen; serial"
/>
info

In this example, the interface will be loaded in Polish (pl). If the lang parameter is omitted, the app will try to use the browser’s language if it’s supported, or fall back to English (en) otherwise.

2. Opening Classwise in a new tab​

If you prefer not to embed via iframe, you can launch Classwise in a new tab or window:

const classwiseWindow = window.open("https://app.classwise.com/[lang]/player", "_blank");

Example usage:​

const classwiseWindow = window.open("https://app.classwise.com/en/player", "_blank");