Iframe Integration

Playground

Configure the embed on the left, see a live preview on the right, and copy the generated <iframe> snippet when you're happy with it.

How to use it

Demo data is on by default — the preview loads immediately with a sample course, no credentials needed. The Buy button is disabled in demo.
Turn Demo data off to preview your live integration: enter your Client ID and a Product ID from your catalog (the preview loads once both are set).
Generate user ID creates a random partnerUserId for you (in production this is the stable id of the customer on your platform — see Embedding).
Switch theme, currency, and variant (card / button) to explore the available options.

Demo mode. Fields are prefilled with a sample course and the Buy button is disabled (no checkout). Turn off Demo data and enter your real Client ID and Product ID to preview your live integration.

Demo dataNo credentials? Keep this on to preview a sample course.

Client ID *Product ID *

Partner user ID

Theme

Currency

Variant

Label

Live preview

Embed snippet

<iframe
  src="https://test.osteocom.me/en/embed/content-licensing/YOUR_PRODUCT_ID?clientId=YOUR_CLIENT_ID&partnerUserId=&curr=EUR"
  width="100%"
  height="370.4"
  style="border: 0"
  loading="lazy"
  title="Osteocom course"
></iframe>

Test environment

The preview points to the test environment (https://test.osteocom.me). With Demo data off, you need a valid clientId and a productId that exists in your test catalog. The live preview only renders from domains that Osteocom has whitelisted (CSP frame-ancestors) — this docs site is already allowed; to embed from your own domain, see Setup and Reference.

Playground ​

Playground