UI Only Integrations

Your application hosts part of the Blueprint web application inside it, so there is nothing for your
users to download or install. Your frontend sends JavaScript messages to the Blueprint UI, and the
Blueprint UI fires events your application can listen for.

In this method the clinician authenticates to Blueprint themselves. Each clinician needs a Blueprint
account, but the embedded UI makes signing up quick — and a clinician already signed in to Blueprint
(through the web app or the browser extension) is authenticated automatically.

Blueprint needs a client record for the person being treated. The embedded UI lets the clinician
create a client or search their existing list. Your frontend can also send a message to select a
client, or to start creating one using information already on screen.

The minimum

1. Add the Blueprint loader script to any page that should show Blueprint, and configure it.
2. The first time a clinician uses it, they are prompted to create a Blueprint account or sign in.
3. Clinicians already signed in to Blueprint are authenticated automatically.

That is genuinely all that is required. From there:

4. The clinician creates or selects a client in the embedded UI.
5. They grant the browser microphone permission.
6. They start recording. Blueprint captures the audio, uploads it, and gives the clinician feedback
   on level and connectivity.
7. When they end the session, Blueprint generates the documentation.
8. They review and edit it in the embedded UI, then move it into your application.

<script>
  window.blueprintSettings = {
    containerId: 'blueprint-container',
    isMinifiedView: true,
    width: '250px',
    height: '220px'
  }
</script>
<script src="https://embed.blueprint.ai/index.min.js"></script>

<div id="blueprint-container"></div>

window.blueprintSettings must be assigned before the script tag. See
Customizing the Experience, and
Widget Troubleshooting if the widget does not appear — the most common
causes are CSP and single-page-app script injection order.

Getting the note into your application

This is the part to think about before you commit to UI Only, because the options differ from what
you might expect.

The clinician copies it

The default. The clinician clicks a button in the embedded UI and pastes the note into your
application. No code from you.

Your page receives the note directly

There is a callback, onCopyNoteClicked, that hands your page the note text when the clinician
clicks the copy button — and a copyNoteButtonText setting to relabel that button to something like
"Export to EHR".

Both of these only work on the older full widget, not on the current default. To use them you must
opt out of the compact widget by leaving isMinifiedView unset:

window.blueprintSettings = {
  containerId: 'blueprint-container',
  copyNoteButtonText: 'Export to EHR',
  width: '400px',
  height: '600px'
}

Blueprint.onCopyNoteClicked(({ sessionId, note }) => {
  document.getElementById('chart-note').value = note
})

The full widget includes note viewing and editing, so this is a coherent choice — but you are
electing into the older experience. See Widget Reference for exactly which
callbacks and settings work on which widget.

Your backend fetches it

The approach we recommend, and the only one that works on the current default widget:

Blueprint.onNoteGenerated(async ({ sessionId }) => {
  const note = await fetch(`/my-backend/blueprint/note?sessionId=${sessionId}`)
    .then(r => r.json())
  insertIntoChart(note)
})

Your backend then calls GET /v2/sessions/{sessionId}/progress-note with partner credentials.

That requires a backend and partner credentials — which means it is really
UI + API. If you need notes flowing into your database automatically,
that is the method to choose. UI Only's honest ceiling is "the clinician moves the note across."

Improving the experience

Select the client automatically. When the clinician navigates to a chart in your application, tell
Blueprint which client that is so they do not have to search:

Blueprint.selectClient(blueprintClientId)

You need Blueprint's client ID. In UI Only you have no API access to look it up, so either store it
when the clinician first creates the client, or accept that they select the client in the embedded UI.
This is one of the sharper limits of UI Only.

React to session lifecycle. These fire on the current widget and are useful for disabling
conflicting UI while recording:

Blueprint.onSessionRecordingStarted(({ sessionId }) => setRecording(true))
Blueprint.onSessionRecordingEnd(({ sessionId })   => setRecording(false))

Customize the appearance. Colors, border radius, fonts, size, and placement — see
Customizing the Experience.

Next

• Customizing the Experience — every setting
• Controlling the UI — every method and callback
• Widget Reference — what works on which widget
• UI + API Integrations — if you need notes in your database