API Reference
Start typing to search…

IFrame Component Usage

The purpose of this document is to explain how you can utilize the different IFRAME components that Telegra makes available to its clients.

📘

3### 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:
ComponentDescriptionURL Pattern
DashboardFull patient dashboard{baseURL}?iframe=true
ChannelsChannel list for the current user{baseURL}/iframe/channels
ChannelRenders a specific channel{baseURL}/iframe/channel?id={channelId}
OrdersLists every order available to the user{baseURL}/iframe/orders
OrderOrder summary view{baseURL}/iframe/order?id={orderId}
VisitVisit workflow for authenticated or unauthenticated users{baseURL}/iframe/visit?id={orderId}

Query parameters

ParamRequiredNotes
affiliateYesAffiliate identifier used to load configuration.
access_tokenYesJWT generated via SSO tutorial; required for iframe mode.
iframeYesMust be set to true to opt into iframe mode.
idNoResource 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

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

4. Messages Demo