Customizing the Experience

Installing

Add the loader script to any page that should display Blueprint:

<script>
  window.blueprintSettings = { /* your settings */ }
</script>
<script src="https://embed.blueprint.ai/index.min.js"></script>

In the sandbox environment use https://embed.staging.blueprint.ai/index.min.js.

Order matters. window.blueprintSettings must be assigned before the loader script runs.
The loader reads it once, on load, and there is no way to change settings afterward.

Single-page applications: the loader mounts on DOMContentLoaded. If your framework injects the
script tag after that event has already fired, the widget never appears. Put both script tags in your
static HTML shell, not in a component. See
Widget Troubleshooting.

Display modes

Mode	How to get it	What you get
Compact	`containerId` + `isMinifiedView: true`	Small embedded panel with recording controls and note generation. Most customizable branding. No note viewing or editing.
Inline	`containerId`, no `isMinifiedView`	Full Blueprint UI nested in your element, including note viewing and editing.
Floating	no `containerId`	A launcher button fixed in a screen corner. Click to open. Position, color, and icons are customizable.

Compact is the current default experience and the one we recommend for new integrations. Inline is
the older full widget; choose it only if you need the built-in note review and editing screens, or the
onCopyNoteClicked hand-off (see UI Only Integrations).

Compact

<!DOCTYPE html>
<html>
<head>
  <script>
    window.blueprintSettings = {
      containerId: 'blueprint-container',
      width: '250px',
      height: '220px',
      isMinifiedView: true,
      minifiedViewSettings: {
        container: {
          borderColor: '#E4E5E6',
          borderWidth: '1px',
          borderRadius: '8px',
          backgroundColor: '#3A65620A'
        },
        buttons: {
          borderRadius: '5px',
          primaryBackgroundColor: '#2D54E8',
          primaryTextColor: '#FFFFFF',
          secondaryBackgroundColor: '#FFFFFF',
          secondaryTextColor: '#2D54E8'
        },
        inputs: {
          borderRadius: '25px'
        },
        audioIndicatorColor: '#2D54E8'
      }
    }
  </script>
  <script src="https://embed.blueprint.ai/index.min.js"></script>
</head>
<body>
  <div id="blueprint-container"></div>
</body>
</html>

Inline

<!DOCTYPE html>
<html>
<head>
  <script>
    window.blueprintSettings = {
      containerId: 'blueprint-container',
      copyNoteButtonText: 'Export to EHR',
      patientReference: 'Patient',
      hideTreatmentPlan: true,
      hidePreviousSessions: true,
      width: '400px',
      height: '600px'
    }
  </script>
  <script src="https://embed.blueprint.ai/index.min.js"></script>
</head>
<body>
  <div id="blueprint-container"></div>
</body>
</html>

Floating

<!DOCTYPE html>
<html>
<head>
  <script>
    window.blueprintSettings = {
      position: 'bottom-right',
      width: '350px',
      height: '550px',
      buttonColor: '#2D54E8',
      isDraggable: true,
      isAlwaysOpen: false,
      copyNoteButtonText: 'Send to EHR'
    }
  </script>
  <script src="https://embed.blueprint.ai/index.min.js"></script>
</head>
<body>
</body>
</html>

All settings

Layout and placement

Setting	Type	Default	Notes
`containerId`	string	—	ID of the element to mount into. Omit for Floating mode.
`width`	string	`'350px'`	Any CSS length
`height`	string	`'550px'`	Any CSS length
`position`	`'bottom-right'` \| `'bottom-left'` \| `'top-right'` \| `'top-left'`	`'bottom-right'`	Floating mode only
`isDraggable`	boolean	`true`	Floating mode only — lets the clinician drag the widget
`isAlwaysOpen`	boolean	`false`	Hides the launcher; the widget is always open. Forced to `true` when `containerId` is set.
`openButtonIcon`	string (SVG markup)	Blueprint icon	Floating launcher, closed state
`closeButtonIcon`	string (SVG markup)	Close icon	Floating launcher, open state
`buttonColor`	string	`'#2D54E8'`	Floating launcher background

openButtonIcon and closeButtonIcon are inserted as raw HTML. Only ever pass markup you control —
never anything derived from user input.

width and height apply to the widget's normal state. If the clinician minimizes or expands the
widget it uses fixed sizes (152×56 and 350×550) and your values are not applied to those states.

Mode

Setting	Type	Default	Notes
`isMinifiedView`	boolean	`false`	`true` for the compact widget
`isMiniWidgetV2`	boolean	`true`	Selects the current compact widget implementation. Only takes effect together with `isMinifiedView: true`. Leave it alone unless you have a reason.

isMiniWidgetV2 changed default in February 2026, from false to true, and now requires
isMinifiedView: true to have any effect. If you set isMiniWidgetV2: true without
isMinifiedView: true you get the older full widget — probably not what you want. Set
isMinifiedView: true and leave isMiniWidgetV2 at its default.

Content and terminology

Setting	Type	Default	Compact widget
`copyNoteButtonText`	string	`'Copy Note'`	No effect
`patientReference`	string	`'Client'`	No effect
`hideTreatmentPlan`	boolean	`false`	No effect
`hidePreviousSessions`	boolean	`false`	No effect

These four apply to the Inline / Floating full widget only. They are accepted on the compact
widget but do nothing. If relabeling the copy button or using "Patient" instead of "Client" matters
to you, use Inline mode.

Fonts

Setting	Type	Notes
`fontHref`	string	URL of a stylesheet to load inside the widget
`fontFamily`	string	CSS `font-family` value to apply

Both are required together — supplying one without the other has no effect.

window.blueprintSettings = {
  containerId: 'blueprint-container',
  isMinifiedView: true,
  fontHref: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap',
  fontFamily: 'Inter, sans-serif'
}

Content Security Policy

Setting	Type	Notes
`cspNonce`	string	Per-request nonce, applied to the stylesheet the loader injects into your page

Required if you enforce style-src. Without it the widget's styles are blocked and the widget appears
unstyled or invisible. You also need script-src and frame-src entries — see
Environments & Base URLs.

Compact widget theming

Only applies when isMinifiedView: true.

Setting	Default
`minifiedViewSettings.container.borderColor`	`'#e2e8f0'`
`minifiedViewSettings.container.borderWidth`	`'1px'`
`minifiedViewSettings.container.borderRadius`	`'12px'`
`minifiedViewSettings.container.backgroundColor`	`'#fff'`
`minifiedViewSettings.buttons.borderRadius`	`'24px'`
`minifiedViewSettings.buttons.primaryBackgroundColor`	Blueprint blue
`minifiedViewSettings.buttons.primaryTextColor`	white
`minifiedViewSettings.buttons.primaryBorderColor`	—
`minifiedViewSettings.buttons.primaryBorderWidth`	`'1px'`
`minifiedViewSettings.buttons.secondaryBackgroundColor`	white
`minifiedViewSettings.buttons.secondaryTextColor`	Blueprint blue
`minifiedViewSettings.buttons.secondaryBorderColor`	—
`minifiedViewSettings.buttons.secondaryBorderWidth`	`'1px'`
`minifiedViewSettings.inputs.borderRadius`	`'5px'`
`minifiedViewSettings.audioIndicatorColor`	`'#68E19F'`

All values are CSS strings. There are no CSS custom properties and no stylesheet override hook — the
widget renders in an iframe, so your page's CSS cannot reach it. minifiedViewSettings is the full
extent of visual customization.

Localization

The widget is English only. There is no locale or i18n setting.

Controlling the UI — authenticating, selecting a client, events
Widget Reference — the complete API surface in one table
Widget Troubleshooting — when it does not appear