> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metriport.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Embedding Metriport
> Embed the Metriport app directly into your application.
## Overview
Metriport provides embeddable views that let your users access Metriport functionality from inside your application.
You can open an embedded view in one of two ways:
* **Redirect**: Send the user from your application to the Metriport embedded app URL.
* **Iframe**: Render the Metriport embedded app inside a page in your application.
**Available embedded views:**
* **Patient View**: Display a patient's medical data.
* **Transitions of Care (TCM)**: Monitor patient admissions, transfers, and discharges.
## How embedding works
To load an embedded Metriport view:
1. Generate an embed token from your backend.
2. Build the embedded app URL for the view you want to show.
3. Include the embed token in the URL as the `access_token`.
4. Redirect the user to that URL or render the URL in an iframe.
An embed token authorizes access to the embedded Metriport app for a limited amount of time. It should be generated by your backend because creating an embed token requires your Metriport API key.
Do not generate embed tokens from frontend code. Your API key must not be exposed in the browser.
Embed tokens have a maximum expiration of 10 hours, or 36000 seconds. For security,
consider using shorter expiration times.
***
## Generate an embed token
Create an embed token using the [Create Embed Token](/medical-api/api-reference/token/create-embed-token) endpoint.
```bash curl theme={null}
curl -X POST "https://api.metriport.com/medical/v1/token/embed" \
-H "x-api-key: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"expirationInSeconds": 3600
}'
```
```javascript SDK theme={null}
import { MetriportMedicalApi } from "@metriport/api-sdk";
const metriport = new MetriportMedicalApi("YOUR_API_KEY");
const response = await metriport.createEmbedToken({
expirationInSeconds: 3600,
});
console.log(response.token);
```
The response includes a token. Use that token when building the embedded app URL.
```json id theme={null}
{
"token": "11111111-1111-1111-1111-111111111111"
}
```
***
## Environments
Use the embedded app URL that matches the environment where you generated the embed token.
| Environment | Embedded app base URL |
| :---------- | :-------------------------------------------- |
| Production | `https://ehr.metriport.com/embed/app` |
| Sandbox | `https://ehr.sandbox.metriport.com/embed/app` |
Sandbox embed tokens must be used with the sandbox embedded app URL.
Production embed tokens must be used with the production embedded app URL.
***
## Patient View
Use the Patient View to display a patient's medical data inside your application.
### URL format
```text Production theme={null}
https://ehr.metriport.com/embed/app/patient/{patientId}#access_token={token}
```
```text Sandbox theme={null}
https://ehr.sandbox.metriport.com/embed/app/patient/{patientId}#access_token={token}
```
Replace:
* `{patientId}` with the ID of the patient to display.
* `{token}` with the embed token generated by your backend.
### Redirect example
Use a redirect when you want to send the user from your application to the embedded Metriport page.
```javascript Redirect theme={null}
const token = "11111111-1111-1111-1111-111111111111";
const patientId = "00000000-0000-0000-0000-000000000000";
const embedUrl = `https://ehr.metriport.com/embed/app/patient/${patientId}#access_token=${token}`;
window.location.href = embedUrl;
```
`window.location.href = embedUrl` navigates the browser to the embedded Metriport URL.
### Iframe example
Use an iframe when you want to render the embedded Metriport view directly inside a page in your application.
```html Iframe theme={null}
```
The iframe's `src` should be the embedded app URL for the view you want to render.
***
## Transitions of Care (TCM)
Use the Transitions of Care view to monitor patient admissions, transfers, and discharges.
### URL format
```text Production theme={null}
https://ehr.metriport.com/embed/app/transitions-of-care#access_token={token}
```
```text Sandbox theme={null}
https://ehr.sandbox.metriport.com/embed/app/transitions-of-care#access_token={token}
```
Replace `{token}` with the embed token generated by your backend.
### Redirect example
Use a redirect when you want to send the user from your application to the embedded Metriport page.
```javascript Redirect theme={null}
const token = "11111111-1111-1111-1111-111111111111";
const embedUrl = `https://ehr.metriport.com/embed/app/transitions-of-care#access_token=${token}`;
window.location.href = embedUrl;
```
### Iframe example
Use an iframe when you want to render the embedded Metriport view directly inside a page in your application.
```html Iframe theme={null}
```
***
## Security considerations
* **Generate tokens server-side**: Embed tokens require your Metriport API key, so they should be created by your backend.
* **Do not expose your API key**: Never include your Metriport API key in frontend code, mobile apps, or publicly accessible files.
* **Use short token expirations**: Embed tokens can expire after up to 10 hours, but shorter durations reduce risk.
* **Use the correct environment**: Sandbox tokens should only be used with sandbox URLs, and production tokens should only be used with production URLs.
## Related resources
* [Create Embed Token API Reference](/medical-api/api-reference/token/create-embed-token)