IFrame Component Usage

📘
IFrame only available for those using the Telegra Patient Dashboard

Prerequisites

Every iframe requires a valid access token so the component can authenticate the user. Use the SSO flow described in the public docs: https://telegra-vfmh.readme.io/reference/authenticateviasso#/ to generate affiliate access tokens.

Frontend Flow (iframe as the frontend)

1. Build the iframe URL

Base URL

Production: https://patient.telegramd.com
Development: https://dev-patient.telegramd.com
White-label: use the custom domain provided during onboarding.

Path: /iframe/:componentName?

The componentName path segment selects which component to render.
Available components:

Component	Description	URL Pattern
Dashboard	Full patient dashboard	`{baseURL}?iframe=true`
Channels	Channel list for the current user	`{baseURL}/iframe/channels`
Channel	Renders a specific channel	`{baseURL}/iframe/channel?id={channelId}`
Orders	Lists every order available to the user	`{baseURL}/iframe/orders`
Order	Order summary view	`{baseURL}/iframe/order?id={orderId}`
Visit	Visit workflow for authenticated or unauthenticated users	`{baseURL}/iframe/visit?id={orderId}`

Query parameters

Param	Required	Notes
`affiliate`	Yes	Affiliate identifier used to load configuration.
`access_token`	Yes	JWT generated via SSO tutorial; required for iframe mode.
`iframe`	Yes	Must be set to `true` to opt into iframe mode.
`id`	No	Resource identifier (order/channel) when needed by a component.

2. Render the iframe in your application

Use standard HTML <iframe> tags. Replace <AFFILIATE_ID> and <ACCESS_TOKEN> with real values before deploying.

<iframe
  title="patient_dashboard"
  src="https://patient.telegramd.com?iframe=true&affiliate=<AFFILIATE_ID>&access_token=<ACCESS_TOKEN>"
  height="100%"
  width="100%"
  frameborder="0"
></iframe>

<iframe
  title="patient_channels"
  src="https://patient.telegramd.com/iframe/channels?affiliate=<AFFILIATE_ID>&access_token=<ACCESS_TOKEN>"
  height="90%"
  width="100%"
  frameborder="0"
></iframe>

<iframe
  title="patient_channel"
  src="https://patient.telegramd.com/iframe/channel?id=chn::7ca8dc03-76a9-4dd6-8615-99d724d25279&affiliate=<AFFILIATE_ID>&access_token=<ACCESS_TOKEN>"
  height="550"
  width="800"
  frameborder="0"
></iframe>

<iframe
  title="patient_orders"
  src="https://patient.telegramd.com/iframe/orders?affiliate=<AFFILIATE_ID>&access_token=<ACCESS_TOKEN>"
  height="90%"
  width="100%"
  frameborder="0"
></iframe>

<iframe
  title="patient_order"
  src="https://patient.telegramd.com/iframe/order?id=order::2360682e-50a5-4a2b-8b9e-3d0503e439b1&affiliate=<AFFILIATE_ID>&access_token=<ACCESS_TOKEN>"
  height="550"
  width="800"
  frameborder="0"
></iframe>

<iframe
  title="patient_visit"
  src="https://patient.telegramd.com/iframe/visit?id=order::6f8e4c5b-440c-4aa3-a148-d3fca9b2eef0&affiliate=<AFFILIATE_ID>&access_token=<ACCESS_TOKEN>"
  height="90%"
  width="100%"
  frameborder="0"
></iframe>

3. Iframe lifecycle

The iframe authenticates with the supplied access token and loads the affiliate record.
The embedded application fetches the configuration tied to that affiliate.
The UI renders with the affiliate’s styles.
The component selection logic inspects the iframe URL to determine which module to display.
The requested component is rendered for the user.

4. Catching Iframe Events

Detecting Online Visit Completion (Iframe Integration)

If you embed Telegra's Online Visit in an iframe, your site can detect when the visit is finished and redirect the patient appropriately.

What event to listen for

When the visit is completed, the iframe sends a browser postMessage event to the parent page.

This event only gets sent if you provide a redirectUrl parameter on the iframe url. Please ensure to include a redirectUrl parameter.

Event payload:

{
  "type": "ovs_completion",
  "redirectUrl": "https://your-redirect-url..."
}

What you need to implement

Add a message event listener on your parent page.
Verify the message origin matches your white-labelled frontend domain.
Check that event.data.type === "ovs_completion".
Use event.data.redirectUrl to route the user (or run your own completion logic).

<script>
  window.addEventListener('message', function (event) {
    // REQUIRED: only trust messages from your Telegra iframe origin
    if (event.origin !== 'https://YOUR-TELEGRA-FRONTEND-DOMAIN') return;

    var data = event.data;
    if (!data || data.type !== 'ovs_completion') return;

    // Visit completed
    if (typeof data.redirectUrl === 'string' && data.redirectUrl.length > 0) {
      window.location.assign(data.redirectUrl);
    }
  });
</script>

Iframe URL requirement

Include iframe=true in the iframe URL so iframe-mode completion messaging is enabled.

Example:

https://YOUR-TELEGRA-visit?...&iframe=true Notes The completion message is sent near the end of the flow (closing step). If redirectUrl is present, it may already include order metadata (such as orderId). Always validate event.origin for security