Iframe Integration

Embedding

Resell Osteocom courses with one iframe tag. Osteocom hosts the storefront card and runs the checkout — no backend, SDK or payment work on your side.

The snippet

<iframe
  src="https://osteocom.me/en/embed/content-licensing/PRODUCT_ID?clientId=CLIENT_ID&partnerUserId=USER_ID"
  width="100%"
  height="420"
  style="border: 0;"
  loading="lazy"
></iframe>

Replace PRODUCT_ID, CLIENT_ID and USER_ID with the values from your setup. The recommended height is around 420px; the card is responsive and behaves well also inside narrower containers. To force a theme, append &theme=light, &theme=dark or &theme=auto to the URL (default auto).

Parameters

Path

zone*

String

Required

Use en (recommended) as the default unless explicitly agreed otherwise with the Osteocom content team. The zone segment is under review and will be simplified in a future iteration.

productId*

String

Required

The id of the Osteocom course. Must be in your per-partner catalog.

Query

clientId*

String

Required

Your partner id.

partnerUserId*

String

Required

The stable, unique identifier of the customer in your platform. See Setup.

theme

String

Optional

light, dark or auto. Default auto (follows the customer's system preference).

curr

String

Optional

EUR (default), USD, GBP, CHF or CAD. The price is converted server-side; if omitted, the zone default is used.

Display options

Control how the embed is rendered. Try them live in the Playground.

variant

String

Optional

card (default) renders the full course card; button renders a compact CTA button.

label

String

Optional

CTA label, for both card and button: cta-with-price (default), cta (plain), or price (price only). The card already shows the price, so cta or price avoid repeating it.

size

String

Optional

Button size (only when variant=button): xs, sm, default (default), or lg.

buttonWidth

Int

Optional

Custom button width in pixels (only when variant=button), clamped to 60–800. If unset, the button is full width.

Example with dark theme

<iframe
  src="https://osteocom.me/en/embed/content-licensing/64f1a2b3c4d5e6f7a8b9c0d1?clientId=cl_abc123&partnerUserId=user-9988&theme=dark"
  width="100%"
  height="420"
  style="border: 0; border-radius: 12px;"
  loading="lazy"
></iframe>

The visual surface around the iframe (borders, shadows, corner radius, container padding) is fully under your control via your platform's CSS — like any other element on your page.

Recommended <iframe> attributes

• loading="lazy" — defer loading until the iframe is near the viewport, useful when multiple cards live on the same page.
• style="border: 0;" — the card has its own border-radius and shadow rendered by Osteocom; a default browser border looks odd around it.
• title="Osteocom course" — recommended for accessibility (screen readers).

Watch out for

Stable partnerUserId

If you change how you generate user ids for your customers (for example switching from numeric to UUID), Osteocom can no longer link a customer to their previous purchases. Define the format at onboarding and keep it stable.

Don't embed from non-whitelisted domains

Browsers will block the iframe with a Content-Security-Policy violation if the host page is not in the whitelist. If you add a new domain or subdomain, let us know before going live there.

CDN and caching

If your platform sits behind a CDN with aggressive caching, make sure the URL of the iframe (in particular partnerUserId) is not included in shared cache keys. Otherwise a customer might see another customer's already-purchased state.