Embed a playground on your site
Every SkillCertify playground can be added to a blog post, a course page or your documentation with one <iframe>. It is free, needs no account, and runs entirely in your visitor's browser: nothing they type is sent to a server.
1. Copy the snippet
<iframe src="https://skillcertify.io/embed/python"
title="Python Playground by SkillCertify"
width="100%" height="560" style="border:0;border-radius:8px"
allow="clipboard-read; clipboard-write; cross-origin-isolated"
loading="lazy"></iframe>Paste it into any HTML page, or into the "custom HTML" block of WordPress, Ghost, Notion-style site builders or your LMS.
2. Embeddable playgrounds
| Playground | URL | Notes |
|---|---|---|
| Linux Terminal | /embed/linux | larger first download; give it 640 px or more |
| Git Playground | /embed/git | larger first download; give it 640 px or more |
| Python Playground | /embed/python | fastest with cross-origin isolation (section 4) |
| SQL Playground | /embed/sql | — |
| Web Development Playground | /embed/webdev | — |
| TypeScript Playground | /embed/typescript | — |
| PHP Playground | /embed/php | — |
| Data Science Playground | /embed/data | larger first download; give it 640 px or more |
| Spreadsheet Playground | /embed/spreadsheet | — |
| Kubernetes Playground | /embed/kubernetes | larger first download; give it 640 px or more |
| Docker Playground | /embed/docker | larger first download; give it 640 px or more |
| LLM Lab | /embed/llm | fastest with cross-origin isolation (section 4) |
| NoSQL Playground | /embed/nosql | — |
| API Lab | /embed/api | — |
| React & Frontend Playground | /embed/react | — |
3. Size and layout
- The playground fills the iframe: set the size with
widthandheight. 560 px high works for editors; terminals and the Kubernetes and Docker playgrounds are more comfortable at 640 px or more. - On phones, prefer a link to the full playground (
https://skillcertify.io/playground/<name>): the editors and terminals need a keyboard. - Use
loading="lazy"(in the snippet) so the playground only downloads when the reader scrolls to it.
4. Optional: cross-origin isolation
The Python and LLM playgrounds run fastest when the page that embeds them is cross-origin isolated (Python's Stop button then interrupts code instantly instead of restarting). They work without it. To enable it, serve your page with these headers and keep cross-origin-isolated in the iframe's allow attribute:
Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: credentialless
Only do this if the rest of your page still works with these headers: they change how your page loads content from other sites.
5. What your visitors get
- The real environment: a Linux VM, Python, databases, Docker or Kubernetes, compiled to WebAssembly and running in their browser.
- No sign-up, no cookies from the embed, no tracking of what they type. We count embed page views without cookies to know which playgrounds are used.
- Work is not saved: reloading the page starts the playground fresh.
- A "Powered by SkillCertify.io" link at the bottom opens the full playground in a new tab.
6. Fair use
- Embedding is free, for any site. Keep the "Powered by SkillCertify.io" line visible and do not cover or restyle the playground.
- Do not present the playground as an assessment or certification of your own: SkillCertify certificates come only from skillcertify.io.
- Playgrounds can change or be retired; we may limit embeds that cause excessive load. Questions: support@skillcertify.io.