Elements
Photon Elements are a set of prebuilt UI-components that can be used to add prescribing functionality into any web-based clinical tool.
Elements are built using WebComponent technology and can be used in any frontend app - regardless of framework. Elements do not use outdated iframe
technology!
Elements automatically handle authentication and ensure that only authorized prescribers can send prescriptions. The UI is designed to be responsive across various screen sizes and can be easily styled.

This UI can be embedded directly in your clinical app.
<photon-client
id="YOUR_CLIENT_ID"
org="YOUR_ORG_ID"
>
<photon-prescribe-workflow/>
</photon-client>
Get Started
First install our elements package from NPM:
npm i @photonhealth/elements
If using a framework like React, you'll need to dynamically import the package. This will register the custom elements with the browser's CustomElementRegistry
.
import("@photonhealth/elements")
You can also import within head
tag in HTML:
<script src="https://cdn.rx.dev/elements/@latest/dist/index.js" type="module"></script>
Client Element
Next, add the photon-client
element toward the top level of your application.
id
- a public identifier registered to your application (with whitelisted URLs)
org
- identifies which organization to use for authentication
These values can be found in the settings page of the Photon App, or in the Sandbox App.
All photon-
elements must be contained within the photon-client
to function correctly.
In non-prod environments, you can pass the dev-mode="true"
flag to photon-client
. Be sure you're using the client id and organization id from the sandbox environment too.
Prescribe Element
The photon-prescribe-workflow
can be added anywhere within the photon-client
and renders a basic prescribe workflow. It accepts the following props:
Property | Description |
---|---|
patient-id | ID of the patient receiving the prescription |
template-ids | Templates that should be pre-selected |
enable-order | Enables the selection of a pharmacy |
pharmacy-id | Set a preselected pharmacy (enable-order set to true is a prerequisite for this to take effect) |
Here's an example of a Photon Element that enables orders to a preselected pharmacy.
<photon-prescribe-workflow
patient-id="pat_9876zyxw"
enable-order="true"
pharmacy-id="phr_1234abcd"
/>
Events
Event payloads will be on detail
.
document.addEventListener('photon-order-created', (e) => {
console.log('Order Info: ', e.detail.order);
});
Event Name | Description | Detail |
---|---|---|
photon-prescriptions-created | Fired after prescriptions have been successfully created. | { prescriptions: Prescription[] } |
photon-order-created | If the enable-order flag is set and the prescriber selects to "Send Order", this will be fired after successfully creating the prescription and order. | { order: Order } |
photon-prescriptions-error | Fired upon errors creating prescriptions. | { errors: GraphQLError[] } |
photon-order-error | Fired upon errors creating the order. | { errors: GraphQLError[] } |
Framework Support
Below you'll find example integrations for React, Angular, and Vue.
import("@photonhealth/elements").catch(() => {});
import { createRef, useEffect, useState } from "react";
function App() {
const photonPrescribeRef = createRef();
useEffect(() => {
const log = () => {
console.log("treatment prescribed!");
}
if (photonPrescribeRef.current) {
photonPrescribeRef.current.addEventListener("photon-prescribe-success", log);
const removal = () => photonPrescribeRef.current.removeEventListener("photon-prescribe-success", log);
return () => removal()
}
}, [])
return (
<div>
<photon-client
id="CLIENT_ID"
org="ORGANIZATION_ID"
>
<photon-prescribe-workflow ref={photonPrescribeRef} />
</photon-client>
</div>
);
}
export default App;
import { Component } from '@angular/core';
import('@photonhealth/webcomponents').catch(() => {});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-app';
public log() {
console.log("treatment prescribed!");
}
}
...
<div>
<photon-client
id="CLIENT_ID"
org="ORGANIZATION_ID"
>
<photon-prescribe-workflow (photon-prescribe-success)="log()"></photon-prescribe-workflow>
</photon-client>
</div>
<script setup lang="ts">
import("@photonhealth/webcomponents").catch((err) => {});
const log = () => {
console.log("treatment prescribed!");
}
</script>
<template>
<div>
<photon-client
id="CLIENT_ID"
org="ORGANIZATION_ID"
>
<photon-prescribe-workflow v-on:photon-prescribe-success="log()" />
</photon-client>
</div>
</template>
Updated about 11 hours ago