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.
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
componentNamepath 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. Messages Demo
Updated about 1 month ago